/* ==========================================================================
   CLUB ATLETIC BISBALENC — fulla d'estils
   ---------------------------------------------------------------------------
   Referència directa: fcf.cat/competicio — blanc dominant, targetes de
   contorn fi (no farcides), pastilles arrodonides pertot (tabs, botons,
   xips de data), tipografia fosca neutra i el vermell del club usat amb
   intenció: contorns, actius, icones — mai com a fons massiu.
   ========================================================================== */

:root{
  /* -- neutres -- */
  --ink:        #1B1B1F;
  --ink-soft:   #55555C;
  --muted:      #7A7A82;
  --white:      #FFFFFF;
  --paper:      #FFFFFF;
  --grey-bg:    #F5F5F7;
  --grey-chip:  #EFEFF1;
  --grey-chipo: #BBBBBB;
  --line:       #E7E7EA;
  --linem:      #A8A8B7;

  /* -- club: vermell/blanc -- */
  --red:        #E2001A;
  --red-dark:   #A5000F;
  --red-tint:   #FCEAEC;
  --amber:      #E8A93A;
  --amber-dark: #92400E;
  --amber-tint: #FDF1E2;
  --loss-tint:  #feced2;

  /* -- funcionals -- */
  --green:      #1E8A54;
  --green-tinto: #E8F6EE;
  --green-tint: #d8f3e3;

  --tabnav-h: 56px;
  --teamswitch-h: 120px;

  --f-display: 'Oswald', sans-serif;
  --f-body:    'Work Sans', sans-serif;
  --f-mono:    'IBM Plex Mono', monospace;

  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 10px;
  --shadow-sm: 0 2px 8px rgba(20,16,15,0.06);
  --shadow-md: 0 12px 28px rgba(20,16,15,0.12);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background-color:var(--grey-bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
button{ font-family:inherit; }

::selection{ background-color:var(--red); color:var(--white); }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:var(--grey-bg); }
::-webkit-scrollbar-thumb{ background:rgba(226,0,26,0.35); border-radius:5px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(226,0,26,0.55); }

@keyframes slideUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }
@keyframes spin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
@keyframes pulse{ from{ opacity:0.4;} to{ opacity:0.95;} }
@keyframes dotPulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:0.4; transform:scale(0.7);} }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

.fd{ font-family:var(--f-display); }
.fb{ font-family:var(--f-body); }
.fm{ font-family:var(--f-body); }
.anim{ animation:slideUp 0.3s ease both; }

:focus-visible{ outline:3px solid var(--red); outline-offset:2px; border-radius:2px; }

/* ---- franja de samarreta a ratlles: única floritura decorativa, usada amb compte ---- */
.stripe-bar{
  height:10px;
  background:repeating-linear-gradient(90deg,var(--red) 0px,var(--red) 46px,var(--white) 46px,var(--white) 92px);
}
.stripe-bar--thin{ height:6px; }
.stripe-bar--faint{ height:8px; }

.ceramica{ background-color:var(--grey-bg); }

/* ==================== SITE / LAYOUT ==================== */
.site{ min-height:100vh; display:flex; flex-direction:column; }
.container{ max-width:1320px; margin:0 auto; padding-left:24px; padding-right:24px; width:100%; }
img{ max-width:100%; }

/* ==================== HEADER ==================== */
.site-header{ background-color:var(--white); border-bottom:1px solid var(--line); }
.site-header .container{ padding-top:16px; padding-bottom:16px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.brand{ display:flex; align-items:center; gap:14px; min-width:0; }
.brand-text h1{ color:var(--ink); font-size:clamp(1.05rem,3.2vw,1.5rem); text-transform:uppercase; letter-spacing:0.02em; margin:0; line-height:1.15; font-weight:700; }
.brand-text p{ color:var(--muted); font-size:12.5px; margin:4px 0 0; font-weight:500; }
.header-links{ display:flex; align-items:center; gap:9px; flex-shrink:0; }
.icon-btn{
  width:40px; height:40px; border:2px solid var(--line); border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft);
  text-decoration:none; transition:border-color .15s, color .15s, background-color .15s;
}
.fcf-pill{
  font-size:12px; text-transform:uppercase; letter-spacing:0.05em; padding:10px 20px; font-weight:700;
  border:2px solid var(--red); border-radius:var(--radius-pill); color:var(--white); text-decoration:none;
  background-color:var(--red); transition:background-color .15s, border-color .15s, transform .15s;
}

/* ==================== HERO ====================
   Bloc de color pla, com els bàners de la FCF — sense degradats foscos ni glows. */
.hero{
  position:relative;
  background:linear-gradient(165deg,var(--red) 0%,var(--red-dark) 100%);
  overflow:hidden;
}
.hero-stripes{ display:none; }
.hero-glow{ display:none; }
.hero-crest-bg{
  position:absolute; right:-2%; top:50%; transform:translateY(-50%);
  opacity:0.22; pointer-events:none;
}
.hero-crest-bg .crest{ filter:none; }


.hero-photo-bg {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: auto;
    opacity: 0.22;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, black 60%, transparent 100%);
}
.hero-inner{ position:relative; padding:56px 0 48px; text-align:center; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--red); background-color:var(--white); font-size:12.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.1em; margin:0; padding:8px 18px 8px 14px; border-radius:var(--radius-pill);
  box-shadow:0 6px 16px rgba(0,0,0,0.14);
}
.hero-eyebrow::before{
  content:""; width:7px; height:7px; border-radius:50%; background-color:var(--red);
  animation:dotPulse 1.8s ease-in-out infinite; flex-shrink:0;
}
.hero-title{
  color:var(--white); font-size:clamp(2.3rem,7.4vw,4rem); font-weight:700; text-transform:uppercase;
  margin:20px 0 0; line-height:1.04; letter-spacing:0.01em;
  text-shadow:0 2px 12px rgba(0,0,0,0.2);
}
.hero-sub{ color:rgba(255,255,255,0.88); font-size:16px; margin:16px auto 0; max-width:440px; line-height:1.6; font-weight:500; }
.hero-actions{ display:flex; justify-content:center; gap:12px; margin-top:28px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:15px 28px; border-radius:var(--radius-pill);
  font-family:var(--f-display); font-size:14px; text-transform:uppercase; letter-spacing:0.04em;
  text-decoration:none; font-weight:600; border:2px solid transparent; cursor:pointer;
  transition:transform .14s ease, background-color .15s, border-color .15s, box-shadow .15s;
}
.btn:active{ transform:translateY(0) scale(0.98); }
.btn-primary{ background-color:var(--white); color:var(--red); box-shadow:0 10px 22px rgba(0,0,0,0.16); }
.btn-ghost-dark{ border-color:rgba(255,255,255,0.65); color:var(--white); }

/* ==================== NAV — pastilles, com els tabs de la FCF ==================== */
.tab-nav{
  background-color:rgba(255,255,255,0.96);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.sticky-top-bars{
  position: sticky;
  top: 0;
  z-index: 50;
}

.tab-nav-scroll{
  display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  gap:10px; padding:16px 20px; margin:0 -20px;
  justify-content:safe center;
  scroll-snap-type: x mandatory;
}
.tab-nav-scroll::-webkit-scrollbar{ display:none; }
/* Sis pastilles totes amb contorn vermell competien entre elles i la
   pestanya activa amb prou feines destacava. Ara les inactives són
   neutres i el vermell queda reservat a l'activa — el mateix criteri
   que ja feies servir a la versió de mòbil. */
.tab-btn{
  flex-shrink:0; display:flex; align-items:center; gap:8px; padding:12px 20px; font-size:13.5px;
  text-transform:uppercase; letter-spacing:0.04em; font-weight:700; color:var(--ink-soft);
  background-color:transparent; border:2px solid transparent; border-radius:10px;
  cursor:pointer; white-space:nowrap; outline:none;
  transition:background-color .15s, color .15s, border-color .15s, transform .12s, box-shadow .15s;
  scroll-snap-align: start;
}
.tab-btn svg{ color:var(--linem); transition:color .15s; }
.tab-btn.is-active{
  background-color:var(--red); color:var(--white); border-color:var(--red);
  box-shadow:0 8px 18px rgba(226,0,26,0.28);
}
.tab-btn.is-active svg{ color:var(--white); }

/* ==================== MAIN / SECTION HEAD ==================== */
.main{ padding:0 0 52px; flex:1; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:10px; }
.section-title{ position:relative; text-transform:uppercase; letter-spacing:0.01em; font-size:30px; font-weight:700; color:var(--ink); margin:0; margin-top: 10px; padding-bottom:14px; }
.section-title::after{ content:""; position:absolute; left:0; bottom:0; width:52px; height:4px; border-radius:3px; background-color:var(--red); }
.section-sub{ font-size:15px; color:var(--muted); margin:6px 0 0; font-weight:500; }
.fcf-link{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--red);
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:0.04em; text-decoration:none;
  transition:color .15s;
}

/* ==================== STATUS BANNER ==================== */
.status-banner{
  display:flex; align-items:center; gap:8px; padding:12px 18px; margin-bottom:20px;
  border-radius:var(--radius-sm); border:1.5px solid var(--line); font-size:14px; font-family:var(--f-body);
  font-weight:600; flex-wrap:wrap; background-color:var(--white);
}
.status-banner.is-loading{ color:var(--muted); margin-top: 10px; }
.status-banner.is-ok{ border-color:rgba(30,138,84,0.3); background-color:var(--green-tinto); color:var(--green); }
.status-banner.is-err{ border-color:rgba(226,0,26,0.3); background-color:var(--red-tint); color:var(--red-dark); }
.status-banner .spin{ animation:spin 1s linear infinite; }
.retry-btn{
  display:inline-flex; align-items:center; gap:5px; font-weight:700; cursor:pointer; background:none;
  border:none; color:var(--red); font-size:13px; font-family:var(--f-body); padding:0; text-decoration:underline;
}

/* ==================== EMPTY STATE ==================== */
.empty-state{ text-align:center; padding:60px 16px; color:var(--muted); }
.empty-state p{ margin-top:14px; font-size:15px; font-family:var(--f-body); font-weight:500; }

/* ==================== ESCUTS ==================== */
.crest-box{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.crest-box .crest{ width:100%; height:100%; object-fit:contain; display:block; }
.crest-box.is-fallback .crest{ transform:scale(3.50); }
.crest{ display:block; object-fit:contain; flex-shrink:0; filter:drop-shadow(0 1px 2px rgba(20,16,15,0.12)); }
.crest-wrap{ position:relative; display:inline-block; }
.crest-fallback{
  display:flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:50%;
  background-color:var(--red); color:var(--white);
  font-family:var(--f-mono); font-weight:800; letter-spacing:0.02em; line-height:1;
}
.hero-crest-bg .crest{ filter:none; }

/* ==================== PARTITS ==================== */
.jornada{ margin-bottom:0; }
.jornada-title{
  font-size:14px; text-transform:uppercase; letter-spacing:0.07em; font-weight:700; color:var(--red);
  margin:0 0 12px; display:flex; align-items:center; gap:9px;
}
.jornada-mark{ width:6px; height:18px; background-color:var(--red); border-radius:3px; display:inline-block; flex-shrink:0; }
.match-list{ display:flex; flex-direction:column; gap:14px; }

.jornada-selector{
  background-color: var(--grey-bg);
  border-bottom: 1px solid var(--line);
}
.jornada-selector-inner{
  display:flex; flex-direction:column; align-items:stretch; gap:10px;
  padding-top:16px; padding-bottom:16px;
}
.jornada-selector-label{
  flex-shrink:0; display:flex; align-items:center; justify-content:center; gap:14px;
  text-transform:uppercase; font-size:12.5px; font-weight:700; letter-spacing:0.09em;
  color:var(--muted);
}
.jornada-selector-scroll{
  flex:1; min-width:0; display:flex; align-items:center; gap:8px;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  justify-content:safe center;
  padding-top:16px;
  padding-bottom:28px;
  padding-left:22px;
  padding-right:22px;
  margin-top:-16px;
  margin-bottom:-28px;
  margin-left:-22px;
  margin-right:-22px;
}

.jornada-selector-scroll::-webkit-scrollbar{ display:none; }
.jornada-selector-spacer{ flex-shrink:0; width:24px; }
.jornada-num{
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; padding:0; margin:0;
  border-radius:10px; border:1.5px solid var(--line); background-color:var(--white);
  font-size:14px; font-weight:700; color:var(--ink-soft); cursor:pointer;
  transition:color .15s, background-color .15s, border-color .15s, transform .15s ease, box-shadow .15s;
}
.jornada-num.is-played{ background-color:var(--grey-chip); border-color:transparent; }
.jornada-num.is-active{
  background-color:var(--red); border-color:var(--red); color:var(--white);
  box-shadow:0 8px 18px rgba(226,0,26,0.32);
}

.match-row{
  display:flex; align-items:center; gap:20px; padding:22px 28px; background-color:var(--white);
  border:1.5px solid var(--line); border-radius:20px; box-shadow:var(--shadow-sm);
  flex-wrap:wrap; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.match-row.is-win{ border-color:var(--green); background-color:var(--green-tint); }
.match-row.is-draw{ border-color:var(--amber); background-color:var(--amber-tint); }
.match-row.is-loss{ border-color:var(--red-dark); background-color:var(--loss-tint); }
/* Els partits NOSTRES que encara s'han de jugar porten la vora del club.
   No es confon amb una derrota perquè el vermell és diferent (--red viu
   contra --red-dark) i el fons és gris, no rosat. */
.match-row.is-pending-ours{ border-color:var(--red); background-color:var(--grey-chip); }

.match-row.is-clickable{ cursor:pointer; }
.match-row.is-clickable:hover:not(.is-win):not(.is-draw):not(.is-loss):not(.is-pending-ours){ border-color:rgba(226,0,26,0.35); box-shadow:var(--shadow-md); transform:translateY(-1px); }

.match-row .crest-box{ width:38px !important; height:38px !important; }

.match-teams{ display:contents; }
.team-side.home{ order:1; flex:1 1 0; min-width:0; justify-content:flex-start; }
.match-score{ order:2; }
.team-side.away{ order:3; flex:1 1 0; min-width:0; justify-content:flex-end; }
.match-meta{ order:4; }

.match-score{
  font-family:var(--f-mono); font-weight:700; font-size:18.5px; letter-spacing:0.02em;
  /* Amplada FIXA. Abans el marcador s'eixamplava amb el resultat: el
     guio d'un partit per jugar feia una pastilla petita i un "10 - 12"
     en feia una de llarga, i a la llista quedaven totes desiguales. La
     mida es la del cas mes ample (dues xifres a cada banda), o sigui
     que ja no es mou mai. */
  width:104px; padding:11px 0; flex-shrink:0; text-align:center;
  color:var(--ink-soft); background-color:var(--grey-chip);
  display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-pill);
  border:1px solid var(--linem);
  cursor:pointer;
}
.match-score.is-pending{ color:var(--muted); }
.match-score.result-win{ background-color:var(--green-tint); color:var(--green); border-color:var(--green); }
.match-score.result-draw{ background-color:var(--amber-tint); color:var(--amber-dark); border-color:var(--amber); }
.match-score.result-loss{ background-color:var(--loss-tint); color:var(--red-dark); border-color:var(--red-dark); }

.team-side{ display:flex; align-items:center; gap:12px; }
.team-side.away{ flex-direction:row-reverse; text-align:right; }
.team-name{ font-family:var(--f-display); font-size:18px; font-weight:300; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.team-name.is-ours{ font-weight:600; color:var(--red); }
.match-row.is-win .team-name.is-ours{ color:var(--green); }
.match-row.is-draw .team-name.is-ours{ color:var(--amber-dark); }
.match-row.is-loss .team-name.is-ours{ color:var(--red-dark); }
.match-meta{
  order:4;
  font-family:var(--f-body);
  font-size:12.5px;
  color:var(--muted);
  flex-shrink:0;
  text-align:left;
  width:180px;
  font-weight:600;
  /* En columna: amb el partit en joc hi ha tres coses (l'etiqueta, l'hora
     i el camp) i en linia no hi caben als 180px. */
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
/* I que cap dels tres se surti dels 180px. Sense aixo, els noms de camp
   llargs ("CAMP DE FUTBOL MPAL. DE SANT JOAN LES FONTS") es menjaven el
   marge de la targeta: dins d'un flex, els fills no s'encongeixen per sota
   del seu contingut si no se'ls hi diu. */
.match-meta > *{ max-width:100%; min-width:0; }
.match-venue{ max-width:100%; min-width:0; }
.match-venue span{ min-width:0; }
.match-meta-inner{ display:flex; align-items:center; gap:4px; }
/* L'etiqueta "En joc" i l'hora, de costat. Amb l'hora sola (sense el dia)
   hi caben totes dues als 180px i la targeta no creix gens. */
.match-meta-live{ gap:8px; }
.match-venue{ display:flex; align-items:center; gap:5px; font-size:11px; color:var(--red); font-weight:700; margin-top:4px; text-decoration:none; }
.match-venue span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.match-meta.is-pending{ color:var(--muted); }

/* ==================== CLASSIFICACIO ==================== */
.table-wrap{ overflow-x:auto; overflow-y:hidden; border-radius:var(--radius); border:1.5px solid #8f8f9270; box-shadow:var(--shadow-sm); }  
table.data-table{ width:100%; border-collapse:collapse; }
.data-table tbody tr.zebra{ background-color:rgba(255,255,255); }
.data-table thead tr{ background-color:var(--grey-bg); }
.data-table th{
  font-family:var(--f-display); text-transform:uppercase; font-size:11.5px; letter-spacing:0.05em;
  color:var(--ink-soft); padding:14px 8px; text-align:center; font-weight:600; white-space:nowrap;
  border-bottom:2px solid var(--line);
}
.data-table th.al-left{ text-align:left; padding-left:16px; }
.data-table td{ font-family:var(--f-display); font-size:18px; font-weight:200; padding:12px 8px; text-align:center; color:var(--ink); border-bottom:1px solid var(--line); }
.data-table td.al-left{ text-align:left; padding-left:16px; }
.data-table tbody tr:last-child td:not(.pts-cell){ border-bottom:none; }
.data-table tbody tr.is-ours{ background-color:var(--red-tint); }
.data-table tbody tr.promo td:first-child{ box-shadow:inset 3px 0 0 var(--green); }
.data-table tbody tr.relega td:first-child{ box-shadow:inset 3px 0 0 var(--red); }
/* La promocio d'ascens: ni puja segur ni baixa, per aixo va en ambre. */
.data-table tbody tr.promocio td:first-child{ box-shadow:inset 3px 0 0 var(--amber); }
.pos-cell{ font-weight:600; font-size:15px; }
.pos-cell.is-ours{ font-weight:800; color:var(--red); }
.team-cell{ display:flex; align-items:center; gap:10px; }
.team-cell .team-name{ min-width:0; }
.data-table td.pts-cell{
  font-size:18px; font-weight:400; color:var(--ink);
}

.sanc-cell{ align-items:center; justify-content:center; }
.sanc-dot{
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:50%; background-color:var(--red-tint); color:var(--red-dark); font-size:11px; font-weight:800;
}

.form-dots{ display:flex; gap:5px; justify-content:center; }
.form-dot{
  width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:10px; font-weight:800; color:var(--white);
  background-color:var(--grey-chip); border:none; padding:0; cursor:pointer; flex-shrink:0;
}
.form-dot.empty{ background-color:var(--grey-chipo); cursor:default; }
.form-dot.w{ background-color:var(--green); }
.form-dot.d{ background-color:var(--amber); }
.form-dot.l{ background-color:var(--red); }
.form-popup{
  position:fixed; z-index:80; background-color:var(--white); border:1.5px solid var(--line);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-md); padding:14px 16px; width:220px;
  pointer-events:auto;
}
.form-popup::after{
  content:"";
  position:absolute; bottom:-7px; left:50%;
  width:12px; height:12px; background-color:var(--white);
  border-right:1.5px solid var(--line); border-bottom:1.5px solid var(--line);
  transform:translateX(-50%) rotate(45deg);
}
.form-popup-name{
  font-size:10px; color:var(--ink-soft); text-align:center; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:80px;
}
.form-popup-link{
  text-decoration:none; color:inherit; display:block; width:100%;
  background:none; border:none; padding:0; margin:0; font:inherit; text-align:inherit; cursor:pointer;
}
/* Partits sense codi d'acta (amistosos): el globus s'ensenya igual
   pero no es pot clicar, perque no hi ha cap acta on anar. */
.form-popup-link.is-disabled{ cursor:default; }
.form-popup-teams{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
.form-popup-team{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; min-width:0; }
.form-popup-score{ font-family:var(--f-display); font-weight:800; font-size:16px; color:var(--ink); flex-shrink:0; }
.form-popup-date{ display:block; text-align:center; font-size:11px; color:var(--muted); margin-top:10px; font-weight:600; }

.legend{ display:flex; flex-wrap:wrap; gap:22px; margin-top:16px; font-size:13px; font-weight:600; font-family:var(--f-display); color:var(--muted); }
.legend-item{ display:flex; align-items:center; gap:7px; }
.legend-swatch{ width:14px; height:14px; border-radius:3px; display:inline-block; }
.legend-swatch.promo{ background-color:var(--green); }
.legend-swatch.promocio{ background-color:var(--amber); }
.legend-swatch.relega{ background-color:var(--red); }
.legend-swatch.ours{ background-color:var(--red-tint); border:2px solid var(--red); }

/* ==================== GOLEJADORS ==================== */
.scorer-row{
  display:flex; align-items:center; gap:14px; padding:15px 18px; background-color:var(--white);
  border:1.5px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); margin-bottom:9px;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.scorer-row.is-ours{ border-color:var(--red); background-color:var(--red-tint); }
.scorer-pos{ font-family:var(--f-display); font-weight:800; font-size:19px; width:30px; text-align:center; color:var(--muted); flex-shrink:0; }
.scorer-row:nth-of-type(1) .scorer-pos.podium{ color:#C9971F; }
.scorer-row:nth-of-type(2) .scorer-pos.podium{ color:#9A9DA3; }
.scorer-row:nth-of-type(3) .scorer-pos.podium{ color:#B0692F; }
.scorer-info{ flex:1; min-width:0; }
.scorer-name{ font-family:var(--f-display); font-size:16px; font-weight:500; color:var(--ink); margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scorer-name.is-ours{ font-weight:700; color:var(--red); }
.scorer-team{ font-family:var(--f-body); font-size:12.5px; margin:3px 0 0; font-weight:500; }
.scorer-stat{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.scorer-bar{ width:var(--w,24px); height:8px; background-color:var(--red); border-radius:4px; opacity:0.85; }
.scorer-goals{ font-family:var(--f-display); font-weight:800; font-size:19px; color:var(--ink); width:30px; text-align:right; }
.penals-cell{ display:none; }
.pts-cell .gols-value{ display:inline-flex; align-items:center; gap:6px; }
/* La pilota quedava una mica alta respecte del numero: el centre optic
   d'una xifra no es el mateix que el d'una circumferencia. Dos pixels
   avall i ja seuen a la mateixa linia. */
.pts-cell .gols-value svg{ position:relative; top:2px; }

/* ==================== SANCIONS ==================== */
.sanc-list{ display:none; flex-direction:column; gap:14px; }
.sanc-row{
  background-color:var(--white); border:1.5px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow-sm); padding:22px 28px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.sanc-row.is-ours{ border-color:var(--red); background-color:var(--red-tint); }

.sanc-row-top{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.sanc-row .crest-box{ width:34px !important; height:34px !important; flex-shrink:0; }
.sanc-row-who{ display:flex; flex-direction:column; gap:2px; flex:1 1 200px; min-width:0; }
.sanc-equip-tag{ font-style:italic; font-size:12px; color:var(--red); font-weight:600; }

.sanc-row-stats{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.sanc-stat{ display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.sanc-stat-label{
  font-family:var(--f-body); font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--muted);
}
.sanc-stat-value{ font-family:var(--f-mono); font-weight:700; font-size:15px; color:var(--ink); }

.sanc-partits{ display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono); font-weight:700; font-size:15px; }
.sanc-cards{ display:inline-flex; align-items:center; position:relative; width:24px; height:20px; }
.sanc-card{
  position:absolute; top:50%; width:17px; height:24px; border-radius:3px;
  box-shadow:0 1px 3px rgba(0,0,0,0.28);
}
.sanc-card--yellow{
  background:linear-gradient(160deg, #FFD75E 0%, #F2BD31 100%);
  left:0; z-index:1; transform:translateY(-50%) rotate(-10deg);
}
.sanc-card--red{
  background:linear-gradient(160deg, #FF5A5F 0%, var(--red) 100%);
  left:8px; z-index:2; transform:translateY(-50%) rotate(9deg);
}

.sanc-row-motiu{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.sanc-motiu-label{
  display:block; font-family:var(--f-body); font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--muted); margin-bottom:6px;
}
.sanc-motiu-text{ margin:0; font-family:var(--f-body); font-size:13px; color:var(--ink-soft); font-weight:500; line-height:1.5; }
.sanc-nom-wrap{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.data-table td.sanc-motiu-cell{ 
    font-family: var(--f-body);
    font-size: 15px;
    color: var(--ink-soft);
	max-width:340px;
    font-weight: 500;
    line-height: 1.5;
	}
.sanc-table-wrap{ display:block; }

@media (max-width:640px){
  .sanc-row{ padding:18px 20px; }
  .sanc-row-top{ align-items:flex-start; }
  .sanc-row-stats{ width:100%; justify-content:space-between; padding-top:12px; border-top:1px solid var(--line); margin-top:4px; gap:8px; }
  .sanc-table-wrap{ display:none; }
.sanc-list{ display:flex; }
}

/* ==================== NOTICIES / INSTAGRAM ==================== */
.ig-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.ig-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.ig-card{
  border-radius:var(--radius); overflow:hidden; background-color:var(--white); border:1.5px solid var(--line); box-shadow:var(--shadow-sm);
  text-decoration:none; display:block; transition:box-shadow .2s, transform .2s, border-color .2s;
}
.ig-thumb{ width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.ig-thumb-fallback{ aspect-ratio:1; background-color:var(--red-tint); display:flex; align-items:center; justify-content:center; }
.ig-thumb-fallback-icon{ background-color:var(--red); border-radius:50%; padding:12px; display:flex; align-items:center; justify-content:center; color:var(--white); }
.ig-body{ padding:14px 16px; }
.ig-title{ font-size:13px; color:var(--ink-soft); margin:0 0 5px; line-height:1.55; font-weight:500; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ig-author{ font-size:11px; color:var(--muted); margin:0; font-weight:600; }
.ig-skel-card{ border-radius:var(--radius); overflow:hidden; background-color:var(--white); border:1.5px solid var(--line); }
.ig-skel-thumb{ aspect-ratio:1; background-color:var(--grey-chip); animation:pulse 1.5s ease-in-out infinite alternate; }
.ig-skel-body{ padding:16px; }
.ig-skel-line{ height:13px; width:70%; background-color:var(--grey-chip); border-radius:4px; margin-bottom:9px; }
.ig-skel-line.short{ height:11px; width:50%; margin-bottom:0; }
.ig-empty{ text-align:center; padding:48px 20px; }
.ig-empty p{ font-family:var(--f-body); }
.ig-empty .lead{ color:var(--muted); font-size:15px; font-weight:600; margin-top:14px; margin-bottom:9px; }
.ig-empty .hint{ color:#A3A3A8; font-size:13px; max-width:400px; margin:0 auto 22px; line-height:1.55; }
.ig-embed-grid{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:16px; overflow-x:hidden; }
.ig-embed-card{ flex:1 1 300px; max-width:340px; display:flex; justify-content:center; overflow:hidden; border-radius:var(--radius); border:1.5px solid var(--line); box-shadow:var(--shadow-sm); }
.ig-embed-card,
.ig-embed-card > *,
.ig-embed-card iframe{
  min-width:0 !important;
  width:100% !important;
  max-width:100% !important;
  min-height: 650px;
}

/* ==================== FOOTER ==================== */
.site-footer{ background-color:var(--ink); }
/* COMPTE: aquest element porta les DUES classes, "container footer-inner".
   Amb "padding:36px 0" s'esborraven els 24px laterals que posa .container
   i el footer quedava enganxat a la vora en pantalles estretes. Tocant
   nomes a dalt i a baix, els laterals del contenidor es queden. */
.footer-inner{ padding-top:36px; padding-bottom:36px; }
/* Amb flex + space-between i marges laterals propis, a amplades
   intermèdies les tres columnes quedaven desiguals. Amb graella es
   comporten igual sempre i no cal tocar els marges del contenidor. */
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:30px 40px;
  align-items:start;
}

.footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.footer-brand p{ color:var(--white); font-size:16px; text-transform:uppercase; margin:0; letter-spacing:0.03em; font-family:var(--f-display); font-weight:700; }
.footer-desc{ color:rgba(255,255,255,0.45); font-size:13px; margin:0; line-height:1.6; font-family:var(--f-body); font-weight:500; }
/* Abans anaven subratllats i semblaven enllaços sense ser-ho. Ara
   porten un filet vermell curt a sota, com els títols de secció. */
.footer-heading{
  position:relative; color:var(--white); font-size:12.5px; text-transform:uppercase;
  letter-spacing:0.07em; margin:0 0 16px; padding-bottom:9px;
  font-family:var(--f-display); font-weight:700;
}
.footer-heading::after{
  content:""; position:absolute; left:0; bottom:0;
  width:26px; height:3px; border-radius:2px; background-color:var(--red);
}
.footer-list{ font-size:13px; color:rgba(255,255,255,0.5); display:flex; flex-direction:column; gap:8px; font-family:var(--f-body); font-weight:500; }
.footer-link{ color:rgba(255,255,255,0.5); text-decoration:none; display:flex; align-items:center; gap:6px; transition:color .15s; }
.footer-bottom{ margin-top:28px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.08); text-align:center; }
.footer-bottom p{ color:rgba(255,255,255,0.34); font-size:13px; margin:0; font-family:var(--f-body); font-weight:500; }
.footer-bottom a{ color:rgba(255,255,255,0.55); text-decoration:none; }


/* ==================== RESPONSIVE ==================== */
@media (max-width:640px){
  .section-title{ font-size:25px; }
  .data-table th, .data-table td{ padding:10px 5px; font-size:12.5px; }
  .btn{ padding:14px 22px; font-size:13px; }
  

  .match-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  grid-template-areas:
    "homecrest chip awayname"
    "homename chip awaycrest"
    "meta meta meta";
  row-gap:10px; column-gap:10px;
  padding:18px 20px 16px;
}
  .match-row .crest-box{ width:32px !important; height:32px !important; }
  .team-name{ font-size:16px; }

  .team-side.home,
  .team-side.away{ display:contents; }
  .team-side.home .crest-box{ grid-area:homecrest; justify-self:start; }
  .team-side.away .crest-box{ grid-area:awaycrest; justify-self:end; }
  .match-row .team-name{
  text-transform:uppercase; font-weight: 10;  font-size:12px; letter-spacing:0.01em;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.25;
  overflow-wrap:anywhere;
}
  .team-side.home .team-name{ grid-area:homename; text-align:left; }
  .team-side.away .team-name{ grid-area:awayname; text-align:right; }

  /* Al mobil, just el que demana el cas mes ample ("10 - 12" fa 49px a
     aquesta mida) mes un dit de marge a cada banda. Abans era el doble i
     per un 2-1 quedava una pastilla enorme. */
  .match-score{ grid-area:chip; justify-self:center; width:76px; padding:9px 0; font-size:14px; }

  .match-meta{
    grid-area:meta; width:auto; text-align:center; margin-top:10px;
    padding-top:12px; border-top: 1px solid #8a7b7d6b;;
    display:flex; flex-direction:column; align-items:center; gap:8px;
  }
  .match-meta-inner{ justify-content:center; }
  .match-venue{ justify-content:center; }
  .match-venue span{ max-width:76vw; }

  .jornada-num{ width:36px; height:36px; font-size:12.5px; }
  .jornada-selector-inner{ gap:12px; }
  .jornada-selector-scroll{ gap:7px; }
  .jornada-selector-label{ font-size:11px; gap:10px; }

  .footer-grid{ display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 20px; text-align:center; }
  .footer-grid > div{ padding:0; border-top:none; }
  .footer-brand{ justify-content:center; width:100%; margin-bottom:2px; }
  .footer-desc{ display:none; }
  .footer-heading{ display:none; }
  .footer-list{ flex-direction:row; gap:16px; align-items:center; }
  .footer-text{ display:none; }
  .footer-link-fcf{ display:none; }
  .footer-bottom{ margin-top:14px; padding-top:14px; }

  .hero{ display:none; }
}

/* ==================== SELECTOR D'EQUIP ====================
   Un sol botó que obre un desplegable; el toggle Futbol 11/7 (quan n'hi
   ha més d'una disciplina) viu ARA dins del mateix desplegable, a sobre
   de la llista d'equips — així la llista mai és llarga: només es veuen
   els equips de la disciplina triada. */
.team-switcher{
  background-color:var(--paper);
  border-bottom:1px solid var(--line);
}
.team-switcher-inner{
  padding-top:14px; padding-bottom:14px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.disc-toggle{
  flex-shrink:0; display:inline-flex; gap:2px; padding:3px;
  background-color:var(--grey-chip); border-radius:var(--radius-pill);
}
.disc-toggle-btn{
  border:none; cursor:pointer; background:none; color:var(--ink-soft);
  font-size:12px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase;
  padding:8px 16px; border-radius:var(--radius-pill); transition:background-color .15s, color .15s;
}
.disc-toggle-btn.is-active{ background-color:var(--white); color:var(--red); box-shadow:var(--shadow-sm); }

.equip-dropdown{ position:relative; }
.equip-dropdown-btn{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-width:200px; padding:10px 16px; font-size:13.5px; font-weight:700; color:var(--ink);
  background-color:var(--white); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  cursor:pointer; transition:border-color .15s;
}
.equip-dropdown-btn[aria-expanded="true"]{ border-color:var(--red); }
.equip-dropdown-btn-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.equip-dropdown-btn .crest-wrap{ display:inline-block; flex-shrink:0; }
.equip-dropdown-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.equip-dropdown-menu{
  position:absolute; z-index:60; top:calc(100% + 6px); left:0; min-width:100%;
  max-height:500px; overflow-y:auto; background-color:var(--white);
  border:1.5px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-md);
  padding:6px;
}
.equip-dropdown-item{
  display:block; width:100%; text-align:left; white-space:nowrap;
  padding:9px 12px; font-size:13px; font-weight:600; color:var(--ink-soft);
  background:none; border:none; border-radius:8px; cursor:pointer;
  transition:background-color .15s, color .15s;
}
.equip-dropdown-item.is-active{ background-color:var(--red-tint); color:var(--red); }

/* Cada equip del desplegable, amb la seva campana a la dreta. El nom
   ocupa tot el que pot i la campana es queda enganxada al canto. */
.equip-dropdown-fila{ display:flex; align-items:center; gap:4px; }
.equip-dropdown-fila .equip-dropdown-item{ flex:1; min-width:0; }

.equip-dropdown-campana{ display:inline-flex; flex-shrink:0; }
.campana-equip{
  width:28px; height:28px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--red); background:transparent; color:var(--red);
  cursor:pointer; padding:0;
  transition:border-color .15s, color .15s, background-color .15s;
}
.campana-equip:hover{ background-color:var(--red-tint); }
.campana-equip[data-actiu="1"]{ border-color:#1E7F45; color:#1E7F45; }
.campana-equip[data-actiu="1"]:hover{ background-color:#E7F5EC; }
.campana-equip[disabled]{ border-color:var(--line); color:var(--muted); cursor:default; }
.disc-toggle-menu{ margin-bottom:8px; }

@media (max-width:640px){
  .team-switcher{ border-bottom:none; }
  .team-switcher-inner{ padding:0; }
  .equip-dropdown{
    position: fixed;
    bottom: calc(var(--tabnav-h) + 16px);
    right: 16px;
    z-index: 65;
  }
  .equip-dropdown-btn{
    width: 68px;
    height: 68px;
    min-width: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    justify-content: center;
    background-color: transparent;
    box-shadow: none;
  }
  .equip-dropdown-btn .crest-wrap{ display:inline-block !important; width:60px !important; height:63px !important; }
  .equip-dropdown-btn .crest-wrap .crest{ width:100%; height:100%; }
  .equip-dropdown-label{ display:none; }
  .equip-dropdown-btn .cal-chev{ display:none; }
  .equip-dropdown-menu{
    top: auto;
    bottom: calc(100% + 10px);
    right: 0;
    left: auto;
    min-width: 220px;
  }
  .disc-toggle-menu{ width:100%; justify-content:center; }
}

/* ==================== CALENDARI (dues voltes) ==================== */
.cal-cols{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
@media (max-width:760px){ .cal-cols{ grid-template-columns:1fr; } }
.cal-col{ border-radius:var(--radius); overflow:hidden; border:1.5px solid var(--line); background-color:var(--white); box-shadow:var(--shadow-sm); }
.cal-col-head{ background-color:var(--ink); color:var(--white); padding:13px 18px; font-size:13px; letter-spacing:0.04em; text-transform:uppercase; }
.cal-jornades{ display:flex; flex-direction:column; }
.cal-jornada{ border-top:1px solid var(--line); }
.cal-jornada:first-child{ border-top:none; }
.cal-jornada-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 18px; background:none; border:none; cursor:pointer; font-size:13px; letter-spacing:0.02em;
  text-transform:uppercase; color:var(--ink); text-align:left; transition:background-color .15s;
}
.cal-jornada-right{ display:flex; align-items:center; gap:10px; color:var(--muted); flex-shrink:0; }
.cal-jornada-data{ font-size:11.5px; }
.cal-chev{ transition:transform .18s; }
.cal-chev.is-open{ transform:rotate(180deg); }
.cal-jornada-body{ background-color:var(--grey-bg); padding:4px 0; }
.cal-partit{
  display:flex; align-items:center; gap:10px; padding:10px 18px;
  border-top:1px solid var(--line); flex-wrap:wrap;
}
.cal-partit:first-child{ border-top:none; }
.cal-partit.is-ours{ background-color:var(--red-tint); }
.cal-partit-equip{ display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 160px; }
.cal-nom{ font-size:12.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-nom.is-ours{ color:var(--red); font-weight:600; }

/* ==================== HOVER (nomes ratoli) ==================== */
@media (hover:hover) and (pointer:fine){
  .icon-btn:hover{ border-color:var(--red); color:var(--red); background-color:var(--red-tint); }
  .icon-btn.is-active{ border-color:var(--red); color:var(--red); background-color:var(--red-tint); }
  .fcf-pill:hover{ background-color:var(--red-dark); border-color:var(--red-dark); transform:translateY(-1px); }
  .btn:hover{ transform:translateY(-2px); }
  .btn-primary:hover{ background-color:var(--red-tint); }
  .btn-ghost-dark:hover{ border-color:var(--white); background-color:rgba(255,255,255,0.12); }
  .tab-btn:hover:not(.is-active){ background-color:var(--red-tint); color:var(--red); transform:translateY(-1px); }
  .tab-btn:hover:not(.is-active) svg{ color:var(--red); }
  .fcf-link:hover{ color:var(--red-dark); }
  /* El ":not(.is-active)" es important: la jornada que estas mirant va
     en vermell ple, i sense aixo el fons rosa del hover se li menjava
     el vermell just quan hi passaves per sobre. Mateix truc que ja fem
     amb .tab-btn aqui dalt. */
  .jornada-num:hover:not(.is-active){ border-color:var(--red); color:var(--red); transform:translateY(-3px); background-color: #fceaec; }
  .jornada-num.is-active:hover{ transform:translateY(-3px); }
  .match-venue:hover{ color:var(--red-dark); }
  .scorer-row:hover:not(.is-ours){ border-color:rgba(226,0,26,0.35); box-shadow:var(--shadow-md); transform:translateY(-1px); }
  .ig-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:rgba(226,0,26,0.3); }
  .footer-link:hover{ color:var(--red); }
  .equip-dropdown-btn:hover{ border-color:var(--red); }
  .equip-dropdown-item:hover:not(.is-active){ background-color:var(--grey-bg); }
  .cal-jornada-head:hover{ background-color:var(--grey-bg); }
  .data-table tbody tr:hover:not(.is-ours){ background-color:rgba(0,0,0,0.025); }
}

.mobile-title-bar{ display:none; }

@media (max-width:640px){
  .tab-nav{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    border-bottom: none;
    border-top: 1px solid var(--line);
  }
  .tab-nav .container{
    padding-left: 0;
    padding-right: 0;
    max-width: none;
  }
  
  .tab-nav-scroll{
    overflow-x: auto;
    justify-content: flex-start;
    gap: 1px;
    padding: 8px 1px;
    margin: 0;
  }
  .tab-btn{
    flex-direction: column;
    gap: 3px;
    padding: 8px 14px;
    border: none;
    background: none;
    color: var(--ink-soft);
    font-size: 11px;
    border-radius: 10px;
    min-width: 64px;
	        max-width: 94px;
  }
  .tab-btn.is-active{
    background: var(--red-tint);
    color: var(--red);
    box-shadow: none;
  }
  .tab-btn.is-active svg{ 
    color:var(--red); 
  }
  .mobile-title-bar{
    /* La campana va a la dreta pero FORA del flux: amb una graella, el
       titol es quedava sense amplada i es partia en tres linies. Aixi
       conserva tota l'amplada i nomes se li deixa marge als dos costats
       perque segueixi centrat i no li passi per sota. */
    position:relative;
    display:block;
    text-align:center;
    padding:12px 58px 4px;
    background-color:var(--white);
  }
  .mobile-title-bar .avisos-lloc{ position:absolute; right:14px; top:6px; }
  .mobile-title-text{
    margin:0;
    font-size:15px;
    font-weight:600;
    color:var(--ink);
    text-transform:uppercase;
    letter-spacing:0.03em;
  }
  .header-links{ display:none; }
  .status-banner.is-ok{ display:none; }
  .match-score, .cal-jornada-data, .data-table td, .scorer-pos, .scorer-goals{
    font-family: var(--f-body);
  }
  .footer-inner{ display:none; }
  .site-footer{ background-color:transparent; padding-bottom: var(--tabnav-h); }
}

.jornada-selector-header{ display:flex; align-items:center; justify-content:center; gap:6px; }
.jornada-nav-btn{ background:none; border:none; padding:8px; cursor:pointer; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.jornada-nav-btn:disabled{ opacity:0.3; cursor:default; }
.jornada-nav-icon-prev{ transform: rotate(90deg); }
.jornada-nav-icon-next{ transform: rotate(-90deg); }

.dia-selector{
  background-color: var(--grey-bg);
  border-bottom: 1px solid var(--line);
}
.dia-selector-inner{
  display:flex; flex-direction:column; align-items:stretch; gap:10px;
  padding-top:16px; padding-bottom:16px;
}
.dia-selector-inner{ padding-left: 8px; padding-right: 8px; }
.dia-selector-mesany{
  font-family: var(--f-display); text-transform:uppercase; font-size:12.5px; font-weight:700;
  letter-spacing:0.09em; color:var(--muted); flex-shrink:0;
}
.dia-selector-dies{
  display:flex; gap:6px; justify-content:safe center;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding-top:12px; padding-bottom:20px;
  margin-top:-12px; margin-bottom:-20px;
}
.dia-selector-dies::-webkit-scrollbar{ display:none; }

.dia-pill{
  flex-shrink:0; width:42px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:8px 2px; border-radius:14px; border:1.5px solid var(--line); background-color:var(--white);
  cursor:pointer; transition:background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}

.tab-nav-divider{ display:none; }
.equip-dropdown--nav{ display:none; }

@media (min-width:641px){
  .team-switcher{ display:none; }
  .tab-nav .container{ display:flex; align-items:center; gap:14px; }
  .tab-nav-scroll{ margin:0; padding:16px 0; flex:1; min-width:0; }
  .tab-nav-divider{
    display:block; width:1px; align-self:stretch; margin:12px 0;
    background-color:var(--line); flex-shrink:0;
  }
  .equip-dropdown--nav{ display:flex; }
}



.dia-num{ font-family:var(--f-mono); font-size:17px; font-weight:700; color:var(--ink); line-height:1; }
.dia-dow{ font-size:10.5px; color:var(--muted); text-transform:uppercase; font-weight:600; }
.dia-pill.is-active{ background-color:var(--red); border-color:var(--red); box-shadow:0 8px 18px rgba(226,0,26,0.32); }
.dia-pill.is-active .dia-num{ color:var(--white); }
.dia-pill.is-active .dia-dow{ color:rgba(255,255,255,0.85); }
.dia-dot{ width:5px; height:5px; border-radius:50%; background-color:transparent; }
.dia-dot.is-on{ background-color:var(--red); }
.dia-pill.is-active .dia-dot.is-on{ background-color:var(--white); }

.cal-comp-group{ margin-bottom:24px; }
.cal-comp-group:last-child{ margin-bottom:0; }
.cal-comp-heading{
  font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--muted); margin:0 0 10px;
}
@media (min-width:641px){
  .dia-pill{ width:56px; padding:12px 4px; }
  .dia-num{ font-size:20px; }
  .dia-dow{ font-size:11.5px; }
}
/* ==================== CLASSIFICACIÓ MÒBIL — targetes ==================== */
@media (max-width:640px){
  .table-wrap:has(.data-table--clas){ border:none; box-shadow:none; overflow:visible; }
  .data-table--clas{ display:block; min-width:0 !important; }
  .data-table--clas thead{ display:none; }
  .data-table--clas tbody{ display:block; }

  .data-table--clas tbody tr{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    column-gap:8px; row-gap:14px;
    background-color:var(--white);
    border:1.5px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    padding:18px 16px;
    margin-bottom:12px;
  }
  .data-table--clas tbody tr.is-ours{ border-color:var(--red); }
  .data-table--clas td{ border-bottom:none; padding:0; }

  /* fila 1: posició · escut+nom · punts */
  .data-table--clas td.pos-cell{ grid-column:1/2; grid-row:1; align-self:center; font-size:22px; }
  .data-table--clas td.al-left{ grid-column:2/5; grid-row:1; align-self:center; padding-left:0 !important; }
  .data-table--clas td.al-left .team-name{ font-size:15px; }

  .data-table--clas td.pts-cell{
    grid-column:5/7; grid-row:1;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    background-color:var(--grey-chip); border-radius:var(--radius-sm); padding:8px 4px;
    font-size:18px;
	font-weight: 700;
	border: 1px solid var(--red);
  }
  .data-table--clas td.pts-cell::before{
    content:"Punts";
    font-family:var(--f-body); font-size:10px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.06em; color:var(--muted);
  }

  /* fila 2: PJ PG PE PP GF GC */
  .data-table--clas td:nth-child(4),
  .data-table--clas td:nth-child(5),
  .data-table--clas td:nth-child(6),
  .data-table--clas td:nth-child(7),
  .data-table--clas td:nth-child(8),
  .data-table--clas td:nth-child(9){
    grid-row:2;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    font-weight:700; font-size:14px;
  }
  .data-table--clas td:nth-child(4){ grid-column:1; }
  .data-table--clas td:nth-child(5){ grid-column:2; }
  .data-table--clas td:nth-child(6){ grid-column:3; }
  .data-table--clas td:nth-child(7){ grid-column:4; }
  .data-table--clas td:nth-child(8){ grid-column:5; }
  .data-table--clas td:nth-child(9){ grid-column:6; }
  .data-table--clas td:nth-child(4)::before{ content:"PJ"; }
  .data-table--clas td:nth-child(5)::before{ content:"PG"; }
  .data-table--clas td:nth-child(6)::before{ content:"PE"; }
  .data-table--clas td:nth-child(7)::before{ content:"PP"; }
  .data-table--clas td:nth-child(8)::before{ content:"GF"; }
  .data-table--clas td:nth-child(9)::before{ content:"GC"; }
  .data-table--clas td:nth-child(4)::before,
  .data-table--clas td:nth-child(5)::before,
  .data-table--clas td:nth-child(6)::before,
  .data-table--clas td:nth-child(7)::before,
  .data-table--clas td:nth-child(8)::before,
  .data-table--clas td:nth-child(9)::before{
    font-family:var(--f-body); font-size:10px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.04em; color:var(--muted);
  }

  /* fila 3: últims · sanció */
  .data-table--clas td:nth-child(10){
    grid-column:1/4; grid-row:3;
    display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  }
  .data-table--clas td:nth-child(10) .form-dots{ justify-content:flex-start; }
  .data-table--clas td:nth-child(10)::before{ content:"Últims"; }

  .data-table--clas td.sanc-cell{
    grid-column:4/7; grid-row:3;
    display:flex; flex-direction:column; align-items:flex-end; gap:8px;
  }
  .data-table--clas td.sanc-cell::before{ content:"Sanció"; }

  .data-table--clas td:nth-child(10)::before,
  .data-table--clas td.sanc-cell::before{
    font-family:var(--f-body); font-size:10px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.06em; color:var(--muted);
  }

   .form-popup::after{ display:none; }

  .table-wrap:has(.data-table--gols){ border:none; box-shadow:none; overflow:visible; }
  .data-table--gols{ display:block; min-width:0 !important; }
  .data-table--gols thead{ display:none; }
  .data-table--gols tbody{ display:block; }

  .data-table--gols tbody tr{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    column-gap:8px; row-gap:14px;
    background-color:var(--white);
    border:1.5px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    padding:18px 16px;
    margin-bottom:12px;
  }
  .data-table--gols tbody tr.is-ours{ border-color:var(--red); }
  .data-table--gols td{ border-bottom:none; padding:0; }

  .data-table--gols td.pos-cell{ grid-column:1/2; grid-row:1; align-self:center; font-size:20px; }
  .data-table--gols td:nth-child(2){ grid-column:2/5; grid-row:1; align-self:center; padding-left:0 !important; }
  .data-table--gols td:nth-child(2) .team-name{ font-size:15px; white-space:normal; }

  .data-table--gols td.pts-cell{
    grid-column:5/7; grid-row:1;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    background-color:var(--grey-chip); border-radius:var(--radius-sm); padding:8px 4px;
    font-size:18px;
	font-weight: 700;
	border: 1px solid var(--red);
  }
  .data-table--gols td.pts-cell::before{
    content:"Gols";
    font-family:var(--f-body); font-size:10px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.06em; color:var(--muted);
  }

  .data-table--gols td:nth-child(3){
    grid-column:1/7; grid-row:2;
    padding-top:12px !important; border-top:1px solid var(--line);
  }
  .data-table--gols td:nth-child(3) .team-cell{ gap:8px; }
  .data-table--gols td:nth-child(3) .scorer-team{ font-size:13.5px; }

  .data-table--gols td.penals-cell,
  .data-table--gols td:nth-child(5),
  .data-table--gols td:nth-child(6){
    grid-row:3;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    font-weight:700; font-size:14px;
  }
  .data-table--gols td.penals-cell{ grid-column:1/3; }
  .data-table--gols td:nth-child(5){ grid-column:3/5; }
  .data-table--gols td:nth-child(6){ grid-column:5/7; }
  .data-table--gols td.penals-cell::before{ content:"Penaltis"; }
  .data-table--gols td:nth-child(5)::before{ content:"P. jugats"; }
  .data-table--gols td:nth-child(6)::before{ content:"Mitjana"; }
  .data-table--gols td.penals-cell::before,
  .data-table--gols td:nth-child(5)::before,
  .data-table--gols td:nth-child(6)::before{
    font-family:var(--f-body); font-size:10px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.04em; color:var(--muted);
  }

}

@media (min-width:641px){
  .data-table--gols td.pts-cell .gols-num[data-penals]::after{
    content:"(" attr(data-penals) ")";
    font-size:0.99em;
    margin-left:2px;
  }
}

.loading-spinner{
  display:inline-block;
  width:42px; height:42px;
  border-radius:50%;
  border:3.5px solid var(--grey-chip);
  border-top-color:var(--red);
  animation:spin 0.85s linear infinite;
}

/* ==================== EN DIRECTE ====================
   El mateix punt que batega del hero, reaprofitat per marcar els
   partits que s'estan jugant ara mateix. */
/* ── Color del DIRECTE a les files de partit ──
   Blau a posta: dins d'una fila, el verd, l'ambre i el vermell ja volen
   dir guanyat, empatat i perdut, i el vermell a més és el color del club.
   El blau és l'únic que no xoca amb res. (L'etiqueta "En directe" de la
   capçalera sí que va en vermell: allà no compiteix amb cap resultat.) */
:root{
  --live:      #0068A9;
  --live-tint: #E7F1FA;
}
.match-live{
  display:inline-flex; align-items:center; gap:6px; padding:3px 9px 3px 7px;
  border-radius:var(--radius-pill); background-color:var(--live-tint);
  font-family:var(--f-display); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--live);
}
.match-live-dot{
  width:7px; height:7px; border-radius:50%; background-color:var(--live);
  animation:dotPulse 1.8s ease-in-out infinite; flex-shrink:0;
}
/* El directe NO pinta la vora: la vora és només per al resultat. Que
   s'està jugant ho diu l'etiqueta amb el punt que batega. */
.match-row.is-live{ box-shadow:var(--shadow-sm); }
.live-tag{
  display:inline-flex; align-items:center; gap:6px; margin-left:12px;
  padding:3px 10px 3px 8px; border-radius:var(--radius-pill);
  background-color:var(--red-tint); color:var(--red);
  font-family:var(--f-display); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.07em; vertical-align:middle;
}
/* El punt d'aquesta etiqueta va en vermell com el text: el blau és només
   per al distintiu de dins de les files de partit. */
.live-tag .match-live-dot{ background-color:var(--red); }

/* Al mobil, "En directe" va SEMPRE a la seva linia. Anava dins del
   paragraf del nom de la competicio i, quan no hi cabia, es despenjava
   tot sol i quedava lleig; aixi baixa amb intencio i amb aire. */
@media (max-width:640px){
  .section-sub .live-tag{ display:flex; width:fit-content; margin:8px 0 0; }
}
@media (prefers-reduced-motion: reduce){
  .match-live-dot{ animation:none; }
}

/* ==================== ACTA DEL PARTIT ====================
   Mateixa filosofia que la resta del web: blanc dominant, vermell només
   com a accent (marca, xip, contorn) — mai com a bloc de fons.
   L'estructura segueix la de la FCF: marcador, dades del partit, àrbitres,
   gols, llegenda i després dues columnes (local | visitant) amb alineació,
   suplents, equip tècnic i canvis. */

.acta-page{ padding-bottom:8px; }

/* ---- marcador gran ----
   El fons és un camp de futbol dibuixat amb CSS (ratlles de sega + les
   línies del camp en un SVG incrustat): no carrega cap imatge externa,
   així que no pot trigar ni fallar. El to canvia segons el resultat:
   verd si guanyem, ambre si empatem, vermell si perdem, i gris neutre
   quan el partit no és nostre. */
.acta-summary{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px;
  background-color:var(--white); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:26px 20px; box-shadow:var(--shadow-sm); margin-bottom:16px;
  /* La foto del camp. Per canviar-la només cal tocar aquesta línia:
     --acta-foto: url("img/elmeucamp.jpg");  (o none per treure-la). Si la
     imatge no hi fos, a sota hi queda el camp dibuixat amb CSS, així que
     mai es veu un forat. */
  --acta-foto: url("img/gespa.jpg");
  --gespa-a:#F3F3F6; --gespa-b:#FFFFFF; --gespa-ratlla:rgba(27,27,31,0.030);
  --acta-vel:rgba(16,22,18,0.60);
  --acta-matis:rgba(16,22,18,0.10);
  color:var(--white);
}
.acta-summary::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--acta-matis), var(--acta-matis)),
    linear-gradient(var(--acta-vel), var(--acta-vel)),
    var(--acta-foto),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 150' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%231B1B1F' stroke-width='1.6' opacity='0.085'%3E%3Crect x='5' y='5' width='390' height='140'/%3E%3Cline x1='200' y1='5' x2='200' y2='145'/%3E%3Ccircle cx='200' cy='75' r='28'/%3E%3Crect x='5' y='37' width='46' height='76'/%3E%3Crect x='349' y='37' width='46' height='76'/%3E%3Crect x='5' y='58' width='17' height='34'/%3E%3Crect x='378' y='58' width='17' height='34'/%3E%3C/g%3E%3Ccircle cx='200' cy='75' r='2.6' fill='%231B1B1F' opacity='0.085'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, var(--gespa-ratlla) 0 38px, transparent 38px 76px),
    linear-gradient(170deg, var(--gespa-a) 0%, var(--gespa-b) 72%);
  background-size:cover, cover, cover, cover, auto, auto;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
  background-position:center;
}
.acta-summary > *{ position:relative; }
/* El vel fosc es manté neutre perquè la gespa segueixi semblant gespa;
   el resultat es nota en un matís de color molt suau, la vora i el
   marcador. Amb un vel de color fort, l'empat deixava el camp caqui. */
.acta-summary.is-win{  --acta-matis:rgba(16,120,70,0.22);  --gespa-a:#DDF2E6; border-color:var(--green); }
.acta-summary.is-draw{ --acta-matis:rgba(196,140,30,0.20); --gespa-a:#FBEEDC; border-color:var(--amber); }
.acta-summary.is-loss{ --acta-matis:rgba(170,20,35,0.24);  --gespa-a:#FBE2E5; border-color:var(--red-dark); }
.acta-summary-team{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  justify-self:center; max-width:320px; min-width:0;
}
.acta-summary-team.is-ours .acta-summary-name{ color:#FFD9DD; }
.acta-escut-link{ display:inline-flex; text-decoration:none; transition:transform 0.15s ease; }
/* CREIXER AL PASSAR-HI EL RATOLI
   Va a .crest-box, que es la caixa de TOTS els escuts de la web: files
   de partits, calendari, classificacio, golejadors, sancions i acta.
   Abans l'efecte estava enganxat a l'etiqueta <a> de l'acta, i quan la
   FCF va deixar de posar l'adreca del club ens vam quedar sense.
   El z-index es perque, en creixer, l'escut passi per DAVANT del que
   tingui al costat i no quedi tallat per la fila del costat. */
.crest-box{ transition:transform 0.18s ease; }
.crest-box:hover{ transform:scale(1.3); position:relative; z-index:3; }
.acta-summary-team .crest-box:hover{ transform:scale(1.35); }

/* I les samarretes dels dorsals, igual. */
.acta-dorsal-samarreta{ transition:transform 0.18s ease; }
.acta-dorsal-samarreta:hover{ transform:scale(1.3); z-index:3; }
.acta-summary-team .crest-box, .acta-summary-team .crest-fallback{
  background-color:rgba(255,255,255,0.22); border:1px solid rgba(255,255,255,0.35);
  border-radius:50%; padding:9px; box-sizing:content-box;
  backdrop-filter:blur(3px);
}
.acta-escut-link:hover{ transform:scale(1.06); }
.acta-summary-name{
  font-family:var(--f-display); font-size:18px; font-weight:400; text-transform:uppercase;
  text-align:center; color:var(--white); line-height:1.25;
  text-shadow:0 1px 3px rgba(0,0,0,0.45);
}
.acta-summary-stats{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
/* Abans era blanc al 16%, gairebe transparent: sobre la foto del camp
   les icones de colors (sobretot la fletxa blava dels canvis) no es
   veien. Ara fan servir el mateix fons que el marcador, que ja esta a
   la mateixa capcalera i es llegeix perfectament. */
.acta-mini{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px;
  border-radius:var(--radius-pill);
  background-color:rgba(255,255,255,0.22); border:1px solid rgba(255,255,255,0.35);
  backdrop-filter:blur(3px); color:var(--white);
  font-family:var(--f-display); font-size:11px; font-weight:700;
}
/* ---- distintiu d'acta tancada ----
   Va a sobre del marcador, com a la FCF, pero amb el vermell del club.
   Nomes surt quan l'arbitre ha tancat l'acta; mentre no, no s'ensenya
   res, que ja s'enten pel marcador. */
.acta-summary-mig{
  display:flex; flex-direction:column; align-items:center; gap:8px; flex-shrink:0;
}
.acta-tancada-tag{
  display:inline-flex; align-items:center;
  padding:4px 12px; border-radius:7px;
  background-color:var(--red); color:var(--white);
  font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.06em; white-space:nowrap;
  box-shadow:0 2px 8px rgba(20,16,15,0.18);
}

.acta-summary-score{
  display:inline-flex; align-items:center; gap:8px; flex-shrink:0;
  font-family:var(--f-display); font-size:34px; font-weight:700; line-height:1;
  padding:10px 18px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  background-color:rgba(255,255,255,0.92); color:var(--ink);
  backdrop-filter:blur(2px); box-shadow:0 2px 10px rgba(20,16,15,0.07);
}
.acta-summary-dash{ opacity:0.4; font-weight:400; }
.acta-summary.is-win .acta-summary-score{ background-color:var(--green-tint); color:var(--green); border-color:var(--green); }
.acta-summary.is-draw .acta-summary-score{ background-color:var(--amber-tint); color:var(--amber-dark); border-color:var(--amber); }
.acta-summary.is-loss .acta-summary-score{ background-color:var(--loss-tint); color:var(--red-dark); border-color:var(--red-dark); }

/* ---- dades del partit ---- */
.acta-meta{
  display:flex; flex-wrap:wrap; gap:10px 22px; margin:0 0 16px; padding:12px 18px;
  background-color:var(--white); border:1.5px solid var(--red); border-radius:var(--radius-sm);
  font-size:12.5px; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.03em;
}
.acta-meta span{ display:inline-flex; align-items:center; gap:6px; font-family: var(--f-display); }
.acta-meta svg{ color:var(--red); flex-shrink:0; }

/* ---- llegenda de rols de l'equip tècnic ---- */
.acta-rols{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:12px 20px; margin:6px 0 8px; padding:16px 18px;
  background-color:var(--white); border:1.5px solid var(--line); border-radius:var(--radius-sm);
}
.acta-rol{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--ink-soft); font-family: var(--f-display); }
.acta-rol-lletra{
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-size:11px; font-weight:700; color:var(--white);
}

/* ---- targetes genèriques de l'acta ---- */
.acta-card{
  background-color:var(--white); border:1.5px solid var(--line); border-radius:var(--radius);
  overflow:hidden; margin-bottom:16px; box-shadow:var(--shadow-sm);
}
.acta-card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:16px 20px 6px; }
.acta-card-head-title{ display:flex; align-items:baseline; gap:9px; min-width:0; }
.acta-card-head-mark{ width:6px; height:14px; background-color:var(--red); border-radius:3px; display:inline-block; flex-shrink:0; align-self:center; }
.acta-card-head-label{ font-family:var(--f-display); text-transform:uppercase; font-size:13px; font-weight:700; letter-spacing:0.06em; color:var(--ink); }
.acta-card-head-sub{ font-size:12px; font-weight:500; color:var(--muted); }
.acta-card-head-trailing{
  flex-shrink:0; font-family:var(--f-display); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.06em; color:var(--muted);
}
.acta-card-body{ padding:8px 0 4px; }

/* ---- àrbitres ---- */
/* El carrec i el nom a l'esquerra i la samarreta a la dreta del tot,
   com a la targeta de gols. El nom s'estira per empenyer-la fins al
   marge. */
.acta-arbitre-row{
  display:flex; align-items:center; gap:12px; padding:9px 20px;
  border-top:1px solid var(--line);
}
.acta-arbitre-row:first-child{ border-top:none; }
.acta-arbitre-rol{
  flex:0 0 84px; font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.05em; color:var(--muted);
}
.acta-arbitre-nom{ flex:1 1 auto; font-family:var(--f-display); font-size:16px; font-weight:300; color:var(--ink); }

/* ---- gols ---- */
.acta-gol-row{ display:flex; align-items:center; gap:12px; padding:12px 20px; border-top:1px solid var(--line); }
.acta-gol-row:first-child{ border-top:none; }
.acta-gol-row.is-ours{ background-color:var(--red-tint); }
.acta-gol-marcador{
  flex:0 0 52px; text-align:center; font-family:var(--f-display); font-size:13px; font-weight:700;
  color:var(--ink); background-color:var(--grey-chip); border-radius:var(--radius-pill); padding:5px 0;
}
.acta-gol-info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.acta-gol-jugador{ font-family:var(--f-display); font-size:18px; font-weight:400; color:var(--ink); }
.acta-gol-minut{ font-weight:500; color:var(--muted); white-space:nowrap; }
.acta-gol-tipus{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted);
  font-weight:600; text-transform:uppercase; flex-wrap:wrap;
}
.acta-gol-tipus svg{ flex-shrink:0; }

/* ---- llegenda d'events ---- */
/* En graella, igual que la llegenda de rols: així els set elements queden
   alineats en columnes en comptes de trencar la línia on toqui. */
.legend.acta-legend-wrap{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(155px, 1fr));
  margin:0 0 20px; padding:16px 18px; gap:12px 20px;
  background-color:var(--white); border:1.5px solid var(--line); border-radius:var(--radius-sm);
}
.acta-legend-wrap .legend-item{ font-size:14px; }

/* ---- dues columnes: local | visitant ---- */
.acta-cols{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.acta-col{ min-width:0; }
.acta-col-head{
  display:flex; align-items:center; gap:10px; margin-bottom:12px; padding:10px 14px;
  background-color:var(--white); border:1.5px solid var(--line); border-radius:var(--radius-sm);
}
.acta-col-head.is-ours{ border-color:var(--red); }
.acta-col-nom{
  flex:1; min-width:0; font-family:var(--f-display); font-size:16px; font-weight:400;
  text-transform:uppercase; color:var(--ink); line-height:1.2;
}
.acta-col-head.is-ours .acta-col-nom{ color:var(--red); }
/* Local / Visitant. La pastilla va buida i porta el color de l'equip
   (el mateix de la vora de la targeta i de les samarretes de sota); el
   rol el diu la paraula. Abans el color deia el rol i no l'equip, i els
   rivals acabaven amb una pastilla negra. */
.acta-col-tag{
  flex-shrink:0; display:inline-flex; align-items:center;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
  /* 7px, com la pastilla d'"Acta tancada": es l'unica cantonada de la
     pagina que anava del tot rodona i cantava. */
  border-radius:7px; padding:4px 10px;
  /* La vora hi es sempre encara que no es vegi: el color el posa el JSX
     amb el de l'equip, i sense amplada no hi hauria res on pintar-lo. */
  border:1.5px solid transparent;
}
/* La reserva de quan no sabem de quin color va l'equip (un rival que la
   FCF no ens dona). Si el sabem, mana el JSX. */
.acta-col-tag.is-local,
.acta-col-tag.is-visitant{
  color:var(--muted); background-color:transparent; border-color:var(--line);
}
/* Si l'equip es el nostre i no ens ha arribat cap color, el vermell. */
.acta-col-head.is-ours .acta-col-tag{ color:var(--red); border-color:var(--red); }

/* ---- samarreta de l'arbitre ---- */
/* ---- files de jugador ---- */
.acta-jugador-row{
  display:flex; align-items:center; gap:12px; padding:9px 20px; border-top:1px solid var(--line);
  font-family:var(--f-display); font-size:18px; font-weight:200; color:var(--ink);
}
.acta-jugador-row:first-child{ border-top:none; }
.acta-jugador-row.is-golejador{ background-color:var(--green-tinto); }
/* Flex per dues coses: centra els distintius amb el nom sense trucs, i
   si el nom es llarg i passa de linia, el distintiu se'n va amb ell. */
.acta-jugador-nom{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
/* ---- distintius de capità i porter ----
   La FCF els va afegir el setembre del 2026. Aquí es fan amb els colors
   de casa, no amb els seus: el capità en ambre (el color d'avís que ja
   fem servir a la web) i el porter amb una pastilla discreta de contorn.
   El porter va apagat a posta: n'hi ha un a cada alineació i, si fos de
   color, competiria amb els gols i les targetes de la mateixa fila. */
/* Res de vertical-align ni de margins per centrar-los: el que els centra
   es que .acta-jugador-nom sigui flex (mes avall). Aixi no calen numeros
   magics que es desmunten quan es canvia la mida de la lletra. */
.acta-marca{
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0; font-family:var(--f-display); font-weight:700;
}
.acta-marca-capita{
  width:18px; height:18px; border-radius:50%;
  background-color:var(--amber); color:var(--white);
  font-size:10px;
}
/* Morat, no blau. El blau es confonia amb les fletxes de canvi, que
   surten a la mateixa fila. El morat ja es el color dels porters a la
   teva acta: es el de la lletra "P" d'Entrenador de porters, i ara tambe
   el de la seva samarreta. Un sol color per a una sola idea. */
.acta-marca-porter{
  padding:2px 8px; border-radius:var(--radius-pill);
  background-color:#EDECFB; color:#5956D6;
  font-size:10px; letter-spacing:0.06em;
}

.acta-dorsal-samarreta{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; color:var(--red); flex-shrink:0;
}
/* L'SVG omple la caixa: la mida es canvia nomes a la regla de sobre. */
.acta-dorsal-samarreta svg{ width:100%; height:100%; display:block; }
.acta-dorsal-num{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-size:14px; font-weight:700; color:var(--white); margin-top:3px;
}

/* ---- pastilles d'event (gol, targeta, entra, surt) ---- */
.acta-jugador-events{ display:flex; align-items:center; gap:6px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
.acta-event{
  display:inline-flex; align-items:center; gap:4px; padding:3px 8px 3px 6px;
  border-radius:var(--radius-pill); font-family:var(--f-display); font-size:11px; font-weight:700;
  background-color:var(--grey-chip); color:var(--ink-soft); white-space:nowrap;
}
.acta-event svg, .acta-targeta-ico{ flex-shrink:0; }
.acta-event.is-gol{ background-color:var(--green-tinto); color:var(--green); }
.acta-event.is-entra{ background-color:#E7F1FA; color:#0068A9; }
.acta-event.is-surt{ background-color:var(--red-tint); color:var(--red-dark); }
.acta-event.is-groga{ background-color:var(--amber-tint); color:var(--amber-dark); }
.acta-event.is-vermella{ background-color:var(--loss-tint); color:var(--red-dark); }
.acta-targeta-ico{
  display:inline-block; background-color:#F2BD31; border:1px solid rgba(20,16,15,0.25);
  border-radius:2px; box-shadow:0 1px 2px rgba(20,16,15,0.15);
}
.acta-targeta-ico.is-vermella{ background-color:var(--red); }

/* ---- equip tècnic ---- */
.acta-tecnic-row{ display:flex; align-items:center; gap:11px; padding:10px 20px; border-top:1px solid var(--line); }
.acta-tecnic-row:first-child{ border-top:none; }
.acta-tecnic-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.acta-tecnic-carrec{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted);
}
.acta-tecnic-nom{ font-family:var(--f-display); font-size:17px; font-weight:300; color:var(--ink); }

/* ---- canvis ---- */
.acta-canvi-row{ display:flex; align-items:center; gap:14px; padding:12px 20px; border-top:1px solid var(--line); }
.acta-canvi-row:first-child{ border-top:none; }
.acta-canvi-minut{
  flex:0 0 44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:var(--ink-soft);
  background-color:var(--grey-chip); border-radius:var(--radius-sm);
}
.acta-canvi-persones{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.acta-canvi-persona{ display:flex; align-items:center; gap:7px; font-family:var(--f-display); font-size:16px; font-weight:300; color:var(--ink); }
.acta-canvi-nom{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acta-canvi-persona.is-surt{ color:var(--muted); }
.acta-canvi-persona.is-surt .acta-canvi-nom{ text-decoration:line-through; text-decoration-color:var(--linem); }

@media (max-width:760px){
  .acta-cols{ grid-template-columns:1fr; }
  .acta-gol-equip{ display:none; }
  .acta-summary{ gap:12px; padding:18px 12px; }
  .acta-summary-score{ font-size:28px; padding:8px 14px; }
  .acta-summary-team{ flex:1 1 110px; }
  .acta-jugador-row{ gap:9px; padding:9px 14px; font-size:13px; }
  .acta-gol-row{ gap:9px; padding:11px 14px; }
  .acta-tecnic-row, .acta-canvi-row{ padding:10px 14px; }
  .acta-arbitre-row{ padding:10px 14px; gap:8px; }
  .acta-card-head{ padding:14px 14px 6px; }
  .acta-event{ font-size:10px; padding:2px 6px 2px 5px; }
  .acta-meta{ gap:8px 14px; font-size:11.5px; padding:11px 14px; }
}

/* En pantalles estretes el marcador es llegeix millor apilat:
   local a dalt, resultat al mig i visitant a baix. */
@media (max-width:520px){
  /* Apilat: cal centrar també el marcador, que si no es quedava
     enganxat a l'esquerra. */
  .acta-summary{ grid-template-columns:1fr; gap:14px; justify-items:center; }
  .acta-summary-team{ max-width:none; width:100%; }
  .acta-summary-score{ justify-self:center; }
  .legend.acta-legend-wrap{ grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
  /* En vertical el carrec se'n va a la seva propia linia, pero la
     samarreta es queda a la DRETA del tot, com a la resta de targetes.
     Amb flex-direction:column queia a sota i desquadrava la fila. */
  .acta-arbitre-row{ flex-wrap:wrap; gap:2px 10px; align-items:center; }
  .acta-arbitre-rol{ flex:0 0 100%; order:1; }
  .acta-arbitre-nom{ order:2; }
  .acta-arbitre-row .acta-dorsal-samarreta{ order:3; }
}

/* Mentre l'arbitre no l'ha tancada. No va en vermell perque no es cap
   alarma: es l'estat normal d'un partit que encara no s'ha jugat. Va
   fosc translucid i no gris clar perque aixo cau damunt de la foto del
   camp, que es verda: en gris no es llegia.  */
.acta-tancada-tag.is-pendent{
  background-color: rgb(255 255 255 / 41%); 
  color:var(--white);
  box-shadow:0 2px 8px rgba(20,16,15,0.22);
  background-color: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(3px);
}
/* ==================== EL BOTO DELS AVISOS ====================
   Viu a la capcalera (al costat de l'Instagram) i, al mobil, a la barra
   del titol, que alla la capcalera no es veu. El pinta el avisos.js.

   Es la mateixa pastilla rodona que els altres botons de la capcalera,
   amb tres colors i prou:
     · vermell -> encara no t'has apuntat
     · verd    -> apuntat (toca-la un altre cop per treure'ls)
     · gris    -> aquest navegador no pot */
.avisos-lloc{ display:inline-flex; }

.avisos-campana{
  width:40px; height:40px;
  border:2px solid var(--red); border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--red); cursor:pointer; padding:0;
  transition:border-color .15s, color .15s, background-color .15s;
}
.avisos-campana svg{ display:block; }
.avisos-campana:hover{ background-color:var(--red-tint); }

.avisos-campana[data-actiu="1"]{ border-color:#1E7F45; color:#1E7F45; }
.avisos-campana[data-actiu="1"]:hover{ background-color:#E7F5EC; }

.avisos-campana[data-motiu]{
  border-color:var(--line); color:var(--muted); cursor:help;
}
.avisos-campana[data-motiu]:hover{ background-color:transparent; }