/* ==========================================================================
   OPTIMIZACIÓN VISTA MÓVIL (se carga la última, después de styles.css)
   Solo afecta a pantallas pequeñas: el escritorio queda igual.
   ========================================================================== */

/* --- Banner de pruebas por debajo de los modales (antes tapaba su cabecera y la X) */
.env-banner {
    z-index: 1035;
}

/* --- Menú principal (se colapsa por debajo de 1200px) ---------------------- */
@media (max-width: 1199.98px) {
    /* Logo, campana y botón en la primera línea; el menú desplegado debajo, a todo el ancho */
    .navbar {
        flex-wrap: wrap !important;
        padding: 8px 12px;
    }
    .navbar-collapse {
        flex-basis: 100%;
        max-height: calc(100vh - 110px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .navbar-collapse .navbar-nav {
        text-align: left;
        padding: 6px 0;
    }
    /* Zonas de toque más cómodas */
    .navbar-collapse .navbar-nav .nav-link {
        padding: 10px 6px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .navbar-collapse .dropdown-menu {
        border: none;
        background: rgba(255, 255, 255, 0.97);
        margin: 0 0 6px 0;
    }
    .navbar-collapse .dropdown-item {
        padding: 10px 16px;
        white-space: normal;
    }
}

@media (max-width: 767.98px) {

    /* .container tiene padding 0 en styles.css y las .row (margen -15px) se salían */
    .container,
    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Imágenes y vídeos nunca más anchos que la pantalla */
    img, video, canvas, iframe {
        max-width: 100%;
    }

    /* --- Cabeceras "título + botones": si no caben, los botones bajan de línea */
    .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .btn-group:not(.btn-group-toggle) {
        flex-wrap: wrap;
        max-width: 100%;
    }
    .btn-toolbar {
        gap: 0.25rem;
    }
    /* Cabeceras con título (h2-h4) dentro de un d-flex: permitir salto de línea */
    .d-flex:has(> h2),
    .d-flex:has(> h3),
    .d-flex:has(> h4) {
        flex-wrap: wrap;
        row-gap: 0.35rem;
    }
    /* Etiquetas largas (badges) pueden partir línea en vez de salirse */
    .badge {
        white-space: normal;
        max-width: 100%;
    }

    /* --- Banner de entorno de pruebas: más compacto ------------------------- */
    .env-banner {
        font-size: 0.7rem;
        letter-spacing: 0.5px;
        padding: 4px 8px;
        line-height: 1.3;
    }
    .env-banner i {
        margin-right: 4px;
    }
    body.env-pruebas {
        border-width: 2px;
    }

    /* --- Formularios: 16px evita el zoom automático de iPhone al tocar un campo */
    input.form-control,
    select.form-control,
    textarea.form-control,
    .custom-select {
        font-size: 16px;
    }

    /* --- Tablas: si no tienen contenedor con scroll, que lo tengan ---------- */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
    /* Tablas con campos editables: que no se aplasten (la tabla hace scroll lateral) */
    .table td > .form-control,
    .table td > .custom-select,
    .table td > select.form-control {
        min-width: 90px;
    }
    .table td > .form-control.cell-numero,
    .table td > .form-control.ver-cell-numero {
        min-width: 52px;
    }
    .table td > .form-control.cell-matricula,
    .table td > .form-control.ver-cell-matricula {
        min-width: 105px;
    }

    /* --- Modales: aprovechar el ancho y no salirse ------------------------- */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }
    .modal-body {
        padding: 0.75rem;
    }
    .modal-footer {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    .modal-footer > * {
        margin: 0;
    }

    /* --- Cuadrantes: columna de agente estrecha para ver más días ---------- */
    #tablaCuadrante .fixed-col {
        min-width: 92px !important;
        width: 92px;
        max-width: 110px;
        padding: 4px !important;
    }
    #tablaCuadrante .fixed-col .pl-2 {
        padding-left: 0 !important;
    }
    #tablaCuadrante .fixed-col div {
        font-size: 0.72rem !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #tablaCuadrante th[colspan] {
        white-space: normal;
        letter-spacing: 0 !important;
        font-size: 0.6rem;
    }
    #tablaCuadrante .dia-col {
        min-width: 38px;
        padding: 2px !important;
    }

    /* --- Títulos más contenidos ------------------------------------------- */
    h2 {
        font-size: 1.5em;
    }
}