/* Seguimiento público: cómo va cada categoría, los puntos y el historial. Solo lectura, con la energía en la entrada.
   Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · marca USKA1 (negro, rojo, oro; Anton + Barlow Condensed + Inter). */
body.seguimiento { min-height: 100dvh; background: radial-gradient(ellipse 70% 40% at 50% -5%, rgba(212, 164, 55, .12), transparent 60%), var(--negro); display: flex; flex-direction: column; }
.contenido { width: 100%; max-width: 1100px; margin: 0 auto; padding: 28px 20px 56px; flex: 1; }
.nota { color: var(--humo); font-size: 14px; line-height: 1.5; margin: 0; text-wrap: pretty; }
.vacio { padding: 28px; border-radius: var(--r-m); border: 1px dashed var(--linea-fuerte); color: var(--humo); font-size: 14px; text-align: center; }
.pie-seg { padding: 18px 20px; text-align: center; font-size: var(--mini); color: var(--humo); border-top: 1px solid var(--linea); }

/* Íconos dibujados en CSS (máscara), nunca glifos sueltos. */
.icono { display: inline-block; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat; flex: none; }
.icono.volver { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3 5 8l5 5'/%3E%3C/svg%3E"); }
.icono.ir { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E"); }
.icono.gana { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3 3 7-7'/%3E%3C/svg%3E"); width: 14px; height: 14px; }

/* ---------- Portada ---------- */
.portada-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.portada-marca .barra-roja { width: 44px; height: 10px; background: var(--rojo); clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%); flex: none; }
.portada-marca span:not(.barra-roja) { font-family: var(--cifra); font-weight: 600; font-size: 18px; text-transform: uppercase; letter-spacing: .04em; color: var(--oro); }
.portada h1 { font-size: var(--t-1); line-height: .9; }
.portada h1 span { display: block; }
.campeonatos.solo { grid-template-columns: minmax(0, 600px); }
.portada .bajada { margin: 16px 0 0; max-width: 58ch; font-size: 16px; color: var(--humo); line-height: 1.55; text-wrap: pretty; }
.campeonatos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; margin-top: 32px; }
.campeonato { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 18px; border-radius: var(--r-l); background: linear-gradient(160deg, var(--carbon-2), var(--carbon) 60%); border: 1px solid var(--linea); color: var(--hueso); text-align: left; cursor: pointer; font: inherit; transition: transform 180ms var(--curva), border-color 160ms ease; }
.campeonato:active { transform: scale(.98); }
.campeonato-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.campeonato h2 { font-size: var(--t-3); line-height: .95; }
.campeonato .anio { font-family: var(--cifra); font-weight: 600; font-size: 34px; line-height: 1; color: var(--oro); flex: none; font-variant-numeric: tabular-nums; }
.campeonato .estado-camp { font-size: var(--chico); color: var(--humo); margin-top: -8px; }
.campeonato ul.fechas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--linea); }
.campeonato ul.fechas li { display: grid; grid-template-columns: 10px auto 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: 14px; }
.campeonato .marca-estado { width: 10px; height: 10px; background: var(--linea-fuerte); }
.campeonato .marca-estado.viva { background: var(--oro); }
.campeonato .marca-estado.abierta { background: var(--verde-texto); }
.campeonato .fecha-n { font-family: var(--cifra); font-weight: 600; font-size: 17px; letter-spacing: .02em; }
.campeonato .cuando { color: var(--humo); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campeonato .estado-fecha { font-size: var(--chico); color: var(--hueso); white-space: nowrap; }
.campeonato .ir { display: inline-flex; align-items: center; gap: 8px; color: var(--oro-texto); font-weight: 600; font-size: 14px; margin-top: 2px; }
.campeonato .ir .icono { transition: transform 180ms var(--curva); }

/* ---------- Un campeonato: cabecera, pestañas y vista ---------- */
.cabeza { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.cabeza h1 { font-size: var(--t-2); line-height: .95; max-width: 20ch; }
.cabeza .sub { color: var(--humo); font-size: 14px; margin: 0; }
.volver { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 40px; padding: 0 14px 0 10px; border-radius: 999px; background: none; border: 1px solid var(--linea-fuerte); color: var(--hueso); cursor: pointer; font: 600 14px var(--texto); transition: border-color 140ms ease, color 140ms ease, transform 140ms var(--curva); }
.volver:active { transform: scale(.97); }

/* Pestañas con píldora que se desliza */
.pestanas { position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--linea); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin-bottom: 20px; -webkit-overflow-scrolling: touch; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button { position: relative; z-index: 1; flex: none; border: 0; background: none; cursor: pointer; color: var(--humo); font-weight: 600; font-size: 14px; padding: 9px 16px; border-radius: 10px; min-height: 44px; white-space: nowrap; transition: color 160ms ease; }
.pestanas button[aria-current="page"] { color: var(--negro); }
.pestanas .pildora { position: absolute; top: 4px; left: 0; height: calc(100% - 8px); border-radius: 10px; background: var(--hueso); transition: transform 260ms var(--curva), width 260ms var(--curva); will-change: transform; }

/* Cascada al entrar: máximo 8 piezas con retraso, el resto aparece junto */
.cascada > * { animation: entra 300ms var(--curva) both; }
.cascada > :nth-child(2) { animation-delay: 40ms; } .cascada > :nth-child(3) { animation-delay: 80ms; } .cascada > :nth-child(4) { animation-delay: 120ms; }
.cascada > :nth-child(5) { animation-delay: 160ms; } .cascada > :nth-child(6) { animation-delay: 200ms; } .cascada > :nth-child(7) { animation-delay: 240ms; } .cascada > :nth-child(n+8) { animation-delay: 280ms; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

/* Ficha de la fecha: día, lugar y estado en una sola línea con separadores. */
.ficha-fecha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 16px; font-size: 14px; color: var(--humo); }
.ficha-fecha b { font-family: var(--cifra); font-weight: 600; font-size: 19px; color: var(--hueso); letter-spacing: .01em; }
.ficha-fecha .estado { color: var(--oro-texto); font-weight: 600; }
.ficha-fecha .provisional { width: 100%; font-size: var(--chico); }

/* ---------- Categorías ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filtros select, .filtros input { min-height: 44px; padding: 0 12px; border-radius: var(--r-s); background: var(--carbon); border: 1px solid var(--linea-fuerte); color: var(--hueso); font-size: 14px; color-scheme: dark; transition: border-color 140ms ease; }
.filtros input { flex: 1; min-width: min(100%, 200px); }
.filtros input::placeholder { color: var(--humo); }
.grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.grupo { padding: 16px 18px; border-radius: var(--r-m); background: var(--carbon); border: 1px solid var(--linea); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.grupo.abrible { cursor: pointer; transform-origin: center; transition: transform 180ms var(--curva), border-color 160ms ease, box-shadow 180ms ease; }
.grupo.abrible:active { transform: scale(.98); }
.grupo .resumen { margin: 0; font-size: 14px; color: var(--hueso); line-height: 1.45; }
.grupo .ir { display: inline-flex; align-items: center; gap: 8px; color: var(--oro-texto); font-weight: 600; font-size: 14px; margin-top: auto; }
.grupo .ir .icono { transition: transform 180ms var(--curva); }
.grupo.terminado { border-color: rgba(127, 216, 164, .3); }
.grupo-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 12px; }
.grupo-cabeza h3 { font-size: var(--t-4); line-height: 1; }
.grupo-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.grupo-cabeza .clase { font-family: var(--cifra); font-weight: 600; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--oro-texto); }
.grupo-meta .sub { font-size: var(--chico); color: var(--humo); margin: 0; }
.etiqueta { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: var(--mini); font-weight: 600; border: 1px solid var(--linea-fuerte); color: var(--humo); white-space: nowrap; }
.etiqueta.verde { border-color: rgba(127, 216, 164, .4); color: var(--verde-texto); }
.etiqueta.oro { border-color: var(--linea-oro); color: var(--oro-texto); }
.etiqueta.rojo { border-color: rgba(215, 25, 45, .5); color: var(--rojo-texto); }
.peleas { display: flex; flex-direction: column; gap: 6px; }
.pelea { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: 'eti eti eti' 'azul vs rojo'; align-items: center; gap: 6px 10px; padding: 9px 12px; border-radius: var(--r-s); background: var(--negro); border: 1px solid var(--linea); font-size: 14px; }
.pelea .eti { grid-area: eti; }
.pelea .lado.azul { grid-area: azul; }
.pelea .vs { grid-area: vs; }
.pelea .lado.rojo { grid-area: rojo; }
.pelea .eti { font-family: var(--cifra); font-weight: 600; font-size: 15px; letter-spacing: .04em; color: var(--humo); white-space: nowrap; }
.pelea .lado { min-width: 0; overflow-wrap: anywhere; font-weight: 600; display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.pelea .lado small { font-weight: 500; font-size: 11px; color: var(--humo); }
.pelea .lado.azul { color: var(--azul-texto); }
.pelea .lado.rojo { color: var(--rojo-texto); text-align: right; align-items: flex-end; }
.pelea .lado.espera { color: var(--humo); font-weight: 500; }
.pelea .lado .nombre-gana { display: inline-flex; align-items: center; gap: 6px; color: var(--oro-texto); }
.pelea .vs { font-family: var(--cifra); font-weight: 600; color: var(--oro); font-size: 15px; }
.participantes { display: flex; flex-wrap: wrap; gap: 6px; }
.participantes button, .participantes span { padding: 6px 11px; border-radius: 999px; background: var(--negro); border: 1px solid var(--linea); font: 500 13px var(--texto); color: var(--hueso); cursor: pointer; min-height: 32px; transition: border-color 140ms ease, transform 140ms var(--curva); }
.participantes button:active { transform: scale(.96); }
.participantes span { cursor: default; }
.resultados { display: flex; flex-direction: column; gap: 6px; }
.resultado { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: var(--r-s); background: var(--negro); border: 1px solid var(--linea); font-size: 14px; }
.resultado .puesto { font-family: var(--cifra); font-weight: 600; font-size: 17px; color: var(--humo); margin-right: 8px; font-variant-numeric: tabular-nums; }
.resultado b { font-family: var(--cifra); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.resultado.primero { border-color: var(--linea-oro); }
.resultado.primero .puesto, .resultado.primero b { color: var(--oro-texto); }

/* ---------- Ranking: podio y tabla que se reordena ---------- */
.podio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; margin: 10px 0 20px; }
.podio .puesto { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding: 14px 10px 12px; border-radius: 14px 14px 0 0; background: var(--carbon); border: 1px solid var(--linea); border-bottom: 4px solid var(--oro); text-align: center; animation: sube 480ms var(--curva) both; transform-origin: bottom; min-width: 0; }
.podio .puesto.p1 { order: 2; min-height: 176px; }
.podio .puesto.p2 { order: 1; min-height: 136px; border-bottom-color: #C9D1E0; animation-delay: 60ms; }
.podio .puesto.p3 { order: 3; min-height: 110px; border-bottom-color: #D08A4E; animation-delay: 120ms; }
.podio .numero { font-family: var(--titulo); font-size: 40px; line-height: 1; color: var(--oro); }
.podio .p2 .numero { color: #C9D1E0; } .podio .p3 .numero { color: #D08A4E; }
.podio .nombre { font-weight: 600; font-size: 14px; max-width: 100%; overflow-wrap: anywhere; }
.podio .pts { font-family: var(--cifra); font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.podio small { color: var(--humo); font-size: var(--mini); }
@keyframes sube { from { transform: scaleY(.6); opacity: 0; } }
.empate { margin: -8px 0 16px; text-align: center; }
.tabla-envoltura { overflow: auto; border-radius: var(--r-m); border: 1px solid var(--linea); background: var(--carbon); }
table.tabla { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.tabla th { position: sticky; top: 0; z-index: 1; background: var(--carbon-2); text-align: left; font-weight: 600; font-size: var(--mini); color: var(--humo); padding: 10px 12px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla th.num, .tabla td.num { text-align: right; }
.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--linea); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .num { font-family: var(--cifra); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tabla .total { color: var(--oro-texto); }
.tabla td.sin { color: var(--humo); font-weight: 500; }
.tabla tr.movida td { animation: destaca 900ms ease; }
@keyframes destaca { from { background: rgba(212, 164, 55, .18); } }
.tabla button.nombre { background: none; border: 0; color: var(--hueso); font: 600 14px var(--texto); cursor: pointer; padding: 6px 0; text-align: left; min-height: 36px; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color 140ms ease, color 140ms ease; }
.tabla .team { color: var(--humo); font-size: var(--mini); }
.actualizado { margin: 14px 0 0; font-size: var(--mini); color: var(--humo); text-align: right; }

/* ---------- Detalle de una categoría (la tarjeta viaja hasta aquí) ---------- */
#app { transition: filter 240ms ease; }
#app.borroso { filter: blur(10px) saturate(.9); }
dialog.detalle { width: min(720px, calc(100vw - 24px)); max-height: 88dvh; padding: 0; border: 1px solid var(--linea-oro); border-radius: var(--r-l); background: var(--carbon); color: var(--hueso); overflow: hidden; box-shadow: var(--sombra); display: none; flex-direction: column; transform-origin: top left; }
dialog.detalle[open] { display: flex; }
dialog.detalle::backdrop { background: rgba(0, 0, 0, .62); animation: fondo-entra 240ms ease both; }
@keyframes fondo-entra { from { opacity: 0; } }
.detalle-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 16px; border-bottom: 1px solid var(--linea); }
.detalle-cabeza h2 { font-size: var(--t-3); line-height: .95; }
.detalle-cabeza .sub { margin: 6px 0 0; color: var(--humo); font-size: var(--chico); }
.detalle-cuerpo { overflow: auto; overscroll-behavior: contain; padding: 16px 24px 24px; display: flex; flex-direction: column; gap: 18px; }
.detalle-titulo { font-family: var(--cifra); font-weight: 600; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--oro-texto); margin: 0 0 8px; }
@media (max-width: 640px) { .detalle-cabeza { padding: 16px 16px 12px; } .detalle-cuerpo { padding: 14px 16px 20px; } }

/* ---------- Ficha del peleador ---------- */
dialog.ficha { width: min(560px, calc(100vw - 24px)); max-height: 86dvh; padding: 24px; border: 1px solid var(--linea-oro); border-radius: var(--r-l); background: var(--carbon); color: var(--hueso); overflow: auto; box-shadow: var(--sombra); }
dialog.ficha::backdrop { background: rgba(0, 0, 0, .7); }
dialog.ficha[open] { animation: ficha-entra 240ms var(--curva); }
@keyframes ficha-entra { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.ficha h2 { font-size: 38px; line-height: .95; }
.ficha .team { color: var(--humo); font-size: 14px; margin-top: 6px; }
.titulos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0; }
.titulos div { padding: 12px 8px; border-radius: 12px; background: var(--negro); border: 1px solid var(--linea-oro); text-align: center; }
.titulos b { display: block; font-family: var(--cifra); font-size: 32px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.titulos small { color: var(--humo); font-size: 11px; }
.historial { display: flex; flex-direction: column; gap: 6px; }
.historial div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; padding: 8px 10px; border-radius: var(--r-s); background: var(--negro); border: 1px solid var(--linea); font-size: 13px; }
.historial b { font-family: var(--cifra); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ficha .cerrar { margin-top: 16px; display: flex; justify-content: flex-end; }

@media (max-width: 640px) {
  .contenido { padding: 20px 14px 44px; }
  .pelea { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'eti' 'azul' 'rojo'; }
  .pelea .lado.rojo { text-align: left; align-items: flex-start; }
  .pelea .vs { display: none; }
  .campeonato ul.fechas li { grid-template-columns: 10px auto 1fr; }
  .campeonato .estado-fecha { grid-column: 2 / -1; margin-top: -4px; color: var(--humo); }
  .podio .numero { font-size: 32px; }
  .podio .pts { font-size: 22px; }
}
@media (hover: hover) and (pointer: fine) {
  .campeonato:hover { transform: translateY(-3px); border-color: var(--linea-oro); }
  .campeonato:hover .ir .icono { transform: translateX(4px); }
  .grupo.abrible:hover { transform: translateY(-3px); border-color: var(--linea-oro); box-shadow: var(--sombra); }
  .grupo.abrible:hover .ir .icono { transform: translateX(4px); }
  .participantes button:hover { border-color: var(--oro); }
  .volver:hover { border-color: var(--oro); color: var(--oro-texto); }
  .pestanas button:not([aria-current="page"]):hover { color: var(--hueso); }
  .tabla button.nombre:hover { color: var(--oro-texto); text-decoration-color: currentColor; }
  .filtros select:hover, .filtros input:hover { border-color: var(--oro); }
}
@media (prefers-reduced-motion: reduce) { .cascada > *, .podio .puesto, .tabla tr.movida td, dialog.detalle::backdrop { animation: none; } #app.borroso { filter: none; } }