/* =====================================================================
   TRONO DEL PLATA — capa de arte
   Se carga DESPUES de estilo.css y solo agrega. No pisa la estructura,
   asi que ninguna pagina existente se rompe si esto se saca.

   Direccion: luz dorada calida sobre penumbra azul. Contraluz siempre.
   Piedra, niebla, brasas. Epico sobrio, nunca arcade.
   ===================================================================== */

/* Alias sobre css/base.css: los hex viven alla, aca solo los nombres viejos.
   --sombra-honda ya la define base.css y se usa tal cual (se saco de aca para
   no tener el mismo valor escrito dos veces). Pendiente: --vidrio y
   --vidrio-borde siguen con rgba() a mano porque son composiciones, no
   primitivas; entran cuando se unifique la paleta. */
:root{
  --oro-vivo:var(--c-oro-vivo);
  --violeta:var(--c-violeta);
  --vidrio:rgba(17,23,34,.62);
  --vidrio-borde:rgba(216,162,74,.16);
}

/* ---------------------------------------------------------------- fondo */
/* Una veladura fija detras de todo: el sitio deja de ser un rectangulo
   plano y pasa a tener profundidad, sin costo de red. */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(ellipse 1100px 600px at 50% -10%, rgba(216,162,74,.07), transparent 65%),
    radial-gradient(ellipse 800px 500px at 88% 108%, rgba(80,110,170,.07), transparent 70%),
    var(--fondo);
}
/* grano finisimo: saca el aspecto de degradado digital */
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* D25: aca vivian el componente `.portada` (hero viejo con fondo, velo y
   escudo animado) y `.escudo-caja`. Los reemplazo `.portada-doc` (mas abajo
   en este archivo; se emite con portada_doc() de ambiente.php) y quedaron sin
   una sola referencia en php/js. Con ellos se fueron sus @keyframes propios
   -- respirar, girar-rayos, latir, destello --, que no usaba nadie mas.
   El escudito de la barra de arriba SI sigue vivo: esta justo aca abajo. */

/* el escudito de la barra de arriba */
body > header .marca img{
  width:38px;height:38px;object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(216,162,74,.28));
  transition:filter .25s, transform .25s;
}
body > header .marca:hover img{
  filter:drop-shadow(0 0 18px rgba(216,162,74,.55));
  transform:scale(1.06) rotate(-2deg);
}
.estado-linea{
  background:rgba(10,14,22,.72);backdrop-filter:blur(10px);
  border-color:rgba(216,162,74,.22);box-shadow:0 8px 28px rgba(0,0,0,.45);
}

/* brasas: 9 puntitos dorados que suben. Puro CSS, sin imagenes. */
.brasas{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.brasas i{
  position:absolute;bottom:-12px;width:3px;height:3px;border-radius:50%;
  background:var(--oro-vivo);box-shadow:0 0 8px 2px rgba(224,192,99,.55);
  animation:subir linear infinite;opacity:0;
}
@keyframes subir{
  0%  {transform:translateY(0) translateX(0) scale(.6);opacity:0}
  12% {opacity:.85}
  70% {opacity:.5}
  100%{transform:translateY(-460px) translateX(var(--dx,20px)) scale(1.1);opacity:0}
}
.brasas i:nth-child(1){left:6%;  animation-duration:15s;animation-delay:0s;  --dx:34px}
.brasas i:nth-child(2){left:19%; animation-duration:19s;animation-delay:3s;  --dx:-22px}
.brasas i:nth-child(3){left:31%; animation-duration:13s;animation-delay:6s;  --dx:18px}
.brasas i:nth-child(4){left:44%; animation-duration:21s;animation-delay:1.5s;--dx:-30px}
.brasas i:nth-child(5){left:57%; animation-duration:16s;animation-delay:8s;  --dx:26px}
.brasas i:nth-child(6){left:68%; animation-duration:23s;animation-delay:4s;  --dx:-16px}
.brasas i:nth-child(7){left:79%; animation-duration:14s;animation-delay:10s; --dx:30px}
.brasas i:nth-child(8){left:88%; animation-duration:18s;animation-delay:6.5s;--dx:-24px}
.brasas i:nth-child(9){left:95%; animation-duration:20s;animation-delay:2s;  --dx:14px}

/* ---------------------------------------------------------------- vidrio */
.franja,.tarjetas article,.tabla,.cierre,.formulario,.descarga,.nota-item,.aviso{
  background:var(--vidrio);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-color:var(--vidrio-borde);
}
.tarjetas article{
  position:relative;overflow:hidden;transition:transform .22s, border-color .22s, box-shadow .22s;
}
.tarjetas article::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(216,162,74,.55),transparent);
  opacity:.5;transition:opacity .22s;
}
.tarjetas article:hover{
  transform:translateY(-3px);border-color:rgba(216,162,74,.40);
  box-shadow:0 16px 40px rgba(0,0,0,.45);
}
.tarjetas article:hover::before{opacity:1}
.dato{background:transparent;transition:background .2s}
.dato:hover{background:rgba(216,162,74,.05)}
.dato .numero{text-shadow:0 0 22px rgba(216,162,74,.35)}

/* D20: aca vivia `.banda`, un corte de imagen a todo el ancho que quedo sin
   uso. Ademas de ser codigo muerto era un selector PELADO en un archivo
   compartido, y /rankings emite un `<path class="banda">` dentro de un SVG
   (rankings.php) -- o sea que le caia encima a un elemento que no era suyo.
   Ese path lo estiliza `.carta .grafico .banda` en css/rankings.css. */

/* ---------------------------------------------------------------- agenda */
.agenda{display:flex;flex-direction:column;gap:12px}
.evento{
  display:grid;grid-template-columns:56px 1fr auto;gap:18px;align-items:center;
  background:var(--vidrio);backdrop-filter:blur(12px);
  border:1px solid var(--vidrio-borde);border-radius:13px;padding:16px 20px;
  transition:border-color .2s, transform .2s;
}
.evento:hover{border-color:rgba(216,162,74,.38);transform:translateX(3px)}
.evento .marca-ev{
  width:56px;height:56px;border-radius:12px;display:grid;place-items:center;
  font-size:1.7rem;background:rgba(216,162,74,.08);
  border:1px solid rgba(216,162,74,.20);
}
.evento h3{margin:0 0 3px;font-size:1.06rem;color:var(--blanco)}
.evento .donde{color:var(--tenue);font-size:.84rem;margin:0}
.evento .donde b{color:var(--plata);font-weight:600}
.evento .cuando{text-align:right;white-space:nowrap}
.evento .reloj{
  display:block;font-family:var(--titulos);font-size:1.22rem;color:var(--oro-vivo);
  letter-spacing:.5px;font-variant-numeric:tabular-nums;
}
.evento .ritmo{display:block;font-size:.74rem;color:var(--tenue);
  text-transform:uppercase;letter-spacing:1.4px;margin-top:2px}
.evento.libre .reloj{color:var(--plata);font-size:1rem}
.evento.pronto{border-color:rgba(216,162,74,.55);
  box-shadow:0 0 0 1px rgba(216,162,74,.18), 0 12px 34px rgba(216,162,74,.10)}
.evento.pronto .reloj{color:#ffe9a8;text-shadow:0 0 18px rgba(224,192,99,.55)}

/* La pildora ".proximo" de la portada vieja vivia aca y ya no la emite ningun
   PHP. Ademas era un selector PELADO (misma familia de bug que header{}): le
   pegaba al .tdp-tier.proximo del roadmap de la landing y le acostaba el
   titulo "Proximo" al costado. Borrada 2026-08-21. */

/* ---------------------------------------------------------------- retrato */
.retrato{
  display:grid;grid-template-columns:190px 1fr;gap:26px;align-items:center;
  background:var(--vidrio);backdrop-filter:blur(14px);
  border:1px solid var(--vidrio-borde);border-radius:14px;padding:24px;
}
.retrato img{
  width:190px;height:190px;object-fit:cover;border-radius:12px;
  border:1px solid rgba(216,162,74,.25);
  box-shadow:0 14px 36px rgba(0,0,0,.5);
}
.retrato h3{color:var(--oro);margin:0 0 8px;font-size:1.15rem}
.retrato p{color:var(--tenue);font-size:.94rem;margin:0 0 10px}
.retrato .cita{
  color:var(--plata);font-style:italic;border-left:2px solid rgba(216,162,74,.4);
  padding-left:14px;margin:0;
}

/* ---------------------------------------------------------------- corona */
.corona{
  position:relative;margin:0 -24px 52px;overflow:hidden;
  border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);
}
.corona img{width:100%;display:block;opacity:.85;
  max-height:380px;object-fit:cover;object-position:50% 42%}
.corona::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,var(--fondo) 0%,transparent 26%,transparent 62%,var(--fondo) 100%);
}
.corona .texto{
  position:absolute;inset:0;z-index:2;display:grid;place-content:center;
  text-align:center;padding:0 24px;
}
.corona .texto h2{
  border:0;font-size:1.7rem;font-family:var(--titulos);color:var(--blanco);
  text-transform:none;letter-spacing:1px;margin:0 0 8px;
  text-shadow:0 3px 26px rgba(0,0,0,.9);
}
.corona .texto p{color:#b9c1cf;margin:0;text-shadow:0 2px 16px rgba(0,0,0,.9);font-size:.96rem}
.corona .rey{color:var(--violeta);font-weight:700;text-shadow:0 0 20px rgba(200,110,255,.5)}

/* ---------------------------------------------------------------- pie */
footer{position:relative;background:rgba(6,9,14,.6)}
footer a{color:var(--oro);text-decoration:none}
footer a:hover{text-decoration:underline}


/* ---------------------------------------------------------------- desborde */
/* En movil la portada se desbordaba 146 px hacia la derecha: la tabla de
   ranking tiene min-width 520 y, como hija de un grid, no se dejaba achicar
   (min-width:auto), asi que el overflow-x del contenedor nunca entraba a
   jugar. Esto lo destraba. Venia de antes de la capa de arte. */
.dos-columnas > *{min-width:0}
.tabla-desliza{max-width:100%}
/* D19: aca habia un `main{overflow-x:clip}` que igual perdia contra el
   `main{overflow-x:visible}` de NC1, mas abajo. El recorte real lo hace
   `html{overflow-x:clip}`, tambien en NC1. Un solo lugar, no dos. */

/* ---------------------------------------------------------------- movil */
@media(max-width:760px){
  .retrato{grid-template-columns:1fr;justify-items:center;text-align:center}
  .retrato .cita{border-left:0;border-top:2px solid rgba(216,162,74,.4);
    padding:12px 0 0;margin-top:4px}
  .evento{grid-template-columns:44px 1fr;gap:14px;padding:14px 16px}
  .evento .marca-ev{width:44px;height:44px;font-size:1.35rem}
  .evento .cuando{grid-column:1 / -1;text-align:left;padding-left:58px;margin-top:-6px}
  .evento .reloj{display:inline;font-size:1.05rem}
  .evento .ritmo{display:inline;margin-left:8px}
}
@media(max-width:640px){
  .corona{margin:0 -14px 38px}
  .corona .texto h2{font-size:1.2rem}
}

/* ---------------------------------------------------------------- respeto */
@media(prefers-reduced-motion:reduce){
  .brasas i,.proximo .punto-ev{animation:none}
  .tarjetas article,.evento{transition:none}
}


/* ===== pulido medido en navegador (NC1) ===== */

/* 1. Recorte horizontal. El clip va en <html> y no en <main>: si lo pone
      <main>, el propio main recorta cualquier bloque que sangre fuera de
      su caja de 1020px. Este es el UNICO main{overflow-x} del archivo (D19).
      D25: las reglas de sangria de `.portada` que vivian aca se fueron con
      el componente; `.portada-doc` sangra con su propio margin negativo. */
html{overflow-x:clip}
main{overflow-x:visible}

/* 2. Contraste. Medido contra #080b11, que es el fondo real.
      Antes: pie 2.51 y grises 4.18. El minimo AA es 4.5.
      Ahora:  pie 6.38 y grises 5.51, sin perder la jerarquia. */
.tenue,.alfa-nota,.evento .donde,.evento .ritmo{color:#7f8898}
footer{color:#8b93a3}

/* 3. Blancos para el dedo: estos enlaces median 15-17 px de alto. */
.mas a,footer a,.cierre a:not(.boton){
  display:inline-block;padding:5px 2px;min-height:24px;
}

/* 4. La tabla del ranking pedia 520 px dentro de una columna de 498 y
      sacaba barra horizontal en escritorio. En pantalla ancha no hace
      falta ancho minimo; en celular se lo dejamos, ahi si sirve. */
@media (min-width:900px){ .tabla-desliza .tabla{min-width:0} }

/* ===== celular, medido en un marco de 390 px (ND2) ===== */
@media (max-width:560px){
  /* La cabecera es pegajosa: cada pixel que ocupa lo ocupa siempre.
     De 150 px a 125 apretando tipografia, separacion y el escudo. */
  body > header{padding:7px 12px}
  body > header .marca img{width:30px;height:30px}
  body > header .marca span{font-size:.95rem}
  header nav{gap:9px 11px;row-gap:2px}
  header nav a{font-size:.83rem;padding:5px 0;min-height:24px}

  /* "1 / persona" se partia al medio. */
  .estado-linea{gap:6px 10px;font-size:.86rem}
  .estado-linea > *{white-space:nowrap}

  /* El ranking de la portada pedia 520 px en una pantalla de 375 y el
     NIVEL y los RESETS quedaban fuera de la pantalla. Se esconde la
     columna Clase (que es la que menos importa) y entran las cuatro
     que si importan, sin scroll lateral. En /rankings no se toca:
     ahi la tabla es el contenido principal y el scroll tiene sentido. */
  .dos-columnas .tabla{min-width:0}
  .dos-columnas .tabla th:nth-child(3),
  .dos-columnas .tabla td:nth-child(3){display:none}
  .dos-columnas .tabla-desliza{overflow-x:visible}
}
/* ===== codigo de verificacion ===== */
/* Este numero se copia a mano en el Discord: grande, monoespaciado y con
   las letras separadas, para que nadie confunda un caracter con otro. */
.codigo-verif{
  display:block;margin:22px 0;padding:18px 10px;text-align:center;
  font:700 2rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.28em;text-indent:.28em;
  color:var(--oro-vivo,#e0c063);
  background:rgba(216,162,74,.07);
  border:1px dashed rgba(216,162,74,.38);border-radius:12px;
  user-select:all;
}
@media (max-width:560px){
  .codigo-verif{font-size:1.5rem;letter-spacing:.2em;text-indent:.2em}
}

/* ------------------------------------------------------- portada de seccion */
/* Cabezal de pagina con arte: reemplaza el <h1> pelado sobre fondo plano.
   Nace de un pedido de Rudi (2026-08-21): "no me gustan los fondos de color
   solido". El arte sale de las mismas escenas que ya usa el sitio, recortadas
   a banda en /img/portadas/. Se emite con portada_doc() (ambiente.php).
   (El viejo `.banda` que este comentario mencionaba se borro en D20.) */
.portada-doc{
  position:relative;margin:0 -24px 34px;min-height:250px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  border-bottom:1px solid var(--borde);
  isolation:isolate;
  /* Explicito y no heredado: este es un <header> y hasta el 2026-08-21 el
     selector pelado `header{}` de estilo.css le metia padding, gap, fondo y
     -lo grave- position:sticky con z-index:50, que lo hacia competir con la
     barra del sitio. Ese selector ya esta acotado a `body > header`; esto
     deja el cabezal parado solo por si alguien vuelve a tocarlo. */
  padding:0;gap:0;flex-wrap:nowrap;
  background:none;backdrop-filter:none;
}
.portada-doc img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-1;transform:scale(1.02);transition:transform 1.6s ease;
}
.portada-doc:hover img{transform:scale(1.05)}
/* Velo: oscurece de abajo hacia arriba para que el texto se lea sobre
   cualquier recorte, y funde el borde inferior con el fondo de la pagina. */
.portada-doc::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(8,11,17,.34) 0%, rgba(8,11,17,.10) 34%,
    rgba(8,11,17,.78) 76%, var(--fondo) 100%);
}
.portada-doc .texto{padding:0 24px 22px;max-width:62ch}
.portada-doc h1{
  margin:0 0 6px;color:var(--blanco);
  text-shadow:0 2px 20px rgba(0,0,0,.95);
}
.portada-doc .intro{
  margin:0;color:var(--plata);font-size:1rem;
  text-shadow:0 1px 12px rgba(0,0,0,.95);text-wrap:pretty;
}
@media (max-width:700px){
  .portada-doc{min-height:190px;margin:0 -24px 26px}
  .portada-doc .texto{padding:0 20px 18px}
}
@media (prefers-reduced-motion:reduce){
  .portada-doc img,.portada-doc:hover img{transition:none;transform:none}
}

/* --------------------------------------------------- destacado de la agenda */
/* Lo que "vende" un evento: garantias, multiplicadores y porcentajes. Lo
   envuelve agenda_destacar() en agenda.php, DESPUES de escapar el texto de la
   base. Pedido de Rudi 2026-08-21: "hay que vender bien los eventos". */
.evento .donde b.destaca,
.destaca{
  color:var(--oro-vivo, var(--c-oro-vivo, #e0c063));
  font-weight:700;
  white-space:nowrap;
}