/* Planetario (/planetario/): franja de noche a todo el ancho con el cielo y, debajo, su información; después, anuncio y texto.
   Botones grandes para la pizarra digital y modo de pantalla completa (o a toda la ventana si el navegador no lo permite). */
.planetario{
  --noche:#0B1230;--panel:#1B2440;--panel-2:#24305A;--linea-noche:#33406E;--claro:#F4F6FF;--apagado:#A9B7D4;
  --amarillo:#FFE08A;--crema:#FFF3C4;--azul-cielo:#5DB2FF;
  background:var(--noche);color:var(--claro);padding:18px max(18px, env(safe-area-inset-left, 0px)) 22px;margin-top:6px;
  display:flex;flex-direction:column;gap:12px;color-scheme:dark
}
.planetario>*{width:100%;max-width:1280px;margin-left:auto;margin-right:auto}
.planetario__cabecera{display:flex;align-items:center;gap:12px 20px}
.planetario__titulo{display:flex;align-items:center;gap:12px}
.planetario__titulo img{flex:none}
.planetario__antetitulo{display:block;font:800 15px var(--titulos);letter-spacing:.08em;text-transform:uppercase;color:var(--amarillo)}
.planetario h1{margin:0;font-size:clamp(28px,4vw,42px);color:#fff}
.planetario__entradilla{margin:0 auto;color:var(--apagado);font-size:17px}
.planetario__mandos{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.planetario__modos{display:flex;background:var(--panel);border-radius:999px;padding:5px;gap:4px}
.planetario__modos button{border:0;background:transparent;min-height:50px;padding:0 20px;border-radius:999px;font:800 18px var(--titulos);cursor:pointer;color:var(--apagado)}
.planetario__modos button[aria-pressed="true"]{background:var(--amarillo);color:#1B2440}
.planetario__boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 16px;border:2px solid var(--linea-noche);background:var(--panel);color:var(--claro);border-radius:999px;font:800 16px var(--texto);cursor:pointer}
.planetario__boton[aria-pressed="true"]{background:var(--azul-cielo);border-color:var(--azul-cielo);color:#06142E}
.planetario__boton--ahora{border-color:var(--amarillo);color:var(--amarillo)}
.planetario__velocidades .planetario__boton{white-space:nowrap}
.planetario__velocidades .planetario__boton svg{flex:none}
.planetario__completa{min-height:60px;padding:0 20px;font-size:17px}
.planetario button:focus-visible,.planetario select:focus-visible{outline:4px solid var(--sol);outline-offset:2px}

/* El cielo es lo principal: ocupa todo el ancho y el alto de la pantalla, y la información va debajo.
   De pie (móvil, tablet): mandos encima, cielo cuadrado y velocidad debajo. */
.planetario__principal{display:flex;flex-direction:column;gap:16px}
.planetario__escena{display:flex;flex-direction:column;gap:10px;min-width:0}
.planetario__lienzo{position:relative;width:100%;aspect-ratio:1/1;max-height:calc(100svh - 190px);min-height:300px}
.planetario canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;border-radius:18px}
.planetario canvas:active{cursor:grabbing}
.planetario__pista{position:absolute;left:12px;top:10px;font-size:14px;font-weight:700;color:var(--apagado);background:rgba(11,18,48,.7);padding:4px 12px;border-radius:999px;pointer-events:none}
.planetario__ver-ficha{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);max-width:calc(100% - 24px);min-height:48px;padding:0 18px;border:0;border-radius:999px;background:var(--amarillo);color:#1B2440;font:800 17px var(--texto);cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.planetario__ver-ficha[hidden]{display:none}
.planetario__volver{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:6px;min-height:46px;padding:0 16px 0 10px;border:2px solid var(--linea-noche);border-radius:999px;background:rgba(27,36,64,.92);color:var(--claro);font:800 16px var(--texto);cursor:pointer}
.planetario__volver[hidden]{display:none}
.planetario__sonido{position:absolute;right:10px;top:10px;z-index:1;display:grid;place-items:center;width:42px;height:42px;padding:0;border:2px solid var(--linea-noche);border-radius:50%;background:rgba(27,36,64,.85);color:var(--claro);cursor:pointer}
.planetario__sonido[aria-pressed="false"]{color:var(--apagado)}
.planetario__sonido[aria-pressed="true"] .planetario__sonido-no,.planetario__sonido[aria-pressed="false"] .planetario__sonido-si{display:none}
.planetario__tiempo{display:flex;flex-direction:column;align-items:center;gap:8px}
.planetario__reloj{font:700 13px var(--texto);color:var(--apagado);text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.planetario__calendario{width:100%;max-width:240px;align-self:center;background:var(--panel);border-radius:14px;padding:8px 8px 6px}
.planetario__mes{font:800 15px var(--titulos);color:var(--amarillo);text-align:center;margin-bottom:4px}
.planetario__dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;font-size:12px;text-align:center;font-variant-numeric:tabular-nums}
.planetario__dias b{color:var(--apagado);font-weight:800}
.planetario__dias span{border-radius:6px;line-height:1.6;transition:background-color .2s}
.planetario__dias .planetario__visto{background:rgba(93,178,255,.28)}
.planetario__dias .planetario__hoy{background:var(--amarillo);color:#1B2440;font-weight:800}
.planetario__velocidades,.planetario__velocidades>span{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}

/* Pantalla ancha (ordenador, pizarra, móvil en horizontal): los mandos a la izquierda del cielo y la velocidad a la
   derecha, en los huecos que deja el círculo; el lienzo llega al alto de la pantalla */
@media (min-aspect-ratio:4/3){
  .planetario__escena{display:grid;grid-template-columns:minmax(150px,200px) minmax(0,1fr) minmax(150px,200px);gap:14px;align-items:start}
  .planetario__mandos{flex-direction:column;align-items:stretch;flex-wrap:nowrap}
  .planetario__modos{flex-direction:column;border-radius:26px}
  .planetario__modos button{padding:0 12px}
  .planetario__completa{padding:0 12px}
  .planetario__lienzo{aspect-ratio:auto;height:calc(100svh - 32px);min-height:320px;max-height:1100px}
  .planetario__velocidades,.planetario__velocidades>span{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  .planetario__tiempo{align-items:stretch}
}

/* La información, debajo del cielo: ajustes y lista a la izquierda, ficha del astro a la derecha */
.planetario__panel{background:var(--panel);border-radius:18px;padding:16px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 20px;align-items:start;min-width:0}
.planetario__ajustes{display:flex;flex-direction:column;gap:12px}
.planetario__ajustes[hidden]{display:none}
.planetario__ciudad{display:flex;flex-direction:column;gap:4px;font-weight:800;font-size:15px;color:var(--apagado)}
.planetario select{min-height:48px;background:var(--panel-2);color:var(--claro);border:2px solid var(--linea-noche);border-radius:12px;padding:6px 10px;font:800 17px var(--texto)}
.planetario__interruptores{display:flex;flex-wrap:wrap;gap:8px}
.planetario__resumen h2,.planetario__tarjeta h2{font-size:24px;margin:0;line-height:1.15;text-wrap:balance}
.planetario__resumen h2{color:#fff}
.planetario__resumen p{margin:6px 0 0;color:var(--apagado);font-size:16px}
.planetario__resumen .planetario__antes{margin-top:12px;color:var(--claro);font-weight:800}
.planetario__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.planetario__chip{border:0;background:var(--panel-2);color:var(--claro);border-radius:999px;min-height:44px;padding:0 14px;font:800 16px var(--texto);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.planetario__chip i{width:13px;height:13px;border-radius:50%;flex:none}
.planetario__chip[aria-pressed="true"]{outline:3px solid var(--amarillo);outline-offset:1px}
.planetario__tarjeta{grid-column:2;grid-row:1 / span 2;background:var(--crema);color:#1B2440;border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;scroll-margin:12px}
.planetario__tarjeta p{margin:0;font-size:17px}
.planetario__tipo{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#6B4A00}
.planetario__datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;font-size:16px;margin:2px 0 0}
.planetario__datos b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#6B4A00}
.planetario__sin-js{text-align:center;color:var(--crema)}

@media (max-width:700px){
  .planetario__panel{grid-template-columns:minmax(0,1fr)}
  /* la ficha, lo primero bajo el cielo */
  .planetario__tarjeta{grid-column:auto;grid-row:auto;order:-1}
}
@media (max-width:560px){
  .planetario{padding-left:16px;padding-right:16px}
  .planetario__titulo img{width:44px;height:44px}
  .planetario__mandos{flex-wrap:nowrap;gap:8px}
  .planetario__modos{flex:1;min-width:0}
  .planetario__modos button{flex:1;padding:0 6px;font-size:15px;line-height:1.1;min-height:48px}
  /* «Pantalla completa» solo con el icono (el texto sigue para los lectores de pantalla) */
  .planetario__completa{flex:none;min-height:56px;width:56px;padding:0}
  .planetario__completa [data-completa-texto]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .planetario__lienzo{min-height:0}
}

/* Pantalla completa (API del navegador) o a toda la ventana (iPhone y navegadores sin la API): solo el cielo y sus
   mandos a la vista; la información sigue debajo, desplazando */
.planetario:fullscreen,.planetario.planetario--completa{position:fixed;inset:0;z-index:100;margin:0;overflow:auto;padding-top:12px;padding-bottom:12px;max-width:none}
.planetario:fullscreen>*,.planetario.planetario--completa>*{max-width:none}
.planetario:fullscreen .planetario__entradilla,.planetario.planetario--completa .planetario__entradilla{display:none}
.planetario:fullscreen .planetario__cabecera,.planetario.planetario--completa .planetario__cabecera{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.planetario:fullscreen .planetario__lienzo,.planetario.planetario--completa .planetario__lienzo{max-height:calc(100dvh - 190px)}
@media (min-aspect-ratio:4/3){
  .planetario:fullscreen .planetario__lienzo,.planetario.planetario--completa .planetario__lienzo{height:calc(100dvh - 24px);max-height:none}
}
body.planetario-abierto{overflow:hidden}

/* Aviso «Gira el móvil»: solo con el móvil de pie y hasta que se pulsa «Verlo en vertical» */
.planetario__girar{display:none}
@media (orientation:portrait) and (max-width:560px){
  .planetario:not(.planetario--vertical) .planetario__girar{display:flex;position:absolute;inset:0;z-index:2;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;border-radius:18px;background:rgba(11,18,48,.88);color:var(--crema)}
  .planetario__girar svg{color:var(--amarillo);animation:planetario-girar 2.4s ease-in-out infinite}
  .planetario__girar p{margin:0;font-size:19px;line-height:1.3}
  .planetario__girar strong{display:block;font:800 26px var(--titulos);color:#fff}
}
@keyframes planetario-girar{0%,25%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion: reduce){.planetario__girar svg{animation:none}}

/* Móvil en horizontal: el cielo ocupa todo el alto de la pantalla, con los mandos y la velocidad en columnas a sus
   lados; la información, debajo. Al girar el móvil la página se coloca en el planetario (planetario.js).
   Selectores con [data-planetario] para ganar también a los de pantalla completa. */
@media (orientation:landscape) and (max-height:520px){
  .planetario[data-planetario]{margin:0;padding:8px max(12px, env(safe-area-inset-right, 0px)) 12px max(12px, env(safe-area-inset-left, 0px));gap:10px}
  .planetario[data-planetario]>*{max-width:none}
  .planetario[data-planetario] .planetario__entradilla{display:none}
  /* El título sigue en la página (buscadores y lectores de pantalla) pero no ocupa sitio */
  .planetario[data-planetario] .planetario__cabecera{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .planetario[data-planetario] .planetario__escena{grid-template-columns:128px minmax(0,1fr) 128px;gap:8px}
  .planetario[data-planetario] .planetario__lienzo{height:calc(100dvh - 16px);min-height:0}
  .planetario[data-planetario] .planetario__pista{display:none}
  .planetario[data-planetario] .planetario__mandos{gap:8px}
  .planetario[data-planetario] .planetario__modos{padding:3px;border-radius:22px}
  .planetario[data-planetario] .planetario__modos button{min-height:40px;padding:0 8px;font-size:15px}
  .planetario[data-planetario] .planetario__completa{width:auto;min-height:44px;padding:0 8px;font-size:14px}
  .planetario[data-planetario] .planetario__completa [data-completa-texto]{position:static;width:auto;height:auto;clip-path:none}
  .planetario[data-planetario] .planetario__tiempo{gap:6px}
  .planetario[data-planetario] .planetario__reloj{font-size:11px}
  .planetario[data-planetario] .planetario__calendario{padding:5px 4px 4px;border-radius:10px}
  .planetario[data-planetario] .planetario__mes{font-size:12px;margin-bottom:2px}
  .planetario[data-planetario] .planetario__dias{font-size:10px;gap:1px}
  .planetario[data-planetario] .planetario__dias span{line-height:1.45}
  .planetario[data-planetario] .planetario__velocidades,.planetario[data-planetario] .planetario__velocidades>span{gap:5px}
  .planetario[data-planetario] .planetario__velocidades{display:grid;grid-template-columns:1fr 1fr}
  .planetario[data-planetario] .planetario__velocidades>span{grid-column:1 / -1;grid-row:2}
  .planetario[data-planetario] [data-pausa] span,.planetario[data-planetario] [data-ahora] span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .planetario[data-planetario] .planetario__velocidades .planetario__boton{min-height:34px;gap:4px;font-size:13px}
  .planetario[data-planetario] .planetario__velocidades svg{width:16px;height:16px;flex:none}
  .planetario[data-planetario] .planetario__boton{min-height:40px;padding:0 8px;font-size:14px}
  .planetario[data-planetario] .planetario__ver-ficha{min-height:40px;font-size:15px;bottom:28px}
  .planetario[data-planetario] .planetario__panel{padding:12px;gap:12px 16px;border-radius:14px}
  .planetario[data-planetario] .planetario__interruptores{gap:6px}
  .planetario[data-planetario] select{min-height:40px;font-size:15px}
  .planetario[data-planetario] .planetario__resumen h2,.planetario[data-planetario] .planetario__tarjeta h2{font-size:20px}
  .planetario[data-planetario] .planetario__resumen p,.planetario[data-planetario] .planetario__tarjeta p{font-size:15px}
  .planetario[data-planetario] .planetario__chip{min-height:38px;font-size:14px;padding:0 10px}
  .planetario[data-planetario] .planetario__tarjeta{padding:10px 12px}
  .planetario[data-planetario] .planetario__datos{font-size:14px}
}

/* Texto bajo el planetario */
.planetario-texto{margin-top:28px}
.planetario-texto h2{color:var(--tinta);margin-top:1.2em}
.planetario-lista{padding-left:1.4em}
.planetario-lista li{margin-bottom:.5em}

@media (prefers-reduced-motion: reduce){.planetario *{transition:none !important}}

/* Botón «Escuchar» de la ficha de cada astro */
.planetario__escuchar{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border:0;border-radius:999px;background:#1B2440;color:var(--crema);font:800 17px var(--texto);cursor:pointer}
.planetario__escuchar[aria-pressed="true"]{background:var(--coral,#E8403D);color:#fff}
@media (orientation:landscape) and (max-height:520px){.planetario[data-planetario] .planetario__escuchar{min-height:40px;font-size:15px}}