/* Porra Grana · estètica de sala.
   La paleta, la base i la closca —barra, aplicacions, pestanyes, sessió,
   diàlegs del compte i peu— no són aquí: viuen a `/shared/css/shell.css`,
   que és el mateix full que carrega la zona nàstic. Aquí només hi ha el que
   és de la porra. */

/* ── Vista base ── */
/* `#app` és flex-container en columna; a l'eix cros (width) el flex-item
   pren la seva propia min-content, i formularis d'admin amb
   `minmax(200px,1fr)` fan intrinsic min ~400px. Amb `width:100%` +
   `max-width:100%` + `box-sizing:border-box` la vista queda limitada al pare
   i el contingut ampli s'ha de resoldre dins seu (scroll horitzontal dels
   wrappers, ellipsis, etc.). El `max-width:900px` original queda com a
   sostre en desktop, per això el combinem via `min()`. */
.vista{
  width:100%;max-width:min(900px,100%);box-sizing:border-box;min-width:0;
  margin:0 auto;padding:clamp(30px,5vh,56px) clamp(18px,4vw,32px) 80px;
}
.vista h1{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:clamp(2rem,5vw,3.4rem);line-height:.95;
  text-transform:uppercase;margin-bottom:24px;
}
.vista h2{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;font-size:1.35rem;text-transform:uppercase;
  color:var(--or);margin:30px 0 14px;
}
.eyebrow{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--or);margin-bottom:10px}

/* ── Joc: la jornada ── */
/* La capçalera d'una jornada (escut, nom, vs, hora, estat) viu a
   `/shared/css/matchday-header.css`: la fan servir la porra i l'onze. */
/* Golejadors oficials + punts, sota la capçalera (sense targeta pròpia) */
.oficial-detall{
  margin-top:20px;padding-top:18px;
  border-top:1px solid rgba(245,242,236,.18);
}
.compte{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.15em;color:rgba(245,242,236,.75);margin-top:8px}

/* ── Formulari de pronòstic ── */
.pronostic-form{
  display:grid;gap:22px;
  background:var(--surf-1);border:1px solid rgba(245,242,236,.09);border-radius:18px;
  padding:clamp(20px,4vw,32px);
  box-shadow:var(--edge-hi), var(--shadow-card);
}
.marcador{
  display:flex;align-items:center;justify-content:center;gap:clamp(10px,3vw,26px);
}
.marcador .equip{
  font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(245,242,236,.6);flex:0 0 90px;text-align:center;
}
.marcador .num{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(3rem,10vw,5.5rem);
  width:110px;text-align:center;background:none;color:var(--cream);
  border:1px solid rgba(245,242,236,.25);border-radius:16px;padding:14px 0;
  -moz-appearance:textfield;
}
.marcador .num::-webkit-outer-spin-button,.marcador .num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.marcador .num:focus{border-color:var(--or);outline:none}
.marcador .separa{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:3rem;color:rgba(245,242,236,.3)}
.golejadors label{
  display:block;font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--or);margin-bottom:10px;
}
.golejadors .fila{display:flex;gap:10px;flex-wrap:wrap}
.golejadors input{
  flex:1 1 200px;padding:10px 14px;
  background:rgba(255,255,255,.03);border:1px solid rgba(245,242,236,.18);border-radius:14px;
  color:var(--cream);font-size:.95rem;
}
.golejadors input:focus{border-color:var(--or);outline:none}
/* `.desar` i `.desa-nota` són del full compartit: el botó de desar i la
   nota de sota són els mateixos que als diàlegs del compte. Aquí només hi
   ha on es col·loca dins d'aquest formulari. */
.pronostic-form .desar{justify-self:center}

/* `.anonim-cta` —la mateixa caixa per a qui no ha entrat— és del full
   compartit: l'onze també l'ensenya i havia de ser la mateixa. */
.tancat-cta{
  text-align:center;padding:26px;border:1px dashed rgba(245,242,236,.3);border-radius:16px;
  color:rgba(245,242,236,.65);
}
.tancat-cta b{color:var(--or)}

/* Crida des de la capçalera cap a l'anàlisi (que viu més avall) */
.analisi-salt{
  display:inline-block;margin-top:18px;
  font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;padding:8px 16px;border-radius:999px;
  border:1px solid rgba(245,242,236,.45);
  background:rgba(163,23,58,.15);color:var(--or);
  transition:background .2s,border-color .2s,color .2s;
}
.analisi-salt:hover{border-color:var(--or);background:rgba(163,23,58,.3);color:var(--cream)}

/* Anàlisi del rival: targeta editorial, destacada amb accent grana */
.analisi-card{
  margin-top:22px;border-radius:18px;overflow:hidden;
  border:1px solid rgba(245,242,236,.18);
  background:linear-gradient(180deg, rgba(163,23,58,.16), rgba(14,10,11,.45));
  box-shadow:var(--edge-hi), var(--shadow-card), 0 0 60px -30px rgba(194,30,51,.35);
}
.analisi-cap{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 20px;border-bottom:1px solid rgba(245,242,236,.16);
  background:rgba(122,17,40,.22);
}
.analisi-badge{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--paper);background:var(--grana);
  padding:5px 11px;border-radius:999px;white-space:nowrap;
}
.analisi-firma{font-size:.92rem;color:rgba(245,242,236,.72)}
.analisi-firma b{color:var(--or);font-weight:600}
.analisi-text{padding:18px 22px 20px;color:rgba(245,242,236,.9);line-height:1.6}
.analisi-text p{margin:0 0 12px}
.analisi-text p:last-child{margin-bottom:0}

/* Textarea de l'anàlisi al modal d'edició de jornada */
.admin-form textarea{
  width:100%;box-sizing:border-box;resize:vertical;min-height:96px;
  font:inherit;padding:10px 12px;border-radius:16px;
  border:1px solid rgba(245,242,236,.16);background:var(--surf-1);
  color:var(--paper);line-height:1.5;
}
.admin-form textarea:focus{border-color:var(--or);outline:none}

/* Resultat oficial: element PRINCIPAL, contundent i granA */
.resultat-oficial{
  margin-top:24px;text-align:center;padding:22px 20px;
  border:1px solid rgba(245,242,236,.22);border-radius:20px;
  background:linear-gradient(180deg, rgba(163,23,58,.22), rgba(60,10,18,.35));
  box-shadow:var(--edge-hi), var(--shadow-hero), var(--halo-grana);
}
.resultat-oficial .big{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:2.6rem;letter-spacing:.05em;
  color:var(--cream);margin-top:2px;
}
.resultat-oficial .llista{margin-top:8px;font-size:.9rem;color:rgba(245,242,236,.7)}

/* Etiqueta comuna dels dos resums */
.resum-tag{
  font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--or);
}

/* El teu pronòstic: element SECUNDARI, lleuger i apaivagat */
.pronostic-resum{
  margin-top:14px;text-align:center;padding:16px 20px 18px;
  border:1px dashed rgba(245,242,236,.16);border-radius:16px;
  background:transparent;
}
.pronostic-resum .resum-tag{color:rgba(245,242,236,.42)}
.pronostic-resum .big{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.85rem;letter-spacing:.04em;
  color:rgba(245,242,236,.78);margin-top:2px;
}

.meus-punts{margin-top:14px;font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--or)}
.meus-punts b{font-size:1.4rem;font-family:'Space Grotesk',sans-serif;color:var(--cream)}

/* ── Favorits ──
   L'estrella, el filtre i l'avís no són aquí: els fan servir la porra i
   l'onze i viuen a `/shared/css/leaderboard.css`, amb el mòdul que els
   mou (`/shared/ui/favorites.js`). Aquí només hi queda el que la porra hi
   posa a sobre, a la targeta desplegable d'una jornada. */

/* ── Regles ── */
/* Les regles (`.regles`) no són aquí: la pàgina és la mateixa als dos jocs i
   viu a `/shared/css/rules.css`. */

/* La política de privacitat (`.politica`) no és aquí: l'estil viu a
   `/shared/privacy.css` amb el text, i el carreguen tant la porra com la zona
   nàstic. */

/* ── El peu, ben avall ──
   El peu és un germà de #app, com al web: qui l'empeny al fons és el
   `display:flex` del <body> (full compartit) i aquest `flex:1`. Abans #app
   feia 100vh i el peu hi vivia a dins; ara, amb el peu a fora, aquells 100vh
   el deixarien sempre sota la línia de flotació. */
#app{flex:1 0 auto;display:flex;flex-direction:column}
main.vista{flex:1 0 auto}

/* ── Admin ── */
.admin-secc{margin-bottom:36px;border:1px solid rgba(245,242,236,.15);border-radius:16px;padding:24px;background:var(--surf-1)}
/* `.admin-form` és del full compartit: els diàlegs del compte fan servir els
   mateixos controls. Aquí, el que només passa a l'administració. */
.admin-form label.col-2{grid-column:1/-1}
.admin-msg{margin-top:12px;font-family:'Space Grotesk',sans-serif;font-size:10.5px;letter-spacing:.14em}
.admin-msg.ok{color:#7ec98a}
.admin-msg.error{color:#e07070}
/* Wrapper amb scroll horitzontal propi: el pare té overflow-x:clip
   a body, així que el scroll ha de viure aquí perquè funcioni en mòbil. */
.admin-taula-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.admin-taula{width:100%;border-collapse:collapse;margin-top:10px}
.admin-taula th, .admin-taula td{padding:10px 14px;text-align:left;border-bottom:1px solid rgba(245,242,236,.1)}
.admin-taula th{font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--or);font-weight:400}
/* etiqueta de posició (POR/DEF/MC/DAV) a la taula de plantilla */
.pos-tag{
  display:inline-block;font-family:'Space Grotesk',sans-serif;
  font-size:9.5px;letter-spacing:.14em;padding:3px 8px;border-radius:999px;
  border:1px solid rgba(245,242,236,.35);color:var(--or);
}

/* La barra de dalt en dues files a mòbil ja la resol el full compartit: és
   la mateixa barra als dos webs i s'ha de trencar igual. */

@media (max-width:600px){
  .marcador{gap:8px}
  .marcador .equip{flex:1 1 0;min-width:0;font-size:9px;letter-spacing:.08em}
  .marcador .num{width:72px;font-size:2.4rem;padding:10px 0}
  .marcador .separa{font-size:2rem}
  .acta .marcador .num{width:64px;font-size:2rem;padding:8px 0}
  .vista{padding-left:14px;padding-right:14px}
  .admin-secc{padding:16px 14px}
  .acta{padding:14px}
  .acta-ag{margin-left:0}
  .acta-botons{justify-content:stretch}
  .acta-botons .desar{flex:1 1 auto}
  .canvi-camp{flex:1 1 130px}
  .canvi-camp select{flex:1 1 auto;min-width:0}
  /* Les taules d'admin es queden com a taula real; el scroll horitzontal
     el fa el wrapper `.admin-taula-wrap`. */
  .admin-taula th,.admin-taula td{padding:8px 10px;white-space:nowrap}
  /* diàlegs còmodes en pantalles petites */
  .login-cos{padding:28px 20px 24px}
  .confirm-modal{padding:22px 20px}
  /* llista de jugadors una mica més compacta */
  .jug{gap:8px;padding:7px 8px}
  .jug .comptador{gap:6px}
  .jug .comptador button{width:28px;height:28px}  /* dit-friendly */
}

/* pantalles molt estretes (iPhone SE, Android petits) */
@media (max-width:360px){
  .marcador .num{width:60px;font-size:2rem}
  .gols-llista li{padding:7px 10px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ── L'acta del partit (admin) ── */
.acta{
  border:1px solid rgba(245,242,236,.2);border-radius:14px;
  padding:18px 20px;margin-bottom:14px;background:var(--surf-1);
}
.acta-cap{
  display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px;
  margin-bottom:14px;
}
.acta-cap .titol{
  font-family:'Space Grotesk',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:1.1rem;
}
.acta-cap .quan{
  font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.14em;
  color:rgba(245,242,236,.5);
}
.acta-tancada{
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#7ec98a;
  border:1px solid rgba(126,201,138,.4);padding:3px 9px;border-radius:999px;
}
.acta .marcador{margin-bottom:16px}
.acta .marcador .num{width:90px;padding:10px 0;font-size:clamp(2.4rem,6vw,3.6rem)}
.acta .desa-nota{margin-top:0}

/* Els dos comptadors són el que evita l'errada: diuen en tot moment si
   falten titulars o gols per repartir, sense haver de prémer res. */
.acta-marcadors{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin-bottom:16px;
}
.acta-comptador{
  font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;
  border:1px solid rgba(245,242,236,.18);color:rgba(245,242,236,.6);
}
.acta-comptador.ok{color:#7ec98a;border-color:rgba(126,201,138,.45)}
.acta-comptador.mal{color:#e07070;border-color:rgba(224,112,112,.45)}
.acta-comptador.avis{color:var(--or);border-color:rgba(212,175,106,.45)}
/* Fins a quin minut s'ha jugat: va sota el marcador perquè és del partit i
   no de ningú en concret, i és el que després dirà els minuts de cadascú. */
.acta-final{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:-6px 0 16px;
  font-family:'Space Grotesk',sans-serif;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(245,242,236,.55);
}

.acta-ag{
  display:inline-flex;align-items:center;gap:9px;margin-left:auto;
  font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(245,242,236,.6);
}

/* ── L'onze al camp (admin) ──
   El camp és el mateix que veurà tothom (`/shared/match-report.css`): aquí
   només se li canvien les fitxes per desplegables. Una mica més ample que el
   públic perquè els cognoms hi càpiguen sense fer-hi els ulls grossos. */
.onze{margin-bottom:18px}
.onze-cap{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:10px;
}
.onze-cap h4{
  font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--or);font-weight:400;
}
.onze-dibuix{
  display:flex;align-items:center;gap:8px;
  font-family:'Space Grotesk',sans-serif;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(245,242,236,.6);
}
.onze-dibuix select{
  padding:5px 8px;border-radius:9px;
  background:rgba(10,7,8,.8);color:var(--cream);
  border:1px solid rgba(245,242,236,.2);
  font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.1em;
}
.onze-camp{max-width:420px;margin-inline:auto}
/* El camp on es col·loca l'onze —els llocs i els desplegables— ja no és
   d'aquí: el comparteixen l'acta i l'onze de Xisco, i viu amb la resta del
   camp a /shared/css/match-report.css. */

/* La taula de jugadors ja no hi és: les targetes i l'MVP s'entren com els
   gols i els canvis, fet a fet, i repassar la plantilla sencera per tocar
   dues caselles era la manera de deixar-se'n la meitat. */
.acta-nota{
  margin:-8px 0 18px;font-size:11px;line-height:1.5;
  color:rgba(245,242,236,.45);
}

/* Canvis */
.canvis{margin-bottom:18px}
.canvis-cap{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.canvis-cap h4{
  font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--or);font-weight:400;
}
.canvi-afegeix{
  font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;padding:6px 13px;border-radius:999px;
  border:1px solid rgba(245,242,236,.2);color:rgba(245,242,236,.7);
  background:transparent;cursor:pointer;transition:border-color .2s,color .2s;
}
.canvi-afegeix:hover{border-color:var(--or);color:var(--or)}
.canvis-llista{list-style:none;display:flex;flex-direction:column;gap:8px}
.canvi{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 10px;border-radius:12px;
  border:1px solid rgba(245,242,236,.1);background:rgba(255,255,255,.02);
}
.canvi-min{width:60px}
.canvi-camp{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'Space Grotesk',sans-serif;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(245,242,236,.55);
}
.canvi-camp select{
  font-family:inherit;font-size:13px;letter-spacing:normal;text-transform:none;
  padding:6px 9px;border-radius:9px;color:var(--cream);
  background:rgba(10,7,8,.6);border:1px solid rgba(245,242,236,.18);
}
.canvi-camp select:focus{border-color:var(--or);outline:none}
/* La fila d'un gol del rival no té desplegables —només el minut—, i sense res
   més al costat el número quedaria sol al mig d'una fila buida. El text diu
   de què és la fila, amb la mateixa lletra que les etiquetes dels altres. */
.canvi-text{
  font-family:'Space Grotesk',sans-serif;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(245,242,236,.55);
}
.canvi-treu{
  margin-left:auto;width:26px;height:26px;border-radius:50%;
  border:1px solid rgba(245,242,236,.2);background:transparent;
  color:rgba(245,242,236,.6);cursor:pointer;line-height:1;
}
.canvi-treu:hover{border-color:#e07070;color:#e07070}

.acta-botons{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;margin-bottom:10px}
.acta .desar{padding:10px 24px;font-size:10px}
/* Desar l'acta no és l'acció principal: la principal és tancar el partit. */
.desar.secundari{
  background:transparent;border:1px solid rgba(245,242,236,.25);
  color:rgba(245,242,236,.75);
}
.desar.secundari:hover{background:rgba(245,242,236,.06);border-color:var(--or);color:var(--or)}

.num-mini{
  width:52px;padding:5px 6px;text-align:center;
  background:rgba(255,255,255,.03);border:1px solid rgba(245,242,236,.18);
  border-radius:9px;color:var(--cream);font-family:inherit;
  font-variant-numeric:tabular-nums;
}
.num-mini:focus{border-color:var(--or);outline:none}

/* ── Widget d'assignació de gols a jugadors ── */
.assig{display:grid;gap:14px}
.assig-cap{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--or);
}
.assig-cap .etiqueta{flex:1 1 auto;min-width:0}
.assig-cap .total{flex:0 0 auto;white-space:nowrap;color:rgba(245,242,236,.7)}
.assig-cap .total.ok{color:#7ec98a}
.assig-cap .total.mal{color:#e07070}
/* Zona de tria del formulari: només els golejadors triats, mai scroll intern */
.tria-buida{
  padding:18px;text-align:center;font-size:.9rem;color:rgba(245,242,236,.42);
  border:1px dashed rgba(245,242,236,.16);border-radius:14px;
}
.tria-triats{
  display:flex;flex-direction:column;gap:4px;margin-bottom:10px;
  border:1px solid rgba(245,242,236,.12);border-radius:14px;
  padding:6px;background:var(--surf-1);
}
/* capçalera discreta: diu què és cada columna sense cridar l'atenció
   (l'etiqueta daurada de dalt ja és la veu forta del bloc) */
.tria-cap{
  display:flex;justify-content:space-between;gap:10px;padding:2px 10px 6px;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(245,242,236,.38);
}
/* files compactes: amb el comptador al costat, els noms llargs no hi caben
   en una línia si es deixen les mides de la llista gran */
.tria-triats .jug{gap:8px;padding:8px 10px}
.tria-triats .jug .nom{font-size:.9rem}
.tria-triats .jug .comptador{gap:6px}
.tria-obre{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:13px 14px;border-radius:14px;text-align:left;color:var(--cream);
  border:1px dashed rgba(245,242,236,.28);background:rgba(255,255,255,.02);
  transition:border-color .2s,background .2s;
}
.tria-obre:hover:not(:disabled){border-color:var(--or);background:rgba(245,242,236,.05)}
.tria-obre:disabled{opacity:.4;cursor:default}
.tria-mes{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;line-height:1;
  background:var(--grana);color:var(--cream);font-weight:700;font-size:1.05rem;
}
.tria-obre-txt{flex:1 1 auto;min-width:0;font-size:.95rem;font-weight:600}
.tria-falten{
  flex:0 0 auto;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(245,242,236,.5);
}

/* pantalles molt estretes (320px): sense compactar la fila, els cognoms llargs
   ("Guarrotxena") parteixen en dues línies quan porten el comptador. De 360px
   en amunt hi caben de sobres, i allà val més la pena l'aire. */
@media (max-width:340px){
  .tf-fila .tf-triat .comptador{gap:4px}
  .tria-triats .jug{grid-template-columns:24px 1fr auto;gap:8px;padding:8px}
  .tria-triats .jug .nom{font-size:.88rem}
  .tria-triats .jug .comptador{gap:4px}
}
.jug .comptador{display:flex;align-items:center;gap:8px}
.jug .comptador button{
  width:24px;height:24px;border-radius:50%;
  background:rgba(245,242,236,.12);color:var(--cream);font-weight:700;font-size:13px;
  transition:background .2s;
}
.jug .comptador button:hover:not(:disabled){background:var(--grana)}
.jug .comptador button:disabled{opacity:.25;cursor:not-allowed}
.jug .valor{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.1rem;
  min-width:18px;text-align:center;color:var(--cream);
}
.jug.actiu .valor{color:var(--or)}

/* ── Gols en pròpia porteria (autogol a favor) ── */
.jug.autogol .nom .cognoms{font-weight:400;color:rgba(245,242,236,.5);font-size:.85em}
.jug .dorsal.ag,.gols-llista .d.ag{
  font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;letter-spacing:.04em;
  color:rgba(163,23,58,.9);
}
.gols-llista li.autogol-li .n b{font-weight:600}

/* ── Escuts d'equips ── */

/* (les regles del calendari viuen més avall al bloc "Calendari (tota la temporada)") */

/* Cel·la rival a taules d'admin i blocs de resultat pendent */
.rival-cel{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}

/* ── Historial ── */
.historial{margin-top:48px;border-top:1px solid rgba(245,242,236,.15);padding-top:30px}
.hist-titol{font-family:'Space Grotesk',sans-serif!important;font-size:11px!important;letter-spacing:.24em!important;color:rgba(245,242,236,.6)!important;text-transform:uppercase!important;margin-bottom:16px!important}
.hist-tira{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.hist-carta{
  border:1px solid rgba(245,242,236,.09);border-radius:14px;padding:14px 16px;
  background:var(--surf-1);cursor:pointer;text-align:left;
  box-shadow:var(--edge-hi), 0 8px 20px -16px rgba(0,0,0,.7);
  transition:all .25s;
}
.hist-carta:hover{border-color:var(--or);transform:translateY(-2px);box-shadow:var(--edge-hi), 0 20px 38px -22px rgba(0,0,0,.9), 0 0 32px -18px rgba(212,175,106,.35)}
.hist-carta .jn{font-family:'Space Grotesk',sans-serif;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--or)}
.hist-carta .rival{font-family:'Space Grotesk',sans-serif;font-weight:600;text-transform:uppercase;margin:6px 0;font-size:.95rem;line-height:1.1}
.hist-carta .marc{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.4rem}
.hist-carta .mp{font-family:'Space Grotesk',sans-serif;font-size:9.5px;letter-spacing:.14em;color:rgba(245,242,236,.55);margin-top:4px}

/* ── Taula plantilla ── */
#taulaPlantilla td .switch{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;border:1px solid rgba(245,242,236,.15);cursor:pointer;
}
#taulaPlantilla td .switch.actiu{border-color:#7ec98a;color:#7ec98a}
#taulaPlantilla td .switch.inactiu{border-color:#e07070;color:#e07070}

/* ── Resultats pendents (admin) ── */
.admin-hint{color:rgba(245,242,236,.5);font-size:.9rem;margin:-6px 0 14px}
.admin-hint.error{color:#e07070}

/* ── Vista Contacte (usuari) ──
   El formulari (`.contact-form` i companyia) viu a `/shared/contact.css`, que
   és el mateix full que carrega la zona nàstic: hi ha un sol formulari i s'ha
   de veure igual als dos llocs. Aquí només hi queda l'entradeta de la vista,
   que és text de la porra. */
.contact-lede{color:rgba(245,242,236,.7);max-width:640px;line-height:1.55;margin-bottom:28px}

/* ── Missatges de contacte (admin) ── */
.badge-nou{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 7px;margin-left:10px;
  border-radius:12px;background:var(--grana-viu);color:var(--paper);
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  vertical-align:middle;
}
.missatge{
  border:1px solid rgba(245,242,236,.2);border-radius:16px;
  padding:16px 18px;margin-bottom:12px;background:var(--surf-1);
}
.missatge.llegit{opacity:.55}
.missatge-cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.missatge-email a{color:var(--or);text-decoration:none;font-weight:600}
.missatge-email a:hover{text-decoration:underline}
.missatge-data{color:rgba(245,242,236,.5);font-size:10.5px;letter-spacing:.14em}
.missatge-cos{margin:10px 0 12px;white-space:pre-wrap;color:rgba(245,242,236,.85);line-height:1.5}
.missatge-peu{display:flex;justify-content:space-between;align-items:center;gap:12px}
.missatge-tag{
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(245,242,236,.5);border:1px solid rgba(245,242,236,.15);
  padding:3px 8px;border-radius:999px;
}
.missatge-toggle{
  font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;border:1px solid rgba(245,242,236,.2);
  color:rgba(245,242,236,.7);background:transparent;cursor:pointer;transition:all .2s;
}
.missatge-toggle:hover{border-color:var(--or);color:var(--or)}
.missatge-toggle:disabled{opacity:.5;cursor:wait}
.pendent-buit{
  padding:26px 20px;text-align:center;color:rgba(245,242,236,.5);
  border:1px dashed rgba(245,242,236,.2);border-radius:14px;
}


/* ── Llista de golejadors (a resultats i pronòstics mostrats) ── */
.gols-llista{
  list-style:none;margin:14px auto 0;padding:0;
  display:flex;flex-direction:column;gap:5px;
  max-width:380px;
}
.gols-llista li{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;border-radius:5px;
  background:var(--surf-1);border:1px solid rgba(245,242,236,.1);
  text-align:left;
}
.gols-llista .d{
  flex:0 0 auto;min-width:20px;
  font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.04em;
  color:rgba(245,242,236,.75);text-align:center;
}
/* nom flexible: ocupa l'espai lliure i, si cal, parteix per paraules (mai lletra a lletra) */
.gols-llista .n{flex:1 1 auto;min-width:0;font-size:.92rem;line-height:1.25}
.gols-llista .n b{font-weight:600}
.gols-llista .pilotes{flex:0 0 auto;margin-left:auto;display:inline-flex;gap:4px;color:var(--or)}
/* La pilota és l'emoji del sistema (el mateix que la portada): mida per
   línia de text, no per caixa, que cada plataforma la dibuixa a la seva. */
.pilota{font-size:.85rem;line-height:1;flex:0 0 auto;font-style:normal}

/* Files del pronòstic: encara més planes, per marcar la jerarquia */
.pronostic-resum .gols-llista li{
  background:rgba(245,242,236,.03);border-color:rgba(245,242,236,.07);
}
.pronostic-resum .gols-llista .pilotes{color:rgba(245,242,236,.75)}

/* ── Pronòstics de tothom (visibles quan la porra es tanca) ── */
.tots-pronostics{margin-top:36px;border-top:1px solid rgba(245,242,236,.15);padding-top:26px}
.tots-cap{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:16px;
}
.tots-titol{
  font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--or);
}
.tots-llista{display:grid;gap:12px}

/* ── Repartiment 1/X/2 i filtres dels pronòstics ── */
/* Barra de tres trams: victòria / empat / derrota del Nàstic, amb el % i el
   nombre de gent. Cada tram també filtra la llista de sota. */
.pron-distrib{display:flex;gap:8px;margin-bottom:14px}
.pron-tram{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:12px 8px;border-radius:12px;cursor:pointer;
  border:1px solid rgba(245,242,236,.15);background:var(--surf-1);
  transition:border-color .2s, background .2s;
}
.pron-tram:hover{border-color:var(--or)}
.pron-tram-pct{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.25rem;color:var(--cream)}
.pron-tram-et{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,242,236,.6)}
.pron-tram-num{font-size:10px;color:rgba(245,242,236,.4)}
/* Cada resultat té el seu accent quan està triat */
.pron-tram.win.actiu{border-color:#7ec98a;background:rgba(126,201,138,.12)}
.pron-tram.draw.actiu{border-color:var(--or);background:rgba(212,175,106,.12)}
.pron-tram.loss.actiu{border-color:var(--grana-lite);background:rgba(226,67,87,.12)}
.pron-tram.actiu .pron-tram-et{color:var(--cream)}
.pron-tram:focus-visible{outline:2px solid var(--or);outline-offset:2px}

.pron-filtres{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.pron-select{max-width:100%}
.pron-marcadors{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.pron-marcadors .chip{cursor:pointer}
.pron-compte{font-size:10.5px;color:rgba(245,242,236,.5);margin-bottom:14px}
.pron-neteja{
  font-family:inherit;font-size:inherit;color:var(--or);
  text-decoration:underline;cursor:pointer;
}
.pron-neteja:hover{color:var(--cream)}
.pronostic-targeta{
  border:1px solid rgba(245,242,236,.15);border-radius:14px;
  background:var(--surf-1);overflow:hidden;
}
/* El desplegable i l'estrella són dos botons germans: un botó no en pot
   contenir un altre, i prémer l'estrella no ha d'obrir la targeta. */
.pt-fila{display:flex;align-items:center}
/* La buida hi és per qui no es pot marcar (tu mateix): sense ella la fila
   s'eixampla i el marcador i els punts es desplacen respecte de la resta. */
.pt-fila .estrella,
.pt-fila .estrella-buida{flex:0 0 auto;margin-right:12px}
.pt-cap{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:12px 18px;text-align:left;
}
.pronostic-targeta.jo{border-color:rgba(245,242,236,.4)}
.pronostic-targeta.desplegable .pt-cap{cursor:pointer;transition:background .15s}
.pronostic-targeta.desplegable .pt-cap:hover{background:rgba(245,242,236,.05)}
.pt-fletxa{
  flex:0 0 auto;color:rgba(245,242,236,.6);font-size:.8rem;
  transition:transform .2s;
}
.pronostic-targeta.obert .pt-fletxa{transform:rotate(180deg)}
/* Pronòstic sense golejadors: la targeta no s'obre, però la fletxa reserva
   el seu lloc perquè la fila no quedi desquadrada respecte de les altres. */
.pt-fletxa.buida{visibility:hidden}
.pt-detall{padding:0 18px 12px}
.pt-cap img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.pt-cap .placeholder{width:26px;height:26px;border-radius:50%;background:rgba(245,242,236,.08);flex:0 0 auto}
/* La inicial, de la mateixa mida que la foto: sense mida s'encongia fins a
   la lletra i el llorer de qui té plens hi quedava petit i esclafat. */
.pt-cap .avatar-inicial{width:26px;height:26px;font-size:11px}
/* El llorer surt de la cara per banda i banda: un marge perquè no toqui el nom. */
.pt-cap .avatar-coronat{margin:0 4px}
.pt-nom{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.95rem;
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pt-marc{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.2rem;
  flex:0 0 auto;margin-left:auto;
}
.pt-punts{
  flex:0 0 auto;
  font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.14em;
  color:#7ec98a;padding:3px 10px;
  border:1px solid rgba(126,201,138,.3);border-radius:999px;
}
.pronostic-targeta .gols-llista{margin-top:0;max-width:none}
.pronostic-targeta .gols-llista li{
  background:rgba(245,242,236,.03);border-color:rgba(245,242,236,.07);
  padding:6px 12px;
}

/* El selector de jornada de la classificació ja no és aquí: la tria d'una
   jornada és la mateixa als dos jocs i viu al full compartit
   `/shared/css/leaderboard.css`. */

/* ── Toggle d'assignació (properes jornades) ── */
.assig-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:12px 16px;margin-top:6px;
  background:var(--surf-1);
  border:1px solid rgba(245,242,236,.18);border-radius:14px;
  color:var(--cream);text-align:left;
  transition:border-color .2s, background .2s;
}
.assig-toggle:hover{border-color:var(--or);background:rgba(245,242,236,.06)}
.assig-toggle[aria-expanded="true"]{border-color:rgba(245,242,236,.35)}
.assig-toggle[aria-expanded="true"] .tog-caret{transform:rotate(180deg)}
.assig-toggle .tog-titol{
  font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--or);flex:0 0 auto;
}
.assig-toggle .tog-info{
  flex:1 1 auto;text-align:right;font-size:.85rem;
  color:rgba(245,242,236,.55);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.assig-toggle .tog-info.ok{color:#7ec98a}
.assig-toggle .tog-info.mal{color:#e0a13e}
.assig-toggle .tog-caret{
  flex:0 0 auto;color:var(--or);font-size:12px;
  transition:transform .2s;
}

/* ── Calendari de Properes (només informatiu) ── */
.cal-fila{
  display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:16px;
  padding:14px 20px;margin-bottom:8px;
  border:1px solid rgba(245,242,236,.15);border-radius:14px;
  background:var(--surf-1);
}
.cal-fila .num{
  font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--or);text-align:center;
}
.cal-fila .partit{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;text-transform:uppercase;font-size:1rem;line-height:1.15;
}
.cal-fila .partit .vs{color:rgba(245,242,236,.35);margin:0 8px;font-weight:400}
.cal-fila .quan{
  font-family:'Space Grotesk',sans-serif;font-size:10.5px;letter-spacing:.1em;
  color:rgba(245,242,236,.55);text-align:right;
}
.cal-fila .quan.per-definir{color:#e0a13e;text-transform:uppercase;letter-spacing:.16em;font-size:10px}
.cal-buit{padding:26px 20px;text-align:center;color:rgba(245,242,236,.5);border:1px dashed rgba(245,242,236,.2);border-radius:14px}

/* `.check-mono` és del full compartit: el mateix control que al diàleg de
   la foto de perfil. */

/* ── Accions a la taula plantilla ── */
.col-accions{text-align:right}
.admin-taula td.accions{text-align:right;white-space:nowrap}
.admin-taula .acc-boto{
  font-family:'Space Grotesk',sans-serif;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;border:1px solid rgba(245,242,236,.15);
  color:rgba(245,242,236,.6);margin-left:4px;transition:all .2s;
}
.admin-taula .acc-boto:hover{border-color:var(--or);color:var(--or)}
.admin-taula .acc-boto.perill:hover{border-color:#e07070;color:#e07070}

/* ── Diàleg de confirmació ── */
.confirm-modal{
  border:1px solid rgba(245,242,236,.25);border-radius:14px;
  background:radial-gradient(120% 100% at 50% 0%, #2b1e24, #150d0f 65%);color:var(--cream);
  width:min(400px,calc(100vw - 32px));padding:28px 30px;margin:auto;
}
.confirm-modal::backdrop{background:rgba(10,7,8,.65);backdrop-filter:blur(4px)}
.confirm-modal h3{font-family:'Space Grotesk',sans-serif;font-weight:600;text-transform:uppercase;font-size:1.15rem;margin-bottom:8px}
.confirm-modal p{color:rgba(245,242,236,.7);font-size:.95rem;line-height:1.5;margin-bottom:18px}
.confirm-modal .accs{display:flex;gap:10px;justify-content:flex-end}
.confirm-modal .acc-boto{padding:10px 18px;border-radius:999px;font-family:'Space Grotesk',sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;border:1px solid rgba(245,242,236,.2);color:rgba(245,242,236,.75);cursor:pointer;background:none}
.confirm-modal .acc-boto:hover{border-color:var(--or);color:var(--or)}
.confirm-modal .acc-boto.perill{background:var(--grana);border-color:var(--grana);color:var(--paper)}
.confirm-modal .acc-boto.perill:hover{background:var(--grana-viu);color:var(--paper)}

/* El modal de notificació («Pronòstic desat!») viu a
   `/shared/css/notice.css`: el fan servir la porra i l'onze, que
   desen la mateixa mena de cosa i han de fer la mateixa cara. */


/* ── Calendari (tota la temporada) ── */
/* ── Edge highlights (llum superior) a totes les superfícies elevades ── */
/* Aplica una fina línia interior de llum al top perquè les targetes se sentin
   il·luminades des de dalt en lloc de flotar planes. */
.admin-secc,
.tria-triats,
.missatge,
.acta,
.gols-llista li,
.pronostic-targeta,
.assig-toggle,
.cal-buit,
.pendent-buit,
.tancat-cta{
  box-shadow:var(--edge-hi);
}

/* Interior dels camps, més recessit i alineat amb la resta. El del formulari
   de contacte i el de la tria d'àlies ja se'l posen ells a `/shared/`: són
   compartits i no poden dependre d'aquest full. */
.jug-cerca,
.golejadors input,
.admin-form input,
.admin-form select,
.admin-form textarea,
.marcador .num{
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4);
}

/* L'acta d'un partit (camp, gols i canvis) viu a `/shared/match-report.css`,
   que és el mateix full que carrega la zona nàstic. Aquí només hi ha el marc
   que li dona la porra: quant espai ocupa dins de la vista d'una jornada. */
.acta-partit{margin-top:28px}