/* Popup Arena — Material 3 Expressive, móvil primero.
   Colores y resortes en tema.css (generado por scripts/tema.mjs). Aquí: tipografía, forma y componentes.
   M3 Expressive: letra gruesa, formas grandes y variadas, listas segmentadas, botones que cambian de
   forma al tocarlos, resortes con rebote. Nada se mueve si la persona pidió menos movimiento. */

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-latin-wght.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --pa-letra: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pa-w-texto: 450; --pa-w-medio: 600; --pa-w-titulo: 750; --pa-w-display: 850;
  --r-xs: 4px; --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-l2: 20px; --r-xl: 28px; --r-xl2: 32px; --r-full: 9999px;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
  --resorte: var(--md-sys-motion-spring-expressive-fast-spatial);
  --resorte-t: var(--md-sys-motion-spring-expressive-fast-spatial-duration);
  --resorte-lento: var(--md-sys-motion-spring-expressive-default-spatial);
  --resorte-lento-t: var(--md-sys-motion-spring-expressive-default-spatial-duration);
  --efecto: var(--md-sys-motion-spring-expressive-default-effects);
  --efecto-t: var(--md-sys-motion-spring-expressive-default-effects-duration);
  --ancho: 1120px;
  --barra-abajo: 80px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh;
  background: var(--md-sys-color-background); color: var(--md-sys-color-on-background);
  font: var(--pa-w-texto) 1rem/1.5 var(--pa-letra);
  padding-bottom: calc(var(--barra-abajo) + env(safe-area-inset-bottom));
}
@media (min-width: 840px) { body { padding-bottom: 0; } }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--md-sys-color-primary); outline-offset: 2px; border-radius: var(--r-s); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tipografía: pesos gruesos, títulos fuertes */
h1, h2, h3 { margin: 0; color: var(--md-sys-color-on-surface); text-wrap: balance; }
.display { font: var(--pa-w-display) clamp(2.5rem, 9vw, 4.5rem)/1 var(--pa-letra); letter-spacing: -0.03em; }
h1, .titular { font: var(--pa-w-titulo) clamp(2rem, 6vw, 2.75rem)/1.1 var(--pa-letra); letter-spacing: -0.02em; }
h2 { font: var(--pa-w-titulo) 1.5rem/1.2 var(--pa-letra); letter-spacing: -0.01em; }
h3 { font: var(--pa-w-medio) 1.125rem/1.3 var(--pa-letra); }
.etiqueta { font: var(--pa-w-medio) 0.75rem/1 var(--pa-letra); letter-spacing: 0.06em; text-transform: uppercase; color: var(--md-sys-color-on-surface-variant); }
.tenue { color: var(--md-sys-color-on-surface-variant); }
.cifra-n { font-variant-numeric: tabular-nums; }
p { margin: 0; }

/* Estructura */
.contenedor { width: min(100% - 2 * var(--e4), var(--ancho)); margin-inline: auto; }
main { display: flex; flex-direction: column; gap: var(--e7); padding-block: var(--e5) var(--e7); }
.seccion { display: flex; flex-direction: column; gap: var(--e4); }
.seccion-cabeza { display: flex; align-items: end; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }
.rejilla { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }

/* Barra superior */
.barra { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--md-sys-color-surface) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.barra .contenedor { display: flex; align-items: center; gap: var(--e3); min-height: 64px; }
.marca { display: flex; align-items: center; gap: var(--e2); text-decoration: none; font: var(--pa-w-display) 1.25rem/1 var(--pa-letra); letter-spacing: -0.02em; }
.marca-forma { width: 36px; height: 36px; display: grid; place-items: center; background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container); -webkit-mask: var(--forma-galleta); mask: var(--forma-galleta); }
.marca-forma svg { width: 20px; height: 20px; fill: currentColor; }
.marca small { display: block; font: var(--pa-w-medio) 0.6875rem/1 var(--pa-letra); letter-spacing: 0.04em; color: var(--md-sys-color-on-surface-variant); text-transform: uppercase; margin-top: 2px; }
.nav-arriba { display: none; margin-left: auto; gap: var(--e1); }
@media (min-width: 840px) { .nav-arriba { display: flex; } }
.nav-arriba a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--e4); border-radius: var(--r-full);
  text-decoration: none; font-weight: var(--pa-w-medio); color: var(--md-sys-color-on-surface-variant); }
.nav-arriba a:hover { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }
.nav-arriba a[aria-current='page'] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.barra-acciones { display: flex; align-items: center; gap: var(--e1); margin-left: auto; }
@media (min-width: 840px) { .barra-acciones { margin-left: var(--e2); } }

/* Barra de navegación abajo (celular), M3 */
.nav-abajo { position: fixed; inset: auto 0 0 0; z-index: 10; display: grid; grid-template-columns: repeat(5, 1fr);
  min-height: var(--barra-abajo); padding-bottom: env(safe-area-inset-bottom); background: var(--md-sys-color-surface-container); }
@media (min-width: 840px) { .nav-abajo { display: none; } }
.nav-abajo a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e1); text-decoration: none;
  font: var(--pa-w-medio) 0.75rem/1 var(--pa-letra); color: var(--md-sys-color-on-surface-variant); }
.nav-abajo .pildora { display: grid; place-items: center; width: 56px; height: 32px; border-radius: var(--r-full); }
.nav-abajo svg { width: 24px; height: 24px; fill: currentColor; }
.nav-abajo a[aria-current='page'] { color: var(--md-sys-color-on-surface); }
.nav-abajo a[aria-current='page'] .pildora { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }

/* Botones: píldora que se vuelve esquina de 12dp al tocarlos (M3 Expressive) */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: 48px; padding: 0 var(--e5);
  border: 0; border-radius: var(--r-full); cursor: pointer; text-decoration: none; white-space: nowrap;
  font: var(--pa-w-medio) 1rem/1 var(--pa-letra); background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.boton svg { width: 20px; height: 20px; fill: currentColor; }
.boton:active { border-radius: var(--r-m); }
.boton.tonal { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.boton.texto { background: transparent; color: var(--md-sys-color-primary); padding: 0 var(--e3); }
.boton.grande { min-height: 56px; padding: 0 var(--e6); font-size: 1.125rem; }
.boton[disabled], .boton[aria-disabled='true'] { opacity: 0.38; pointer-events: none; }
.boton-icono { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: var(--r-full); cursor: pointer;
  background: transparent; color: var(--md-sys-color-on-surface-variant); }
.boton-icono:hover { background: var(--md-sys-color-surface-container-high); }
.boton-icono:active { border-radius: var(--r-m); }
.boton-icono svg { width: 24px; height: 24px; fill: currentColor; }
.avatar { width: 32px; height: 32px; border-radius: var(--r-full); object-fit: cover; }

/* Héroe de la portada */
.heroe { position: relative; overflow: hidden; display: grid; gap: var(--e5); padding: var(--e6) var(--e5);
  border-radius: var(--r-xl2); background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.heroe h1, .heroe .display { color: inherit; max-width: 14ch; }
.heroe p { max-width: 46ch; font-size: 1.125rem; }
.heroe .acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }
.heroe .boton { background: var(--md-sys-color-on-primary-container); color: var(--md-sys-color-primary-container); }
.heroe .boton.tonal { background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 14%, transparent); color: inherit; }
.heroe-formas { position: absolute; inset: auto -40px -60px auto; width: 260px; height: 260px; opacity: 0.22; pointer-events: none; }
.heroe-formas span { position: absolute; background: currentColor; }
.heroe-formas .f1 { inset: 0 40px 40px 0; -webkit-mask: var(--forma-galleta); mask: var(--forma-galleta); }
.heroe-formas .f2 { width: 120px; height: 120px; left: -90px; top: 40px; -webkit-mask: var(--forma-trebol); mask: var(--forma-trebol); }
@media (min-width: 840px) { .heroe { padding: var(--e7); } .heroe-formas { width: 420px; height: 420px; } }

/* Tarjetas */
.tarjeta { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e5); border-radius: var(--r-l2);
  background: var(--md-sys-color-surface-container); text-decoration: none; color: inherit; }
a.tarjeta:hover { background: var(--md-sys-color-surface-container-high); border-radius: var(--r-xl2); }
.tarjeta.destacada { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.tarjeta.destacada h2, .tarjeta.destacada h3 { color: inherit; }
.tarjeta .pie { margin-top: auto; display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }

/* Chips (M3 Expressive: el escogido en píldora) */
.chips { display: flex; flex-wrap: wrap; gap: var(--e2); }
@media (max-width: 599px) { .chips.desliza { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--e4)); padding: 4px var(--e4); } .chips.desliza > * { flex: none; } }
.chip { display: inline-flex; align-items: center; gap: var(--e1); min-height: 32px; padding: 0 var(--e3); border-radius: var(--r-s);
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant);
  font: var(--pa-w-medio) 0.8125rem/1 var(--pa-letra); text-decoration: none; white-space: nowrap; }
a.chip { min-height: 40px; padding: 0 var(--e4); font-size: 0.9375rem; color: var(--md-sys-color-on-surface); }
a.chip:hover { background: var(--md-sys-color-surface-container-highest); }
.chip[aria-current='page'], .chip.si { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-radius: var(--r-full); }
.chip.fgc { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.chip.necc { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.chip.lobby { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }

/* Lista segmentada (M3 Expressive): cada fila es su propia pieza */
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lista > li { background: var(--md-sys-color-surface-container-high); border-radius: var(--r-xs); overflow: hidden; }
.lista > li:first-child { border-top-left-radius: var(--r-l2); border-top-right-radius: var(--r-l2); }
.lista > li:last-child { border-bottom-left-radius: var(--r-l2); border-bottom-right-radius: var(--r-l2); }
.lista > li:has(> a:hover), .lista > li:focus-within { border-radius: var(--r-l2); background: var(--md-sys-color-surface-container-highest); }
.fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--e4);
  min-height: 72px; padding: var(--e3) var(--e4); text-decoration: none; color: inherit; }
.fila .principal { font-weight: var(--pa-w-medio); color: var(--md-sys-color-on-surface); overflow: hidden; text-overflow: ellipsis; }
.fila .secundario { font-size: 0.875rem; color: var(--md-sys-color-on-surface-variant); }
.fila .valor { font: var(--pa-w-titulo) 1.25rem/1 var(--pa-letra); font-variant-numeric: tabular-nums; text-align: right; }
.fila .valor small { display: block; font: var(--pa-w-texto) 0.75rem/1.3 var(--pa-letra); color: var(--md-sys-color-on-surface-variant); }

/* Formas de M3 Expressive (librería de formas): galleta de 9 lados y trébol de 4 hojas */
:root {
  --forma-trebol: radial-gradient(circle at 50% 27%, #000 27%, #0000 27.5%), radial-gradient(circle at 50% 73%, #000 27%, #0000 27.5%),
    radial-gradient(circle at 27% 50%, #000 27%, #0000 27.5%), radial-gradient(circle at 73% 50%, #000 27%, #0000 27.5%),
    radial-gradient(circle, #000 38%, #0000 38.5%);
  --forma-galleta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2c6 0 9 6 15 7s12-3 17 1 3 11 6 16 10 7 10 13-6 9-7 15 3 12-1 17-11 3-16 6-7 10-13 10-9-6-15-7-12 3-17-1-3-11-6-16S0 56 0 50s6-9 7-15-3-12 1-17 11-3 16-6S44 2 50 2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.posicion { display: grid; place-items: center; width: 48px; height: 48px; flex: none;
  font: var(--pa-w-display) 1.125rem/1 var(--pa-letra); font-variant-numeric: tabular-nums;
  background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface);
  -webkit-mask: var(--forma-galleta); mask: var(--forma-galleta); }
.posicion.p1 { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.posicion.p2 { background: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary); }
.posicion.p3 { background: var(--md-sys-color-tertiary); color: var(--md-sys-color-on-tertiary); }
.fecha-forma { display: grid; place-items: center; align-content: center; width: 56px; height: 56px; flex: none; line-height: 1;
  background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);
  -webkit-mask: var(--forma-trebol); mask: var(--forma-trebol); }
.fecha-forma .dia { font: var(--pa-w-titulo) 1.25rem/1 var(--pa-letra); }
.fecha-forma .mes { font: var(--pa-w-medio) 0.625rem/1.1 var(--pa-letra); text-transform: uppercase; letter-spacing: 0.04em; }

/* Podio */
.podio { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: var(--e2); }
.podio > div { display: flex; flex-direction: column; align-items: center; justify-content: end; gap: var(--e2); padding: var(--e4) var(--e2);
  border-radius: var(--r-xl) var(--r-xl) var(--r-s) var(--r-s); text-align: center; text-decoration: none; }
.podio .p1 { order: 2; min-height: 200px; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.podio .p2 { order: 1; min-height: 160px; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.podio .p3 { order: 3; min-height: 130px; background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.podio .lugar { font: var(--pa-w-display) 2.5rem/1 var(--pa-letra); }
.podio .quien { font: var(--pa-w-titulo) 1rem/1.2 var(--pa-letra); overflow-wrap: anywhere; }
.podio svg { width: 28px; height: 28px; fill: currentColor; }

/* Cifras grandes */
.cifras { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.cifra { display: flex; flex-direction: column; justify-content: space-between; gap: var(--e2); min-height: 112px; padding: var(--e4);
  border-radius: var(--r-l2); background: var(--md-sys-color-surface-container-high); }
.cifra .n { font: var(--pa-w-display) 2.25rem/1 var(--pa-letra); font-variant-numeric: tabular-nums; color: var(--md-sys-color-on-surface); }
.cifra.destacada { background: var(--md-sys-color-primary-container); }
.cifra.destacada .n, .cifra.destacada .etiqueta { color: var(--md-sys-color-on-primary-container); }

/* Aviso / vacío */
.aviso { padding: var(--e5); border-radius: var(--r-l2); background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface-variant); }
.aviso.error { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.aviso.ok { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }

/* Formularios */
.campo { display: flex; flex-direction: column; gap: var(--e1); }
.campo label { font-weight: var(--pa-w-medio); }
.campo input, .campo select, .campo textarea { min-height: 56px; padding: 0 var(--e4); border: 0; border-bottom: 2px solid var(--md-sys-color-on-surface-variant);
  border-radius: var(--r-s) var(--r-s) 0 0; background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface);
  font: var(--pa-w-texto) 1rem/1.4 var(--pa-letra); }
.campo input:focus { outline: none; border-bottom-color: var(--md-sys-color-primary); }
.campo .ayuda { font-size: 0.875rem; color: var(--md-sys-color-on-surface-variant); }
.campo .error { font-size: 0.875rem; color: var(--md-sys-color-error); }
.formulario { display: flex; flex-direction: column; gap: var(--e4); max-width: 520px; }

/* Botones de proveedor (entrar) */
.proveedores { display: flex; flex-direction: column; gap: 2px; max-width: 520px; }
.proveedores a { display: flex; align-items: center; gap: var(--e4); min-height: 64px; padding: 0 var(--e5); text-decoration: none;
  background: var(--md-sys-color-surface-container-high); font: var(--pa-w-medio) 1.0625rem/1 var(--pa-letra); border-radius: var(--r-xs); }
.proveedores a:first-child { border-top-left-radius: var(--r-l2); border-top-right-radius: var(--r-l2); }
.proveedores a:last-child { border-bottom-left-radius: var(--r-l2); border-bottom-right-radius: var(--r-l2); }
.proveedores a:hover { border-radius: var(--r-l2); background: var(--md-sys-color-surface-container-highest); }
.proveedores .logo { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-full); color: #fff; font-weight: var(--pa-w-display); font-size: 0.875rem; }

/* Pie */
.pie-sitio { padding-block: var(--e6); color: var(--md-sys-color-on-surface-variant); font-size: 0.875rem; }
.pie-sitio .contenedor { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5); justify-content: space-between; }

/* Movimiento */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: pa-sale 160ms var(--md-sys-motion-easing-emphasized) both; }
  ::view-transition-new(root) { animation: pa-entra-pagina var(--resorte-t) var(--resorte) both; }
  @keyframes pa-sale { to { opacity: 0; } }
  @keyframes pa-entra-pagina { from { opacity: 0; transform: translateY(16px); } }

  .boton, .boton-icono, .chip, .tarjeta, .lista > li, .proveedores a, .nav-arriba a, .nav-abajo .pildora {
    transition: border-radius var(--resorte-t) var(--resorte), background-color var(--efecto-t) var(--efecto), transform var(--resorte-t) var(--resorte); }
  .boton:active, .tarjeta:active, .lista > li:active { transform: scale(0.97); }
  .lista > li, .rejilla > *, .cifras > *, .podio > div { animation: pa-entra var(--resorte-lento-t) var(--resorte-lento) backwards; }
  .lista > li:nth-child(2), .rejilla > :nth-child(2), .cifras > :nth-child(2), .podio > :nth-child(2) { animation-delay: 40ms; }
  .lista > li:nth-child(3), .rejilla > :nth-child(3), .cifras > :nth-child(3), .podio > :nth-child(3) { animation-delay: 80ms; }
  .lista > li:nth-child(4), .rejilla > :nth-child(4), .cifras > :nth-child(4) { animation-delay: 120ms; }
  .lista > li:nth-child(5), .rejilla > :nth-child(5) { animation-delay: 160ms; }
  .lista > li:nth-child(n+6), .rejilla > :nth-child(n+6) { animation-delay: 200ms; }
  @keyframes pa-entra { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
  .posicion, .fecha-forma, .marca-forma { transition: transform var(--md-sys-motion-spring-expressive-slow-spatial-duration) var(--md-sys-motion-spring-expressive-slow-spatial); }
  .lista > li:hover .posicion, .marca:hover .marca-forma { transform: rotate(40deg) scale(1.08); }
  .lista > li:hover .posicion > *, .lista > li:hover .fecha-forma > * { transition: inherit; }
  .lista > li:hover .fecha-forma { transform: rotate(45deg) scale(1.06); }
  .lista > li:hover .fecha-forma > * { transform: rotate(-45deg); }
  .heroe-formas .f1 { animation: pa-gira 40s linear infinite; }
  @keyframes pa-gira { to { transform: rotate(360deg); } }
}

/* Íconos dentro de chips y textos */
.chip svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.boton.texto svg { width: 18px; height: 18px; }
.heroe > :not(.heroe-formas) { position: relative; }

/* Bracket: rondas en columnas que se deslizan de lado en el celular */
.bracket { display: flex; flex-direction: column; gap: var(--e5); }
.bracket-seccion { display: flex; flex-direction: column; gap: var(--e3); }
.bracket-rondas { display: flex; gap: var(--e3); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--e2);
  margin-inline: calc(-1 * var(--e4)); padding-inline: var(--e4); scrollbar-width: thin; }
.bracket-ronda { flex: 0 0 min(78vw, 248px); display: flex; flex-direction: column; justify-content: space-around; gap: var(--e2); scroll-snap-align: start; }
.bracket-ronda .etiqueta { margin-bottom: var(--e1); }
.set-tarjeta { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; border-radius: var(--r-l); overflow: hidden; }
.set-lado { display: grid; grid-template-columns: 28px minmax(0, 1fr) 32px; align-items: center; gap: var(--e2); min-height: 44px; padding: 0 var(--e3);
  background: var(--md-sys-color-surface-container-high); }
.set-lado .seed { font-size: 0.75rem; color: var(--md-sys-color-on-surface-variant); text-align: right; font-variant-numeric: tabular-nums; }
.set-lado .quien { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--pa-w-medio); }
.set-lado .marcador { font: var(--pa-w-display) 1.125rem/1 var(--pa-letra); text-align: center; }
.set-lado.gano { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.set-lado.gano .seed { color: inherit; opacity: 0.8; }
.set-tarjeta.done .set-lado:not(.gano) { color: var(--md-sys-color-on-surface-variant); }
.set-tarjeta.pending .set-lado { background: var(--md-sys-color-surface-container); }
.set-tarjeta.live { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }
.set-nota { display: flex; align-items: center; gap: var(--e1); padding: var(--e1) var(--e3); font: var(--pa-w-medio) 0.75rem/1.4 var(--pa-letra);
  background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
a.set-tarjeta:hover { border-radius: var(--r-xl); }
a.set-tarjeta:hover .set-lado { background: var(--md-sys-color-surface-container-highest); }
a.set-tarjeta:hover .set-lado.gano { background: var(--md-sys-color-secondary-container); }
.en-vivo-estado { display: inline-flex; align-items: center; gap: var(--e2); }
@media (prefers-reduced-motion: no-preference) {
  .set-tarjeta { transition: border-radius var(--resorte-t) var(--resorte); }
  .set-tarjeta.live .punto { animation: pa-late 1.2s ease-in-out infinite; }
  @keyframes pa-late { 50% { opacity: 0.3; transform: scale(0.7); } }
  .bracket-actualizado { animation: pa-entra var(--resorte-lento-t) var(--resorte-lento) backwards; }
}

/* Formularios de reporte */
.juegos-reporte { display: flex; flex-direction: column; gap: 2px; }
.juego-fila { display: grid; grid-template-columns: 40px 1fr 1fr; gap: var(--e2); align-items: center; padding: var(--e3); background: var(--md-sys-color-surface-container-high); border-radius: var(--r-xs); }
.juego-fila:first-child { border-top-left-radius: var(--r-l2); border-top-right-radius: var(--r-l2); }
.juego-fila:last-child { border-bottom-left-radius: var(--r-l2); border-bottom-right-radius: var(--r-l2); }
.juego-fila .n { font: var(--pa-w-display) 1.25rem/1 var(--pa-letra); text-align: center; }
.lado-opcion { display: flex; flex-direction: column; gap: var(--e1); }
.lado-opcion label.gana { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: var(--r-m); cursor: pointer;
  background: var(--md-sys-color-surface-container-highest); font-weight: var(--pa-w-medio); text-align: center; padding: 0 var(--e2); }
.lado-opcion input[type=radio] { position: absolute; opacity: 0; }
.lado-opcion input[type=radio]:checked + label.gana { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-radius: var(--r-full); }
.lado-opcion input[type=radio]:focus-visible + label.gana { outline: 3px solid var(--md-sys-color-primary); }
.lado-opcion input[type=text] { min-height: 40px; padding: 0 var(--e3); border: 0; border-radius: var(--r-s); background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface); font: var(--pa-w-texto) 0.875rem/1 var(--pa-letra); width: 100%; }
.acciones-fila { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.boton.peligro { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.inscritos .fila { min-height: 56px; }
.inscritos form { display: inline; }
.bracket-rondas { scroll-padding-inline: var(--e4); }
.seccion > .boton { align-self: flex-start; }

/* Tabla de posiciones (round robin y suizo) */
.tabla-marco { overflow-x: auto; border-radius: var(--r-l2); background: var(--md-sys-color-surface-container); }
.tabla { width: 100%; border-collapse: separate; border-spacing: 0 2px; font-variant-numeric: tabular-nums; }
.tabla th { text-align: left; padding: var(--e3) var(--e3) var(--e1); font: var(--pa-w-medio) 0.75rem/1 var(--pa-letra); letter-spacing: 0.04em; text-transform: uppercase; color: var(--md-sys-color-on-surface-variant); }
.tabla td { padding: var(--e2) var(--e3); background: var(--md-sys-color-surface-container-high); }
.tabla tr td:first-child { border-radius: var(--r-m) 0 0 var(--r-m); width: 56px; }
.tabla tr td:last-child { border-radius: 0 var(--r-m) var(--r-m) 0; }
.tabla .quien { font-weight: var(--pa-w-medio); }
.tabla .fuerte { font-weight: var(--pa-w-display); font-size: 1.0625rem; }
.posicion.chica { width: 36px; height: 36px; font-size: 0.9375rem; }
.tabla td { white-space: nowrap; }
.tabla td.quien { white-space: normal; min-width: 7rem; }

/* Tanda 4 */
.mi-torneo { gap: var(--e3); }
.mi-torneo select { min-height: 48px; padding: 0 var(--e3); border: 0; border-radius: var(--r-m); background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); font: inherit; }
.enlace-copiar { flex: 1 1 260px; min-height: 48px; padding: 0 var(--e4); border: 0; border-radius: var(--r-m); background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); font: var(--pa-w-texto) 0.875rem/1 var(--pa-letra); }
.marcador-entrada { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: var(--e3); }
.marcador-entrada input { font: var(--pa-w-display) 2rem/1 var(--pa-letra); text-align: center; }
.marcador-entrada .guion { font: var(--pa-w-display) 2rem/56px var(--pa-letra); }
.campo textarea { min-height: 96px; padding: var(--e3) var(--e4); border: 0; border-bottom: 2px solid var(--md-sys-color-on-surface-variant); border-radius: var(--r-s) var(--r-s) 0 0;
  background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); font: var(--pa-w-texto) 1rem/1.4 var(--pa-letra); }
.campo input[type=file] { padding: var(--e3) var(--e4); min-height: auto; }

/* =====================================================================================
   M3 Expressive, nivel 2 (Saul, 10 nov: "no veo animaciones de Expressive").
   Movimiento que se nota sin tocar nada: todo entra con resorte, los botones cambian de
   forma y se aplastan al tocarlos, los campos se redondean al enfocarlos, el indicador del
   menú se estira, y al enviar un formulario sale el indicador de carga de M3 Expressive
   (una forma que se transforma). Todo se apaga con prefers-reduced-motion.
   ===================================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Entrada: cada bloque de la página sube con resorte, uno tras otro. */
  main > *, .seccion > *, .formulario > *, .acciones-fila > *, .chips > * {
    animation: pa-entra var(--resorte-lento-t) var(--resorte-lento) backwards;
  }
  main > :nth-child(2), .seccion > :nth-child(2), .formulario > :nth-child(2) { animation-delay: 50ms; }
  main > :nth-child(3), .seccion > :nth-child(3), .formulario > :nth-child(3) { animation-delay: 100ms; }
  main > :nth-child(4), .seccion > :nth-child(4), .formulario > :nth-child(4) { animation-delay: 150ms; }
  main > :nth-child(n+5), .seccion > :nth-child(n+5), .formulario > :nth-child(n+5) { animation-delay: 200ms; }
  .chips > :nth-child(2), .acciones-fila > :nth-child(2) { animation-delay: 40ms; }
  .chips > :nth-child(3), .acciones-fila > :nth-child(3) { animation-delay: 80ms; }
  .chips > :nth-child(n+4), .acciones-fila > :nth-child(n+4) { animation-delay: 120ms; }
  h1, .display { animation: pa-titulo var(--md-sys-motion-spring-expressive-slow-spatial-duration) var(--md-sys-motion-spring-expressive-slow-spatial) backwards; }
  @keyframes pa-titulo { from { opacity: 0; transform: translateY(24px) scale(0.96); letter-spacing: 0.02em; } }

  /* Botones: al pasar, de píldora a esquina de 16; al tocar, se aplastan y rebotan. */
  .boton, a.chip, button.chip, .boton-icono {
    transition: border-radius var(--resorte-t) var(--resorte), transform var(--resorte-t) var(--resorte),
      background-color var(--efecto-t) var(--efecto), box-shadow var(--efecto-t) var(--efecto);
  }
  .boton:hover { border-radius: var(--r-l); }
  .boton:active { border-radius: var(--r-m); transform: scale(0.94, 0.9); }
  a.chip:hover, button.chip:hover { border-radius: var(--r-full); }
  a.chip:active, button.chip:active, .boton-icono:active { transform: scale(0.9); }
  .boton-icono:hover { border-radius: var(--r-m); }
  .boton-icono:hover svg { transform: rotate(-8deg) scale(1.1); }
  .boton-icono svg { transition: transform var(--resorte-t) var(--resorte); }

  /* Tarjetas y filas: se levantan y redondean al pasar. */
  a.tarjeta:hover, .lista > li:has(> a:hover) { transform: translateY(-2px); }
  a.tarjeta { transition: border-radius var(--resorte-t) var(--resorte), transform var(--resorte-t) var(--resorte), background-color var(--efecto-t) var(--efecto); }

  /* Campos: al enfocar, el contenedor se redondea y la línea crece. */
  .campo input, .campo select, .campo textarea {
    transition: border-radius var(--resorte-t) var(--resorte), border-bottom-width var(--efecto-t) var(--efecto), background-color var(--efecto-t) var(--efecto);
  }
  .campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none; border-radius: var(--r-l); border-bottom-width: 3px; border-bottom-color: var(--md-sys-color-primary);
    background: color-mix(in srgb, var(--md-sys-color-primary) 8%, var(--md-sys-color-surface-container-highest));
  }

  /* Menú: el indicador del activo se estira desde el centro (barra de abajo y de arriba). */
  .nav-abajo a[aria-current='page'] .pildora { animation: pa-pildora var(--resorte-t) var(--resorte) backwards; }
  .nav-arriba a[aria-current='page'] { animation: pa-pildora var(--resorte-t) var(--resorte) backwards; }
  @keyframes pa-pildora { from { transform: scaleX(0.4); opacity: 0.4; } }
  .nav-abajo a:active .pildora { transform: scale(0.88); }

  /* Las formas de la marca respiran. */
  .marca-forma { animation: pa-respira 6s ease-in-out infinite; }
  @keyframes pa-respira { 50% { transform: rotate(20deg) scale(1.06); } }
  .posicion.p1 { animation: pa-respira 5s ease-in-out infinite; }
}

/* Indicador de carga de M3 Expressive: una forma que se transforma mientras se envía. */
.boton.cargando { pointer-events: none; color: transparent; position: relative; }
.boton.cargando::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; background: var(--md-sys-color-on-primary);
  animation: pa-carga 1.4s linear infinite;
}
.boton.tonal.cargando::after { background: var(--md-sys-color-on-secondary-container); }
@keyframes pa-carga {
  0%   { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); transform: rotate(0deg); }
  25%  { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); transform: rotate(90deg); }
  50%  { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%); transform: rotate(180deg); }
  75%  { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); transform: rotate(270deg); }
  100% { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) { .boton.cargando::after { animation-duration: 0s; border-radius: 50%; } }

/* Snackbar de M3: el aviso sale abajo y se va solo */
.snackbar { position: fixed; left: 50%; bottom: calc(var(--barra-abajo) + 16px + env(safe-area-inset-bottom)); z-index: 30;
  max-width: min(560px, calc(100% - 32px)); padding: 14px 20px; border-radius: var(--r-l);
  background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface);
  font: var(--pa-w-medio) 0.9375rem/1.4 var(--pa-letra); box-shadow: 0 6px 24px rgb(0 0 0 / 0.25);
  transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }
@media (min-width: 840px) { .snackbar { bottom: 24px; } }
.snackbar.error { background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); }
.snackbar.ver { transform: translate(-50%, 0); opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .snackbar { transition: transform var(--resorte-t) var(--resorte), opacity 160ms; }
  /* Lo que se cambia sin recargar no repite la entrada */
  .sin-entrada, .sin-entrada * { animation: none !important; }
  /* Las filas ya no brincan al pasar el mouse */
  .lista > li:has(> a:hover) { transform: none; }
}
form.enviando { opacity: 0.7; transition: opacity 120ms; }

/* =====================================================================================
   Organizar, rediseño visual (Saul, 10 nov: "que un niño lo pueda entender").
   Una acción grande por pantalla, íconos grandes, fichas de colores, pasos con dibujos.
   ===================================================================================== */
/* Baldosas del tablero */
.baldosas { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.baldosa { display: flex; flex-direction: column; gap: var(--e2); min-height: 168px; padding: var(--e5); border-radius: var(--r-xl);
  text-decoration: none; background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }
.baldosa.principal { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.baldosa.secundaria { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.baldosa.alerta { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.baldosa-forma { display: grid; place-items: center; width: 64px; height: 64px; background: currentColor; -webkit-mask: var(--forma-galleta); mask: var(--forma-galleta); }
.baldosa-forma svg { width: 34px; height: 34px; fill: var(--md-sys-color-surface); }
.baldosa.principal .baldosa-forma svg { fill: var(--md-sys-color-primary-container); }
.baldosa.secundaria .baldosa-forma svg { fill: var(--md-sys-color-secondary-container); }
.baldosa.alerta .baldosa-forma svg { fill: var(--md-sys-color-error-container); }
.baldosa-txt { margin-top: auto; font: var(--pa-w-display) 1.375rem/1.1 var(--pa-letra); letter-spacing: -0.01em; }
.baldosa-ayuda { font: var(--pa-w-medio) 0.875rem/1.3 var(--pa-letra); opacity: 0.85; }
.baldosa.principal .baldosa-ayuda { opacity: 1; } /* T12: sobre el naranja, 0.85 de opacidad bajaba a 4.24:1 */

/* Tarjeta de torneo con barra de avance */
.tarjeta-torneo { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e5); border-radius: var(--r-xl); text-decoration: none; color: inherit;
  background: var(--md-sys-color-surface-container-high); border-top: 8px solid var(--acento, var(--md-sys-color-primary)); }
.regla-fgc { --acento: var(--md-sys-color-primary-container); }
.regla-necc { --acento: var(--md-sys-color-secondary); }
.regla-lobby { --acento: var(--md-sys-color-tertiary); }
.tt-juego { align-self: flex-start; padding: 4px 12px; border-radius: var(--r-full); background: var(--acento); color: var(--md-sys-color-surface); font: var(--pa-w-display) 0.8125rem/1.4 var(--pa-letra); }
.regla-fgc .tt-juego { color: var(--md-sys-color-on-primary-container); } /* T12: crema sobre #fe492a daba 2.9:1 */
.tt-nombre { font: var(--pa-w-titulo) 1.25rem/1.2 var(--pa-letra); }
.tt-fecha { display: flex; align-items: center; gap: var(--e1); color: var(--md-sys-color-on-surface-variant); font-size: 0.875rem; }
.tt-fecha svg { width: 18px; height: 18px; fill: currentColor; }
.tt-progreso { height: 10px; border-radius: var(--r-full); background: var(--md-sys-color-surface-container-highest); overflow: hidden; }
.tt-progreso span { display: block; height: 100%; width: calc(var(--avance) * 100%); min-width: 10px; border-radius: inherit; background: var(--acento); }
.tt-estado { font: var(--pa-w-medio) 0.875rem/1.3 var(--pa-letra); color: var(--md-sys-color-on-surface-variant); }

/* Vacío ilustrado */
.vacio { display: flex; flex-direction: column; align-items: center; gap: var(--e3); padding: var(--e6) var(--e4); text-align: center; border-radius: var(--r-xl); background: var(--md-sys-color-surface-container-low); }
.vacio-forma { display: grid; place-items: center; width: 96px; height: 96px; background: var(--md-sys-color-tertiary-container); -webkit-mask: var(--forma-trebol); mask: var(--forma-trebol); }
.vacio-forma svg { width: 44px; height: 44px; fill: var(--md-sys-color-on-tertiary-container); }

/* Cabeza del torneo */
.torneo-admin { display: flex; flex-direction: column; gap: var(--e5); }
.torneo-cabeza { display: grid; grid-template-columns: auto 1fr; gap: var(--e3); align-items: start; }
.torneo-cabeza > .boton { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 720px) { .torneo-cabeza { grid-template-columns: auto 1fr auto; } .torneo-cabeza > .boton { grid-column: auto; } }

/* Pasos con dibujos */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e2); position: relative; }
.pasos li { display: flex; flex-direction: column; align-items: center; gap: var(--e2); text-align: center; color: var(--md-sys-color-on-surface-variant); }
.paso-forma { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-full); background: var(--md-sys-color-surface-container-highest); }
.paso-forma svg { width: 28px; height: 28px; fill: currentColor; }
.paso-txt { font: var(--pa-w-medio) 0.8125rem/1.2 var(--pa-letra); }
.pasos li.hecho { color: var(--md-sys-color-secondary); }
.pasos li.hecho .paso-forma { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.pasos li.actual { color: var(--md-sys-color-on-surface); }
.pasos li.actual .paso-forma { width: 68px; height: 68px; margin-top: -6px; border-radius: 0; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);
  -webkit-mask: var(--forma-galleta); mask: var(--forma-galleta); }
.pasos li.actual .paso-txt { font-weight: var(--pa-w-display); }

/* Lo que toca ahora */
.ahora { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e3); padding: var(--e5); border-radius: var(--r-xl); background: var(--md-sys-color-surface-container); }
.ahora-titulo { font: var(--pa-w-display) clamp(1.5rem, 5vw, 2rem)/1.1 var(--pa-letra); letter-spacing: -0.02em; color: var(--md-sys-color-on-surface); }
.ahora-ayuda { font-size: 1.0625rem; color: var(--md-sys-color-on-surface-variant); }
.ahora .boton.grande { min-height: 64px; font-size: 1.25rem; padding: 0 var(--e6); }
.ahora .boton.grande svg { width: 26px; height: 26px; }

/* Partidos para jugar: tarjetas grandes "A VS B" */
.partidos { display: grid; gap: var(--e3); width: 100%; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.partido { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--e2); padding: var(--e4); border-radius: var(--r-xl);
  text-decoration: none; color: inherit; background: var(--md-sys-color-surface-container-highest); }
.partido.live { outline: 3px solid var(--md-sys-color-primary); }
.partido-lado { display: flex; flex-direction: column; align-items: center; gap: var(--e1); font-weight: var(--pa-w-titulo); text-align: center; overflow-wrap: anywhere; }
.partido-vs { font: var(--pa-w-display) 1.25rem/1 var(--pa-letra); color: var(--md-sys-color-primary); }
.partido-pie { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: var(--e1); min-height: 44px; border-radius: var(--r-full);
  background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); font-weight: var(--pa-w-titulo); }
.partido-pie svg { width: 20px; height: 20px; fill: currentColor; }

/* Ficha: iniciales en una forma de color */
.ficha { display: grid; place-items: center; width: var(--tam); height: var(--tam); flex: none; -webkit-mask: var(--forma-galleta); mask: var(--forma-galleta);
  font: var(--pa-w-display) calc(var(--tam) * 0.36)/1 var(--pa-letra); }
.ficha.c1 { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.ficha.c2 { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.ficha.c3 { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.ficha.c4 { background: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary); }
.ficha.c5 { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }

/* Agregar jugador: campo grande con botón + redondo */
.agregar { display: flex; gap: var(--e2); }
.agregar input { flex: 1; min-height: 64px; padding: 0 var(--e5); border: 0; border-radius: var(--r-full); background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface); font: var(--pa-w-medio) 1.125rem/1 var(--pa-letra); }
.agregar input:focus { outline: 3px solid var(--md-sys-color-primary); }
.boton-agregar { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border: 0; cursor: pointer; border-radius: var(--r-l);
  background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.boton-agregar svg { width: 34px; height: 34px; fill: currentColor; }

/* Fichas de inscritos: se tocan para marcar que llegaron */
.fichas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.fichas li { position: relative; }
.ficha-boton { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--e2); width: 100%; padding: var(--e4) var(--e2) var(--e3);
  border: 0; cursor: pointer; border-radius: var(--r-xl); background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); font: inherit; }
.ficha-boton:hover { background: var(--md-sys-color-surface-container-highest); }
.ficha-nombre { font-weight: var(--pa-w-titulo); text-align: center; overflow-wrap: anywhere; line-height: 1.2; }
.ficha-seed { font-size: 0.75rem; color: var(--md-sys-color-on-surface-variant); }
.ficha-marca { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; opacity: 0; transform: scale(0.3) rotate(-90deg); color: var(--md-sys-color-on-secondary-container); }
.ficha-marca svg { width: 100%; height: 100%; fill: currentColor; }
.fichas li.llego .ficha-boton { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.fichas li.llego .ficha-marca { opacity: 1; transform: none; }
.ficha-quitar { position: absolute; top: 6px; left: 6px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--r-full); cursor: pointer;
  background: transparent; color: var(--md-sys-color-on-surface-variant); opacity: 0.55; }
.ficha-quitar:hover { opacity: 1; background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.ficha-quitar svg { width: 18px; height: 18px; fill: currentColor; }

@media (prefers-reduced-motion: no-preference) {
  .baldosa, .tarjeta-torneo, .partido, .ficha-boton, .boton-agregar {
    transition: border-radius var(--resorte-t) var(--resorte), transform var(--resorte-t) var(--resorte), background-color var(--efecto-t) var(--efecto); }
  .baldosa:hover { border-radius: var(--r-l); transform: translateY(-4px) rotate(-1deg); }
  .baldosa:hover .baldosa-forma { transform: rotate(30deg) scale(1.1); }
  .baldosa-forma { transition: transform var(--md-sys-motion-spring-expressive-slow-spatial-duration) var(--md-sys-motion-spring-expressive-slow-spatial); }
  .baldosa:active, .partido:active, .ficha-boton:active, .boton-agregar:active { transform: scale(0.94); }
  .tarjeta-torneo:hover, .partido:hover { border-radius: var(--r-l); transform: translateY(-3px); }
  .tt-progreso span { animation: pa-barra 900ms var(--md-sys-motion-spring-expressive-slow-spatial) backwards 200ms; }
  @keyframes pa-barra { from { width: 0; } }
  .pasos li.actual .paso-forma { animation: pa-respira 4s ease-in-out infinite; }
  .ficha-marca { transition: opacity 120ms, transform var(--resorte-t) var(--resorte); }
  .fichas li.llego .ficha { animation: pa-salta var(--resorte-t) var(--resorte); }
  @keyframes pa-salta { 40% { transform: scale(1.18) rotate(12deg); } }
  .boton-agregar:hover { border-radius: var(--r-full); transform: rotate(90deg); }
  .partido-vs { animation: pa-respira 3s ease-in-out infinite; }
}

/* Crear torneo: tarjetas que se tocan */
.crear { display: flex; flex-direction: column; gap: var(--e5); }
.bloque { border: 0; margin: 0; padding: var(--e5); border-radius: var(--r-xl); background: var(--md-sys-color-surface-container); display: flex; flex-direction: column; gap: var(--e4); }
.bloque legend { float: left; width: 100%; display: flex; align-items: center; gap: var(--e3); padding: 0; font: var(--pa-w-display) 1.375rem/1.2 var(--pa-letra); color: var(--md-sys-color-on-surface); }
.bloque legend + * { clear: both; }
.num { display: grid; place-items: center; width: 40px; height: 40px; flex: none; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);
  -webkit-mask: var(--forma-galleta); mask: var(--forma-galleta); font-size: 1.125rem; }
.opciones { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.opciones.formatos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.opcion { position: relative; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion-cara { display: flex; flex-direction: column; gap: var(--e1); height: 100%; padding: var(--e4); border-radius: var(--r-l); background: var(--md-sys-color-surface-container-high); border: 3px solid transparent; }
.opcion-icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-m); background: var(--acento, var(--md-sys-color-secondary-container)); }
.opcion-icono svg { width: 26px; height: 26px; fill: var(--md-sys-color-surface); }
.formatos .opcion-icono svg { fill: var(--md-sys-color-on-secondary-container); }
.opcion-nombre { font: var(--pa-w-display) 1.0625rem/1.2 var(--pa-letra); color: var(--md-sys-color-on-surface); margin-top: var(--e1); }
.opcion-ayuda { font-size: 0.8125rem; color: var(--md-sys-color-on-surface-variant); }
.opcion:hover .opcion-cara { background: var(--md-sys-color-surface-container-highest); }
.opcion input:checked + .opcion-cara { border-color: var(--md-sys-color-primary); background: color-mix(in srgb, var(--md-sys-color-primary) 12%, var(--md-sys-color-surface-container-high)); border-radius: var(--r-xl); }
.opcion input:checked + .opcion-cara .opcion-icono { border-radius: var(--r-full); }
.opcion input:focus-visible + .opcion-cara { outline: 3px solid var(--md-sys-color-primary); outline-offset: 2px; }
.segmentos { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.segmentos-titulo { font-weight: var(--pa-w-medio); margin-right: var(--e2); }
.segmentos label { cursor: pointer; }
.segmentos input { position: absolute; opacity: 0; }
.segmentos label span { display: grid; place-items: center; width: 56px; height: 48px; border-radius: var(--r-m); background: var(--md-sys-color-surface-container-high); font: var(--pa-w-display) 1.25rem/1 var(--pa-letra); }
.segmentos label input:checked + span { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-radius: var(--r-full); width: 72px; }
.segmentos input:focus-visible + span { outline: 3px solid var(--md-sys-color-primary); }
.crear-boton { align-self: stretch; min-height: 64px; font-size: 1.25rem; }
@media (min-width: 720px) { .crear-boton { align-self: flex-start; } }

/* Marcador de arcade para anotar */
.marcador { display: grid; grid-template-columns: 1fr; gap: var(--e3); align-items: stretch; }
@media (min-width: 720px) { .marcador { grid-template-columns: 1fr auto 1fr; } .marcador-guardar { grid-column: 1 / -1; } }
.marcador-lado { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--e2); padding: var(--e5); border-radius: var(--r-xl);
  background: var(--md-sys-color-surface-container-high); border: 4px solid transparent; }
.marcador-lado.ganador { border-color: var(--md-sys-color-primary); background: color-mix(in srgb, var(--md-sys-color-primary) 12%, var(--md-sys-color-surface-container-high)); }
.marcador-nombre { font: var(--pa-w-display) 1.375rem/1.2 var(--pa-letra); text-align: center; overflow-wrap: anywhere; }
.marcador-num { font: 900 clamp(4.5rem, 18vw, 7rem)/1 var(--pa-letra); font-variant-numeric: tabular-nums; color: var(--md-sys-color-on-surface); }
.marcador-botones { display: flex; gap: var(--e3); }
.marcador-botones button { display: grid; place-items: center; width: 72px; height: 72px; border: 0; cursor: pointer; border-radius: var(--r-xl); }
.marcador-botones svg { width: 36px; height: 36px; fill: currentColor; }
.marcador-mas { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.marcador-menos { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); }
.marcador-vs { align-self: center; justify-self: center; font: var(--pa-w-display) 1.75rem/1 var(--pa-letra); color: var(--md-sys-color-primary); }
.marcador-gana { position: absolute; top: 12px; right: 12px; padding: 4px 12px; border-radius: var(--r-full); background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
  font: var(--pa-w-display) 0.875rem/1.4 var(--pa-letra); opacity: 0; transform: scale(0.5); }
.marcador-lado.ganador .marcador-gana { opacity: 1; transform: none; }
.marcador-guardar { min-height: 64px; font-size: 1.25rem; }
.marcador-guardar[disabled] { opacity: 0.4; }
.mas-opciones { padding: var(--e4); border-radius: var(--r-l); background: var(--md-sys-color-surface-container-low); }
.mas-opciones summary { cursor: pointer; font-weight: var(--pa-w-titulo); min-height: 44px; padding-block: 11px; box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) {
  .opcion-cara, .opcion-icono, .segmentos span, .marcador-lado, .marcador-botones button, .marcador-gana {
    transition: border-radius var(--resorte-t) var(--resorte), width var(--resorte-t) var(--resorte), transform var(--resorte-t) var(--resorte),
      background-color var(--efecto-t) var(--efecto), border-color var(--efecto-t) var(--efecto), opacity 150ms; }
  .opcion:active .opcion-cara { transform: scale(0.95); }
  .opcion input:checked + .opcion-cara .opcion-icono { transform: rotate(-10deg) scale(1.1); }
  .marcador-botones button:hover { border-radius: var(--r-full); }
  .marcador-botones button:active { transform: scale(0.85); }
  .marcador-num.rebota { animation: pa-num var(--resorte-t) var(--resorte); }
  @keyframes pa-num { from { transform: scale(1.4); } }
  .marcador-lado.ganador .ficha { animation: pa-salta var(--resorte-t) var(--resorte); }
}
.fichas li.llego .ficha.c2, .fichas li.llego .ficha.c4 { background: var(--md-sys-color-surface); color: var(--md-sys-color-secondary); }

/* =====================================================================================
   Portadas originales de los juegos (arte propio, animado). Sin portadas de editoras.
   ===================================================================================== */
.portada { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r-xl); isolation: isolate;
  --c1: var(--md-sys-color-primary-container); --c2: var(--md-sys-color-primary); --tinta: var(--md-sys-color-on-primary-container);
  background: radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--c2) 70%, transparent), transparent 60%), linear-gradient(calc(160deg + var(--g1)), var(--c1), var(--c2)); }
/* Cinco combinaciones de la paleta de OGM (rojo #fe492a, azul #16336f, periwinkle #b1bfe2, crema #f0eedf, tinta #1c1c1a) */
.portada.t0 { --c1: #fe492a; --c2: #b3260b; --tinta: #1c1c1a; }
.portada.t1 { --c1: #1d3f86; --c2: #0e2048; --tinta: #f0eedf; }
.portada.t2 { --c1: #b1bfe2; --c2: #6f80b5; --tinta: #16336f; }
.portada.t3 { --c1: #2a2a27; --c2: #131312; --tinta: #fe492a; }
.portada.t4 { --c1: #f0eedf; --c2: #d8d3b8; --tinta: #b3260b; }
.portada-forma { position: absolute; z-index: -1; background: var(--tinta); opacity: 0.16; }
.portada .f1 { width: 70%; aspect-ratio: 1; left: var(--x1); top: var(--y1); -webkit-mask: var(--forma-galleta); mask: var(--forma-galleta); }
.portada .f2 { width: 46%; aspect-ratio: 1; left: var(--x2); top: var(--y2); -webkit-mask: var(--forma-trebol); mask: var(--forma-trebol); opacity: 0.12; }
.portada .f3 { width: 22%; aspect-ratio: 1; right: 8%; bottom: 30%; border-radius: 50%; opacity: 0.22; }
.portada-icono { position: absolute; right: -8%; top: 14%; width: 62%; aspect-ratio: 1; opacity: 0.22; transform: rotate(-12deg); }
.portada-icono svg { width: 100%; height: 100%; fill: var(--tinta); }
.portada-siglas { position: absolute; left: 8%; right: 8%; bottom: 14%; font: 900 clamp(1.75rem, 7vw, 2.75rem)/0.95 var(--pa-letra); letter-spacing: -0.03em; color: var(--tinta); overflow-wrap: anywhere; }
.portada-siglas.larga { font-size: clamp(1.25rem, 4.5vw, 1.75rem); }
.portada-modo { position: absolute; left: 8%; bottom: 6%; padding: 2px 10px; border-radius: var(--r-full); background: var(--tinta); color: var(--c2);
  font: var(--pa-w-display) 0.75rem/1.5 var(--pa-letra); }
.portada.chica { aspect-ratio: 1; border-radius: var(--r-l); }
.portada.chica .portada-siglas { font-size: 1.125rem; bottom: 10%; left: 10%; }
.portada.chica .portada-icono { width: 70%; top: 4%; }
@media (prefers-reduced-motion: no-preference) {
  .portada .f1 { animation: pa-flota 14s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
  .portada .f2 { animation: pa-flota 18s ease-in-out infinite reverse; animation-delay: calc(var(--d) * -1.5); }
  .portada .f3 { animation: pa-late-suave 5s ease-in-out infinite; animation-delay: calc(var(--d) * -0.5); }
  @keyframes pa-flota { 50% { transform: translate(-8%, 6%) rotate(40deg) scale(1.08); } }
  @keyframes pa-late-suave { 50% { transform: scale(1.35); opacity: 0.32; } }
  .portada-icono { transition: transform var(--md-sys-motion-spring-expressive-slow-spatial-duration) var(--md-sys-motion-spring-expressive-slow-spatial); }
  a:hover > .portada .portada-icono, .opcion:hover .portada-icono, .portada:hover .portada-icono { transform: rotate(6deg) scale(1.12); }
  .portada-siglas { transition: transform var(--resorte-t) var(--resorte); }
  a:hover > .portada .portada-siglas { transform: translateY(-4px); }
}

/* Tarjetas de juego con portada */
.juegos-galeria { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(min(46%, 180px), 1fr)); }
.juego-tarjeta { display: flex; flex-direction: column; gap: var(--e2); text-decoration: none; color: inherit; }
.juego-tarjeta .nombre { font: var(--pa-w-titulo) 1rem/1.2 var(--pa-letra); }
.juego-tarjeta .detalle { font-size: 0.8125rem; color: var(--md-sys-color-on-surface-variant); }
@media (prefers-reduced-motion: no-preference) {
  .juego-tarjeta .portada { transition: transform var(--resorte-t) var(--resorte), border-radius var(--resorte-t) var(--resorte); }
  .juego-tarjeta:hover .portada { transform: translateY(-6px) rotate(-1.5deg); border-radius: var(--r-l); }
  .juego-tarjeta:active .portada { transform: scale(0.95); }
}
.juego-cabeza { display: grid; gap: var(--e4); grid-template-columns: minmax(120px, 200px) 1fr; align-items: end; }
@media (max-width: 560px) { .juego-cabeza { grid-template-columns: 110px 1fr; } }

/* Tile de juego con portada chica en "Nuevo torneo" */
.opcion-cara .portada.chica { width: 100%; margin-bottom: var(--e1); }

/* Carrusel de juegos en la portada del sitio */
.carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 168px); gap: var(--e3); overflow-x: auto; scroll-snap-type: x mandatory;
  margin-inline: calc(-1 * var(--e4)); padding: var(--e2) var(--e4) var(--e3); scroll-padding-inline: var(--e4); scrollbar-width: none; }
.carrusel > * { scroll-snap-align: start; }

/* Héroe: íconos que flotan alrededor */
.heroe-escena { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.heroe > :not(.heroe-formas):not(.heroe-escena) { z-index: 1; }
.flota { position: absolute; display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--md-sys-color-on-primary-container) 14%, transparent); }
.flota svg { width: 60%; height: 60%; fill: var(--md-sys-color-on-primary-container); opacity: 0.8; }
.flota.i1 { right: 30%; top: 22%; }
.flota.i2 { right: 9%; top: 34%; width: 96px; height: 96px; border-radius: 50%; }
.flota.i3 { right: 26%; bottom: 14%; }
.flota.i4 { right: 6%; bottom: 10%; width: 52px; height: 52px; }
.flota.i5 { right: 12%; top: 10%; width: 52px; height: 52px; border-radius: var(--r-m); }
@media (max-width: 720px) { .flota.i1, .flota.i3 { display: none; } .flota.i2 { top: auto; bottom: 18%; width: 64px; height: 64px; } }
@media (prefers-reduced-motion: no-preference) {
  .flota { animation: pa-flotar 7s ease-in-out infinite; }
  .flota.i2 { animation-duration: 9s; animation-delay: -2s; }
  .flota.i3 { animation-duration: 6s; animation-delay: -4s; }
  .flota.i4 { animation-duration: 5s; animation-delay: -1s; }
  .flota.i5 { animation-duration: 8s; animation-delay: -3s; }
  @keyframes pa-flotar { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(8deg); border-radius: 50%; } }
}

/* Entrar */
.entrar { display: grid; gap: var(--e5); align-items: center; }
@media (min-width: 840px) { .entrar { grid-template-columns: 1fr 1fr; } }
.entrar-arte { position: relative; aspect-ratio: 1; max-width: 420px; width: 100%; justify-self: center; }
.ea-forma { position: absolute; inset: 6%; background: var(--md-sys-color-primary-container); -webkit-mask: var(--forma-galleta); mask: var(--forma-galleta); }
.entrar-arte .flota { background: var(--md-sys-color-surface-container-high); }
.entrar-arte .flota svg { fill: var(--md-sys-color-on-surface); }
.flota.e1 { left: 6%; top: 18%; width: 84px; height: 84px; }
.flota.e2 { right: 4%; top: 30%; width: 96px; height: 96px; border-radius: 50%; }
.flota.e3 { left: 30%; bottom: 4%; width: 72px; height: 72px; }
.entrar-caja { display: flex; flex-direction: column; gap: var(--e4); }
.proveedores-grandes { display: grid; gap: var(--e2); }
.prov { display: flex; align-items: center; gap: var(--e3); min-height: 64px; padding: 0 var(--e4); border-radius: var(--r-l); text-decoration: none;
  background: var(--marca); color: #fff; font: var(--pa-w-titulo) 1.0625rem/1 var(--pa-letra); }
.prov-logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-m); background: rgb(255 255 255 / 0.2); font-weight: 900; }
.prov.apagado { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); }
.prov.apagado .prov-logo { background: var(--marca); color: #fff; opacity: 0.55; }
.prov-pronto { margin-left: auto; padding: 4px 12px; border-radius: var(--r-full); background: var(--md-sys-color-surface-container-highest); font-size: 0.8125rem; }
@media (prefers-reduced-motion: no-preference) {
  .ea-forma { animation: pa-gira 30s linear infinite; }
  .prov:not(.apagado) { transition: border-radius var(--resorte-t) var(--resorte), transform var(--resorte-t) var(--resorte); }
  .prov:not(.apagado):hover { border-radius: var(--r-full); transform: translateX(4px); }
  .prov:not(.apagado):active { transform: scale(0.96); }
}

/* Paradas (torneos) como tarjetas con la portada del juego */
.paradas { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.parada { display: grid; grid-template-columns: 96px 1fr; gap: var(--e4); align-items: center; padding: var(--e3); border-radius: var(--r-xl);
  text-decoration: none; color: inherit; background: var(--md-sys-color-surface-container-high); }
.parada .portada.chica { width: 96px; }
.parada-info { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.parada-fecha { font: var(--pa-w-medio) 0.8125rem/1 var(--pa-letra); color: var(--md-sys-color-primary); text-transform: uppercase; letter-spacing: 0.04em; }
.parada-fecha .dia { font-size: 1.125rem; font-weight: 900; }
.parada-nombre { font: var(--pa-w-titulo) 1.0625rem/1.2 var(--pa-letra); color: var(--md-sys-color-on-surface); }
.parada-lugar, .parada-campeon { display: flex; align-items: center; gap: 4px; font-size: 0.8125rem; color: var(--md-sys-color-on-surface-variant); }
.parada-lugar svg, .parada-campeon svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.parada-campeon { color: var(--md-sys-color-on-surface); font-weight: var(--pa-w-titulo); }
.parada-campeon svg { fill: #c99a00; }
@media (prefers-reduced-motion: no-preference) {
  .parada { transition: border-radius var(--resorte-t) var(--resorte), transform var(--resorte-t) var(--resorte), background-color var(--efecto-t) var(--efecto); }
  .parada:hover { border-radius: var(--r-l); transform: translateY(-3px); background: var(--md-sys-color-surface-container-highest); }
  .parada:hover .portada-icono { transform: rotate(8deg) scale(1.15); }
  .parada:active { transform: scale(0.97); }
  .paradas > * { animation: pa-entra var(--resorte-lento-t) var(--resorte-lento) backwards; }
  .paradas > :nth-child(2) { animation-delay: 60ms; } .paradas > :nth-child(3) { animation-delay: 120ms; } .paradas > :nth-child(n+4) { animation-delay: 180ms; }
}

/* Correcciones: siglas que caben siempre (tamaño según el ancho de la portada) y escena del héroe */
.portada { container-type: inline-size; }
.portada-siglas { overflow-wrap: normal; word-break: normal; hyphens: none; font-size: clamp(0.9rem, 19cqi, 2.75rem); }
.portada-siglas.media { font-size: clamp(0.85rem, 14cqi, 2.4rem); }
.portada-siglas.larga { font-size: clamp(0.8rem, 11cqi, 1.9rem); }
.portada-modo { font-size: clamp(0.625rem, 6.5cqi, 0.75rem); }
.heroe > .heroe-escena { position: absolute; inset: 0; z-index: 0; }
.portada-modo { top: 7%; bottom: auto; }
.portada-siglas { bottom: 8%; }
.separador { display: flex; align-items: center; gap: var(--e3); color: var(--md-sys-color-on-surface-variant); font-size: 0.875rem; }
.separador::before, .separador::after { content: ''; flex: 1; height: 2px; border-radius: 2px; background: var(--md-sys-color-surface-container-highest); }

/* Lobby: anotar tocando en orden de llegada */
.lugar-badge { position: absolute; top: 8px; right: 8px; min-width: 40px; padding: 2px 8px; border-radius: var(--r-full); background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
  font: 900 1.125rem/1.4 var(--pa-letra); opacity: 0; transform: scale(0.4); }
.lobby-fichas li.llego .lugar-badge { opacity: 1; transform: none; }
.lobby-fichas li.llego .ficha-boton { background: var(--md-sys-color-secondary-container); }
.kills { display: flex; align-items: center; justify-content: center; gap: var(--e2); margin-top: var(--e1); }
.kills button { width: 36px; height: 36px; border: 0; border-radius: var(--r-m); background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); font: 900 1.125rem/1 var(--pa-letra); cursor: pointer; }
.kills output { min-width: 2ch; text-align: center; font-weight: 900; }
.lobby-anotar { display: flex; flex-direction: column; gap: var(--e4); }
.lobby-carta { grid-template-columns: 1fr; }
.lobby-titulo { font: var(--pa-w-display) 1.125rem/1.2 var(--pa-letra); }
.lobby-caras { display: flex; flex-wrap: wrap; gap: 4px; }
.lobbies { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.lobby-res { padding: var(--e4); border-radius: var(--r-xl); background: var(--md-sys-color-surface-container-high); }
.lobby-res ol { list-style: none; margin: var(--e2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lobby-res li { display: grid; grid-template-columns: 3ch 1fr auto; gap: var(--e2); }
.lobby-res .lugar { font-weight: 900; color: var(--md-sys-color-primary); }
@media (prefers-reduced-motion: no-preference) {
  .lugar-badge { transition: transform var(--resorte-t) var(--resorte), opacity 120ms; }
  .lobby-fichas li.llego .ficha { animation: pa-salta var(--resorte-t) var(--resorte); }
}

/* =====================================================================================
   Pantalla del venue (TV) y overlay para OBS
   ===================================================================================== */
body.pantalla { padding: 2vw; min-height: 100vh; background: radial-gradient(80% 60% at 90% 0%, #2a1410, transparent), var(--md-sys-color-background); }
.pantalla-cabeza { display: grid; grid-template-columns: 7vw 1fr auto; gap: 2vw; align-items: center; margin-bottom: 2vw; }
.pantalla-cabeza .portada.chica { width: 7vw; }
.pantalla-cabeza h1 { font-size: 3.4vw; line-height: 1; }
.pantalla-cabeza p { font-size: 1.3vw; color: var(--md-sys-color-on-surface-variant); }
.pantalla-cabeza .etiqueta { font-size: 1vw; }
.pantalla-sigue { text-align: right; font: 900 1.4vw/1.3 var(--pa-letra); color: var(--md-sys-color-primary); }
.pantalla-sigue small { font-size: 1vw; color: var(--md-sys-color-on-surface-variant); font-weight: 600; }
.pantalla-cuerpo { display: grid; gap: 1.5vw; grid-template-columns: 1.2fr 1fr 0.9fr; align-items: start; }
.pantalla-bloque { display: flex; flex-direction: column; gap: 1vw; }
.pantalla-bloque h2 { display: flex; align-items: center; gap: 0.6vw; font-size: 2vw; }
.pantalla-bloque .punto { width: 1vw; height: 1vw; background: var(--md-sys-color-primary); }
.pantalla-carta { display: flex; flex-direction: column; gap: 0.5vw; padding: 1.4vw 1.6vw; border-radius: 1.6vw; background: var(--md-sys-color-surface-container-high); }
.pantalla-carta.vivo { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.pc-nombres { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.8vw; font: 900 2.2vw/1.1 var(--pa-letra); }
.pc-nombres em { font-style: normal; font-size: 1.3vw; opacity: 0.7; }
.pc-sub, .pc-estacion { font: 700 1.2vw/1.2 var(--pa-letra); opacity: 0.85; }
.pantalla-nada { font-size: 1.6vw; color: var(--md-sys-color-on-surface-variant); }
.pantalla-tabla ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4vw; }
.pantalla-tabla li { display: grid; grid-template-columns: 3vw 1fr auto; align-items: center; gap: 1vw; padding: 0.8vw 1.2vw; border-radius: 1vw; background: var(--md-sys-color-surface-container); font: 700 1.5vw/1.2 var(--pa-letra); }
.pantalla-tabla li.p1 { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.pantalla-tabla li.p2, .pantalla-tabla li.p3 { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.pantalla-tabla .pos { font-weight: 900; }
.pantalla-tabla .dato { font-variant-numeric: tabular-nums; font-weight: 900; }
@media (max-width: 900px) { .pantalla-cuerpo { grid-template-columns: 1fr; } .pantalla-cabeza h1 { font-size: 7vw; } }
@media (prefers-reduced-motion: no-preference) {
  .pantalla-carta.vivo { animation: pa-respira-suave 3s ease-in-out infinite; }
  @keyframes pa-respira-suave { 50% { transform: scale(1.015); } }
}

/* Overlay OBS: barra de marcador abajo */
body.overlay { margin: 0; }
.overlay-barra { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; padding: 12px 16px;
  border-radius: 32px; background: #131312; color: #f0eedf; font-family: var(--pa-letra); box-shadow: 0 10px 40px rgb(0 0 0 / 0.5); }
.ob-lado { display: flex; align-items: center; gap: 14px; }
.ob-nombre { font: 900 30px/1 var(--pa-letra); min-width: 180px; }
.ob-lado.der .ob-nombre { text-align: right; }
.ob-score { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: #fe492a; color: #131312; font: 900 40px/1 var(--pa-letra); }
.ob-centro { display: flex; flex-direction: column; align-items: center; padding: 0 12px; font: 900 22px/1 var(--pa-letra); color: #b1bfe2; }
.ob-centro small { font-size: 14px; color: #f0eedf; opacity: 0.8; margin-top: 6px; }

/* Perfil del jugador */
.perfil-heroe { display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap; }
.perfil-heroe .display { font-size: clamp(2.5rem, 10vw, 4.5rem); }
.niveles { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.nivel { display: grid; grid-template-columns: 96px 1fr; gap: var(--e4); align-items: center; padding: var(--e3); border-radius: var(--r-xl);
  background: var(--md-sys-color-surface-container-high); text-decoration: none; color: inherit; }
.nivel .portada.chica { width: 96px; }
.nivel-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nivel-juego { font-weight: var(--pa-w-titulo); }
.nivel-num { font: 900 2.25rem/1 var(--pa-letra); color: var(--md-sys-color-primary); }
.nivel-wl { font-size: 0.8125rem; color: var(--md-sys-color-on-surface-variant); }
.grafica { width: 100%; height: 48px; margin-top: 4px; overflow: visible; }
.grafica-area { fill: color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent); stroke: none; }
.grafica-linea { fill: none; stroke: var(--md-sys-color-primary); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.grafica-punto { fill: var(--md-sys-color-primary); }
.vitrina { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(min(46%, 180px), 1fr)); }
.trofeo { display: flex; flex-direction: column; align-items: center; gap: var(--e1); padding: var(--e5) var(--e3); border-radius: var(--r-xl); text-align: center; text-decoration: none; color: inherit;
  background: var(--md-sys-color-surface-container-high); }
.trofeo-forma { display: grid; place-items: center; width: 72px; height: 72px; -webkit-mask: var(--forma-galleta); mask: var(--forma-galleta); background: var(--md-sys-color-surface-container-highest); }
.trofeo-forma svg { width: 38px; height: 38px; fill: var(--md-sys-color-on-surface-variant); }
.trofeo.p1 .trofeo-forma { background: #fab800; } .trofeo.p1 .trofeo-forma svg { fill: #3d2c00; }
.trofeo.p2 .trofeo-forma { background: var(--md-sys-color-tertiary-container); } .trofeo.p2 .trofeo-forma svg { fill: var(--md-sys-color-on-tertiary-container); }
.trofeo.p3 .trofeo-forma { background: #c98a5a; } .trofeo.p3 .trofeo-forma svg { fill: #2f1a08; }
.trofeo-lugar { font: 900 1.5rem/1 var(--pa-letra); }
.trofeo-torneo { font-weight: var(--pa-w-titulo); line-height: 1.2; }
.trofeo-fecha { font-size: 0.8125rem; color: var(--md-sys-color-on-surface-variant); }
@media (prefers-reduced-motion: no-preference) {
  .perfil-ficha { animation: pa-titulo var(--md-sys-motion-spring-expressive-slow-spatial-duration) var(--md-sys-motion-spring-expressive-slow-spatial) backwards; }
  .grafica-linea { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pa-traza 1.4s var(--md-sys-motion-easing-emphasized-decelerate) 300ms forwards; }
  @keyframes pa-traza { to { stroke-dashoffset: 0; } }
  .nivel, .trofeo { transition: transform var(--resorte-t) var(--resorte), border-radius var(--resorte-t) var(--resorte); }
  .nivel:hover, .trofeo:hover { transform: translateY(-3px); border-radius: var(--r-l); }
  .trofeo:hover .trofeo-forma { transform: rotate(20deg) scale(1.08); }
  .trofeo-forma { transition: transform var(--md-sys-motion-spring-expressive-slow-spatial-duration) var(--md-sys-motion-spring-expressive-slow-spatial); }
  .trofeo.p1 .trofeo-forma { animation: pa-respira 5s ease-in-out infinite; }
}

/* Equipo de trabajo */
.roles-guia { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.rol-tarjeta { display: flex; flex-direction: column; gap: 4px; padding: var(--e4); border-radius: var(--r-l); background: var(--md-sys-color-surface-container-high); }
.rol-nivel { display: grid; place-items: center; width: 36px; height: 36px; -webkit-mask: var(--forma-galleta); mask: var(--forma-galleta); background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); font-weight: 900; }
.rol-nombre { font: var(--pa-w-display) 1.125rem/1.2 var(--pa-letra); }
.rol-que { font-size: 0.8125rem; color: var(--md-sys-color-on-surface-variant); }
.rol-dueno .rol-nivel, .rol-chip.rol-dueno { background: #fab800; color: #3d2c00; }
.rol-admin .rol-nivel, .rol-chip.rol-admin { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.rol-arbitro .rol-nivel, .rol-chip.rol-arbitro { background: var(--md-sys-color-tertiary); color: var(--md-sys-color-on-tertiary); }
.rol-staff .rol-nivel, .rol-chip.rol-staff { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); }
.miembros { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.miembro { display: flex; align-items: center; gap: var(--e3); padding: var(--e3); border-radius: var(--r-l); background: var(--md-sys-color-surface-container-high); }
.miembro-info { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 1; min-width: 0; }
.miembro-nombre { font-weight: var(--pa-w-titulo); }
.asignar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e3); border-radius: var(--r-xl); background: var(--md-sys-color-surface-container); }
.asignar .miembro { background: transparent; padding: 0; }
.segmento-boton { min-height: 44px; padding: 0 var(--e4); border: 0; border-radius: var(--r-m); background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); font: var(--pa-w-titulo) 0.9375rem/1 var(--pa-letra); cursor: pointer; }
.segmento-boton:hover { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-radius: var(--r-full); }
.segmento-boton[disabled] { opacity: 0.4; cursor: not-allowed; }
@media (prefers-reduced-motion: no-preference) { .segmento-boton { transition: border-radius var(--resorte-t) var(--resorte), background-color var(--efecto-t) var(--efecto); } .segmento-boton:active { transform: scale(0.94); } }

/* === T7 legal === */
.pie-legal { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); flex-basis: 100%; }
.pie-legal a { display: inline-flex; align-items: center; min-height: 44px; }
.legal { max-width: 46rem; margin-inline: auto; padding-block: var(--e5); display: flex; flex-direction: column; gap: var(--e5); font-size: 1.0625rem; line-height: 1.6; }
.legal section { display: flex; flex-direction: column; gap: var(--e3); }
.legal h3 { font: var(--pa-w-titulo) 1.125rem/1.2 var(--pa-letra); }
.legal p, .legal ul { margin: 0; }
.legal ul { padding-left: var(--e5); display: flex; flex-direction: column; gap: var(--e2); }
.legal-intro { color: var(--md-sys-color-on-surface-variant); font-size: 1.125rem; }
.legal-borrador { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); font-size: 1.0625rem; }
.legal-nav { display: flex; flex-wrap: wrap; gap: var(--e2); }
.legal-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e4); border-radius: var(--r-full); text-decoration: none; background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); }
.legal-nav a[aria-current='page'] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.legal-dos { display: grid; gap: var(--e5); }
@media (min-width: 640px) { .legal-dos { grid-template-columns: 1fr 1fr; } }
.legal mark.pendiente { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); padding: 0 var(--e1); border-radius: var(--r-xs); font-weight: 600; }
.legal-contacto { padding: var(--e4); border-radius: var(--r-l2); background: var(--md-sys-color-surface-container-high); }
/* === fin T7 legal === */
/* === T7 cuentas === */
.t7-aviso-cuenta { font-size: 0.9375rem; }
.t7-par { display: grid; gap: var(--e3); }
@media (min-width: 600px) { .t7-par { grid-template-columns: 1fr 1fr; } }
.t7-lista-puntos { margin: 0; padding-left: 1.25em; display: flex; flex-direction: column; gap: var(--e2); }
.t7-confirmar { flex: 1 1 100%; }
.t7-confirmar > p { margin: var(--e3) 0; }
.t7-log { align-items: start; }
@media (max-width: 599px) { .t7-log { grid-template-columns: minmax(0, 1fr); gap: var(--e1); } .t7-log > .chip { justify-self: start; } }
.t7-paginas { margin-top: var(--e4); justify-content: space-between; }
/* === fin T7 cuentas === */
/* === T7 temporadas === */
.chip.vencido { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); font-weight: var(--pa-w-titulo); }
.sets-plazo .fila { grid-template-columns: auto minmax(0, 1fr); }
.sets-plazo .fila > :last-child { grid-column: 1 / -1; }
@media (min-width: 640px) { .sets-plazo .fila { grid-template-columns: auto minmax(0, 1fr) auto; } .sets-plazo .fila > :last-child { grid-column: auto; text-align: right; } }
/* === fin T7 temporadas === */
/* === T7 torneo === */
/* Segmentos con palabras (Titular / Suplente / Fuera, Sin tope): el ancho lo da el texto. */
.segmentos.palabras label span, .segmentos.palabras label input:checked + span { width: auto; min-width: 56px; padding: 0 var(--e4); font-size: 1rem; }
.lista > li > .segmentos { padding: 0 var(--e4) var(--e3); }
.cupo { display: flex; flex-direction: column; gap: var(--e2); margin: var(--e3) 0; }
/* === fin T7 torneo === */
/* === T7 orquestador === */
/* Un chip con casilla dentro de un formulario puede partir en dos líneas (a 390 px se salía de la pantalla). */
.formulario label.chip { white-space: normal; line-height: 1.3; padding-block: var(--e2); }
/* Salud del sitio: el detalle largo baja a su propia línea para no comerse el nombre. */
.salud-lista .fila { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--e1); }
.salud-lista .fila .secundario { grid-column: 2; }
/* Cabecera del torneo en Organizar: en el teléfono las acciones van debajo, a todo el ancho (antes apretaban el título). */
.torneo-cabeza > .acciones-fila { grid-column: 1 / -1; }
@media (min-width: 720px) { .torneo-cabeza > .acciones-fila { grid-column: auto; justify-content: flex-end; } }
/* Roster del equipo: las acciones del capitán van debajo del gamertag (a 390 px se comían todo el ancho y el nombre medía 0). */
.fila-miembro { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--e2); }
.fila-miembro > .acciones-fila { grid-column: 1 / -1; }
/* === fin T7 orquestador === */

/* === T8 resumen === */
.resumen .podio .lugar { font-size: 3.5rem; }
.resumen .podio .quien { font-size: 1.25rem; }
.resumen .podio .p1 { min-height: 260px; }
.resumen-dato { padding: var(--e4); border-radius: var(--r-l); background: var(--md-sys-color-surface-container); }
.resumen-acciones { display: flex; flex-wrap: wrap; gap: var(--e3); }
.reglas ul { margin: 0; padding-left: var(--e5); display: flex; flex-direction: column; gap: var(--e2); }
/* === fin T8 resumen === */
/* === T8 avisos === */
.t8-te-toca { display: flex; flex-direction: column; gap: var(--e1); margin: var(--e4) 0; padding: var(--e5); border-radius: var(--r-xl);
  background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.t8-te-toca[hidden] { display: none; }
.t8-te-toca p { margin: 0; font-size: 1.125rem; }
.t8-te-toca .t8-te-toca-titulo { font: var(--pa-w-display) 2.25rem/1 var(--pa-letra); }
.t8-te-toca .t8-te-toca-estacion { font: var(--pa-w-titulo) 1.75rem/1.1 var(--pa-letra); }
.t8-interruptor { min-height: 48px; gap: var(--e2); cursor: pointer; }
.t8-interruptor input { width: 20px; height: 20px; accent-color: var(--md-sys-color-primary); }
/* === fin T8 avisos === */

/* === T10 auspiciadores === */
.aus { display: flex; flex-direction: column; gap: var(--e2); }
.aus-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.aus-logo { display: block; max-width: 100%; height: auto; object-fit: contain; }
.aus-oscuro { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) .aus-claro + .aus-oscuro { display: block; } :root:not([data-tema='claro']) .aus-claro:has(+ .aus-oscuro) { display: none; } }
:root[data-tema='oscuro'] .aus-claro + .aus-oscuro { display: block; }
:root[data-tema='oscuro'] .aus-claro:has(+ .aus-oscuro) { display: none; }
.aus-tira { padding: var(--e4); border-radius: var(--r-l2); background: var(--md-sys-color-surface-container-low); }
.aus-tira .aus-item { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--e2) var(--e3); border-radius: var(--r-l); background: #fff; }
.aus-tira .aus-item a { display: block; }
.aus-tira .aus-item .aus-logo { max-height: 40px; max-width: 140px; }
.aus-tira .aus-item.principal .aus-logo { max-height: 64px; max-width: 220px; }
.aus-tira .aus-item:has(.aus-oscuro) { background: transparent; padding: var(--e2) 0; }
/* TV del venue: pie con los logos, en unidades de pantalla */
.aus-pantalla { margin-top: 2vw; padding: 1.2vw 1.6vw; border-radius: 1.6vw; background: var(--md-sys-color-surface-container); flex-direction: row; align-items: center; gap: 2vw; }
.aus-pantalla .aus-titulo { margin: 0; font-size: 1vw; white-space: nowrap; }
.aus-pantalla .aus-lista { gap: 1.6vw; }
.aus-pantalla .aus-item { display: flex; align-items: center; padding: 0.5vw 1vw; border-radius: 1vw; background: #fff; }
.aus-pantalla .aus-logo { max-height: 3.4vw; max-width: 12vw; }
.aus-pantalla .aus-item.principal .aus-logo { max-height: 5vw; max-width: 18vw; }
/* Overlay de OBS: sin fondo, esquina superior derecha */
.aus-overlay { position: fixed; top: 32px; right: 40px; align-items: flex-end; }
.aus-overlay .aus-lista { flex-direction: column; align-items: flex-end; gap: 14px; }
.aus-overlay .aus-logo { max-height: 56px; max-width: 200px; filter: drop-shadow(0 1px 4px rgb(0 0 0 / 0.5)); }
.aus-overlay .aus-item.principal .aus-logo { max-height: 96px; max-width: 320px; }
/* Pantallas de organizar */
.aus-admin-lista { display: flex; flex-direction: column; gap: var(--e3); }
.aus-fila { display: flex; align-items: center; gap: var(--e3); padding: var(--e3); border-radius: var(--r-l); background: var(--md-sys-color-surface-container-high); flex-wrap: wrap; }
.aus-fila.inactivo { opacity: 0.6; }
.aus-miniatura { width: 88px; height: 56px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--r-s); background: #fff; overflow: hidden; }
.aus-miniatura.negra { background: #111; }
.aus-miniatura img { max-width: 100%; max-height: 100%; object-fit: contain; }
.aus-fila .miembro-info { min-width: 8rem; }
.aus-fila form { margin: 0; }
.aus-fichas { display: flex; flex-wrap: wrap; gap: var(--e2); }
.aus-fichas form { margin: 0; }
button.chip.aus-ficha { min-height: 48px; padding: 0 var(--e4); border: 0; cursor: pointer; font-size: 0.9375rem; color: var(--md-sys-color-on-surface); }
/* === fin T10 auspiciadores === */
/* === T10 estaciones === */
.t10-cantidades { display: flex; flex-wrap: wrap; gap: var(--e3); }
.t10-cantidad { display: grid; place-items: center; min-width: 72px; min-height: 72px; padding: 0 var(--e3); border: 0; border-radius: var(--r-l); cursor: pointer;
  background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); font: var(--pa-w-display) 1.75rem/1 var(--pa-letra);
  transition: border-radius var(--resorte-t) var(--resorte), background-color var(--efecto-t) var(--efecto); }
.t10-cantidad small { font: var(--pa-w-medio) 0.75rem/1 var(--pa-letra); }
.t10-cantidad.activa { border-radius: var(--r-full); background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.t10-tarjetas { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.t10-tarjeta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e2); padding: var(--e4); border-radius: var(--r-xl);
  background: var(--md-sys-color-surface-container); min-width: 0; }
.t10-tarjeta.jugando { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.t10-tarjeta.jugando .tenue { color: inherit; opacity: 0.8; }
.t10-tarjeta.stream { outline: 3px solid var(--md-sys-color-tertiary-container); outline-offset: -3px; }
.t10-tarjeta .boton.grande { width: 100%; justify-content: center; min-height: 56px; }
.t10-tarjeta > form { width: 100%; }
.t10-nombre { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; font: var(--pa-w-display) 1.5rem/1.1 var(--pa-letra); }
.t10-quien { font: var(--pa-w-titulo) 1.125rem/1.25 var(--pa-letra); overflow-wrap: anywhere; }
.t10-cola { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); }
.t10-cola li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--e2) var(--e3); padding: var(--e3); border-radius: var(--r-l);
  background: var(--md-sys-color-surface-container); }
.t10-cola li > .acciones-fila { grid-column: 1 / -1; }
.t10-cola li.esperando { opacity: 0.65; }
.t10-cola .chip.activa { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.t10-pos { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-full); background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container); font: var(--pa-w-display) 1rem/1 var(--pa-letra); }
.t10-cola-quien { display: flex; flex-direction: column; gap: var(--e1); min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 640px) { .t10-cola li { grid-template-columns: auto minmax(0, 1fr) auto; } .t10-cola li > .acciones-fila { grid-column: auto; } }
/* === fin T10 estaciones === */
/* === T10 tercer lugar === */
/* Crear torneo: la pregunta del tercer lugar solo se ve con "Eliminación" escogida (sin JS). */
.crear .solo-sencilla { display: none; }
.crear:has(input[name="bracket_type"][value="single"]:checked) .solo-sencilla { display: flex; }
/* Bracket: el tercer lugar va aparte, debajo de la final, separado del árbol. */
.bracket-tercer { padding-top: var(--e3); border-top: 1px dashed var(--md-sys-color-outline-variant); }
/* === fin T10 tercer lugar === */

/* === T12 accesibilidad === */
/* Etiqueta de modo de las portadas: el color del texto sale del tono de la portada para llegar a 4.5:1. */
.portada.t0 .portada-modo, .portada.t2 .portada-modo, .portada.t4 .portada-modo { color: var(--c1); }
/* "Saltar al contenido" aparece cuando recibe el foco con el teclado. */
a.sr:focus, a.sr:focus-visible { position: fixed; z-index: 100; top: 8px; left: 8px; width: auto; height: auto; clip: auto; overflow: visible; padding: 12px 20px; border-radius: var(--r-full);
  background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); font: var(--pa-w-titulo) 1rem/1.2 var(--pa-letra); text-decoration: none; }
/* Movimiento reducido: nada de resortes, transiciones, íconos flotantes ni desplazamiento suave. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .portada-forma, .portada-icono { animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
/* Encabezados h2 que se ven como h3 (la jerarquía real baja de h1 a h2 sin saltos). */
input[type=file] { min-height: 46px; }
/* Letra grande: las etiquetas largas pasan a otra línea en vez de empujar la página (las que se deslizan siguen en una). */
.chip { white-space: normal; padding-block: 4px; line-height: 1.2; }
.chips.desliza .chip { white-space: nowrap; }
/* Con letra grande, una tabla ancha se desliza dentro de su marco en vez de ensanchar la página. */
.seccion, .bracket, .bracket-seccion, main > * { min-width: 0; }
h2.nivel3 { font: var(--pa-w-medio) 1.125rem/1.3 var(--pa-letra); letter-spacing: normal; }
.tarjeta.destacada h2.nivel3 { color: inherit; }
/* === fin T12 accesibilidad === */

/* === T13 stream === */
.t13-stream { display: flex; flex-direction: column; gap: var(--e3); }
.t13-stream-marco { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: var(--r-xl); overflow: hidden;
  background: var(--md-sys-color-surface-container-high); }
.t13-stream-poster { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e3);
  padding: var(--e4); text-align: center; color: var(--md-sys-color-on-surface); }
.t13-stream-poster > svg { width: 40px; height: 40px; fill: var(--md-sys-color-primary); }
.t13-stream-titulo { margin: 0; font: var(--pa-w-titulo) 1.125rem/1.2 var(--pa-letra); overflow-wrap: anywhere; }
.t13-stream-aviso { margin: 0; font-size: .875rem; }
.t13-stream-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.t13-stream-enlaces { flex-wrap: wrap; }
/* === fin T13 stream === */
/* === T13 puerta === */
/* Mi QR: siempre negro sobre blanco (un lector necesita ese contraste, también en modo oscuro). */
.mi-qr { margin-block: var(--e3); }
.mi-qr summary { list-style: none; display: grid; justify-items: center; gap: var(--e2); cursor: pointer; }
.mi-qr summary::-webkit-details-marker { display: none; }
.mi-qr-marco { display: block; width: min(60vw, 240px); background: #fff; border-radius: var(--r-m); padding: 0; line-height: 0; overflow: hidden; }
.mi-qr-marco svg, .qr { display: block; width: 100%; height: auto; }
.mi-qr-codigo { font: 700 2rem/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.35em; padding-left: 0.35em; }
.mi-qr-ayuda { font-size: 0.875rem; }
.mi-qr-cerrar { display: none; }
.mi-qr[open] summary { position: fixed; inset: 0; z-index: 200; background: #fff; color: #000; align-content: center; padding: var(--e4); }
.mi-qr[open] .mi-qr-marco { width: min(88vw, 70vh, 520px); }
.mi-qr[open] .mi-qr-codigo { font-size: 3.5rem; }
.mi-qr[open] .mi-qr-abrir { display: none; }
.mi-qr[open] .mi-qr-cerrar { display: block; }
/* Página que abre el QR (mesa) y pantalla de la puerta. */
.puerta-qr { display: grid; gap: var(--e4); justify-items: start; }
.puerta-nombre { font-size: 2.25rem; line-height: 1.1; overflow-wrap: anywhere; }
.puerta-boton { width: 100%; min-height: 72px; font-size: 1.375rem; }
.puerta-qr form { width: 100%; }
.puerta-cuenta { font-size: 1.5rem; }
.puerta-form { display: grid; gap: var(--e3); }
.puerta-codigo { min-height: 72px; font: 700 2.25rem/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.35em; text-transform: uppercase; text-align: center; width: 100%; }
/* === fin T13 puerta === */
/* === T13 paradas === */
.chip.pd-cancelada { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); border-radius: var(--r-full); }
.pd-parada { gap: var(--e6); }
.pd-fecha { display: flex; align-items: center; gap: var(--e4); }
.pd-dia { display: grid; place-items: center; flex: none; width: 96px; height: 96px; -webkit-mask: var(--forma-galleta); mask: var(--forma-galleta);
  background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); font: var(--pa-w-display) 2.75rem/1 var(--pa-letra); letter-spacing: -0.03em; }
.pd-resto { display: flex; flex-direction: column; gap: var(--e1); min-width: 0; }
.pd-fecha-larga { font: var(--pa-w-titulo) 1.375rem/1.2 var(--pa-letra); overflow-wrap: anywhere; }
.pd-fecha-larga::first-letter { text-transform: uppercase; }
.pd-hora { display: inline-flex; align-items: center; gap: var(--e1); color: var(--md-sys-color-on-surface-variant); }
.pd-hora svg, .pd-lugar svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.pd-tachada .pd-fecha-larga { text-decoration: line-through; }
.pd-lugar { display: flex; align-items: flex-start; gap: var(--e2); margin: 0; }
.pd-lugar svg { margin-top: 2px; color: var(--md-sys-color-primary); }
.pd-torneos { list-style: none; margin: 0; padding: 0; }
.pd-torneos .chips { margin-top: var(--e1); }
.pd-proxima { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4); padding: var(--e5); border-radius: var(--r-xl);
  background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.pd-proxima-forma { display: grid; place-items: center; flex: none; width: 56px; height: 56px; -webkit-mask: var(--forma-galleta); mask: var(--forma-galleta); background: currentColor; }
.pd-proxima-forma svg { width: 28px; height: 28px; fill: var(--md-sys-color-tertiary-container); }
.pd-proxima-txt { flex: 1 1 200px; min-width: 0; }
.pd-proxima-txt h2, .pd-proxima-txt p { margin: 0; color: inherit; }
.pd-proxima .boton { background: var(--md-sys-color-on-tertiary-container); color: var(--md-sys-color-tertiary-container); }
.pd-formulario { max-width: 520px; }
.pd-formulario textarea { border: 0; border-bottom: 2px solid var(--md-sys-color-on-surface-variant); border-radius: var(--r-s) var(--r-s) 0 0; padding-block: var(--e3);
  background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); font: var(--pa-w-texto) 1rem/1.4 var(--pa-letra); resize: vertical; }
.pd-horas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.pd-horas .campo { min-width: 0; }
.pd-fichas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.pd-ficha { position: relative; display: block; cursor: pointer; }
.pd-ficha input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pd-ficha-cara { display: flex; flex-direction: column; gap: 2px; min-height: 64px; justify-content: center; padding: var(--e3) var(--e4); border-radius: var(--r-l);
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); border: 2px solid transparent; }
.pd-ficha-nombre { font-weight: var(--pa-w-titulo); }
.pd-ficha-ayuda { font-size: 0.875rem; color: var(--md-sys-color-on-surface-variant); }
.pd-ficha input:checked + .pd-ficha-cara { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: var(--md-sys-color-primary); }
.pd-ficha input:checked + .pd-ficha-cara .pd-ficha-ayuda { color: inherit; }
.pd-ficha input:checked + .pd-ficha-cara .pd-ficha-nombre::before { content: '✓ '; }
.pd-ficha input:focus-visible + .pd-ficha-cara { outline: 3px solid var(--md-sys-color-primary); outline-offset: 2px; }
/* === fin T13 paradas === */
/* === T13 fotos === */
.fotos-rejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e3); }
.fotos-rejilla li { display: flex; flex-direction: column; gap: var(--e1); min-width: 0; }
.foto-ficha { display: block; border-radius: var(--r-m); overflow: hidden; background: var(--md-sys-color-surface-container-high); line-height: 0; }
.foto-ficha img { width: 100%; height: auto; object-fit: cover; display: block; }
.foto-ficha:focus-visible, .foto-retirar:focus-visible { outline: 3px solid var(--md-sys-color-primary); outline-offset: 2px; }
.foto-retirar { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.8125rem; color: var(--md-sys-color-on-surface-variant); text-decoration: underline; }
.foto-dialogo { border: 0; padding: 0; margin: auto; max-width: 100vw; max-height: 100dvh; width: 100vw; height: 100dvh; background: #000; color: #fff; }
.foto-dialogo::backdrop { background: rgba(0, 0, 0, 0.85); }
.foto-dialogo figure { margin: 0; height: 100%; display: grid; grid-template-rows: 1fr auto; padding-bottom: 72px; }
.foto-dialogo img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.foto-dialogo figcaption { padding: var(--e3) var(--e4); font-size: 0.9375rem; }
.foto-dialogo figcaption a { color: #fff; text-decoration: underline; display: inline-flex; align-items: center; min-height: 44px; }
.foto-dialogo-barra { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; padding: var(--e2) var(--e4); background: rgba(0, 0, 0, 0.6); }
.foto-dialogo-barra .boton-icono { min-width: 48px; min-height: 48px; color: #fff; }
.foto-dialogo-barra svg { fill: #fff; }
.foto-dialogo button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.fotos-admin { list-style: none; margin: var(--e3) 0 0; padding: 0; display: grid; gap: var(--e4); }
.foto-admin { display: grid; gap: var(--e3); padding: var(--e3); border-radius: var(--r-m); background: var(--md-sys-color-surface-container); }
.foto-admin img { width: 100%; max-width: 320px; height: auto; border-radius: var(--r-s); }
.foto-admin-datos { display: grid; gap: var(--e3); }
.foto-admin-acciones { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.foto-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fotos-retirar img { max-width: 100%; height: auto; border-radius: var(--r-m); }
@media (min-width: 640px) { .fotos-rejilla { grid-template-columns: repeat(3, 1fr); } .foto-admin { grid-template-columns: 240px 1fr; } }
@media (prefers-reduced-motion: reduce) { .foto-dialogo, .foto-ficha img { transition: none; animation: none; } }
/* === fin T13 fotos === */
/* === T13 premios === */
.prem-lista { display: grid; gap: var(--e3); }
.prem-tarjeta { display: grid; gap: var(--e3); padding: var(--e4); border-radius: var(--r-l); background: var(--md-sys-color-surface-container-high); }
.prem-cabeza { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.prem-cabeza form { margin: 0; display: flex; }
.prem-cabeza .miembro-info { flex: 1 1 8rem; min-width: 0; overflow-wrap: anywhere; }
.prem-puesto { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 40px; padding: 0 var(--e3); border-radius: var(--r-full);
  background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); font-weight: 700; white-space: nowrap; }
.prem-quien { margin: 0; overflow-wrap: anywhere; }
.prem-entrega, .prem-hecho { display: grid; gap: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--md-sys-color-outline-variant); }
.prem-hecho p { margin: 0; }
.prem-hecho form { margin: 0; }
.prem-entrega .boton.grande { width: 100%; min-height: 64px; }
.prem-grupo { border: 0; margin: 0; padding: 0; display: grid; gap: var(--e2); min-width: 0; }
.prem-grupo legend { font-weight: var(--pa-w-medio); padding: 0; margin-bottom: var(--e2); }
.prem-opciones { display: flex; flex-wrap: wrap; gap: var(--e2); }
.prem-op { position: relative; display: inline-flex; }
.prem-op input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.prem-op span { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 56px; padding: 0 var(--e4); border-radius: var(--r-full);
  background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); font-size: 1rem; border: 2px solid transparent; }
.prem-op input:checked + span { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: var(--md-sys-color-primary); font-weight: 700; }
.prem-op input:focus-visible + span { outline: 3px solid var(--md-sys-color-primary); outline-offset: 2px; }
@supports selector(:has(*)) {
  .prem-form:not(:has(input[name='puesto'][value='otro']:checked)) .prem-campo-otro,
  .prem-form:not(:has(input[name='puesto'][value='especial']:checked)) .prem-campo-especial { display: none; }
}
.prem-pub { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.prem-pub-item { display: flex; align-items: center; gap: var(--e3); padding: var(--e3); border-radius: var(--r-l); background: var(--md-sys-color-surface-container-high); }
.prem-pub-item .prem-info { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.prem-ganador { display: inline-flex; align-items: center; gap: var(--e1); font-weight: var(--pa-w-medio); color: var(--md-sys-color-primary); }
.prem-ganador svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
/* === fin T13 premios === */
/* === T13 avisos === */
.t13-push { display: grid; gap: .5rem; margin-block: .5rem; }
.t13-push [hidden], .t13-push-lista [hidden] { display: none !important; } /* .boton y la lista ponen display: ganaría a [hidden] */
.t13-push-estado:empty { display: none; }
.t13-push[data-estado="activo"] .t13-push-estado { color: var(--md-sys-color-primary); font-weight: 700; }
.t13-push[data-estado="bloqueado"] .t13-push-estado, .t13-push[data-estado="error"] .t13-push-estado { color: var(--md-sys-color-error); }
.t13-push-ios { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: .25rem; }
.t13-push-lista .fila { flex-wrap: wrap; }
.t13-discord-alerta { border-inline-start: 4px solid var(--md-sys-color-error); }
.t13-discord-guardado { justify-self: start; overflow-wrap: anywhere; }
/* === fin T13 avisos === */
/* === T13 estadisticas === */
.kda-nota { font-size: 0.875rem; }
.kda-lista { display: grid; gap: var(--e3); }
.kda-mapa { border-radius: var(--r-l2); background: var(--md-sys-color-surface-container); padding: var(--e2) var(--e3) var(--e3); min-width: 0; }
.kda-mapa > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); min-height: 48px; cursor: pointer; list-style: none; padding: var(--e2) 0; }
.kda-mapa > summary::-webkit-details-marker { display: none; }
.kda-mapa-titulo { font-weight: var(--pa-w-titulo); font-size: 1.125rem; flex: 1 1 auto; }
.kda-mapa form { display: grid; gap: var(--e4); margin: 0; }
.kda-revisa p { margin: 0; }
.kda-rejilla { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 4px; font-variant-numeric: tabular-nums; }
.kda-rejilla caption { text-align: left; font-weight: var(--pa-w-titulo); padding: var(--e2) 0; overflow-wrap: anywhere; }
.kda-rejilla thead th { font: var(--pa-w-medio) 0.8125rem/1 var(--pa-letra); letter-spacing: 0.04em; color: var(--md-sys-color-on-surface-variant); text-align: center; padding: var(--e1) 0; }
.kda-rejilla thead th:first-child { text-align: left; width: 30%; }
.kda-rejilla abbr { text-decoration: none; }
.kda-quien { text-align: left; font-weight: var(--pa-w-medio); overflow-wrap: anywhere; vertical-align: middle; padding-right: var(--e1); }
.kda-mesa { display: block; font-size: 0.75rem; font-weight: 400; }
.kda-rejilla td { padding: 0; vertical-align: middle; }
.kda-paso { display: grid; grid-template-rows: 44px 48px 44px; gap: 2px; min-width: 0; }
.kda-paso button { display: grid; place-items: center; width: 100%; min-width: 44px; min-height: 44px; border: 0; cursor: pointer; border-radius: var(--r-m);
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); transition: border-radius var(--resorte-t, 200ms) var(--resorte, ease); }
.kda-paso button:active { border-radius: var(--r-full); }
.kda-paso button svg { width: 24px; height: 24px; fill: currentColor; }
.kda-paso button[disabled] { opacity: 0.38; cursor: default; }
.kda-paso .kda-menos { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); }
.kda-paso input { width: 100%; min-width: 0; box-sizing: border-box; min-height: 48px; padding: 0 2px; text-align: center; font: var(--pa-w-display) 1.375rem/1 var(--pa-letra);
  border: 0; border-bottom: 2px solid var(--md-sys-color-on-surface-variant); border-radius: var(--r-s) var(--r-s) 0 0;
  background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); }
.kda-paso input:focus { outline: none; border-bottom-color: var(--md-sys-color-primary); }
.kda-guardar { width: 100%; }
.kda-mapas { display: grid; gap: var(--e4); }
.kda-torneo .tabla td, .kda-torneo .tabla th { text-align: right; }
.kda-torneo .tabla td.quien, .kda-torneo .tabla th:first-child { text-align: left; }
.kda-torneo .tabla tr td:first-child { width: auto; }
.kda-mvp { display: grid; gap: var(--e1); padding: var(--e4); border-radius: var(--r-l2); background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.kda-mvp p { margin: 0; overflow-wrap: anywhere; }
.kda-mvp .etiqueta { color: inherit; }
.kda-mvp .n { font: var(--pa-w-display) 1.75rem/1.1 var(--pa-letra); }
.kda-jugador { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.kda-jugador-juego { display: grid; gap: var(--e2); padding: var(--e4); border-radius: var(--r-l2); background: var(--md-sys-color-surface-container-high); min-width: 0; }
.kda-jugador-juego h3 { margin: 0; }
.kda-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr)); gap: var(--e2); margin: 0; }
.kda-cifras div { display: grid; gap: 2px; min-width: 0; }
.kda-cifras dt { font-size: 0.75rem; color: var(--md-sys-color-on-surface-variant); }
.kda-cifras dd { margin: 0; font: var(--pa-w-display) 1.25rem/1.1 var(--pa-letra); font-variant-numeric: tabular-nums; }
/* === fin T13 estadisticas === */

/* === T14 arte de juegos === */
/* Las carátulas son 2:3 con el logo abajo o arriba: se enseñan enteras (ya todos los juegos tienen la suya). */
.portada.con-arte { background: var(--md-sys-color-surface-container-highest); aspect-ratio: 2 / 3; }
.portada.con-arte.chica { aspect-ratio: 1; }
.portada.con-arte.chica .portada-arte { object-position: 50% 30%; }
.portada-arte { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; z-index: -1; }
.portada.con-arte .portada-modo { background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); }
@media (prefers-reduced-motion: no-preference) {
  a:hover > .portada.con-arte .portada-arte, a:focus-visible > .portada.con-arte .portada-arte { transform: scale(1.04); }
  .portada-arte { transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1); }
}
/* === fin T14 arte de juegos === */
/* === T14 avatares === */
/* Avatar redondo de jugador: la inicial de color siempre debajo; la imagen encima (si falla, app.js la quita). */
.avatar-j { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--lado); height: var(--lado);
  border-radius: var(--r-full); overflow: hidden; vertical-align: middle; font: var(--pa-w-display) calc(var(--lado) * 0.46)/1 var(--pa-letra); }
.avatar-j.c0 { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.avatar-j.c1 { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.avatar-j.c2 { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.avatar-j.c3 { background: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary); }
.avatar-j.c4 { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.avatar-j-ini { user-select: none; }
.avatar-j-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; background: var(--md-sys-color-surface-container-high); }
/* Filas con avatar: el avatar entra antes del nombre sin cambiar la rejilla de .fila */
.av-con { display: flex; align-items: center; gap: var(--e3); min-width: 0; }
.av-con > :last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Cabecera del perfil y Mi cuenta */
.perfil-heroe .avatar-j { box-shadow: 0 0 0 6px var(--md-sys-color-surface-container-high); }
.av-cuenta { display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap; padding: var(--e4); border-radius: var(--r-xl); background: var(--md-sys-color-surface-container-high); }
.av-cuenta-acciones { display: flex; flex-direction: column; gap: var(--e3); flex: 1 1 14rem; min-width: 0; }
.av-cuenta-acciones form { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.av-cuenta-acciones input[type=file] { flex: 1 1 12rem; min-width: 0; max-width: 100%; }
.av-cuenta-acciones .boton { min-height: 48px; }
.av-regla { margin: 0; font-size: 0.875rem; color: var(--md-sys-color-on-surface-variant); }
/* Ficha de inscritos en Organizar: el avatar ocupa el lugar de la ficha */
.fichas li.llego .avatar-j { box-shadow: 0 0 0 3px var(--md-sys-color-secondary); }
/* === fin T14 avatares === */

/* === T14 buscar-y-agenda === */
.buscador { display: grid; gap: var(--e3); max-width: 40rem; }
.buscador .campo input { width: 100%; box-sizing: border-box; }
.buscador .boton { justify-self: start; }
.buscador .boton svg, .agenda-vacio .boton svg { width: 24px; height: 24px; fill: currentColor; }
.agenda-vacio { display: grid; gap: var(--e3); justify-items: start; padding: var(--e5); border-radius: var(--r-l2); background: var(--md-sys-color-surface-container-high); }
.agenda-vacio p { margin: 0; }
.agenda-ahora.llamado { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.agenda-ahora.llamado .principal, .agenda-ahora.llamado .secundario { color: inherit; }
.agenda .fila > svg { width: 24px; height: 24px; fill: currentColor; }
.agenda .fila .principal, .busqueda .fila .principal { white-space: normal; overflow-wrap: anywhere; }
.busqueda .fila .secundario { overflow-wrap: anywhere; }
/* === fin T14 buscar-y-agenda === */
/* === T14 equipos === */
/* Logo de equipo: cuadrado redondeado (el avatar de jugador es redondo). Las iniciales siempre debajo; la imagen encima. */
.logo-eq { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--lado); height: var(--lado);
  border-radius: calc(var(--lado) * 0.28); overflow: hidden; vertical-align: middle; font: var(--pa-w-display) calc(var(--lado) * 0.4)/1 var(--pa-letra); }
.logo-eq.c0 { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.logo-eq.c1 { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.logo-eq.c2 { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.logo-eq.c3 { background: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary); }
.logo-eq.c4 { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.logo-eq-ini { user-select: none; }
.logo-eq-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; background: var(--md-sys-color-surface-container-high); }
/* Cabecera de la página del equipo */
.equipo-heroe .logo-eq { box-shadow: 0 0 0 6px var(--md-sys-color-surface-container-high); }
.equipo-heroe > div { min-width: 0; flex: 1 1 14rem; }
.equipo-juego { display: inline-flex; align-items: center; gap: var(--e3); min-height: 48px; color: inherit; text-decoration: none; font-weight: var(--pa-w-titulo); }
.equipo-juego .portada { width: 32px; flex: none; }
.equipo-bio { margin: var(--e2) 0; max-width: 60ch; overflow-wrap: anywhere; }
.podio .logo-eq { display: grid; margin-inline: auto; }
.fila .av-con .logo-eq { flex: none; }
/* === fin T14 equipos === */

/* === T14 visitas === */
.t14v-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--e3); margin: 0; }
.t14v-cifras div { display: grid; gap: var(--e1); padding: var(--e4); border-radius: var(--r-l2); background: var(--md-sys-color-surface-container-high); }
.t14v-cifras dd { margin: 0; font: var(--pa-w-display) 2rem/1.1 var(--pa-letra); font-variant-numeric: tabular-nums; }
.t14v-grafica { display: flex; align-items: flex-end; gap: 2px; height: 10rem; padding: var(--e3); border-radius: var(--r-l2); background: var(--md-sys-color-surface-container-high); }
.t14v-dia { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.t14v-barra { display: block; width: 100%; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--md-sys-color-primary); }
.t14v-barra.u { position: absolute; bottom: 0; width: 55%; background: var(--md-sys-color-tertiary); }
.t14v-eje { display: flex; justify-content: space-between; gap: var(--e2); margin: 0; font-size: 0.75rem; }
.t14v-fila { grid-template-columns: minmax(0, 1fr) auto auto; }
.t14v-fila strong { min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
/* === fin T14 visitas === */

/* === T14 rangos-alcance === */
.t14-alcances-chips { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e3); }
.t14-baldosa { max-width: 22rem; margin-bottom: var(--e4); }
.t14-alcance-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--e3); align-items: end;
  padding: var(--e4); border-radius: var(--r-xl); background: var(--md-sys-color-surface-container); }
.t14-alcance-form label { display: grid; gap: var(--e1); font-weight: 700; color: var(--md-sys-color-on-surface-variant); min-width: 0; }
.t14-alcance-form select { min-height: 48px; width: 100%; padding: 0 var(--e3); border: 0; border-radius: var(--r-m);
  background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); font: inherit; font-weight: 600; }
.t14-alcance-form .boton { min-height: 48px; }
.t14-alcances .miembro-info .chip { white-space: normal; }
/* === fin T14 rangos-alcance === */

/* === T14 reglas-y-sanciones === */
.t14-casilla { display: grid; gap: var(--e2); flex: 1 1 100%; margin-bottom: var(--e3); }
.t14-check { display: flex; align-items: flex-start; gap: var(--e3); min-height: 48px; padding: var(--e2) var(--e3); border-radius: var(--r-l);
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); line-height: 1.35; cursor: pointer; }
.t14-check input { flex: none; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--md-sys-color-primary); }
.t14-check a { color: var(--md-sys-color-primary); font-weight: var(--pa-w-medio); }
.t14-casilla .error { font-size: 0.875rem; color: var(--md-sys-color-error); }
.t14-tutor { display: grid; gap: var(--e3); margin: 0; padding: var(--e4); border: 0; border-radius: var(--r-xl); background: var(--md-sys-color-surface-container); min-width: 0; }
.t14-tutor legend { padding: 0; font-weight: var(--pa-w-titulo); }
@supports selector(:has(*)) { .t14-casilla:not(:has(input[name='soy_menor']:checked)) .t14-tutor:not(.siempre) { display: none; } }
.t14-borrador { margin: 0; font-size: 0.8125rem; }
.t14-form-reglas { display: grid; gap: var(--e2); }
.t14-aviso-reglas { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); border-radius: var(--r-xl); }
.t14-aviso-reglas h2 { display: flex; align-items: center; gap: var(--e2); color: inherit; }
.t14-aviso-reglas h2 svg { width: 24px; height: 24px; fill: currentColor; }
.t14-aviso-reglas p { margin: 0; }
.t14-reglas-extra .t14-texto { padding: var(--e4); border-radius: var(--r-l2); background: var(--md-sys-color-surface-container-low); line-height: 1.5; overflow-wrap: anywhere; }
.chip.t14-alerta { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); border-radius: var(--r-full); }
.t14-fila { grid-template-columns: auto minmax(0, 1fr) auto; }
.t14-fila .miembro-info { overflow-wrap: anywhere; }
.t14-lista > li { display: grid; }
.t14-papel, .t14-lista > li > .t14-roster { padding: 0 var(--e4) var(--e3); margin: 0; }
.t14-roster { list-style: none; display: grid; gap: var(--e1); }
.t14-roster li { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); flex-wrap: wrap; min-height: 48px; padding-left: var(--e3);
  border-left: 3px solid var(--md-sys-color-outline-variant); }
.t14-roster form { margin: 0; }
.t14-mesa-enlaces { display: flex; flex-wrap: wrap; gap: var(--e2); margin: 0; }
.t14-suspendido { display: grid; gap: var(--e3); }
.t14-suspendido p, .t14-suspendido form { margin: 0; }
.t14-solo-suspension { display: grid; gap: var(--e4); padding: var(--e4); border-radius: var(--r-xl); background: var(--md-sys-color-surface-container); }
@supports selector(:has(*)) { .t14-sancion-form:not(:has(input[name='type'][value='suspension']:checked)) .t14-solo-suspension { display: none; } }
.t14-enlace { color: var(--md-sys-color-primary); font-weight: var(--pa-w-medio); min-height: 48px; display: inline-flex; align-items: center; }
.t14-version { font-variant-numeric: tabular-nums; font-size: 0.8125rem; }
@media (max-width: 599px) { .t14-fila { grid-template-columns: auto minmax(0, 1fr); } .t14-fila > :last-child:not(:only-child) { grid-column: 1 / -1; justify-self: start; } }
/* === fin T14 reglas-y-sanciones === */

/* === T14 idiomas === */
.t14-idioma { display: inline-flex; gap: var(--e1); align-items: center; }
.t14-idioma button { min-width: 48px; min-height: 48px; padding-inline: var(--e3); border: 0; border-radius: var(--r-full); background: transparent; color: inherit; font: inherit; font-weight: var(--pa-w-medio); cursor: pointer; }
.t14-idioma button[aria-current='true'] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.t14-idioma button:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }
/* «Tournaments» es más largo que «Torneos»: a 390 px cada pestaña de abajo tiene ~78 px. */
.nav-abajo a { min-width: 0; text-align: center; }
html[lang='en'] .nav-abajo a { font-size: 0.6875rem; letter-spacing: -0.01em; }
/* === fin T14 idiomas === */

/* === T14 cabos === */
.agenda-calendario .agenda-enlace { width: 100%; box-sizing: border-box; min-height: 48px; margin: var(--e3) 0; padding: 0 var(--e4); border: 0; border-radius: var(--r-md, 12px);
  background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); font: inherit; font-size: 0.875rem; }
.agenda-calendario .agenda-enlace:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }
.agenda-calendario .acciones-fila .boton { min-height: 48px; }
/* === fin T14 cabos === */
/* === T14 liga === */
.t14-liga-alerta { border-inline-start: 4px solid var(--md-sys-color-error); }
.t14-liga-guardado { justify-self: start; overflow-wrap: anywhere; }
.t14-liga-estado { display: grid; gap: var(--e3); }
.t14-liga-estado p, .t14-liga-estado form { margin: 0; }
.t14-liga-estado form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.t14-salud-aviso { border-inline-start: 4px solid var(--md-sys-color-error); overflow-wrap: anywhere; }
/* === fin T14 liga === */

/* === T14 qr-variable === */
/* QR vivo del jugador: barra que se vacía en cada ventana de 30 s, y el aviso que lo reemplaza sin JS o sin conexión. */
.qrv-vivo { display: grid; justify-items: center; gap: var(--e2); }
.qrv-vivo[hidden], .qrv-sin[hidden] { display: none; }
.qrv-tiempo { display: block; width: min(60vw, 240px); height: 8px; border-radius: var(--r-full); background: var(--md-sys-color-surface-container-highest); overflow: hidden; }
.qrv-barra { display: block; height: 100%; background: var(--md-sys-color-primary); transform-origin: left center; transform: scaleX(1); }
.qrv-barra.qrv-suave { transition: transform 1s linear; }
.qrv-cambia { font-weight: 700; font-size: 0.9375rem; min-height: 1.25em; }
.qrv-sin { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); border-radius: var(--r-m); background: var(--md-sys-color-surface-container-highest); font-weight: 600; text-align: start; }
.mi-qr[open] .qrv-tiempo { width: min(88vw, 70vh, 520px); height: 12px; background: #ddd; }
.mi-qr[open] .qrv-barra { background: #000; }
.mi-qr[open] .qrv-cambia { font-size: 1.25rem; }
.mi-qr[open] .qrv-sin { background: #fff; color: #000; }
@media (prefers-reduced-motion: reduce) { .qrv-barra.qrv-suave { transition: none; } }
/* Mesa: QR rechazado (rojo y grande) y a quién es el QR vigente (avatar grande para comparar con la persona). */
.qrv-rechazo { display: grid; gap: var(--e2); width: 100%; padding: var(--e5) var(--e4); border-radius: var(--r-xl);
  background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.qrv-rechazo h1, .qrv-rechazo svg { color: inherit; }
.qrv-rechazo h1 { margin: 0; font-size: 2.5rem; line-height: 1.05; font-weight: 800; }
.qrv-rechazo p { margin: 0; font-size: 1.25rem; font-weight: 700; }
.qrv-rechazo .icono, .qrv-rechazo svg { width: 48px; height: 48px; }
.qrv-quien { display: flex; gap: var(--e3); align-items: center; }
.puerta-vencido { margin: 0; }
/* === fin T14 qr-variable === */
/* === T14 pasada-navegador === */
/* Arreglos vistos en las capturas de la pasada de navegador (tests/Browser/*Test.php de la tanda 14). */
/* Subir avatar / logo: el selector de archivo del sistema salía sin estilo y de ~30 px de alto; ahora es un botón tonal de 48 px. */
.av-cuenta-acciones input[type=file] { font: inherit; font-size: 0.875rem; color: var(--md-sys-color-on-surface-variant); }
.av-cuenta-acciones input[type=file]::file-selector-button { min-height: 48px; margin-right: var(--e3); padding: 0 var(--e4); border: 0; border-radius: var(--r-full);
  background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); font: inherit; font-weight: var(--pa-w-medio); cursor: pointer; }
/* Perfil: la tilde de Ñ/Á/É del gamertag gigante chocaba con la etiqueta «Jugador» de arriba. */
.perfil-heroe .etiqueta + .display { margin-top: 0.12em; }
/* Pie: el selector ES/EN (botones de 48 px) quedaba más bajo que «Horas en hora de Puerto Rico»; y los enlaces legales medían 44 px. */
.pie-sitio .contenedor { align-items: center; }
.pie-legal a { min-height: 48px; }
/* Tutor de menores: la leyenda quedaba a caballo del borde del recuadro (media sobre la tarjeta, media dentro); ahora va dentro. */
.t14-tutor legend { float: left; width: 100%; }
/* Organizar → Discord: «Qué se publica» (donde ahora va «Mencionar a los jugadores») salía con el borde gris del fieldset del navegador. */
fieldset.campo { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
fieldset.campo > legend { padding: 0; font-weight: 700; }
/* === fin T14 pasada-navegador === */
/* === T14 remates === */
/* Páginas de error (resources/views/errors). */
.error-pagina { margin-block: var(--e6); }
.error-acciones { display: flex; flex-wrap: wrap; gap: var(--e3); justify-content: center; }
/* Logo de la barra: nunca en dos líneas. A 390 px con «Entrar» o cuatro íconos no cabía y se partía: se achica un poco y «POR OGM» se oculta con la barra llena. */
.marca, .marca > span { white-space: nowrap; }
.marca { flex: 0 1 auto; min-width: 0; }
@media (max-width: 440px) {
  .marca { gap: var(--e1); font-size: 1.0625rem; }
  .marca-forma { width: 32px; height: 32px; flex: none; }
  .marca-forma svg { width: 18px; height: 18px; }
  .barra .contenedor { gap: var(--e2); }
  .barra .contenedor:has(.barra-acciones > :nth-child(4)) .marca small { display: none; }
}
/* Roster del equipo: el rol (chip de Capitán o texto de Titular/Suplente) ocupa una columna de ancho fijo y los avatares quedan alineados. */
.fila-miembro { grid-template-columns: 6.5rem minmax(0, 1fr); }
.fila-miembro > .chip { justify-self: start; justify-content: center; min-width: 6.5rem; box-sizing: border-box; text-align: center; }
/* === fin T14 remates === */
/* === T14 qr-de-la-mesa === */
/* Jugador (390 px): «Enséñale esta pantalla a la mesa», con el número enorme para que la mesa lo lea a un metro. */
.pm { display: grid; gap: var(--e4); justify-items: stretch; }
.pm-bloque[hidden] { display: none; }
.pm-bloque { display: grid; gap: var(--e4); }
.pm-titulo { margin: 0; font-size: 2rem; line-height: 1.1; font-weight: 800; }
.pm-tarjeta { display: grid; justify-items: center; gap: var(--e2); padding: var(--e5) var(--e4); border-radius: var(--r-xl2);
  background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); text-align: center; }
.pm-tag { margin: 0; font-size: 1.75rem; font-weight: 800; overflow-wrap: anywhere; }
.pm-equipo { margin: 0; font-size: 1.125rem; font-weight: 700; }
.pm-numero { margin: 0; font: 900 clamp(6rem, 38vw, 10rem)/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.04em; }
.pm-ayuda { margin: 0; font-weight: 600; }
.pm-listo { display: grid; justify-items: start; gap: var(--e2); padding: var(--e5) var(--e4); border-radius: var(--r-xl);
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.pm-listo h1 { margin: 0; font-size: 2.25rem; line-height: 1.05; font-weight: 800; color: inherit; }
.pm-listo svg { width: 48px; height: 48px; fill: currentColor; }
.pm-elegir { display: grid; gap: var(--e3); padding: 0; list-style: none; }
.pm-elegir .boton { width: 100%; }

/* Mesa (tablet / laptop / proyector): QR grande a la izquierda, cola a la derecha; en teléfono, uno debajo del otro. */
.pmq { display: grid; gap: var(--e6); align-items: start; }
@media (min-width: 900px) { .pmq { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.pmq-qr { display: grid; justify-items: center; gap: var(--e3); text-align: center; }
.pmq-marco { width: min(100%, 72vh, 620px); background: #fff; border-radius: var(--r-xl); padding: var(--e4); line-height: 0; box-sizing: border-box; }
.pmq-marco svg { display: block; width: 100%; height: auto; }
.pmq-marco.pmq-viejo { opacity: 0.12; }
.pmq-tiempo { width: min(100%, 72vh, 620px); height: 12px; }
.pmq-cambia { margin: 0; font-size: 1.5rem; font-weight: 800; }
.pmq-instruccion { margin: 0; font-size: 1.25rem; font-weight: 700; max-width: 32ch; }
.pmq-sin { display: flex; gap: var(--e3); align-items: flex-start; padding: var(--e5); border-radius: var(--r-xl);
  background: var(--md-sys-color-surface-container-highest); font-size: 1.125rem; text-align: start; }
.pmq-sin p { margin: 0; }
.pmq-lado { display: grid; gap: var(--e3); min-width: 0; }
.pmq-vacia { margin: 0; padding: var(--e5); border-radius: var(--r-xl); background: var(--md-sys-color-surface-container); font-weight: 700; text-align: center; }
.pmq-cola { display: grid; gap: var(--e3); margin: 0; padding: 0; list-style: none; }
.pmq-ficha { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'av quien num' 'bot bot bot';
  gap: var(--e3) var(--e4); align-items: center; padding: var(--e4); border-radius: var(--r-xl);
  background: var(--md-sys-color-surface-container-high); }
.pmq-ficha > .avatar-j { grid-area: av; }
.pmq-quien { grid-area: quien; display: grid; gap: var(--e1); min-width: 0; }
.pmq-quien p { margin: 0; }
.pmq-tag { font-size: 1.375rem; font-weight: 800; overflow-wrap: anywhere; }
.pmq-equipo { font-weight: 700; color: var(--md-sys-color-on-surface-variant); }
.pmq-numero { grid-area: num; margin: 0; font: 900 3.5rem/1 ui-monospace, 'SF Mono', Menlo, monospace; }
/* «No es» a la izquierda y «Llegó» a la derecha, con aire en medio: que no se toque uno por el otro. */
.pmq-botones { grid-area: bot; display: flex; justify-content: space-between; gap: var(--e7); }
.pmq-botones form { flex: 1 1 0; }
.pmq-botones .boton { width: 100%; min-height: 56px; font-size: 1.125rem; }
.pmq-si { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.pmq-no { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.pmq-solo { background: var(--md-sys-color-surface-container); }
.pmq-ajustes { display: grid; gap: var(--e2); padding: var(--e4); border-radius: var(--r-xl); background: var(--md-sys-color-surface-container); }
.pmq-ajustes p, .pmq-auto { margin: 0; }
/* === fin T14 qr-de-la-mesa === */

/* === T14 legal === */
.legal-borrador { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); font-size: 1rem; }
.legal-vigencia { margin: 0; color: var(--md-sys-color-on-surface-variant); font-size: 0.9375rem; }
.legal-nav a { min-height: 48px; }
.legal-corto { padding: var(--e5); border-radius: var(--r-xl); background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); display: flex; flex-direction: column; gap: var(--e3); }
.legal-corto h2 { margin: 0; font: var(--pa-w-titulo) 1.25rem/1.2 var(--pa-letra); }
.legal-corto ul { font-weight: 600; }
.legal-dato { overflow-wrap: anywhere; }
.legal a { overflow-wrap: anywhere; }
.t14-legal-aviso a { font-weight: 700; }
.t14-permiso-hoja { display: flex; flex-direction: column; gap: var(--e4); padding: var(--e5); border-radius: var(--r-xl); background: var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface)); color: var(--md-sys-color-on-surface); border: 1px solid var(--md-sys-color-outline-variant); font-size: 1rem; line-height: 1.45; }
.t14-permiso-hoja p, .t14-permiso-hoja ul, .t14-permiso-hoja dl { margin: 0; }
.t14-permiso-cab h1 { margin: 0; font: var(--pa-w-titulo) 1.5rem/1.15 var(--pa-letra); }
.t14-permiso-marca { font-weight: 800; letter-spacing: .02em; color: var(--md-sys-color-primary); }
.t14-permiso-lineas { display: grid; gap: var(--e3); }
.t14-permiso-lineas div { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e1); }
.t14-permiso-lineas dt { font-weight: 700; font-size: .875rem; }
.t14-permiso-lineas dd { margin: 0; min-height: 1.9rem; border-bottom: 1.5px solid var(--md-sys-color-on-surface); }
@media (min-width: 640px) { .t14-permiso-lineas div { grid-template-columns: 15rem minmax(0, 1fr); align-items: end; } }
.t14-permiso-casillas { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--e3); }
.t14-permiso-casillas li { display: grid; grid-template-columns: auto 1fr; gap: var(--e3); align-items: start; }
.t14-caja { display: inline-block; width: 1.1rem; height: 1.1rem; border: 2px solid var(--md-sys-color-on-surface); border-radius: 3px; vertical-align: middle; margin-top: .15rem; }
.t14-permiso-letra { font-size: .875rem; color: var(--md-sys-color-on-surface-variant); }
.t14-permiso-firmas { display: grid; gap: var(--e5); grid-template-columns: 2fr 1fr; padding-top: var(--e5); }
.t14-permiso-firmas div { display: flex; flex-direction: column; gap: var(--e1); font-size: .875rem; }
.t14-linea { display: block; height: 2.2rem; border-bottom: 1.5px solid var(--md-sys-color-on-surface); }
.t14-permiso-pie { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); justify-content: space-between; font-size: .8125rem; color: var(--md-sys-color-on-surface-variant); border-top: 1px solid var(--md-sys-color-outline-variant); padding-top: var(--e3); }
@media print {
  @page { size: letter; margin: 14mm; }
  body:has(.t14-permiso) { background: #fff !important; color: #000 !important; }
  body:has(.t14-permiso) .barra, body:has(.t14-permiso) .pie-sitio, body:has(.t14-permiso) .nav-abajo,
  body:has(.t14-permiso) .aviso, body:has(.t14-permiso) .sr, .t14-permiso-pantalla { display: none !important; }
  body:has(.t14-permiso) main, .t14-permiso { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .t14-permiso-hoja { border: 0; padding: 0; border-radius: 0; background: #fff; color: #000; font-size: 11pt; gap: 10pt; break-inside: avoid; }
  .t14-permiso-hoja * { color: #000 !important; }
  .t14-permiso-lineas div { grid-template-columns: 62mm 1fr; align-items: end; }
  .t14-permiso-lineas dd, .t14-linea { border-color: #000; }
  .t14-caja { border-color: #000; }
}
/* === fin T14 legal === */

/* === T14 duenos === */
.t14-duenos h3 { margin: var(--e5) 0 var(--e2); font-size: 1.125rem; font-weight: 800; }
.t14-duenos .miembro-info { flex-wrap: wrap; overflow-wrap: anywhere; }
.t14-duenos .miembro-info .chip { white-space: normal; }
.t14-duenos-persona { flex-wrap: wrap; }
.t14-duenos-quitar { display: grid; gap: var(--e2); flex: 1 1 100%; padding: var(--e3); border-radius: var(--r-l); background: var(--md-sys-color-surface-container); }
.t14-duenos-quitar label, .t14-duenos-form label { display: grid; gap: var(--e1); font-weight: 700; color: var(--md-sys-color-on-surface-variant); min-width: 0; }
.t14-duenos-quitar input, .t14-duenos-form input, .t14-duenos-form select { min-height: 48px; width: 100%; padding: 0 var(--e3); border: 0; border-radius: var(--r-m);
  background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); font: inherit; font-weight: 600; }
.t14-duenos-quitar input:focus-visible, .t14-duenos-form input:focus-visible, .t14-duenos-form select:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }
.t14-duenos-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--e3); align-items: end;
  padding: var(--e4); border-radius: var(--r-xl); background: var(--md-sys-color-surface-container); }
.t14-duenos-form .boton, .t14-duenos-quitar .boton { min-height: 48px; }
.t14-duenos-invitacion { flex-wrap: wrap; }
.t14-duenos-email { overflow-wrap: anywhere; }
.t14-duenos-acciones { display: flex; gap: var(--e2); align-items: center; }
.t14-duenos-tabla { margin-bottom: var(--e4); }
.t14-duenos-tabla .tabla td { white-space: normal; text-align: center; }
.t14-duenos-tabla .tabla tr td:first-child { width: auto; min-width: 10rem; text-align: left; font-weight: 600; }
.t14-duenos-tabla .tabla th { text-align: center; }
.t14-duenos-tabla .tabla th:first-child { text-align: left; }
/* === fin T14 duenos === */