:root{--bg:#071019;--border:#1b3044;--text:#f5f8fb;--muted:#9db2c4;--cyan:#36d5ff;--blue:#3b9eff;--accent:#f0a500;--green:#22c55e;--red:#ef4444;--buganvilla:#a8325a}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;min-width:300px;background:var(--bg);color:var(--text);font-family:"Sora",sans-serif}
body{overflow:hidden}
button,input{font:inherit}

.visor{display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto auto;width:100%;height:100vh;height:100dvh;background:var(--bg)}

.visor-cabecera{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:70px;padding:12px 15px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,#102234,#081522)}
.visor-titulo{min-width:0}
.visor-titulo-principal{font-size:15px;font-weight:700;text-transform:uppercase}
.visor-titulo-secundario{margin-top:4px;color:var(--muted);font-size:9px}
.visor-derecha{display:flex;align-items:center;gap:14px;flex:0 0 auto}

.estado{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:8px;white-space:nowrap}
.estado-punto{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(240,165,0,.45)}
.estado.correcto .estado-punto{background:var(--green);box-shadow:0 0 12px rgba(34,197,94,.55)}
.estado.error .estado-punto{background:var(--red);box-shadow:0 0 12px rgba(239,68,68,.55)}

.instante{text-align:right;font-family:"JetBrains Mono",monospace}
.instante-hora{color:var(--accent);font-size:17px;font-weight:600}
.instante-fecha{margin-top:2px;color:var(--muted);font-size:8px}

/* =========================================================
   SELECTOR DE FONDO CARTOGRÁFICO
   Solo uno puede estar activo.
   ========================================================= */

.selector-fondos{
display:flex;
align-items:center;
gap:12px;
width:100%;
padding:7px 12px;
border-bottom:1px solid rgba(27,48,68,.78);
background:linear-gradient(90deg,#07131f,#0a1a28,#07131f)
}

.selector-fondos-titulo{
flex:0 0 auto;
color:var(--muted);
font-size:8px;
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase
}

.selector-fondos-controles{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:7px;
width:min(620px,100%)
}

.selector-fondo{
--fondo-color:var(--blue);
position:relative;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
min-width:0;
height:31px;
padding:0 12px;
border:1px solid color-mix(in srgb,var(--fondo-color) 28%,var(--border));
border-radius:8px;
background:rgba(10,25,38,.78);
color:var(--muted);
font-size:8px;
font-weight:700;
text-transform:uppercase;
cursor:pointer;
transition:border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease
}

@media (hover: hover) {
.selector-fondo:hover{
border-color:var(--fondo-color);
color:var(--text);
transform:translateY(-1px)
}
}

.selector-fondo::before{
content:"";
width:8px;
height:8px;
flex:0 0 auto;
border:1px solid var(--fondo-color);
border-radius:50%;
background:transparent
}

.selector-fondo.activo{
border-color:var(--fondo-color);
background:color-mix(in srgb,var(--fondo-color) 15%,#071019);
color:#fff;
box-shadow:
0 0 12px color-mix(in srgb,var(--fondo-color) 34%,transparent),
inset 0 0 10px color-mix(in srgb,var(--fondo-color) 9%,transparent)
}

.selector-fondo.activo::before{
background:var(--fondo-color);
box-shadow:0 0 9px var(--fondo-color)
}

.selector-fondo-politico{--fondo-color:#3b9eff}
.selector-fondo-fisico{--fondo-color:#84cc16}
.selector-fondo-negro{--fondo-color:#e5edf5}

/* =========================================================
   SELECTOR DE CAPAS METEOROLÓGICAS
   Varias pueden estar activas simultáneamente.
   ========================================================= */

.selector-capas{
display:flex;
align-items:center;
gap:12px;
width:100%;
padding:8px 12px;
border-bottom:1px solid var(--border);
background:linear-gradient(90deg,#081522,#0c1d2c,#081522)
}

.selector-capas-titulo{
flex:0 0 auto;
color:var(--muted);
font-size:8px;
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase
}

.selector-capas-controles{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:7px;
width:min(620px,100%)
}

.selector-capa{
--capa-color:var(--cyan);
position:relative;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
min-width:0;
height:34px;
padding:0 12px;
border:1px solid color-mix(in srgb,var(--capa-color) 32%,var(--border));
border-radius:8px;
background:rgba(13,30,45,.80);
color:var(--muted);
font-size:9px;
font-weight:700;
text-transform:uppercase;
cursor:pointer;
transition:border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease
}

@media (hover: hover) {
.selector-capa:hover:not(:disabled){
border-color:var(--capa-color);
color:var(--text);
transform:translateY(-1px)
}
}

.selector-capa::before{
content:"";
width:8px;
height:8px;
flex:0 0 auto;
border:1px solid var(--capa-color);
border-radius:50%;
background:transparent;
box-shadow:0 0 0 transparent
}

.selector-capa.activa{
border-color:var(--capa-color);
background:color-mix(in srgb,var(--capa-color) 17%,#071019);
color:#fff;
box-shadow:
0 0 13px color-mix(in srgb,var(--capa-color) 42%,transparent),
inset 0 0 12px color-mix(in srgb,var(--capa-color) 10%,transparent)
}

.selector-capa.activa::before{
background:var(--capa-color);
box-shadow:0 0 10px var(--capa-color)
}

.selector-capa:disabled{cursor:not-allowed;opacity:.42}

.selector-capa-radar{--capa-color:#36d5ff}
.selector-capa-satelite{--capa-color:#9b7cff}
.selector-capa-rayos{--capa-color:#f0a500}

.selector-capa-estado{
font-size:6px;
font-weight:500;
letter-spacing:0;
color:var(--muted);
text-transform:none
}

/* =========================================================
   MAPA
   ========================================================= */

.mapa-zona{position:relative;min-width:0;min-height:0;overflow:hidden;background:#091521}
#mapa-radar{position:absolute;inset:0;width:100%;height:100%;background:#091521}

.leaflet-container{position:relative;overflow:hidden;outline:0;background:#091521;font-family:"Sora",sans-serif}
.leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-pane>svg,.leaflet-pane>canvas,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}

.leaflet-map-pane{z-index:400}
.leaflet-tile-pane{z-index:200}
.leaflet-overlay-pane{z-index:400}
.leaflet-shadow-pane{z-index:500}
.leaflet-marker-pane{z-index:600}
.leaflet-tooltip-pane{z-index:650}
.leaflet-popup-pane{z-index:700}

.leaflet-map-pane canvas{z-index:100}
.leaflet-map-pane svg{z-index:200}

.leaflet-container .leaflet-overlay-pane svg,
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer{
max-width:none!important;
max-height:none!important
}

.leaflet-container.leaflet-touch-zoom{touch-action:pan-x pan-y}
.leaflet-container.leaflet-touch-drag{touch-action:pinch-zoom}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom{touch-action:none}

.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{
user-select:none;
-webkit-user-drag:none
}

.leaflet-tile{visibility:hidden}
.leaflet-tile-loaded{visibility:inherit}

.leaflet-zoom-animated{transform-origin:0 0}
.leaflet-zoom-anim .leaflet-zoom-animated{transition:transform .25s cubic-bezier(0,0,.25,1)}
.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}

/* =========================================================
   CONTROLES LEAFLET
   ========================================================= */

.leaflet-control{position:relative;z-index:800;pointer-events:auto}
.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}
.leaflet-top{top:0}
.leaflet-right{right:0}
.leaflet-bottom{bottom:0}
.leaflet-left{left:0}
.leaflet-control{float:left;clear:both}
.leaflet-right .leaflet-control{float:right}

.leaflet-top .leaflet-control{margin-top:10px}
.leaflet-bottom .leaflet-control{margin-bottom:10px}
.leaflet-left .leaflet-control{margin-left:10px}
.leaflet-right .leaflet-control{margin-right:10px}

.leaflet-bar{
overflow:hidden;
border-radius:6px;
box-shadow:0 2px 12px rgba(0,0,0,.35)
}

.leaflet-bar a{
display:block;
width:32px;
height:32px;
line-height:32px;
text-align:center;
text-decoration:none;
background:rgba(7,20,31,.94);
color:#edf7ff;
border-bottom:1px solid var(--border)
}

.leaflet-bar a:last-child{border-bottom:none}

@media (hover: hover) {
.leaflet-bar a:hover{background:#143047;color:var(--cyan)}
}

.leaflet-control-zoom-in,
.leaflet-control-zoom-out{
font-size:20px!important;
font-weight:500
}

.leaflet-control-attribution{
padding:3px 6px;
background:rgba(4,12,19,.78);
color:#a9bac8;
font-size:7px
}

.leaflet-control-attribution a{color:#d1e8f6}

.leaflet-control-scale-line{
padding:2px 5px 1px;
border:2px solid rgba(255,255,255,.78);
border-top:none;
background:rgba(5,15,23,.70);
color:#fff;
font-size:8px;
line-height:1.1;
white-space:nowrap
}

/* =========================================================
   LEYENDA DINÁMICA DE SEGUIMIENTO

   Franja horizontal muy compacta pegada al borde superior del mapa.

   La esquina izquierda se reserva para el control de zoom de Leaflet.

   El contenido se genera dinámicamente en radar.js:

       09:30 · Infrarrojo · Lluvia · Rayos

   Lluvia y Rayos solamente aparecen cuando sus respectivas capas
   están activas.
   ========================================================= */

.leyenda-seguimiento{
position:absolute;
z-index:900;
top:0;
left:0;
right:0;
display:flex;
flex-direction:row;
align-items:center;
gap:6px;
width:auto;
height:32px;
max-width:none;
padding:0 10px 0 56px;
overflow:hidden;
border:0;
border-bottom:1px solid rgba(255,255,255,.16);
border-radius:0;
background:rgba(5,14,23,.82);
box-shadow:0 2px 8px rgba(0,0,0,.25);
backdrop-filter:blur(5px);
-webkit-backdrop-filter:blur(5px);
color:#dce8f2;
font-size:9px;
line-height:1;
white-space:nowrap;
pointer-events:none;
user-select:none
}

.leyenda-seguimiento>*{
flex:0 0 auto;
min-width:0
}

.leyenda-seguimiento-separador{
color:#70879a;
font-weight:700
}

.leyenda-seguimiento-hora{
margin:0;
color:#fff;
font-family:"JetBrains Mono",monospace;
font-size:10px;
font-weight:700;
line-height:1;
white-space:nowrap
}

.leyenda-seguimiento-linea{
margin:0;
color:#d5e2ec;
font-size:9px;
font-weight:600;
line-height:1;
white-space:nowrap
}

.leyenda-seguimiento-linea strong{
color:#fff;
font-weight:700
}

/* =========================================================
   LOCALIDADES
   Permanecen visualmente por encima de las capas meteorológicas.
   ========================================================= */

.leaflet-tooltip{
position:absolute;
padding:4px 7px;
border:1px solid rgba(255,255,255,.18);
border-radius:5px;
background:rgba(5,16,26,.92);
color:#fff;
box-shadow:none;
font-size:8px;
white-space:nowrap;
pointer-events:none;
user-select:none
}

.leaflet-tooltip::before{display:none}

.leaflet-tooltip.etiqueta-localidad{
padding:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
text-shadow:none;
-webkit-text-stroke:0;
letter-spacing:.005em
}

.leaflet-tooltip.etiqueta-capital{
color:var(--buganvilla);
font-size:15px;
font-weight:800;
text-transform:uppercase
}

.leaflet-tooltip.etiqueta-ciudad,
.leaflet-tooltip.etiqueta-cabecera{
color:var(--buganvilla);
font-size:14px;
font-weight:800
}

.leaflet-tooltip.etiqueta-municipio{
color:#111;
font-size:11px;
font-weight:700
}

.leaflet-tooltip.etiqueta-pedania{
color:#111;
font-size:9px;
font-weight:700
}

.leaflet-tooltip.etiqueta-estacion{
color:#111;
font-size:10px;
font-weight:700
}

/* =========================================================
   LOCALIDADES EN ÁMBITO NACIONAL

   En nacional únicamente se mostrarán las localidades marcadas
   expresamente para dicho ámbito.

   Sus rótulos son deliberadamente mucho más pequeños que en regional
   para evitar el amontonamiento observado sobre Andalucía.
   ========================================================= */

.leaflet-tooltip.etiqueta-localidad.etiqueta-nacional{
font-size:9px!important;
font-weight:800!important;
letter-spacing:.01em;
line-height:1.05;
text-transform:uppercase
}

.leaflet-tooltip.etiqueta-capital.etiqueta-nacional{
font-size:9px!important
}

/* =========================================================
   LEYENDA ANTIGUA
   Se conserva por compatibilidad con posibles usos existentes.
   ========================================================= */

.leyenda{
position:absolute;
z-index:800;
left:14px;
bottom:14px;
max-width:285px;
padding:10px 12px;
border:1px solid rgba(255,255,255,.12);
border-radius:9px;
background:rgba(5,14,23,.88);
backdrop-filter:blur(8px);
pointer-events:none
}

.leyenda-titulo{
color:var(--cyan);
font-size:8px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase
}

.leyenda-texto{
margin-top:4px;
color:#d0dce6;
font-size:8px;
line-height:1.45
}

/* =========================================================
   TIMELINE Y CONTROLES
   ========================================================= */

.controles{
display:grid;
grid-template-columns:auto minmax(0,1fr) minmax(100px,150px);
align-items:center;
gap:12px;
padding:10px 12px;
border-top:1px solid var(--border);
background:#091521
}

.botones{display:flex;gap:5px}

.boton{
display:grid;
place-items:center;
width:34px;
height:32px;
padding:0;
border:1px solid var(--border);
border-radius:6px;
background:#102337;
color:#e9f5ff;
cursor:pointer
}

@media (hover: hover) {
.boton:hover{border-color:var(--blue)}
}

.boton-principal{
color:var(--cyan);
border-color:rgba(54,213,255,.35)
}

.timeline{min-width:0}

.timeline input,
.opacidad input{
width:100%
}

#timeline-slider{accent-color:var(--accent)}
#opacidad-slider{accent-color:var(--cyan)}

.timeline-textos{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:8px;
margin-top:3px;
color:var(--muted);
font-family:"JetBrains Mono",monospace;
font-size:7px
}

.timeline-textos span:first-child{text-align:left}
.timeline-textos span:last-child{text-align:right}

.timeline-hora-actual{
min-width:46px;
padding:2px 5px;
border-radius:4px;
background:rgba(240,165,0,.12);
color:var(--accent);
font-size:9px;
font-weight:600;
text-align:center
}

.opacidad-cabecera{
display:flex;
justify-content:space-between;
margin-bottom:2px;
color:var(--muted);
font-size:7px;
text-transform:uppercase
}

/* =========================================================
   DATOS
   ========================================================= */

.datos{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
border-top:1px solid var(--border);
background:#0b1723
}

.dato{
min-width:0;
padding:9px 11px;
border-right:1px solid var(--border)
}

.dato:last-child{border-right:0}

.dato-label{
color:var(--muted);
font-size:7px;
text-transform:uppercase
}

.dato-valor{
margin-top:3px;
overflow:hidden;
color:var(--text);
font-family:"JetBrains Mono",monospace;
font-size:9px;
text-overflow:ellipsis;
white-space:nowrap
}

/* =========================================================
   MENSAJES
   ========================================================= */

.mensaje{
display:none;
position:absolute;
z-index:1200;
left:50%;
top:50%;
max-width:80%;
transform:translate(-50%,-50%);
padding:12px 14px;
border:1px solid var(--border);
border-radius:8px;
background:rgba(5,13,21,.94);
color:var(--muted);
font-size:9px;
text-align:center
}

.mensaje.visible{display:block}

.mensaje.error{
color:#faa;
border-color:rgba(239,68,68,.45)
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:700px){

.visor-cabecera{
min-height:62px;
padding:9px 10px
}

.visor-titulo-principal{font-size:12px}
.visor-titulo-secundario{font-size:7px}
.visor-derecha{gap:8px}
.estado{font-size:7px}
.instante-hora{font-size:14px}

.selector-fondos,
.selector-capas{
gap:8px;
padding:7px 8px
}

.selector-fondos-titulo,
.selector-capas-titulo{
font-size:7px
}

.selector-fondos-controles,
.selector-capas-controles{
gap:5px
}

.selector-fondo{
height:29px;
padding:0 7px;
font-size:7px
}

.selector-capa{
height:31px;
padding:0 7px;
font-size:8px
}

.selector-capa-estado{display:none}

.controles{
grid-template-columns:auto minmax(0,1fr);
gap:8px;
padding:8px
}

.opacidad{grid-column:1/-1}

.datos{
grid-template-columns:repeat(2,minmax(0,1fr))
}

.dato:nth-child(2n){border-right:0}

.dato:nth-child(-n+2){
border-bottom:1px solid var(--border)
}

.leyenda{
left:10px;
bottom:10px;
max-width:230px
}

}

@media(max-width:430px){

.selector-fondos,
.selector-capas{
display:block;
padding:6px 8px 7px
}

.selector-fondos-titulo,
.selector-capas-titulo{
margin:0 0 5px 2px
}

.selector-fondos-controles,
.selector-capas-controles{
width:100%
}

.selector-fondo{
height:28px;
padding:0 5px;
font-size:7px
}

.selector-capa{
height:30px;
padding:0 5px;
font-size:7px
}

.leyenda-seguimiento{
top:0;
left:0;
right:0;
width:auto;
height:30px;
max-width:none;
gap:5px;
padding:0 7px 0 54px;
font-size:8px
}

.leyenda-seguimiento-hora{
font-size:9px
}

.leyenda-seguimiento-linea{
font-size:8px
}

.leaflet-tooltip.etiqueta-localidad.etiqueta-nacional,
.leaflet-tooltip.etiqueta-capital.etiqueta-nacional{
font-size:8px!important
}

}


/* =========================================================
   AJUSTES DEL SELECTOR DE FONDOS

   Venían en un <style> dentro de radar.html, después del enlace a
   esta hoja. Al ir aquí al final mandan igual que antes.
   ========================================================= */

.selector-fondos-controles{
grid-template-columns:
repeat(
4,
minmax(0,1fr)
);

width:min(760px,100%);
}

.selector-fondo-satelite{
--fondo-color:#9b7cff;
}

@media(max-width:430px){

.selector-fondos-controles{
grid-template-columns:
repeat(
2,
minmax(0,1fr)
);
}

}


/* =========================================================
   MÓVIL: QUE SE VEA EL MAPA

   El visor reparte su altura en seis bandas y el mapa se queda con lo
   que sobra (minmax(0,1fr)). En un teléfono no sobraba casi nada: el
   mapa era una franja de un dedo y el rótulo de Leaflet tapaba los
   pueblos. Aquí se le garantiza un mínimo y se quita lo prescindible.

   - El visor deja de medir exactamente la pantalla y se desplaza por
     dentro si no cabe todo: mejor desplazarse hasta los controles que
     no ver el mapa.
   - Fuera la tabla de datos (fotogramas, radares, localidades, capas).
   - Fuera el título interno del visor: la página pública de
     Seguimiento ya identifica la sección. Se quedan el estado de
     Seguimiento y la hora del fotograma.
   ========================================================= */

@media(max-width:700px){

html,
body{
height:auto;
overflow:auto
}

.visor{
height:auto;
min-height:100vh;
min-height:100dvh;
grid-template-rows:auto auto auto minmax(320px,1fr) auto auto
}

.datos{
display:none
}

.visor-cabecera{
min-height:0;
padding:8px 10px;
justify-content:flex-end
}

.visor-titulo{
display:none
}

}


/* =========================================================
   PANTALLAS ANCHAS

   Desde 900 px (tableta apaisada) sobra sitio de lado y falta de alto:
   las filas de FONDO y CAPAS se ponen una al lado de la otra en vez de
   apiladas, y sus botones caben en una sola línea. El mapa gana unos
   90 px.
   ========================================================= */

@media(min-width:900px){

.visor{
grid-template-columns:minmax(0,1fr) auto;
grid-template-rows:auto auto minmax(0,1fr) auto auto
}

.visor-cabecera,
.mapa-zona,
.controles,
.datos{grid-column:1/-1}

.selector-fondos{grid-column:1;grid-row:2}

.selector-capas{
grid-column:2;
grid-row:2;
width:auto;
border-left:1px solid var(--border)
}

.selector-fondos-controles,
.selector-capas-controles{
display:flex;
flex-wrap:nowrap;
width:auto;
flex:1 1 auto
}

.selector-fondo,
.selector-capa{
flex:1 1 0;
white-space:nowrap
}

}


/* =========================================================
   VENTANAS BAJAS (MÓVIL EN HORIZONTAL)

   Con unos 390 px de alto, las filas de selectores y los controles se
   comían el mapa entero. El visor deja de atarse al alto de la
   ventana y el mapa conserva un mínimo; la página de Seguimiento
   permite desplazarse.
   ========================================================= */

@media(max-height:560px){

.visor{
height:auto;
min-height:560px
}

.mapa-zona{
min-height:260px
}

}


/* Fin de fichero: visores/radar.css */