/* MeteoOteruelo — hoja de estilo de la skin Oteruelo Paleta de instrumento: pizarra fría, datos en monoespaciado (las cifras alinean en columna), prosa en sans. Modo claro y oscuro automáticos. */ :root{ --ground:#DFE5E8; --panel:#F3F6F7; --sunken:#D2DBDF; --edge:#BDC9CE; --ink:#16242C; --muted:#5E727C; --faint:#8CA0A8; --rain:#2E6E8E; --warm:#B4531E; --cold:#3E6EA6; --ok:#2E6B45; --alert:#A32B21; --accent:#6C4AB6; --casing:#16242C; --on-casing:#C9D6DC; --mono:ui-monospace,"DejaVu Sans Mono","JetBrains Mono",Menlo,Consolas,monospace; --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; --wrap:1180px; } /* El tema sale de data-theme en : auto sigue al sistema. */ :root[data-theme="dark"]{ --ground:#101a20; --panel:#17242B; --sunken:#0C1418; --edge:#283A43; --ink:#DCE7EB; --muted:#8CA3AD; --faint:#5E727C; --rain:#5FA8CE; --warm:#D9803F; --cold:#6E9FD4; --ok:#5DA37C; --alert:#D2645A; --accent:#9C82D8; --casing:#0A1216; --on-casing:#C9D6DC; } @media (prefers-color-scheme: dark){ :root[data-theme="auto"]{ --ground:#101a20; --panel:#17242B; --sunken:#0C1418; --edge:#283A43; --ink:#DCE7EB; --muted:#8CA3AD; --faint:#5E727C; --rain:#5FA8CE; --warm:#D9803F; --cold:#6E9FD4; --ok:#5DA37C; --alert:#D2645A; --accent:#9C82D8; --casing:#0A1216; --on-casing:#C9D6DC; } } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--ground);color:var(--ink); font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased; } a{color:var(--rain)} h1,h2,h3{margin:0;font-weight:700;letter-spacing:.02em} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 18px} /* etiquetas: mono, versalitas espaciadas */ .lbl{font:600 10px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em} /* ---------- cabecera ---------- */ header{background:var(--casing);color:var(--on-casing);border-bottom:1px solid #000} .topbar{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:12px 0} .brand{font:700 15px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#fff} .place{font-size:12px;color:var(--faint)} nav{display:flex;flex-wrap:wrap;gap:2px;padding-bottom:6px} nav a{ color:var(--on-casing);text-decoration:none;padding:6px 11px;border-radius:2px; font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase; } nav a:hover{background:rgba(255,255,255,.08)} nav a[aria-current="page"]{background:var(--rain);color:#fff} /* ---------- portada: condiciones actuales ---------- */ .hero{background:var(--casing);color:var(--on-casing);padding:14px 0 38px} .hero-grid{display:grid;grid-template-columns:minmax(280px,1fr) 1.25fr;gap:28px;align-items:start} @media(max-width:860px){.hero-grid{grid-template-columns:1fr}} .now{display:flex;align-items:flex-start;gap:18px} .now img{width:74px;height:74px;flex:none} .temp{font:700 clamp(52px,13vw,74px)/.9 var(--mono);letter-spacing:-.045em; color:#fff;font-variant-numeric:tabular-nums} .temp sup{font-size:26px;vertical-align:super;letter-spacing:0} .cond{font-size:15px;color:#fff;margin-top:6px} .feels{font-size:13px;color:var(--faint)} /* Sensación, máxima y mínima: son de los datos que más se miran y estaban escondidos en una línea gris. Cada uno con su icono y su color. */ .extremos{display:flex;flex-wrap:wrap;gap:10px 22px;margin:12px 0 4px} .extremo{display:flex;align-items:center;gap:9px} .extremo svg{width:22px;height:22px;flex:none} .extremo .lbl{display:block;color:var(--faint);letter-spacing:.14em} .extremo b{display:block;font:700 21px/1.15 var(--mono);letter-spacing:-.02em; font-variant-numeric:tabular-nums;margin-top:1px} .extremo small{display:block;font:400 11px/1.4 var(--mono);color:var(--faint)} .extremo.sensacion{color:#C9D6DC} .extremo.sensacion b{color:#fff} .extremo.maxima{color:#E8934C} .extremo.maxima b{color:#F0A868} .extremo.minima{color:#6E9FD4} .extremo.minima b{color:#8FB8E0} @media(max-width:560px){ .extremos{gap:8px 16px} .extremo b{font-size:18px} } .trend{font:600 11px/1 var(--mono);color:var(--faint);margin-top:8px} .trend .up{color:var(--warm)} .trend .down{color:var(--cold)} .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:1px; background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.09);border-radius:3px;overflow:hidden} .tile{background:var(--casing);padding:10px 12px} .tile .lbl{color:var(--faint)} .tile b{display:block;font:700 21px/1.2 var(--mono);color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em} .tile small{display:block;font:400 11px/1.4 var(--mono);color:var(--faint)} /* rosa de los vientos compacta */ .wind{display:flex;align-items:center;gap:14px} .rose{width:78px;height:78px;flex:none} .rose .dial{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1} .rose .tick{fill:var(--faint);font:600 7px var(--mono);letter-spacing:.1em} .rose .needle{fill:var(--rain)} .rose .gustneedle{fill:none;stroke:var(--warm);stroke-width:2} /* ---------- secciones ---------- */ main{padding:34px 0 56px} section{margin-bottom:44px} .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px} .sec-head h2{font:700 12px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .sec-head a{font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none} .card{background:var(--panel);border:1px solid var(--edge);border-radius:3px;padding:20px 22px} .cards-2{display:grid;grid-template-columns:1fr 1fr;gap:22px} .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} @media(max-width:860px){.cards-2,.cards-3{grid-template-columns:1fr}} /* ---------- cámaras ---------- */ .cams{display:grid;grid-template-columns:1fr 1fr;gap:20px} @media(max-width:700px){.cams{grid-template-columns:1fr}} .cam{position:relative;background:var(--sunken);border:1px solid var(--edge);border-radius:3px;overflow:hidden} .cam img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--sunken)} .cam figcaption{ position:absolute;left:0;right:0;bottom:0;padding:7px 10px; background:linear-gradient(transparent,rgba(10,18,22,.82));color:#EAF1F4; font:600 10px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase; display:flex;justify-content:space-between;gap:10px; } .cam figcaption span{color:#A9BEC7;letter-spacing:.04em;text-transform:none} /* ---------- gráficas ---------- */ .chart-tabs{display:flex;gap:2px;flex-wrap:wrap} .chart-tabs button{ font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase; background:var(--panel);color:var(--muted);border:1px solid var(--edge); padding:6px 12px;border-radius:2px;cursor:pointer; } .chart-tabs button[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)} .chart{margin-top:12px;margin-bottom:16px;min-width:0} /* minmax(0,1fr) es imprescindible: sin el, el canvas de uPlot desborda la columna en vez de encogerse con ella. */ #charts[data-cols="2"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px} #charts[data-cols="3"]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 22px} @media(max-width:860px){ #charts[data-cols="2"],#charts[data-cols="3"]{grid-template-columns:1fr} } .chart h3{font:600 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px} .uplot{width:100%!important} .u-legend{font:12px var(--mono)!important;color:var(--muted)} .u-legend .u-marker{width:9px;height:9px} .loading{color:var(--muted);font:12px var(--mono);padding:26px 0;text-align:center} /* ---------- tablas de datos ---------- */ table{border-collapse:collapse;width:100%;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px} th,td{padding:5px 9px;text-align:right;border-bottom:1px solid var(--edge);white-space:nowrap} th{font:600 10px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:right} td:first-child,th:first-child{text-align:left} tbody tr:hover td{background:var(--sunken)} caption{caption-side:bottom;padding-top:8px;color:var(--muted);font:12px var(--sans);text-align:left} .record b{font-weight:700} .record .when{color:var(--muted);font-size:11px} /* ---------- almanaque ---------- */ .sunbar{position:relative;height:52px;margin:10px 0 4px} .sunbar svg{width:100%;height:52px;overflow:visible} .sunbar .arc{fill:none;stroke:var(--edge);stroke-width:1.5} .sunbar .lit{fill:none;stroke:var(--warm);stroke-width:2.5;stroke-linecap:round} .sunbar .sun{fill:var(--warm)} .sunbar .horizon{stroke:var(--edge);stroke-width:1;stroke-dasharray:3 3} .moon-phase{display:flex;align-items:center;gap:12px} .moon-phase svg{width:52px;height:52px;flex:none} /* ---------- embeds ---------- */ .embed{border:1px solid var(--edge);border-radius:3px;overflow:hidden;background:var(--sunken)} .embed iframe{display:block;width:100%;height:420px;border:0} .quakes li{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--edge);list-style:none} .quakes ul{margin:0;padding:0} .quakes .mag{font:700 15px/1 var(--mono);min-width:2.6em;text-align:right} .quakes .m3{color:var(--muted)} .quakes .m4{color:var(--warm)} .quakes .m5{color:var(--alert)} .quakes .dist{color:var(--muted);font:11px var(--mono);margin-left:auto;white-space:nowrap} /* ---------- pie ---------- */ footer{background:var(--casing);color:var(--faint);padding:20px 0;font-size:12px} footer a{color:var(--on-casing)} .disclaimer{color:#C58A82;font-size:12px;margin-top:8px} .stale{background:var(--warm);color:#fff;padding:2px 7px;border-radius:2px; font:600 10px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase} @media (prefers-reduced-motion:no-preference){ .cam img{transition:opacity .25s ease} } .theme-btn{ background:none;border:1px solid rgba(255,255,255,.25);color:var(--on-casing); font:14px/1 var(--mono);padding:4px 9px;border-radius:2px;cursor:pointer; } .theme-btn:hover{background:rgba(255,255,255,.1)} .widget .card :is(iframe,img,script+div){max-width:100%} /* Los widgets de terceros suelen traer su propia anchura y quedan pegados a un lado. Con flex en columna se centran horizontalmente sin tocar la alineacion del texto que lleven dentro. */ .widget .card{ overflow:hidden;display:flex;flex-direction:column;align-items:center; } .widget .card > *{max-width:100%} /* Ranuras. Con una sola columna, display:contents hace que el envoltorio no exista a efectos de maquetacion: los bloques fluyen como si no estuviera. */ .slot[data-cols="1"]{display:contents} .slot[data-cols="2"],.slot[data-cols="3"]{ display:grid;gap:0 20px;align-items:start;margin-bottom:26px; } .slot[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))} .slot[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr))} .slot[data-cols="2"] > *,.slot[data-cols="3"] > *{min-width:0} /* Dentro de una fila a columnas, el iframe de Windy se adapta en altura */ .slot[data-cols="2"] .embed iframe{height:340px} @media(max-width:860px){ .slot[data-cols="2"],.slot[data-cols="3"]{grid-template-columns:1fr} .slot[data-cols="2"] .embed iframe{height:300px} } /* 44 grupos de graficas: la barra envuelve y se puede recorrer */ /* Sin altura maxima ni scroll: que ocupe lo que haga falta segun los grupos definidos en graphs.conf. */ .group-tabs{padding:6px;gap:3px;border:1px solid var(--edge); border-radius:3px;background:var(--panel)} .group-tabs button{margin:1px} .windrose{display:block;width:100%;max-width:520px;margin:0 auto;height:auto} .windrose path{transition:opacity .12s ease} .windrose path:hover{opacity:.75} /* Almanaque: nativo, que trae el foco y el Esc de serie */ .link-btn{background:none;border:none;color:var(--rain);font:inherit; cursor:pointer;padding:6px 0;text-decoration:underline} #almanac-modal{ border:1px solid var(--edge);border-radius:4px;background:var(--panel); color:var(--ink);padding:0;max-width:820px;width:92vw;max-height:88vh; } #almanac-modal::backdrop{background:rgba(10,18,22,.62)} .almanac-head{display:flex;align-items:center;justify-content:space-between; padding:12px 18px;border-bottom:1px solid var(--edge);background:var(--sunken)} .almanac-head h2{font:700 12px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase} .almanac-head button{background:none;border:none;color:var(--muted); font-size:17px;cursor:pointer;line-height:1} .almanac-head button:hover{color:var(--ink)} .almanac-body{display:grid;grid-template-columns:1fr 1fr;gap:0 26px; padding:14px 18px;overflow:auto} .almanac-body h3{font:700 11px/1.6 var(--mono);letter-spacing:.14em; text-transform:uppercase;color:var(--muted);margin-bottom:6px} .almanac-body td:first-child{color:var(--muted);font-weight:400} .almanac-foot{padding:10px 18px;border-top:1px solid var(--edge)} @media(max-width:700px){.almanac-body{grid-template-columns:1fr}} tfoot .total td{border-top:2px solid var(--edge);font-weight:700; background:var(--sunken)} /* Los informes NOAA son texto de ancho fijo: se respetan tal cual y se permite desplazamiento lateral en pantallas estrechas. */ pre.noaa{ font:12px/1.45 var(--mono);white-space:pre;overflow-x:auto; background:#fff;color:var(--ink);border:1px solid var(--edge);border-radius:2px; padding:12px 14px;margin:0;max-height:70vh; } @media (prefers-color-scheme: dark){ :root[data-theme="auto"] pre.noaa{background:var(--sunken)} } :root[data-theme="dark"] pre.noaa{background:var(--sunken)} /* --- pantallas estrechas ------------------------------------------------- */ /* Las tablas llevan nowrap para que las cifras no se partan; en un movil eso desborda, asi que la tarjeta que las contiene se desplaza lateralmente. */ .card:has(> table),.card:has(> .tablewrap){overflow-x:auto} .tablewrap{overflow-x:auto} @media(max-width:560px){ section{margin-bottom:32px} .wrap{padding:0 12px} .card{padding:12px} /* el menu se desplaza en horizontal en vez de ocupar cuatro lineas */ nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin; -webkit-overflow-scrolling:touch} nav a{flex:none} .topbar{gap:4px 10px} .place{font-size:11px;width:100%} th,td{padding:4px 6px} table{font-size:12px} .metric b{font-size:18px} .tile b{font-size:19px} .sec-head{flex-wrap:wrap} .embed iframe{height:280px} pre.noaa{font-size:10.5px;padding:8px} } /* Tesela de sol y luna, en el hueco que dejaba la rejilla */ .tile.astro{display:flex;flex-direction:column;justify-content:center} .astro-row{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;margin-top:4px} .astro-item{display:flex;align-items:center;gap:7px} .astro-item svg{width:22px;height:22px;flex:none} .astro-item b{font:700 17px/1.2 var(--mono);color:#fff;font-variant-numeric:tabular-nums} .astro-item small{display:block;font:400 11px/1.4 var(--mono);color:var(--faint)} .astro-item .moon-icon svg{width:26px;height:26px} .tile.astro .link-btn{color:#9FC4D6;font-size:12px;padding:4px 0 0;align-self:flex-start} /* --- contenido de las paginas propias ------------------------------------ */ /* Viene de la skin anterior: anchos fijos en el HTML, tablas usadas para maquetar y clases de Bootstrap que aqui no existen. Se reconduce sin tocar los .inc del usuario. */ .page-content{line-height:1.7} .page-content p,.page-content li{max-width:70ch} .page-content h1,.page-content h2,.page-content h3{margin:18px 0 8px;line-height:1.3} .page-content h3{font-size:16px} .page-content a{overflow-wrap:anywhere} .page-content iframe,.page-content video{max-width:100%} /* Los
encadenados dejaban huecos enormes */ .page-content br + br{display:none} /* Imagenes: se ignora el ancho fijo del HTML y se limitan al contenedor */ .page-content img{max-width:100%;height:auto;display:block;border-radius:2px} .page-content img[width]{width:auto} /* SOLO las tablas que sirven para colocar imagenes se convierten en rejilla. Las tablas de datos de verdad (pares etiqueta/valor) se quedan como estan: aplicarles esto las descuadraba. */ .page-content table:has(img){display:grid;width:100%;gap:14px;border:0; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))} .page-content table:has(img) tbody, .page-content table:has(img) thead, .page-content table:has(img) tr{display:contents} .page-content table:has(img) td, .page-content table:has(img) th{display:block;padding:0;border:0; text-align:left;white-space:normal} /* Tablas de datos: legibles y sin nowrap heredado */ .page-content table:not(:has(img)){width:auto;margin:12px 0;border-collapse:collapse} .page-content table:not(:has(img)) td, .page-content table:not(:has(img)) th{white-space:normal;padding:4px 10px; border-bottom:1px solid var(--edge)} /* El bloque de la foto y la ficha tecnica flota a la izquierda y el texto lo rodea. Con rejilla, cada parrafo caia en una celda y quedaban huecos: el contenido no viene envuelto en columnas, son elementos sueltos. */ .page-content [class*="col-sm-"]:first-child, .page-content [class*="col-md-"]:first-child{ float:left;width:min(300px,42%);margin:0 26px 18px 0; } .page-content .about-outer::after{content:"";display:block;clear:both} .page-content [class*="col-sm-"] img, .page-content [class*="col-md-"] img{max-width:100%} @media(max-width:700px){ .page-content [class*="col-sm-"]:first-child, .page-content [class*="col-md-"]:first-child{float:none;width:auto;margin:0 0 18px} } /* Listas a varias columnas solo donde son largas de verdad */ .page-content.page-mlink ul{columns:2;column-gap:28px} .page-content.page-mlink ul li{break-inside:avoid} @media(max-width:700px){.page-content.page-mlink ul{columns:1}} /* --- pagina Acerca de ----------------------------------------------------- */ .about{display:grid;gap:20px 30px;align-items:start; grid-template-columns:minmax(250px,330px) 1fr} .about > *{min-width:0} /* Foto con pie, mismo tratamiento que las camaras de la portada */ .about-foto{margin:0 0 16px;position:relative;border:1px solid var(--edge); border-radius:3px;overflow:hidden;background:var(--sunken)} .about-foto img{display:block;width:100%;height:auto} .about-foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:8px 11px; background:linear-gradient(transparent,rgba(10,18,22,.85));color:#EAF1F4; font:600 10px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase} .about-foto figcaption span{display:block;color:#A9BEC7;letter-spacing:.04em; text-transform:none;font-weight:400} /* Ficha tecnica como panel de instrumento, igual que las teselas de la portada */ .ficha{background:var(--casing);border:1px solid rgba(255,255,255,.09); border-radius:3px;padding:13px 15px} .ficha .lbl{color:var(--faint);display:block;margin-bottom:8px} .ficha dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0; font-family:var(--mono);font-size:12px} .ficha dt{color:#8CA3AD;white-space:nowrap} .ficha dd{margin:0;color:#fff;text-align:right;font-variant-numeric:tabular-nums; overflow-wrap:anywhere} /* Columna de texto */ .about-main{line-height:1.7} .about-main .lead{font-size:17px;line-height:1.6;color:var(--ink);margin:0 0 16px} .about-main p{max-width:66ch} .about-main h3{font:700 11px/1.5 var(--mono);letter-spacing:.16em; text-transform:uppercase;color:var(--muted);margin:26px 0 10px; padding-bottom:6px;border-bottom:1px solid var(--edge)} /* Sensores como etiquetas */ ul.chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:12px 0 0} ul.chips li{font:600 11px/1 var(--mono);letter-spacing:.06em; background:var(--sunken);border:1px solid var(--edge);color:var(--ink); padding:6px 10px;border-radius:99px} /* Listas de servicios y creditos */ ul.enlaces,ul.creditos{list-style:none;padding:0;margin:10px 0 0} ul.enlaces li,ul.creditos li{display:flex;flex-wrap:wrap;gap:4px 10px; align-items:baseline;padding:6px 0;border-bottom:1px solid var(--edge)} ul.enlaces li:last-child,ul.creditos li:last-child{border-bottom:0} ul.enlaces a,ul.creditos a{font-weight:600} ul.enlaces code{font:11px var(--mono);color:var(--muted);background:var(--sunken); padding:2px 6px;border-radius:2px} ul.creditos span{color:var(--muted);font-size:13px} /* Nota destacada */ .nota{border-left:3px solid var(--rain);background:var(--sunken); padding:11px 14px;margin:12px 0;border-radius:0 2px 2px 0;max-width:66ch} .nota-aviso{border-left-color:var(--warm)} @media(max-width:820px){ .about{grid-template-columns:1fr} .about-foto{max-width:420px} .ficha{max-width:420px} } /* --- climatologia --------------------------------------------------------- */ .metric-card b{display:block;font:700 30px/1.15 var(--mono);letter-spacing:-.02em; font-variant-numeric:tabular-nums;margin:6px 0 2px} .metric-card small{color:var(--muted);font:12px var(--mono)} #tabla-normales td:first-child,#tabla-dias td:first-child{text-transform:capitalize} #clima table{font-size:12.5px} #clima .when{display:block;font-size:10px} #clima section{margin-bottom:40px} .clima-cabecera{margin-bottom:34px} /* Hora de la ultima lectura: es el dato que mas mira quien entra, asi que sube de tamano respecto al resto de etiquetas pequenas. */ .actualizado{ margin-top:12px;font:600 13px/1.5 var(--mono);letter-spacing:.06em; text-transform:uppercase;color:var(--faint); } .actualizado b{font-weight:700;font-size:15px;letter-spacing:0;color:#fff; font-variant-numeric:tabular-nums;text-transform:none} /* --- tabla de tendencias -------------------------------------------------- */ table.tendencias td{font-variant-numeric:tabular-nums} table.tendencias td.sube{color:var(--warm);font-weight:700} table.tendencias td.baja{color:var(--cold);font-weight:700} table.tendencias td.igual{color:var(--muted)} table.tendencias td.nulo{color:var(--faint)} table.tendencias td.ahora{font-weight:700;border-left:1px solid var(--edge)} .baro-tendencia{margin:0 0 14px;font-size:15px} .baro-tendencia b{font-size:17px} .baro-tendencia .when{margin-left:8px} /* --- datos abiertos ------------------------------------------------------- */ /* El mapa manda: va arriba, ocupa altura y no se mueve al cambiar de pestana. */ .mapa-card{padding:0;overflow:hidden;margin:14px 0 8px} .mapa-leyenda{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center; margin-bottom:26px;font:11px var(--mono);color:var(--muted)} .mapa-leyenda span{display:flex;align-items:center;gap:6px} .mapa-leyenda .pt{display:inline-block;width:11px;height:11px;border-radius:50%; background:#FF8A4C;flex:none} #mapa{height:min(58vh,540px);width:100%;background:var(--sunken)} @media(max-width:700px){#mapa{height:44vh}} .leaflet-container{font:12px var(--mono);background:#0C1418} .leaflet-popup-content-wrapper,.leaflet-popup-tip{ background:var(--panel);color:var(--ink);box-shadow:0 3px 14px rgba(0,0,0,.4)} .leaflet-popup-content{font:12px/1.55 var(--mono);margin:11px 13px} .leaflet-popup-content b{font-size:13px} .leaflet-control-attribution{font-size:10px;background:rgba(12,20,24,.75)!important; color:#9FB4BD!important} .leaflet-control-attribution a{color:#BBD3DE!important} .leaflet-bar a{background:var(--panel);color:var(--ink);border-color:var(--edge)} .leaflet-bar a:hover{background:var(--sunken)} #abierto-tabs{align-items:center} .panel-abierto{margin-bottom:26px} .aviso-fuente{background:#F6EFDF;border-left:3px solid #C08A22;padding:9px 12px; margin-bottom:12px;color:#5B451A;font-size:13px} @media (prefers-color-scheme: dark){ :root[data-theme="auto"] .aviso-fuente{background:#2A2417;color:#D8C08A} } :root[data-theme="dark"] .aviso-fuente{background:#2A2417;color:#D8C08A} #tabla-sismos b.mag-media{color:var(--warm)} #tabla-sismos b.mag-alta{color:var(--alert)} #tabla-embalses .lozoya{color:var(--rain)} #abierto .sube{color:var(--ok);font-weight:700} #abierto .baja{color:var(--alert);font-weight:700} #abierto h3{font:700 11px/1.5 var(--mono);letter-spacing:.14em; text-transform:uppercase;color:var(--muted)} .ver-todas{margin-top:10px}