/* AHP — Liga +40 Bravecto (3ª Edición): el sistema de la APP.
 *
 * Lo que comparten la portada, /liga40/partidos y /liga40/clasificacion: los tokens del skin, el
 * lienzo, los módulos y las filas de partido. Vive en UN archivo y no en tres copias dentro de tres
 * <style> — la lección del menú de hamburguesa, que estaba pegado en dieciocho páginas.
 * Cada página conserva inline sólo lo suyo (el hero de la portada, la tabla de la clasificación).
 *
 * app.css se sirve tal cual (Cloudflare no recompila Tailwind para este proyecto), así que este
 * archivo re-apunta los tokens del tema que sus utilidades ya leen y sobrescribe las reglas con
 * hex fijo. Se carga DESPUÉS de app.css.
 *
 * ================== EL LIENZO: violeta arriba, claro abajo (2026-08-08, 2ª pasada) ==================
 * La primera versión eran tarjetas blancas planas sobre gris pálido y la página se partía en dos:
 * un hero de la edición y, debajo, algo que no parecía suyo. La corrección se pasó de frenada — se
 * volvió violeta de arriba abajo y la app entera quedó del mismo color, sin respiro (Roberto:
 * «everything is too purple»).
 *
 * Esto es el punto medio, y es el que la marca pide: el HERO se queda violeta —ahí manda Bravecto—
 * y se DISUELVE en un lienzo claro donde los módulos son tarjetas blancas. La página sigue siendo
 * una sola porque el degradado no tiene costura y porque el color no desaparece: cada tarjeta lleva
 * su filo Bravecto arriba y sus acentos dentro. Blanco de lienzo, violeta de identidad.
 *
 * CONTRASTE: todo el texto de aquí abajo está medido SOBRE BLANCO, que es donde vive. Por eso los
 * acentos usan las paradas «-dk» de la paleta (magenta 5.9:1, teal 5.7:1, morado 8.9:1) y NUNCA las
 * «-lt», que se hicieron para leerse sobre el violeta y sobre blanco se deslavan.
 */

:root{
  --brav-ink:#2e2170;         /* violeta-azulado profundo — el hero y las secciones oscuras */
  --brav-ink-2:#241a5c;       /* piso del degradado del hero = techo del lienzo */
  --brav-panel:#3b2288;       /* panel del menú móvil / desplegable */
  --brav-purple:#6b2d87;      /* 8.9:1 sobre blanco */
  --brav-purple-lt:#b98cff;   /* el mismo morado, ya sobre oscuro — 6.4:1 */
  --brav-magenta:#e01a5f;     /* sólo rellenos — texto blanco encima = 4.7:1 */
  --brav-magenta-lt:#ff5c93;  /* acento sobre violeta — 5.6:1 en el panel, 4.6:1 en el hero */
  --brav-pink-hi:#ffb8cf;     /* el mismo rosa, ya legible en TEXTO NORMAL sobre el hero — 6.8:1 */
  --brav-magenta-dk:#c4144f;  /* texto de acento SOBRE claro — 5.9:1 */
  --brav-teal:#00afa5;        /* acento SOBRE el hero — 4.9:1 */
  --brav-teal-lt:#3fd8cd;     /* acento SOBRE el panel — 9.3:1 */
  --brav-teal-dk:#00736c;     /* texto de acento SOBRE claro — 5.7:1 */
  --brav-blue:#1e9bd7;        /* terciario: anillos y detalles, nunca texto sobre claro (3.1:1) */
  --brav-blue-lt:#7cc7ff;     /* el mismo azul, ya sobre oscuro — 9:1 */
  --brav-blue-dk:#14688f;     /* y sobre claro — 6.2:1; es el que usan los resultados */

  --color-ink:var(--brav-ink);
  --color-navy:var(--brav-ink);
  --color-navy-deep:var(--brav-panel);
  --color-orange:var(--brav-magenta);
  --color-orange-2:#c2154f;
  --color-teal:var(--brav-teal-dk);
  --color-teal-2:#005f59;
  --color-crema:#f5f3fb;
  --color-line:#e2dcf0;
  --color-muted:#6b6288;

  /* Lienzo de la app — CLARO. Los pares de abajo están medidos sobre --pg-panel (blanco). */
  --pg-floor:#f4f1fb;         /* piso de la página: un lila muy lavado, no gris */
  --pg-panel:#ffffff;         /* la superficie de los módulos: blanco */
  --pg-panel-2:#fdfcff;       /* y su piso, con un susurro de lila para que la tarjeta tenga cuerpo */
  --pg-line:#e5e0f3;          /* filos de los paneles */
  --pg-text:#2e2170;          /* cuerpo — 13.4:1 sobre el panel */
  --pg-soft:#4c4276;          /* entradillas — 9.1:1 */
  --pg-dim:#6b6288;           /* metadatos — 5.6:1 */
}

body{background:var(--pg-floor);color:var(--pg-text)}

/* El hero se queda violeta: es la identidad de la edición. */
#top{background:linear-gradient(165deg,#3a2a8f 0%,var(--brav-ink) 52%,var(--brav-ink-2) 100%)}
.blob-1{background:radial-gradient(circle,var(--brav-purple) 0%,#0000 60%)}
.blob-2{background:radial-gradient(circle,var(--brav-magenta) 0%,#0000 60%);opacity:.42}
.blob-3{background:radial-gradient(circle,var(--brav-teal) 0%,#0000 64%);opacity:.38}

/* LA COSTURA. Arranca EXACTAMENTE en el piso del hero y resuelve en el lienzo claro antes del
   primer módulo. El paso intermedio (#4b3a9e) evita la banda sucia que sale al interpolar de un
   violeta oscuro a un lila claro en un solo tramo. */
.appwrap{background:linear-gradient(180deg,
  var(--brav-ink-2) 0%, #4b3a9e 26%, #a99adb 62%, var(--pg-floor) 100%)}
.appwrap{background-repeat:no-repeat;background-size:100% 15rem;background-color:var(--pg-floor)}

/* El pie vuelve a ser oscuro: cierra la página contra el hero y despega las tarjetas del final. */
footer.bg-ink{background:var(--brav-ink);border-top:1px solid #ffffff1a}

#nav.scrolled{background:#2e2170eb;backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid #ffffff14;
  box-shadow:0 10px 30px -14px #00000082}
.btn{box-shadow:0 12px 30px #e01a5f4d}
.eyebrow{color:var(--brav-magenta-dk)}
#top .eyebrow{color:var(--brav-magenta-lt)}
#top .text-orange{color:var(--brav-magenta-lt)}
#top .text-teal{color:var(--brav-teal)}
#nav .text-orange,#mobilemenu .text-orange{color:#ff85ac}

/* ================= Módulos de la app =================
   Tarjetas blancas sobre el lienzo claro: filo de color arriba, borde de 1px y una sombra suave
   —de sombra real, no de luz— que las levanta del papel. */
.app{max-width:1120px;margin:0 auto;padding:1.75rem 1.25rem 4rem;display:grid;gap:1.35rem}
@media (min-width:640px){ .app{padding:2.4rem 2rem 5rem;gap:1.6rem} }
.duo{display:grid;gap:1.35rem}
@media (min-width:900px){ .duo{grid-template-columns:1fr 1fr;align-items:start;gap:1.6rem} }

.mod{--mod-accent:var(--brav-magenta-dk);position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--pg-panel) 0%,var(--pg-panel-2) 100%);
  border:1px solid var(--pg-line);border-radius:1.25rem;padding:1.4rem 1.25rem 1.5rem;
  box-shadow:0 18px 40px -30px #2e217059}
@media (min-width:640px){ .mod{padding:1.8rem 1.9rem 2rem} }
.mod::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--mod-accent)}
.mod.a-teal{--mod-accent:var(--brav-teal-dk)}
.mod.a-blue{--mod-accent:var(--brav-blue-dk)}
.mod.a-purple{--mod-accent:var(--brav-purple)}
/* El módulo del jugador: el único con doble filo, para que se lea como «lo tuyo». */
.mod.a-mio::before{background:linear-gradient(90deg,var(--brav-magenta),var(--brav-magenta-dk) 55%,var(--brav-teal-dk))}

.mod-hd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1rem}
.mod-k{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mod-accent)}
.mod-t{margin-top:.35rem;font-family:var(--font-serif);font-weight:400;line-height:1.1;
  color:var(--pg-text);font-size:clamp(22px,3.2vw,29px)}
.mod-a{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;font-size:14.5px;
  font-weight:600;color:var(--mod-accent);text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:#2e217038;transition:text-decoration-color .18s}
.mod-a:hover{text-decoration-color:currentColor}
.mod-quiet{margin-top:1.05rem;font-size:15.5px;line-height:1.6;color:var(--pg-soft)}

/* ---- avisos ---- */
.avi{padding:1rem 0;border-top:1px solid var(--pg-line)}
.avi:first-child{border-top:0;padding-top:1.1rem}
.avi-top{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-bottom:.4rem}
.avi-pin{display:inline-flex;align-items:center;padding:.1rem .5rem;border-radius:9999px;
  background:#e01a5f14;color:var(--brav-magenta-dk);font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase}
.avi-d{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pg-dim)}
.avi-t{font-size:16.5px;font-weight:700;line-height:1.3;color:var(--pg-text)}
.avi-b{margin-top:.4rem;font-size:15px;line-height:1.66;color:var(--pg-soft)}

/* ---- partidos y resultados ----
   Las etiquetas de pareja vienen con NOMBRE COMPLETO de los dos jugadores («Oscar Torlacoff /
   Alberto Laínez»): ~45 caracteres es lo normal, no el caso raro. Por eso los dos lados van SIEMPRE
   apilados con un «vs» propio en medio — así una pareja larga rompe de línea dentro de su propio
   renglón y nunca se confunde con la rival ni desborda la tarjeta. */
.mt{display:grid;gap:.7rem;margin-top:1.15rem}
.mt-row{display:grid;gap:.5rem;padding:.9rem 1rem;border:1px solid var(--pg-line);
  border-radius:.95rem;background:#faf8ff}
@media (min-width:760px){
  .mt-row{grid-template-columns:11rem minmax(0,1fr) auto;align-items:start;gap:.4rem 1.4rem}
  .mt-row .mt-meta{grid-column:2 / -1;justify-self:start}
  .mt-row .mt-when{grid-row:1 / span 2}
}
.mt-when{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brav-magenta-dk)}
.mt-row.is-res .mt-when{color:var(--brav-blue-dk)}
.mt-pairs{display:grid;gap:.12rem;min-width:0;font-size:15.5px;line-height:1.4;color:var(--pg-text)}
.mt-p{font-weight:600;overflow-wrap:anywhere}
.mt-p.win{color:var(--brav-teal-dk)}
.mt-p.win::after{content:'✓';margin-left:.35rem;font-size:.85em}
/* El lado del jugador que abrió sesión, en «Mis partidos». */
.mt-p.yo{position:relative;padding-left:.72rem;font-weight:700}
.mt-p.yo::before{content:'';position:absolute;left:0;top:.16em;bottom:.16em;width:3px;
  border-radius:9999px;background:var(--brav-magenta)}
.mt-vs{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pg-dim)}
.mt-meta{font-size:12.5px;line-height:1.5;color:var(--pg-dim);overflow-wrap:anywhere}
.mt-score{font-family:var(--font-mono);font-size:14.5px;font-weight:700;letter-spacing:.02em;
  color:var(--pg-text);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (min-width:760px){ .mt-score{justify-self:end} }
.mt-sep{margin-top:1.35rem;font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--pg-dim)}

/* ---- fechas clave ---- */
.fk{margin-top:1.15rem}
.fk-row{display:flex;align-items:baseline;gap:.85rem;padding:.7rem 0;
  border-top:1px solid var(--pg-line)}
.fk-row:first-child{border-top:0;padding-top:.2rem}
.fk-d{flex:none;min-width:6.4rem;font-family:var(--font-mono);font-size:12px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--brav-purple)}
.fk-w{font-size:15.5px;line-height:1.4;color:var(--pg-text);font-weight:600}
.fk-n{display:block;margin-top:.15rem;font-size:13px;font-weight:400;color:var(--pg-dim)}
.fk-row.is-final .fk-d{color:var(--brav-magenta-dk)}
.fk-row.is-final .fk-w{color:var(--brav-magenta-dk)}

/* ---- marcador de carga ----
   Barra tenue en el hueco exacto del número, nunca un esqueleto eterno: si los datos no llegan, el
   número se resuelve en «—» dentro del catch. Sobre claro va en tinta translúcida, no en luz. */
.sk{display:inline-block;min-width:1.5rem;height:.72em;border-radius:9999px;
  background:#2e21701f;vertical-align:-.02em;color:#0000}
@media (prefers-reduced-motion:no-preference){
  .sk{background:linear-gradient(90deg,#2e217014 25%,#2e217030 50%,#2e217014 75%);
    background-size:200% 100%;animation:sk-shimmer 1.5s linear infinite}
  @keyframes sk-shimmer{to{background-position:-200% 0}}
}
.sk-lines{display:grid;gap:.7rem;margin-top:1.15rem;max-width:30rem}
.sk-lines span{display:block;height:12px;border-radius:9999px}
.sk-lines span:nth-child(2){width:78%}
.sk-lines span:nth-child(3){width:58%}

/* El hero SÍ es oscuro, así que ahí el marcador vuelve a ser de luz. */
#top .sk{background:#ffffff26}
@media (prefers-reduced-motion:no-preference){
  #top .sk{background:linear-gradient(90deg,#ffffff1c 25%,#ffffff40 50%,#ffffff1c 75%);
    background-size:200% 100%}
}