/* ==========================================================================
   UMPIREPAD — sistema visual
   Estilo macOS: tipografía del sistema, esquinas muy redondeadas, barra
   lateral translúcida, sombras en capas y una paleta pastel.
   Se monta encima de Bootstrap 5 y sólo redefine lo necesario.
   ========================================================================== */

:root {
  /* --- Paleta pastel ---------------------------------------------------- */
  --mint:     #9fe0c4;   --mint-ink:     #1f6b4d;
  --sky:      #a6cdf5;   --sky-ink:      #1d5a94;
  --lavender: #c3bdf2;   --lavender-ink: #4a3f9c;
  --peach:    #f8c9a8;   --peach-ink:    #9a5420;
  --sand:     #f0e0b8;   --sand-ink:     #806014;
  --rose:     #f6bfc9;   --rose-ink:     #9c3049;
  --sage:     #cfe0ad;   --sage-ink:     #55701f;
  --lilac:    #e6c4ec;   --lilac-ink:    #813b8e;

  /* --- Semánticos -------------------------------------------------------- */
  --accent:        #4c8df6;
  --accent-soft:   rgba(76, 141, 246, 0.12);
  --accent-ink:    #2a63c0;
  --danger:        #e35d6a;
  --danger-soft:   rgba(227, 93, 106, 0.12);
  --warning:       #e0a336;
  --warning-soft:  rgba(224, 163, 54, 0.14);
  --success:       #34a06a;
  --success-soft:  rgba(52, 160, 106, 0.12);

  /* --- Superficies ------------------------------------------------------- */
  --bg:            #f2f3f7;
  --bg-grad-1:     #eaf1fb;
  --bg-grad-2:     #f6f1f8;
  --surface:       #ffffff;
  --surface-2:     #fbfbfd;
  --sidebar:       rgba(246, 247, 251, 0.78);
  --hairline:      rgba(0, 0, 0, 0.08);
  --hairline-soft: rgba(0, 0, 0, 0.05);

  --ink:        #1f2430;
  --ink-2:      #5a6172;
  --ink-3:      #8b91a1;

  --radius-xl: 20px;
  --radius-lg: 16px;
  --radius:    12px;
  --radius-sm: 9px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow:    0 1px 3px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 2px 6px rgba(16, 24, 40, 0.07), 0 20px 48px rgba(16, 24, 40, 0.12);

  --sidebar-w: 248px;
}

:root:not([data-theme="light"]) {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #15171c;
    --bg-grad-1:     #161a22;
    --bg-grad-2:     #1b1720;
    --surface:       #1e2128;
    --surface-2:     #23262e;
    --sidebar:       rgba(28, 30, 37, 0.78);
    --hairline:      rgba(255, 255, 255, 0.10);
    --hairline-soft: rgba(255, 255, 255, 0.06);
    --ink:           #eef0f5;
    --ink-2:         #a8aebd;
    --ink-3:         #767d8d;
    --accent-soft:   rgba(76, 141, 246, 0.20);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow:    0 1px 3px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 20px 48px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:            #15171c;
  --bg-grad-1:     #161a22;
  --bg-grad-2:     #1b1720;
  --surface:       #1e2128;
  --surface-2:     #23262e;
  --sidebar:       rgba(28, 30, 37, 0.78);
  --hairline:      rgba(255, 255, 255, 0.10);
  --hairline-soft: rgba(255, 255, 255, 0.06);
  --ink:           #eef0f5;
  --ink-2:         #a8aebd;
  --ink-3:         #767d8d;
  --accent-soft:   rgba(76, 141, 246, 0.20);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:    0 1px 3px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 20px 48px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* ==========================================================================
   Base
   ========================================================================== */

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 620px at 12% -8%, var(--bg-grad-1), transparent 62%),
    radial-gradient(900px 520px at 92% 4%, var(--bg-grad-2), transparent 58%);
  background-attachment: fixed;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  min-height: 100vh;
}

h1, h2, h3, h4, h5 { letter-spacing: -0.021em; font-weight: 640; color: var(--ink); }
h1 { font-size: 1.65rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.08rem; }

a { color: var(--accent-ink); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.text-muted, .text-dim { color: var(--ink-2) !important; }
.text-faint { color: var(--ink-3) !important; }

.mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.86em;
  letter-spacing: -0.01em;
}

hr { border-color: var(--hairline); opacity: 1; }

::selection { background: var(--accent-soft); }

/* Barras de desplazamiento estilo macOS */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(130, 137, 152, 0.4);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(130, 137, 152, 0.65); background-clip: content-box; }

/* ==========================================================================
   Estructura: barra lateral + contenido
   ========================================================================== */

.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--sidebar);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border-right: 1px solid var(--hairline);
  padding: 14px 12px 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 30;
}

.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 10px 14px; text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand > span { min-width: 0; }
.brand-name {
  display: block; font-weight: 680; font-size: 1.02rem;
  color: var(--ink); letter-spacing: -0.02em; white-space: nowrap;
}
.brand-sub { display: block; font-size: 0.72rem; color: var(--ink-3); margin-top: -3px; white-space: nowrap; }

/* LA MARCA: [Umpire]Pad.
   El mismo rojo que en la app —no es un color de la paleta pastel, es el del
   logotipo— y en una sola línea: un corchete que se queda solo al final del
   renglón no es la marca, es un error de maquetación.

   Y LETRA PROPIA, distinta de la del resto del portal: si el logotipo lleva la
   misma letra que los menús, no es un logotipo, es una palabra más. Es Archivo
   Black (licencia OFL, junto al fichero), servida desde aquí como todo lo
   demás, recortada a los caracteres que hacen falta —8 KB— y con la letra del
   sistema detrás por si no llegara a cargar.

   El apretado y el suelto son parte del dibujo: «Umpire» va junto dentro de
   los corchetes, como un bloque, y «Pad» respira al lado. En em y no en
   píxeles, para que valga igual a 46 px en la app que a 14 px en esta barra. */
@font-face {
  font-family: 'Marca UmpirePad';
  src: url('/assets/fonts/marca-archivo900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

.marca {
  white-space: nowrap;
  font-family: 'Marca UmpirePad', system-ui, -apple-system, sans-serif;
  font-weight: 900;
}
.marca-u { letter-spacing: -0.064em; }
.marca-p { letter-spacing: 0.09em; margin-left: 0.09em; }
.marca-c { color: #e9563f; }

/* Sólo la primera letra en mayúscula: "septiembre de 2026", no "Septiembre De 2026". */
.cap-first::first-letter { text-transform: uppercase; }

.nav-label {
  font-size: 0.68rem; font-weight: 640; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-3);
  padding: 14px 12px 5px;
}

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 11px; border-radius: var(--radius-sm);
  color: var(--ink-2); font-weight: 520; font-size: 0.925rem;
  text-decoration: none; transition: background 0.12s ease, color 0.12s ease;
}
.nav-item:hover { background: var(--hairline-soft); color: var(--ink); text-decoration: none; }
.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}
.nav-item svg { width: 17px; height: 17px; flex: 0 0 17px; opacity: 0.85; }
.nav-item .badge-count {
  margin-left: auto; font-size: 0.7rem; font-weight: 640;
  background: var(--hairline); color: var(--ink-2);
  border-radius: 20px; padding: 1px 7px;
}

.sidebar-footer { margin-top: auto; padding-top: 12px; }

.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.user-chip:hover { text-decoration: none; box-shadow: var(--shadow); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.74rem; font-weight: 680; color: var(--lavender-ink);
  background: linear-gradient(145deg, var(--lavender), var(--sky));
  flex: 0 0 30px;
}
.user-chip .who { min-width: 0; }
.user-chip .who b { display: block; font-size: 0.86rem; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip .who span { font-size: 0.72rem; color: var(--ink-3); }

.content { flex: 1 1 auto; min-width: 0; padding: 22px 26px 56px; }

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.page-head .eyebrow {
  font-size: 0.72rem; font-weight: 640; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ink-3); margin-bottom: 2px;
}
.page-head h1 { margin: 0; }
.page-head p.lead-sub { margin: 4px 0 0; color: var(--ink-2); font-size: 0.93rem; }

.topbar-mobile {
  display: none;
  align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--sidebar);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; z-index: 40;
}

/* ==========================================================================
   Tarjetas
   ========================================================================== */

.card-mac {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-mac + .card-mac { margin-top: 16px; }

.card-mac > .card-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface-2);
}
.card-mac > .card-head h2,
.card-mac > .card-head h3 { margin: 0; font-size: 0.98rem; font-weight: 640; }
/* El `> form` está por las fichas plegables: dentro de un <details> el cuerpo
   cuelga del formulario, no de la tarjeta, y con el selector a secas se quedaba
   sin márgenes —los campos pegados al borde y el botón sobre la línea—. */
.card-mac > .card-body,
.card-mac > form > .card-body { padding: 18px; }
.card-mac > .card-body.tight,
.card-mac > form > .card-body.tight { padding: 12px; }
.card-mac > .card-foot,
.card-mac > form > .card-foot {
  padding: 12px 18px; border-top: 1px solid var(--hairline-soft);
  background: var(--surface-2);
}

.stat {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.stat .stat-label {
  font-size: 0.74rem; font-weight: 620; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-3);
}
.stat .stat-value {
  font-size: 2rem; font-weight: 660; letter-spacing: -0.03em;
  line-height: 1.15; margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.stat .stat-note { font-size: 0.8rem; color: var(--ink-2); margin-top: 2px; }
.stat::after {
  content: ''; position: absolute; inset: auto -30px -40px auto;
  width: 120px; height: 120px; border-radius: 50%;
  background: var(--tint, var(--mint)); opacity: 0.22; filter: blur(6px);
}

/* ==========================================================================
   Distintivos pastel
   ========================================================================== */

/* Un solo patrón: cada distintivo declara su pastel y su tinta, y el modo
   oscuro sólo cambia la mezcla. Antes se pintaba tinta oscura sobre pastel
   claro y en oscuro no se leía nada. */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 620; letter-spacing: -0.005em;
  white-space: nowrap;
  --pill: var(--mint); --pill-ink: var(--mint-ink);
  background: color-mix(in srgb, var(--pill) 34%, transparent);
  color: var(--pill-ink);
  border: 1px solid color-mix(in srgb, var(--pill) 55%, transparent);
}
.pill.mint     { --pill: var(--mint);     --pill-ink: var(--mint-ink); }
.pill.sky      { --pill: var(--sky);      --pill-ink: var(--sky-ink); }
.pill.lavender { --pill: var(--lavender); --pill-ink: var(--lavender-ink); }
.pill.peach    { --pill: var(--peach);    --pill-ink: var(--peach-ink); }
.pill.sand     { --pill: var(--sand);     --pill-ink: var(--sand-ink); }
.pill.rose     { --pill: var(--rose);     --pill-ink: var(--rose-ink); }
.pill.sage     { --pill: var(--sage);     --pill-ink: var(--sage-ink); }
.pill.lilac    { --pill: var(--lilac);    --pill-ink: var(--lilac-ink); }
.pill.grey     { background: var(--hairline-soft); color: var(--ink-2); border-color: var(--hairline); }

/* Una píldora que ADEMÁS es enlace: se subraya al pasar por encima para que se
   note que lleva a algún sitio, y no cambia de color, que la píldora ya dice
   de qué va. */
a.pill { text-decoration: none; }
a.pill:hover { text-decoration: underline; text-underline-offset: 2px; filter: brightness(1.06); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pill {
    background: color-mix(in srgb, var(--pill) 16%, transparent);
    color: var(--pill);
    border-color: color-mix(in srgb, var(--pill) 34%, transparent);
  }
  :root:not([data-theme="light"]) .pill.grey {
    background: var(--hairline-soft); color: var(--ink-2); border-color: var(--hairline);
  }
}
:root[data-theme="dark"] .pill {
  background: color-mix(in srgb, var(--pill) 16%, transparent);
  color: var(--pill);
  border-color: color-mix(in srgb, var(--pill) 34%, transparent);
}
:root[data-theme="dark"] .pill.grey {
  background: var(--hairline-soft); color: var(--ink-2); border-color: var(--hairline);
}

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.mint { background: var(--mint); } .dot.sky { background: var(--sky); }
.dot.lavender { background: var(--lavender); } .dot.peach { background: var(--peach); }
.dot.sand { background: var(--sand); } .dot.rose { background: var(--rose); }
.dot.sage { background: var(--sage); } .dot.lilac { background: var(--lilac); }

/* ==========================================================================
   Las pocas utilidades que no pueden depender de Bootstrap
   ==========================================================================

   Las pantallas de error (404, 403, 500) NO cargan Bootstrap a propósito: si el
   fallo fuera precisamente que no se sirven los estáticos del proveedor, una
   página de error que dependiera de ellos saldría en crudo justo el día que más
   falta hace que se lea.

   El precio de eso es que ahí no existen `.text-center`, `.btn` como caja, ni
   los márgenes de Bootstrap. Se definen aquí, con los mismos valores, así que en
   las páginas normales —donde Bootstrap sí está— no cambia nada.
   ========================================================================== */

/* Columnas que se esconden cuando la pantalla no da para tanto. Se usa en las
   tablas largas: antes que un scroll lateral —que casi nadie descubre— es mejor
   enseñar menos columnas y que lo importante quepa. */
@media (max-width: 1200px) {
  .col-secundaria { display: none; }
}

.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.d-inline-block { display: inline-block; }

/* ==========================================================================
   Botones
   ========================================================================== */

.btn {
  /* Caja propia: sin esto, fuera de Bootstrap un <a class="btn"> es texto
     suelto con relleno, no se centra y no respeta el alto. */
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.5;
  user-select: none;
  border-radius: var(--radius-sm);
  font-weight: 560;
  font-size: 0.9rem;
  padding: 7px 14px;
  border: 1px solid transparent;
  transition: transform 0.08s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.btn:active { transform: scale(0.985); }

.btn-mac {
  background: var(--surface);
  border-color: var(--hairline);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.btn-mac:hover { background: var(--surface-2); color: var(--ink); box-shadow: var(--shadow); }

.btn-primary-mac {
  background: linear-gradient(180deg, #5c98f8, var(--accent));
  border-color: rgba(0, 0, 0, 0.06);
  color: #fff;
  box-shadow: 0 1px 2px rgba(31, 90, 190, 0.35), 0 4px 12px rgba(76, 141, 246, 0.28);
}
.btn-primary-mac:hover { color: #fff; filter: brightness(1.04); }

.btn-danger-mac {
  background: var(--danger-soft); border-color: rgba(227, 93, 106, 0.3); color: var(--danger);
}
.btn-danger-mac:hover { background: var(--danger); color: #fff; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--hairline-soft); color: var(--ink); }

.btn-sm { padding: 4px 10px; font-size: 0.82rem; border-radius: 8px; }

.seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--hairline-soft); border-radius: 10px; border: 1px solid var(--hairline);
}
.seg a {
  padding: 4px 12px; border-radius: 7px; font-size: 0.84rem; font-weight: 560;
  color: var(--ink-2); text-decoration: none;
}
.seg a:hover { color: var(--ink); text-decoration: none; }
.seg a.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ==========================================================================
   Formularios
   ========================================================================== */

.form-label { font-size: 0.82rem; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.form-text { font-size: 0.79rem; color: var(--ink-3); }

.form-control, .form-select {
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink);
  padding: 7px 11px;
  font-size: 0.92rem;
  box-shadow: inset 0 1px 1px rgba(16, 24, 40, 0.03);
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3.5px var(--accent-soft);
  background: var(--surface);
  color: var(--ink);
}
.form-control::placeholder { color: var(--ink-3); }

.form-check-input { border-color: var(--hairline); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { box-shadow: 0 0 0 3.5px var(--accent-soft); border-color: var(--accent); }

.input-group-text {
  background: var(--surface-2); border-color: var(--hairline);
  color: var(--ink-2); border-radius: var(--radius-sm); font-size: 0.86rem;
}

.field-error { color: var(--danger); font-size: 0.79rem; margin-top: 3px; }

/* Selector de color pastel */
.swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.swatches input { position: absolute; opacity: 0; pointer-events: none; }
.swatches label {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; box-shadow: var(--shadow-sm);
  transition: transform 0.1s ease;
}
.swatches label:hover { transform: scale(1.1); }
.swatches input:checked + label { border-color: var(--ink); transform: scale(1.12); }

/* ==========================================================================
   Tablas
   ========================================================================== */

.table-mac { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9rem; }
.table-mac thead th {
  font-size: 0.73rem; font-weight: 640; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-3); padding: 9px 14px; text-align: left;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-2);
  position: sticky; top: 0; z-index: 2;
  white-space: nowrap;
}
.table-mac tbody td { padding: 11px 14px; border-bottom: 1px solid var(--hairline-soft); vertical-align: middle; }
.table-mac tbody tr:last-child td { border-bottom: 0; }
.table-mac tbody tr { transition: background 0.1s ease; }
.table-mac tbody tr:hover { background: var(--hairline-soft); }
.table-mac a.row-link { color: var(--ink); font-weight: 580; }
.table-mac .num { font-variant-numeric: tabular-nums; text-align: right; }

.table-wrap { overflow-x: auto; }

/* ==========================================================================
   Marcador
   ========================================================================== */

.scoreboard {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 14px;
  padding: 18px;
  background: linear-gradient(160deg, rgba(166,205,245,.14), rgba(195,189,242,.12));
  border-radius: var(--radius-lg);
  border: 1px solid var(--hairline);
}
.scoreboard .side { min-width: 0; }
.scoreboard .side.right { text-align: right; }
.scoreboard .side-name {
  font-size: 1.12rem; font-weight: 640; letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.scoreboard .side-meta { font-size: 0.79rem; color: var(--ink-2); }
.scoreboard .games {
  display: flex; align-items: center; gap: 10px;
  font-size: 2.6rem; font-weight: 680; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.scoreboard .games .sep { color: var(--ink-3); font-weight: 400; font-size: 1.6rem; }
/* El ganador con halo: el verde solo, a este tamaño y sobre fondo claro, se
   confundía con el negro de al lado. Se le pone fondo tenue, un aro y un
   resplandor —los tres suaves— para que se vea de un vistazo sin gritar. */
.scoreboard .winner-mark {
  color: var(--success); font-weight: 760;
  display: inline-block; padding: 3px 12px; border-radius: 999px;
  background: var(--success-soft);
  box-shadow: 0 0 0 1px rgba(52, 160, 106, 0.35), 0 0 18px rgba(52, 160, 106, 0.28);
}
.scoreboard .side.right .winner-mark { margin-left: auto; }

.game-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.game-chip {
  font-variant-numeric: tabular-nums;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 9px; padding: 3px 9px; font-size: 0.84rem; font-weight: 580;
  box-shadow: var(--shadow-sm);
}
.game-chip.partial { border-style: dashed; color: var(--ink-2); }
.game-chip b { font-weight: 700; }

/* ==========================================================================
   Línea de incidencias
   ========================================================================== */

.timeline { position: relative; padding-left: 26px; }
.timeline::before {
  content: ''; position: absolute; left: 8px; top: 4px; bottom: 4px;
  width: 2px; background: var(--hairline); border-radius: 2px;
}
.timeline-item { position: relative; padding: 9px 0; }
.timeline-item::before {
  content: ''; position: absolute; left: -22px; top: 15px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--ink-3);
}
/* Los nombres llevan prefijo ci- a propósito: `.card` a secas es de Bootstrap y
   pintaba de blanco la fila entera de cada tarjeta. */
.timeline-item.ci-card::before      { border-color: var(--warning); background: var(--sand); }
.timeline-item.ci-referee::before   { border-color: var(--danger); background: var(--rose); }
.timeline-item.ci-timeout::before   { border-color: var(--sky-ink); background: var(--sky); }
.timeline-item.ci-expedite::before  { border-color: var(--success); background: var(--mint); }
.timeline-item.ci-correction::before{ border-color: var(--lavender-ink); background: var(--lavender); }
.timeline-item .when {
  font-size: 0.74rem; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.timeline-item .what { font-weight: 560; }
.timeline-item .detail { font-size: 0.85rem; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Cronograma de incidencias de un partido.

   La hora va FUERA, en su propia columna a la izquierda, para que se lea la
   secuencia de un vistazo sin entrar en cada fila: primero cuándo, después qué.
   La línea vertical pasa por el centro de la columna de los puntos, así que si
   se toca el ancho de `.crono-item` hay que mover también el `left` de la línea.
   -------------------------------------------------------------------------- */

.crono { position: relative; }
.crono::before {
  content: ''; position: absolute; left: 62px; top: 14px; bottom: 14px;
  width: 2px; background: var(--hairline); border-radius: 2px;
}
.crono-item {
  display: grid; grid-template-columns: 52px 22px minmax(0, 1fr);
  align-items: start; padding: 7px 0; position: relative;
}
.crono-item .t {
  font-size: 0.78rem; font-variant-numeric: tabular-nums; font-weight: 560;
  color: var(--ink-3); text-align: right; padding-right: 10px; padding-top: 2px;
}
.crono-item .dot { position: relative; align-self: stretch; }
.crono-item .dot::before {
  content: ''; position: absolute; left: 5px; top: 5px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--ink-3);
}
.crono-item.ci-start .t { color: var(--ink-2); }
.crono-item.ci-start .dot::before { border-color: var(--success); background: var(--success); }
.crono-item.ci-card .dot::before      { border-color: var(--warning); background: var(--sand); }
.crono-item.ci-referee .dot::before   { border-color: var(--danger); background: var(--rose); }
.crono-item.ci-timeout .dot::before   { border-color: var(--sky-ink); background: var(--sky); }
.crono-item.ci-expedite .dot::before  { border-color: var(--success); background: var(--mint); }
.crono-item.ci-correction .dot::before{ border-color: var(--lavender-ink); background: var(--lavender); }
.crono-item .what { font-weight: 560; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crono-item .meta { font-size: 0.76rem; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-top: 2px; }
.crono-item .detail { font-size: 0.85rem; color: var(--ink-2); margin-top: 2px; }

@media (max-width: 480px) {
  .crono::before { left: 50px; }
  .crono-item { grid-template-columns: 40px 22px minmax(0, 1fr); }
  .crono-item .t { padding-right: 8px; }
}

/* --------------------------------------------------------------------------
   Resumen del partido: marcador, juego a juego y datos de partida.

   Todo lo que se mira de un vistazo vive en una sola tarjeta. El tanteo de
   cada juego se enseña UNA vez y en forma de marcador —número de juego arriba,
   los dos tanteos debajo, el ganador del juego resaltado—, que es como se lee
   en una mesa; antes estaba en dos sitios, en texto, y en ninguno se veía.
   -------------------------------------------------------------------------- */

.jgs-marco { padding: 0 20px 18px; overflow-x: auto; display: flex; justify-content: center; }
.jgs-tabla { width: auto; border-collapse: collapse; }
.jgs-tabla th, .jgs-tabla td {
  text-align: center; padding: 7px 12px; font-variant-numeric: tabular-nums;
}
.jgs-tabla th {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-3);
}
.jgs-tabla th.nom, .jgs-tabla td.nom {
  text-align: left; padding-left: 0; padding-right: 22px; white-space: nowrap;
}
.jgs-tabla td.nom { font-weight: 650; color: var(--ink-2); }
.jgs-tabla td.p { font-size: 1.25rem; font-weight: 600; color: var(--ink-3); min-width: 52px; }
.jgs-tabla td.p.gana { color: var(--ink-1); font-weight: 800; }
.jgs-tabla td.tot { font-size: 1.25rem; font-weight: 800; color: var(--ink-1); }
.jgs-tabla th.tot { color: var(--ink-2); }
.jgs-tabla .sep { border-left: 1px solid var(--hairline); }
.jgs-tabla tr + tr td { border-top: 1px solid var(--hairline-soft); }
.jgs-tabla .parcial { opacity: 0.62; }
.jgs-titulo {
  text-align: center; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); padding: 14px 20px 6px;
}

/* Datos de partida: rejilla de fichas, cada valor con su rótulo encima. */
.datos-rejilla {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden;
}
/* Bordes en las fichas y no huecos de rejilla: si la última fila no se llena,
   un hueco pintado del color de la separación parece una ficha vacía. */
.datos-rejilla > div {
  padding: 10px 13px; margin: -1px 0 0 -1px;
  border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline);
}
.datos-rejilla .k {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-3);
}
.datos-rejilla .v {
  font-size: 0.95rem; font-weight: 650; color: var(--ink-1); margin-top: 3px;
  overflow-wrap: anywhere;
}
.datos-rejilla .v.flojo { color: var(--ink-3); font-weight: 500; font-style: italic; }
.lado-fila { display: flex; gap: 8px; align-items: baseline; }
.lado-fila + .lado-fila { margin-top: 1px; }
.lado-fila span {
  flex: 0 0 68px; font-size: 0.78rem; font-weight: 500; color: var(--ink-3);
}
.lado-fila b { font-weight: 650; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   Pie de tabla: totalizador y paginador.

   Los totales son de todo lo filtrado, no de la página; por eso van a la
   izquierda, como resumen de la tabla, y la paginación a la derecha, como
   control. Van en el mismo pie para que no haya que buscarlos en dos sitios.
   -------------------------------------------------------------------------- */

.tabla-total {
  display: flex; flex-wrap: wrap; gap: 12px 20px;
  align-items: center; justify-content: space-between;
  padding: 12px 20px; border-top: 1px solid var(--hairline);
  background: var(--surface-2);
  border-radius: 0 0 var(--radius) var(--radius);
}
.tabla-total .tot { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.tabla-total .tot > div { font-size: 0.82rem; color: var(--ink-3); }
.tabla-total .tot b { color: var(--ink-1); font-variant-numeric: tabular-nums; margin-left: 6px; }
.tabla-total .pag { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tabla-total .pag .text-muted { font-size: 0.82rem; font-variant-numeric: tabular-nums; margin-right: 6px; }
.tabla-total .pag .btn.disabled { opacity: 0.4; pointer-events: none; }

@media (max-width: 640px) {
  .tabla-total { flex-direction: column; align-items: stretch; }
  .tabla-total .pag { justify-content: flex-end; }
}

/* --------------------------------------------------------------------------
   Fichas plegables.

   La ficha de un partido se mira por el marcador y por las incidencias; el
   acta, el evento, el reglamento y las acciones se abren de vez en cuando. Van
   cerradas para que lo que importa quepa en una pantalla.
   -------------------------------------------------------------------------- */

details.card-mac > summary,
details.card-mac > summary.card-head {
  cursor: pointer; list-style: none; position: relative; padding-right: 48px;
}
details.card-mac > summary::-webkit-details-marker { display: none; }
details.card-mac > summary::after {
  content: ''; position: absolute; right: 20px; top: 50%;
  width: 8px; height: 8px; margin-top: -7px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg); transition: transform 0.15s ease;
}
details.card-mac[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
details.card-mac > summary:hover { background: var(--surface-2); }

/* Los cuatro datos de cabecera de un partido, en una tira y no en cuatro cajas. */
.match-facts {
  display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--hairline-soft);
}
.match-facts > div { font-size: 0.88rem; color: var(--ink-2); }
.match-facts b { color: var(--ink-1); font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 6px; }

/* ==========================================================================
   Calendario
   ========================================================================== */

.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--hairline); }
.cal-dow {
  background: var(--surface-2); padding: 7px 10px;
  font-size: 0.72rem; font-weight: 640; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-3); text-align: center;
}
.cal-day {
  background: var(--surface); min-height: 108px; padding: 6px 7px;
  display: flex; flex-direction: column; gap: 3px;
}
.cal-day.outside { background: var(--surface-2); }
.cal-day.outside .cal-num { color: var(--ink-3); }
.cal-day.today .cal-num {
  background: var(--accent); color: #fff; border-radius: 50%;
  width: 22px; height: 22px; display: grid; place-items: center;
}
.cal-num { font-size: 0.8rem; font-weight: 620; color: var(--ink-2); }
.cal-ev {
  font-size: 0.75rem; font-weight: 560; border-radius: 6px;
  padding: 2px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: pointer; border: 1px solid transparent;
}
.cal-more { font-size: 0.7rem; color: var(--ink-3); padding-left: 4px; }

.agenda-row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 11px 0; border-bottom: 1px solid var(--hairline-soft);
}
.agenda-row:last-child { border-bottom: 0; }
.agenda-when {
  flex: 0 0 96px; font-variant-numeric: tabular-nums;
  font-size: 0.83rem; color: var(--ink-2); font-weight: 560;
}
.agenda-bar { flex: 0 0 3px; align-self: stretch; border-radius: 3px; min-height: 34px; }

/* ==========================================================================
   Avisos y estados vacíos
   ========================================================================== */

.flash-stack { position: fixed; top: 16px; right: 18px; z-index: 1080; width: min(380px, calc(100vw - 32px)); }
.flash {
  background: var(--surface); border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 11px 14px; margin-bottom: 9px; font-size: 0.9rem;
  display: flex; gap: 10px; align-items: flex-start;
  animation: flash-in 0.22s ease;
}
.flash.success { border-left-color: var(--success); }
.flash.danger  { border-left-color: var(--danger); }
.flash.warning { border-left-color: var(--warning); }
.flash .btn-close { margin-left: auto; font-size: 0.68rem; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.note {
  border-radius: var(--radius); padding: 12px 14px; font-size: 0.88rem;
  border: 1px solid var(--hairline); background: var(--surface-2); color: var(--ink-2);
}
.note.warn   { background: var(--warning-soft); border-color: rgba(224,163,54,.3); color: var(--sand-ink); }
.note.info   { background: var(--accent-soft);  border-color: rgba(76,141,246,.28); color: var(--accent-ink); }
.note.danger { background: var(--danger-soft);  border-color: rgba(227,93,106,.3);  color: var(--rose-ink); }
.note b { font-weight: 640; }

.empty { text-align: center; padding: 42px 20px; color: var(--ink-2); }
.empty .empty-mark {
  width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 14px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--sand), var(--peach));
  box-shadow: var(--shadow-sm);
}
.empty h3 { font-size: 1.02rem; margin-bottom: 4px; }
.empty p { font-size: 0.9rem; margin-bottom: 14px; }

/* ==========================================================================
   Pestañas de ajustes
   ========================================================================== */

.tabs-mac {
  display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 18px;
  border-bottom: 1px solid var(--hairline); padding-bottom: 0;
}
.tabs-mac a {
  padding: 7px 13px; font-size: 0.88rem; font-weight: 560;
  color: var(--ink-2); border-radius: 9px 9px 0 0; text-decoration: none;
  border: 1px solid transparent; border-bottom: none; margin-bottom: -1px;
}
.tabs-mac a:hover { color: var(--ink); background: var(--hairline-soft); text-decoration: none; }
.tabs-mac a.active {
  background: var(--surface); color: var(--ink); font-weight: 620;
  border-color: var(--hairline); border-bottom: 1px solid var(--surface);
}

/* ==========================================================================
   Pantallas de entrada
   ========================================================================== */

.auth-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
}
.auth-card {
  width: min(430px, 100%);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.auth-card .auth-head { padding: 26px 28px 8px; text-align: center; }
.auth-card .auth-body { padding: 8px 28px 26px; }
.auth-card .auth-foot {
  padding: 14px 28px; background: var(--surface-2);
  border-top: 1px solid var(--hairline-soft);
  font-size: 0.86rem; text-align: center; color: var(--ink-2);
}
.auth-mark {
  width: 52px; height: 52px; border-radius: 15px; margin: 0 auto 12px;
  display: grid; place-items: center; box-shadow: var(--shadow);
}

/* ==========================================================================
   Acta impresa
   ========================================================================== */

.report { max-width: 900px; margin: 0 auto; }
.report-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--ink);
  margin-bottom: 18px; flex-wrap: wrap;
}
.report-title { font-size: 1.45rem; font-weight: 680; margin: 0; }
.report-meta { font-size: 0.85rem; color: var(--ink-2); }
.report-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.report-field {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 9px 12px; background: var(--surface-2);
}
.report-field .k {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-3); font-weight: 640;
}
.report-field .v { font-weight: 580; font-size: 0.95rem; }
.report h2 {
  font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-2); margin: 22px 0 10px; font-weight: 640;
}
.sig-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px; margin-top: 34px;
}
.sig-line { border-top: 1px solid var(--ink); padding-top: 6px; font-size: 0.82rem; color: var(--ink-2); }

@media print {
  body { background: #fff !important; color: #000; }
  .sidebar, .topbar-mobile, .no-print, .flash-stack { display: none !important; }
  .content { padding: 0; }
  .card-mac, .report-field { box-shadow: none !important; border-color: #ccc !important; }
  .report { max-width: none; }
  a { color: #000 !important; text-decoration: none !important; }
  .table-mac thead th { position: static; background: #f3f3f3 !important; }
  @page { margin: 14mm; }
}

/* ==========================================================================
   Adaptación a pantallas pequeñas
   ========================================================================== */

@media (max-width: 991.98px) {
  .app { flex-direction: column; }
  .topbar-mobile { display: flex; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; height: 100vh;
    transform: translateX(-100%); transition: transform 0.22s ease;
    box-shadow: var(--shadow-lg); width: 270px; flex-basis: 270px;
  }
  .sidebar.open { transform: none; }
  .sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.32);
    z-index: 29; opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
  }
  .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
  .content { padding: 16px 14px 48px; }
  .scoreboard { grid-template-columns: 1fr; text-align: center; gap: 8px; }
  .scoreboard .side.right { text-align: center; }
  .scoreboard .games { justify-content: center; }
  .cal-day { min-height: 76px; }
  .agenda-when { flex-basis: 74px; }
}

@media (max-width: 575.98px) {
  body { font-size: 14.5px; }
  .page-head { margin-bottom: 14px; }
  .card-mac > .card-body,
  .card-mac > form > .card-body { padding: 14px; }
  .stat .stat-value { font-size: 1.7rem; }
  .cal-grid { font-size: 0.8rem; }
  .cal-day { min-height: 62px; padding: 4px; }
  .cal-ev { font-size: 0.68rem; padding: 1px 4px; }
  .report-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

/* ==========================================================================
   Portal de administración

   Los mismos huesos que el portal de árbitros, con el acento en lavanda en
   vez de en menta. No es decoración: cuando las dos pestañas están abiertas
   en el mismo navegador, el color dice en cuál estás antes de leer nada.
   ========================================================================== */

.avatar-admin {
  color: var(--lilac-ink);
  background: linear-gradient(145deg, var(--lilac), var(--lavender));
}

.sidebar-admin .nav-item.active {
  color: var(--lavender-ink);
  background: color-mix(in srgb, var(--lavender) 34%, transparent);
}

/* En oscuro, «tinta lavanda» sobre «fondo lavanda» no se lee: el mismo patrón
   que las pastillas — el color pasa al texto y el fondo se queda en un velo. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sidebar-admin .nav-item.active {
    color: var(--lavender);
    background: color-mix(in srgb, var(--lavender) 16%, transparent);
  }
}
:root[data-theme="dark"] .sidebar-admin .nav-item.active {
  color: var(--lavender);
  background: color-mix(in srgb, var(--lavender) 16%, transparent);
}

.sidebar-admin .nav-item.active svg { color: inherit; opacity: 1; }

.auth-card-admin { border-top: 3px solid var(--lavender); }

/* La franja superior de la ventana: fina, y sólo en administración. */
body.is-admin .app::before {
  content: "";
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 30;
  background: linear-gradient(90deg, var(--lavender), var(--lilac), var(--lavender));
}

/* ==========================================================================
   Selector de idioma

   Dos enlaces pequeños al pie de la barra lateral. Pequeños pero no
   escondidos: el árbitro que aterriza en el idioma que no es el suyo tiene
   que verlos sin buscarlos.
   ========================================================================== */

.lang-switch {
  display: flex; gap: 2px; margin-top: 8px;
  padding: 3px; border-radius: var(--radius-sm);
  background: var(--hairline-soft);
}
.lang-switch a {
  flex: 1; text-align: center;
  padding: 3px 6px; border-radius: calc(var(--radius-sm) - 3px);
  font-size: 0.74rem; font-weight: 560; color: var(--ink-2);
  text-decoration: none; transition: background 0.12s ease, color 0.12s ease;
}
.lang-switch a:hover { color: var(--ink); text-decoration: none; }
.lang-switch a.active {
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* En la pantalla de entrada va suelto y centrado, sin fondo. */
.auth-wrap .lang-switch {
  background: none; padding: 0; justify-content: center; margin-top: 10px;
}
.auth-wrap .lang-switch a { flex: 0 0 auto; padding: 3px 10px; }

/* ===========================================================================
   ESPERANDO RESPUESTA
   ---------------------------------------------------------------------------
   La consulta al reglamento se va a un proveedor de fuera y tarda unos
   segundos. Mientras tanto hay que decirlo: gira el aro dentro del botón y
   aparece una línea debajo. Lo enciende el JS poniendo `.esperando-si` en el
   formulario; sin JS no se ve nada y la consulta funciona igual.
   ========================================================================= */

.giro {
  display: none;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ump-giro 0.7s linear infinite;
}

@keyframes ump-giro { to { transform: rotate(360deg); } }

/* El botón: se cambia el texto por el aro, y se queda del mismo ancho para
   que no baile la fila al pulsarlo. */
form[data-espera] button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
form[data-espera].esperando-si button[type="submit"] {
  cursor: progress; opacity: 0.85;
}
form[data-espera].esperando-si button[type="submit"] .txt { display: none; }
form[data-espera].esperando-si button[type="submit"] .giro { display: inline-block; }

/* La línea de debajo, que es la que explica que esto tarda. */
.esperando {
  display: none;
  align-items: center; gap: 8px;
  margin-top: 12px;
  font-size: 0.86rem; color: var(--ink-2);
}
form[data-espera].esperando-si .esperando { display: flex; }
form[data-espera].esperando-si .esperando .giro { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .giro { animation-duration: 2.4s; }
}

/* ===========================================================================
   CONVERSACIÓN
   ---------------------------------------------------------------------------
   La consulta del reglamento es un ir y venir: se pregunta, se contesta, y se
   vuelve a preguntar sobre lo mismo. Con scroll y tope de altura, para que una
   conversación larga no empuje el resto de la pantalla hasta el sótano.
   ========================================================================= */

.chat {
  max-height: 460px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  padding-right: 4px;
}

.burbuja {
  max-width: 82%;
  padding: 11px 15px;
  /* Redondas de verdad, como una burbuja de conversación. La esquina de abajo
     del lado de quien habla se queda casi recta: es lo que apunta a quién lo
     ha dicho sin necesidad de pintar un pico. */
  border-radius: 18px;
  font-size: 0.92rem; line-height: 1.5;
  white-space: normal; overflow-wrap: anywhere;
}

/* La del árbitro, a la derecha. */
.burbuja.mia {
  align-self: flex-end;
  border-bottom-right-radius: 6px;
  background: var(--accent-soft, var(--surface-2));
  color: var(--ink);
  border: 1px solid var(--hairline);
}

/* La respuesta, a la izquierda y con más aire: es la que se lee de verdad. */
.burbuja.suya {
  align-self: flex-start;
  border-bottom-left-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  color: var(--ink);
}

.burbuja.suya.mal {
  background: var(--danger-soft, var(--surface-2));
  border-color: var(--danger, var(--hairline));
}

.burbuja .apunte {
  margin-top: 8px;
  font-size: 0.72rem; color: var(--ink-3, var(--ink-2)); opacity: 0.75;
}

/* El código para vincular un móvil: grande, monoespaciado y separado, porque
   se lee de una pantalla y se teclea en otra. */
.codigo-pareja {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(2rem, 7vw, 3.1rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink);
  user-select: all;
}