/* Open Sans Bold (OFL) servida desde aquí y no desde Google Fonts: sin
   peticiones a terceros con la IP del usuario y disponible sin red. Es la
   letra de los nombres en la imagen de convocados. */
@font-face {
  font-family: "Open Sans"; font-weight: 700; font-display: swap;
  src: url(/static/open-sans-700-latin.woff2) format("woff2");
}
:root {
  --late-bg: #ece8fb;
  --warn: #9a5b00; --warn-bg: #fdf0d9; --info: #2557a7; --info-bg: #e3ecfa; --bad-bg: #fbe6e4;
  --bg: #f6f5fb; --card: #fff; --fg: #1d1a2e; --muted: #6b6880; --line: #e3e0ef;
  --accent: #3b2f8f; --accent-fg: #fff; --ok: #1f8a4c; --ok-bg: #e3f5ea; --bad: #b3261e;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14121d; --card: #1e1b2b; --fg: #ece9f7; --muted: #a29fb8; --line: #2e2a40;
    --accent: #8f82e8; --accent-fg: #14121d; --ok: #5fd08e; --ok-bg: #1d3327; --bad: #f2867d;
    --late-bg: #26213f;
    --warn: #f0b85a; --warn-bg: #3a2c12; --info: #8db4f2; --info-bg: #17263d; --bad-bg: #3a1c1a;
  }
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.4 system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--fg); }
a { color: var(--accent); }
header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; }
header h1 { font-size: 18px; margin: 0; }
header form { margin: 0; }
nav { display: flex; position: sticky; top: 0; z-index: 1; background: var(--bg); border-bottom: 1px solid var(--line); overflow-x: auto; }
nav a { flex: 1; text-align: center; padding: 10px 8px; text-decoration: none; color: var(--muted); white-space: nowrap; }
nav a.on { color: var(--accent); border-bottom: 2px solid var(--accent); font-weight: 600; }
main { max-width: 640px; margin: 0 auto; padding: 16px; }
h2 { font-size: 17px; margin: 24px 0 8px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.list { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); min-height: 52px; }
.list li:first-child { border-top: 0; }
.list .grow { flex: 1; min-width: 0; }
.list a.grow { text-decoration: none; color: inherit; }
.num { width: 32px; text-align: center; font-weight: 700; color: var(--muted); }
.sub { color: var(--muted); font-size: 14px; }
.off { opacity: .5; }
label.check { cursor: pointer; }
label.check input { width: 26px; height: 26px; accent-color: var(--ok); }
label.check:has(input:checked) { background: var(--ok-bg); }
input, textarea, button, select { font: inherit; }
input[type=text], input[type=email], input[type=date], input[type=number], textarea {
  width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--fg);
}
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.row > * { flex: 1; min-width: 120px; }
.field { display: block; margin-bottom: 10px; }
.field span { display: block; font-size: 14px; color: var(--muted); margin-bottom: 4px; }
button, .btn { display: inline-block; padding: 10px 14px; border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-fg); cursor: pointer; text-decoration: none; text-align: center; }
button.ghost { background: transparent; color: var(--accent); border: 1px solid var(--line); }
button.danger { background: transparent; color: var(--bad); border: 1px solid var(--line); }
button.small { padding: 6px 10px; font-size: 14px; }
.sticky-save { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(transparent, var(--bg) 30%); }
.sticky-save button { width: 100%; padding: 14px; font-size: 17px; }
.pill { font-size: 13px; padding: 2px 8px; border-radius: 99px; background: var(--ok-bg); color: var(--ok); }
canvas { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.empty { color: var(--muted); text-align: center; padding: 24px 0; }
.center { max-width: 360px; margin: 18vh auto 0; text-align: center; }

/* Estados de asistencia: mismo color en chips y selector. */
.presente { --c: var(--ok); --cb: var(--ok-bg); }
.tarde { --c: var(--accent); --cb: var(--late-bg); }
.lesionado { --c: var(--warn); --cb: var(--warn-bg); }
.justificado { --c: var(--info); --cb: var(--info-bg); }
.injustificado { --c: var(--bad); --cb: var(--bad-bg); }
.cycle { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chip { font-size: 12px; line-height: 1; padding: 4px 6px; border-radius: 6px; white-space: nowrap;
  color: var(--c, var(--muted)); background: var(--cb, transparent); border: 1px solid var(--line); }
.stat { text-align: right; }
.stat small { display: block; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; width: 34px; padding: 9px 0; text-align: center; font-weight: 700; color: var(--muted); }
.seg label + label span { border-left: 1px solid var(--line); }
.seg input:checked + span { color: var(--c); background: var(--cb); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Partido */
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 5px; margin-left: 4px;
  border-radius: 4px; background: var(--accent); color: var(--accent-fg); vertical-align: middle; }
.card-y, .card-r { display: inline-block; width: 10px; height: 14px; margin-left: 4px; border-radius: 2px;
  vertical-align: middle; font-size: 9px; line-height: 14px; text-align: center; color: #000; }
.card-y { background: #f5c518; }
.card-r { background: #d93025; }
.result.G { background: var(--ok-bg); color: var(--ok); }
.result.E { background: var(--info-bg); color: var(--info); }
.result.P { background: var(--bad-bg); color: var(--bad); }
.warn { background: var(--warn-bg); color: var(--warn); padding: 10px 12px; border-radius: 8px; }
details > summary { cursor: pointer; font-weight: 600; }
table.roles { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
table.roles th { font-size: 13px; color: var(--muted); font-weight: 600; }
table.roles th, table.roles td { padding: 8px 4px; border-bottom: 1px solid var(--line); text-align: center; }
table.roles td:first-child { text-align: left; }
table.roles input[type=radio], table.roles input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--accent); }
select { padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--fg); }
.field select { width: 100%; padding: 10px; }
input[type=time] { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--fg); }
.badge.bad { background: var(--bad); color: #fff; }
.badge.warnb { background: var(--warn); color: #fff; }
.check-inline { display: flex; align-items: center; gap: 8px; }
.check-inline input { width: 20px; height: 20px; accent-color: var(--accent); }
input.games { width: 56px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--fg); }
.goals { margin-left: 4px; font-size: 13px; }
ol.scorers { margin: 10px 0 0; padding-left: 22px; }
ol.scorers li { padding: 4px 0; }
ol.scorers li span { display: inline-block; min-width: 60%; }
.notes { white-space: pre-wrap; }

/* Goles y tarjetas: una tarjeta por jugador, controles grandes para el dedo. */
ul.stats { list-style: none; margin: 0 0 12px; padding: 0; }
ul.stats li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.stats-name { font-weight: 600; margin-bottom: 6px; }
.stats-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.ctl { display: flex; flex-direction: column; gap: 4px; }
.ctl > span:first-child { font-size: 12px; color: var(--muted); }
.stepper { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.stepper button { width: 38px; padding: 8px 0; border: 0; border-radius: 0; background: var(--card); color: var(--accent); font-size: 18px; font-weight: 700; }
.stepper input { width: 40px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-radius: 0;
  text-align: center; font-weight: 700; background: var(--card); color: var(--fg); -moz-appearance: textfield; appearance: textfield; padding: 8px 0; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.seg.yellow input:checked + span { color: #000; background: #f5c518; }
.redbox { display: flex; align-items: center; height: 38px; }
.redbox input { width: 24px; height: 24px; accent-color: #d93025; }
/* Partidos de sanción solo con roja marcada. */
.ctl.redgames { display: none; }
.ctl:has(.redbox input:checked) + .ctl.redgames { display: flex; }