/* =========================================================
   ASTER · Almanaque impreso
   Papel crema, tinta azul, dorado de estrella.
   Los mapas del cielo van en "láminas" azul noche, como
   las planchas de un atlas antiguo.
   ========================================================= */
:root{
  /* papel y tinta */
  --papel:#F3EBDB;        /* fondo de la página (domina) */
  --hoja:#FBF7EE;         /* tarjetas */
  --hoja-2:#EFE5D1;       /* rellenos suaves, campos */
  --tinta:#1C2238;        /* texto principal */
  --tinta-2:#4B5068;      /* texto secundario (7:1 sobre papel) */
  --tinta-3:#6E6F80;      /* notas pequeñas (4.6:1) */
  --filete:rgba(28,34,56,.20);   /* líneas finas de imprenta */
  --filete-2:rgba(28,34,56,.38);
  /* dorado */
  --oro:#D9A441;          /* relleno de botones y fichas */
  --oro-claro:#F2D27A;    /* estrellas sobre lámina */
  --oro-tinta:#8A5A12;    /* dorado para texto sobre papel (5.6:1) */
  /* lámina del cielo */
  --noche:#151B35;
  --noche-2:#0E1328;
  --crema:#F3EBDB;
  /* estados */
  --azul:#2D3A6B;         /* "en otro lugar", enlaces */
  --bermellon:#B4432E;    /* errores */
  --resorte:cubic-bezier(.32,.72,0,1);
  --r:10px;
  --z-contenido:10;--z-barra:40;--z-menu:60;--z-toast:70;
  color-scheme:light;

  /* compatibilidad con nombres anteriores */
  --texto:var(--tinta);--tenue:var(--tinta-2);--linea:var(--filete);--aster:var(--oro);--estelar:var(--azul);--rojo:var(--bermellon);--vacio:var(--papel);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overflow-x:clip}
@media (pointer:fine){html{overscroll-behavior:none}}
body{margin:0;min-height:100dvh;background:var(--papel);color:var(--tinta);font:400 16px/1.6 "Figtree",system-ui,sans-serif;overflow-x:clip}
/* grano de papel */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55  0 0 0 0 .47  0 0 0 0 .35  0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E")}
a{color:inherit}button{font:inherit;color:inherit}
a,button,[role=button]{touch-action:manipulation}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2.5px solid var(--azul);outline-offset:3px;border-radius:6px}
::selection{background:var(--oro-claro);color:var(--tinta)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:fixed;left:16px;top:-80px;z-index:var(--z-toast);background:var(--tinta);color:var(--crema);padding:12px 18px;border-radius:8px;font-weight:600;text-decoration:none;transition:transform .3s var(--resorte)}
.saltar:focus-visible{transform:translateY(96px)}
.fondo{display:none!important} /* el fondo animado del estilo anterior ya no existe */
.logo svg circle,.volver svg circle{fill:var(--tinta)}

.marco{position:relative;z-index:var(--z-contenido);width:min(1180px,100%);margin:0 auto;padding:0 clamp(16px,4vw,40px)}

/* ---------- Hojas (tarjetas impresas) ---------- */
.bandeja{background:none;border:0;padding:0;border-radius:var(--r)}
.placa{position:relative;border-radius:var(--r);background:var(--hoja);border:1px solid var(--filete);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 1px 2px rgba(28,34,56,.06),0 14px 28px -22px rgba(28,34,56,.45);
  backdrop-filter:none;-webkit-backdrop-filter:none}

/* ---------- Lámina del cielo ---------- */
.lamina{--texto:var(--crema);--tenue:#B9B6CB;--linea:rgba(243,235,219,.14);
  color:var(--crema);background:radial-gradient(120% 90% at 50% 0%,#222a52,var(--noche) 55%,var(--noche-2));
  border-radius:var(--r);border:1px solid var(--noche-2);
  box-shadow:inset 0 0 0 5px var(--noche),inset 0 0 0 6px rgba(242,210,122,.45),0 14px 28px -20px rgba(14,19,40,.7)}

/* ---------- Barra (cabecera del almanaque) ---------- */
.barra{position:sticky;top:0;z-index:var(--z-barra);padding-top:0;background:var(--papel)}
.barra::before{content:"";position:absolute;top:0;bottom:0;left:-100vmax;right:-100vmax;background:inherit;z-index:-1}
.barra::after{content:"";position:absolute;left:clamp(16px,4vw,40px);right:clamp(16px,4vw,40px);bottom:0;border-bottom:3px double var(--tinta)}
.barra .bandeja{padding:0;border:0}
.barra .placa{display:flex;align-items:center;gap:14px;padding:10px 0;min-height:64px;background:none;border:0;box-shadow:none;border-radius:0}
.logo,.volver{display:flex;align-items:center;gap:9px;text-decoration:none;font-family:"Gloock",serif;font-size:27px;letter-spacing:.01em;color:var(--tinta);padding:4px 2px;border-radius:6px}
.logo svg,.volver svg{width:28px;height:28px;flex:none}
.volver .flecha{font-family:"Figtree",sans-serif;font-size:18px;color:var(--tinta-2)}
.nav,.nav-fija,.nav-mini{display:flex;gap:2px;margin-left:8px;min-width:0}
.nav a,.nav-fija a,.nav-mini a{min-height:44px;display:inline-flex;align-items:center;padding:9px 12px;border-radius:6px;text-decoration:none;color:var(--tinta-2);font-weight:500;white-space:nowrap;transition:color .2s,background .2s}
.nav a:hover,.nav-fija a:hover,.nav-mini a:hover{color:var(--tinta);background:var(--hoja-2)}
.nav-mini a[aria-current="page"]{color:var(--tinta);box-shadow:inset 0 -2px 0 var(--oro)}
.derecha{margin-left:auto;display:flex;gap:8px;align-items:center;flex:none}
.idioma{display:flex;background:var(--hoja);border:1px solid var(--filete-2);border-radius:8px;padding:3px}
.idioma button{border:0;background:none;padding:7px 10px;border-radius:5px;cursor:pointer;color:var(--tinta-2);font-weight:600;font-size:14px;min-height:36px;min-width:42px}
.idioma{min-height:44px;align-items:stretch}
.idioma button:hover{color:var(--tinta)}
.idioma button[aria-pressed="true"]{background:var(--tinta);color:var(--crema)}
.icono-btn{width:44px;height:44px;border-radius:8px;border:1px solid var(--filete-2);background:var(--hoja);display:grid;place-items:center;cursor:pointer;color:var(--tinta);transition:transform .2s var(--resorte),background .2s}
.icono-btn:hover{background:var(--hoja-2)}
.icono-btn:active{transform:translateY(1px)}
.icono-btn svg{width:20px;height:20px}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:8px;text-decoration:none;font-weight:600;cursor:pointer;border:1px solid transparent;transition:transform .2s var(--resorte),box-shadow .2s,background .2s}
.btn:active{transform:translateY(1px)}
.btn-oro{background:var(--oro);color:var(--tinta);border-color:#A9761F;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(120,70,0,.28),0 6px 14px -8px rgba(138,90,18,.6)}
.btn-oro:hover{background:#E2B04F}
.btn-cristal,.btn-linea{background:transparent;color:var(--tinta);border-color:var(--tinta)}
.btn-cristal:hover,.btn-linea:hover{background:var(--tinta);color:var(--crema)}

/* ---------- Secciones y textos ---------- */
.titulo-seccion,.seccion h2.titulo{font-family:"Gloock",serif;font-weight:400;color:var(--tinta)}

/* ---------- Publicidad ---------- */
.anuncio{min-height:100px;border-radius:6px;border:1px dashed var(--filete-2);display:grid;place-items:center;color:var(--tinta-3);font-size:13px;background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(28,34,56,.025) 10px 20px)}

/* ---------- Aviso flotante ---------- */
.toast .bandeja{padding:0}
.toast .placa{background:var(--tinta);color:var(--crema);border-color:var(--tinta);box-shadow:0 14px 30px -14px rgba(14,19,40,.7)}
.toast b,.toast strong{color:var(--oro-claro)}

/* ---------- Estadísticas de los juegos ---------- */
.stats div{background:var(--hoja-2);border:1px solid var(--filete);border-radius:6px}
.stats b{color:var(--tinta)}
.stats span{color:var(--tinta-2)}
.dist .f{color:var(--tinta-2)}
.dist .barra-d{background:var(--tinta);color:var(--crema);border-radius:4px}
.dist .hoy .barra-d{background:var(--oro);color:var(--tinta)}
.proximo{color:var(--tinta-2)}
.proximo b{color:var(--tinta)}
.practica-aviso{background:var(--hoja-2)!important;border:1px solid var(--filete-2)!important;color:var(--tinta)}

/* ---------- Pie ---------- */
.pie,.pie-sitio{border-top:3px double var(--tinta)!important;color:var(--tinta-2)}
.pie a:hover,.pie-sitio a:hover{color:var(--tinta)}

/* ---------- Interruptor ---------- */
.interruptor{appearance:none;-webkit-appearance:none;width:50px;height:28px;border-radius:28px;background:var(--hoja-2);border:1px solid var(--filete-2);position:relative;cursor:pointer;flex:none;margin:0;transition:background .25s}
.interruptor::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:var(--hoja);border:1px solid var(--filete-2);box-shadow:0 1px 2px rgba(28,34,56,.3);transition:transform .3s var(--resorte)}
.interruptor:checked{background:var(--tinta)}
.interruptor:checked::after{transform:translateX(22px);background:var(--oro)}
.interruptor:disabled{cursor:not-allowed;opacity:.6}

@media (max-width:560px){
  .barra .placa{gap:6px}
  .logo,.volver{font-size:23px}
  .volver .flecha{display:none}
}
/* Pestañas: en pantallas angostas pasan a una segunda fila que se desliza */
@media (max-width:860px){
  .barra .placa{flex-wrap:wrap;row-gap:0;padding-bottom:4px}
  .nav-mini,.nav-fija{order:3;flex:1 0 100%;margin:0 0 4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:2px}
  .nav-mini::-webkit-scrollbar,.nav-fija::-webkit-scrollbar{display:none}
  .nav-mini a,.nav-fija a{padding:6px 11px;min-height:40px;flex:none}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* =========================================================
   TEMA 2 · Cósmico (el diseño original)
   Se activa con <html data-tema="cosmico">
   ========================================================= */
html[data-tema="cosmico"]{
  --papel:#070814;--hoja:rgba(28,25,70,.66);--hoja-2:rgba(255,255,255,.07);
  --tinta:#EEF0FF;--tinta-2:#A9ACD8;--tinta-3:#8E91C2;
  --filete:rgba(255,255,255,.10);--filete-2:rgba(255,255,255,.20);
  --oro:#FFD27A;--oro-claro:#FFD27A;--oro-tinta:#FFD27A;
  --noche:#141233;--noche-2:#0B0A22;--crema:#EEF0FF;
  --azul:#5EE6FF;--bermellon:#FF8FB0;
  color-scheme:dark;
}
html[data-tema="cosmico"] body{background:
  radial-gradient(60vmax 42vmax at 0% 0%,rgba(123,92,255,.30),transparent 70%),
  radial-gradient(52vmax 40vmax at 100% 45%,rgba(94,230,255,.13),transparent 70%),
  radial-gradient(46vmax 34vmax at 40% 105%,rgba(255,120,190,.10),transparent 70%),#070814;background-attachment:fixed}
html[data-tema="cosmico"] body::before{opacity:.07;mix-blend-mode:overlay}
html[data-tema="cosmico"] .placa{background:linear-gradient(180deg,rgba(32,29,78,.62),rgba(16,14,44,.62));border-color:rgba(255,255,255,.10);border-radius:18px;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.16),0 18px 40px -18px rgba(0,0,0,.7);backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25)}
html[data-tema="cosmico"] .lamina{background:radial-gradient(120% 90% at 50% 0%,rgba(123,92,255,.22),rgba(10,9,30,.85));border-color:rgba(255,255,255,.10);border-radius:18px;box-shadow:inset 0 1px 1px rgba(255,255,255,.14),0 18px 40px -18px rgba(0,0,0,.7)}
html[data-tema="cosmico"] .barra{background:rgba(7,8,20,.86)}
html[data-tema="cosmico"] .barra::after{border-bottom:1px solid rgba(255,255,255,.12)}
html[data-tema="cosmico"] .barra .placa{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0}
html[data-tema="cosmico"] .idioma button[aria-pressed="true"]{background:rgba(255,255,255,.14);color:#EEF0FF}
html[data-tema="cosmico"] .btn-oro{background:#FFD27A;color:#1B1206;border-color:transparent;border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(120,70,0,.35),0 10px 30px -10px rgba(255,210,122,.6)}
html[data-tema="cosmico"] .btn-cristal,html[data-tema="cosmico"] .btn-linea{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);border-radius:16px;color:#EEF0FF}
html[data-tema="cosmico"] .btn-cristal:hover,html[data-tema="cosmico"] .btn-linea:hover{background:rgba(255,255,255,.14);color:#EEF0FF}
html[data-tema="cosmico"] .toast .placa{background:rgba(24,21,60,.96);color:#EEF0FF}
html[data-tema="cosmico"] .dist .barra-d{background:rgba(255,255,255,.12);color:#EEF0FF}
html[data-tema="cosmico"] .dist .hoy .barra-d{background:linear-gradient(90deg,#E9B24F,#FFD27A);color:#2A1A02}
html[data-tema="cosmico"] .pie,html[data-tema="cosmico"] .pie-sitio{border-top:1px solid rgba(255,255,255,.12)!important}
html[data-tema="cosmico"] .interruptor:checked{background:rgba(255,210,122,.55)}
html[data-tema="cosmico"] .saltar{background:#FFD27A;color:#1B1206}
html[data-tema="cosmico"] :focus-visible{outline-color:#FFD27A}
html[data-tema="cosmico"] ::selection{background:#7B5CFF;color:#fff}

/* Botón de tema (lo agrega aster.js) */
#btn-tema .luna{display:none}
html[data-tema="cosmico"] #btn-tema .sol{display:none}
html[data-tema="cosmico"] #btn-tema .luna{display:block}
@media (max-width:560px){
  .barra .idioma button[aria-pressed="true"]{display:none}
}

/* Variables propias de cada página, en el tema cósmico */
html[data-tema="cosmico"]{
  /* Palabra cósmica */
  --ficha-vacia:rgba(0,0,0,.28);--ficha-vacia-texto:#EEF0FF;--ficha-vacia-borde:rgba(255,255,255,.14);--ficha-llena-borde:rgba(255,255,255,.45);--ficha-hundida:rgba(0,0,0,.45);
  --ficha-bien-texto:#2A1A02;--ficha-bien-borde:transparent;--ficha-bien-hover:#FFE3A6;
  --ficha-casi:#5EE6FF;--ficha-casi-texto:#04232C;--ficha-casi-borde:transparent;--ficha-casi-hover:#8AF2FF;--ficha-casi-nota:#04232C;
  --ficha-no:#24224D;--ficha-no-texto:rgba(200,202,240,.62);--ficha-no-borde:transparent;--ficha-no-hover-borde:rgba(255,255,255,.3);
  --tecla:rgba(255,255,255,.11);--tecla-hover:rgba(255,255,255,.18);--tecla-texto:#EEF0FF;--tecla-borde:transparent;--tecla-canto:rgba(0,0,0,.35);--tecla-nota:#FFD27A;
  /* ¿Qué planeta soy? */
  --qp-hundido:rgba(0,0,0,.45);--qp-relieve:rgba(0,0,0,.35);
  /* Constelación oculta */
  --sombra-campo:rgba(0,0,0,.45);
  /* Blog */
  --sombra-entrada-hover:0 18px 40px -18px rgba(0,0,0,.8);--sombra-cta:0 18px 40px -18px rgba(0,0,0,.7);
}

/* Sin anuncios por ahora: los espacios reservados no se muestran.
   Para activarlos cuando exista la cuenta de AdSense, añade data-anuncios a <html> (o quita esta regla). */
html:not([data-anuncios]) .anuncio{display:none!important}

/* Bloques de un solo idioma dentro de una página bilingüe (el armado borra el del otro idioma) */
html[lang="es"] .t-en,html[lang="en"] .t-es{display:none}
.pie-legal a{white-space:nowrap}