/* ============================================================
   RADAR METEORED - SAIH HIDROSUR
   ============================================================ */

.meteored-control {
    position: relative;
    font-family: inherit;
}


/* ============================================================
   POSICIÓN DEL CONTROL
   ============================================================ */

.leaflet-bottom.leaflet-right .leaflet-control.meteored-control {
    margin-right: 8px !important;
    margin-bottom: 2px !important;
}


/* ============================================================
   BOTÓN PRINCIPAL
   ============================================================ */

.meteored-toggle {
    width: 38px;
    height: 38px;

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

    padding: 0;

    border: 1px solid rgba(47, 85, 103, 0.22);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.97);

    box-shadow:
        0 3px 12px rgba(25, 60, 75, 0.16);

    cursor: pointer;

    transition:
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}


.meteored-toggle:hover {
    background: #ffffff;

    transform: translateY(-1px);

    box-shadow:
        0 5px 16px rgba(25, 60, 75, 0.21);
}


.meteored-toggle svg {
    width: 24px;
    height: 24px;

    fill: none;

    stroke: #315f72;
    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.meteored-open .meteored-toggle {
    background: #315f72;
}


.meteored-open .meteored-toggle svg {
    stroke: #ffffff;
}


/* ============================================================
   PANEL
   ============================================================ */

.meteored-panel {
    position: absolute;

    right: 0;
    bottom: 50px;

    width: 310px;

    padding: 0;

    overflow: hidden;

    border:
        1px solid rgba(46, 80, 96, 0.18);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.98);

    box-shadow:
        0 10px 30px rgba(25, 55, 70, 0.20);

    color: #314f5d;

    z-index: 1000;
}


/* ============================================================
   CABECERA
   ============================================================ */

.meteored-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 13px 14px;

    border-bottom:
        1px solid rgba(51, 91, 108, 0.10);

    background:
        linear-gradient(
            135deg,
            #f8fbfc,
            #eef5f7
        );
}


.meteored-header-left {
    display: flex;
    align-items: center;

    gap: 10px;
}


.meteored-radar-icon {
    width: 34px;
    height: 34px;

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

    border-radius: 9px;

    background:
        rgba(49, 95, 114, 0.10);
}


.meteored-radar-icon svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: #315f72;
    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.meteored-title {
    font-size: 13px;
    font-weight: 700;

    line-height: 1.2;

    color: #315f72;
}


.meteored-subtitle {
    margin-top: 2px;

    font-size: 10px;

    color: #78909b;
}


/* ============================================================
   BOTONES CABECERA
   ============================================================ */

.meteored-header-actions {
    display: flex;
    align-items: center;

    gap: 3px;
}


.meteored-minimize,
.meteored-close {
    width: 28px;
    height: 28px;

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

    padding: 0;

    border: 0;
    border-radius: 7px;

    background: transparent;

    color: #78909b;

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

    cursor: pointer;
}


.meteored-minimize:hover,
.meteored-close:hover {
    background:
        rgba(49, 95, 114, 0.08);

    color:
        #315f72;
}


/* ============================================================
   HORA + ESTADO
   ============================================================ */

.meteored-current {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        13px 14px 10px;
}


.meteored-time {
    font-size: 22px;
    font-weight: 700;

    line-height: 1;

    color: #264c5e;
}


.meteored-date {
    margin-top: 4px;

    font-size: 10px;

    color: #7e929c;
}


.meteored-status {
    display: flex;
    align-items: center;

    gap: 6px;

    padding:
        5px 9px;

    border-radius: 20px;

    font-size: 10px;
    font-weight: 700;

    white-space: nowrap;
}


.meteored-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;
}


.meteored-status-observed {
    background:
        rgba(38, 126, 170, 0.10);

    color:
        #287da4;
}


.meteored-status-observed
.meteored-status-dot {
    background:
        #287da4;
}


.meteored-status-future {
    background:
        rgba(236, 154, 45, 0.13);

    color:
        #c2771c;
}


.meteored-status-future
.meteored-status-dot {
    background:
        #df8b24;
}


/* ============================================================
   NAVEGACIÓN
   ============================================================ */

.meteored-navigation {
    display: grid;

    grid-template-columns:
        42px 1fr 42px;

    gap: 7px;

    padding:
        3px 14px 12px;
}


.meteored-nav,
.meteored-play {
    height: 34px;

    border:
        1px solid rgba(49, 95, 114, 0.17);

    border-radius: 8px;

    background:
        #ffffff;

    color:
        #315f72;

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease;
}


.meteored-nav {
    font-size: 23px;
    line-height: 28px;
}


.meteored-nav:hover {
    background:
        #f1f6f8;

    border-color:
        rgba(49, 95, 114, 0.30);
}


.meteored-play {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    background:
        #315f72;

    color:
        #ffffff;

    font-size: 11px;
    font-weight: 600;
}


.meteored-play:hover {
    background:
        #284f60;
}


.meteored-play-icon {
    font-size: 12px;
}


/* ============================================================
   TIMELINE
   ============================================================ */

.meteored-timeline {
    padding:
        0 14px 13px;
}


.meteored-timeline-labels {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 5px;

    font-size: 9px;
    font-weight: 600;

    color:
        #81949d;
}


.meteored-now-label {
    color:
        #315f72;
    margin-left: 125px;
}


.meteored-future-limit {
    color:
        #c2771c;
}


.meteored-slider-wrap {
    position: relative;

    height: 25px;
}


.meteored-slider-track {
    position: absolute;

    left: 0;
    right: 0;
    top: 11px;

    height: 5px;

    overflow: hidden;

    border-radius: 5px;

    background:
        #dce6ea;
}


.meteored-track-past {
    position: absolute;

    top: 0;
    left: 0;

    height: 100%;

    background:
        #438cae;
}


.meteored-track-future {
    position: absolute;

    top: 0;

    height: 100%;

    background:
        repeating-linear-gradient(
            135deg,
            #e8a247 0,
            #e8a247 4px,
            #f5c57f 4px,
            #f5c57f 8px
        );
}


.meteored-now-marker {
    position: absolute;

    top: 5px;

    width: 2px;
    height: 17px;

    transform:
        translateX(-1px);

    border-radius: 2px;

    background:
        #315f72;

    z-index: 2;
}


.meteored-time-slider {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 25px;

    margin: 0;

    appearance: none;
    -webkit-appearance: none;

    background: transparent;

    cursor: pointer;

    z-index: 3;
}


.meteored-time-slider::-webkit-slider-runnable-track {
    height: 5px;

    background: transparent;
}


.meteored-time-slider::-webkit-slider-thumb {
    width: 15px;
    height: 15px;

    margin-top: -5px;

    appearance: none;
    -webkit-appearance: none;

    border:
        2px solid #ffffff;

    border-radius:
        50%;

    background:
        #315f72;

    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.25);
}


.meteored-time-slider::-moz-range-track {
    height: 5px;

    background: transparent;
}


.meteored-time-slider::-moz-range-thumb {
    width: 13px;
    height: 13px;

    border:
        2px solid #ffffff;

    border-radius:
        50%;

    background:
        #315f72;
}


/* ============================================================
   OPACIDAD
   ============================================================ */

.meteored-opacity-row {
    padding:
        10px 14px 13px;

    border-top:
        1px solid rgba(49, 95, 114, 0.08);
}


.meteored-opacity-label {
    display: flex;
    justify-content: space-between;

    margin-bottom: 6px;

    font-size: 10px;
    font-weight: 600;

    color:
        #627c88;
}


.meteored-opacity-value {
    color:
        #315f72;
}


.meteored-opacity {
    width: 100%;

    cursor: pointer;

    accent-color:
        #315f72;
}


/* ============================================================
   LEYENDA
   ============================================================ */

.meteored-legend {
    padding:
        10px 14px 13px;

    border-top:
        1px solid rgba(49, 95, 114, 0.08);

    background:
        #f8fbfc;
}


.meteored-legend-title {
    margin-bottom:
        6px;

    font-size:
        9px;

    font-weight:
        700;

    color:
        #718994;
}


.meteored-legend-bar {
    height:
        8px;

    border-radius:
        5px;

    background:
        linear-gradient(
            90deg,
            #3ffefc 0%,
            #1100f3 24%,
            #74f560 29%,
            #26a228 43%,
            #feff49 48%,
            #f9a534 61%,
            #ed2222 69%,
            #8d0c22 80%,
            #f649d1 84%,
            #502a68 100%
        );
}


.meteored-legend-values {
    display:
        flex;

    justify-content:
        space-between;

    margin-top:
        4px;

    font-size:
        8px;

    color:
        #83959d;
}


/* ============================================================
   MODO MINIMIZADO
   ============================================================ */

.meteored-panel.meteored-minimized {
    width: 270px;

    bottom: 46px;
}


/* Cabecera compacta */
.meteored-panel.meteored-minimized
.meteored-header {
    padding:
        6px 8px;
}


/* Quitamos icono grande y subtítulo */
.meteored-panel.meteored-minimized
.meteored-radar-icon,
.meteored-panel.meteored-minimized
.meteored-subtitle {
    display:
        none;
}


/* Título compacto */
.meteored-panel.meteored-minimized
.meteored-title {
    font-size:
        10px;
}


/* Ocultamos ajustes */
.meteored-panel.meteored-minimized
.meteored-timeline,
.meteored-panel.meteored-minimized
.meteored-opacity-row,
.meteored-panel.meteored-minimized
.meteored-legend {
    display:
        none;
}


/* Hora y estado */
.meteored-panel.meteored-minimized
.meteored-current {
    padding:
        6px 9px 3px;
}


.meteored-panel.meteored-minimized
.meteored-time {
    font-size:
        15px;
}


.meteored-panel.meteored-minimized
.meteored-date {
    display:
        none;
}


.meteored-panel.meteored-minimized
.meteored-status {
    padding:
        3px 7px;

    font-size:
        9px;
}


/* Barra reproducción compacta */
.meteored-panel.meteored-minimized
.meteored-navigation {
    grid-template-columns:
        32px 1fr 32px;

    gap:
        5px;

    padding:
        4px 8px 8px;
}


.meteored-panel.meteored-minimized
.meteored-nav,
.meteored-panel.meteored-minimized
.meteored-play {
    height:
        29px;
}


.meteored-panel.meteored-minimized
.meteored-nav {
    font-size:
        19px;
}


.meteored-panel.meteored-minimized
.meteored-play {
    font-size:
        10px;
}


/* ============================================================
   EVITAR QUE LEAFLET ALTERE EL CANVAS RADAR
   ============================================================ */

.meteored-control canvas.leaflet-tile {
    image-rendering:
        auto;
}


/* ============================================================
   MÓVIL
   ============================================================ */

@media (max-width: 768px) {

    .leaflet-bottom.leaflet-right
    .leaflet-control.meteored-control {
        margin-right:
            5px !important;

        margin-bottom:
            2px !important;
    }


    .meteored-panel {
        width:
            min(
                295px,
                calc(100vw - 20px)
            );

        bottom:
            48px;
    }


    .meteored-panel.meteored-minimized {
        width:
            min(
                260px,
                calc(100vw - 20px)
            );

        bottom:
            45px;
    }


    .meteored-title {
        font-size:
            12px;
    }


    .meteored-time {
        font-size:
            20px;
    }
}

/* ============================================================
   VARIANTE DASHBOARD
   ============================================================ */

.meteored-panel.meteored-dashboard-panel {
    width: 280px;
}


/* Panel completo algo más compacto */
.meteored-dashboard-panel .meteored-header {
    padding: 9px 10px;
}

.meteored-dashboard-panel .meteored-current {
    padding: 5px 10px 2px;
}

.meteored-dashboard-panel .meteored-navigation {
    padding: 2px 10px 2px;
}

.meteored-dashboard-panel .meteored-timeline {
    padding: 0 10px 2px;
}

.meteored-dashboard-panel .meteored-opacity-row {
    padding: 2px 10px 2px;
}

.meteored-dashboard-panel .meteored-legend {
    padding: 2px 10px 2px;
}


/* Hora ligeramente menor */
.meteored-dashboard-panel .meteored-time {
    font-size: 19px;
}


/* Minimizado específico dashboard */
.meteored-dashboard-panel.meteored-minimized {
    width: 260px;
}


/* Muy compacto cuando está minimizado */
.meteored-dashboard-panel.meteored-minimized
.meteored-header {
    padding: 5px 7px;
}

.meteored-dashboard-panel.meteored-minimized
.meteored-current {
    padding: 4px 7px 2px;
}

.meteored-dashboard-panel.meteored-minimized
.meteored-navigation {
    grid-template-columns: 30px 1fr 30px;

    gap: 4px;

    padding: 3px 7px 7px;
}

.meteored-dashboard-panel.meteored-minimized
.meteored-nav,
.meteored-dashboard-panel.meteored-minimized
.meteored-play {
    height: 27px;
}