/*
 * =========================================================
 * Popup SAIH
 * =========================================================
 */

.saih-popup {
    width: 270px;

    color: #354f5b;

    font-family: inherit;
}


/* Cabecera */

.saih-popup__header {
    padding: 1px 1px 8px;

    border-bottom: 1px solid #dce6ea;
}

.saih-popup__title {
    color: #294f60;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.saih-popup__type {
    margin-top: 2px;

    color: #7d929c;

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

    letter-spacing: 0.04em;

    text-transform: uppercase;
}


/* Estado */

.saih-popup__metrics {
    display: flex;

    margin: 10px 0;
}

.saih-popup__metric {
    flex: 1;

    min-width: 0;

    padding: 8px 9px;

    background: #f3f7f8;

    border: 1px solid #e2eaed;
    border-radius: 10px;
}

.saih-popup__metric-label {
    margin-bottom: 3px;

    color: #7a909a;

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

.saih-popup__metric-value {
    color: #294f60;

    font-size: 15px;
    font-weight: 700;
}


/*
 * Escenarios.
 * Solo coloreamos el texto.
 */

.saih-popup__value--normal {
    color: #3f8b61;
}

.saih-popup__value--prealerta {
    color: #d2c028;
}

.saih-popup__value--alerta {
    color: #FAA558;
}

.saih-popup__value--emergencia {
    color: #b32632;
}

.saih-popup__value--revision {
    color: #7b8790;
}


/* Acciones */

.saih-popup__actions {
    display: flex;

    flex-wrap: wrap;

    gap: 5px;

    padding-top: 8px;

    border-top: 1px solid #dce6ea;
}

.saih-popup__action,
.saih-popup__action:link,
.saih-popup__action:visited {
    display: inline-block;

    padding: 5px 8px;

    background: #eef3f5;

    border: 1px solid #d5e0e4;
    border-radius: 7px;

    color: #456875 !important;

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

    line-height: 1.2;

    text-decoration: none !important;
}

.saih-popup__action:hover,
.saih-popup__action:focus {
    background: #e3ecef;

    color: #294f60 !important;

    text-decoration: none !important;
}


/* Ficha */

.saih-popup__action--primary,
.saih-popup__action--primary:link,
.saih-popup__action--primary:visited {
    background: #39758c;

    border-color: #39758c;

    color: #fff !important;
}

.saih-popup__action--primary:hover,
.saih-popup__action--primary:focus {
    background: #2f6478;

    border-color: #2f6478;

    color: #fff !important;
}


/* Contenedor Leaflet */

.saih-popup-shell
.leaflet-popup-content-wrapper {
    border-radius: 14px;

    box-shadow:
        0 5px 18px
        rgba(34, 67, 80, 0.16);
}

.saih-popup-shell
.leaflet-popup-content {
    margin: 13px 15px;
}

/*
 * =========================================================
 * VISOR SEQUÍA / ESCASEZ - CONTROLES LEAFLET
 * =========================================================
 */

#map.visor-sequia
.leaflet-top.leaflet-right {
    top: 68px !important;
    right: 26px !important;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

#map.visor-sequia
.leaflet-top.leaflet-right
> .leaflet-control {
    float: none !important;
    clear: none !important;
    margin: 0 !important;
}

/* Orden común de herramientas. */
#map.visor-sequia .saih-sequia-control-layers {
    order: 1;
}

#map.visor-sequia .saih-sequia-control-zoom {
    order: 2;
}

#map.visor-sequia .saih-sequia-control-home {
    order: 3;
}

#map.visor-sequia .saih-sequia-control-fullscreen {
    order: 4;
}

#map.visor-sequia .saih-sequia-control-file {
    order: 5;
}

/* Tamaño homogéneo con el resto de visores. */
#map.visor-sequia
.leaflet-top.leaflet-right
.leaflet-bar a,

#map.visor-sequia
.leaflet-top.leaflet-right
.leaflet-bar button,

#map.visor-sequia
.leaflet-top.leaflet-right
.easy-button-button,

#map.visor-sequia
.leaflet-top.leaflet-right
.leaflet-control-fullscreen a,

#map.visor-sequia
.leaflet-control-layers-toggle {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    line-height: 34px !important;
    box-sizing: border-box;
}

#map.visor-sequia
.leaflet-control-layers-toggle {
    background-size: 18px 18px !important;
    background-position: center !important;
    border-radius: 4px;
}


/*
 * =========================================================
 * Selector principal UTE / UTS
 * =========================================================
 *
 * UTE y UTS son los dos modos principales de esta vista.
 * Se muestran fuera del selector de capas secundarias para
 * que el cambio entre Escasez y Sequía sea inmediato.
 */
#map.visor-sequia
.saih-sequia-mode-control {
    margin-right: 26px !important;
    margin-bottom: 10px !important;

    padding: 6px;

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

    border: 1px solid #dce6ea;
    border-radius: 12px;

    box-shadow:
        0 3px 10px
        rgba(34, 67, 80, 0.14);

    backdrop-filter: blur(4px);

    font-family: 'Open Sans', Arial, sans-serif;
}

#map.visor-sequia
.saih-sequia-mode-switch {
    display: flex;
    align-items: center;
    gap: 5px;
}

#map.visor-sequia
.saih-sequia-mode-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;

    padding: 0 12px;

    background: #f7fafb;

    border: 1px solid #dce5e8;
    border-radius: 7px;

    color: #456875;

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}

#map.visor-sequia
.saih-sequia-mode-btn:hover,
#map.visor-sequia
.saih-sequia-mode-btn:focus {
    background: #eef4f6;
    border-color: #bfd1d7;
    color: #294f60;
    outline: none;
}

#map.visor-sequia
.saih-sequia-mode-btn.is-active {
    background: #39758c;
    border-color: #39758c;
    color: #fff;

    box-shadow:
        0 2px 6px
        rgba(57, 117, 140, 0.20);
}

#map.visor-sequia
.saih-sequia-mode-code {
    margin-right: 5px;

    font-weight: 700;
    letter-spacing: 0.02em;
}

@media (max-width: 768px) {

    #map.visor-sequia
    .saih-sequia-mode-control {
        margin-right: 14px !important;
        margin-bottom: 10px !important;

        padding: 5px;
    }

    #map.visor-sequia
    .saih-sequia-mode-btn {
        min-height: 32px;
        padding: 0 9px;
        font-size: 11px;
    }

        /*
     * El desplegable de tipos debe quedar
     * por encima del cajetín Resumen.
     */
    #map #buttons.top-actions-wrap {
        z-index: 1040 !important;
    }

    #map #buttons.top-actions-wrap.is-open {
        z-index: 1045 !important;
    }
}


/*
 * =========================================================
 * Panel de situación UTE / UTS
 * =========================================================
 */

#map.visor-sequia
.leaflet-top.leaflet-left {
    top: 10px !important;
    left: 12px !important;
    right: auto !important;
    z-index: 1030 !important;
}

#map.visor-sequia
.saih-sequia-status-control {
    position: relative;
    z-index: 1031;

    margin: 0 !important;

    font-family:
        'Open Sans',
        Arial,
        sans-serif;
}

#map.visor-sequia
.saih-sequia-status-panel {
    width: 320px;
    max-width: calc(100vw - 92px);

    overflow: hidden;

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

    border: 1px solid #dce6ea;
    border-radius: 12px;

    box-shadow:
        0 4px 16px
        rgba(34, 67, 80, 0.16);

    backdrop-filter: blur(5px);
}

#map.visor-sequia
.saih-sequia-status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding: 9px 10px 8px;

    border-bottom: 1px solid #e2eaed;
}

#map.visor-sequia
.saih-sequia-status-heading {
    min-width: 0;
}

#map.visor-sequia
.saih-sequia-status-kicker {
    margin-bottom: 2px;

    color: #6e8792;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

#map.visor-sequia
.saih-sequia-status-title {
    overflow: hidden;

    color: #294f60;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}

#map.visor-sequia
.saih-sequia-status-tools {
    display: flex;
    align-items: center;
    gap: 5px;

    flex: 0 0 auto;
}

#map.visor-sequia
.saih-sequia-status-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 25px;
    height: 24px;

    padding: 0 7px;

    background: #eef4f6;

    border: 1px solid #d9e4e8;
    border-radius: 12px;

    color: #456875;

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

#map.visor-sequia
.saih-sequia-status-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    padding: 0;

    background: #f7fafb;

    border: 1px solid #dce5e8;
    border-radius: 7px;

    color: #607d89;

    font-size: 14px;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;
}

#map.visor-sequia
.saih-sequia-status-icon-btn:hover,
#map.visor-sequia
.saih-sequia-status-icon-btn:focus {
    background: #eef4f6;
    border-color: #bfd1d7;
    color: #294f60;
    outline: none;
}

#map.visor-sequia
.saih-sequia-status-body {
    max-height: 440px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#map.visor-sequia
.saih-sequia-status-group +
.saih-sequia-status-group {
    border-top: 1px solid #e7edef;
}

#map.visor-sequia
.saih-sequia-status-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    width: 100%;

    padding: 8px 10px;

    background: #fbfcfc;
    border: 0;

    text-align: left;

    cursor: pointer;
}

#map.visor-sequia
.saih-sequia-status-group-name {
    display: flex;
    align-items: center;
    gap: 7px;

    min-width: 0;

    color: #456875;

    font-size: 11.5px;
    font-weight: 700;
}

#map.visor-sequia
.saih-sequia-status-accent {
    width: 4px;
    height: 18px;

    flex: 0 0 auto;

    border-radius: 3px;

    background: var(--saih-status-accent, #65747b);
}

#map.visor-sequia
.saih-sequia-status-group-side {
    display: flex;
    align-items: center;
    gap: 6px;

    color: #7d929c;

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

#map.visor-sequia
.saih-sequia-status-group-total {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 20px;
    height: 20px;

    padding: 0 5px;

    background: #fff;

    border: 1px solid #dce5e8;
    border-radius: 10px;
}

#map.visor-sequia
.saih-sequia-status-group-toggle {
    font-size: 9px;
}

#map.visor-sequia
.saih-sequia-status-items {
    background: rgba(255, 255, 255, 0.95);
}

#map.visor-sequia
.saih-sequia-status-group.is-collapsed
.saih-sequia-status-items {
    display: none;
}

#map.visor-sequia
.saih-sequia-status-row {
    display: block;

    width: 100%;

    padding: 7px 11px 7px 14px;

    background: transparent;

    border: 0;
    border-top: 1px solid #eef2f3;

    text-align: left;

    cursor: pointer;
}

#map.visor-sequia
.saih-sequia-status-row:hover,
#map.visor-sequia
.saih-sequia-status-row:focus {
    background: #f3f7f8;
    outline: none;
}

#map.visor-sequia
.saih-sequia-status-row-title {
    overflow: hidden;

    color: #365f70;

    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.25;

    text-overflow: ellipsis;
    white-space: nowrap;
}

#map.visor-sequia
.saih-sequia-status-row-meta {
    margin-top: 2px;

    color: #7d929c;

    font-size: 11.5px;
    line-height: 1.2;
}

#map.visor-sequia
.saih-sequia-status-more {
    display: block;

    width: 100%;

    padding: 7px 10px;

    background: #f8fafb;

    border: 0;
    border-top: 1px solid #e7edef;

    color: #527786;

    font-size: 10px;
    font-weight: 700;
    text-align: center;

    cursor: pointer;
}

#map.visor-sequia
.saih-sequia-status-more:hover,
#map.visor-sequia
.saih-sequia-status-more:focus {
    background: #eef4f6;
    outline: none;
}

#map.visor-sequia
.saih-sequia-status-row.is-extra {
    display: none;
}

#map.visor-sequia
.saih-sequia-status-group.is-expanded
.saih-sequia-status-row.is-extra {
    display: block;
}

#map.visor-sequia
.saih-sequia-status-group.is-expanded
.saih-sequia-status-more {
    display: none;
}

#map.visor-sequia
.saih-sequia-status-empty {
    padding: 22px 16px;

    color: #708791;

    font-size: 11px;
    line-height: 1.45;
    text-align: center;
}

#map.visor-sequia
.saih-sequia-status-empty strong {
    display: block;

    margin-bottom: 3px;

    color: #456875;

    font-size: 12px;
}

#map.visor-sequia
.saih-sequia-status-panel.is-minimized
.saih-sequia-status-body {
    display: none;
}

#map.visor-sequia
.saih-sequia-status-panel.is-minimized
.saih-sequia-status-header {
    border-bottom: 0;
}

#map.visor-sequia
.saih-sequia-status-control.is-closed
.saih-sequia-status-panel {
    display: none;
}

#map.visor-sequia
.saih-sequia-status-restore {
    display: none;

    padding: 7px 10px;

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

    border: 1px solid #dce6ea;
    border-radius: 9px;

    color: #456875;

    box-shadow:
        0 3px 10px
        rgba(34, 67, 80, 0.14);

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

    cursor: pointer;
}

#map.visor-sequia
.saih-sequia-status-control.is-closed
.saih-sequia-status-restore {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 768px) {

    #map.visor-sequia
    .leaflet-top.leaflet-left {
        top: 58px !important;
        left: 10px !important;
    }

    #map.visor-sequia
    .saih-sequia-status-panel {
        width: min(305px, calc(100vw - 82px));
    }

    #map.visor-sequia
    .saih-sequia-status-body {
        max-height: 390px;
    }
}


/*
 * =========================================================
 * Leyenda moderna y dinámica UTE / UTS
 * =========================================================
 */

#map.visor-sequia
.saih-sequia-legend-control {
    position: relative;
    z-index: 1020;

    margin-left: 12px !important;
    margin-bottom: 14px !important;

    font-family: 'Open Sans', Arial, sans-serif;
}

#map.visor-sequia
.saih-sequia-legend-panel {
    width: 320px;
    max-width: calc(100vw - 92px);
    overflow: hidden;

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

    border: 1px solid #dce6ea;
    border-radius: 12px;

    box-shadow:
        0 5px 18px
        rgba(34, 67, 80, 0.14);

    backdrop-filter: blur(4px);

    color: #354f5b;
}

#map.visor-sequia
.saih-sequia-legend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    width: 100%;
    padding: 9px 10px 8px 12px;

    background: transparent;
    border: 0;

    text-align: left;
    cursor: pointer;
}

#map.visor-sequia
.saih-sequia-legend-header:hover,
#map.visor-sequia
.saih-sequia-legend-header:focus {
    background: rgba(238, 244, 246, 0.70);
    outline: none;
}

#map.visor-sequia
.saih-sequia-legend-heading {
    min-width: 0;
}

#map.visor-sequia
.saih-sequia-legend-kicker {
    margin-bottom: 2px;

    color: #7d929c;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

#map.visor-sequia
.saih-sequia-legend-title {
    color: #294f60;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

#map.visor-sequia
.saih-sequia-legend-chevron {
    flex: 0 0 auto;

    color: #80949d;

    font-size: 11px;
    transition: transform 0.15s ease;
}

#map.visor-sequia
.saih-sequia-legend-panel.is-collapsed
.saih-sequia-legend-chevron {
    transform: rotate(-90deg);
}

#map.visor-sequia
.saih-sequia-legend-panel.is-collapsed
.saih-sequia-legend-body {
    display: none;
}

#map.visor-sequia
.saih-sequia-legend-body {
    border-top: 1px solid rgba(220, 230, 234, 0.90);
}

#map.visor-sequia
.saih-sequia-legend-section-title {
    padding: 7px 11px 5px 12px;

    background: rgba(247, 250, 251, 0.68);
    border-bottom: 1px solid rgba(229, 237, 240, 0.92);

    color: #607d89;

    font-size: 11.5px;
    font-weight: 700;
}

#map.visor-sequia
.saih-sequia-legend-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;

    padding: 10px 12px 11px;
}

#map.visor-sequia
.saih-sequia-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;

    min-width: 0;

    color: #456875;

    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
}

#map.visor-sequia
.saih-sequia-legend-swatch {
    flex: 0 0 auto;

    width: 14px;
    height: 14px;

    background: var(--legend-fill);
    border: 2px solid var(--legend-color);
    border-radius: 4px;

    box-sizing: border-box;
}

@media (max-width: 768px) {

    #map.visor-sequia
    .saih-sequia-legend-control {
        margin-left: 10px !important;
        margin-bottom: 10px !important;
    }

    #map.visor-sequia
    .saih-sequia-legend-panel {
        width: min(305px, calc(100vw - 82px));
        max-width: none;
    }
}

/* =========================================================
   VISOR U - BOTONERA LEAFLET UNIFICADA
   Diseño igual a Pluviometría y Temperatura
   ========================================================= */

/* Contenedores sin doble borde */
#map.visor-sequia .leaflet-top.leaflet-right .leaflet-bar {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Botones individuales */
#map.visor-sequia .leaflet-top.leaflet-right .leaflet-bar a,
#map.visor-sequia .leaflet-top.leaflet-right .leaflet-bar button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #29485b !important;

    border: 1px solid #dce6ec !important;
    border-radius: 5px !important;

    font-size: 17px;
    line-height: 1 !important;
    box-sizing: border-box;

    box-shadow: 0 2px 6px rgba(25, 55, 75, 0.14);
}

/* Hover */
#map.visor-sequia .leaflet-top.leaflet-right .leaflet-bar a:hover,
#map.visor-sequia .leaflet-top.leaflet-right .leaflet-bar button:hover {
    background: #eef4f7 !important;
    color: #17658f !important;
    border-color: #b9cfdd !important;
}

/* Zoom: botones separados */
#map.visor-sequia .leaflet-control-zoom {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#map.visor-sequia .leaflet-control-zoom a {
    font-size: 19px !important;
    font-weight: 600;
}

/* EasyButton: contenedor Home sin borde */
#map.visor-sequia .leaflet-control-easyButton {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Centrado del contenido de EasyButton */
#map.visor-sequia .leaflet-control-easyButton .easy-button-button {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    overflow: hidden;
    line-height: 1 !important;
}

#map.visor-sequia .leaflet-control-easyButton .easy-button-button span,
#map.visor-sequia .leaflet-control-easyButton .easy-button-button i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* Ajuste del icono Home */
#map.visor-sequia .saih-sequia-control-home .glyphicon-home {
    position: relative !important;
    top: 8px !important;
    font-size: 17px !important;
}

/* Capas: un único borde */
#map.visor-sequia
.leaflet-control-layers:not(.leaflet-control-layers-expanded) {
    background: #ffffff !important;
    border: 1px solid #dce6ec !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 6px rgba(25, 55, 75, 0.14) !important;
}

/* Icono capas */
#map.visor-sequia .leaflet-control-layers-toggle {
    width: 34px !important;
    height: 34px !important;
    background-size: 22px 22px !important;
    background-position: center !important;
}

/* Capas desplegadas */
#map.visor-sequia .leaflet-control-layers-expanded {
    background: #ffffff;
    border: 1px solid #dce6ec;
    border-radius: 8px;
    padding: 8px 10px;
}

/* Icono de carpeta */
#map.visor-sequia .saih-sequia-control-file img {
    width: 19px;
    height: 19px;
    object-fit: contain;
}

/* Foco accesible */
#map.visor-sequia .leaflet-top.leaflet-right a:focus-visible,
#map.visor-sequia .leaflet-top.leaflet-right button:focus-visible {
    outline: 2px solid #2477a5;
    outline-offset: 2px;
}


/* Selector de capas: sombreado para opciones seleccionadas */
#map.visor-sequia .leaflet-control-layers label {
    padding: 4px 7px;
    margin: 1px 0;
    border-radius: 6px;
    transition: background-color .15s ease;
}
#map.visor-sequia .leaflet-control-layers label:has(input:checked) {
    background: #eaf2f6 !important;
    font-weight: 600;
}
#map.visor-sequia .leaflet-control-layers label:hover { background: #f2f6f8; }

/* Panel lateral explicativo UTE/UTS: presentación acorde con los demás paneles.
   Sin cambiar la mecánica ni el tamaño que gestiona Leaflet.Sidepanel. */
.visor-u #mySidepanelRight .sidepanel-inner-wrapper {
    background: #f8fafb;
    color: #354f5b;
    font-family: 'Open Sans', Arial, sans-serif;
}
.visor-u #mySidepanelRight .sidepanel-tabs-wrapper {
    background: #edf3f5;
    border-bottom: 1px solid #dce6ea;
}
.visor-u #mySidepanelRight .sidepanel-tab-link {
    color: #456875;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
.visor-u #mySidepanelRight .sidepanel-tab-link:hover,
.visor-u #mySidepanelRight .sidepanel-tab.active .sidepanel-tab-link,
.visor-u #mySidepanelRight .sidepanel-tab.is-active .sidepanel-tab-link {
    color: #294f60;
    background: #fff;
}
.visor-u #mySidepanelRight .sidepanel-tab-content {
    color: #425e6b;
    line-height: 1.55;
}
.visor-u #mySidepanelRight .sidepanel-tab-content h4 {
    color: #294f60;
    font-size: 15px;
    font-weight: 700;
    margin: 13px 0 9px;
}
.visor-u #mySidepanelRight .sidepanel-tab-content p {
    font-size: 13px !important;
    line-height: 1.55;
    margin: 0 0 11px;
}
.visor-u #mySidepanelRight .sidepanel-tab-content a { color: #2477a5; }
.visor-u #mySidepanelRight .sidepanel-tab-content a:hover { color: #174f70; }