/* Uraween 2026: Truco o Pan — web del concurso (28/9/2026, rediseño).
   Identidad: la tarjeta 3D de Dashiom (Blender 5.2): noche violeta, luna y calabazas naranjas, titular crema con contorno ciruela.
   Todas las medidas salen de los tokens de :root (espaciado 4/8). Un valor suelto lleva comentario con el motivo. */

/* ------------------------------------------------------------------ fuentes (autoalojadas, WOFF2) */
/* Luckiest Guy: la fuente del titular de la tarjeta (Apache 2.0). Nunito variable 400–800 (OFL). Ver /fuentes/LICENCIAS.txt */
@font-face {
  font-family: "Luckiest Guy"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fuentes/luckiest-guy-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Luckiest Guy"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fuentes/luckiest-guy-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/fuentes/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/fuentes/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ tokens */
:root {
  color-scheme: dark;
  /* color: sacado de la tarjeta (contrastes medidos sobre --noche) */
  --noche: #120a1f;          /* fondo */
  --noche-2: #1b1030;        /* paneles */
  --noche-3: #26173f;        /* tarjetas, zonas elevadas */
  --crema: #f6e7ce;          /* texto (relleno del titular) · 16:1 */
  --lavanda: #bba7dd;        /* texto secundario · 8.9:1 */
  --calabaza: #ff7a1f;       /* acento y botón principal · 7.4:1 */
  --calabaza-clara: #ff9447; /* hover del botón principal */
  --tinta: #1a0b05;          /* texto sobre calabaza o luna · 7:1 */
  --ciruela: #5b2e91;        /* sombra y canto de botones y titulares (decorativo) */
  --contorno: #7a45c0;       /* contorno de los titulares · 3.2:1 (el ciruela de la tarjeta, 2:1, casi no se ve sobre la noche) */
  --violeta: #8a5bc9;        /* bordes de controles · 4:1 */
  --luna: #f4b45e;           /* dorado: enlaces, destacados, ganador · 10:1 */
  --plata: #cfc8dd;          /* 2.º puesto */
  /* 3.º puesto, cobre. 29/9 (Dashiom: "¿por qué el top 3 tiene el mismo dorado que el top 1?"): antes #d99058, que junto al dorado
     de la luna se leía igual; ahora el borde es cobre oscuro y el texto cobre claro, claramente otro metal */
  --bronce: #dca283;         /* texto y medalla · 8.2:1 sobre --noche-2 */
  --bronce-borde: #9b5d3a;   /* borde de la tarjeta · 3.5:1 sobre --noche-2 */
  --error: #ff7b7b;
  --exito: #93e07f;
  /* espaciado (escala 4/8) */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px;
  /* tipografía: 6 tamaños (los grandes, fluidos con rem + vw) */
  --f-titulo: "Luckiest Guy", "Nunito", system-ui, sans-serif;
  --f-texto: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-lg: 1.125rem;
  --t-xl: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
  --t-2xl: clamp(1.875rem, 1.3rem + 2.4vw, 3rem);
  --t-3xl: clamp(2.25rem, 1.5rem + 3.6vw, 4rem);
  --i-texto: 1.6;
  --i-titulo: 1.1;
  /* radios y sombras */
  --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-full: 999px;
  --sombra-1: 0 2px 8px rgb(0 0 0 / .35);
  --sombra-2: 0 16px 40px rgb(0 0 0 / .5);
  /* maquetación */
  --contenedor: 1200px;
  --margen: clamp(16px, 4vw, 48px);
  --alto-cabecera: 64px;
  --duracion: 200ms;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-cabecera) + var(--e-4));
  scrollbar-gutter: stable;   /* al abrir el visor (overflow: hidden) la página no salta de lado */
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100svh; background: var(--noche); color: var(--crema);
  font-family: var(--f-texto); font-size: var(--t-base); line-height: var(--i-texto); -webkit-font-smoothing: antialiased;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p { overflow-wrap: break-word; }
a { color: var(--luna); text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--luna); outline-offset: 3px; }
[hidden] { display: none !important; }   /* !important: que ninguna regla de display gane a hidden */
.solo-lector {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; z-index: 60; left: var(--e-4); top: var(--e-2); padding: var(--e-2) var(--e-4); border-radius: var(--r-sm);
  background: var(--luna); color: var(--tinta); font-weight: 800; transform: translateY(-200%);
}
.saltar:focus { transform: none; }
.contenedor { width: 100%; max-width: var(--contenedor); margin-inline: auto; padding-inline: var(--margen); }
.icono { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Luckiest Guy tiene minúsculas con otra forma ("e", "n"): en la tarjeta todo va en mayúsculas, aquí también. */
.titular, .boton, .marca, .horno__nombre, .premio__monto, .cuenta__digitos b, .cifras b, .medalla, .pasos li::before { text-transform: uppercase; }
/* Titular de sección con el contorno ciruela del titular de la tarjeta (efecto pegatina).
   Técnica: -webkit-text-stroke al doble del grosor visible + paint-order: stroke fill (el relleno tapa la mitad interior del
   trazo y queda solo el contorno de fuera). Sigue siendo texto real (lectores de pantalla, varias líneas).
   Fuentes: https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order · https://css-tricks.com/adding-stroke-to-web-text/ ·
   https://github.com/mdn/browser-compat-data/issues/17951 (Firefox sí lo aplica a texto HTML).
   Soporte: Chrome/Edge 123+, Firefox 60+, Safari 11+; en Chromium más viejo el trazo queda centrado (letra algo más fina, legible).
   Descartado text-shadow en 8 direcciones: con este grosor deja el borde escalonado. Verificado con el QA en Chromium, WebKit y
   Firefox el 28/9/2026. */
.titular {
  margin: 0; font-family: var(--f-titulo); font-weight: 400; line-height: var(--i-titulo); letter-spacing: .03em; color: var(--crema);
  text-wrap: balance;
  -webkit-text-stroke: .12em var(--contorno);   /* se ven .06em por fuera */
  paint-order: stroke fill;
  text-shadow: 0 .1em 0 var(--ciruela), 0 .16em .32em rgb(0 0 0 / .45);   /* canto de la pegatina + sombra, como en la tarjeta */
}
h2.titular { font-size: var(--t-2xl); }
.bajada { margin: var(--e-3) 0 0; max-width: 65ch; color: var(--lavanda); font-size: var(--t-lg); text-wrap: pretty; }

/* ------------------------------------------------------------------ botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 48px; padding: var(--e-3) var(--e-5); border: 2px solid transparent; border-radius: var(--r-full);
  background: var(--calabaza); color: var(--tinta); box-shadow: 0 4px 0 var(--ciruela);
  font-family: var(--f-titulo); font-size: var(--t-lg); line-height: 1; letter-spacing: .03em; text-decoration: none; cursor: pointer;
  transition: background-color var(--duracion), transform var(--duracion), box-shadow var(--duracion);
}
.boton:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ciruela); }
.boton--secundario { background: rgb(18 10 31 / .72); color: var(--crema); border-color: var(--violeta); box-shadow: none; }
.boton--secundario:active { box-shadow: none; }
.boton--chico { min-height: 44px; padding: var(--e-2) var(--e-4); font-size: var(--t-base); }
.boton[disabled], .boton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--crema); }
  .boton:hover { background: var(--calabaza-clara); color: var(--tinta); }
  .boton--secundario:hover { background: var(--noche-3); color: var(--crema); border-color: var(--luna); }
}

/* ------------------------------------------------------------------ cabecera */
.cabecera {
  position: sticky; top: 0; z-index: 40; background: rgb(18 10 31 / .92); border-bottom: 1px solid rgb(138 91 201 / .3);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cabecera { background: rgb(18 10 31 / .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
.cabecera__dentro { display: flex; align-items: center; gap: var(--e-3); min-height: var(--alto-cabecera); }
.marca {
  display: inline-flex; align-items: center; gap: var(--e-2); flex: none; min-height: 44px; min-width: 44px;
  color: var(--crema); font-family: var(--f-titulo); font-size: var(--t-xl); line-height: 1; letter-spacing: .03em; text-decoration: none;
}
.marca img { width: 36px; }
.marca span { padding-top: .12em; }   /* Luckiest Guy trae la línea base alta: la baja para alinear con la calabaza */
.menu { display: flex; gap: var(--e-1); margin-inline-start: auto; }
.menu a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--e-3); border-radius: var(--r-full);
  color: var(--crema); font-weight: 800; text-decoration: none; white-space: nowrap;
}
.menu a[aria-current="page"] { background: rgb(255 122 31 / .18); color: var(--luna); }
@media (hover: hover) and (pointer: fine) { .menu a:hover { background: var(--noche-3); color: var(--crema); } }
.cabecera .boton { flex: none; }
@media (max-width: 719px) {
  .cabecera .boton { display: none; }         /* en móvil el botón al Discord ya está en la portada y en el pie */
  .menu__largo { display: none; }
  .menu a { padding-inline: var(--e-2); }
}
@media (max-width: 439px) { .marca span { display: none; } }   /* en móvil queda la calabaza (el nombre ya está en la portada) */

/* ------------------------------------------------------------------ portada: la tarjeta, viva */
/* 29/9 (Dashiom: "mucho aire, mucho espacio vacío abajo"): el contenido va centrado en la altura libre de la escena (entre la
   cabecera y el suelo con los personajes). Lo que llega con los datos no lo mueve: las cifras ocupan su sitio desde el principio
   (invisibles hasta que hay dibujos) y la cuenta atrás tiene alto fijo, así que no hay saltos (CLS). */
.escena {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; justify-items: center; align-content: center; min-height: min(calc(100svh - var(--alto-cabecera)), 880px);
  padding: var(--e-7) var(--margen) calc(clamp(148px, 17vw, 260px) + var(--e-5));   /* abajo: sitio para el suelo con los personajes */
  text-align: center;
}
.escena__fondo { position: absolute; inset: 0; z-index: -2; }
.escena__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 45%; }
.escena::before {   /* velo para que el texto se lea sobre la escena */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 48%, rgb(18 10 31 / .72), rgb(18 10 31 / .2) 70%, transparent);
}
/* La escena se funde con el fondo de la página. 28/9 (Dashiom: "que no se note esa línea que corta la imagen"): antes eran 96 px de
   degradado lineal y en pantallas anchas se veía el corte. Ahora ocupa el 45 % de abajo de la escena y va con curva (arranca muy
   suave y termina en el color exacto del fondo), así no hay borde.
   Técnica: degradado con curva ("easing gradient") · Fuente: https://css-tricks.com/easing-linear-gradients/ (paradas de su "scrim",
   al revés: de transparente a opaco) y https://ishadeed.com/article/css-masking/ · Verificado: Chrome/Safari/Firefox, 28/9/2026. */
.escena::after {
  content: ""; position: absolute; inset: auto 0 0; height: max(45%, 160px); z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgb(18 10 31 / 0) 0%, rgb(18 10 31 / .002) 1.8%, rgb(18 10 31 / .008) 4.8%, rgb(18 10 31 / .021) 9%, rgb(18 10 31 / .042) 13.9%,
    rgb(18 10 31 / .075) 19.8%, rgb(18 10 31 / .126) 27%, rgb(18 10 31 / .194) 35%, rgb(18 10 31 / .278) 43.5%,
    rgb(18 10 31 / .382) 53%, rgb(18 10 31 / .541) 66%, rgb(18 10 31 / .738) 81%, var(--noche) 100%);   /* rgb(18 10 31) = --noche */
}
.escena__contenido {
  position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--e-5);
  width: 100%; max-width: 880px;
}
.escena__titulo { margin: 0; width: min(100%, 780px); }
.escena__titulo img { width: 100%; filter: drop-shadow(0 8px 24px rgb(0 0 0 / .55)); }
.acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-3); }

.cuenta {
  min-width: min(100%, 22rem);   /* mismo ancho con cualquier texto: no se corre de lado al llegar los datos */
  display: grid; justify-items: center; gap: var(--e-2); padding: var(--e-4) var(--e-5); border-radius: var(--r-md);
  background: rgb(18 10 31 / .78); border: 1px solid rgb(138 91 201 / .55); box-shadow: var(--sombra-2);
}
.cuenta__que, .cuenta__cuando { margin: 0; }
.cuenta__que { font-weight: 800; color: var(--luna); }
.cuenta__cuando { font-size: var(--t-sm); color: var(--lavanda); }
/* mismo alto con números o con el mensaje final (número 1.1 × --t-2xl + etiqueta 1.6 × --t-sm): nada salta al llegar los datos */
.cuenta__digitos, .cuenta__fin { height: calc(var(--t-2xl) * 1.1 + var(--t-sm) * 1.6); }
.cuenta__digitos { display: flex; justify-content: center; gap: var(--e-2); }
.cuenta__digitos > div { display: grid; justify-items: center; min-width: var(--e-8); }
@media (max-width: 359px) {   /* 320 px: los cuatro números caben sin empujar la columna */
  .cuenta { padding-inline: var(--e-4); }
  .cuenta__digitos > div { min-width: var(--e-7); }
}
.cuenta__digitos b { font-family: var(--f-titulo); font-weight: 400; font-size: var(--t-2xl); line-height: 1; padding-top: .1em; }
.cuenta__digitos span { font-size: var(--t-sm); color: var(--lavanda); }
/* sin hito por delante (terminó): el mismo alto que los números, para que nada salte al llegar los datos */
.cuenta__fin { display: grid; place-items: center; margin: 0; font-family: var(--f-titulo); font-size: var(--t-xl); line-height: var(--i-titulo); text-transform: uppercase; }

.cifras { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-5); margin: 0; padding: 0; list-style: none; }
.cifras--vacias { visibility: hidden; }   /* sin dibujos aún: invisible pero ocupando su sitio (nada salta cuando aparecen) */
.cifras li { display: grid; justify-items: center; color: var(--lavanda); font-size: var(--t-sm); font-weight: 700; }
.cifras b { font-family: var(--f-titulo); font-weight: 400; font-size: var(--t-xl); line-height: 1.2; color: var(--crema); }

/* 28/9 noche: el suelo sube --e-5 sobre el borde de abajo: si no, los pies de los personajes (y su sombra) se cortaban en línea
   recta justo donde la escena se funde con la página */
.escena__suelo {
  position: absolute; z-index: 2; inset: auto 0 var(--e-5); display: flex; align-items: flex-end; gap: var(--e-2);
  max-width: 1560px; margin-inline: auto; padding-inline: clamp(8px, 3vw, 64px); pointer-events: none;
}
.sprite { filter: drop-shadow(0 12px 16px rgb(0 0 0 / .5)); }
.sprite--perikote { width: clamp(92px, 12vw, 220px); margin-bottom: var(--e-2); }
.sprite--calabaza2 { width: clamp(58px, 7vw, 140px); margin-inline-start: auto; }
.sprite--calabaza { width: clamp(104px, 14vw, 260px); }
.sprite--yuu { width: clamp(80px, 10vw, 196px); }
.sprite--fantasma {
  position: absolute; z-index: 1; top: clamp(8px, 4vw, 96px); right: clamp(8px, 7vw, 200px); width: clamp(40px, 7vw, 124px);
}
/* En pantallas anchas los personajes viven en los costados (fuera de la columna del texto) y la escena entera cabe en la
   primera pantalla; en móvil y tablet forman el "suelo" debajo de los botones. */
@media (min-width: 1280px) {
  .escena { padding-bottom: var(--e-8); }
  .escena__contenido { max-width: 760px; }
  .escena__titulo { width: min(100%, 700px); }
  .escena__suelo { padding-inline: var(--e-5); }
  /* anchos = fracción del costado libre ((100vw − columna de 760 px) / 2), para que nunca pisen el texto */
  .sprite--perikote { width: calc((100vw - 760px) / 2 * .56); max-width: 240px; }
  .sprite--calabaza2 { width: calc((100vw - 760px) / 2 * .28); max-width: 120px; margin-inline-start: 0; order: -1; }
  .sprite--calabaza { width: calc((100vw - 760px) / 2 * .5); max-width: 250px; margin-inline-start: auto; }
  .sprite--yuu { width: calc((100vw - 760px) / 2 * .34); max-width: 180px; }
}
@media (prefers-reduced-motion: no-preference) {
  .sprite--fantasma { animation: flotar 7s ease-in-out infinite; }
  .sprite--calabaza, .sprite--calabaza2 { animation: brillo 4s ease-in-out infinite alternate; }
  .sprite--calabaza2 { animation-delay: -2s; }
}
@keyframes flotar { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(3deg); } }
@keyframes brillo { from { filter: drop-shadow(0 12px 16px rgb(0 0 0 / .5)); } to { filter: drop-shadow(0 12px 16px rgb(0 0 0 / .5)) drop-shadow(0 0 18px rgb(255 122 31 / .45)); } }

/* ------------------------------------------------------------------ secciones */
/* solo espacio arriba (el de abajo lo pone la siguiente): así una sección oculta con [hidden] no deja a la de al lado pegada
   (con ".seccion + .seccion" la oculta del ganador contaba como hermana y el calendario quedaba pegado a la escena) */
.seccion { padding-top: var(--e-8); }
main > .seccion:last-of-type { padding-bottom: var(--e-8); }
/* 28/9 (Dashiom): la bajada va debajo del título (antes, en pantallas anchas, a la derecha y lejos de él) */
.seccion__cabeza { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-2); }
.seccion__cabeza .bajada { margin: 0; }
.panel { padding: var(--e-5); border-radius: var(--r-lg); background: var(--noche-2); border: 1px solid rgb(138 91 201 / .3); }

/* ------------------------------------------------------------------ calendario ("el horno") */
.horno { list-style: none; margin: var(--e-6) 0 0; padding: 0; display: grid; gap: var(--e-5); }
.horno__paso { position: relative; padding-inline-start: var(--e-7); }
.horno__paso::before {   /* línea que une los pasos */
  content: ""; position: absolute; left: 11px; top: var(--e-6); bottom: calc(-1 * var(--e-5)); width: 2px; background: rgb(138 91 201 / .5);
}
.horno__paso:last-child::before { display: none; }
.horno__punto {
  position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: var(--e-5); height: var(--e-5);
  border-radius: 50%; border: 2px solid var(--violeta); background: var(--noche); color: var(--tinta);
}
.horno__punto .icono { width: 14px; height: 14px; stroke-width: 3; }
.horno__paso.hecho .horno__punto { background: var(--violeta); }
.horno__paso[aria-current="step"] .horno__punto { background: var(--calabaza); border-color: var(--calabaza); box-shadow: 0 0 0 6px rgb(255 122 31 / .22); }
.horno__etapa { margin: 0; color: var(--luna); font-size: var(--t-sm); font-weight: 800; }
.horno__nombre { margin: 0; font-family: var(--f-titulo); font-weight: 400; font-size: var(--t-xl); line-height: var(--i-titulo); letter-spacing: .02em; }
.horno__cuando { margin: var(--e-1) 0 0; font-weight: 800; }
.horno__ahora {
  display: inline-block; margin-inline-start: var(--e-2); padding: 0 var(--e-2); border-radius: var(--r-full); vertical-align: middle;
  background: var(--calabaza); color: var(--tinta); font-family: var(--f-texto); font-size: var(--t-sm); font-weight: 800; line-height: 1.6;
}
.horno__ahora--delibera { background: var(--lavanda); }   /* 29/9: "Deliberando" (Urabread elige quién pasa) · texto 8.9:1 */
.horno__paso.hecho .horno__nombre, .horno__paso.hecho .horno__cuando { color: var(--lavanda); }
/* En la portada, con sitio, la línea va en horizontal (en las reglas la columna es angosta: siempre vertical). 28/9: 4 pasos.
   29/9 (Dashiom: el primer círculo iba pegado a la izquierda y el último quedaba lejos de la derecha): cada paso va centrado en su
   columna (círculo encima del texto) y la línea une el centro de un círculo con el del siguiente; los bordes quedan parejos. */
@media (min-width: 1100px) {
  .horno--ancho { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4); }
  .horno--ancho .horno__paso { padding: var(--e-7) 0 0; text-align: center; }
  .horno--ancho .horno__punto { top: 0; left: calc(50% - var(--e-5) / 2); }
  /* de este círculo (borde derecho) al siguiente (borde izquierdo), que está a media columna + el hueco + media columna */
  .horno--ancho .horno__paso::before {
    left: calc(50% + var(--e-5) / 2); right: calc(var(--e-5) / 2 - 50% - var(--e-4)); top: 11px; bottom: auto; width: auto; height: 2px;
  }
  .horno--ancho .horno__nombre { font-size: clamp(1.125rem, .6rem + .9vw, 1.5rem); }
}

/* ------------------------------------------------------------------ ganador y resultados */
.ganador {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); align-items: center; padding: var(--e-5); border-radius: var(--r-lg);
  background: radial-gradient(circle at 85% 10%, rgb(244 180 94 / .22), transparent 45%), var(--noche-2); border: 2px solid var(--luna);
}
.ganador__obra { margin: 0; }
.ganador__texto { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); justify-items: start; }
.ganador__texto h2 { font-size: var(--t-3xl); }
.ganador__rol { margin: 0; display: inline-flex; align-items: center; gap: var(--e-2); color: var(--luna); font-weight: 800; }
.ganador__rol img { width: 40px; }
.ganador__obra-titulo { margin: 0; font-size: var(--t-xl); font-weight: 800; }
.ganador__nota { margin: 0; color: var(--lavanda); }
@media (min-width: 900px) { .ganador { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: var(--e-6); } }
.podio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-2); width: 100%; }
.podio a {
  display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2) var(--e-3); border-radius: var(--r-md);
  background: rgb(18 10 31 / .5); color: var(--crema); text-decoration: none;
}
.podio img { width: var(--e-7); height: var(--e-7); border-radius: var(--r-sm); object-fit: cover; flex: none; }
.podio span { min-width: 0; }
.podio b, .podio small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podio small { color: var(--lavanda); font-size: var(--t-sm); }
.medalla {
  display: grid; place-items: center; flex: none; width: 32px; aspect-ratio: 1; border-radius: 50%;
  font-family: var(--f-titulo); color: var(--tinta); line-height: 1; padding-top: .12em;
}
.medalla--1 { background: var(--luna); } .medalla--2 { background: var(--plata); } .medalla--3 { background: var(--bronce); }

.resultados { display: grid; gap: var(--e-5); margin-top: var(--e-5); }
.tabla { border-radius: var(--r-lg); background: var(--noche-2); border: 1px solid rgb(138 91 201 / .3); overflow: hidden; }
.tabla h3 { margin: 0; padding: var(--e-4) var(--e-5) 0; font-size: var(--t-xl); }
.tabla > p { margin: var(--e-1) 0 0; padding: 0 var(--e-5); color: var(--lavanda); font-size: var(--t-sm); }
.tabla ol { list-style: none; margin: var(--e-3) 0 0; padding: 0 var(--e-2) var(--e-2); }
.fila {
  display: grid; grid-template-columns: var(--e-6) minmax(0, 1fr) repeat(3, var(--e-8)); align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-3); border-radius: var(--r-md); color: var(--crema); text-decoration: none;
}
.fila--cabeza { color: var(--lavanda); font-size: var(--t-sm); font-weight: 800; }
.fila--pasa { background: rgb(255 122 31 / .12); }
.fila__puesto { text-align: center; font-weight: 800; }
.fila__obra { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }
.fila__obra img { width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.fila__obra span { min-width: 0; }
.fila__obra b, .fila__obra small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila__obra small { color: var(--lavanda); font-size: var(--t-sm); }
.fila__num { text-align: end; font-variant-numeric: tabular-nums; }
.fila__cal { width: var(--e-5); margin-inline-start: auto; }   /* 29/9: cabecera de las columnas de calabazas (naranja y morada) */
.fila__total { color: var(--luna); font-weight: 800; }
@media (hover: hover) and (pointer: fine) { a.fila:hover { background: var(--noche-3); color: var(--crema); } }
@media (max-width: 559px) {
  .fila { grid-template-columns: var(--e-5) minmax(0, 1fr) var(--e-7) var(--e-7); font-size: var(--t-sm); }
  .fila .fila__jurado { display: none; }
  .fila__obra img { width: 36px; height: 36px; }
}

/* ------------------------------------------------------------------ galería */
.herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin-top: var(--e-5); }
/* Filtros de una sola opción = radios nativos con forma de "chip" (se anuncian "1 de 4, seleccionado", flechas para moverse).
   Fuentes: https://inclusive-components.design/toggle-button/ · https://adrianroselli.com/2019/08/under-engineered-toggles-too.html */
.chips { display: flex; flex-wrap: wrap; gap: var(--e-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.chip {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: var(--e-2) var(--e-4);
  border: 2px solid var(--violeta); border-radius: var(--r-full); color: var(--crema); font-weight: 800; cursor: pointer;
  transition: background-color var(--duracion);
}
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip:has(input:checked) { background: var(--calabaza); border-color: var(--calabaza); color: var(--tinta); }
.chip:has(input:focus-visible) { outline: 3px solid var(--luna); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .chip:not(:has(input:checked)):hover { background: var(--noche-3); } }
.campo-buscar { position: relative; flex: 1 1 240px; }
.campo-buscar .icono { position: absolute; left: var(--e-3); top: 50%; transform: translateY(-50%); color: var(--lavanda); pointer-events: none; }
.control {
  width: 100%; min-height: 44px; padding: var(--e-2) var(--e-3); border: 2px solid var(--violeta); border-radius: var(--r-md);
  background: var(--noche-2); color: var(--crema); font-size: var(--t-base);
}
.control::placeholder { color: var(--lavanda); opacity: 1; }
.campo-buscar .control { padding-inline-start: calc(var(--e-3) + 1.25em + var(--e-2)); }
.campo-orden { flex: 0 1 200px; }
select.control option { background: var(--noche-2); color: var(--crema); }

.cuadros {
  list-style: none; margin: var(--e-5) 0 0; padding: 0; display: grid; gap: var(--e-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
}
@media (min-width: 768px) { .cuadros { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--e-5); } }
.cuadro a {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--r-md);
  background: var(--noche-2); border: 2px solid rgb(138 91 201 / .4); color: var(--crema); text-decoration: none;
  transition: transform var(--duracion), border-color var(--duracion);
}
.cuadro__img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--noche-3); }
/* absoluta: si no, una imagen alta estira la caja (el alto automático de aspect-ratio cede ante el contenido) */
.cuadro__img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }   /* ">": solo el dibujo, no la calabaza de la pastilla */
.cuadro__img .cinta { z-index: 1; }
/* minmax(0, 1fr) en las columnas con texto que no parte (nowrap + ellipsis): si no, ese texto ensancha la columna */
.cuadro__texto { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-1); padding: var(--e-3); }
.cuadro__titulo {
  margin: 0; font-size: var(--t-base); font-weight: 800; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cuadro__artista { display: flex; align-items: center; gap: var(--e-2); margin: 0; min-width: 0; color: var(--lavanda); font-size: var(--t-sm); }
.cuadro__artista span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* las calabazas (votos) de un dibujo: la pieza 3D de la tarjeta + el número, en una pastilla arriba a la derecha del dibujo
   (como la cinta de la izquierda); abajo, el nombre del artista queda entero */
.calabazas {
  display: inline-flex; align-items: center; gap: var(--e-1); min-height: var(--e-5); padding: 0 var(--e-2) 0 var(--e-1);
  border-radius: var(--r-full); background: rgb(18 10 31 / .85); color: var(--crema); font-weight: 800; font-size: var(--t-sm); line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.calabazas img { width: 20px; height: auto; }
/* 29/9: debajo de las del público, las del jurado (la calabaza morada), solo si alguien del staff votó */
.cuadro__votos { position: absolute; z-index: 1; right: var(--e-2); top: var(--e-2); display: grid; justify-items: end; gap: var(--e-1); }
.cuadro__nota { margin: 0; color: var(--lavanda); font-size: var(--t-sm); font-style: italic; }
/* 28/9 noche: los que ya no compiten se apagan solo en el dibujo (antes toda la tarjeta al 60 % y los textos y la cinta quedaban sin
   contraste, lo vio el QA en «Más dibujos»); el borde punteado dice lo mismo sin depender del color */
.cuadro--fuera a { border-style: dashed; }
.cuadro--fuera .cuadro__img > img { opacity: .45; }
@media (hover: hover) and (pointer: fine) { .cuadro a:hover { transform: translateY(-2px); border-color: var(--calabaza); color: var(--crema); } }
.avatar { width: var(--e-5); height: var(--e-5); flex: none; border-radius: 50%; object-fit: cover; background: var(--noche-3); }
.cinta {
  display: inline-flex; align-items: center; min-height: var(--e-5); padding: 0 var(--e-2); border-radius: var(--r-full);
  background: var(--noche); color: var(--lavanda); font-size: var(--t-sm); font-weight: 800; line-height: 1.2;
}
.cuadro__img .cinta { position: absolute; left: var(--e-2); top: var(--e-2); }
.cinta--top { background: var(--calabaza); color: var(--tinta); }
.cinta--fin { background: var(--plata); color: var(--tinta); }
.cinta--gan { background: var(--luna); color: var(--tinta); }
.cinta--desc { background: var(--error); color: var(--tinta); }

.vacio { display: grid; justify-items: center; gap: var(--e-4); margin-top: var(--e-5); padding: var(--e-6) var(--e-5); text-align: center; }
.vacio img { width: clamp(96px, 20vw, 150px); }
.vacio p { margin: 0; max-width: 46ch; font-size: var(--t-lg); text-wrap: pretty; }

/* ------------------------------------------------------------------ premios */
.premios { list-style: none; margin: var(--e-6) 0 0; padding: 0; display: grid; gap: var(--e-4); }
.premio {
  display: grid; justify-items: center; align-content: start; gap: var(--e-2); padding: var(--e-5); text-align: center;
  border-radius: var(--r-lg); background: var(--noche-2); border: 2px solid var(--c, var(--violeta));
}
.premio img { width: var(--e-9); }
.premio__puesto { margin: 0; color: var(--c); font-weight: 800; }
.premio__monto { margin: 0; font-family: var(--f-titulo); font-weight: 400; font-size: var(--t-2xl); line-height: 1; padding-top: .1em; }
.premio__monto--rol { font-size: var(--t-xl); line-height: var(--i-titulo); text-wrap: balance; color: #b6e39a; }   /* 3.º: el nombre del rol (verde del rol Panetón Embrujado; 11:1 sobre --noche-2) */
.premio__mas { margin: 0; color: var(--lavanda); max-width: 34ch; }
.premio--1 { --c: var(--luna); background: radial-gradient(circle at 50% 0, rgb(244 180 94 / .2), transparent 60%), var(--noche-2); }
.premio--2 { --c: var(--plata); }
.premio--3 { --c: var(--bronce-borde); }
.premio--3 .premio__puesto { color: var(--bronce); }
@media (min-width: 900px) {
  .premios { grid-template-columns: 1fr 1.15fr 1fr; align-items: end; }
  .premio--1 { order: 2; padding-block: var(--e-7); }
  .premio--1 img { width: var(--e-10); }
  .premio--2 { order: 1; }
  .premio--3 { order: 3; }
}
.premios-todos { margin: var(--e-5) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); }
.premios-todos p { margin: 0; flex: 1 1 320px; }

/* ------------------------------------------------------------------ ficha de una obra */
.migas { padding-top: var(--e-5); }
.migas a { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 44px; font-weight: 800; text-decoration: none; }
.obra { display: grid; gap: var(--e-6); padding-block: var(--e-4) var(--e-8); }
.obra__marco { margin: 0; padding: var(--e-3); border-radius: var(--r-lg); background: var(--noche-2); border: 2px solid var(--violeta); box-shadow: var(--sombra-2); }
.ampliar {
  position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r-md); overflow: hidden;
  background: var(--noche-3); cursor: zoom-in;
}
.ampliar img { width: 100%; }
.ampliar__pista {
  position: absolute; right: var(--e-3); bottom: var(--e-3); display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: rgb(18 10 31 / .8); color: var(--crema);
}
.ampliar__pista .icono { width: 20px; height: 20px; }
.obra__ficha, .obra__col { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); align-content: start; }
.obra__ficha h1 { font-size: var(--t-2xl); }
/* 28/9 (Dashiom: "la ficha se ve exageradamente vacía"): las calabazas en grande con la pieza 3D, hasta dónde llegó el dibujo y,
   debajo de todo, más dibujos para seguir mirando */
.votos {
  display: flex; align-items: center; gap: var(--e-4); padding: var(--e-4) var(--e-5); border-radius: var(--r-lg);
  background: radial-gradient(circle at 12% 50%, rgb(255 122 31 / .22), transparent 60%), var(--noche-2); border: 1px solid rgb(138 91 201 / .3);
}
.votos--vivo { border-color: var(--calabaza); }
.votos img { width: var(--e-9); flex: none; filter: drop-shadow(0 8px 12px rgb(0 0 0 / .45)); }
.votos p { margin: 0; }
.votos__cifras { display: grid; gap: var(--e-2); }
.votos__n { font-weight: 800; }
.votos__n b { font-family: var(--f-titulo); font-weight: 400; font-size: var(--t-3xl); line-height: 1; color: var(--crema); font-variant-numeric: tabular-nums; }
.votos__n span { font-size: var(--t-lg); }
/* 29/9 (Dashiom): las del jurado debajo, con la calabaza morada, el número y un botón «?» a su regla; sin texto que diga qué son */
.votos__jurado { display: flex; align-items: center; gap: var(--e-2); }
.votos__jurado img { width: var(--e-7); flex: none; filter: drop-shadow(0 4px 8px rgb(0 0 0 / .45)); }
.votos__jurado b { font-family: var(--f-titulo); font-weight: 400; font-size: var(--t-xl); line-height: 1; padding-top: .1em; font-variant-numeric: tabular-nums; }
.jurado-mini { display: inline-flex; align-items: center; gap: var(--e-1); vertical-align: middle; }
.jurado-mini img { width: var(--e-5); }
/* botón redondo solo con icono (su nombre va en aria-label): el «?» de las calabazas del jurado y el ojo de la clave del panel */
.boton-icono {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 2px solid var(--violeta); border-radius: 50%;
  background: var(--noche-2); color: var(--crema); cursor: pointer; text-decoration: none; transition: border-color var(--duracion), color var(--duracion);
}
.boton-icono .icono { width: 20px; height: 20px; }
.boton-icono[aria-pressed="true"] { border-color: var(--luna); color: var(--luna); }
@media (hover: hover) and (pointer: fine) { .boton-icono:hover { border-color: var(--luna); color: var(--luna); } }
.recorrido { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-1); }
.recorrido__paso {
  display: grid; place-items: center; min-height: 44px; padding: var(--e-1) var(--e-2); border-radius: var(--r-full);
  background: var(--noche-2); color: var(--lavanda); font-size: var(--t-sm); font-weight: 800; text-align: center;
}
.recorrido__paso--hecho { background: rgb(138 91 201 / .35); color: var(--crema); }
.recorrido__paso--ahora { background: var(--calabaza); color: var(--tinta); }
@media (max-width: 379px) { .recorrido__paso { padding-inline: var(--e-1); font-size: .75rem; } }   /* 320 px: "Semifinal" cabe en su pastilla */
.mas { padding-bottom: var(--e-8); }
.mas .titular { font-size: var(--t-2xl); }
.mas__todo { margin: var(--e-5) 0 0; }
@media (min-width: 768px) { .cuadros--mas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* el dibujo entero cabe en la pantalla (los verticales no obligan a hacer scroll para verlos) */
.obra__marco .ampliar img { max-height: calc(100svh - var(--alto-cabecera) - var(--e-10)); object-fit: contain; }
.artista { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3); border-radius: var(--r-md); background: var(--noche-2); }
.artista img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; background: var(--noche-3); }
.artista p { margin: 0; min-width: 0; }
.artista__nombre { font-weight: 800; font-size: var(--t-lg); }
.artista__redes { color: var(--lavanda); font-size: var(--t-sm); overflow-wrap: anywhere; }
.nota { margin: 0; padding: var(--e-3) var(--e-4); border-radius: var(--r-md); background: rgb(138 91 201 / .16); font-size: var(--t-sm); }
.obra__acciones { display: grid; gap: var(--e-3); }
.obra__cifras { margin: 0; display: grid; gap: var(--e-2); }
.obra__cifras div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-2); padding: var(--e-2) var(--e-3); border-radius: var(--r-md); background: var(--noche-2); }
.obra__cifras dt { font-weight: 800; color: var(--luna); }
.obra__cifras dd { margin: 0; }
.obra__nav { display: flex; justify-content: space-between; gap: var(--e-3); }
.obra__nav .boton { flex: 1 1 0; }
@media (min-width: 900px) {
  .obra { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); align-items: start; }
  .obra__ficha { position: sticky; top: calc(var(--alto-cabecera) + var(--e-5)); }
  /* dibujo horizontal: arriba a todo el ancho y la ficha debajo, en dos columnas; como mucho el 62 % de la pantalla de alto, para
     que el título asome en el primer pantallazo */
  .obra--horizontal { grid-template-columns: minmax(0, 1fr); }
  .obra--horizontal .obra__marco .ampliar img { max-height: 62svh; }
  .obra--horizontal .obra__ficha { position: static; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--e-6); }
}
.cargando { margin: 0; color: var(--lavanda); padding-block: var(--e-8); text-align: center; font-size: var(--t-base); font-weight: 400; }
.obra > .vacio, .obra > .cargando { grid-column: 1 / -1; }   /* avisos de la ficha: todo el ancho, no solo la columna del dibujo */
.vacio .titular { font-size: var(--t-2xl); }   /* h1 de los avisos (obra que no existe, galería que no carga) */

/* ------------------------------------------------------------------ emojis de Discord en títulos y descripciones (30/9) */
/* Los emojis personalizados (del server o de otro) llegan como imagen del CDN de Discord (app.js: conEmojis). Van en línea y a la
   medida de la letra que los rodea (em: el h1 de la ficha, la tarjeta, la tabla…), al alto de un emoji de sistema de al lado; Discord
   hace lo mismo con los suyos (1.375em con su interlineado; Twemoji, 1em). Va DESPUÉS de .podio img, .fila__obra img y .artista img a
   propósito: tienen la misma especificidad y gana la última, así un emoji no sale como miniatura ni como avatar redondo. */
img.emoji {
  display: inline-block; width: auto; height: 1.2em; max-width: none; margin: 0 .05em; vertical-align: -.25em;
  border-radius: 0; object-fit: contain; background: none; flex: none;
}

/* ------------------------------------------------------------------ reglas */
.doc { max-width: 800px; }   /* ~75 caracteres de texto por línea una vez restado el margen */
.doc__cabeza { padding-block: var(--e-7) var(--e-5); }
.doc__cabeza h1 { font-size: var(--t-3xl); }
.doc section { padding-block: var(--e-6); border-top: 1px solid rgb(138 91 201 / .25); }
.doc h2 { font-size: var(--t-2xl); }
.pasos { list-style: none; margin: var(--e-5) 0 0; padding: 0; display: grid; gap: var(--e-4); counter-reset: paso; }
.pasos li { position: relative; padding: var(--e-4) var(--e-4) var(--e-4) calc(var(--e-8) + var(--e-2)); border-radius: var(--r-md); background: var(--noche-2); counter-increment: paso; }
.pasos li::before {
  content: counter(paso); position: absolute; left: var(--e-4); top: var(--e-4); display: grid; place-items: center; width: var(--e-7); aspect-ratio: 1;
  border-radius: 50%; background: var(--calabaza); color: var(--tinta); font-family: var(--f-titulo); font-size: var(--t-xl); line-height: 1; padding-top: .12em;
}
.pasos h3 { margin: 0 0 var(--e-1); font-size: var(--t-lg); }
.pasos p { margin: 0; color: var(--lavanda); }
.claves { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-4) 0 0; padding: 0; list-style: none; }
.claves li { padding: var(--e-1) var(--e-3); border-radius: var(--r-full); border: 1px solid var(--violeta); font-weight: 700; font-size: var(--t-sm); }
.reglas { margin: var(--e-5) 0 0; padding-inline-start: var(--e-5); display: grid; gap: var(--e-3); }
.reglas li::marker { color: var(--luna); font-weight: 800; }
.doc .premios { margin-top: var(--e-5); }
/* 1.5rem como mínimo: con el contorno violeta, axe mide el color del contorno (3.2:1) y el texto tiene que ser "grande" (≥ 24 px,
   donde basta 3:1); a --t-xl en móvil quedaba en 22 px (QA 29/9). Lo mismo en el título de la confirmación del panel */
.doc .subtitulo { margin: var(--e-6) 0 var(--e-3); font-size: max(1.5rem, var(--t-xl)); }
/* 29/9: la regla del jurado, con su calabaza morada (la de cada dibujo en la web) */
.regla-jurado { display: flex; align-items: center; gap: var(--e-4); }
.regla-jurado img { width: var(--e-9); flex: none; filter: drop-shadow(0 8px 12px rgb(0 0 0 / .45)); }
.regla-jurado p { margin: 0; }
@media (max-width: 479px) {
  .regla-jurado { flex-direction: column; align-items: flex-start; }
  .regla-jurado img { width: var(--e-8); }
}

/* ------------------------------------------------------------------ panel de Urabread (/admin, 29/9) */
.admin { padding-block: var(--e-6) var(--e-8); }
.acceso { display: grid; justify-items: center; gap: var(--e-4); max-width: 480px; margin-inline: auto; text-align: center; }
.acceso > img { width: var(--e-10); filter: drop-shadow(0 8px 12px rgb(0 0 0 / .45)); }
.acceso h1 { font-size: var(--t-2xl); }
.acceso > p { margin: 0; color: var(--lavanda); }
.acceso__form { display: grid; gap: var(--e-3); width: 100%; text-align: start; }
.campo { display: grid; gap: var(--e-1); }
.campo label { font-size: var(--t-sm); font-weight: 800; color: var(--lavanda); }
.clave { display: flex; gap: var(--e-2); }
/* la clave es larga y con guiones: letra monoespaciada para que se lea bien si se muestra */
.clave .control { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .02em; }
.acceso__error { margin: 0; min-height: 1.6em; color: var(--error); font-weight: 700; }
.acceso .boton { width: 100%; }

.adm-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--e-4); }
.adm-cab > div { flex: 1 1 320px; }
.adm-cab h1 { font-size: var(--t-2xl); }
.adm-cab h1:focus { outline: none; }   /* el foco se lleva aquí solo para anunciar el panel; no es un control */
.adm-cab .boton .icono { width: 1em; height: 1em; }
.adm-fase { margin: 0 0 var(--e-2); color: var(--luna); font-weight: 800; font-size: var(--t-sm); }
.adm-guardada {
  display: flex; align-items: flex-start; gap: var(--e-3); margin-top: var(--e-5); padding: var(--e-3) var(--e-4); border-radius: var(--r-md);
  border: 2px solid var(--exito); background: rgb(147 224 127 / .1);
}
.adm-guardada .icono { color: var(--exito); margin-top: .15em; }
.adm-guardada p { margin: 0; }
.adm-lista { list-style: none; margin: var(--e-5) 0 0; padding: 0; display: grid; gap: var(--e-3); }
/* cada obra: puesto por puntaje, miniatura, datos y (abajo en móvil, a la derecha en pantallas anchas) el botón para elegirla */
.adm-obra {
  display: grid; grid-template-columns: var(--e-5) var(--e-10) minmax(0, 1fr); grid-template-areas: "puesto img datos" "elegir elegir elegir";
  align-items: center; gap: var(--e-3); padding: var(--e-3); border-radius: var(--r-md); background: var(--noche-2);
  border: 2px solid rgb(138 91 201 / .4); transition: border-color var(--duracion), background-color var(--duracion);
}
@media (max-width: 479px) { .adm-obra { grid-template-columns: var(--e-5) var(--e-9) minmax(0, 1fr); } }
@media (min-width: 720px) {
  .adm-obra { grid-template-columns: var(--e-6) var(--e-10) minmax(0, 1fr) auto; grid-template-areas: "puesto img datos elegir"; }
}
.adm-obra--elegida { border-color: var(--calabaza); background: linear-gradient(90deg, rgb(255 122 31 / .16), transparent 70%), var(--noche-2); }
.adm-obra__puesto { grid-area: puesto; text-align: center; font-weight: 800; color: var(--lavanda); font-variant-numeric: tabular-nums; }
.adm-obra__img { grid-area: img; aspect-ratio: 1; }
.adm-obra__img img { width: 100%; height: 100%; object-fit: cover; }
.adm-obra__datos { grid-area: datos; min-width: 0; display: grid; gap: var(--e-1); }
.adm-obra__datos p { margin: 0; }
.adm-obra__titulo { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-obra__artista { color: var(--lavanda); font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-obra__votos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.adm-obra__total { color: var(--luna); font-weight: 800; font-size: var(--t-sm); }
.adm-obra__elegir { grid-area: elegir; display: flex; justify-content: flex-end; }
.adm-podio { display: flex; gap: var(--e-2); }
.adm-puesto {
  min-width: var(--e-8); min-height: 44px; padding: 0 var(--e-3); border: 2px solid var(--violeta); border-radius: var(--r-full);
  background: transparent; color: var(--crema); font-weight: 800; cursor: pointer; transition: background-color var(--duracion);
}
.adm-puesto[aria-pressed="true"] { color: var(--tinta); }
.adm-puesto--1[aria-pressed="true"] { background: var(--luna); border-color: var(--luna); }
.adm-puesto--2[aria-pressed="true"] { background: var(--plata); border-color: var(--plata); }
.adm-puesto--3[aria-pressed="true"] { background: var(--bronce); border-color: var(--bronce); }
.adm-puesto:focus-visible { outline: 3px solid var(--luna); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .adm-puesto[aria-pressed="false"]:hover { background: var(--noche-3); } }
.adm-ayuda { margin: var(--e-5) 0 0; }
/* la barra con el recuento y "Guardar" queda pegada abajo mientras se recorre la lista; una sola fila (en móvil no tapa la lista) */
.adm-barra {
  position: sticky; bottom: 0; z-index: 30; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: var(--e-2) var(--e-4); margin-top: var(--e-5); padding: var(--e-2) var(--e-4) calc(var(--e-2) + env(safe-area-inset-bottom));
  border-radius: var(--r-lg) var(--r-lg) 0 0; background: rgb(27 16 48 / .97); border: 1px solid rgb(138 91 201 / .5); box-shadow: var(--sombra-2);
}
.adm-barra p { margin: 0; }
.adm-barra__cuenta { font-weight: 800; font-variant-numeric: tabular-nums; }
.adm-barra__error { grid-column: 1 / -1; color: var(--error); font-weight: 700; }
.adm-barra__error:empty { display: none; }
/* confirmación antes de guardar (dialog nativo: Esc cierra, el resto queda inerte) */
.confirmar {
  width: min(100% - 2 * var(--margen), 520px); padding: var(--e-5); border-radius: var(--r-lg); border: 2px solid var(--violeta);
  background: var(--noche-2); color: var(--crema); box-shadow: var(--sombra-2);
}
.confirmar::backdrop { background: rgb(10 5 18 / .8); }
.confirmar h2 { font-size: max(1.5rem, var(--t-xl)); }   /* ver .doc .subtitulo: texto grande para el contorno */
.confirmar__lista { margin: var(--e-3) 0; padding-inline-start: var(--e-5); display: grid; gap: var(--e-1); }
.confirmar p { margin: 0; color: var(--lavanda); }
.confirmar__botones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-2); margin-top: var(--e-5); }

/* ------------------------------------------------------------------ visor (dialog) y aviso */
.visor {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: var(--e-4); border: 0;
  background: rgb(10 5 18 / .96); color: var(--crema);
}
.visor[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--e-3); }
.visor::backdrop { background: rgb(10 5 18 / .85); }
.visor__barra { display: flex; justify-content: flex-end; }
.visor__cerrar {
  display: grid; place-items: center; width: var(--e-7); height: var(--e-7); padding: 0; border: 2px solid var(--violeta); border-radius: 50%;
  background: var(--noche-2); color: var(--crema); cursor: pointer;
}
.visor__img { width: 100%; height: 100%; object-fit: contain; }
.visor__pie { margin: 0; text-align: center; color: var(--lavanda); padding-bottom: env(safe-area-inset-bottom); }
html:has(.visor[open]) { overflow: hidden; }
.aviso-flotante {
  position: fixed; z-index: 70; left: 50%; bottom: calc(var(--e-5) + env(safe-area-inset-bottom)); transform: translateX(-50%);
  padding: var(--e-2) var(--e-5); border-radius: var(--r-full); background: var(--luna); color: var(--tinta); font-weight: 800; box-shadow: var(--sombra-2);
}

/* ------------------------------------------------------------------ pie y 404 */
.pie { border-top: 1px solid rgb(138 91 201 / .3); color: var(--lavanda); font-size: var(--t-sm); }
.pie__dentro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3) var(--e-5); padding-block: var(--e-6) calc(var(--e-6) + env(safe-area-inset-bottom)); }
.pie p { margin: 0; }
.pie__marca { display: inline-flex; align-items: center; gap: var(--e-2); color: var(--crema); font-weight: 800; }
.pie__marca img { width: var(--e-6); }
.pie nav { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); }
.pie nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.pie__admin { gap: var(--e-1); }   /* 29/9: la entrada al panel de Urabread, con un candado */
.pie__admin .icono { width: 1em; height: 1em; }
.perdido { display: grid; justify-items: center; gap: var(--e-5); padding-block: var(--e-9); text-align: center; }
.perdido img { width: clamp(120px, 24vw, 180px); }
.perdido h1 { font-size: var(--t-3xl); }
.perdido p { margin: 0; color: var(--lavanda); font-size: var(--t-lg); }