@font-face {
  font-family: "Archivo";
  src: url("/web/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
:root {
  --volt: #B7F652; --volt-ink: #0E1217;
  --sus: #D01D21; --sus2: #A20711; --pos: #FFB831; --pos2: #E48E26; --win: #137738;
  --bg: #F2F3F6; --surface: #FFFFFF; --surface2: #EBEDF0;
  --ink: #0E1217; --ink2: #4F5359; --line: #D8DBDF; --line2: #A1A5AB;
  --sus-bg: #FFECE9; --sus-ink: #BB0916; --pos-bg: #FFF4D7; --pos-ink: #8A4C00; --next-bg: #E9FED3;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #07090C; --surface: #13161B; --surface2: #1E2228;
    --ink: #F3F5F8; --ink2: #ADB1B8; --line: #2B2E33; --line2: #606369;
    --sus-bg: #301715; --sus-ink: #FF8579; --pos-bg: #2C1F09; --pos-ink: #FAC463; --next-bg: #1D280C;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Archivo", system-ui, sans-serif; font-size: 15px; line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.pagina { max-width: 560px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.contenido { padding: 14px 12px 32px; display: flex; flex-direction: column; gap: 12px; flex: 1; }

.cabecera {
  position: relative; overflow: hidden; background: var(--club); color: var(--sobre);
  padding: max(20px, env(safe-area-inset-top)) 16px 18px; display: flex; flex-direction: column; gap: 12px;
}
.cabecera.con-circulo::after {
  content: ""; position: absolute; right: -70px; top: 10px; width: 220px; height: 220px;
  border-radius: 50%; border: 28px solid var(--club2); pointer-events: none;
}
.cabecera > * { position: relative; z-index: 1; }
.marca { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 900; font-stretch: 66%; font-size: 15px; text-transform: uppercase; }
.marca i { width: 14px; height: 14px; border-radius: 4px; background: var(--volt); border: 1.5px solid currentColor; }
.club-linea { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.escudo {
  flex: none; display: grid; place-items: center; overflow: hidden;
  background: var(--club); color: var(--sobre); font-weight: 900; font-stretch: 75%;
  box-shadow: inset 0 calc(var(--t) * -0.16) 0 var(--club2), 0 0 0 2px var(--anillo);
  width: var(--t); height: var(--t); border-radius: calc(var(--t) * 0.23);
  font-size: calc(var(--t) * 0.32); padding-bottom: calc(var(--t) * 0.13);
}
.escudo img { width: 100%; height: 100%; object-fit: cover; }
.titulo { margin: 0; font-weight: 900; font-stretch: 66%; text-transform: uppercase; line-height: 0.95; }
.t-30 { font-size: 30px; } .t-36 { font-size: 36px; } .t-44 { font-size: 44px; } .t-46 { font-size: 46px; }
.sub { font-size: 13px; font-weight: 600; }
.sub b { font-weight: 900; }
.chapas { display: flex; gap: 8px; flex-wrap: wrap; }
.chapa {
  height: 28px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 5px;
  font-size: 13px; font-weight: 900; font-stretch: 75%; letter-spacing: .06em; text-transform: uppercase;
  border: 1.5px solid currentColor;
}
.chapa.llena { border: 0; background: var(--sobre); color: var(--club); }
.chapa.verde { border: 0; background: var(--win); color: #fff; }
.chapa.punteada { border-style: dashed; }

.cinta { display: flex; height: 34px; background: repeating-linear-gradient(-45deg, var(--a1) 0 10px, var(--a2) 10px 20px); }
.cinta span { background: var(--a1); color: var(--aon); padding: 0 14px; display: flex; align-items: center; font-size: 15px; font-weight: 900; font-stretch: 75%; letter-spacing: .06em; text-transform: uppercase; }

.boton {
  display: flex; align-items: center; justify-content: center; height: 54px; padding: 0 22px;
  background: var(--volt); color: var(--volt-ink); text-decoration: none; border: 0; cursor: pointer;
  font: inherit; font-size: 17px; font-weight: 900; font-stretch: 72%; letter-spacing: .06em; text-transform: uppercase;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.boton.gris { background: var(--surface2); color: var(--ink); height: 46px; font-size: 14px; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.boton.tinta { background: var(--ink); color: var(--bg); }
.abrir { display: flex; flex-direction: column; gap: 8px; }
.nota { font-size: 13px; line-height: 1.4; color: var(--ink2); text-align: center; margin: 0; }
.tiendas { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.tiendas a { font-size: 13px; font-weight: 800; }

.rotulo { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); padding: 4px 4px 0; margin: 0; }
.seccion { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 4px 0; }
.seccion h2 { margin: 0; font-size: 15px; font-weight: 900; font-stretch: 70%; text-transform: uppercase; }
.seccion a { font-size: 12px; font-weight: 800; white-space: nowrap; }
.tarjeta { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.tarjeta.grande { border-radius: 20px; }
.tarjeta.hueca { background: transparent; border: 2px dashed var(--line2); border-radius: 20px; }
.cabeza-dia { height: 40px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; }
.cabeza-dia b { font-size: 15px; font-weight: 900; font-stretch: 66%; text-transform: uppercase; }
.cabeza-dia span { font-size: 12px; font-weight: 600; color: var(--ink2); }

.fila {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 10px; align-items: center;
  min-height: 56px; padding: 6px 14px; border-top: 1px solid var(--line); text-decoration: none; background: var(--fondo, transparent);
}
.fila.fixture { grid-template-columns: 34px 64px minmax(0, 1fr) auto; min-height: 54px; }
.fila.simple { grid-template-columns: minmax(0, 1fr) auto; min-height: 50px; }
.tarjeta > .fila:first-child { border-top: 0; }
.fila .j { font-size: 12px; font-weight: 800; color: var(--ink2); font-variant-numeric: tabular-nums; }
.hora { font-weight: 900; font-stretch: 62%; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.hora.chica { font-size: 23px; } .hora.media { font-size: 21px; }
.hora.tenue { color: var(--line2); } .hora.gris { color: var(--ink2); }
.hora.tachada-sus { text-decoration: line-through; text-decoration-color: var(--sus); text-decoration-thickness: 3px; color: var(--ink2); }
.hora.tachada-pos { text-decoration: line-through; text-decoration-color: var(--pos2); text-decoration-thickness: 3px; color: var(--ink2); }
.que { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.que b { font-weight: 800; }
.que .uno { font-size: 15px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.que .dos { font-size: 12px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila.fixture .uno, .fila.fixture .dos { white-space: normal; }
.fila.suspendido { --fondo: var(--sus-bg); } .fila.suspendido .dos { color: var(--sus-ink); font-weight: 700; }
.fila.postergado { --fondo: var(--pos-bg); } .fila.postergado .dos { color: var(--pos-ink); font-weight: 700; }
.fila.proximo { --fondo: var(--next-bg); }
.fila.atenuado .uno { color: var(--ink2); }
.flecha { color: var(--ink2); font-size: 18px; }

.etiqueta {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; white-space: nowrap;
  font-size: 11px; font-weight: 900; font-stretch: 75%; letter-spacing: .06em; text-transform: uppercase;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.etiqueta.sus { background: var(--sus); color: #fff; }
.etiqueta.pos { background: var(--pos); color: var(--volt-ink); }
.etiqueta.prox { background: var(--volt); color: var(--volt-ink); height: 20px; font-size: 10px; }
.etiqueta.borde { clip-path: none; border-radius: 5px; border: 1.5px solid currentColor; padding: 0 7px; }
.etiqueta.punteada { clip-path: none; border-radius: 5px; border: 1.5px dashed currentColor; padding: 0 7px; }
.etiqueta.libre { clip-path: none; border-radius: 5px; border: 1.5px solid var(--ink2); color: var(--ink2); padding: 0 7px; }
.letra { width: 24px; height: 24px; border-radius: 5px; display: grid; place-items: center; font-size: 13px; font-weight: 900; }
.letra.G { background: var(--win); color: #fff; } .letra.P { background: var(--ink); color: var(--bg); } .letra.E { border: 1.5px solid var(--ink); }

.horas { display: grid; grid-template-columns: 1.4fr 1fr; }
.horas > div { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.horas > div + div { background: var(--surface2); justify-content: center; }
.rot { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
.enorme { font-size: 76px; line-height: 0.9; }
.h-40 { font-size: 40px; }
.caja { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.caja .nombre { font-size: 20px; font-weight: 800; }
.caja .dir { font-size: 13px; color: var(--ink2); }
.motivo { padding: 12px 16px; font-size: 15px; line-height: 1.4; }
.motivo.sus { background: var(--sus-bg); color: var(--sus-ink); }
.motivo.pos { background: var(--pos-bg); color: var(--pos-ink); }
.marcador { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 10px; align-items: end; }
.marcador .lado { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.marcador .lado:last-child { align-items: flex-end; }
.marcador .lado b { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.marcador .num { font-size: 84px; line-height: .85; }
.marcador .guion { font-size: 40px; color: var(--ink2); padding-bottom: 10px; }
.sets { display: flex; gap: 6px; border-top: 1px solid var(--line); }
.sets div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 8px; }
.dato { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 46px; padding: 4px 16px; font-size: 14px; }
.dato span { color: var(--ink2); }
.dato a { font-weight: 800; white-space: nowrap; }

.vacio { padding: 28px 8px; display: flex; flex-direction: column; gap: 14px; }
.franja { height: 28px; background: repeating-linear-gradient(-45deg, var(--line) 0 9px, transparent 9px 18px); }
.vacio p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink2); }
.portada { padding: 40px 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.portada > .titulo { font-size: 64px; line-height: .92; }
.portada p { margin: 0; font-size: 17px; line-height: 1.45; color: var(--ink2); }
.puntos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.puntos li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 15px; line-height: 1.4; }
.puntos li::before { content: "✓"; width: 26px; height: 26px; display: grid; place-items: center; background: var(--volt); color: var(--volt-ink); font-weight: 900; clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.pie { padding: 18px 16px 28px; font-size: 12px; color: var(--ink2); text-align: center; }
.pie a { font-weight: 700; }
[hidden] { display: none !important; }