/* Observatorio Climatológico Académico · Tecnológico Universitario EuroAmericano · © Prof. Feddor Derenzin M.
   Diseño adaptable: escritorio, tableta y celular.
   Las alturas de la barra superior y de la línea de tiempo las mide js/ui-adaptable.js. */

/* ------------------------------------------------------------
   Escritorio: posiciones calculadas a partir de la barra real
   ------------------------------------------------------------ */
.aguaje-citizen-banner,
#panelControl {
    top: calc(var(--alto-encabezado) + 10px);
}
#panelControl {
    max-height: calc(100dvh - var(--alto-encabezado) - var(--alto-dock) - 22px);
}

/* Tabletas y laptops pequeñas: la barra superior pasa a dos filas (antes se salía de la pantalla) */
@media (max-width: 1100px) {
    .top-bar {
        height: auto;
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .telemetry-strip {
        order: 3;
        flex: 1 1 100%;
        justify-content: flex-start;
    }
    .top-actions { flex-wrap: wrap; justify-content: flex-end; }
    #timeDock {
        max-width: calc(100vw - 12px);
        overflow-x: auto;
        scrollbar-width: none;
    }
    #timeDock::-webkit-scrollbar { display: none; }
}

@media (max-width: 980px) {
    .aguaje-citizen-banner { max-width: 340px; }
}

/* ------------------------------------------------------------
   Celular y tableta vertical
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .top-bar {
        height: auto;
        flex-wrap: wrap;
        top: max(6px, env(safe-area-inset-top));
        left: 6px;
        right: 6px;
        padding: 8px;
        gap: 8px;
        border-radius: var(--radio-m);
    }
    .brand-cluster { flex: 1 1 auto; min-width: 0; }
    .brand-titles { min-width: 0; }
    .brand-main { font-size: 12.5px; white-space: normal; }   /* el nombre completo en 2 líneas si hace falta */
    .brand-radar-badge, .brand-accent-bar { display: none; }
    .brand-logo-wrap { padding: 3px 6px; }
    .brand-logo-wrap img { height: 26px; width: auto; }
    .brand-sub { display: block; }            /* el nombre del autor siempre visible (regla del proyecto) */
    .brand-author-pill { font-size: 11px; }

    .top-actions {
        order: 2;
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .top-actions::-webkit-scrollbar { display: none; }
    .top-sector-select { flex: 1 1 auto; max-width: none; min-width: 150px; font-size: 13px; padding: 7px 9px; }
    .btn-pill { white-space: nowrap; flex: 0 0 auto; padding-block: 7px; }
    /* en pantallas angostas los botones muestran solo el ícono (el texto queda para lectores de pantalla) */
    .top-actions .btn-pill > span + span {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
    }

    .telemetry-strip {
        order: 3;
        width: 100%;
        justify-content: flex-start;
        padding: 4px 10px;
    }

    .aguaje-citizen-banner {
        top: calc(var(--alto-encabezado) + 6px);
        left: 6px;
        right: 6px;
        width: auto;
        max-width: none;
        padding: 8px 10px;
    }
    .aguaje-banner-meta { display: none; }

    /* Panel como hoja inferior, encima de la línea de tiempo */
    #panelControl {
        top: auto;
        left: 6px;
        right: 6px;
        bottom: calc(var(--alto-dock) + 4px);
        width: auto;
        max-height: min(46dvh, calc(100dvh - var(--alto-encabezado) - var(--alto-dock) - 96px));
        border-radius: var(--radio-l);
    }
    #panelControl.panel-hidden {
        transform: translateY(calc(100% + var(--alto-dock) + 24px)) !important;
    }
    .citizen-tab-btn { font-size: 12px; padding-block: 8px; }

    /* Línea de tiempo: una sola fila desplazable */
    #timeDock {
        left: 6px;
        right: 6px;
        bottom: calc(6px + env(safe-area-inset-bottom));
        transform: none;
        width: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        border-radius: 14px;
        padding: 6px 8px;
    }
    #timeDock::-webkit-scrollbar { display: none; }
    #timeDock.dock-hidden { transform: translateY(calc(100% + 50px)) !important; }
    .dock-btn, .dock-select { flex: 0 0 auto; }

    /* Ventanas modales a pantalla completa */
    .modal-backdrop { padding: 0; align-items: stretch; }
    .modal-card {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh;
        max-height: 100dvh !important;
        border-radius: 0;
        padding: 16px !important;
        overflow-y: auto;
    }
    .modal-title { font-size: 16px !important; }

    .forecast-strip-grid { overflow-x: auto; }
    .leaflet-control-zoom { display: none; }   /* en el celular se usa el gesto de pellizco */
}

@media (max-width: 380px) {
    .citizen-kpi-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    /* rejillas de varias columnas (simulador 3D, etc.) pasan a una sola columna */
    .modal-fecha__bloque-2,
    .relieve3d__bloque-4,
    .relieve3d__bloque-13 {
        grid-template-columns: 1fr !important;
    }
}