/* ============================================================================
   BRIA · vista móvil del TMS — 2026-08-27
   ----------------------------------------------------------------------------
   El TMS se diseñó para escritorio: sidebar fijo de 256 px y todo el contenido
   con `ml-64`. En un celular eso deja la pantalla desbordada y el menú comiéndose
   el ancho. Esta hoja lo resuelve **sin tocar ninguna de las 150 pantallas**:
   se carga desde includes/sidebar.php y solo actúa por debajo de 900 px.

   El menú pasa a ser un cajón que entra desde la izquierda; lo abre el botón
   flotante que agrega el propio sidebar.
   ========================================================================== */

/* El botón de menú solo existe en móvil; en escritorio ni se dibuja */
.bria-menu-btn {
    display: none;
    position: fixed;
    top: calc(var(--bria-tope, 0px) + 7px);   /* centrado en la barra de 54 px */
    left: 10px;
    z-index: 60;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid #E3E9F2;
    border-radius: 11px;
    background: #FFFFFF;
    color: #10153A;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(15, 31, 69, .12);
}
/* La barra superior de celular la escribe includes/sidebar.php; aqui solo se
   dibuja, y en escritorio se apaga. */
.bria-topbar-movil { display: none; }

.bria-backdrop {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(10, 13, 38, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

@media (max-width: 900px) {
    /* ── El menú se vuelve cajón ─────────────────────────────────────── */
    #bria-sidebar {
        transform: translateX(-100%);
        transition: transform .24s ease;
    }
    body.bria-menu-abierto #bria-sidebar {
        transform: translateX(0);
        box-shadow: 0 0 44px rgba(0, 0, 0, .45);
    }
    body.bria-menu-abierto .bria-backdrop { opacity: 1; pointer-events: auto; }
    body.bria-menu-abierto { overflow: hidden; }
    .bria-menu-btn { display: inline-flex; }
    /* Abierto, el botón queda encima del panel oscuro y sirve de cerrar */
    body.bria-menu-abierto .bria-menu-btn { color: #FFFFFF; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); }

    /* ── El contenido toma todo el ancho ─────────────────────────────── */
    /* `min-width: 0` es la pieza clave: el contenedor es un ítem flex y por
       defecto lleva min-width:auto, así que se estiraba hasta el ancho de la
       tabla (2100 px en el historial de cartas porte) y el body la recortaba.
       Con esto el contenedor se queda en el ancho de la pantalla y la tabla
       usa su propio scroll. */
    body .ml-64 {
        margin-left: 0;
        min-width: 0;
        max-width: 100vw;
    }
    body .ml-64 :where(main, section, article, .grid, .flex) { min-width: 0; }
    html, body { overflow-x: hidden; max-width: 100%; }
    body :where(img, video, canvas, iframe) { max-width: 100%; height: auto; }

    /* ── Encabezados: apilados y con hueco para el botón ─────────────── */
    /* Viajes y el detalle de viaje traen encabezado propio (.vw-top / .td-top),
       por eso van nombrados aparte: si no, el botón se encima del título. */
    body header.bg-white > div:first-child,
    .vw-top__row,
    .td-top__row,
    .bs-topbar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 16px;
    }
    /* Antes cada encabezado reservaba 46 px a la izquierda porque el botón de
       menú flotaba encima. Desde que ese botón vive dentro de .bria-topbar-movil
       el hueco ya no hace falta y los títulos recuperan el ancho completo. */

    /* Filas que amontonan botones: que bajen de renglón en vez de encimarse */
    body header.bg-white .flex,
    body .ml-64 .flex.justify-between,
    body .ml-64 .flex.items-center.gap-3,
    body .ml-64 .flex.items-center.gap-4 { flex-wrap: wrap; }
    body header.bg-white :where(.space-x-2, .space-x-3, .space-x-4) > * + * { margin-left: 0; }
    body header.bg-white :where(.space-x-2, .space-x-3, .space-x-4) { gap: 8px; }
    body header.bg-white :where(h1, h2, h3),
    .vw-title, .td-folio,
    .bs-title { font-size: 18px; }
    body header.bg-white p,
    .bs-subtitle { font-size: 12px; }
    .bs-tabs, .vw-tabs, .td-tabs { padding: 0 16px; gap: 18px; margin-top: 4px; }
    .vw-actions, .td-actions { flex-wrap: wrap; }
    .bs-crumbs { display: none; }

    /* Los botones del encabezado se reparten el ancho en vez de encimarse */
    .bs-actions, .vw-actions, .td-actions { flex-wrap: wrap; width: 100%; }
    .bs-actions > *, .vw-actions > .vw-btn, .td-actions > * {
        flex: 1 1 140px;
        justify-content: center;
    }
    body header.bg-white .flex.items-center.space-x-4,
    body header.bg-white .flex.items-center.gap-4 { flex-wrap: wrap; }

    /* ── Márgenes del contenido ──────────────────────────────────────── */
    body .ml-64 > :where(.px-6, .p-6, .px-8),
    .bs-page { padding: 14px 16px 28px; }
    body .ml-64 main { padding: 14px 16px 28px !important; }

    /* ── Tablas: cada una con su propio scroll ───────────────────────── */
    body .ml-64 table {
        display: block;
        width: 100%;
        min-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    body .ml-64 table :where(th, td) { white-space: nowrap; }
    /* La celda que trae el nombre del registro sí puede partirse */
    body .ml-64 table :where(td:first-child, th:first-child) { white-space: normal; }

    /* ── Rejillas fijas a una sola columna ───────────────────────────── */
    body .ml-64 :where(.grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6) {
        grid-template-columns: 1fr;
    }
    .bs-form-grid, .bs-filters-grid { grid-template-columns: 1fr; }

    /* Los indicadores caben de dos en dos y así no hay que rodar media pantalla
       para llegar a la tabla: apilados uno por fila eran 4 pantallazos. */
    .bs-kpis, .vw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
    .bs-kpi, .vw-kpi { padding: 12px; gap: 10px; }
    .bs-kpi-icon { width: 34px; height: 34px; font-size: 14px; }
    .bs-kpi-value, .vw-kpi__value { font-size: 20px; }
    .bs-kpi-label, .vw-kpi__label { font-size: 10px; }
    .bs-col-2, .bs-col-3 { grid-column: 1 / -1; }
    body .ml-64 .flex.space-x-4 > * + * { margin-left: 0; }

    /* ── Ventanas modales ────────────────────────────────────────────── */
    body .fixed.inset-0 > :where(.bg-white, .rounded-lg, .rounded-xl, .rounded-2xl) {
        max-width: calc(100vw - 20px);
        max-height: calc(100vh - 40px);
        overflow-y: auto;
    }

    /* ── Detalles de dedo gordo ──────────────────────────────────────── */
    body :where(button, .bs-btn, .bs-btn-ghost, a.bs-icon-btn) { min-height: 38px; }
    /* Safari iOS hace zoom al enfocar un campo con font-size < 16px y no vuelve
       a su lugar al salir: la pantalla queda descuadrada. La regla anterior
       (`body input`, especificidad 0-0-2) perdia contra `.bria-field input` del
       login (0-1-1) y contra el `.text-sm` de Tailwind (0-1-0) que traen los
       formularios del TMS, asi que los campos seguian en 14px. Con !important
       gana siempre. Se excluyen los tipos que no abren teclado para no alterar
       botones ni casillas. */
    /* ── Barra superior de celular ───────────────────────────────── */
    .bria-topbar-movil {
        display: flex;
        align-items: center;
        justify-content: center;        /* el logo va al centro de la pantalla */
        position: fixed;
        top: var(--bria-tope, 0px);     /* debajo del banner de impersonación */
        left: 0;
        right: 0;
        height: 54px;
        z-index: 44;                    /* bajo el velo (45) y el cajón (50) */
        /* Hueco simétrico: el botón de menú es `position:fixed`, así que no
           empuja nada; con el mismo padding a ambos lados el logo queda
           centrado de verdad respecto a la pantalla y no respecto al espacio
           que sobra. */
        padding: 0 58px;
        /* Mismo navy del cajón (#bria-sidebar): además de leerse como una sola
           pieza, es lo que exige el logo, que es la versión en blanco calado y
           sobre fondo claro se vuelve invisible. */
        background: #0A2353;
        border-bottom: 1px solid rgba(255, 255, 255, .10);
        box-shadow: 0 2px 10px rgba(10, 35, 83, .18);
    }
    .bria-topbar-movil img { display: block; height: 24px; width: auto; }

    /* Dentro de la barra el botón va plano y en blanco: el recuadro claro era
       para cuando flotaba suelto sobre el contenido. */
    .bria-menu-btn {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
        color: #FFFFFF;
    }

    /* El contenido arranca debajo de la barra. Va con :has() a propósito: hay
       tres pantallas que cargan esta hoja sin incluir el sidebar (dashboard_obs,
       master_layout y route_new); ahí la barra no existe y no deben heredar el
       hueco. */
    body:has(.bria-topbar-movil) .ml-64 { padding-top: 54px; }

    /* Los encabezados pegajosos se detienen al pie de la barra, no debajo. */
    body .bs-topbar,
    body .sticky.top-0 { top: calc(var(--bria-tope, 0px) + 54px); }

    /* Dashboard traía su propia barra móvil, anterior al cajón: su botón hacía
       toggle de .hidden sobre el sidebar, que hoy se mueve con transform, así
       que ya no abría nada. La barra compartida la sustituye. */
    body .md\:hidden.fixed.top-0 { display: none !important; }

    body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="range"]):not([type="color"]),
    body select,
    body textarea { font-size: 16px !important; }
}

/* Celular angosto: el asistente ocupa la pantalla y el menú no tapa todo */
@media (max-width: 640px) {
    #bria-sidebar { width: 84vw; max-width: 300px; }
    .bs-table { min-width: 0; }
    .bs-card-head { flex-wrap: wrap; }
    .la-panel { right: 8px; left: 8px; bottom: 76px; height: calc(100vh - 100px); }
    .la-fab { right: 14px; bottom: 14px; }
}

/* ============================================================================
   Indicadores plegables (celular) — 2026-08-28
   ----------------------------------------------------------------------------
   El envoltorio lo arma assets/bria-kpis-movil.js y solo existe por debajo de
   900 px, así que estas reglas no necesitan ir dentro de un @media.
   ========================================================================== */
.bk-col { margin: 0 0 14px; }

.bk-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 11px 14px;
    background: #FFFFFF;
    border: 1px solid #E3E9F2;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 31, 69, .04);
    font: inherit;
    color: #10153A;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.bk-head:active { background: #F6F8FC; }

.bk-head__ico {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #EDEFFA;
    color: #10153A;
}
.bk-head__ico svg { width: 18px; height: 18px; }

.bk-head__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bk-head__tit {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6B7A99;
    font-weight: 700;
}
/* El resumen es una sola línea: si no cabe, se corta con puntos suspensivos en
   vez de empujar el chevron fuera de la tarjeta. */
.bk-head__res {
    font-size: 15px;
    font-weight: 700;
    color: #10153A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Abierto, los números ya se leen en las tarjetas: repetirlos arriba estorba. */
.bk-col.is-abierta .bk-head__res { display: none; }

.bk-head__chev { flex: none; display: inline-flex; color: #9AA7C0; transition: transform .24s ease; }
.bk-head__chev svg { width: 18px; height: 18px; }
.bk-col.is-abierta .bk-head__chev { transform: rotate(180deg); }

.bk-cuerpo { overflow: hidden; max-height: 0; transition: max-height .26s ease; }
/* El margen va en la rejilla y no en el cuerpo: con `overflow:hidden` el cuerpo
   es un contexto de formato propio, así que ese margen cuenta en scrollHeight
   (lo que mide el script para animar) y desaparece al cerrar. */
.bk-cuerpo > * { margin: 12px 0 0 !important; }

@media (prefers-reduced-motion: reduce) {
    .bk-cuerpo, .bk-head__chev { transition: none; }
}