/* ==================================================================
 *  responsive.css — Adaptación a celulares, tablets y computadoras
 * ==================================================================
 *
 *  Se carga AL FINAL de la página (includes/footer.php), después de los
 *  estilos propios de cada pantalla, para poder corregirlos sin tocar
 *  cada archivo por separado.
 *
 *  Puntos de corte usados en todo el sistema:
 *     ≤ 1024px  tablet horizontal / laptop pequeña
 *     ≤  768px  tablet vertical y celulares grandes (el menú se oculta)
 *     ≤  640px  celulares (las tablas pasan a tarjetas)
 *     ≤  380px  celulares pequeños (iPhone SE, Android de gama baja)
 *
 *  Índice
 *    0. Base
 *    1. Buscadores (arreglo del ícono, afecta a todos los tamaños)
 *    2. Barra superior del panel en celular
 *    3. Formularios y botones táctiles
 *    4. Tablas → tarjetas en celular
 *    5. Ajustes por pantalla
 *    6. Accesibilidad
 * ================================================================== */


/* ─── 0. Base ─────────────────────────────────────────────────────── */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img, video { max-width: 100%; height: auto; }

/* Textos largos (direcciones, nombres, conceptos) no deben empujar el
   ancho de la página: se parten donde haga falta. */
.admin-main,
.admin-main td,
.admin-main p { overflow-wrap: break-word; }



/* ─── 1. Buscadores ───────────────────────────────────────────────── *
 * Las reglas originales apuntaban a "> i", pero Lucide reemplaza el <i>
 * por un <svg> al cargar, así que la lupa quedaba suelta ENCIMA del campo.
 */
.enl-search-wrap > svg,
.ch-search-wrap  > svg,
.mn-search-wrap  > svg {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: #94a3b8;
    pointer-events: none;
}


/* ─── 2. Barra superior del panel en celular ─────────────────────── */

.sb-appbar { display: none; }

/* Se activa en celulares/tablets verticales y también en celulares en
   HORIZONTAL (poca altura), donde el menú fijo ocuparía media pantalla. */
@media (max-width: 768px), (max-width: 950px) and (max-height: 500px) {
    /* Menú lateral oculto; se abre con el botón (mismo script de siempre) */
    .sidebar { width: 280px !important; transform: translateX(-100%); }

    /* Alto del menú = lo que REALMENTE se ve.
       El menú traía "min-height: 100vh", pero en iPhone 100vh es el alto de
       la pantalla CON LAS BARRAS DEL NAVEGADOR ESCONDIDAS: el menú quedaba
       más alto que lo visible, su parte de abajo (usuario y "Cerrar sesión")
       caía detrás de la barra inferior y no se podía deslizar hasta ella.
       100dvh descuenta esas barras; si el contenido no cabe, se desliza. */
    .sidebar {
        min-height: 0 !important;
        height: 100vh;                 /* respaldo para navegadores antiguos */
        height: 100dvh;
        max-height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;  /* deslizar el menú no mueve la página */
        -webkit-overflow-scrolling: touch;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    /* Con alto fijo, los bloques del menú no deben encogerse para caber
       (la tarjeta del usuario salía aplastada): si no alcanza, se desliza. */
    .sidebar > * { flex-shrink: 0; }
    .sidebar .sb-nav { flex: 1 0 auto; }

    /* iPhone con iOS anterior a 15.4 (sin dvh): alto medido por responsive.js */
    html.rs-alto-js .sidebar {
        height: var(--rs-alto-visible) !important;
        max-height: var(--rs-alto-visible) !important;
    }
    .sidebar.sb-open { transform: translateX(0); }
    .admin-main { margin-left: 0 !important; }
    .sb-overlay.active { display: block; }

    .sb-appbar {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 180;
        height: calc(58px + env(safe-area-inset-top, 0px));
        padding: env(safe-area-inset-top, 0px) 0.85rem 0 max(0.85rem, env(safe-area-inset-left, 0px));
        background: #0a0f1e;
        color: #fff;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    }

    /* El botón de menú vive ahora dentro de la barra */
    .sb-appbar .sb-mobile-toggle {
        position: static;
        display: flex;
        width: 44px; height: 44px;
        flex-shrink: 0;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.08);
    }

    .sb-appbar-brand {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        min-width: 0;
        flex: 1;
        color: #fff;
        text-decoration: none;
    }
    .sb-appbar-mark {
        width: 32px; height: 32px;
        border-radius: 9px;
        background: var(--primary);
        display: grid; place-items: center;
        font-weight: 800; font-size: 0.95rem;
        flex-shrink: 0;
    }
    .sb-appbar-name {
        font-weight: 700;
        font-size: 0.98rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sb-appbar-name span { color: var(--primary); }

    .sb-appbar-action {
        width: 44px; height: 44px;
        border-radius: 10px;
        display: grid; place-items: center;
        background: var(--primary);
        color: #fff;
        flex-shrink: 0;
    }
    .sb-appbar-action svg { width: 20px; height: 20px; }

    /* Contenido debajo de la barra (y respetando el notch del iPhone) */
    .admin-main {
        padding-top: calc(58px + 1.1rem + env(safe-area-inset-top, 0px)) !important;
        padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* El menú lateral se abre por encima de la barra */
    .sidebar { z-index: 260; }
    .sb-overlay { z-index: 255; }
}

@media (max-width: 380px) {
    .admin-main {
        padding-left: 0.7rem !important;
        padding-right: 0.7rem !important;
    }
}


/* ─── 3. Formularios y botones táctiles ──────────────────────────── */

@media (max-width: 768px), (max-width: 950px) and (max-height: 500px) {
    /* iPhone hace zoom automático al tocar un campo con letra < 16px.
       Con 16px la pantalla se queda quieta al escribir. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Área táctil cómoda (mínimo recomendado: 44px) */
    .admin-main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .admin-main select {
        min-height: 44px;
    }
    .admin-main button,
    .admin-main .btn-primary,
    .admin-main [class*="-btn"]:not([class*="-btns"]) {
        min-height: 42px;
    }

    /* Títulos de página proporcionados a la pantalla */
    .admin-main h1 {
        font-size: clamp(1.4rem, 5.6vw, 1.9rem) !important;
        line-height: 1.2 !important;
    }
}


/* ─── 4. Tablas → tarjetas en celular ────────────────────────────── */

@media (max-width: 640px) {

    /* Los contenedores con scroll horizontal ya no hacen falta */
    .rs-cards-wrap { overflow: visible !important; }

    /* 4a. Tablas genéricas (caja, reportes…): cada fila es una tarjeta y
       cada celda muestra su título a la izquierda (data-label, lo pone
       assets/js/responsive.js leyendo los encabezados). */
    table.rs-cards,
    table.rs-cards tbody,
    table.rs-cards tfoot,
    table.rs-cards tr,
    table.rs-cards td { display: block; width: 100%; }
    table.rs-cards thead { display: none; }

    table.rs-cards tbody tr {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 0.55rem 0.85rem;
        margin-bottom: 0.65rem;
    }
    table.rs-cards td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.9rem;
        padding: 0.4rem 0 !important;
        border: 0 !important;
        border-bottom: 1px dashed #eef2f6 !important;
        text-align: right !important;
        white-space: normal !important;
    }
    table.rs-cards td:last-child { border-bottom: 0 !important; }
    table.rs-cards td::before {
        content: attr(data-label);
        flex-shrink: 0;
        max-width: 45%;
        text-align: left;
        font-size: 0.74rem;
        font-weight: 700;
        color: #64748b;
    }
    table.rs-cards td:not([data-label])::before,
    table.rs-cards td[data-label=""]::before { display: none; }
    table.rs-cards td[data-label=""] { justify-content: flex-end; }
    /* Filas de "sin resultados" (una sola celda que ocupa todo) */
    table.rs-cards td[colspan] { display: block; text-align: center !important; }
    table.rs-cards td[colspan]::before { display: none; }
    /* Totales al pie */
    table.rs-cards tfoot tr {
        display: flex; justify-content: space-between; gap: 1rem;
        padding: 0.75rem 0.85rem;
        border-radius: 12px;
        background: #0f172a; color: #fff;
    }
    table.rs-cards tfoot td { border: 0 !important; width: auto; padding: 0 !important; color: inherit; }
    table.rs-cards tfoot td::before { display: none; }
    table.rs-cards tfoot td:empty { display: none; }


}


@media (max-width: 900px), (max-width: 950px) and (max-height: 500px) {

    .rs-lista-wrap { overflow: visible !important; }

    /* 4b. Listado de encomiendas (.enl-table) y últimas del panel
       (.dv2-table): tarjeta con el estado arriba, quién envía a quién,
       la ruta y el importe. Sin columnas que obliguen a deslizar. */
    .enl-table, .enl-table tbody,
    .dv2-table, .dv2-table tbody { display: block; width: 100%; }
    /* En tablet caben dos tarjetas por fila */
    .enl-table tbody, .dv2-table tbody {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
        gap: 0.7rem;
    }
    .enl-table tbody tr, .dv2-table tbody tr { margin: 0 !important; }
    .enl-table thead, .dv2-table thead { display: none; }

    .enl-table tbody tr,
    .dv2-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: 0.75rem;
        row-gap: 0.45rem;
        align-items: center;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        padding: 0.85rem 0.95rem;
        margin: 0 0 0.7rem;
    }
    .enl-table tbody tr:hover,
    .dv2-table tbody tr:hover { background: #fff; }

    .enl-table td, .dv2-table td {
        display: block;
        padding: 0 !important;
        border: 0 !important;
        white-space: normal !important;
    }
    /* Etiqueta pequeña encima de los nombres */
    .enl-table td:nth-child(2)::before,
    .enl-table td:nth-child(3)::before,
    .dv2-table td:nth-child(2)::before,
    .dv2-table td:nth-child(3)::before {
        display: block;
        font-size: 0.68rem;
        font-weight: 700;
        color: #94a3b8;
        margin-bottom: 0.1rem;
    }
    .enl-table td:nth-child(2)::before,
    .dv2-table td:nth-child(2)::before { content: "Remitente"; }
    .enl-table td:nth-child(3)::before,
    .dv2-table td:nth-child(3)::before { content: "Destinatario"; }

    /* ── .enl-table: 1 código · 2 rem · 3 dest · 4 ruta · 5 entrega ·
          6 estado · 7 chofer · 8 precio · 9 pago · 10 fecha · 11 acciones */
    .enl-table td:nth-child(1)  { grid-column: 1; grid-row: 1; }
    .enl-table td:nth-child(6)  { grid-column: 2; grid-row: 1; justify-self: end; }
    .enl-table td:nth-child(2)  { grid-column: 1 / -1; grid-row: 2; }
    .enl-table td:nth-child(3)  { grid-column: 1 / -1; grid-row: 3; }
    .enl-table td:nth-child(4)  { grid-column: 1; grid-row: 4; }
    .enl-table td:nth-child(8)  { grid-column: 2; grid-row: 4; justify-self: end; font-size: 1rem; }
    .enl-table td:nth-child(5)  { grid-column: 1; grid-row: 5; }
    .enl-table td:nth-child(9)  { grid-column: 2; grid-row: 5; justify-self: end; }
    .enl-table td:nth-child(7)  { grid-column: 1 / -1; grid-row: 6; font-size: 0.8rem; color: #64748b; }
    .enl-table td:nth-child(7)::before { content: "Chofer: "; font-weight: 700; color: #94a3b8; }
    .enl-table td:nth-child(7) .enl-subtext { display: inline; margin-left: 0.3rem; }
    /* Sin chofer asignado: no se muestra la línea "Chofer: —" */
    .enl-table td:nth-child(7):not(:has(.enl-subtext)):not(:has(span[style*="font-size"])) { display: none; }
    .enl-table td:nth-child(10) { grid-column: 1; grid-row: 7; display: flex; gap: 0.4rem; align-items: baseline; }
    .enl-table td:nth-child(11) { grid-column: 2; grid-row: 7; justify-self: end; }
    .enl-table td:nth-child(11) > div { gap: 0.45rem !important; }
    /* Separador entre datos y acciones */
    .enl-table td:nth-child(10),
    .enl-table td:nth-child(11) { padding-top: 0.55rem !important; border-top: 1px solid #f1f5f9 !important; align-self: stretch; }
    .enl-table td:nth-child(11) > div { height: 100%; align-items: center; }
    /* Botones de acción táctiles */
    .enl-table .enl-eye,
    .dv2-table .btn-eye {
        width: 40px !important; height: 40px !important;
    }
    /* Fila vacía (sin resultados) */
    .enl-table td[colspan] { grid-column: 1 / -1 !important; grid-row: auto !important; border-top: 0 !important; }

    /* ── .dv2-table: 1 código · 2 rem · 3 dest · 4 ruta · 5 estado ·
          6 pago · 7 fecha · 8 acción */
    .dv2-table td:nth-child(1) { grid-column: 1; grid-row: 1; }
    .dv2-table td:nth-child(5) { grid-column: 2; grid-row: 1; justify-self: end; }
    .dv2-table td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
    .dv2-table td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; }
    .dv2-table td:nth-child(4) { grid-column: 1; grid-row: 4; }
    .dv2-table td:nth-child(6) { grid-column: 2; grid-row: 4; justify-self: end; }
    .dv2-table td:nth-child(7) { grid-column: 1; grid-row: 5; font-size: 0.78rem; }
    .dv2-table td:nth-child(8) { grid-column: 2; grid-row: 5; justify-self: end; }
    .dv2-table td[colspan] { grid-column: 1 / -1 !important; grid-row: auto !important; }
}


/* ─── 5. Ajustes por pantalla ────────────────────────────────────── */

/* 5a. Listado de encomiendas: el panel de filtros se pliega en celular
       (el buscador queda siempre visible). Lo controla responsive.js. */
.rs-filtros-toggle { display: none; }

@media (max-width: 768px), (max-width: 950px) and (max-height: 500px) {
    .enl-search-row { flex-wrap: nowrap !important; }
    .enl-search-wrap { min-width: 0 !important; }

    .rs-filtros-toggle {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.7rem 0.9rem;
        min-height: 44px;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        background: #f8fafc;
        font: inherit;
        font-size: 0.9rem;
        font-weight: 600;
        color: #0f172a;
        cursor: pointer;
    }
    .rs-filtros-toggle .rs-count {
        background: var(--primary);
        color: #fff;
        border-radius: 999px;
        padding: 0.05rem 0.55rem;
        font-size: 0.75rem;
        margin-left: 0.4rem;
    }
    .rs-filtros-toggle svg { width: 18px; height: 18px; transition: transform 0.2s; }
    .rs-filtros-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
    .enl-filters.rs-plegado .enl-grid,
    .enl-filters.rs-plegado .enl-filters-foot { display: none !important; }
    .enl-filters:not(.rs-plegado) .enl-grid { margin-top: 0.9rem; }

    .enl-grid { grid-template-columns: 1fr 1fr !important; }
    .enl-filters-foot { flex-wrap: wrap; }
    .enl-filters-foot > * { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 380px) {
    .enl-grid { grid-template-columns: 1fr !important; }
}

/* 5b. Detalle de encomienda: asignar chofer y cobrar en la entrega */
.vc-asignar {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.7rem;
    align-items: end;
}
.vc-cobro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
    margin-bottom: 1rem;
}
@media (max-width: 640px) {
    .vc-asignar { grid-template-columns: 1fr; }
    .vc-asignar button { width: 100%; justify-content: center; }
    .vc-cobro-grid { grid-template-columns: 1fr; }
}

/* 5c. Panel principal: indicadores de 2 en 2 incluso en celular */
@media (max-width: 640px) {
    .dv2-greeting { word-break: normal; }
}

/* 5d. Reportes: los montos de 2 en 2 en celular, sin tarjetas gigantes */
@media (max-width: 640px) {
    .rep-cards {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.65rem !important;
    }
    .rep-card { padding: 0.9rem !important; }
    .rep-card .rc-num { font-size: 1.2rem !important; }
    .rep-card .rc-lbl { font-size: 0.72rem !important; }
}

/* 5e. Ajustes: la paleta de colores cabe en pocas filas */
@media (max-width: 640px) {
    .rs-paleta {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
        gap: 0.6rem !important;
    }
    .rs-paleta > * { padding: 0.8rem 0.5rem !important; }
    /* Campos numéricos de ancho fijo (tarifas, código de país) */
    .admin-main input[style*="width:150px"],
    .admin-main input[style*="width:110px"] { width: 100% !important; max-width: 220px; }
}

/* 5e-bis. Choferes: las dos columnas (registro y listado) no deben
   crecer más que la pantalla por culpa de un contenido largo. */
.ch-grid > * { min-width: 0; }
@media (max-width: 640px) {
    /* Los botones (editar, turno, eliminar) bajan a su propia fila para que
       el nombre del chofer use todo el ancho de la tarjeta. */
    .ch-item { flex-wrap: wrap; align-items: flex-start; }
    .ch-acts {
        flex-basis: 100%;
        justify-content: flex-end;
        padding-top: 0.6rem;
        border-top: 1px solid #f1f5f9;
    }
    .ch-acts > * { min-width: 40px; min-height: 40px; }
}
@media (max-width: 400px) {
    .ch-card { padding: 1.05rem !important; }
}

/* 5e-ter. Caja y mensualidades: los indicadores de 2 en 2 en celular */
@media (max-width: 640px) {
    .cj-nums, .mn-nums { grid-template-columns: 1fr 1fr !important; gap: 0.6rem !important; }
    .mn-num { padding: 0.8rem !important; }
    .mn-num .v { font-size: 1.25rem !important; }
    .cj-num { padding: 0.75rem !important; }
    .cj-num .v { font-size: 1.1rem !important; }
}

/* Botonera final de formularios (Cancelar / Guardar): en celular los
   botones ocupan todo el ancho, con la acción principal arriba. */
@media (max-width: 480px) {
    .rs-acciones { flex-direction: column-reverse; gap: 0.6rem !important; }
    .rs-acciones > * { width: 100%; justify-content: center; padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* 5f. Página pública: navegación y zona segura del iPhone */
@media (max-width: 768px) {
    .navbar {
        padding-left: max(1rem, env(safe-area-inset-left, 0px));
        padding-right: max(1rem, env(safe-area-inset-right, 0px));
    }
    .nav-hamburger { min-width: 44px; min-height: 44px; }
    .nav-links.active a { min-height: 44px; display: flex; align-items: center; }
    .shalom-badge-grt { min-height: 36px; padding: 0.3rem 0.8rem !important; }
}

/* 5g. Modales (avisos y apertura de caja) dentro de la pantalla */
@media (max-width: 640px) {
    .modal-box { width: calc(100vw - 1.5rem) !important; max-width: none !important; }
    .modal-footer { flex-direction: column-reverse; gap: 0.5rem; }
    .modal-footer .modal-btn { width: 100%; justify-content: center; min-height: 44px; }
}

/* 5h. Celular en horizontal: la barra no debe comerse la pantalla */
@media (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
    .sb-appbar { height: calc(50px + env(safe-area-inset-top, 0px)); }
    .admin-main { padding-top: calc(50px + 0.8rem + env(safe-area-inset-top, 0px)) !important; }
}


/* ─── 6. Accesibilidad ───────────────────────────────────────────── */

/* Foco visible al navegar con teclado */
.admin-main a:focus-visible,
.admin-main button:focus-visible,
.sb-appbar a:focus-visible,
.sb-appbar button:focus-visible,
.sidebar a:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

/* Quien tiene activado "reducir movimiento" en su teléfono no ve animaciones */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}