/* ── Paleta ADYO ────────────────────────────────────────────────────────
   El rojo de marca de la app (hsl 0 · 52% · 46% = #b33939) y los neutros
   cálidos que se derivan de él. Es el ÚNICO sitio donde se define la
   identidad visual de la web: cambiar estos valores cambia todo el sitio. */
:root {
  --brand: #b33939;          /* rojo ADYO: cabecera y pestañas activas */
  --brand-2: #8d2b2b;        /* rojo profundo: inicio del degradado */
  --brand-ink: #8d2b2b;      /* rojo legible sobre tarjeta clara */
  --brand-tint: rgba(179, 57, 57, .10);   /* fondos suaves (pastillas) */
  --brand-tint-2: rgba(179, 57, 57, .06); /* fondos sutiles (filas) */

  --bg: #f6efed;             /* fondo cálido, el de la app */
  --card: #ffffff;
  --text: #402525;
  --muted: #7a5b5b;
  --line: #e8d9d6;

  --win: #1a7f4b;
  --win-ink: #1a7f4b;        /* verde legible sobre tarjeta */
  --win-tint: rgba(26, 127, 75, .10);
  --loss: #a82f2f;
  --loss-ink: #a82f2f;       /* rojo legible sobre tarjeta */
  --draw: #8a6a1f;

  /* Forma reciente (los «pilotos» de la clasificación): son manchas de color,
     no texto, así que valen también sobre tarjeta oscura. */
  --form-win: #1f9d55;
  --form-draw: #e08a2e;
  --form-loss: #cf3b3b;

  --radius: 14px;
  --shadow: 0 1px 2px rgba(64, 37, 37, .06), 0 8px 24px rgba(64, 37, 37, .06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14181d;
    --card: #1c2228;
    --text: #f2e6e3;
    --muted: #c9a8a8;
    --line: #33292c;
    /* El rojo de marca se mantiene (siempre lleva texto blanco encima);
       solo cambian los tonos que van como TEXTO sobre tarjeta oscura. */
    --brand-ink: #e8a7a7;
    --brand-tint: rgba(217, 101, 101, .16);
    --brand-tint-2: rgba(217, 101, 101, .10);
    --win-ink: #5fbf8b;
    --win-tint: rgba(95, 191, 139, .14);
    --loss-ink: #e08b8b;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }

/* Las reglas de clase (display: flex...) ganan a la del navegador para
   [hidden], así que hay que respetarlo explícitamente: es como se ocultan el
   selector de equipos y su desplegable. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.wrap { width: min(960px, 100% - 2rem); margin-inline: auto; }

a { color: inherit; text-decoration: none; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.topbar {
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 5;
  box-shadow: var(--shadow);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
}

.brand { display: flex; align-items: center; gap: .7rem; min-width: 0; }

.brand__logo {
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff2; object-fit: contain; padding: 4px;
}

.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text strong { font-size: 1.05rem; letter-spacing: .5px; }
.brand__text small { opacity: .85; font-size: .78rem; }

/* ── Pestañas (equipos y secciones, dentro de la cabecera) ─────────────── */
.tab {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: .4rem .85rem;
  font: inherit;
  font-size: .85rem;
  color: #fff;
  background: #ffffff1f;
  white-space: nowrap;
}

.tab[aria-selected="true"] { background: #fff; color: var(--brand); font-weight: 600; }

/* ── Contenido ────────────────────────────────────────────────────────── */
main { padding: 1rem 0 3rem; }

.loading, .empty { color: var(--muted); text-align: center; padding: 2.5rem 0; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  margin-bottom: 1rem;
}

.card__title {
  margin: 0 0 .6rem;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.grid2 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid2 { grid-template-columns: 1fr 1fr; } }

/* Lista de partidos */
.rounds { display: flex; gap: .35rem; overflow-x: auto; padding: .2rem 0 .8rem; }
.rounds .tab { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.rounds .tab[aria-selected="true"] { background: var(--brand); color: #fff; border-color: var(--brand); }

.row {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items: center;
  gap: .5rem;
  padding: .55rem .25rem;
  border-top: 1px solid var(--line);
}
.row:first-of-type { border-top: 0; }
.row__team { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.row__team--away { justify-content: flex-end; text-align: right; }
/* Nuestro equipo no se encoge: al truncar, el nombre que se recorta es el del
   rival («ADYO» se lee siempre entero). */
.row__team--ours > span:not(.ph) { flex: 0 0 auto; }
.row__team > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__team img, .row__team .ph { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }
.row__team .ph {
  display: grid; place-items: center; font-size: .68rem; font-weight: 700;
  color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 50%;
}
.row__team span {
  font-size: .9rem;
  /* Los nombres de algunos rivales son largos: se permiten dos líneas antes de
     recortar, en vez de cortarlos a la primera. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.row--ours { background: var(--brand-tint-2); border-radius: 10px; padding-inline: .5rem; }
.row--ours span { font-weight: 700; }
.row__score { text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
/* Partido suspendido/aplazado: en vez del marcador se muestra la etiqueta. */
.row__score--aplazado {
  font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--loss-ink, #9a3412); background: var(--loss-tint, #ffedd5);
  border-radius: 999px; padding: .1rem .5rem; justify-self: center; align-self: center;
}
.row__date { grid-column: 1 / -1; font-size: .74rem; color: var(--muted); text-align: center; margin-top: -.15rem; }

/* Goles y tarjetas del partido (solo los de nuestro equipo). Va en su propia
   línea, en tamaño pequeño, para que quepa sin romper la rejilla del partido. */
.row__events {
  grid-column: 1 / -1;
  font-size: .74rem;
  color: var(--muted);
  padding: 0 .2rem .15rem;
  line-height: 1.35;
}

/* Clasificación */
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { padding: .45rem .35rem; border-bottom: 1px solid var(--line); text-align: center; }
.table th { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.table td:nth-child(2), .table th:nth-child(2) { text-align: left; }
.table tr.is-self { background: var(--brand-tint-2); font-weight: 700; }
.table__team { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.table__team span { overflow-wrap: anywhere; }
.table__team img, .table__team .ph { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.table__team .ph {
  display: grid; place-items: center; font-size: .62rem; font-weight: 700;
  color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 50%;
}
.col-pts { font-weight: 800; }
@media (max-width: 560px) { .hide-sm { display: none; } }

/* Clasificación en el móvil: la tabla es ancha (11 columnas), así que se deja
   desplazar en horizontal en vez de esconder columnas. El contenedor scrollea,
   no la página. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 560px) {
  .table--standings {
    min-width: 512px;
    /* Anchos fijos para que el nombre del rival no se coma la fila: así los
       puntos y los pilotos se ven sin desplazar (el nombre completo, en el
       tooltip). */
    table-layout: fixed;
  }
  .table--standings th:nth-child(1), .table--standings td:nth-child(1) { width: 28px; }
  .table--standings th:nth-child(2), .table--standings td:nth-child(2) { width: 148px; }
  .table--standings th:nth-child(3), .table--standings td:nth-child(3) { width: 42px; }  /* Pts */
  .table--standings th:nth-child(4), .table--standings td:nth-child(4) { width: 58px; }  /* Últ. 4 */
  .table--standings th:nth-child(n+5), .table--standings td:nth-child(n+5) { width: 34px; }
  /* El nombre, en una línea y con puntos suspensivos. */
  .table--standings .table__team > span:not(.ph) {
    display: block; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; overflow-wrap: normal;
  }
}

/* Tabla de goleadores: el nombre puede ser largo (viene del acta), así que se
   deja partir en dos líneas en vez de desbordar la tabla en el móvil. */
.table--scorers td:nth-child(2) { white-space: normal; }
.table--scorers th:nth-child(1), .table--scorers td:nth-child(1) { width: 2.2rem; }
.table--scorers th:nth-child(n+3), .table--scorers td:nth-child(n+3) { width: 3.4rem; }

/* Jornadas del calendario */
.round-block { margin-bottom: 1rem; }
.round-block h3 { margin: 0 0 .3rem; font-size: .95rem; }
.round-block .sub { color: var(--muted); font-size: .78rem; font-weight: 400; margin-left: .35rem; }

/* Aviso de datos de ejemplo */
.notice {
  background: #fff4d6; color: #6b5300; border: 1px solid #f0dca0;
  border-radius: 10px; padding: .6rem .8rem; font-size: .85rem; margin-bottom: 1rem;
}
/* Aviso efímero cuando la web se actualiza sola (datos nuevos). */
.aviso {
  position: fixed; left: 50%; bottom: 1rem; transform: translate(-50%, 1rem);
  background: var(--brand); color: #fff; padding: .45rem .9rem;
  border-radius: 999px; font-size: .82rem; font-weight: 600;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none; z-index: 20;
  transition: opacity .25s, transform .25s;
}
.aviso--visible { opacity: 1; transform: translate(-50%, 0); }
/* Equipo sin calendario todavía (cantera): la tarjeta informa, no compite. */
.card--pending { box-shadow: none; }
.card--pending .notice { margin-bottom: 0; }
@media (prefers-color-scheme: dark) {
  .notice { background: #3a3113; color: #ffe8a3; border-color: #5c4d1c; }
}

footer.footer { color: var(--muted); border-top: 1px solid var(--line); padding: 1rem 0 2rem; }
.muted { color: var(--muted); }
.small { font-size: .78rem; }

/* ── «Añadir al móvil» (pie) ─────────────────────────────────────────────
   Se monta desde js/install.js y solo cuando la web es instalable y no lo está
   todavía: en Chrome/Android lanza el instalador y en iOS explica el camino
   (Compartir → Añadir a pantalla de inicio). */
.install { margin-top: .8rem; }
.install__btn {
  border: 1px solid var(--line); background: var(--card); color: var(--brand-ink);
  border-radius: 999px; padding: .45rem .9rem; font: inherit; font-size: .84rem;
  font-weight: 600; cursor: pointer; box-shadow: var(--shadow);
}
.install__btn:hover { background: var(--brand-tint); }
.install__hint {
  margin: .5rem 0 0; font-size: .82rem; color: var(--muted); max-width: 34rem;
}

/* ── Volver arriba ───────────────────────────────────────────────────────
   Abajo a la derecha, encima del contenido y sin tapar la línea de datos: se
   enseña solo al bajar (lo controla js/app.js). */
.to-top {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 15;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--card); color: var(--brand-ink);
  box-shadow: var(--shadow); font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.to-top:hover { background: var(--brand-tint); }

/* ── Interfaz de escritorio ───────────────────────────────────────────────
   Dos maquetaciones sobre el mismo contenido: temporada (equipos) y equipo
   (secciones). Se activa con body[data-mode="desktop"], que fija app.js según
   el ancho de la ventana. */
.seasonnav { display: flex; gap: .4rem; align-items: center; }
.seasonbtn {
  background: #ffffff1f; color: #fff; border: 1px solid #ffffff44;
  border-radius: 999px; padding: .35rem .8rem; font: inherit; font-size: .85rem;
  font-weight: 600; cursor: pointer; white-space: nowrap;
}
.seasonbtn:hover { background: #ffffff33; }
.seasonbtn--active { background: #fff; color: var(--brand); border-color: #fff; }

/* Cabecera fija del equipo: selector de equipo y secciones. */
.teamnav { display: flex; flex-direction: column; gap: .35rem; padding-bottom: .55rem; }
.teamnav__row { display: flex; gap: .6rem; align-items: center; }
.teamnav__group { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; }
.teamnav__group::-webkit-scrollbar { display: none; }
.teamnav__group--views { margin-left: auto; }
/* Desplegable de un grupo con varios equipos (Cantera): se despliega dentro de
   la propia cabecera, sin tapar nada. */
.teamnav__menu {
  display: flex; flex-wrap: wrap; gap: .35rem;
  padding-top: .35rem; border-top: 1px solid #ffffff33;
}
.teamnav .tab { background: transparent; border: 1px solid #ffffff55; color: #fff; }
.teamnav .tab[aria-selected="true"] { background: #fff; color: var(--brand); font-weight: 700; border-color: #fff; }

body[data-mode="desktop"] .wrap { width: min(1180px, 100% - 2.5rem); }

.dash__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.dash__title { margin: 0; font-size: 1.3rem; font-weight: 800; }
.dash__meta { margin: .15rem 0 0; color: var(--muted); font-size: .82rem; }
.dash__section { margin: 1.2rem 0 .6rem; }
.dash__grid {
  display: grid; gap: 1rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
}
/* Sin esto, una tarjeta con contenido ancho no deja encoger su columna y la
   página se desborda en pantallas muy estrechas. */
.dash__grid > * { min-width: 0; }

.tag {
  display: inline-block; font-size: .72rem; font-weight: 600; padding: .1rem .5rem;
  border-radius: 999px; background: var(--brand-tint); color: var(--brand-ink);
  white-space: nowrap;
}
.tag--muted { background: #00000010; color: var(--muted); }

/* Próximos partidos de todas las competiciones */
.next-list { display: flex; flex-direction: column; gap: .4rem; }
.next-row {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .5rem .6rem; border-radius: 10px; background: var(--brand-tint-2);
  font-size: .86rem;
}
.next-row__when { min-width: 132px; font-weight: 700; }
.next-row__rival { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.next-row__venue { color: var(--muted); font-size: .78rem; }
/* Dónde jugamos: 🏠 en casa, 🚗 fuera. */
.donde { font-size: .95em; line-height: 1; }

/* Tarjeta de competición: cabecera + resumen + mini-clasificación + resultados */
.comp-head { position: relative; margin-bottom: .7rem; padding-right: 2.4rem; }
/* Escudo del organizador (esquina superior derecha). Absoluto y pequeño para
   que no añada un renglón a la tarjeta; el padding-right del head le reserva
   el hueco para que el título no se le eche encima. */
.comp-crest { position: absolute; top: 0; right: 0; line-height: 0; }
.comp-crest img,
.comp-crest .ph { width: 26px; height: 26px; object-fit: contain; }
.comp-crest .ph {
  display: grid; place-items: center; border-radius: 50%;
  background: var(--bg); color: var(--muted); border: 1px solid var(--line);
  font-size: .68rem; font-weight: 700;
}
/* Escudo del organizador en la esquina superior derecha de las tarjetas de la
   competición (jornadas, goleadores). Absoluto y pequeño para que no añada un
   renglón: el padding-right del título le reserva el hueco. */
.card--crest { position: relative; }
.card--crest > .card__title, .card--crest > h3 { padding-right: 2.2rem; }
.card-crest { position: absolute; top: 1rem; right: 1rem; line-height: 0; }
.card-crest img,
.card-crest .ph { width: 22px; height: 22px; object-fit: contain; }
.card-crest .ph {
  display: grid; place-items: center; border-radius: 50%;
  background: var(--bg); color: var(--muted); border: 1px solid var(--line);
  font-size: .66rem; font-weight: 700;
}

/* Título con la liga y la categoría: se dejan fluir como texto (sin flex) para
   que el nombre pueda partirse en dos líneas y la etiqueta quepa al final de la
   segunda, en vez de saltar siempre a un renglón propio. */
.card__title--comp { line-height: 1.5; }
/* La etiqueta hereda el espaciado y las mayúsculas del título: se neutralizan
   para que «Infantil A» se lea como en el resto del sitio. */
.card__title--comp .tag {
  margin-left: .35rem; letter-spacing: 0; text-transform: none;
  vertical-align: middle;
}
/* Encabezado de sección fuera de las tarjetas (Resultados, Calendario): la liga
   y la categoría sobre la lista, que si no se lee sin contexto. */
.section-head { margin: .1rem 0 .6rem; }

.comp-title { margin: 0 0 .35rem; font-size: 1rem; font-weight: 800; line-height: 1.2; }
.comp-tags { display: flex; flex-wrap: wrap; gap: .3rem; }

.summary { display: grid; grid-template-columns: 104px 1fr 1fr; gap: .6rem; margin-bottom: .7rem; }
.sum { background: var(--brand-tint-2); border-radius: 10px; padding: .5rem .6rem; min-width: 0; }
.sum__label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin-bottom: .15rem;
}
.sum__pos { font-size: 1.3rem; font-weight: 800; }
.sum__pts { font-size: .8rem; font-weight: 700; color: var(--muted); margin-left: .35rem; }
.sum__off { color: var(--muted); font-size: .82rem; }
.sum__line { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; font-size: .85rem; }
.sum__line img, .sum__line .ph { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; }
.sum__name { font-weight: 600; }
.sum__name--ours { text-decoration: underline; }
.sum__vs { font-weight: 800; }
.sum__score { font-weight: 800; font-variant-numeric: tabular-nums; }
.sum__score--win { color: var(--win-ink); }
.sum__score--loss { color: var(--loss-ink); }
.sum__meta { margin-top: .2rem; font-size: .76rem; color: var(--muted); }

/* Forma reciente: un «piloto» por partido, del más reciente (derecha) al más
   antiguo. Pequeños a propósito: tienen que caber también en el móvil. */
.form { display: inline-flex; align-items: center; gap: 3px; }
.form__dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--muted);   /* por si algún día llega un estado desconocido */
}
.form__dot--win { background: var(--form-win); }
.form__dot--draw { background: var(--form-draw); }
.form__dot--loss { background: var(--form-loss); }
.col-form, .mini__form { text-align: center; white-space: nowrap; }
.table .col-form { width: 52px; }

.mini { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: .7rem; }
.mini__row {
  display: grid; align-items: center; gap: .35rem; padding: .35rem .6rem;
  /* Orden: # · Equipo · Pts · Últ.4 · PJ · GF · GC (los puntos, primero). */
  grid-template-columns: 26px 1fr 44px 48px 34px 34px 34px; font-size: .82rem;
}
.mini__row:nth-child(even) { background: #00000006; }
.mini__row--head {
  background: var(--brand-tint-2); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.mini__row--self { background: var(--brand-tint); font-weight: 700; }
.mini__name {
  display: inline-flex; align-items: center; gap: .35rem; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* El nombre va dentro de un span (teamSpan): sin esto se recorta a media letra
   en vez de con puntos suspensivos. */
.mini__name > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini__name img, .mini__name .ph { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; }
.mini__num { text-align: center; color: var(--muted); }
.mini__pts { text-align: center; font-weight: 800; }

.res__title { margin-top: .1rem; }
.res { display: flex; flex-direction: column; gap: .1rem; }
.res__row {
  display: grid; align-items: center; gap: .5rem; padding: .3rem .4rem;
  grid-template-columns: 84px 1fr; font-size: .82rem; border-radius: 8px;
}
.res__row:nth-child(even) { background: var(--brand-tint-2); }
.res__jornada { font-weight: 700; color: var(--muted); }
.res__match { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.res__match img, .res__match .ph { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; }
.res__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.res__name--ours { font-weight: 700; flex: 0 0 auto; }
.res__score { font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; padding: 0 .15rem; white-space: nowrap; }
.res__score--win { color: var(--win-ink); }
.res__score--loss { color: var(--loss-ink); }
.res__where { color: var(--muted); font-size: .76rem; text-align: right; }

.comp-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; }
.linkbtn {
  border: 1px solid var(--line); background: transparent; color: var(--brand-ink);
  border-radius: 999px; padding: .3rem .7rem; font: inherit; font-size: .8rem;
  font-weight: 600; cursor: pointer;
}
.linkbtn:hover { background: var(--brand-tint); }

/* El dashboard es de escritorio: en pantalla estrecha se usa la vista móvil. */
@media (max-width: 720px) {
  .summary { grid-template-columns: 1fr; }
  .dash__grid { grid-template-columns: 1fr; }
  /* En el móvil, la cabecera del equipo va en filas deslizables. */
  .teamnav__row { flex-direction: column; align-items: stretch; gap: .35rem; }
  .teamnav__group--views { margin-left: 0; }
  /* «Últimos resultados»: en escritorio la jornada ocupa 84px para alinearse
     con el resto del dashboard, pero en el móvil ese hueco se lo quita al
     nombre del equipo. */
  .res__row { grid-template-columns: auto 1fr; gap: .35rem; }
  /* Más sitio para los nombres: escudos y huecos algo más pequeños. */
  .row { grid-template-columns: 1fr 56px 1fr; gap: .35rem; }
  .row__team img, .row__team .ph { width: 22px; height: 22px; }
  .res__match img, .res__match .ph { width: 18px; height: 18px; }
  .res__match { gap: .3rem; }
}

/* Pantallas de móvil de verdad (el .hide-sm de las tablas se define aquí). */
@media (max-width: 560px) {
  /* La mini-clasificación no cabe entera: en vez de esconder sus columnas
     (PJ, GF, GC), se deja desplazar en horizontal con el dedo. */
  .mini { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .mini__row {
    /* Mismo orden que en escritorio: # · Equipo · Pts · Últ.4 · PJ · GF · GC. */
    grid-template-columns: 24px minmax(120px, 1fr) 40px 46px 34px 34px 34px;
    gap: .3rem; padding: .3rem .45rem; min-width: 400px;
  }
  .next-row__when { min-width: 0; }
  /* En el móvil el equipo ocupa poco ancho: los pilotos van algo más juntos. */
  .form { gap: 2px; }
  .mini__form { font-size: .62rem; }
}

/* ── Página de error (404 y compañía) ─────────────────────────────────────
   Las sirve nginx con `error_page` (ver deploy/nginx/webadyo.conf): son 404.html
   y error.html, HTML suelto y sin JS para que funcionen justo cuando algo va
   mal. Comparten este CSS, así que llevan el mismo tema claro/oscuro. */
.errorbox { text-align: center; padding: 2.2rem 1.2rem; }
.errorbox__code {
  margin: 0; font-size: 3rem; font-weight: 800; line-height: 1;
  color: var(--brand-ink); letter-spacing: -.02em;
}
.errorbox__title { margin: .7rem 0 .4rem; font-size: 1.15rem; }
.errorbox__text { margin: 0 auto; max-width: 34rem; color: var(--muted); }
.errorbox__actions {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
  margin: 1.3rem 0 .2rem;
}
/* Botón principal de la página de error (el `.linkbtn` normal es el secundario). */
.linkbtn--solid { background: var(--brand); border-color: var(--brand); color: #fff; }
.linkbtn--solid:hover { background: var(--brand-2); }