:root {
    --fondo: #ffffff;
    --panel: #f6f7f9;
    --texto: #1d232b;
    --tenue: #5d6773;
    --borde: #d9dee4;
    --acento: #0b5cad;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--texto);
    background: var(--fondo);
}

header {
    height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background: #0d3b66;
    color: #fff;
}

header h1 { font-size: 17px; margin: 0; flex: 1; }
header .tenue { color: #c9d6e3; }

#btn-panel {
    background: none;
    border: 0;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: none;
}

main {
    position: relative;
    display: flex;
    height: calc(100% - 48px);
}

#panel {
    width: 320px;
    flex-shrink: 0;
    overflow-y: auto;
    background: var(--panel);
    border-right: 1px solid var(--borde);
    padding: 8px 16px 24px;
}

#panel h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); margin: 16px 0 8px; }
#panel label { display: block; margin: 4px 0; }
#panel label.sub, #panel div.sub { margin-left: 22px; color: var(--tenue); }
#panel div.sub { margin-top: 2px; margin-bottom: 6px; line-height: 1.35; }
#panel select, #panel input[type=date] { font: inherit; max-width: 100%; }
#panel a { color: var(--acento); }

#mapa { flex: 1; }

.derechos {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid var(--borde);
    font-size: 11px;
    color: var(--tenue);
}

.tenue { color: var(--tenue); font-size: 12px; }

.leyenda { list-style: none; padding: 0; margin: 0; }
.leyenda li { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.leyenda .muestra { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #0003; flex-shrink: 0; }
.leyenda .cuadro { border-radius: 2px; }

.fuentes { list-style: none; padding: 0; margin: 0; font-size: 12px; }
.fuentes li { margin: 0 0 6px; }
.fuentes b { display: block; }

.aviso { background: #fff4e5; border: 1px solid #f0c27b; border-radius: 4px; padding: 6px 8px; margin-top: 8px; font-size: 12px; }
.aviso.error { background: #fdecea; border-color: #f2a59f; }

#detalle {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: min(560px, calc(100% - 24px));
    max-height: calc(100% - 24px);
    overflow-y: auto;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: 8px;
    box-shadow: 0 4px 18px #0003;
    padding: 12px 16px;
    z-index: 1000;
}

.detalle-cabecera { display: flex; justify-content: space-between; gap: 8px; }
.detalle-cabecera h2 { margin: 0; font-size: 16px; }
#detalle-cerrar { background: none; border: 0; font-size: 18px; cursor: pointer; color: var(--tenue); }
#detalle-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; margin: 10px 0; }
#detalle-datos div { background: var(--panel); border-radius: 4px; padding: 6px 8px; }
#detalle-datos span { display: block; font-size: 11px; color: var(--tenue); }
#detalle-datos strong { font-size: 15px; }
.grafico { position: relative; height: 260px; }

.popup b { font-size: 14px; }
.popup .estado { display: inline-block; padding: 1px 6px; border-radius: 3px; color: #fff; font-size: 11px; font-weight: 600; }
.popup button { margin-top: 6px; font: inherit; cursor: pointer; }

/* Rótulos de localidades: sin globo, con halo para leerse sobre cualquier fondo. */
.leaflet-tooltip.etiqueta {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 2px;
    color: #1d232b;
    font-size: 11px;
    text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff;
}
.leaflet-tooltip.etiqueta::before { display: none; }
.leaflet-tooltip.etiqueta.principal { font-weight: 700; font-size: 12px; }
.leaflet-tooltip.etiqueta.secundaria { display: none; }
.zoom-cerca .leaflet-tooltip.etiqueta.secundaria { display: block; }

.aviso-carga {
    position: absolute;
    bottom: 30px;
    left: calc(50% + 160px);
    transform: translateX(-50%);
    z-index: 1000;
    max-width: calc(100% - 32px);
    background: #fff4e5;
    border: 1px solid #f0c27b;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    box-shadow: 0 2px 8px #0002;
}

/* Capas WMS de líneas finas (defensas): halo blanco para que se lean sobre cualquier fondo. */
.wms-halo { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }

/*
 * IDESF entrega las defensas en azul marino (#0000a0), que se confunde con agua, e ignora pedidos de otro color
 * (SLD_BODY) y no permite CORS para recolorear pixeles. Este filtro lo lleva a fucsia (#ff00a6, calculado con las
 * matrices de los filtros CSS); la sombra del mismo color engrosa la línea y la blanca la separa del fondo.
 */
.wms-defensas {
    filter: hue-rotate(70deg) brightness(1.8) saturate(1.5)
            drop-shadow(0 0 1.5px #ff00a6) drop-shadow(0 0 1px #fff);
}
.muestra-defensa { display: inline-block; width: 18px; height: 4px; background: #ff00a6; border-radius: 2px; vertical-align: middle; margin-left: 4px; }

/* Pluviómetros: recuadro con los mm medidos, para distinguirlos de las estaciones de altura (círculos). */
.pluvio {
    min-width: 26px;
    padding: 1px 3px;
    border: 1.5px solid #1d232b;
    border-radius: 3px;
    font: 700 11px/14px system-ui, sans-serif;
    text-align: center;
    box-shadow: 0 1px 3px #0005;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}
.pluvio.incompleto { border-style: dashed; }

/* Onda de crecida: el trazo punteado avanza aguas abajo para mostrar hacia dónde corre el agua. */
.onda-flujo {
    stroke-dasharray: 3 13;
    stroke-linecap: round;
    animation: fluir 1.1s linear infinite;
}
@keyframes fluir {
    to { stroke-dashoffset: -16; }
}
@media (prefers-reduced-motion: reduce) {
    .onda-flujo { animation: none; }
}
.onda-flecha { font-size: 18px; line-height: 18px; text-align: center; text-shadow: 0 0 2px #fff, 0 0 3px #fff; }
.onda-flecha.alerta { font-size: 28px; line-height: 28px; }

/* Tramos que llevan agua hacia una estación en alerta: el agua "se dispara" hacia ella. */
.onda-flujo.hacia-alerta { stroke-dasharray: 4 10; animation-duration: .45s; }
.onda-flujo.hacia-alerta.naranja { animation-duration: .7s; }

/* Zona en alerta: dos anillos que se expanden desde la estación. */
.alerta-zona { position: relative; width: 70px; height: 70px; pointer-events: auto; }
.alerta-zona span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid currentColor;
    background: color-mix(in srgb, currentColor 18%, transparent);
    animation: alerta-pulso 1.8s ease-out infinite;
}
.alerta-zona span + span { animation-delay: .9s; }
.alerta-zona.roja { color: #d50000; }
.alerta-zona.naranja { color: #ef6c00; }
@keyframes alerta-pulso {
    0% { transform: scale(.25); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}
.leaflet-tooltip.etiqueta-alerta {
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    border: 0;
    box-shadow: 0 1px 4px #0006;
}
.leaflet-tooltip.etiqueta-alerta.roja { background: #d50000; }
.leaflet-tooltip.etiqueta-alerta.naranja { background: #ef6c00; }
.leaflet-tooltip.etiqueta-alerta.roja::before { border-top-color: #d50000; }
.leaflet-tooltip.etiqueta-alerta.naranja::before { border-top-color: #ef6c00; }

/* Recorrido del pico proyectado (violeta): flujo animado, flechas, hitos numerados y destino que late. */
.proyeccion-flujo {
    stroke-dasharray: 2 14;
    stroke-linecap: round;
    animation: fluir 1.6s linear infinite;
}
.proyeccion-flecha { color: #7b1fa2; font-size: 22px; line-height: 24px; text-align: center; text-shadow: 0 0 2px #fff, 0 0 3px #fff; }
.proyeccion-hito {
    width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center;
    background: #7b1fa2; color: #fff; font: 700 13px/1 system-ui, sans-serif;
    border: 2px solid #fff; box-shadow: 0 1px 4px #0006; cursor: pointer;
}
.proyeccion-destino { position: relative; width: 60px; height: 60px; cursor: pointer; }
.proyeccion-destino span {
    position: absolute; inset: 0; border-radius: 50%;
    border: 4px solid #7b1fa2; background: #7b1fa222;
    animation: alerta-pulso 2s ease-out infinite;
}
.proyeccion-destino b {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    background: #7b1fa2; color: #fff; font: 700 14px/1 system-ui, sans-serif; border: 2px solid #fff;
}
.leaflet-tooltip.etiqueta-proyeccion {
    background: #7b1fa2; color: #fff; border: 0; font-weight: 600; font-size: 12px; box-shadow: 0 1px 4px #0006;
}
.leaflet-tooltip.etiqueta-proyeccion .tenue { color: #e1bee7; }
.leaflet-tooltip.etiqueta-proyeccion::before { border-left-color: #7b1fa2; }
.leaflet-tooltip.etiqueta-proyeccion.arriba::before { border-left-color: transparent; border-top-color: #7b1fa2; }
.muestra-proyeccion { display: inline-block; width: 18px; height: 5px; background: #7b1fa2; border-radius: 2px; vertical-align: middle; margin-left: 4px; }
@media (prefers-reduced-motion: reduce) {
    .proyeccion-flujo, .proyeccion-destino span { animation: none; }
}

/* Represas: recuadro con barras (compuertas). Ámbar si vierte; rojo si está abriendo compuertas. */
.represa {
    width: 26px;
    height: 22px;
    border-radius: 4px;
    display: grid;
    place-items: center;
    font: 700 13px/1 system-ui, sans-serif;
    background: #fff;
    border: 3px solid #455a64;
    color: #455a64;
    box-shadow: 0 1px 4px #0006;
    cursor: pointer;
}
.represa.vierte { border-color: #f9a825; color: #8d6e00; }
.represa.abriendo { border-color: #d50000; color: #d50000; }
.leaflet-tooltip.etiqueta-represa { font-size: 11px; font-weight: 600; padding: 2px 6px; }
.leaflet-tooltip.etiqueta-represa.pulso { background: #ef6c00; color: #fff; border-color: #ef6c00; }
.leaflet-tooltip.etiqueta-represa.pulso::before { border-top-color: #ef6c00; }
.leaflet-tooltip.etiqueta-represa.abajo.pulso::before { border-top-color: transparent; border-bottom-color: #ef6c00; }
/* Escala de un tributario (Andresito): círculo; naranja que late si hay un pulso en camino. */
.tributario {
    width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center;
    font: 700 15px/1 system-ui, sans-serif;
    background: #fff; border: 3px solid #607d8b; color: #607d8b;
    box-shadow: 0 1px 4px #0006; cursor: pointer;
}
.tributario.pulso { border-color: #ef6c00; color: #ef6c00; animation: latido-tributario 1.4s ease-in-out infinite; }
@keyframes latido-tributario { 50% { box-shadow: 0 0 0 8px #ef6c0033; } }
@media (prefers-reduced-motion: reduce) { .tributario.pulso { animation: none; } }
.represas { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; }
.represas button {
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: 12px;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: 4px;
    padding: 5px 7px;
    cursor: pointer;
    color: var(--texto);
}
.represas button b { display: block; font-size: 13px; }
.represas .abriendo { color: #c62828; font-weight: 600; }
.represas .cerrando { color: #2e7d32; font-weight: 600; }

/* Punto vigilado: anillo con el color de su alerta estadística. */
.vigilado {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 14px;
    line-height: 1;
    background: #fff;
    border: 3px solid #0d3b66;
    color: #0d3b66;
    box-shadow: 0 1px 4px #0006;
    cursor: pointer;
}
.vigilado.naranja { border-color: #ef6c00; color: #ef6c00; }
.vigilado.roja { border-color: #d50000; color: #d50000; }
.leaflet-tooltip.etiqueta-vigilado {
    background: #fff;
    border: 1px solid #0d3b66;
    color: #0d3b66;
    font-weight: 600;
    font-size: 11px;
    padding: 2px 6px;
}

/* Arriba del mapa, a la derecha del panel (320 px) y de los botones de zoom. */
.barra-alertas {
    position: absolute;
    top: 10px;
    left: calc(320px + 56px);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: min(560px, calc(100% - 320px - 120px));
}
/* display:flex pisaba el atributo hidden: la barra no se ocultaba al destildar las alertas. */
.barra-alertas[hidden] { display: none; }
.alerta-item {
    font: 600 12px/1.3 system-ui, sans-serif;
    text-align: left;
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    box-shadow: 0 2px 8px #0004;
}
.alerta-item.roja { background: #d50000; }
.alerta-item.naranja { background: #ef6c00; }
@media (max-width: 760px) {
    /* En celular el panel se superpone al mapa, así que la barra arranca junto al zoom. */
    .barra-alertas { left: 50px; max-width: calc(100% - 60px); }
    .aviso-carga { left: 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .alerta-zona span { animation: none; transform: scale(.9); opacity: .7; }
}
.onda-frente {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid #d32f2f;
    animation: latido 1.6s ease-out infinite;
}
@keyframes latido {
    0% { transform: scale(.5); opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .onda-frente { animation: none; opacity: .8; }
}
#detalle-extra p { margin: 8px 0; }
.tabla-onda { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
.tabla-onda th, .tabla-onda td { padding: 4px 6px; border-bottom: 1px solid var(--borde); text-align: left; white-space: nowrap; }
.tabla-onda th { color: var(--tenue); font-weight: 600; }
.tabla-onda td.num { text-align: right; }
.tabla-onda tr.frente td { background: #fdecea; }
.sube { color: #c62828; }
.baja { color: #2e7d32; }

.glofas-icono {
    width: 14px;
    height: 14px;
    background: #7b1fa2;
    border: 2px solid #fff;
    transform: rotate(45deg);
    box-shadow: 0 0 2px #000a;
}

@media (max-width: 760px) {
    #btn-panel { display: block; }
    #panel {
        position: absolute;
        inset: 0 auto 0 0;
        z-index: 1100;
        width: min(320px, 90%);
        transform: translateX(-100%);
        transition: transform .2s;
    }
    #panel.abierto { transform: none; }
    header h1 { font-size: 15px; }
    #reloj { display: none; }
}