/* ═══ SUNARIS · Cristal Solar sobre el mapa (nada gris: una tinta, joyas con
   significado; los neutros que quedan son estructura) ═══ */
:root{
  --tinta:#F0EEE9;
  --brasa:#FF7A33; --ambar:#EBA43B; --oro:#FFD27A; --violeta:#A78BFA;
  --cristal:rgba(10,10,16,.5); --cristal-borde:rgba(255,255,255,.22);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  color:var(--tinta);background:#0A0F1B;overflow:hidden}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-variant-numeric:tabular-nums}

#mapa{position:fixed;inset:0}
/* EL INSTRUMENTO, ENCIMA DEL MAPA (16 ago): su propio lienzo, repintado en
   el mismo frame que el mapa. Debajo del astro (z6) y de las cards (z20);
   jamás se come un clic. */
#lienzoAro{position:fixed;left:0;top:0;z-index:5;pointer-events:none}
/* LA CÚPULA VA EN SU PROPIO LIENZO, EN COMPOSICIÓN NORMAL (16 ago).
   Estuvo un rato en `mix-blend-mode:color` para que la foto conservara su luz,
   y ahí estaba el fallo de raíz: en ese modo la LUMINANCIA la pone siempre la
   foto, y la luminancia es justo lo único que separa las clases en una escala
   de un solo tono. Un oro con cinco niveles quedaba plano —"todo parece el
   mismo color"—. Ahora la claridad la decide el instrumento, no el terreno.
   (Probado también `screen`: sobre foto de día aclara y lava.) */
#lienzoCielo{position:fixed;left:0;top:0;z-index:4;pointer-events:none}
/* el tinte del cielo vivo sobre el mapa: color, jamás bloquea clics.
   El JS gradúa blend y opacidad con la altura del sol (día=screen, noche=multiply) */
#tinte{position:fixed;inset:0;pointer-events:none;transition:opacity .25s linear}

/* el cristal VIDRIO 2 de la casa (con NUESTROS colores): filo oscuro exterior,
   borde especular, lomo de luz, panza de grosor, relleno con caída y difusión */
.vidrio{
  background:linear-gradient(180deg,rgba(24,24,34,.55),rgba(9,9,15,.48));
  border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  backdrop-filter:blur(24px) saturate(1.5);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 12px 18px -14px rgba(255,255,255,.14),
    inset 0 -12px 20px -14px rgba(0,0,0,.62),
    0 24px 60px rgba(0,0,0,.55)}

/* ── marca ── */
.marca{position:fixed;top:16px;left:16px;z-index:20;border-radius:999px;
  padding:.5rem 1rem;display:flex;align-items:center;gap:.55rem}
/* SUNARIS = las estaciones vivas: SUN arde, ARIS respira frío */
.marca .nombre{font-weight:830;letter-spacing:.14em;font-size:.9rem}
.marca .nombre b.calido{background:linear-gradient(92deg,var(--brasa),var(--oro));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 10px rgba(255,122,51,.45))}
.marca .nombre b.frio{background:linear-gradient(92deg,#8FE8D2,#5FA8DE);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 10px rgba(95,168,222,.4))}
.frioV{color:#8FE8D2}

/* ── buscador ── */
.busca{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:30;
  width:min(430px,calc(100vw - 980px))}
/* en anchos medios (tablet/ventana chica) el buscador baja a su propia fila:
   jamás encima de los botones */
@media (max-width:1180px){
  .busca{top:64px;left:16px;transform:none;width:min(430px,calc(100vw - 32px))}
  /* el buscador bajó a esta fila: el panel de cards le cede el paso */
  .datos{top:118px;max-height:calc(100vh - 228px)}
}
.busca .caja{border-radius:999px;display:flex;align-items:center;gap:.6rem;
  padding:.62rem 1.05rem}
.busca svg{flex:none}
.busca input{flex:1;background:none;border:none;outline:none;color:var(--tinta);
  font:inherit;font-size:.9rem;min-width:0}
/* EL FOCO ES UN GLOW, JAMÁS UNA LÍNEA (ley de Carlos, 15 ago): halo suave */
.busca .caja:focus-within{
  border-color:rgba(255,210,122,.55);
  box-shadow:0 0 0 1px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.30),
    0 0 22px rgba(255,178,80,.35),0 24px 60px rgba(0,0,0,.55)}
.busca input::placeholder{color:var(--ambar);opacity:.85}
.resultados{margin-top:8px;border-radius:16px;overflow:hidden;display:none}
.resultados.abierto{display:block}
.resultado{padding:.6rem 1rem;font-size:.84rem;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.1)}
.resultado:last-child{border-bottom:none}
.resultado:hover,.resultado:focus-visible{background:rgba(255,122,51,.18);outline:none}
.resultado .detalle{display:block;font-size:.72rem;color:var(--ambar)}

/* ── controles ── */
.controles{position:fixed;top:16px;right:16px;z-index:20;display:flex;gap:8px}
.boton{border:none;cursor:pointer;border-radius:999px;padding:.5rem .95rem;
  font:inherit;font-size:.74rem;font-weight:750;letter-spacing:.06em;color:var(--tinta)}
.boton:focus-visible{outline:none;
  box-shadow:0 0 0 1px rgba(255,210,122,.5),0 0 20px rgba(255,178,80,.4)}
.boton.vivo{color:#FFF7EF;background:linear-gradient(180deg,#FF8A45,#F06414);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 20px rgba(255,122,51,.45)}
.boton.vivo[aria-pressed="true"]{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),
  0 0 0 3px rgba(255,122,51,.3),0 6px 24px rgba(255,122,51,.65)}

/* ── EL PANEL DE CARDS: a la IZQUIERDA, bajo la marca ──
   La gente lee de izquierda a derecha; el panel vive bajo el nombre
   para que SUNARIS esté siempre en el campo visual. Cada card = UN tema. */
.datos{position:fixed;left:16px;top:70px;z-index:20;
  width:min(400px,calc(100vw - 32px));
  display:flex;flex-direction:column;gap:12px;
  max-height:calc(100vh - 180px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;border-radius:18px}
.datos::-webkit-scrollbar{display:none}
/* (22 ago) el fundido del borde del panel se QUITÓ de raíz: un mask-image en el panel
   anulaba el desenfoque del cristal de todas las cards al desplegar (Carlos) */
.card{border-radius:18px;padding:.85rem 1rem;flex:none}

/* cabecera de card: icono de color propio + rótulo; "esta card es de esto" */
.cardCab{display:flex;align-items:center;gap:.5rem;margin-bottom:.55rem}
.cardCab .icono{width:22px;height:22px;border-radius:7px;display:grid;
  place-items:center;font-size:.7rem;flex:none}
.cardCab .titulo{font-size:.6rem;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase}
.cardCab .cabDato{margin-left:auto;font-size:.62rem;font-weight:700}
.i-oro{background:linear-gradient(180deg,#FFD27A,#EBA43B);color:#1A0F04}
.i-frio{background:linear-gradient(180deg,#8FE8D2,#5FA8DE);color:#06131E}
.i-brasa{background:linear-gradient(180deg,#FF8A45,#F06414);color:#FFF7EF}
.t-oro{color:var(--oro)}.t-frio{color:#8FE8D2}.t-brasa{color:var(--brasa)}

/* card LUGAR */
.cardLugar{padding:.7rem 1rem .75rem}
.dir{font-size:.92rem;font-weight:800;line-height:1.25}
.fecha{display:flex;align-items:center;gap:.35rem;margin-top:.5rem}
.fechaCtl{width:100%}
.fechaBtn{display:flex;align-items:center;gap:.5rem;width:100%;cursor:pointer;
  border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:.42rem .65rem;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);color:var(--tinta);font:inherit;
  transition:box-shadow .25s}
.fechaBtn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 16px rgba(255,178,80,.28)}
.fechaBtn:focus-visible{outline:none;box-shadow:0 0 14px rgba(255,178,80,.5)}
.fechaBtn .calIco{width:18px;height:18px;fill:none;stroke:var(--oro);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.fechaBtn .calDot{fill:var(--oro);stroke:none}
.fechaBtn .mono{font-size:.82rem;font-weight:800;color:var(--violeta)}
.fechaDia{margin-left:auto;font-size:.66rem;font-weight:800;text-transform:capitalize;color:#D9E3F8}

/* card LA LUZ: la cinta espectral del día (pintada por JS con las horas reales) */
.cinta{position:relative;height:32px;border-radius:10px;overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5);
  background:linear-gradient(90deg,#131B3A,#131B3A)}
.cinta .m{position:absolute;top:0;bottom:0;width:2px;background:#FFF7EF;
  box-shadow:0 0 8px rgba(255,247,239,.9)}
.cintaEtq{display:flex;justify-content:space-between;font-size:.62rem;
  font-weight:700;margin-top:.35rem;gap:.3rem}
.hitos{display:grid;grid-template-columns:1fr 1fr;gap:.25rem .9rem;margin-top:.6rem}
.hito{display:flex;justify-content:space-between;font-size:.72rem;gap:.5rem;
  align-items:baseline}
.hito b{font-weight:750}
.hito .h{font-weight:750;white-space:nowrap}

/* card EL CLIMA (weather.gov, solo EE.UU.; fuera se esconde sola) */
.temp{position:relative;height:74px}
.temp svg{width:100%;height:100%;display:block}
.climaResumen{display:flex;justify-content:space-between;align-items:baseline;
  margin-top:.4rem;font-size:.74rem;gap:.6rem}
.climaResumen .rango{font-weight:800;font-size:.95rem}
.climaResumen .lluvia{color:#5FA8DE;font-weight:700;text-align:right}

/* ══ LA VENTANA AL CIELO + EL DÍA ENTERO (21 ago 2026) ══ */
.cieloCab{margin:.1rem 0 .15rem}
.cieloCab small{font-size:.53rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
/* la regla, escrita: es lo que hace que la franja se entienda sola */
.regla{font-size:.57rem;font-weight:600;line-height:1.3;margin-bottom:.4rem}
.regla b{font-weight:800}
.regla .oro{color:var(--tinta)}.regla .pes{color:var(--tinta)}
.ventana{display:block;width:100%;height:124px;border-radius:11px;margin:.1rem 0 .3rem;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);cursor:ew-resize;touch-action:none} /* (sigue para la maqueta; en la card manda .heroFondo>.ventana) */
.ventana[hidden]{display:none}
.lector{font-size:.54rem;font-weight:700;text-align:center;white-space:nowrap;min-height:.8rem;overflow:hidden;text-overflow:ellipsis}
.lector i{display:inline-block;width:7px;height:7px;border-radius:2px;margin:0 .15rem 0 .35rem;vertical-align:middle}
.lector .i-alta,.lector .i-media,.lector .i-baja,.lector .i-tot{background:#F0EEE9}
.lector .i-media{opacity:.7}.lector .i-baja{opacity:.45}
.lector b{font-weight:820}
.ventanaCab{display:flex;justify-content:space-between;align-items:baseline;font-size:.53rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;margin-top:.5rem;gap:.5rem}
.ventanaCab .dia{font-weight:700;letter-spacing:.04em;text-transform:none;color:#9FC7FF;text-align:right}
.ventanaCab .chipUni{margin-left:auto}
.cieloExtra{margin-top:.35rem}
.ventana[hidden],.lector[hidden],.arrastra[hidden]{display:none}
.arrastra{font-size:.53rem;font-weight:700;color:#9FC7FF;text-align:center;margin-top:.15rem}
.regla{margin:.35rem 0 .1rem}
#cardClima .ventanaCab{margin-top:.6rem}
.cieloMarco{display:grid;grid-template-columns:2.55rem 1fr;column-gap:.35rem;align-items:stretch}
.pisos{display:grid;grid-template-rows:1fr 1fr 1fr;height:56px}
.pisos span{font-size:.5rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1;
  display:flex;flex-direction:column;justify-content:center}
.pisos span small{font-size:.46rem;font-weight:650;letter-spacing:0;text-transform:none;margin-top:.1rem}
/* los pisos en la tinta de siempre: la jerarquía la hace el peso, no un color que ya significa otra cosa */
.pisos .p-alta,.pisos .p-media,.pisos .p-baja{color:var(--tinta)}
.cielo{position:relative;height:56px;border-radius:9px;overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5);background:#131B3A}
/* NUBES BLANCAS (Juan Carlos, 22 ago): el oro era el sol y el violeta la noche; la nube
   es blanca, y cuanto más blanca, más nube. Celdas redondeadas, como copos */
.cielo .col{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;gap:2px;padding:2px 0}
.cielo .col span{flex:1;border-radius:3px;margin:0 1px}
.cielo .col .alta,.cielo .col .media,.cielo .col .baja,.cielo .col .tot{background:#F0EEE9}
.cielo .col .tot{flex:3}
.cielo .sol{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,210,122,.7)}
.cielo .sol::after{content:"";position:absolute;top:3px;left:-4px;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle,#FFF0CE,#FFC275 65%,transparent 72%);box-shadow:0 0 6px rgba(255,200,120,.9)}
.cielo .m{position:absolute;top:0;bottom:0;width:2px;background:#FFF7EF;box-shadow:0 0 8px rgba(255,247,239,.9)}
.cielo .curva{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 0 3px rgba(255,122,51,.8))}
.climaHitos{position:relative;height:13px;margin-top:.15rem}
.climaHitos span{position:absolute;top:0;font-size:.52rem;font-weight:800;white-space:nowrap;line-height:1.2;transform:translateX(-50%)}
.climaHitos span.der{transform:translateX(-78%)}
.climaHitos b{font-weight:800;color:var(--oro)}
/* la lluvia vive DENTRO del gráfico (Carlos, 22 ago): gotas de verdad al pie de la franja */
.cielo .gota{position:absolute;bottom:3px;width:6px;height:6px;border-radius:50% 50% 50% 0;transform:rotate(135deg); /* la punta arriba, como la gota que cae */
  background:#5FA8DE;box-shadow:0 0 4px #5FA8DE;z-index:2}
.cieloEtq{display:flex;justify-content:space-between;font-size:.54rem;font-weight:700;margin-top:.1rem}
.climaStats .cs{flex:1 1 0;min-width:0}.climaStats .cs:first-child{flex:1.2 1 0}
.cs .sub{display:block;font-size:.56rem;font-weight:650;line-height:1.25}
.cs .calor{color:var(--brasa)}.cs .azul{color:#9FC7FF}
/* EL PRIMER VISTAZO (22 ago 2026): temperatura grande, "se siente" debajo, píldoras de veredicto */
.heroClima{display:flex;gap:.8rem;align-items:flex-start;margin-top:.1rem}
.heroTemp{flex:1 1 auto;min-width:0}
.heroTemp>b{display:block;font-size:2.15rem;font-weight:820;line-height:1;letter-spacing:-.02em;margin-top:.1rem}
/* ESPACIO RESERVADO (Carlos, 22 ago): lo que cambia de texto tiene altura fija; la card no se mueve */
.heroTemp .sub{display:block;font-size:.62rem;font-weight:650;line-height:1.35;margin-top:.2rem;height:1.35em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.heroTemp .sub .mono{font-weight:800}
.heroTemp .rosaViento{width:11px;height:11px;vertical-align:-1px;margin-right:.1rem}
.heroTemp .azul{color:#9FC7FF}
.pildoras{display:flex;flex-direction:column;gap:.3rem;flex:0 0 auto;align-items:stretch;max-width:56%}
.pildora{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;border:1px solid var(--cristal-borde);border-radius:999px;
  padding:.22rem .6rem;background:rgba(255,255,255,.06);color:var(--tinta);font:inherit;font-size:.62rem;font-weight:800;cursor:pointer;line-height:1.3;min-width:0}
.pildora small{font-size:.52rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;flex:none}
.pildora b{font-weight:820;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pildora:focus-visible{outline:none;box-shadow:0 0 12px rgba(255,178,80,.5)}
.pildora[hidden]{display:none}
.pildoraDron{flex-wrap:wrap;padding:.4rem .75rem;gap:.3rem .5rem}
.pildoraDron b{font-size:.8rem}
.pildoraDron .hasta{flex-basis:100%;font-size:.56rem;font-weight:650;white-space:nowrap}
/* EL VEREDICTO EN UNA FRASE: "Ahora: parcial, seco, racha 7 mph, aire limpio · Bien para grabar y volar" */
.veredicto{display:flex;align-items:center;gap:.5rem;margin-top:.55rem;font-size:.72rem;font-weight:700;line-height:1.3;border-top:1px solid rgba(255,255,255,.12);padding-top:.5rem}
.veredicto .pto{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:0 0 8px currentColor;background:currentColor}
.veredicto .txt{min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.veredicto b{margin-left:auto;white-space:nowrap;font-weight:820}
.tempLinea{font-size:.68rem;font-weight:700;margin-top:.45rem}
.tempLinea b{font-weight:820}
/* HOY, POR HORAS: ocho columnas (ahora, +3 h, +6 h…) con glifo, hora, temperatura y lluvia */
.horas{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:.15rem;margin-top:.45rem;border-top:1px solid rgba(255,255,255,.12);padding-top:.4rem;text-align:center}
.horas .hx{display:flex;flex-direction:column;align-items:center;min-width:0}
.horas .hx small{display:block;font-size:.5rem;font-weight:800;letter-spacing:.04em;white-space:nowrap}
.horas .hx .glifoCielo{width:16px;height:16px;margin:.15rem auto 0;display:block}
.horas .hx b{display:block;font-size:.66rem;font-weight:820;margin-top:.1rem;height:1.2em}
.horas .hx i{height:1.2em}
.horas .hx i{display:block;font-style:normal;font-size:.52rem;font-weight:700;color:#9FC7FF}
.horas .hx.esAhora small{color:var(--oro)}
/* EL CIELO VIVO DE FONDO (22 ago): el lienzo detrás de la cabecera y la temperatura,
   con un velo oscuro para que el texto se lea siempre; el sol queda en la franja alta */
.heroFondo{position:relative;margin:-.85rem -1rem 0;padding:.85rem 1rem .6rem;border-radius:18px 18px 0 0;overflow:hidden}
.heroFondo>.ventana{position:absolute;inset:0;width:100%;height:100%;margin:0;border-radius:0;box-shadow:none;cursor:ew-resize;touch-action:pan-y;z-index:0}
.heroFondo>.velo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,16,.28) 0%,rgba(10,10,16,.18) 35%,rgba(10,10,16,.62) 100%),
             linear-gradient(90deg,rgba(10,10,16,.45) 0%,rgba(10,10,16,0) 55%)}
.heroFondo>.cardCab,.heroFondo>.heroClima{position:relative;z-index:2}
.heroFondo .cardCab .titulo,.heroFondo .heroTemp,.heroFondo .chipVer{text-shadow:0 1px 3px rgba(0,0,0,.6)}
.heroFondo .cardCab{margin-bottom:.35rem}
#cardClima .heroFondo .cardCab .chipUni{background:rgba(10,10,16,.45)}
/* LAS CONDICIONES (22 ago, versión pro): icono + valor coloreado por estado + palabra,
   en una rejilla de tres filas fijas para que todo caiga en la misma línea base */
.heroClima{display:flex;align-items:flex-start;gap:.6rem;margin-top:.1rem}
.heroClima .heroTemp{flex:1 1 auto}
.chipVer{display:inline-flex;align-items:center;gap:.4rem;margin-top:.35rem;padding:.3rem .7rem;border-radius:999px;
  border:1px solid var(--cristal-borde);background:rgba(255,255,255,.06);font-size:.66rem;font-weight:820;white-space:nowrap;flex:none;max-width:58%}
.chipVer b{overflow:hidden;text-overflow:ellipsis}
.chipVer .pto{width:9px;height:9px;border-radius:50%;box-shadow:0 0 8px currentColor;background:currentColor;flex:none}
.condiciones{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:.55rem;border-top:1px solid rgba(255,255,255,.12);padding-top:.45rem}
.cond{display:grid;grid-template-rows:1.1rem 1.45rem 2.2rem;align-content:start;min-width:0}
.cond small{display:flex;align-items:center;gap:.25rem;font-size:.52rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1;white-space:nowrap}
.cond small svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cond b{display:block;font-size:1.02rem;font-weight:820;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cond b:not(.mono){font-size:.88rem}
.cond .sub{display:block;font-size:.56rem;font-weight:650;line-height:1.25;overflow:hidden}
.cond .sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.v-ok{color:#8FE8D2}.v-ojo{color:var(--ambar)}.v-no{color:var(--brasa)}.v-neutro{color:var(--tinta)}
/* LEÍDO PARA TI: las conclusiones masticadas, en filas de una línea que se abren */
.leido{margin-top:.8rem;border-top:1px solid rgba(255,255,255,.14);padding-top:.6rem}
.leido h4{font-size:.53rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.4rem;color:var(--ambar)}
.fila{display:grid;grid-template-columns:1.05rem 1fr auto .7rem;gap:.1rem .5rem;align-items:baseline;
  padding:.3rem 0;border-bottom:1px solid rgba(255,255,255,.08);cursor:pointer}
.fila[hidden]{display:none}
.fila:last-child{border-bottom:0}
.fila .pto{width:10px;height:10px;border-radius:50%;align-self:center;box-shadow:0 0 8px currentColor;background:currentColor}
.fila .que{font-size:.71rem;font-weight:750}
.fila .que .h{white-space:nowrap}
.fila .ver{font-size:.71rem;font-weight:820;white-space:nowrap;text-align:right}
.fila .flecha{font-size:.6rem;font-style:normal;color:#9FC7FF;transition:transform .2s;justify-self:end}
.fila.abierta .flecha{transform:rotate(180deg)}
.fila .por{grid-column:2/5;font-size:.6rem;font-weight:580;line-height:1.3;display:none}
.fila.abierta .por{display:block}
.v-oro{color:var(--oro)}.v-ambar{color:var(--ambar)}.v-brasa{color:var(--brasa)}.v-frio{color:#8FE8D2}.v-hielo{color:#9FC7FF}.v-violeta{color:var(--violeta)}
.pie{margin-top:.55rem;font-size:.52rem;font-weight:650;text-align:center;color:#9FC7FF;letter-spacing:.04em}

/* ══ EL PANEL PLEGABLE (21 ago 2026): primero el resumen, luego el detalle ══ */
.card.plegada .cuerpo{display:none}
.card.plegada .ventanaCab .dia{display:none}
.cardAstros.plegada .despliegue{display:none}
.chev{font-style:normal;display:inline-block;transition:transform .22s;color:#9FC7FF;font-size:.7rem}
.card.plegada .chev,.cardAstros.plegada .chev{transform:rotate(-90deg)}
.chipPliegue{margin-left:.35rem;padding:.15rem .5rem;line-height:1;cursor:pointer}
.chipPliegue .chev{color:var(--tinta);font-size:.7rem;line-height:1;display:inline-block}
/* en La luz no hay cabecera: el chip vive en la misma esquina superior derecha que en El clima */
.cardAstros{position:relative}
.cardAstros .astros{margin-top:.1rem}
.cardAstros .astroTxt small{font-size:.48rem}
.cardAstros .astroTxt b{font-size:.76rem}
.resumenLuz:focus-visible{outline:none;box-shadow:0 0 12px rgba(255,178,80,.5);border-radius:8px}
/* las flechitas de las filas, también como chips (mini) */
.fila .flecha{border:1px solid var(--cristal-borde);background:rgba(255,255,255,.08);border-radius:999px;
  padding:0 .28rem;line-height:1.1;color:var(--tinta);font-size:.55rem}
.resumenLuz{display:flex;align-items:center;justify-content:center;gap:.45rem;width:100%;margin-top:.55rem;
  background:none;border:0;color:var(--tinta);font:inherit;font-size:.7rem;font-weight:750;cursor:pointer;line-height:1.35;text-align:center}
.resumenLuz b{font-weight:820}
.resumenLuz .sep{color:#9FC7FF;margin:0 .15rem;font-weight:600}
.ahoraPlana{display:flex;gap:.7rem;margin-top:.2rem}
.ap{flex:1 1 0;min-width:0}
.ap small{display:block;font-size:.53rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;line-height:1.3}
.ap b{display:block;font-size:1.3rem;font-weight:820;line-height:1.15;white-space:nowrap}
.ap .sub{display:block;font-size:.58rem;font-weight:600;line-height:1.25}
.ap .sub input[type=number]{width:2.7rem;font-size:.66rem;padding:.05rem .25rem}
.ahora[hidden]{display:none}
/* card AHORA: la brújula viva */
.ahora{display:flex;gap:1rem;align-items:center}
.dial{width:92px;height:92px;flex:none}
.ahoraDatos{flex:1;display:grid;gap:.3rem;min-width:0}
.ad{display:flex;justify-content:space-between;font-size:.76rem;gap:.5rem;
  align-items:baseline}
.ad b{font-weight:800;white-space:nowrap}
.ad small{display:block;font-size:.58rem;font-weight:550;line-height:1.2}
/* la altura del objeto vive DENTRO de la frase masticada: chica como su línea */
.ad small input[type=number]{width:2.7rem;font-size:.66rem;padding:.05rem .25rem}

.datos input[type=number]{width:3.4rem;background:rgba(255,255,255,.12);
  border:1px solid var(--cristal-borde);border-radius:8px;color:var(--tinta);
  font:inherit;font-size:.78rem;font-weight:700;text-align:right;padding:.1rem .3rem;
  outline:none}
.datos input[type=number]:focus-visible{outline:none;box-shadow:0 0 14px rgba(255,178,80,.5)}

/* ── EL CALENDARIO DE CRISTAL (nada de PowerPoint) ── */
.cal{position:fixed;left:16px;top:150px;z-index:45;width:264px;
  border-radius:18px;padding:.9rem}
.calCab{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:.55rem}
.calTitulo{font-size:.8rem;font-weight:800;letter-spacing:.06em;
  text-transform:capitalize}
.calDias{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:.25rem}
.calDias span{text-align:center;font-size:.58rem;font-weight:800;
  letter-spacing:.08em;color:var(--ambar)}
.calGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.calDia{border:none;background:none;color:var(--tinta);font-size:.72rem;
  font-weight:650;width:32px;height:30px;border-radius:9px;cursor:pointer;
  display:grid;place-items:center}
.calDia:hover{background:rgba(255,178,80,.16)}
.calDia:focus-visible{outline:none;box-shadow:0 0 12px rgba(255,178,80,.5)}
.calDia.fuera{font-weight:400;font-size:.62rem}
.calDia.hoyDia{box-shadow:inset 0 0 0 1px rgba(255,210,122,.55)}
.calDia.elegido{background:linear-gradient(180deg,#FF8A45,#F06414);color:#FFF7EF;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 16px rgba(255,122,51,.55)}
.calHoy{margin-top:.55rem;width:100%;border:1px solid rgba(255,255,255,.24);
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03));
  color:var(--oro);font:inherit;font-size:.72rem;font-weight:750;
  padding:.42rem;border-radius:10px;cursor:pointer}
.calHoy:focus-visible{outline:none;box-shadow:0 0 14px rgba(255,178,80,.5)}
.fechaEtq{display:none}
/* el calendario del teléfono: el mismo de escritorio, centrado encima de todo */
@media (max-width:740px){.cal{left:50%;right:auto;width:264px;top:50%;transform:translate(-50%,-50%);z-index:40}}


/* ── LAS COORDENADAS, BAJO LA BRÚJULA (Carlos, 16 ago) ──
   Vivían pegadas al puntero y estorbaban: la mano va mirando el mapa y ellas
   iban delante todo el rato. Ahora tienen sitio fijo —centradas al pie de la
   card de Ahora, que es la card de la orientación— y siguen diciendo el punto
   bajo el cursor mientras se mueve por el mapa; cuando el ratón sale, vuelven
   a las de la casa. Mismo cristal que el resto, pero en una línea propia para
   que se distinga de los datos de arriba. */
.coords{display:flex;justify-content:center;gap:.6rem;margin:.55rem .1rem 0;
  padding:.3rem .5rem;border-radius:10px;
  font-size:.74rem;font-weight:750;letter-spacing:.02em;color:var(--oro);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
  white-space:nowrap;text-align:center}
.coords b{font-weight:750;color:var(--oro)}
.coords i{font-style:normal;opacity:.75;font-size:.62rem;letter-spacing:.14em;
  align-self:center;color:#F0EEE9}

/* ── la cinta métrica: el total de la medición ── */
/* la cinta métrica vive SOBRE el mapa, pegada a la medición (capa símbolo);
   este chip queda solo como respaldo oculto */
/* ── EL TOTAL DE LA MEDICIÓN, EN SU PANEL (Carlos, 16 ago) ──
   Vivía como rótulo sobre el mapa: colgado del último vértice se iba al borde,
   y centrado en la figura chocaba con las cotas y con el número de la casa. En
   una herramienta seria el resumen va en un panel y el dibujo lleva solo sus
   cotas. Aquí está, en el mismo cristal que todo lo demás. */
/* ── Y LA TABLA VIAJA CON LA FIGURA (Carlos, 16 ago) ──
   "Que la ventana se ponga encima de donde se midió, pero que respire": nadie
   debería cruzar la pantalla con la vista para leer lo que acaba de dibujar.
   `colocaPanelMedida()` la ancla sobre el borde de lo medido con su aire; el
   left/top de aquí es solo el sitio de partida si aún no hay figura. */
.medida{display:none;position:fixed;left:auto;right:16px;top:64px;z-index:20;
  min-width:212px;padding:.6rem 2.1rem .6rem .75rem;border-radius:14px}
.medida.viva{display:block}
.medida .mfila{display:flex;justify-content:space-between;align-items:baseline;
  gap:.9rem;padding:.16rem 0}
.medida .mfila+.mfila{border-top:1px solid rgba(255,255,255,.07)}
.medida .mrot{font-size:.6rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:#F0EEE9}
.medida .mval{font-size:.82rem;font-weight:750;color:var(--oro);white-space:nowrap}
.medida .mfila.mfuerte .mval{font-size:.95rem}
/* LA X, EN LA MISMA CARD: apagar la herramienta se hace donde estás mirando, no
   volviendo al menú Tools. Área de dedo entera aunque el aspa se vea fina. */
.medida .mcerrar{position:absolute;top:2px;right:2px;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:11px;cursor:pointer;
  font-size:1.15rem;line-height:1;font-weight:700;color:#F0EEE9;
  transition:background .16s,color .16s}
.medida .mcerrar:hover,.medida .mcerrar:focus-visible{
  background:rgba(255,228,0,.16);color:var(--oro)}
@media (max-width:740px){.medida{min-width:0}}

/* ── el aviso de fallo fatal: un arranque roto JAMÁS invisible ── */
.fallo{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);z-index:99;
  max-width:min(480px,calc(100vw - 32px));border-radius:18px;padding:1.2rem 1.4rem;
  color:var(--tinta);font-size:.95rem;line-height:1.5}
.fallo b{color:var(--brasa)}
.fallo code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.8rem;
  color:var(--oro);word-break:break-all;-webkit-user-select:all;user-select:all}
/* ── TOOLS: el desplegable de cristal (calcado al calendario) ── */
.tools{position:relative}
.tools:has(#btnMedir[aria-pressed="true"]) #btnTools{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),
  0 0 0 2px var(--violeta),0 14px 34px rgba(0,0,0,.45)}
.toolsMenu{position:absolute;right:0;top:calc(100% + 8px);z-index:45;min-width:200px;
  border-radius:16px;padding:.45rem}
.toolItem{display:grid;grid-template-columns:20px 1fr;grid-template-rows:auto auto;
  column-gap:.55rem;align-items:center;width:100%;text-align:left;
  background:none;border:none;color:var(--tinta);font:inherit;cursor:pointer;
  padding:.5rem .6rem;border-radius:11px}
.toolItem svg{grid-row:1/3;width:20px;height:20px;fill:none;stroke:var(--oro);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.toolItem span{font-size:.8rem;font-weight:800}
.toolItem small{font-size:.62rem;font-weight:700;color:#D9E3F8}
.toolItem:hover,.toolItem:focus-visible{outline:none;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04))}
.toolItem[aria-pressed="true"]{box-shadow:0 0 0 1.5px var(--violeta) inset}

.fechaCtl{display:flex;align-items:center;gap:.3rem}
.calPie{display:flex;align-items:center;gap:.5rem;margin-top:.55rem}
.calPie .calHoy{margin-top:0;flex:1}
.pasoDia{width:24px;height:24px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.24);
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03));
  color:var(--oro);font-size:.95rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.pasoDia:focus-visible{outline:none;box-shadow:0 0 14px rgba(255,178,80,.5)}

/* ── línea del tiempo ── */
.linea{position:fixed;left:50%;transform:translateX(-50%);bottom:44px;z-index:20;
  width:min(640px,calc(100vw - 24px));border-radius:24px;padding:.8rem 1.1rem .95rem}
.hora-grande{display:flex;align-items:center;gap:.8rem;margin-bottom:.5rem}
.hora-grande .h{font-size:1.4rem;font-weight:820;letter-spacing:-.01em}
.hora-grande .f{font-size:.66rem;font-weight:650;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ambar);flex:1}
/* el play/pausa: una gota de cristal redonda dentro de la barra */
.playpausa{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.28);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04));
  color:var(--oro);font-size:.95rem;cursor:pointer;flex:none;
  display:grid;place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px rgba(0,0,0,.4)}
.playpausa:focus-visible{outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 20px rgba(255,178,80,.5)}
.boton.vivo.chico{padding:.42rem .85rem;font-size:.66rem;flex:none}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;
  border-radius:999px;outline:none;cursor:pointer;
  background:linear-gradient(90deg,
    #131B3A 0%,#1B2140 14%,#7A4A6E 22%,#E08356 26%,#FFD27A 33%,
    #BFE3F2 50%,#FFD27A 70%,#E0713C 78%,#4A3660 84%,#131B3A 100%)}
input[type=range]:focus-visible{outline:none;box-shadow:0 0 18px rgba(255,178,80,.45)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:20px;height:20px;border-radius:50%;border:none;
  background:radial-gradient(circle at 35% 30%,#FFF,#FFD9AE 60%,#FF9A4D);
  box-shadow:0 0 18px rgba(255,150,70,.95),0 2px 6px rgba(0,0,0,.5)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;border:none;
  background:radial-gradient(circle at 35% 30%,#FFF,#FFD9AE 60%,#FF9A4D);
  box-shadow:0 0 18px rgba(255,150,70,.95),0 2px 6px rgba(0,0,0,.5)}

/* maplibre: la atribución legible y en tinta, jamás en gris */
.maplibregl-ctrl-attrib{background:rgba(10,10,16,.55)!important;
  font-size:.62rem;color:var(--tinta)!important}
.maplibregl-ctrl-attrib a{color:var(--ambar)!important}

/* ── los dos anchos: teléfono ── */
@media (max-width:740px){
  .marca{display:none}
  .busca{top:12px;left:12px;transform:none;width:calc(100vw - 24px)}
  /* los botones caben envolviendo en dos filas y con target táctil de verdad */
  .controles{top:64px;right:12px;left:12px;flex-wrap:wrap;justify-content:flex-end}
  .boton{padding:.7rem .85rem;font-size:.7rem;min-height:44px}
  .datos{left:12px;right:12px;top:auto;bottom:96px;width:auto;gap:8px;
    max-height:36vh}
  .card{padding:.65rem .85rem}
  .hitos{gap:.2rem .7rem}
  .dial{width:76px;height:76px}
  .linea{bottom:36px;width:calc(100vw - 20px);padding:.55rem .85rem .75rem}
  .hora-grande .h{font-size:1.15rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── MODO MUNDO: la web abre mirando el planeta; la interfaz del lugar
   (panel, línea del tiempo, tinte, coordenadas) espera a la dirección ── */
body.mundo .datos,body.mundo .linea,body.mundo #tinte,body.mundo .coords{
  display:none}

/* la card de bienvenida del modo mundo: una invitación, jamás cards vacías */
.bienvenida{position:fixed;left:16px;top:70px;z-index:20;display:none;
  width:min(340px,calc(100vw - 32px));padding:1rem 1.1rem}
body.mundo .bienvenida{display:block}
.bienvT{font-size:1.25rem;font-weight:820;letter-spacing:-.02em;line-height:1.15}
.sol-grad{background:linear-gradient(92deg,#FF7A33,#EBA43B 55%,#FFD27A);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.bienvX{margin-top:.4rem;font-size:.8rem;line-height:1.45}
@media (max-width:1180px){.bienvenida{top:118px}}
/* en el teléfono el cartel va CENTRADO en la pantalla (Carlos, 21 ago) */
@media (max-width:740px){.bienvenida{left:12px;right:12px;width:auto;top:50%;bottom:auto;transform:translateY(-50%)}}

/* el mini switch de unidades: una gota de cristal con la unidad DESTINO */
.chipUni{margin-left:.45rem;border:1px solid rgba(255,255,255,.26);
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03));
  color:var(--oro);font:inherit;font-size:.6rem;font-weight:800;
  padding:.16rem .5rem;border-radius:999px;cursor:pointer;flex:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.chipUni:focus-visible{outline:none;box-shadow:0 0 12px rgba(255,178,80,.5)}
.cardCab .chipUni:last-child{margin-left:auto}
#cardClima .cardCab .cabDato{margin-left:auto}
#cardClima .cardCab .chipUni{margin-left:.45rem}
/* cada número del clima con su NOMBRE encima: nada suelto que adivinar */
/* CUATRO columnas alineadas (Carlos, 16 ago: "lo siento desorganizado, no
   alineado"): la hora manda en tamaño, las demás en el mismo escalón, y
   todas nacen en la misma línea. Nada de flex-wrap tirando una abajo. */
.climaStats{display:flex;justify-content:space-between;align-items:start;
  gap:.9rem;margin-top:.75rem}
.cs{min-width:0;flex:0 0 auto}
.cs .baja{margin-left:.35rem;color:#9FC7FF;font-size:.95rem}
.cs small{display:block;font-size:.53rem;font-weight:800;letter-spacing:.1em;
  margin-bottom:.12rem;
  text-transform:uppercase;line-height:1.3}
.cs b{font-size:1.05rem;font-weight:820;line-height:1.15}
.cs:first-child b{font-size:1.35rem}
.climaStats .lluvia{margin-left:auto;text-align:right;font-size:.7rem;
  max-width:11rem}

/* la chincheta propia: su punta ES el punto (ver app.js) */
.pinPropio{cursor:grab;line-height:0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))}
.pinPropio:active{cursor:grabbing}

/* ── EL ASTRO: el sol como cuerpo de luz (sprites aditivos en DOM) ── */
#astro{position:fixed;left:0;top:0;width:0;height:0;z-index:6;
  pointer-events:none;will-change:transform}
/* ── EL ASTRO SE AGARRA (Carlos, 16 ago): un asa invisible sobre el núcleo,
   del tamaño del dedo. Solo AHÍ; el resto del mapa se sigue arrastrando ── */
#asaSol,#asaLuna{position:fixed;left:0;top:0;width:64px;height:64px;
  margin:-32px 0 0 -32px;border-radius:50%;z-index:8;cursor:grab;
  touch-action:none;background:transparent}
#asaSol.agarrando,#asaLuna.agarrando{cursor:grabbing}
#asaSol[hidden],#asaLuna[hidden]{display:none}
#astro i,.fantasma{position:absolute;border-radius:50%;pointer-events:none;
  mix-blend-mode:screen;transform:translate(-50%,-50%)}
/* EL GLOW BAJA OTRO PUNTO (Carlos, 18 ago): "tiende a tapar los horarios que
   se aproximan, que ya hoy son fijos". Con el horario fijo hay cifras cerca
   del astro a todas horas, así que el aura tenía que ceder: el halo encoge y
   pierde cuerpo, y la corona baja de fuerza. El núcleo NO se toca: el sol se
   sigue viendo igual de bien, lo que se va es lo que estorbaba alrededor. */
.a-halo{width:236px;height:236px;
  background:radial-gradient(circle,rgba(255,170,90,.115),rgba(255,140,60,.032) 45%,transparent 70%)}
.a-corona{width:120px;height:120px;filter:url(#hervor);
  background:radial-gradient(circle,rgba(255,200,125,.34),rgba(255,148,68,.12) 55%,transparent 72%);
  animation:late 5s ease-in-out infinite}
/* EL NÚCLEO NO CIEGA (Carlos, 16 ago: "ese centro quema la retina"): fuera el
   blanco puro y fuera el foco de 22 px. Queda un disco de oro cálido, con el
   mismo tamaño y el mismo sitio; la corona y la estela de alrededor no se
   tocan, que ésas sí estaban bien. */
/* el punto: se ve, se sabe dónde está el sol, y no quema. Ni blanco de foco
   (cegaba) ni ámbar apagado (se perdía): crema cálida con un halo corto */
.a-nucleo{width:36px;height:36px;
  background:radial-gradient(circle,#FFF0CE 0%,#FFDFA6 38%,#FFC275 70%,transparent 100%);
  box-shadow:0 0 8px 1px rgba(255,215,155,.30);opacity:.95}
.a-rayos{width:220px;height:220px;
  background:conic-gradient(from 0deg,
    transparent 0 7%,rgba(255,220,160,.085) 8.5%,transparent 10% 23%,
    rgba(255,220,160,.06) 25%,transparent 27% 40%,rgba(255,220,160,.085) 42%,
    transparent 44% 57%,rgba(255,220,160,.055) 59%,transparent 61% 73%,
    rgba(255,220,160,.08) 75%,transparent 77% 90%,rgba(255,220,160,.07) 92%,transparent 94%);
  -webkit-mask:radial-gradient(circle,transparent 12%,#000 22%,transparent 68%);
  mask:radial-gradient(circle,transparent 12%,#000 22%,transparent 68%);
  animation:gira 90s linear infinite}
@keyframes gira{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes late{0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.07)}}
.fantasma{display:none!important} /* muertos: flotaban "de la nada" */
@media (prefers-reduced-motion:reduce){.a-rayos,.a-corona{animation:none}}

/* EN EL MUNDO LUNA, TODO LO DEL SOL EN DOM MUERE A NIVEL CSS (Carlos, 15 ago:
   desarmar por partes): astro, mancha, portales; y sus animaciones se DETIENEN
   (un elemento hidden con animation sigue consumiendo y en algún navegador se
   asoma). Cinturón y tirantes: hidden + display:none + animation:none. */
body.mundoLuna #astro,body.mundoLuna #mancha,body.mundoLuna .portal{display:none!important}
body.mundoLuna .a-rayos,body.mundoLuna .a-corona{animation:none!important}
#astro[hidden],#mancha[hidden],.portal[hidden]{display:none!important}
#astro[hidden] .a-rayos,#astro[hidden] .a-corona{animation:none!important}

/* ── LA MANCHA: la luz del sol pintada en el suelo (atmósfera, no geometría) ── */
#mancha{position:fixed;left:0;top:0;width:640px;height:440px;z-index:4;
  pointer-events:none;mix-blend-mode:screen;will-change:transform,opacity;
  background:radial-gradient(ellipse 50% 38% at 50% 50%,
    rgba(255,180,100,.32),rgba(255,160,80,.10) 48%,transparent 72%)}

/* ── LOS PORTALES: el alba y el ocaso como puertas de luz de pie ── */
.portal{position:fixed;left:0;top:0;width:22px;height:64px;z-index:5;
  pointer-events:none;mix-blend-mode:screen;will-change:transform;
  border-radius:50%}
.portal.alba{
  background:radial-gradient(ellipse 38% 46% at 50% 50%,rgba(255,179,92,.9),
    rgba(255,179,92,.28) 55%,transparent 75%);
  box-shadow:0 0 18px rgba(255,179,92,.5)}
.portal.ocaso{
  background:radial-gradient(ellipse 38% 46% at 50% 50%,rgba(143,232,210,.85),
    rgba(95,168,222,.26) 55%,transparent 75%);
  box-shadow:0 0 18px rgba(143,232,210,.45)}
/* los portales son QUIETOS: Carlos vio el pulso como "luz que va y viene
   de la nada" (15 ago) y todo latido murió; marcan el punto, sin teatro */
.portal{opacity:.75}
@media (prefers-reduced-motion:reduce){.portal{animation:none}}

/* ── LA LUNA DE HOY: card propia y chica (no depende del clima de EE.UU.:
   el contrato dice sol + luna para TODO el mundo) ── */

#vResumenDia{color:#8FE8D2;font-weight:700}
/* el glifo del cielo: NUESTRO, con color con significado (jamás gris) */
.resumenDia{display:inline-flex;align-items:center;gap:.35rem}
.glifoCielo{width:18px;height:18px;fill:none;stroke-width:1.9;stroke-linecap:round;
  stroke-linejoin:round}
.glifoCielo g{display:none}
.glifoCielo[data-cielo="sol"] .g-sol,.glifoCielo[data-cielo="solnube"] .g-solnube,
.glifoCielo[data-cielo="nube"] .g-nube,.glifoCielo[data-cielo="lluvia"] .g-lluvia{display:block}
.glifoCielo .g-sol{stroke:#FFD27A}.glifoCielo .g-sol circle{fill:#FFD27A}
.glifoCielo .g-solnube{stroke:#FFD27A}.glifoCielo .g-solnube circle{fill:#FFD27A}
.glifoCielo .nube{stroke:#8FE8D2;fill:rgba(143,232,210,.22)}
.glifoCielo .g-lluvia .nube{stroke:#5FA8DE;fill:rgba(95,168,222,.25)}
.glifoCielo .gotas{stroke:#5FA8DE}

/* ── el viento: número y una aguja que apunta de DÓNDE sopla ── */
.vientoV{display:inline-flex;align-items:center;gap:.25rem}
.rosaViento{width:13px;height:13px;flex:none;fill:none;stroke:var(--oro);
  stroke-width:2.4;stroke-linecap:round;transition:transform .3s}
.vientoDe{display:block;font-size:.56rem;font-weight:700;color:#D9E3F8;
  letter-spacing:.06em;margin-top:.1rem}
/* ── LOS 7 DÍAS: una barra por día, todas en la MISMA escala de la semana,
   así el día más caluroso se ve sin leer un número (Carlos, 16 ago) ── */
.dias{margin-top:.7rem;padding-top:.6rem;border-top:1px solid rgba(255,255,255,.14);
  display:grid;grid-template-columns:auto auto 1fr;gap:.32rem .5rem;align-items:center}
.dias[hidden]{display:none}
.dias .dNom{font-size:.62rem;font-weight:800;letter-spacing:.06em}
.dias .glifoCielo{width:15px;height:15px}
.dias .dRango{display:flex;align-items:center;gap:.4rem;font-size:.6rem;font-weight:800}
.dias .dMin{width:2.1rem;text-align:right;color:#9FC7FF}
.dias .dMax{width:2.1rem;color:#FFD27A}
.dias .pista{position:relative;flex:1;height:4px;border-radius:2px;
  background:rgba(255,255,255,.14)}
.dias .tramo{position:absolute;top:0;bottom:0;border-radius:2px;
  background:linear-gradient(90deg,#5FA8DE,#FFD27A 65%,#FF9E3D)}
.dias .hoyPunto{position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;
  margin-left:-3.5px;border-radius:50%;background:#FFF7EF;
  box-shadow:0 0 0 1.5px rgba(4,6,12,.8)}
.masDias{width:100%;margin-top:.75rem;background:none;border:none;cursor:pointer;
  color:#D9E3F8;font:inherit;font-size:.6rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:.15rem}
.masDias i{font-style:normal;display:inline-block;transition:transform .25s}
.masDias[aria-expanded="true"] i{transform:rotate(180deg)}
.masDias:focus-visible{outline:none;box-shadow:0 0 12px rgba(255,178,80,.5);border-radius:8px}

/* ── LOS DOS MUNDOS: la card activa brilla; la otra invita ── */
/* ── LA CARD DE LOS ASTROS: dos imágenes que se cliquean (el texto no), y
   una ventana que se despliega hacia abajo con los datos del mundo activo ── */
.astros{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
/* el texto al LADO de cada astro (Carlos, 21 ago): la card baja de altura y la
   línea de sale/se pone/dorada queda sola abajo */
.astro{display:flex;flex-direction:row;align-items:center;text-align:left;gap:.55rem;min-width:0}
.astroImg{width:62px;height:62px;flex:none;border-radius:50%;display:grid;place-items:center;
  position:relative;cursor:pointer;border:none;background:none;padding:0;
  /* el gesto se SIENTE (Carlos, 16 ago): crece con un punto de rebote y se
     enciende; nada de layout, solo transform y luz, así la card no brinca */
  /* al ritmo de un hover de verdad: 170 ms con rebote (los buenos van entre
     120 y 200 ms; 340 se sentía lento) y el brillo casi instantáneo */
  transition:transform .17s cubic-bezier(.2,.9,.25,1.4),
             filter .14s ease,opacity .14s ease}
.astroImg canvas{position:relative;display:block;width:62px;height:62px}
.astroImg:hover{transform:scale(1.13) translateY(-4px)}
.astroImg:active{transform:scale(.95) translateY(0);transition-duration:.07s}
.solImg:hover{filter:drop-shadow(0 0 20px rgba(255,178,80,.6))}
.lunaImg:hover{filter:drop-shadow(0 0 18px rgba(159,230,255,.55))}
/* el que está apagado se ENCIENDE al pasar por encima: así se ve que se toca */
.astroImg[aria-pressed="false"]:hover{filter:saturate(1) brightness(1.04)
  drop-shadow(0 0 16px rgba(255,255,255,.28));opacity:1}
@media (prefers-reduced-motion:reduce){
  .astroImg,.astroImg:hover,.astroImg:active{transition:filter .2s ease;transform:none}
}
.astroImg:focus-visible{outline:none;box-shadow:0 0 0 2px var(--violeta)}
/* el activo brilla por su propia luz; el otro se atenúa, nunca se encierra */
.astroImg[aria-pressed="false"]{filter:saturate(.7) brightness(.88);opacity:.85}
/* el halo que respira, detrás del sol */
.solImg .s-halo{position:absolute;width:88px;height:88px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,180,90,.35),rgba(255,140,60,.10) 55%,transparent 72%);
  animation:respira 4s ease-in-out infinite;transition:opacity .3s}
/* al pasar por encima, la corona respira más rápido y más fuerte */
.solImg:hover .s-halo{animation-duration:1.5s}
@keyframes respira{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.15);opacity:1}}
@media (prefers-reduced-motion:reduce){.solImg .s-halo{animation:none}}

.astroTxt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.astroTxt small{font-size:.5rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.astroSol .astroTxt small{color:var(--oro)}.astroLuna .astroTxt small{color:#9FE6FF}
.astroTxt b{font-size:.82rem;font-weight:820;margin-top:.15rem}
.astroSub{font-size:.62rem;font-weight:700;color:#D9E3F8}
.despliegue{margin-top:.75rem;padding-top:.7rem;border-top:1px solid rgba(255,255,255,.14)}
.despliegue[hidden]{display:none}
.lunaHoras{display:flex;gap:1.2rem;justify-content:center}
.lunaHoras small{display:block;font-size:.5rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:#9FE6FF}
.lunaHoras b{font-size:.74rem;font-weight:800}
/* el disco viajero: la luna real recorriendo su arco sobre la casa */
#lunaViva{position:fixed;left:0;top:0;z-index:7;pointer-events:none;
  will-change:transform;
  /* SIN filtros de drop-shadow (en móvil vibraban como puntos alrededor del
     disco): el halo se pinta DENTRO del canvas */
  filter:none}
#lunaViva canvas{display:block;width:96px;height:96px;pointer-events:none}
/* en el mundo luna, la escena se enfría: el tinte cede al plata */
body.mundoLuna #tinte{filter:saturate(.6)}

/* ── la card PRO de la luna: momentos en cristiano ── */
.lunaPro{margin-top:.5rem;padding-top:.45rem;border-top:1px solid rgba(255,255,255,.12);
  display:grid;gap:.2rem}
.lunaVis{font-size:.78rem;font-weight:800;color:#9FE6FF}
.lunaLlena{font-size:.7rem;font-weight:700;color:#D9E3F8}
/* el disco viajero de día: pálido (está, no se ve) */
#lunaViva.palida{opacity:.55}

/* ══ EL PANEL DE CAPAS (Carlos, 17 ago) ══
   "Que el usuario diga: deja marcar para ver qué es esto, y el indicador se
   vaya marcando." Cada pieza del instrumento es una casilla. Sin gris (ley 1):
   apagada la marca es un contorno claro; encendida, oro macizo. */
.capas{position:relative}
.capasMenu{min-width:230px}
.capaItem{display:grid;grid-template-columns:18px 1fr;column-gap:.6rem;
  align-items:center;width:100%;text-align:left;
  background:none;border:none;color:var(--tinta);font:inherit;cursor:pointer;
  padding:.5rem .6rem;border-radius:11px}
.capaItem+.capaItem{margin-top:1px}
.capaItem .capaTxt{display:block;min-width:0}
.capaItem b{display:block;font-size:.8rem;font-weight:800;line-height:1.25}
.capaItem small{display:block;font-size:.62rem;font-weight:700;color:#D9E3F8;
  line-height:1.3}
.capaItem:hover,.capaItem:focus-visible{outline:none;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04))}
/* LA MARCA: el cuadro que se llena. Es el indicador que Carlos pidió ver
   marcarse, así que la transición es visible pero corta. */
.capaItem .tic{width:18px;height:18px;border-radius:6px;
  border:1.5px solid rgba(255,242,168,.55);
  background:rgba(255,255,255,.04);
  display:grid;place-items:center;position:relative;
  transition:background .18s,border-color .18s,box-shadow .18s}
.capaItem .tic::after{content:'';width:9px;height:5px;
  border-left:2px solid #1A1402;border-bottom:2px solid #1A1402;
  transform:rotate(-45deg) scale(.4);transform-origin:center;
  opacity:0;margin-top:-2px;transition:opacity .18s,transform .18s}
.capaItem[aria-checked="true"] .tic{background:var(--oro);
  border-color:var(--oro);box-shadow:0 0 12px rgba(255,228,0,.35)}
.capaItem[aria-checked="true"] .tic::after{opacity:1;
  transform:rotate(-45deg) scale(1)}
/* EN EL TELÉFONO EL PANEL SE ANCLA A LA VENTANA, NO AL BOTÓN (17 ago):
   colgado del botón, que va en medio de la barra, su borde izquierdo se salía
   de la pantalla. Fijo a la derecha cabe siempre, en cualquier ancho. */
@media (max-width:740px){
  .capasMenu{position:fixed;top:58px;right:12px;left:auto;
    min-width:0;width:min(252px,calc(100vw - 24px))}
  /* con un botón más arriba, los cuatro necesitan respirar en pantallas
     estrechas: menos relleno, mismo aspecto */
  .controles .boton{padding:.5rem .72rem}
}

/* EL LOGO DE GOOGLE: obligatorio mientras se vea su imagen, sin taparlo ni
   deformarlo y con su espacio libre alrededor (política de Google). Abajo a la
   izquierda, sobre la foto, con sombra para que se lea sobre cualquier tejado. */
#googleLogo{position:fixed;left:12px;bottom:8px;z-index:21;height:19px;width:auto;
  pointer-events:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.9))}
#googleLogo[hidden]{display:none}
@media (max-width:740px){#googleLogo{bottom:6px;height:17px}}

/* ══ EL TELÉFONO: LA HOJA DE CRISTAL CON TRES ALTURAS (21 ago 2026) ══
   Dos mundos de verdad: en escritorio nada de esto existe (la hoja y el botón
   de menú van ocultos); en pantallas chicas el mapa ocupa toda la pantalla,
   arriba solo el buscador con su menú, y abajo la hoja: asa con banderas,
   línea esencial y la barra del tiempo dentro; media, la card tocada; entera,
   todas. El JS mueve .linea y .datos dentro de #hoja solo en el teléfono. */
#hoja{display:none}
.menuTel{display:none}
@media (max-width:740px){
  #hoja{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;z-index:25;
    border-radius:24px 24px 0 0;border-bottom:0;max-height:calc(100vh - 84px);
    padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -14px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18)}
  #hoja[hidden]{display:none}
  body.mundo #hoja{display:none}
  #hoja .asa{flex:none;padding:.4rem .9rem .3rem;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
  #hoja .grab{width:40px;height:5px;border-radius:3px;background:rgba(255,255,255,.45);margin:0 auto .5rem}
  #hoja .banderas{display:flex;gap:.4rem}
  #hoja .bandera{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:.35rem;min-height:40px;
    border:1px solid var(--cristal-borde);border-radius:999px;background:rgba(255,255,255,.06);color:var(--tinta);
    font:inherit;font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.4rem .3rem;cursor:pointer}
  #hoja .bandera .ico{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:.66rem;flex:none}
  #hoja .bandera[aria-selected="true"]{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.06));
    border-color:rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
  #hoja .bandera:focus-visible{outline:none;box-shadow:0 0 12px rgba(255,178,80,.5)}
  #hoja .esencia{display:none} /* la info vive en las cards: se toca la bandera (Carlos, 21 ago) */
  #hoja .esencia b{font-weight:820}
  #hoja .esencia .sep{color:#9FC7FF;margin:0 .2rem;font-weight:600}
  /* la barra del tiempo, dentro: ya no flota aparte sobre el mapa */
  #hoja .linea{position:static;transform:none;width:auto;margin:.1rem .6rem .35rem;border-radius:18px;
    padding:.5rem .85rem .65rem;box-shadow:none;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
  /* el panel, dentro: es el cuerpo que se desliza */
  #hoja .datos{position:static;left:auto;right:auto;top:auto;bottom:auto;width:auto;max-height:none;
    flex:1 1 auto;overflow-y:auto;padding:0 .6rem .7rem;gap:8px;border-radius:0}
  #hoja[data-alto="asomada"] .datos{display:none}
  #hoja[data-alto="abierta"] .datos{max-height:calc(100vh - 300px)}
  /* solo la card de la bandera tocada (y el lugar con su fecha) */
  #hoja[data-b="luz"] .datos > .card:not(#cardLuz):not(.cardLugar),
  #hoja[data-b="clima"] .datos > .card:not(#cardClima):not(.cardLugar),
  #hoja[data-b="ahora"] .datos > .card:not(#cardAhora):not(.cardLugar){display:none}
  #hoja .card.fueraHoja{display:none!important}
  /* en el teléfono la ventana al cielo, su regla y su lector no se pintan (Carlos,
     21 ago: ocupan mucho); quedan en escritorio. El día entero y los números sí */
  /* (22 ago) el cielo vivo es el fondo de la cabecera también en el teléfono */
  /* en el teléfono las cards no se pliegan: la bandera ya las abre; fuera sus chips de esquina */
  #hoja #btnClima,#hoja #btnLuzChip{display:none}
  /* la card de dirección no existe en el teléfono: la fecha va en el asa */
  #hoja .cardLugar{display:none}
  /* el botón de fecha vive en el menú ☰, como un botón más (el día lo dice el propio teléfono) */
  /* en el menú ☰ la fecha es un botón simple "Calendario", igual que los demás (Carlos, 21 ago) */
  .controles .fechaCtl{flex:0 0 auto;margin:0;width:auto} /* sin el width:100% del botón de la card: va en la fila como los demás */
  .controles .fechaBtn{width:auto;min-height:44px;padding:.5rem .72rem;border-radius:999px;font-size:.7rem;font-weight:750;letter-spacing:.06em;
    gap:.4rem;background:linear-gradient(180deg,rgba(24,24,34,.55),rgba(9,9,15,.48));border:1px solid rgba(255,255,255,.26);
    -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);box-shadow:none;color:var(--tinta)}
  .controles .fechaBtn .fechaDia,.controles .fechaBtn .mono{display:none}
  .controles .fechaBtn .fechaEtq{display:inline}
  .controles .fechaBtn .calIco{width:16px;height:16px}
  #hoja .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  /* arriba: el buscador con su botón de menú; los botones se recogen */
  /* 16 px en el input: con menos, iOS hace zoom a la página al tocarlo y deja la hoja recortada */
  .busca input{font-size:16px}
  .menuTel{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;margin-left:.25rem;
    border:1px solid var(--cristal-borde);background:rgba(255,255,255,.08);color:var(--oro);font-size:1rem;cursor:pointer}
  .menuTel[aria-expanded="true"]{background:linear-gradient(180deg,#FF8A45,#F06414);color:#FFF7EF}
  .controles{display:none}
  body.menuTel .controles{display:flex;top:76px;gap:6px}
  /* compactos para que quepan alineados en la misma fila, Calendario incluido */
  body.menuTel .controles .boton,body.menuTel .controles .fechaBtn{padding:.45rem .58rem;font-size:.64rem;min-height:40px;letter-spacing:.04em}
  body.menuTel .controles .fechaBtn .calIco{width:14px;height:14px}
}