/* =========================================================
   MODO HURACANES - JERARQUÍA VISUAL
   ========================================================= */

/*
 * Orden:
 *
 * sidebar              5000
 * botón abrir sidebar  5100
 * leyenda ciclónica    3200
 * ayuda / WhatsApp     3000
 * mapa / controles     inferior
 */

.risk-sidebar {
    z-index: 5000 !important;
}

.open-risk-sidebar-btn {
    z-index: 5100 !important;
}

.cyclone-legend {
    z-index: 3200 !important;
}

.help-fab,
.whatsapp-floating-map {
    z-index: 3000 !important;
}


/* =========================================================
   BARRA DE LOCALIDADES
   ========================================================= */

.loc-bar.hurricane-hidden {
    display: none !important;
}


/* =========================================================
   LEYENDA CICLÓNICA - ESCRITORIO
   ========================================================= */

.cyclone-legend {
    position: fixed;

    /*
     * Se desplaza ligeramente a la derecha para quedar
     * centrada respecto al mapa cuando está abierto
     * el sidebar de escritorio.
     */
    left: 50%;
    bottom: 14px;

    transform: translateX(-50%);

    /*
     * Mucho más compacta que la versión anterior.
     */
    width: min(880px, calc(100vw - 310px));

    box-sizing: border-box;

    display: none;

    padding: 9px 11px 7px;

    font-family: 'Inter', sans-serif;

    color: #444;

    background: rgba(249, 245, 239, 0.97);

    border: 1px solid rgba(255, 255, 255, 0.82);

    border-radius: 17px;

    box-shadow:
        0 8px 26px rgba(0, 0, 0, 0.28),
        0 2px 7px rgba(0, 0, 0, 0.14);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    pointer-events: auto;
}


/* Visible */

.cyclone-legend.is-visible {
    display: block;

    animation: cycloneLegendIn 0.22s ease-out;
}


@keyframes cycloneLegendIn {

    from {
        opacity: 0;

        transform:
            translateX(-50%)
            translateY(12px);
    }

    to {
        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0);
    }
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.cyclone-legend-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 0 1px 6px;
}


.cyclone-legend-heading {
    min-width: 0;
}


.cyclone-legend-title {
    margin: 0;

    color: #963d56;

    font-size: 21px;
    line-height: 1.05;

    font-weight: 800;
}


.cyclone-legend-subtitle {
    margin-top: 1px;

    color: #777;

    font-size: 10.5px;
    line-height: 1.1;
}


.cyclone-legend-close {
    width: 28px;
    height: 28px;

    min-width: 28px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f3dadd;

    color: #963d56;

    font-size: 19px;
    line-height: 1;

    cursor: pointer;

    transition:
        background 0.15s ease,
        transform 0.15s ease;
}


.cyclone-legend-close:hover {
    background: #e9c4ca;

    transform: scale(1.05);
}


/* =========================================================
   TRES BLOQUES PRINCIPALES
   ========================================================= */

.cyclone-legend-main {
    display: grid;

    grid-template-columns:
        1.45fr
        0.82fr
        0.70fr;

    gap: 7px;

    align-items: stretch;
}


.cyclone-legend-section {
    min-width: 0;

    padding: 6px 8px;

    border-radius: 11px;

    background: rgba(244, 233, 226, 0.74);
}


/* Título de cada sección */

.cyclone-section-title {
    display: flex;

    align-items: center;

    gap: 4px;

    margin-bottom: 5px;

    color: #963d56;

    font-size: 11px;
    line-height: 1.05;

    font-weight: 800;
}


.cyclone-section-title > img {
    width: 13px;
    height: 13px;

    flex: 0 0 13px;

    object-fit: contain;
}


/* =========================================================
   VIGILANCIAS / ALERTAS
   ========================================================= */

.cyclone-alert-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    column-gap: 8px;
    row-gap: 3px;
}


.cyclone-legend-item {
    display: flex;

    align-items: center;

    gap: 4px;

    min-width: 0;

    font-size: 10px;
    line-height: 1.05;

    white-space: nowrap;
}


.cyclone-legend-item > img {
    width: 21px;
    height: 9px;

    flex: 0 0 21px;

    object-fit: contain;
}


.cyclone-legend-item span {
    min-width: 0;
}


/* =========================================================
   EXTENSIÓN INICIAL DE VIENTOS
   ========================================================= */

.cyclone-wind-list {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.cyclone-winds .cyclone-legend-item {
    font-size: 10px;
}


/* =========================================================
   ÁREA DE TRAYECTORIA
   ========================================================= */

.cyclone-track {
    display: flex;

    flex-direction: column;
}


.cyclone-track-symbol {
    flex: 1;

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 35px;
}


.cyclone-track-symbol img {
    display: block;

    width: 60px;
    height: auto;

    max-width: 90%;
}


/* =========================================================
   PROBABILIDAD
   ========================================================= */

.cyclone-probability {
    margin-top: 6px;

    padding: 5px 8px 3px;

    border-radius: 11px;

    background: rgba(244, 233, 226, 0.74);

    text-align: center;
}


.cyclone-probability-title {
    margin-bottom: 2px;

    color: #963d56;

    font-size: 12px;
    line-height: 1.05;

    font-weight: 800;
}


.cyclone-probability-img {
    display: block;

    width: 60%;
    height: auto;
    margin: auto;

    

    object-fit: fill;
}


.cyclone-legend-source {
    margin-top: 2px;

    padding-right: 2px;

    color: #777;

    font-size: 6.5px;
    line-height: 1;

    text-align: right;
}


/* =========================================================
   LAPTOP / TABLET HORIZONTAL
   ========================================================= */

@media (max-width: 1350px) and (min-width: 1051px) {

    .cyclone-legend {
        position: fixed;

        /*
         * Se desplaza ligeramente a la derecha para quedar
         * centrada respecto al mapa cuando está abierto
         * el sidebar de escritorio.
         */
        left: 50%;
        bottom: 14px;

        transform: translateX(-50%);

        /*
         * Mucho más compacta que la versión anterior.
         */
        width: min(1250px, calc(100vw - 210px));

        box-sizing: border-box;

        display: none;

        padding: 9px 11px 7px;

        font-family: 'Inter', sans-serif;

        color: #444;

        background: rgba(249, 245, 239, 0.97);

        border: 1px solid rgba(255, 255, 255, 0.82);

        border-radius: 17px;

        box-shadow:
            0 8px 26px rgba(0, 0, 0, 0.28),
            0 2px 7px rgba(0, 0, 0, 0.14);

        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);

        pointer-events: auto;
    }


    .cyclone-legend-title {
        font-size: 18px;
    }


    .cyclone-legend-subtitle {
        font-size: 12px;
    }


    .cyclone-legend-main {
        grid-template-columns:
            1.4fr
            0.8fr
            0.68fr;

        gap: 5px;
    }


    .cyclone-legend-section {
        padding: 5px 6px;
    }


    .cyclone-section-title {
        font-size: 14px;
    }


    .cyclone-legend-item {
        font-size: 11px;
    }

    .cyclone-winds .cyclone-legend-item {
        font-size: 11px;
    }


    .cyclone-legend-item > img {
        width: 18px;
        flex-basis: 18px;
    }


    .cyclone-track-symbol img {
        width: 50px;
    }


    .cyclone-probability-title {
        font-size: 16px;
    }


    .cyclone-probability-img {
        
    }
}

@media (max-width: 1050px) and (min-width: 769px) {

    .cyclone-legend {
        left: 50%;

        width: min(
            860px,
            calc(100vw - 80px)
        );

        bottom: 9px;

        padding: 8px 9px 6px;
    }


    .cyclone-legend-title {
        font-size: 18px;
    }


    .cyclone-legend-subtitle {
        font-size: 10px;
    }


    .cyclone-legend-main {
        grid-template-columns:
            1.4fr
            0.8fr
            0.68fr;

        gap: 5px;
    }


    .cyclone-legend-section {
        padding: 5px 6px;
    }


    .cyclone-section-title {
        font-size: 12px;
    }


    .cyclone-legend-item {
        font-size: 10px;
    }

    .cyclone-winds .cyclone-legend-item {
        font-size: 10px;
    }


    .cyclone-legend-item > img {
        width: 18px;
        flex-basis: 18px;
    }


    .cyclone-track-symbol img {
        width: 50px;
    }


    .cyclone-probability-title {
        font-size: 12px;
    }


    .cyclone-probability-img {
        
    }
}


/* =========================================================
   MÓVIL Y TABLET VERTICAL
   ========================================================= */

@media (max-width: 768px) {

    /*
     * En móvil NO intentamos compensar el sidebar.
     *
     * La leyenda ocupa el ancho del mapa completo,
     * pero el sidebar tiene un z-index superior.
     *
     * Si se abre el sidebar, éste aparece encima
     * de la leyenda.
     */

    .cyclone-legend {
        left: 50%;

        bottom:
            calc(
                7px +
                env(safe-area-inset-bottom)
            );

        width: calc(100vw - 18px);

        max-width: 430px;

        /*
         * Evita que en teléfonos bajos la leyenda
         * llegue demasiado arriba.
         */
        max-height: 42vh;

        transform: translateX(-50%);

        padding: 8px 8px 6px;

        border-radius: 14px;

        overflow-y: auto;
        overflow-x: hidden;
    }


    .cyclone-legend-header {
        padding-bottom: 5px;
    }


    .cyclone-legend-title {
        font-size: 19px;
    }


    .cyclone-legend-subtitle {
        font-size: 12.5px;
    }


    .cyclone-legend-close {
        width: 26px;
        height: 26px;

        min-width: 26px;

        font-size: 18px;
    }


    /*
     * Primera fila:
     * Vigilancias / alertas a todo lo ancho.
     *
     * Segunda fila:
     * Vientos | trayectoria.
     */

    .cyclone-legend-main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 5px;
    }


    .cyclone-alerts {
        grid-column: 1 / -1;
    }


    .cyclone-legend-section {
        padding: 5px 6px;

        border-radius: 9px;
    }


    .cyclone-alert-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 5px;
        row-gap: 2px;
    }


    .cyclone-section-title {
        margin-bottom: 4px;

        font-size: 12px;
    }


    .cyclone-section-title > img {
        width: 11px;
        height: 11px;

        flex-basis: 11px;
    }


    .cyclone-legend-item {
        gap: 3px;

        font-size: 11.5px;
    }

    .cyclone-winds .cyclone-legend-item {
        font-size: 11.5px;
    }


    .cyclone-legend-item > img {
        width: 18px;
        height: 8px;

        flex-basis: 18px;
    }


    .cyclone-wind-list {
        gap: 3px;
    }


    .cyclone-track-symbol {
        min-height: 29px;
    }


    .cyclone-track-symbol img {
        width: 48px;
    }


    .cyclone-probability {
        margin-top: 5px;

        padding: 4px 6px 2px;

        border-radius: 9px;
    }


    .cyclone-probability-title {
        margin-bottom: 2px;

        font-size: 13px;
    }


    .cyclone-probability-img {
        width: 100%;
    }


    .cyclone-legend-source {
        margin-top: 1px;

        font-size: 5.5px;
    }
}


/* =========================================================
   TELÉFONOS ESTRECHOS
   ========================================================= */

@media (max-width: 420px) {

    .cyclone-legend {
        width: calc(100vw - 12px);

        max-width: none;

        bottom:
            calc(
                5px +
                env(safe-area-inset-bottom)
            );

        padding: 7px 7px 5px;

        max-height: 40vh;
    }


    .cyclone-legend-title {
        font-size: 18px;
    }


    .cyclone-legend-subtitle {
        font-size: 12px;
    }


    .cyclone-alert-grid {
        column-gap: 3px;
    }


    .cyclone-legend-item {
        font-size: 9px;
    }

    .cyclone-winds .cyclone-legend-item {
        font-size: 9px;
    }


    .cyclone-legend-item > img {
        width: 16px;

        flex-basis: 16px;
    }


    .cyclone-section-title {
        font-size: 12px;
    }


    .cyclone-probability-title {
        font-size: 12px;
    }
}


/* =========================================================
   PANTALLAS MUY BAJAS
   Ej. celular horizontal
   ========================================================= */

@media (max-height: 600px) and (max-width: 900px) {

    .cyclone-legend {
        max-height: 48vh;

        bottom: 4px;

        transform:
            translateX(-50%)
            scale(0.92);

        transform-origin: bottom center;
    }


    .cyclone-legend.is-visible {
        animation: none;
    }
}