/* =========================================================
   Voleimasters — estils base
   =========================================================
   Paleta treta del logotip: negre, verd i groc.

   Els colors del logotip NO es poden fer servir per a text: el
   verd (#8cb627) té 2,9 de contrast sobre blanc i el groc
   (#ddd630) en té 1,5, quan en calen 4,5. Per això la marca es
   reparteix així:

     · el NEGRE fa d'estructura (barra superior, fons fosc), que
       és el que domina el logotip;
     · un VERD ENFOSQUIT fa d'acció (botons, enllaços), amb 5,0
       de contrast;
     · el LIMA i el GROC del logotip queden per a accents,
       degradats i detalls, mai per a text petit.
   ========================================================= */

:root {
  /* Logotips. Són variables perquè la lliga els pugui canviar des de la
     pantalla d'administració sense que ningú toqui aquest fitxer. */
  --logo: url("../icones/logo.png");
  --logo-clar: url("../icones/logo-clar.png");

  /* Acció */
  --primary: #4a7c00;
  --primary-dark: #3a6100;
  --primary-soft: rgba(74, 124, 0, 0.09);

  /* Els colors tal com surten al logotip. Decoratius. */
  --lima: #8cb627;
  --groc: #ddd630;
  --secondary: #ddd630;
  --secondary-dark: #c4bd18;

  /* Estructura */
  --negre: #0d0f0c;
  --bg: #f7f8f4;
  --surface: #ffffff;
  --surface-2: #eef0e8;
  --text: #14170f;
  --muted: #5c6152;
  --border: #e3e6dc;

  /* Significat. El verd d'ascens ha de ser DIFERENT del verd de
     la marca o a la classificació semblarien el mateix. */
  --green: #0a8f4d;
  --red: #d32020;
  --live: #e5342c;

  --radius: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --shadow: 0 1px 2px rgba(13, 15, 12, .06), 0 4px 12px rgba(13, 15, 12, .05);
  --shadow-lg: 0 10px 30px rgba(13, 15, 12, .22);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --tabbar-h: 62px;
  --topbar-h: 58px;
}

html[data-theme="dark"] {
  --bg: #0d0f0c;
  --surface: #191c15;
  --surface-2: #23271d;
  --text: #eef0e6;
  --muted: #9aa08c;
  --border: #2a2e23;

  /* Sobre fons fosc el verd fosc no es veuria: aquí sí que hi va
     el lima del logotip, que hi llueix. */
  --primary: #9ec93a;
  --primary-dark: #8cb627;
  --primary-soft: rgba(158, 201, 58, 0.14);

  --green: #2fbf6f;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior-y: none;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input { font-family: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }

.icon { width: 22px; height: 22px; flex: none; display: block; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 28px; height: 28px; }

/* ---------- Estructura ---------- */

.app {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.view {
  flex: 1;
  padding: 16px 16px calc(var(--tabbar-h) + var(--safe-bottom) + 20px);
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}

/* L'animació només s'aplica en canviar de pantalla, no en cada
   repintat (si no, el marcador parpellejaria a cada punt). */
.view.enter { animation: fade .18s ease; }

.view.no-tabbar { padding-bottom: calc(var(--safe-bottom) + 20px); }

@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Topbar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: var(--safe-top);
  background: var(--surface); /* fallback per a WebViews antics */
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  max-width: 720px;
  margin: 0 auto;
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; }

/* El logotip, tal qual. En mode clar el negre es veu sobre el blanc; en
   fosc es fa servir la variant amb el negre convertit en blanc, perquè
   si no la part principal desapareixeria. */
.brand-mark {
  width: 40px; height: 22px;
  background: var(--logo) center / contain no-repeat;
}
html[data-theme="dark"] .brand-mark {
  background-image: var(--logo-clar);
}
.brand-name { font-size: 17px; font-weight: 800; white-space: nowrap; }
.brand-name span { color: var(--primary); }

.topbar-title { font-size: 17px; font-weight: 800; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.icon-btn {
  width: 38px; height: 38px;
  border-radius: 999px;
  display: grid; place-items: center;
  color: var(--muted);
  background: var(--surface-2);
  transition: color .15s, background .15s;
}
.icon-btn:active { background: var(--primary-soft); color: var(--primary); }
.icon-btn.ghost { background: transparent; }

/* ---------- Tabbar ---------- */

.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  padding-bottom: var(--safe-bottom);
  background: var(--surface); /* fallback per a WebViews antics */
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
}
.tabbar[hidden] { display: none; }

.tab {
  flex: 1;
  height: var(--tabbar-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  transition: color .15s;
}
.tab.active { color: var(--primary); }
html[data-theme="dark"] .tab.active { color: var(--secondary); }
.tab.active .tab-dot { opacity: 1; }
.tab-dot {
  width: 4px; height: 4px; border-radius: 999px;
  background: currentColor; opacity: 0;
  transition: opacity .15s;
}

/* ---------- Tipografia auxiliar ---------- */

.page-title { font-size: 26px; font-weight: 900; }
.page-sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted);
  margin: 24px 0 10px;
}
.section-title .icon { color: var(--primary); }
html[data-theme="dark"] .section-title .icon { color: var(--secondary); }
.muted { color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 34px 12px; font-size: 14px; }

/* ---------- Targetes ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card + .card { margin-top: 12px; }
.card-pad { padding: 16px; }
.card-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 800;
}
.card-head .icon { color: var(--primary); }
html[data-theme="dark"] .card-head .icon { color: var(--secondary); }
.card-foot {
  padding: 12px; text-align: center;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 10px; }
/*
   Una fila amb dues coses als extrems. Si té germans a sota, separa's:
   sense això, l'etiqueta «En directe» quedava enganxada al nom del
   primer equip a les targetes de partit en viu — i el mateix a totes
   les altres pantalles que la fan servir.
*/
.spread { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.spread:not(:last-child) { margin-bottom: 12px; }

/* ---------- Píndoles / etiquetes ---------- */

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
}
.pill-yellow { background: var(--groc); color: var(--negre); }
.pill-soft { background: var(--surface-2); color: var(--muted); }
.pill-primary { background: var(--primary); color: #fff; }
.pill-live { background: rgba(229, 52, 44, .12); color: var(--live); }
.pill-done { background: rgba(10, 143, 77, .12); color: var(--green); }
/* Cancel·lat: es veu de lluny, però sense cridar com el directe. */
.pill-cancelat { background: rgba(229, 52, 44, .12); color: var(--red); }

.dot-live {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--live);
  animation: pulse 1.4s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.8); }
}

/* ---------- Botons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 18px;
  border-radius: var(--radius);
  font-size: 15px; font-weight: 800;
  transition: filter .15s, transform .08s, background .15s;
}
.btn:active { transform: scale(.985); }
.btn-block { width: 100%; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 6px 18px rgba(0, 74, 153, .25); }
.btn-secondary { background: var(--secondary); color: var(--primary); }
.btn-outline { border: 1.5px solid var(--border); background: var(--surface); color: var(--text); }
.btn-danger { background: rgba(220, 38, 38, .12); color: var(--red); }
.btn-ghost { color: var(--primary); font-weight: 800; }
html[data-theme="dark"] .btn-ghost { color: var(--secondary); }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- Segments / filtres ---------- */

.segments {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 4px;
  scrollbar-width: none;
}
.segments::-webkit-scrollbar { display: none; }
.segment {
  flex: none;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px; font-weight: 700;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}
.segment.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ---------- Escuts d'equip ---------- */

.crest {
  width: 38px; height: 38px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--secondary);
  color: var(--primary);
  font-weight: 900; font-size: 12px;
  flex: none;
}
.crest-lg { width: 52px; height: 52px; font-size: 16px; }
.crest-logo {
  background-color: #fff;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.crest-outline {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
}

/*
  Un logotip sempre sobre blanc i sencer, també a les pantalles fosques.

  A la capçalera del partit i al marcador de l'àrbitre hi va `.crest-outline`,
  que escriu `background` sencer: això esborrava la mida i la posició que
  havia posat `.crest-logo` i l'escut es dibuixava a mida natural —de 256
  píxels dins d'una rodona de 52—, o sigui que només se'n veia un tros
  fosc. I el blanc de sota també se'l menjava, i un escut negre sobre fons
  negre no es veu. Aquí es torna a dir tot, amb un coixí perquè no toqui
  la vora.
*/
.crest.crest-logo {
  background-color: #fff;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-origin: content-box;
  border-color: rgba(255, 255, 255, .5);
  padding: 3px;
}

/* ---------- Partit: fila de llista ---------- */

.match {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow);
}
.match:active { border-color: var(--primary); }
.match-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 12px;
  font-size: 11px; font-weight: 700; color: var(--muted);
}
.match-team { display: flex; align-items: center; gap: 10px; min-width: 0; }
.match-team + .match-team { margin-top: 10px; }
.match-team-name { font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-team.winner .match-team-name { font-weight: 900; }
.match-team.loser { opacity: .6; }
.match-score {
  margin-left: auto;
  font-weight: 900; font-size: 19px;
  font-variant-numeric: tabular-nums;
}
/* El marcador d'un partit en joc, amb el color d'accent i no amb el
   vermell d'«en directe»: un 2-0 en vermell sembla una advertència, quan
   només vol dir que un equip va guanyant. El vermell es reserva per al
   distintiu i el punt que parpelleja. */
.match-score.live { color: var(--secondary-dark); }
html[data-theme="dark"] .match-score.live { color: var(--groc); }
.match-sets { margin-left: 10px; display: flex; gap: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Marcador en directe (destacat) ---------- */

.live-card {
  background: linear-gradient(140deg, #1d3300 0%, var(--negre) 100%);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: 18px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.live-card .ball-bg {
  position: absolute; right: -26px; bottom: -30px;
  width: 140px; height: 140px; opacity: .09;
}
.live-card-row { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.live-card-row + .live-card-row { margin-top: 14px; }
/* El nom s'endú l'espai que sobra: així la càpsula de sets i el marcador
   queden a la mateixa columna a les dues files, encara que un equip es
   digui «AVA» i l'altre «Castellar Taronja». Sense això les dues files
   d'una mateixa targeta quedaven desalineades. */
.live-name {
  flex: 1; min-width: 0;
  font-weight: 700; font-size: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.live-points {
  /* Ample fix per a dues xifres: si no, el marcador es desplaça
     lateralment cada cop que es passa de 9 a 10. */
  min-width: 2.1ch;
  text-align: right;
  font-size: 34px; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--secondary);
}
.live-sets {
  flex: 0 0 auto;
  min-width: 1.9ch; text-align: center;
  font-size: 13px; font-weight: 800;
  background: rgba(255, 255, 255, .14);
  border-radius: 8px;
  padding: 3px 9px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Taula de classificació ---------- */

.table-wrap { overflow-x: auto; }
table.standings { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.standings thead tr {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
}
table.standings th { padding: 11px 8px; text-align: center; font-weight: 800; }
table.standings th.pts { background: var(--primary); color: #fff; }
table.standings tbody tr { cursor: pointer; }
table.standings td { padding: 11px 8px; text-align: center; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
table.standings td.pts { font-weight: 900; background: var(--primary-soft); }
table.standings td .team-cell { display: flex; align-items: center; gap: 9px; }
table.standings td .team-cell .crest { width: 28px; height: 28px; font-size: 10px; }
table.standings td .team-cell span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
/*
  A la vista completa hi ha set columnes i al mòbil no hi caben: la taula
  ja es podia arrossegar, però amb la diferència de punts se'n sortia una
  més. S'estrenyen les cel·les dels números —no la de l'equip— i torna a
  quedar com estava.
*/
@media (max-width: 420px) {
  table.standings th, table.standings td { padding-left: 5px; padding-right: 5px; }
  table.standings td .team-cell span { max-width: 108px; }
}

.win { color: var(--green); }
.loss { color: var(--red); }

/* ---------- Graella d'equips ---------- */

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.team-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 12px;
  text-align: center;
  box-shadow: var(--shadow);
}
.team-card .crest { margin: 0 auto 10px; }
.team-card-name { font-weight: 800; font-size: 13.5px; line-height: 1.25; }
.team-card-meta { color: var(--muted); font-size: 11.5px; margin-top: 4px; }

/* ---------- Formulari / login ---------- */

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; font-weight: 800; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .icon { position: absolute; left: 13px; color: var(--muted); width: 19px; height: 19px; }
/*
   El buit de l'esquerra és per a la icona de dins del camp, i només els
   camps d'accés en porten. Aplicat a tots, es menjava 42 px de cada
   camp: en una fila de dos, la data de naixement sortia tallada
   («13/07/1…») al mòbil.
*/
.field input {
  width: 100%;
  padding: 14px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  outline: none;
}
.input-wrap input { padding-left: 42px; }
.field input:focus { border-color: var(--primary); }

/*
   Els desplegables anaven sense estil: sortien amb l'aspecte del
   navegador, més baixos i amb una altra lletra, i descolocaven les
   files on van al costat d'un camp de text.
*/
.field select,
.field textarea {
  width: 100%;
  padding: 14px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  outline: none;
}
.field select {
  /* La fletxa la dibuixem nosaltres: la del sistema no es pot pintar i
     en fosc quedava negra sobre negre. */
  appearance: none;
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 22px, calc(100% - 13px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field select:focus,
.field textarea:focus { border-color: var(--primary); }

.login-hero {
  text-align: center;
  padding: 28px 0 22px;
}
.login-hero .brand-mark { width: 62px; height: 62px; border-radius: 20px; margin: 0 auto 14px; }
.login-hero .brand-mark .icon { width: 32px; height: 32px; }

.note {
  display: flex; gap: 10px;
  background: var(--primary-soft);
  border: 1px dashed color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: var(--radius);
  padding: 12px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}
.note .icon { color: var(--primary); }
html[data-theme="dark"] .note .icon { color: var(--secondary); }

/* =========================================================
   ZONA ÀRBITRE — control de marcador
   ========================================================= */

.ref-header {
  background: linear-gradient(140deg, #1d3300 0%, var(--negre) 100%);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: 16px;
  box-shadow: var(--shadow-lg);
}
.ref-header .spread { align-items: flex-start; }
.ref-meta { display: flex; align-items: center; gap: 5px; font-size: 12px; opacity: .8; margin-top: 3px; }

/* Les píndoles dins d'una capçalera fosca s'inverteixen */
.ref-header .pill, .live-card .pill { background: rgba(255, 255, 255, .16); color: #fff; }
/* Sobre el marcador fosc, el cancel·lat ha de seguir cridant l'atenció. */
.ref-header .pill-cancelat, .live-card .pill-cancelat {
  background: rgba(229, 52, 44, .3); color: #ffd9d6;
}

.scoreboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin: 18px 0 6px;
}
.sb-team { text-align: center; min-width: 0; }
.sb-team .crest { margin: 0 auto 8px; }
/* El nom pot ocupar dues línies. Tallar-lo («Escola Pia V…») estalviava
   uns píxels a canvi de no saber quin equip és, i aquesta és la pantalla
   on l'àrbitre ha de tenir-ho clar sense pensar-hi. */
.sb-name {
  font-size: 13px; font-weight: 800;
  line-height: 1.25;
  /* Dues línies com a màxim: amb tres, els marcadors de cada banda
     quedarien a altures diferents. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Que les dues línies quedin repartides, no una llarga i una curta. */
  text-wrap: balance;
  min-height: 2.5em;
}
.sb-points {
  font-size: 62px; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--secondary);
  margin-top: 6px;
}
.sb-mid { text-align: center; color: rgba(255,255,255,.75); }
.sb-sets {
  font-size: 22px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .14);
  border-radius: 10px;
  padding: 6px 12px;
}
.sb-setlabel { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; font-weight: 800; }

.sets-strip {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  margin-top: 14px;
}
.set-chip {
  font-size: 11.5px; font-weight: 800;
  background: rgba(255, 255, 255, .12);
  border-radius: 8px;
  padding: 5px 10px;
  font-variant-numeric: tabular-nums;
}
.set-chip.current { background: var(--secondary); color: var(--primary); }

/* Variant sobre fons clar (detall de partit públic) */
.sets-strip.clar { justify-content: flex-start; }
.sets-strip.clar .set-chip { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.sets-strip.clar .set-chip.current { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Controls grans de punts */
.point-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}
.point-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 10px;
}
.point-col-name {
  font-size: 12px; font-weight: 800; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.btn-point {
  height: 84px;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 17px; font-weight: 900;
  box-shadow: 0 6px 18px rgba(0, 74, 153, .25);
  transition: transform .07s, filter .15s;
}
.btn-point:active { transform: scale(.97); filter: brightness(1.12); }
.btn-point .icon { width: 30px; height: 30px; stroke-width: 3; }
.btn-minus {
  height: 46px;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 800;
}
.btn-minus:active { background: rgba(220, 38, 38, .1); color: var(--red); }

.ref-actions { display: flex; gap: 10px; margin-top: 16px; }
.ref-actions .btn { flex: 1; }

/* Historial d'accions */
.log { max-height: 210px; overflow-y: auto; }
.log-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  text-align: left;
  background: transparent;
}
.log-item .icon { color: var(--muted); }
a.log-item { color: var(--text); text-decoration: none; }
.log-item:first-child { border-top: 0; }
.log-time { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; margin-left: auto; }
.log-badge {
  width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary);
  font-size: 11px; font-weight: 900;
}
html[data-theme="dark"] .log-badge { color: var(--secondary); }

/* ---------- Overlay: diàlegs ---------- */

.overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px;
  padding-bottom: calc(16px + var(--safe-bottom));
  animation: fade .15s ease;
}
.overlay[hidden] { display: none; }
.sheet {
  background: var(--surface);
  border-radius: var(--radius-xl);
  width: 100%; max-width: 420px;
  padding: 20px;
  box-shadow: 0 -10px 40px rgba(0,0,0,.3);
  animation: rise .2s ease;

  /*
    Hi ha fulls que porten llista —els àrbitres per designar, els
    convocables, qui rep una targeta— i poden ser més alts que la
    pantalla. Sense alçada màxima creixien cap amunt i se sortien del
    viewport: al mòbil, els primers de la llista no es veien ni es
    podien prémer, i com que l'overlay és fix no hi havia res per
    desplaçar. El 100% és l'alçada de l'overlay amb el marge i la zona
    segura de baix ja descomptats, que els posa ell.
  */
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@keyframes rise { from { transform: translateY(20px); opacity: .6; } to { transform: none; opacity: 1; } }
.sheet h3 { font-size: 18px; font-weight: 900; margin-bottom: 6px; }
.sheet p { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.sheet-actions { display: flex; gap: 10px; }
.sheet-actions .btn { flex: 1; }

/* =========================================================
   PANTALLA DE CÀRREGA
   ========================================================= */

.splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #1d3300 0%, var(--negre) 100%);
  transition: opacity .45s ease, visibility .45s;
}
.splash.oculta { opacity: 0; visibility: hidden; }

/* Halo verd que batega darrere del logotip. */
.splash-halo {
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(140, 182, 39, .22), transparent 62%);
  animation: splash-halo 2.2s ease-in-out infinite;
}
@keyframes splash-halo {
  0%, 100% { transform: scale(.88); opacity: .5; }
  50%      { transform: scale(1.08); opacity: 1; }
}

.splash-logo {
  position: relative;
  width: min(70vw, 260px);
  animation: splash-entrada .6s cubic-bezier(.2, .85, .25, 1) both;
}
@keyframes splash-entrada {
  from { transform: scale(.86); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/*
  El logotip es descobreix d'esquerra a dreta, com si el pintessin.
  Es fa amb una màscara que es desplaça: així s'anima el dibuix de debò
  en comptes d'una aproximació feta a mà, que amb una marca aliena
  sempre queda diferent de l'original.
*/
.splash-logo-img {
  width: 100%;
  aspect-ratio: 499 / 271;
  background: var(--logo-clar) center / contain no-repeat;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .45));

  /*
    La màscara és 2,6 vegades més ampla que el logotip i té la part
    opaca a l'esquerra. Amb mask-position al 100% el logotip queda tapat;
    al 0%, descobert del tot. Per això va de 100 a 0 i no a l'inrevés:
    amb valors fora d'aquest interval la màscara es repeteix i el
    logotip desapareix en comptes d'aparèixer.
  */
  -webkit-mask-image: linear-gradient(100deg, #000 45%, transparent 62%);
          mask-image: linear-gradient(100deg, #000 45%, transparent 62%);
  -webkit-mask-size: 260% 100%;
          mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: splash-pintar 1s cubic-bezier(.35, .1, .2, 1) .12s both;
}
@keyframes splash-pintar {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
}

/* Una llambregada de lima a groc que travessa el logotip en acabar. */
.splash-brillantor {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 42%,
    rgba(140, 182, 39, .55) 50%,
    rgba(221, 214, 48, .75) 55%,
    transparent 63%);
  mix-blend-mode: screen;
  animation: splash-brillar 1.1s ease-out .85s both;
}
@keyframes splash-brillar {
  from { transform: translateX(-70%); opacity: 0; }
  30%  { opacity: 1; }
  to   { transform: translateX(70%);  opacity: 0; }
}

/* Línia amb el degradat de la marca, que creix sota el logotip. */
.splash-barra {
  position: absolute;
  bottom: calc(50% - 90px);
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lima), var(--groc));
  animation: splash-linia .8s cubic-bezier(.2, .85, .25, 1) .55s both;
}
@keyframes splash-linia {
  from { width: 0; opacity: 0; }
  to   { width: min(46vw, 170px); opacity: 1; }
}

/* Si el sistema demana menys moviment, el logotip només apareix. */
@media (prefers-reduced-motion: reduce) {
  .splash-halo,
  .splash-brillantor { display: none; }
  .splash-logo,
  .splash-logo-img,
  .splash-barra { animation: none; }
  .splash-logo-img {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .splash-barra { width: min(46vw, 170px); }
}

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 18px);
  z-index: 120;
  background: var(--text);
  color: var(--bg);
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 13px; font-weight: 700;
  box-shadow: var(--shadow-lg);
  animation: fade .15s ease;
  max-width: 90vw;
  text-align: center;
}
.toast[hidden] { display: none; }

/* =========================================================
   Estats de càrrega, connexió i moviments de classificació
   (afegit en connectar l'app amb el servidor)
   ========================================================= */

.carregant {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 48px 0;
  color: var(--muted);
  font-size: 14px; font-weight: 600;
}

.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: gira .7s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* El sondeig repinta cada pocs segons: sense això, l'animació d'entrada
   es reiniciaria a cada actualització i la pantalla vibraria. */
.view.enter { animation: fade .18s ease; }

.icon-xs { width: 12px; height: 12px; }

/* ---------- Ascensos i descensos ---------- */

.mov-icon { vertical-align: middle; margin-left: 2px; }
.mov-text-ascens  { color: var(--green); font-weight: 800; }
.mov-text-descens { color: var(--red); font-weight: 800; }

/* ---------- Dorsal a la plantilla ---------- */

.dorsal {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 6px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px; font-weight: 800;
}

/* =========================================================
   UNA SOLA INTERFÍCIE PER A MÒBIL I ESCRIPTORI
   =========================================================
   Fins ara hi havia dos front-ends: un per al navegador i un
   per al mòbil, amb la classificació, el calendari i les
   fitxes escrites dues vegades. Ara és el mateix codi: el que
   canvia és el que hi ha a partir d'aquí.

   El llindar ha de coincidir amb CONFIG.amplariEscriptori.
   ========================================================= */

/* ---------- Peces noves ---------- */

.hero { margin-bottom: 4px; }

.card-clicable { width: 100%; text-align: left; display: block; cursor: pointer; }
.card-clicable:hover { border-color: var(--primary); }

.noticia-titol { font-size: 15px; font-weight: 800; line-height: 1.3; margin-top: 10px; }
.noticia-titol.gran { font-size: 19px; }

.descripcio { color: var(--muted); line-height: 1.6; font-size: 14px; white-space: pre-line; margin-top: 8px; }

.equip-nom { font-size: 20px; font-weight: 900; margin-top: 10px; }

.stat { text-align: center; flex: 1; }
.stat-valor { font-size: 22px; font-weight: 900; }

.form-titol { font-size: 15px; font-weight: 800; margin-bottom: 14px; }
/* Dos camps de costat. S'alineen per baix perquè les caixes quedin a la
   mateixa altura encara que una etiqueta ocupi dues línies i l'altra una
   («Sets per guanyar» i «Diferència mínima» quedaven escalonades). */
.fila-camps { display: flex; gap: 10px; align-items: end; }
.fila-camps .field { flex: 1; min-width: 0; }
.fila-color { display: flex; align-items: center; gap: 12px; }
.fila-color input[type="color"] {
  width: 56px; height: 42px; padding: 2px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: transparent; cursor: pointer;
}
.nota-petita { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-top: 14px; }

.note-avis { border-color: var(--secondary); }
/* La pantalla que surt en acabar-se un set. */
.sheet-set { text-align: center; }
.sheet-set .set-rotul {
  margin: 0; font-size: 12px; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.sheet-set .set-punts {
  margin: 6px 0 2px; font-size: 44px; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sheet-set .set-equips { margin: 0; font-size: 13px; color: var(--muted); }
.sheet-set .set-ara { margin: 14px 0 0; font-size: 14px; }
.sheet-actions.columna { flex-direction: column; gap: 8px; }

/* Els punts de cada set, quan es passen des d'un acta de paper. */
.fila-set {
  display: grid; grid-template-columns: 1fr 72px 18px 72px;
  align-items: center; gap: 8px;
  padding: 7px 0;
}
.fila-set input { text-align: center; }
.fila-set-nom { font-weight: 700; font-size: 14px; }
.fila-set-guio { text-align: center; color: var(--muted); }
.capcalera-sets {
  display: grid; grid-template-columns: 1fr 72px 18px 72px;
  gap: 8px; margin-bottom: 2px;
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); text-align: center;
}
.foto-acta {
  display: block; width: 100%; border-radius: 12px;
  border: 1px solid var(--border); margin-bottom: 12px;
}
.note-cancelat { border-color: var(--red); }
.note-cancelat .icon { color: var(--red); }

/* Columnes que a l'escriptori es posen de costat i al mòbil s'apilen. */
.columnes { display: grid; gap: 4px; }
.graella-directe { display: grid; gap: 12px; }

/* ---------- Calendari per jornades ---------- */

.jornades { margin-top: 14px; }
.jornada { margin-bottom: 10px; overflow: hidden; }
.jornada summary {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; cursor: pointer; list-style: none;
}
.jornada summary::-webkit-details-marker { display: none; }
.jornada summary:hover { background: var(--surface-2); }
.jornada-num {
  width: 38px; height: 38px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius); background: var(--primary-soft);
  color: var(--primary); font-weight: 900;
}
.jornada-info { flex: 1; display: flex; flex-direction: column; }
.jornada-info strong { font-size: 14px; font-weight: 800; }
.jornada-info small { color: var(--muted); font-size: 11.5px; }
.jornada-comptador { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.jornada-partits { border-top: 1px solid var(--border); }

.fila-jornada {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.fila-jornada:last-child { border-bottom: none; }
.fila-jornada:hover { background: var(--surface-2); }
.fj-equip {
  font-size: 13px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fj-equip.dreta { text-align: right; }
.fj-equip.guanyador { color: var(--text); font-weight: 800; }
.fj-centre {
  min-width: 64px; text-align: center;
  font-variant-numeric: tabular-nums; font-weight: 800;
}
.fj-cancelat { color: var(--red); font-weight: 800; }
/* El dia damunt de l'hora, cadascun a la seva línia. */
.fj-dia { display: block; color: var(--text); }
.fj-centre .muted { display: block; font-weight: 700; }
.match-cancelat {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.4; text-align: left;
  color: var(--red);
}
.match-cancelat .icon { flex: none; color: var(--red); }
.etiqueta-viu {
  display: block; font-size: 8.5px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .1em; color: var(--live);
}
.viu { color: var(--live); font-weight: 900; }
.viu-punts { display: block; font-size: 10px; font-weight: 700; color: var(--live); opacity: .8; }

/* ---------- Escriptori ---------- */

.nav-escriptori { display: none; }
.caixa-estreta { max-width: 460px; margin-left: auto; margin-right: auto; }

@media (min-width: 900px) {
  /* El menú passa a dalt i la barra de pestanyes desapareix. */
  .tabbar { display: none !important; }

  /* Amplada fluida: el contingut ocupa la pantalla i el marge lateral
     creix amb ella, però sense passar d'un límit on les taules quedarien
     absurdament amples. */
  .view {
    max-width: 1900px;
    padding: 30px clamp(20px, 2.5vw, 56px) 64px;
  }
  .view.no-tabbar { padding-bottom: 64px; }

  .topbar-inner {
    max-width: 1900px; margin: 0 auto;
    padding: 0 clamp(20px, 2.5vw, 56px);
    gap: clamp(20px, 2.5vw, 44px);
  }

  .nav-escriptori { display: flex; align-items: center; gap: clamp(18px, 1.8vw, 34px); flex: 1; }
  .nav-enllac {
    font-size: 15px; font-weight: 700; color: var(--muted);
    padding: 6px 0; cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .nav-enllac:hover { color: var(--primary); }
  .nav-enllac.actiu { color: var(--primary); border-bottom-color: var(--primary); }

  /* Tot una mica més gran: a un monitor, les mides pensades per al mòbil
     es queden diminutes. */
  .page-title { font-size: 34px; }
  .page-sub { font-size: 15px; }
  .section-title { font-size: 14px; margin-top: 30px; }
  .brand-name { font-size: 20px; }
  .card-pad { padding: 22px; }
  .btn { height: 46px; font-size: 14.5px; }
  .segment { padding: 11px 20px; font-size: 14px; }
  .log-item { padding: 15px 18px; font-size: 14.5px; }

  .columnes { grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
  .graella-directe { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
  .grid-2 { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
  .stack { gap: 12px; }

  /* Amb espai de sobra, la classificació ensenya totes les columnes. */
  table.standings { font-size: 15.5px; }
  table.standings th { padding: 15px 12px; font-size: 11.5px; }
  table.standings td { padding: 16px 12px; }
  table.standings td .team-cell span { max-width: none; }
  table.standings td .team-cell .crest { width: 34px; height: 34px; font-size: 12px; }

  .fila-jornada { padding: 15px 20px; }
  .fj-equip { font-size: 15px; }
  .jornada summary { padding: 17px 20px; }

  .segments { flex-wrap: wrap; }
  .btn-block { max-width: 340px; margin-left: auto; margin-right: auto; }

  /* Els formularis no han de créixer amb la pantalla: una casella de text
     de 1500 px d'ample no es llegeix millor, es llegeix pitjor. */
  .caixa-estreta { max-width: 520px; }
}

/* Monitors grans: encara una mica més d'aire i de mida. */
@media (min-width: 1500px) {
  .page-title { font-size: 38px; }
  .columnes { gap: 40px; }
  .scoreboard { padding: 12px 0; }
  .sb-points { font-size: 56px; }
}

/* Pantalles molt estretes: la classificació amaga el que no és
   imprescindible. La columna de punts no es pot perdre mai de vista. */
@media (max-width: 419px) {
  .amaga-estret { display: none; }
}

/* ---------- Barra d'avisos (instal·lació i versions noves) ---------- */

.barra {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 12px);
  z-index: 60;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px 12px 16px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  animation: puja .25s ease;
}
.barra[hidden] { display: none; }

/* Mentre la barra hi és, la pàgina acaba més amunt. Si no, l'última fila
   queda a sota i sembla que no hi sigui. */
.amb-barra .view { padding-bottom: 96px; }
.amb-barra .view.no-tabbar { padding-bottom: calc(var(--safe-bottom) + 96px); }
.barra-text { flex: 1; font-size: 13px; font-weight: 600; line-height: 1.35; }
.btn-petit { padding: 8px 14px; font-size: 12.5px; height: auto; }

/* El codi de sis xifres de l'àrbitre suplent. */
/* Com els altres camps de l'app: fora d'un .field no els hereta i el
   navegador el pintava fosc, que desentonava amb la targeta. */
.camp-codi {
  width: 100%;
  margin: 10px 0 4px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-align: center;
  font-size: 28px; font-weight: 900;
  letter-spacing: .28em; text-indent: .28em;
  font-variant-numeric: tabular-nums;
}
.camp-codi:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.codi-gran {
  margin: 10px 0;
  text-align: center;
  font-size: 38px; font-weight: 900;
  letter-spacing: .18em; text-indent: .18em;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}
html[data-theme="dark"] .codi-gran { color: var(--secondary); }

/*
   Caselles de marcar.
   ------------------
   El navegador les pinta a la seva manera i al mòbil una casella sense
   marcar es dibuixava com un quadrat negre ple: semblaven totes triades.
   Aquí la del navegador es queda fora de la vista i la dibuixem nosaltres.

   Els selectors porten «label.casella» i «.field label.casella» perquè,
   dins d'un .field, la regla «.field label» és més forta que una classe
   sola: els posava display:block i, de retruc, majúscules i el gris de
   les etiquetes.
*/
label.casella,
.field label.casella {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0;
  color: var(--text);
  font-size: 14px; font-weight: 700;
  text-transform: none; letter-spacing: normal;
  cursor: pointer;
}
.casella input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.casella::before {
  content: '';
  display: block;
  width: 18px; height: 18px;
  flex: none;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
}
.casella:has(input:checked)::before {
  border-color: var(--primary);
  background: var(--primary);
  /* El buit del mig fa de marca de verificació. */
  box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 6px var(--primary);
}
.casella:focus-within::before { outline: 2px solid var(--primary); outline-offset: 2px; }

/*
   Les posicions: les mateixes caselles, però en forma de píndola, que
   se'n poden fer més d'una i van totes en una filera.
*/
.tria-posicions { display: flex; flex-wrap: wrap; gap: 8px; }

.tria-posicions label.casella,
.field .tria-posicions label.casella {
  gap: 8px;
  padding: 9px 14px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13.5px;
}
.tria-posicions .casella::before { width: 16px; height: 16px; }
.tria-posicions .casella:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}
html[data-theme="dark"] .tria-posicions .casella:has(input:checked) {
  color: var(--secondary);
}

/* Una acció que s'ha de veure com a opció: icona, dues línies i fletxa. */
.opcio-accio {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-lg);
  background: var(--primary-soft);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.opcio-accio:active { transform: scale(.99); }
.opcio-accio-icona {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border-radius: 999px;
  background: var(--primary); color: #fff;
}
.opcio-accio-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.opcio-accio-text strong { font-size: 15px; font-weight: 800; }
.opcio-accio-text span { font-size: 13px; color: var(--muted); }
.opcio-accio-fletxa { color: var(--primary); flex: none; }
html[data-theme="dark"] .opcio-accio { border-color: var(--secondary); }
html[data-theme="dark"] .opcio-accio-fletxa { color: var(--secondary); }

/* Els grups del calendari, com a botons. */
.botons-grup { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.boto-grup {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 2px 8px;
  padding: 14px 14px;
  border: 1.5px solid var(--border);
  border-left-width: 5px;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.boto-grup:active { transform: scale(.98); }
.boto-grup-nom { font-size: 16px; font-weight: 800; }
.boto-grup-dada { grid-column: 1; font-size: 12.5px; color: var(--muted); }
.boto-grup .icon { grid-column: 2; grid-row: 1 / 3; color: var(--primary); }
html[data-theme="dark"] .boto-grup .icon { color: var(--secondary); }
.metall-vora-1 { border-left-color: #d4af37; }
.metall-vora-2 { border-left-color: #a8b3bd; }
.metall-vora-3 { border-left-color: #b87333; }
.metall-vora-4 { border-left-color: #8c5a3c; }
.metall-vora-5 { border-left-color: #6b7280; }

/* Les notícies: la llista es pot tocar, i la notícia sencera es llegeix bé. */
.noticia-targeta { display: block; width: 100%; text-align: left; }
.noticia-llegir {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 800; color: var(--primary);
}
html[data-theme="dark"] .noticia-llegir { color: var(--secondary); }
.noticia-sencera { max-width: 680px; }
.noticia-entradeta {
  margin: 16px 0 0;
  font-size: 18px; line-height: 1.5; font-weight: 600;
}
.noticia-cos { margin-top: 16px; font-size: 16px; line-height: 1.65; }
.noticia-cos p + p { margin-top: 14px; }
/* Les adreces del text, amb el verd de la lliga i partides si són llargues. */
.noticia-cos a {
  color: var(--primary); font-weight: 700;
  text-decoration: underline; overflow-wrap: anywhere;
}

/* Qui ha fet la web, al final del perfil i sense cridar l'atenció. */
.credits {
  margin: 22px 0 8px;
  text-align: center;
  font-size: 12px; line-height: 1.6;
  color: var(--muted);
}
.credits a { color: var(--muted); text-decoration: underline; }
.sheet-llista { margin: 4px 0 10px; padding-left: 20px; }
.sheet-llista li { margin-bottom: 4px; line-height: 1.35; }

@keyframes puja { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (min-width: 900px) {
  .barra { left: auto; right: 24px; bottom: 24px; max-width: 420px; }
}

/* ---------- Interruptors de preferències d'avisos ---------- */

.interruptor { align-items: flex-start; gap: 12px; }
.interruptor-text { flex: 1; display: flex; flex-direction: column; gap: 3px; text-align: left; }
.interruptor-text strong { font-size: 14px; font-weight: 700; }
.interruptor-text small { color: var(--muted); font-size: 11.5px; line-height: 1.4; }

.palanca {
  flex: none; position: relative;
  width: 44px; height: 26px; margin-top: 2px;
  border-radius: 999px;
  background: var(--border);
  transition: background .18s ease;
}
.palanca::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
  transition: transform .18s ease;
}
.palanca.activa { background: var(--primary); }
.palanca.activa::after { transform: translateX(18px); }


/* ---------- Targetes fosques sobre fons fosc ---------- */
/*  El degradat de marca (verd molt fosc → negre) llueix sobre blanc,
    però en mode fosc es confonia amb el fons de la pàgina. Aquí es puja
    el to perquè la targeta es vegi com una peça a part.                */

html[data-theme="dark"] .live-card,
html[data-theme="dark"] .ref-header,
html[data-theme="dark"] .splash {
  background: linear-gradient(140deg, #2f5500 0%, #16240a 100%);
}
html[data-theme="dark"] .live-card,
html[data-theme="dark"] .ref-header {
  border: 1px solid rgba(140, 182, 39, .22);
}


/* =========================================================
   CADA CATEGORIA, EL SEU METALL
   =========================================================
   Or, plata, bronze, coure i ferro. Es fa servir el NIVELL i no
   el nom: si algun dia una lliga en diu «Divisió 1», els colors
   segueixen sortint igual.
   ========================================================= */

.segment.metall-1.active { background: linear-gradient(135deg, #f6e27a, #c9a227 45%, #8a6d14 70%, #f0d787); color: #3a2f05; border-color: #c9a227; }
.segment.metall-2.active { background: linear-gradient(135deg, #eef1f4, #b4bcc4 45%, #7d868f 70%, #dfe4e8); color: #23282d; border-color: #b4bcc4; }
.segment.metall-3.active { background: linear-gradient(135deg, #e3a978, #b87333 45%, #7d4a1c 70%, #d9a06a); color: #2e1a08; border-color: #b87333; }
.segment.metall-4.active { background: linear-gradient(135deg, #d9a07a, #a8562d 45%, #6f3517 70%, #cf9670); color: #2b1207; border-color: #a8562d; }
.segment.metall-5.active { background: linear-gradient(135deg, #cfd3d6, #8b9297 45%, #5a6165 70%, #c2c7ca); color: #1d2124; border-color: #8b9297; }

/* El metall de la categoria, a la capçalera de la taula.
   Ha de cantar prou per saber en quina categoria ets sense llegir res:
   una franja fina de 4 px no es veia. */
.card[class*="metall-fons-"] { position: relative; overflow: hidden; }
.card[class*="metall-fons-"]::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
}
.card.metall-fons-1::before { background: linear-gradient(90deg, #8a6d14, #f6e27a 40%, #c9a227 70%, #f0d787); }
.card.metall-fons-2::before { background: linear-gradient(90deg, #7d868f, #eef1f4 40%, #b4bcc4 70%, #dfe4e8); }
.card.metall-fons-3::before { background: linear-gradient(90deg, #7d4a1c, #e3a978 40%, #b87333 70%, #d9a06a); }
.card.metall-fons-4::before { background: linear-gradient(90deg, #6f3517, #d9a07a 40%, #a8562d 70%, #cf9670); }
.card.metall-fons-5::before { background: linear-gradient(90deg, #5a6165, #cfd3d6 40%, #8b9297 70%, #c2c7ca); }

/* La copa de la capçalera, del metall de la categoria. Amb el groc de la
   marca a totes, la plata i el bronze semblaven la mateixa taula. */
.card.metall-fons-1 .card-head .icon { color: #d9b640; }
.card.metall-fons-2 .card-head .icon { color: #c3ccd4; }
.card.metall-fons-3 .card-head .icon { color: #cf8b4e; }
.card.metall-fons-4 .card-head .icon { color: #c07a4e; }
.card.metall-fons-5 .card-head .icon { color: #a6adb2; }

/* L'or, a més, respira: un lleu vaivé del reflex. */
.segment.metall-1.active { background-size: 200% 100%; animation: or-reflex 6s ease-in-out infinite; }
@keyframes or-reflex {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .segment.metall-1.active { animation: none; }
}

/* ---------- Conmutador de vista de la taula ---------- */

.btn-vista {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px; font-weight: 700;
  white-space: nowrap;
}
.btn-vista:active { background: var(--primary-soft); color: var(--primary); }

/* ---------- Qui puja i qui baixa ----------
   Sense columna de posició, això és l'única pista, i ha de veure's d'una
   ullada des de la grada: la fila sencera es tenyeix, no només una vora
   de 3 px. El color va molt rebaixat perquè el text hi segueixi llegint
   igual de bé (i en mode fosc encara més, que els fons ja són foscos). */

table.standings tr.mov-ascens  > td { background: rgba(10, 143, 77, .11); }
table.standings tr.mov-descens > td { background: rgba(211, 32, 32, .10); }

table.standings tr.mov-ascens  td:first-child { box-shadow: inset 4px 0 0 var(--green); }
table.standings tr.mov-descens td:first-child { box-shadow: inset 4px 0 0 var(--red); }

/* La columna de punts va enganxada i necessita fons opac (si no, el que
   llisca per sota es transparentaria). S'hi pinta el mateix tint SOBRE el
   color de la superfície, en comptes d'un color fix: així el resultat és
   exactament el mateix que a la resta de la fila i no es veu cap costura.
   Amb un color escollit a ull no quadrava, i es notava el tall. */
table.standings tr.mov-ascens td.pts {
  background:
    linear-gradient(rgba(10, 143, 77, .11), rgba(10, 143, 77, .11)),
    var(--surface);
}
table.standings tr.mov-descens td.pts {
  background:
    linear-gradient(rgba(211, 32, 32, .10), rgba(211, 32, 32, .10)),
    var(--surface);
}

tr.mov-ascens  .mov-icon { color: var(--green); }
tr.mov-descens .mov-icon { color: var(--red); }

html[data-theme="dark"] table.standings tr.mov-ascens  > td { background: rgba(10, 143, 77, .18); }
html[data-theme="dark"] table.standings tr.mov-descens > td { background: rgba(211, 32, 32, .16); }
html[data-theme="dark"] table.standings tr.mov-ascens td.pts {
  background:
    linear-gradient(rgba(10, 143, 77, .18), rgba(10, 143, 77, .18)),
    var(--surface);
}
html[data-theme="dark"] table.standings tr.mov-descens td.pts {
  background:
    linear-gradient(rgba(211, 32, 32, .16), rgba(211, 32, 32, .16)),
    var(--surface);
}

table.standings td:first-child { text-align: left; }
table.standings th:first-child { text-align: left; }

/* Un peu que explica els colors. Sense això, el verd i el vermell són
   endevinalles per a qui entra per primer cop. */
.llegenda-taula {
  display: flex; flex-wrap: wrap; gap: 14px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted);
}
.llegenda-taula span { display: inline-flex; align-items: center; gap: 6px; }
.llegenda-punt { width: 10px; height: 10px; border-radius: 3px; }
.llegenda-punt.puja  { background: var(--green); }
.llegenda-punt.baixa { background: var(--red); }


/* ---------- La columna de punts, sempre visible ---------- */
/*  A la vista completa les columnes no caben en un mòbil vertical i la
    taula es desplaça. Els punts són justament el que la gent ve a mirar,
    així que es queden enganxats a la dreta mentre la resta llisca.     */

table.standings th.pts,
table.standings td.pts {
  position: sticky;
  right: 0;
  z-index: 1;
}
table.standings td.pts {
  background: var(--surface);
  box-shadow: inset 6px 0 6px -6px rgba(13, 15, 12, .18);
}
table.standings tbody tr:hover td.pts { background: var(--surface-2); }

/* El balanç de sets no s'ha de partir en dues línies. */
table.standings td:nth-last-child(2) { white-space: nowrap; }

/* Logotip gran, per a les pantalles d'accés i d'alta. */
.marca-gran {
  width: 128px; height: 70px;
  margin: 0 auto 4px;
  background: var(--logo) center / contain no-repeat;
}
html[data-theme="dark"] .marca-gran { background-image: var(--logo-clar); }

/* ---------- Pantalla d'administració ---------- */

.titol-bloc {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin: 22px 0 10px;
}
.card-pad > .titol-bloc:first-child { margin-top: 0; }

.ajuda {
  display: block;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.fila-color { display: flex; align-items: center; gap: 12px; }
.fila-color input[type="color"] {
  width: 54px; height: 38px; padding: 2px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
}
.fila-color .ajuda { flex: 1; }

.camp-punts {
  width: 74px;
  text-align: center;
  font-weight: 800;
}
table.standings td.dreta, table.standings th.dreta { text-align: right; }

.fila-cerca { display: flex; gap: 8px; }
.fila-cerca input { flex: 1; }

/* Les sancions es distingeixen d'un cop d'ull dels punts regalats. */
.pill-sancio { background: rgba(211, 32, 32, .12); color: var(--red); }

.fila-ajust {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.fila-ajust:last-child { border-bottom: 0; }

.llista-usuaris { margin-top: 6px; }
.fila-usuari {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.fila-usuari:last-child { border-bottom: 0; }
.fila-usuari-cap { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.fila-usuari-cap > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.etiquetes-rol { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.etiqueta-rol {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}
.etiqueta-rol button {
  border: 0; background: none; cursor: pointer;
  color: inherit; font-size: 15px; line-height: 1;
  padding: 0 2px;
}

/* Al mòbil no hi caben en una fila: es parteixen abans d'encongir-se
   tant que no es pugui llegir de quin equip es tracta. */
.fila-permis { display: flex; flex-wrap: wrap; gap: 8px; }
.fila-permis select { flex: 1 1 140px; min-width: 0; }
.fila-permis .btn { flex: 0 0 auto; }

/* Una etiqueta darrere d'un text d'ajuda necessita aire: si no, sembla
   que formi part del paràgraf. */
.ajuda + .field > label { margin-top: 14px; }
.card-pad > p.ajuda + .field { margin-top: 14px; }

/* El nom de la categoria, del seu metall. A la llista d'equips les cinc
   seccions eren idèntiques i calia llegir-les per saber on eres. */
.section-title.metall-text-1 .icon { color: #d9b640; }
.section-title.metall-text-2 .icon { color: #c3ccd4; }
.section-title.metall-text-3 .icon { color: #cf8b4e; }
.section-title.metall-text-4 .icon { color: #c07a4e; }
.section-title.metall-text-5 .icon { color: #a6adb2; }

/* ---------- Res de seleccionar la interfície ----------
   Al mòbil, un toc que s'allarga una mica sobre un títol o una pestanya
   engega la selecció de text i surt el menú de cerca del navegador.
   Els controls i els rètols no són text per copiar; el contingut (noms
   d'equip, notícies, motius) sí, i aquest es queda com estava. */

.topbar, .tabbar, .segments, .page-title, .page-sub, .section-title,
.titol-bloc, .btn, .segment, .tab, .icon-btn, .btn-vista, .pill,
.card-head, table.standings thead, .llegenda-taula {
  -webkit-user-select: none;
          user-select: none;
}

/* El toc no ha de deixar un rectangle de color al voltant del que es
   prem: ja tenim els nostres propis estats de premut. */
.btn, .segment, .tab, .icon-btn, .btn-vista, .team-card, .live-card,
table.standings tbody tr {
  -webkit-tap-highlight-color: transparent;
}

/* ---------- La pista, com es veu de veritat ----------
   Dos panells amb la xarxa al mig de la pantalla. L'àrbitre no ha de
   traduir res: el que té davant és el que veu al mòbil. */

.pistes {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.xarxa {
  position: absolute;
  top: 6px; bottom: 6px; left: 50%;
  width: 2px; margin-left: -1px;
  background: repeating-linear-gradient(
    to bottom, var(--border) 0 6px, transparent 6px 10px);
}

.pista-panell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.pista-cap {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.pista-nom { font-size: 13px; font-weight: 800; }

.pista {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 3px;
  padding: 6px;
  background: var(--surface-2);
}
.pista-casella {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 52px;
  border-radius: 8px;
  background: var(--surface);
}
/* Qui saca, ben marcada: és l'única cosa que l'àrbitre ha de tenir
   clara sense mirar dues vegades. */
.pista-casella.saca {
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 2px var(--primary);
}
.pista-pos {
  position: absolute; top: 3px; left: 5px;
  font-size: 9px; font-weight: 800; color: var(--muted);
}
.pista-dorsal { font-size: 19px; font-weight: 900; line-height: 1; }
.pista-marques { font-size: 9px; color: var(--muted); margin-top: 2px; }
.pista-pilota { position: absolute; top: 2px; right: 4px; font-size: 11px; }
.pista-buida { padding: 20px; text-align: center; font-size: 12px; color: var(--muted); }

/* L'avís de la regla de categories. Informa; no impedeix res. */
.compliment {
  padding: 4px 8px;
  font-size: 10px; font-weight: 700; text-align: center;
}
.compliment.ok { background: rgba(10, 143, 77, .12); color: var(--green); }
.compliment.malament { background: rgba(211, 32, 32, .12); color: var(--red); }

/* ---------- Triar la formació ---------- */

.graella-dorsals {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}
/* Es diu «tria-dorsal» i no «dorsal» perquè aquest últim ja existeix per
   als dorsals de la plantilla, i porta una alçada fixa de 26 px que
   retallava el nom de la jugadora sense deixar-ne cap rastre. */
.tria-dorsal {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.tria-dorsal.triat {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.tria-dorsal-num { font-size: 18px; font-weight: 900; }
.tria-dorsal-nom {
  font-size: 10px; color: var(--muted);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* L'ordre de rotació, ben visible: és el que s'està triant. */
.tria-dorsal-ordre {
  position: absolute; top: 3px; left: 4px;
  font-size: 9px; font-weight: 800; color: var(--primary);
}
.tria-dorsal-cap {
  position: absolute; top: 3px; right: 4px;
  font-size: 9px; font-weight: 800; color: var(--secondary-dark);
}

.tria-servei { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Els botons d'acció. Amb grid-auto-flow: column es repartien l'ample a
   parts iguals i, en ser tres, «Finalitzar» quedava tallat fora de la
   pantalla. Amb columnes automàtiques cadascun ocupa el que necessita i
   salta de línia si no hi cap. */
.ref-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
}
.ref-actions .btn { padding-left: 8px; padding-right: 8px; }

/* Amb el botó de targeta ja són quatre: de dos en dos es llegeixen, i
   el botó rodó de pantalla completa no se'n menja cap pel mig. */
@media (max-width: 430px) {
  .ref-actions { grid-template-columns: 1fr 1fr; }
}

/* ---------- Àrbitre en horitzontal ----------
   Girant el mòbil hi cap tot alhora: les dues pistes grans i el botó de
   sumar just a sota de cadascuna. Prement sota la pista on és l'equip,
   és molt més difícil equivocar-se de banda que amb dues columnes
   iguals a sota de tot. */

.pista-punts {
  margin-left: auto;
  font-size: 20px; font-weight: 900;
  font-variant-numeric: tabular-nums;
}
/* Sumar i restar, sota la pista de cada equip. El de restar és petit a
   propòsit: es fa servir per corregir un error, i no ha de competir amb
   el de sumar quan es prem amb pressa. */
.punts-pista { display: none; }
.btn-punt-pista {
  flex: 1;
  align-items: center; justify-content: center; gap: 8px;
  padding: 14px 8px;
  border: 0; border-radius: 0;
  background: var(--primary);
  color: #fff;
  font-size: 15px; font-weight: 800;
  cursor: pointer;
}
.btn-punt-pista:active { background: var(--primary-dark); }

.btn-menys-pista {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 52px;
  border: 0; border-left: 1px solid rgba(255, 255, 255, .25);
  background: var(--primary);
  color: #fff;
  cursor: pointer;
}
.btn-menys-pista:active { background: var(--primary-dark); }

/* Avisar del canvi de camp: si el marcador s'inverteix sense dir res,
   l'àrbitre pensa que s'ha equivocat de botó. */
.sb-canviat {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px;
  font-size: 10px; font-weight: 800;
  opacity: .75;
}

@media (orientation: landscape) and (max-height: 560px) {
  /* Cada píxel d'alçada compta: el que ha de caure dins de la pantalla
     sense desplaçar és la pista i el botó de sumar. Tota la resta
     s'encongeix o desapareix — el pavelló i el marcador gran ja s'han
     mirat abans de començar, durant el partit no fan falta. */
  .topbar { padding: 4px 0; }
  .topbar-inner { min-height: 40px; }
  .topbar-title { font-size: 15px; }

  .view { padding-top: 8px; }
  .ref-header { padding: 10px 12px; margin-bottom: 0; }
  .ref-meta { display: none; }
  .scoreboard { display: none; }
  .tira-sets { margin-top: 6px; }
  .set-chip { font-size: 10px; padding: 3px 7px; }

  .pistes { margin-top: 8px; gap: 10px; }
  .pista-casella { min-height: 44px; }
  .pista-dorsal { font-size: 17px; }

  /* El botó de cada pista passa a ser el principal, i les columnes de
     sota desapareixen: dos jocs de botons per al mateix confonen. */
  .punts-pista { display: flex; }
  .point-controls { display: none; }

  .ref-actions { margin-top: 10px; }
}

/* ---------- Tancar el partit ---------- */

.fila-conformitat {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.fila-conformitat:last-of-type { border-bottom: 0; }
.conforme {
  display: flex; align-items: center; gap: 8px;
  color: var(--green);
  font-size: 13px;
  text-align: right;
}
.conforme .ajuda { color: var(--muted); }

.comentari { padding: 10px 0; border-bottom: 1px solid var(--border); }
.comentari:last-of-type { border-bottom: 0; }
.comentari-cap { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.comentari p { margin-top: 4px; font-size: 13px; line-height: 1.5; }

textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  resize: vertical;
}

/* ---------- Plantilla ---------- */

.fila-fitxa {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.fila-fitxa:last-child { border-bottom: 0; }
.fitxa-qui { flex: 1; min-width: 0; }
.fitxa-qui strong { font-size: 14px; }

/* El dorsal és un botó: tocar-lo el canvia, que és el que més es fa
   quan es prepara una plantilla. */
.fitxa-dorsal {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 16px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.fitxa-dorsal.sense-accio { cursor: default; opacity: .75; }
/* Amb tres botons per fila (xiulet, corona i baixa), els de mida normal
   deixaven el nom en tres línies. Aquí es fan més justos: hi caben els
   tres i el nom es llegeix d'una tirada. */
.fitxa-accions { display: flex; gap: 0; flex: none; }
.fitxa-accions .icon-btn { width: 34px; height: 34px; }
.fitxa-accions .icon-btn .icon { width: 19px; height: 19px; }
.fila-fitxa { gap: 8px; padding-left: 12px; padding-right: 8px; }

/* ---------- La convocatòria ----------
   Files altes i tocables: es marquen amb el dit i sovint drets al
   pavelló, no assegut davant d'una pantalla. Tota la fila fa de
   casella perquè encertar un quadradet de 16 px és impossible. */
.fila-convocada {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.fila-convocada:last-child { border-bottom: 0; }
.fila-convocada input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  accent-color: var(--primary);
}
.fila-convocada:has(input:checked) { background: var(--surface-2); }

.conv-dorsal {
  flex: 0 0 auto;
  min-width: 34px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
  font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.conv-qui { flex: 1; min-width: 0; }
.conv-qui strong { font-size: 14px; }

/* ---------- La fitxa de cadascú ---------- */

.retrat {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
  border: 2px solid var(--border);
  font-weight: 800;
  color: var(--muted);
}
.retrat-gran { width: 112px; height: 112px; font-size: 34px; }
.retrat-petit { width: 42px; height: 42px; font-size: 14px; }

.fitxa-foto-accions {
  display: flex; gap: 8px; justify-content: center; margin-top: 12px;
}

/* La fila de la plantilla ara és un botó cap a la fitxa: ha de seguir
   semblant text, no un botó. */
.fitxa-qui {
  flex: 1; min-width: 0;
  background: none; border: 0; padding: 0;
  color: inherit; font: inherit; text-align: left;
  cursor: pointer;
}
.fitxa-qui strong { font-size: 14px; }

.fitxa-equip { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fitxa-equip strong { font-size: 14px; }

/* Botons en fila que han de poder passar a la línia de sota: tres a
   360 px no hi caben, i encaixar-los deixava un títol partit en dues
   línies i l'últim tallat per la vora. */
.fila-botons { display: flex; flex-wrap: wrap; gap: 8px; }
.fila-botons .btn { flex: 0 1 auto; }


/* ---------- Jornades ---------- */

/*
   Set jornades amb dues dates cadascuna. Amb una etiqueta a sobre de
   cada camp sortien set «DES DE» i set «FINS A» i la llista ocupava tres
   pantalles: les etiquetes van una sola vegada, a la capçalera.
*/
.jornada-caps,
.jornada-fila {
  display: grid;
  grid-template-columns: 32px 1fr 1fr 44px;
  align-items: center;
  gap: 8px;
}
.jornada-caps {
  font-size: 11px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
  padding-bottom: 4px;
}
.jornada-caps span:last-child,
.jornada-partits { text-align: right; }

.jornada-fila {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.jornada-fila:last-of-type { border-bottom: 0; }
.jornada-fila input {
  width: 100%;
  padding: 10px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
}
.jornada-num { font-size: 13px; font-weight: 800; color: var(--muted); }
.jornada-partits {
  font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Proposta de data ---------- */

.proposta {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--surface-2);
}
/* La que has de contestar tu, marcada: és l'única que demana una acció. */
.proposta-teva { border-color: var(--primary); }
.proposta-cap { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.proposta-quan { margin: 6px 0 0; font-size: 15px; font-weight: 700; line-height: 1.35; }
.proposta-botons { display: flex; gap: 8px; margin-top: 12px; }
.proposta-botons .btn { flex: 1; }

/* Els enllaços de dins d'una fila: el blau del navegador no hi pinta
   res al costat de la resta. */
.log-item a { color: var(--secondary); text-decoration: none; }
.log-item a:hover { text-decoration: underline; }

/* ---------- Recompte de disponibilitat ---------- */

.recompte {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700;
}
.marca-si { color: var(--green); }
.marca-potser { color: var(--secondary); }
.marca-no { color: var(--red); }

/* La fila d'equip de la fitxa: l'enllaç i el dorsal són germans. Un botó
   dins d'un altre no és HTML vàlid, i el clic al dorsal se n'anava a
   l'equip en comptes d'obrir el diàleg. */
.fila-equip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.fila-equip:last-child { border-bottom: 0; }
.fila-equip-nom {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 12px;
  background: none; border: 0; padding: 0;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.conv-dorsal-boto { cursor: pointer; color: var(--text); }

/* El compte enrere entre punt i punt, a sobre del botó bloquejat.

   Ha de tapar el text del botó: mig transparent es llegien les dues
   coses alhora i no s'entenia cap. I ha de valer per als DOS botons: en
   horitzontal els de sota s'amaguen i mana el de la pista, i allà el
   botó es quedava verd sense respondre, que és pitjor que dir per què. */
.btn-point,
.btn-punt-pista { position: relative; }

.btn-point[data-espera]:not([data-espera=""])::after,
.btn-punt-pista[data-espera]:not([data-espera=""])::after {
  content: attr(data-espera) "s";
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  border-radius: inherit;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.btn-point[data-espera]:not([data-espera=""])::after { font-size: 30px; }
.btn-punt-pista[data-espera]:not([data-espera=""])::after { font-size: 22px; }

/* ---------- El que t'espera ---------- */

.et-toca { align-items: center; gap: 12px; text-align: left; }
.et-toca-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.et-toca-text strong { font-size: 14px; }

/* El punt d'avís de la pestanya: petit i a la cantonada de la icona, per
   veure'l sense haver d'obrir res. */
.tab-avis {
  position: absolute;
  top: 6px; left: calc(50% + 6px);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--secondary);
}
.tab { position: relative; }
.nav-enllac .tab-avis { position: static; display: inline-block; margin-left: 6px; }

/* Les marques de la regla de pista, també en triar la formació: sense
   elles calia triar sis a cegues i desfer-ho en veure l'avís. */
.tria-dorsal-marques {
  display: block;
  margin-top: 2px;
  font-size: 10px; font-weight: 700;
  color: var(--secondary);
  line-height: 1;
}
.tria-dorsal.triat .tria-dorsal-marques { color: inherit; opacity: .85; }

/* ---------- Mode pista ----------
   Arbitrant, el que compta és el camp, els punts i el marcador. Tota la
   resta —barres, historial, botons d'acció— només surt al mig, i amb el
   mòbil a la mà i mig ull al partit, sortir al mig costa punts. */

.boto-flotant {
  position: fixed;
  right: 14px;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 14px);
  z-index: 70;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
}
.boto-flotant .icon { width: 22px; height: 22px; }

body.mode-pista .topbar,
body.mode-pista .tabbar,
body.mode-pista .barra { display: none; }

/* De la pantalla només es queden el marcador, el camp i els punts. */
body.mode-pista #view > *:not(.ref-header):not(.pistes):not(.point-controls):not(.boto-flotant):not(.avis-cua) {
  display: none;
}
body.mode-pista .ref-header > .spread,
body.mode-pista .ref-meta { display: none; }

body.mode-pista .view { padding-top: 8px; padding-bottom: 12px; }

/*
   Dret, el botó de sortir deixa de flotar: a la cantonada de baix
   tapava el de restar punt. Va a la franja lliure entre la pista i els
   botons, que amb la pista centrada sempre hi és.
*/
body.mode-pista .boto-flotant {
  position: static;
  order: 1;
  align-self: center;
  margin: 8px 0 0;
  bottom: auto;
}

/*
   Tot ha de caure dins de la pantalla: si per sumar un punt cal
   desplaçar, el mode no serveix de res. Del marcador s'hi queda el que
   es mira de reüll —les sigles i el número—, no els escuts ni el nom
   sencer, que ja se saben.
*/
body.mode-pista .ref-header { padding: 10px 12px; margin-bottom: 8px; }
body.mode-pista .scoreboard { margin: 0; }
body.mode-pista .sb-team .crest,
body.mode-pista .sb-name { display: none; }
body.mode-pista .sb-team::before {
  content: attr(data-sigles);
  font-size: 13px; font-weight: 800; color: var(--muted);
}
body.mode-pista .sb-points { font-size: 46px; line-height: 1; }
body.mode-pista .tira-sets { margin-top: 6px; }

body.mode-pista .pista-cap { padding: 5px 8px; }

/*
   El que sobra de pantalla se l'emporta la pista, no els botons. Qui
   arbitra mira les posicions tota l'estona —la rotació, qui saca— i
   només baixa la vista al botó per prémer-lo: amb 60 px d'alt ja no
   s'erra, i la resta val més per veure la pista.
*/
body.mode-pista .view { display: flex; flex-direction: column; }
/* Els panells se centren en l'espai que sobra en lloc d'estirar-se: una
   casella de 90 px d'alt i 88 d'ample encara sembla una zona de pista;
   estirada fins a omplir la pantalla, no. */
body.mode-pista .pistes { margin-top: 0; flex: 1; min-height: 0; align-items: center; }
body.mode-pista .pista-casella { min-height: 90px; }
body.mode-pista .pista-dorsal { font-size: 26px; }
body.mode-pista .pista-pos,
body.mode-pista .pista-marques { font-size: 11px; }

body.mode-pista .point-controls { margin-top: 8px; flex: none; order: 2; }
body.mode-pista .point-col { padding: 8px; gap: 6px; }
body.mode-pista .point-col-name { display: none; }
body.mode-pista .btn-point { height: 60px; font-size: 15px; }
body.mode-pista .btn-point .icon { width: 22px; height: 22px; }
/* Restar hi ha de ser: si es compta un punt de més, el mode no pot
   obligar a sortir-ne per esmenar-ho. Petit, que no competeixi amb el
   de sumar quan es prem amb pressa. */
body.mode-pista .btn-minus { display: flex; height: 34px; font-size: 12px; }

@media (orientation: landscape) and (max-height: 560px) {
  /* Girat, el marcador de dalt sobra: cada pista ja porta les sigles i
     els punts al seu capçal, i sense ell la pista i el seu botó cauen
     dins de la pantalla sense haver d'encongir les caselles. */
  body.mode-pista .ref-header { display: none; }
  body.mode-pista .view { padding-top: 6px; }

  /* Girat sí que s'estiren: hi ha just l'alçada justa, i el que sobra
     val més a les caselles que a un marge a sota. */
  body.mode-pista .pistes { align-items: stretch; }
  body.mode-pista .pista-panell { display: flex; flex-direction: column; }
  body.mode-pista .pista { flex: 1; }
  body.mode-pista .pista-casella { min-height: 40px; }
  body.mode-pista .pista-dorsal { font-size: 18px; }

  /* El botó de sortir, al carrer de la xarxa: a la cantonada tapava el
     botó de restar de la pista de la dreta, que és justament el que es
     busca quan s'ha comptat un punt de més. La xarxa no porta res. */
  body.mode-pista .pistes { gap: 46px; }
  body.mode-pista .boto-flotant {
    position: fixed;
    margin: 0;
    left: 50%; right: auto;
    top: 50%; bottom: auto;
    width: 40px; height: 40px;
    transform: translate(-50%, -50%);
  }
}

/* ---------- Arbitrar sense connexió ----------
   Groc i ben a la vista, també en mode pista: l'àrbitre pot seguir, però
   ha de saber que el que fa encara no és a la web. */
.avis-cua {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--groc) 30%, var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--groc) 80%, var(--negre));
  color: var(--text);
  font-size: 12.5px; line-height: 1.4;
}
.avis-cua > span { flex: 1; min-width: 0; }
.avis-cua .btn { padding: 7px 10px; font-size: 12px; flex: none; }
body.mode-pista .avis-cua { margin: 0 0 8px; padding: 6px 10px; font-size: 11.5px; }
body.mode-pista .avis-cua-detall { display: none; }

/* ---------- Amistosos ----------
   L'accés és a baix de la portada i petit: una eina per a qui porta
   equips o arbitra, no una secció de la lliga. */
.enllac-discret-lloc { display: flex; justify-content: center; margin-top: 28px; }
.enllac-discret {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: 1px dashed var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 13px; font-weight: 700;
}
.enllac-discret .icon { width: 14px; height: 14px; }

/* ---------- Fitxar des de les sol·licituds ---------- */
.fila-solicitud {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
}
.card > .fila-solicitud:first-child { border-top: 0; }
.fila-solicitud .fitxa-equip { flex: 1; min-width: 0; }
.fila-solicitud .fitxa-accions { display: flex; gap: 6px; flex: none; }
.icon-btn.boto-si { background: var(--primary); color: #fff; }
.icon-btn.boto-no { background: rgba(220, 38, 38, .12); color: var(--red); }

/* La corona de la capitania: apagada si no ho és, daurada si ho és. */
.boto-corona { color: var(--muted); }
.boto-corona.actiu { color: #c99a06; background: color-mix(in srgb, #f5c518 22%, transparent); }
/* Les fotos d'un partit: quadrades i totes iguals, com qualsevol àlbum. */
.graella-fotos {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.foto-partit { position: relative; }
.foto-mira {
  display: block; width: 100%; aspect-ratio: 1;
  border: 1px solid var(--border); border-radius: 12px;
  background-size: cover; background-position: center;
  cursor: pointer;
}
/* La creu, sobre la foto: amb fons sòlid, que si no es perd damunt
   d'una foto clara. */
.foto-partit .foto-treure {
  position: absolute; top: 5px; right: 5px;
  width: 30px; height: 30px;
  background: var(--surface); color: var(--red);
  border-radius: 999px; box-shadow: var(--shadow);
}

/* La foto gran, amb les fletxes a sota. */
.mirador {
  width: min(94vw, 560px);
  background: var(--surface); border-radius: 18px; padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.mirador img {
  width: 100%; max-height: 64vh; object-fit: contain;
  border-radius: 12px; background: #000;
}
.mirador-peu {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 13px; color: var(--muted);
}

/* Temps morts que li queden a cada equip, al capçal de la seva pista. */
.temps-morts {
  font-size: 11px; font-weight: 900; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(74, 124, 0, .16); color: var(--primary);
}
.temps-morts.cap { background: rgba(229, 52, 44, .16); color: var(--red); }
html[data-theme="dark"] .temps-morts { color: var(--secondary); }

/* L'escut del capçal, quan prémer-lo demana el temps mort. */
.escut-temps { background: none; border: 0; padding: 0; line-height: 0; }

/* Les dues targetes del botó, i la mostra de cada opció. */
.parell-targetes { display: inline-flex; gap: 3px; vertical-align: -2px; }
.parell-targetes i { width: 9px; height: 13px; border-radius: 2px; display: block; }
.parell-targetes i:first-child { background: #e8c21d; }
.parell-targetes i:last-child { background: #d32020; }

.targeta-opcio { display: flex; align-items: center; gap: 12px; text-align: left; }
.targeta-opcio .targeta-text { display: flex; flex-direction: column; gap: 2px; }
.targeta-opcio .targeta-text small { font-weight: 500; color: var(--muted); }
.mostra-targeta {
  flex: none; width: 20px; height: 28px; border-radius: 3px;
  background: #e8c21d; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.t-vermella .mostra-targeta { background: #d32020; }
.t-expulsio .mostra-targeta {
  background: linear-gradient(105deg, #e8c21d 0 50%, #d32020 50% 100%);
}
.t-desqualificacio .mostra-targeta {
  width: 28px;
  background: linear-gradient(90deg, #e8c21d 0 42%, transparent 42% 58%, #d32020 58% 100%);
}

/* La llista d'un full de tria, quan hi ha més de dues coses. */
.sheet-llista { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; }
.sheet-llista .btn { justify-content: flex-start; }
.dorsal-petit {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px;
  border-radius: 8px; background: var(--surface-2); font-weight: 900; font-size: 12px;
}

/* La targeta que ja té algú, a la pista i a les llistes. */
.marca-targeta {
  display: inline-block; width: 8px; height: 11px; border-radius: 2px;
  background: #e8c21d; margin-left: 4px; vertical-align: -1px;
}
.marca-targeta.vermella { background: #d32020; }
.marca-targeta.expulsio { background: linear-gradient(105deg, #e8c21d 0 50%, #d32020 50% 100%); }
.marca-targeta.desqualificacio { background: linear-gradient(90deg, #e8c21d 0 45%, #d32020 55% 100%); }

/* Qui està de baixa: es queda a la plantilla, però apagat. */
.fila-fitxa.fitxa-de-baixa { opacity: .62; }
.marca-baixa {
  font-weight: 800; color: var(--red);
  text-transform: uppercase; font-size: 10.5px; letter-spacing: .04em;
}
.marca-capita { display: inline-flex; align-items: center; gap: 3px; color: #b58900; font-weight: 700; }
html[data-theme="dark"] .marca-capita { color: #f5c518; }

/* ---------- Jugadores escrites a mà (amistosos) ---------- */
.jugadores-a-ma { display: flex; flex-direction: column; gap: 10px; }
.jugadora-a-ma {
  display: grid; grid-template-columns: 70px 1fr auto; gap: 8px; align-items: center;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.jugadora-a-ma.capcal {
  padding-bottom: 0; border: 0;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.jugadora-a-ma input[type="number"], .jugadora-a-ma input[type="text"] {
  width: 100%; min-width: 0;
  padding: 10px 12px;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font-size: 15px;
}
.jugadora-a-ma input[type="number"] { text-align: center; font-weight: 800; }
.jugadora-a-ma .jugadora-marques { grid-column: 1 / -1; }
.jugadora-a-ma .jugadora-marques label.casella { padding: 6px 12px; font-size: 13px; }

/* El xiulet de l'entrenador, com la corona del capità. */
.boto-xiulet { color: var(--muted); }
.boto-xiulet.actiu { color: var(--primary); background: var(--primary-soft); }
.marca-entrenador { display: inline-flex; align-items: center; gap: 3px; color: var(--primary); font-weight: 700; }
html[data-theme="dark"] .marca-entrenador { color: var(--secondary); }

/* Els amistosos de la llista porten la creu al costat de la targeta, no a
   sobre: posada a la cantonada tapava el distintiu d'«en directe». */
.amistos-fila { display: flex; align-items: center; gap: 8px; }
.amistos-fila > .match { flex: 1; min-width: 0; }
.amistos-fila .amistos-treure { flex: none; width: 36px; height: 36px; }
.amistos-fila .amistos-treure .icon { width: 19px; height: 19px; }