/* ==========================================================================
   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;
}

.traffic { display: flex; gap: 8px; padding: 6px 8px 16px; }
.traffic i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.traffic i:nth-child(1) { background: #ff5f57; }
.traffic i:nth-child(2) { background: #febc2e; }
.traffic i:nth-child(3) { background: #28c840; }

.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 10px 14px; text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(145deg, var(--mint), var(--sky));
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
  flex: 0 0 34px;
}
.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; }

/* 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; }
.card-mac > .card-body { padding: 18px; }
.card-mac > .card-body.tight { padding: 12px; }
.card-mac > .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); }

@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; }
.scoreboard .winner-mark { color: var(--success); }

.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);
}
.timeline-item.card::before      { border-color: var(--warning); background: var(--sand); }
.timeline-item.referee::before   { border-color: var(--danger); background: var(--rose); }
.timeline-item.timeout::before   { border-color: var(--sky-ink); background: var(--sky); }
.timeline-item.expedite::before  { border-color: var(--success); background: var(--mint); }
.timeline-item.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); }

/* ==========================================================================
   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;
  background: linear-gradient(145deg, var(--mint), var(--sky));
  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; }
  .traffic { display: none; }
  .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 { 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.
   ========================================================================== */

.brand-mark-admin,
.auth-mark-admin {
  background: linear-gradient(145deg, var(--lavender), var(--lilac));
}

.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; }