/* ==========================================================================
   Ajustes para móvil y tablet
   --------------------------------------------------------------------------
   Se carga DESPUÉS de style.css, así que puede afinar sin tocar el diseño de
   escritorio: todo lo de aquí vive dentro de una media query.

   Los problemas que resuelve, vistos en un render real a 390 px:
     1. La barra de navegación envolvía sus ~8 menús en 5 filas y ocupaba unos
        350 px antes de que empezara el contenido (40% de la pantalla).
     2. Las cabeceras usan `d-flex justify-content-between`, que no envuelve:
        el título quedaba en una palabra por línea y los botones de acción se
        salían por el borde derecho.
     3. Campos de formulario con menos de 16px: iOS hace zoom al enfocarlos y
        deja la página descuadrada.
     4. Botones e iconos por debajo del objetivo táctil de 44 px.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Menú plegable
   El botón solo existe en móvil; en escritorio la barra se queda como estaba.
   -------------------------------------------------------------------------- */
.nav-toggle {
    display: none;              /* escritorio: oculto */
    background: rgba(148, 163, 184, 0.18);
    color: #f8fafc;
    border: 0;
    border-radius: 12px;
    width: 46px;
    height: 46px;
    font-size: 1.15rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.nav-toggle:hover { background: rgba(148, 163, 184, 0.3); }
.nav-toggle:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }

@media (max-width: 991.98px) {

    .nav-toggle { display: inline-flex; }

    /* Tres arreglos en uno, todos dentro de la media query para no tocar el escritorio:
       1. style.css declara en .nav-container justify-content/align-items/flex-wrap pero
          NO display:flex, así que sus hijos se apilaban como bloques.
       2. Bootstrap pone display:flex en .navbar, de modo que .nav-container es un flex
          item: con `margin: 0 auto` se encogía al ancho de su contenido (76 px medidos)
          y quedaba como una cajita centrada. `flex: 1 1 100%` la devuelve al ancho total.
       3. style.css ya traía un `flex-direction: column` para ≤768px que apilaba la marca
          sobre el botón; hay que revertirlo explícitamente a `row`. */
    .nav-container {
        display: flex;
        flex: 1 1 100%;
        flex-direction: row;
        flex-wrap: wrap;          /* la marca y el botón en la 1ª fila, el panel debajo */
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 0 14px;
        min-height: 62px;
    }

    .nav-brand {
        font-size: 1.05rem;
        min-width: 0;
        flex: 1 1 auto;
    }
    .nav-brand span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* El menú pasa a ser un panel desplegable a pantalla completa */
    .nav-menu {
        display: none;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        flex-basis: 100%;
        gap: 2px;
        max-height: calc(100vh - 62px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 8px 0 14px;
    }

    .nav-menu.abierto { display: flex; }

    .nav-menu > li { width: 100%; }

    .nav-menu .nav-link {
        width: 100%;
        min-height: 48px;          /* objetivo táctil cómodo */
        border-radius: 12px;
        padding: 12px 14px;
    }

    /* Los submenús dejan de flotar: se abren en línea, como un acordeón.
       Flotando quedaban fuera de la pantalla o tapados por el panel. */
    .nav-menu .dropdown-menu {
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        width: 100%;
        box-shadow: none;
        border: 0;
        border-left: 2px solid rgba(148, 163, 184, 0.35);
        border-radius: 0;
        margin: 2px 0 6px 16px;
        padding: 2px 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .nav-menu .dropdown.abierto > .dropdown-menu { display: block; }

    /* En móvil no hay hover: el submenú solo se abre al tocar. */
    .nav-menu li:hover > .dropdown-menu { display: none; }
    .nav-menu .dropdown.abierto:hover > .dropdown-menu { display: block; }

    .nav-menu .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 10px 14px;
    }

    .dropdown-toggle::after { margin-left: auto; }
}


/* --------------------------------------------------------------------------
   2. Cabeceras de página: apilar título y acciones
   El patrón `d-flex justify-content-between` de Bootstrap no envuelve por sí
   solo. Se limita a cabeceras (dentro de .card-body y .page-header) para no
   tocar los cientos de usos de esa utilidad en filas de tablas y formularios.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    .card-body > .d-flex.justify-content-between,
    .card-header > .d-flex.justify-content-between,
    .page-header,
    .page-header > .d-flex.justify-content-between {
        flex-direction: column;
        align-items: stretch !important;
        gap: 14px;
    }

    /* El bloque de botones ocupa el ancho y reparte el espacio */
    .card-body > .d-flex.justify-content-between > .d-flex,
    .card-header > .d-flex.justify-content-between > .d-flex,
    .page-header .header-actions {
        width: 100%;
        justify-content: flex-start !important;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Títulos: que no queden en una palabra por línea */
    .card-body h1,
    .page-header h1 { font-size: 1.5rem; line-height: 1.25; }
    .card-body h2,
    .page-header h2 { font-size: 1.25rem; line-height: 1.3; }
    h1, h2, h3 { text-wrap: balance; word-break: break-word; }
}


/* --------------------------------------------------------------------------
   3. Formularios y objetivos táctiles
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    /* 16px es el umbral por debajo del cual iOS hace zoom al enfocar el campo */
    input, select, textarea,
    .form-control, .form-select {
        font-size: 16px;
        min-height: 44px;
    }

    input[type="checkbox"],
    input[type="radio"] { min-height: 0; }

    .btn, button:not(.nav-toggle):not(.alert-close) {
        min-height: 44px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .btn-sm { min-height: 38px; }

    /* Grupos de botones que se salían del ancho */
    .btn-group, .table-actions { flex-wrap: wrap; }

    /* Los botones sueltos de un formulario ocupan el ancho:
       más fáciles de acertar con el pulgar */
    .form-actions .btn,
    .modal-footer .btn { flex: 1 1 auto; }
}


/* --------------------------------------------------------------------------
   4. Tablas y contenido ancho
   La mayoría ya usa .table-responsive o .table-container (que llevan
   overflow-x). Esto cubre las tablas sueltas y evita que sea la PÁGINA la
   que se desplace en horizontal.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    .table-responsive,
    .table-container { -webkit-overflow-scrolling: touch; }

    /* Red de seguridad: una tabla sin contenedor no debe ensanchar la página */
    .main-content table:not(.table-responsive table):not(.table-container table) {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }

    .data-table th,
    .data-table td { padding: 10px 12px; }

    /* Las cifras alineadas se leen mucho mejor con cifras de ancho fijo */
    table td, table th { font-variant-numeric: tabular-nums; }

    /* Una tabla ancha (white-space: nowrap) dentro de un flex/grid item con min-width:auto
       empuja al item, y con él a TODA la página, más allá del viewport (medido: el
       contenedor de Resultados llegaba a 1200 px en una pantalla de 390). Con min-width:0
       el scroll se queda dentro del contenedor de la tabla, que es donde debe estar. */
    .main-content { padding: 12px; min-width: 0; max-width: 100%; }
    .main-content > * { min-width: 0; max-width: 100%; }

    /* Nada debe provocar scroll horizontal de la página entera */
    .main-content img,
    .main-content pre,
    .main-content canvas { max-width: 100%; }
}


/* --------------------------------------------------------------------------
   5. Botón flotante del chat
   A 390 px tapaba el contenido de la esquina inferior derecha.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    #fabChatBtn {
        width: 52px;
        height: 52px;
        right: 14px;
        bottom: 14px;
    }

    /* Hueco al final para que el botón no tape la última fila o botón */
    .main-content { padding-bottom: 84px; }
}


/* --------------------------------------------------------------------------
   6. Pantallas muy estrechas (iPhone SE y similares, 360 px o menos)
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
    .nav-brand span { display: none; }   /* solo el icono, deja sitio al botón */
    .card-body h1, .page-header h1 { font-size: 1.3rem; }
    .main-content { padding: 10px; }
}