/* ============================================================
   TEMA — canvia aquí colors i fonts quan tinguis el disseny
   ============================================================ */
:root{
  --font-base: 'Hanken Grotesk', system-ui, sans-serif;
  --c-fons: #f5f5f4;          /* fons de pàgina */
  --c-superficie: #ffffff;    /* fons de taules */
  --c-tinta: #1c1c1c;         /* text principal */
  --c-tinta-suau: #6b6b6b;    /* text secundari */
  --c-primari: #557C71;       /* accent principal */
  --c-primari-fosc: #3e5d54;
  --c-linia: #e2e2e0;
  --c-guany: #e8f2ee;         /* cel·la de victòria (fila) */
  --c-derrota: #f7ecea;       /* cel·la de derrota (fila) */
  --c-data: #fdf6e7;          /* cel·la amb partit programat */
  --c-sensedata: #f0f0ef;     /* cel·la sense data */
  --c-diagonal: #2a2a2a;      /* diagonal del quadrant */
  --radi: 10px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; } }

body{
  font-family:var(--font-base);
  background:var(--c-fons);
  color:var(--c-tinta);
  -webkit-font-smoothing:antialiased;
}

header{
  background:var(--c-primari);
  color:#fff;
  padding:2.2rem 1.2rem 1.8rem;
  text-align:center;
}
header h1{ font-size:clamp(1.4rem,4vw,2.1rem); font-weight:800; letter-spacing:-.02em; }
header p{ margin-top:.35rem; font-size:.9rem; opacity:.85; }

nav.grups{
  display:flex; justify-content:center; gap:.5rem;
  padding:.9rem 1rem; background:var(--c-superficie);
  border-bottom:1px solid var(--c-linia);
  position:sticky; top:0; z-index:5;
}
nav.grups a{
  text-decoration:none; color:var(--c-primari-fosc);
  font-weight:700; font-size:.85rem;
  padding:.45rem .9rem; border:1px solid var(--c-linia); border-radius:999px;
  transition:background .15s ease;
}
nav.grups a:hover, nav.grups a:focus-visible{ background:var(--c-guany); outline:2px solid var(--c-primari); outline-offset:1px; }

main{ max-width:1200px; margin:0 auto; padding:1.4rem 1rem 3rem; }

.estat{ text-align:center; padding:2.5rem 1rem; color:var(--c-tinta-suau); font-size:.95rem; }
.estat.error{ color:#a33; }

section.grup{ margin-top:2.2rem; }
section.grup h2{
  font-size:1.15rem; font-weight:800; color:var(--c-primari-fosc);
  display:flex; align-items:center; gap:.6rem; margin-bottom:.7rem;
}
section.grup h2::after{ content:""; flex:1; height:1px; background:var(--c-linia); }

.taula-scroll{ overflow-x:auto; border:1px solid var(--c-linia); border-radius:var(--radi); background:var(--c-superficie); }

table{ border-collapse:collapse; width:100%; font-size:.78rem; }
th, td{ border:1px solid var(--c-linia); padding:.45rem .5rem; text-align:center; white-space:nowrap; }

thead th{ background:var(--c-primari); color:#fff; font-weight:700; }
thead th.rival{
  max-width:110px; white-space:normal; font-size:.68rem; line-height:1.15;
  vertical-align:bottom; padding:.5rem .3rem;
}
th.equip-col, td.equip{ text-align:left; font-weight:700; position:sticky; left:0; background:var(--c-superficie); min-width:150px; box-shadow:1px 0 0 var(--c-linia); }
thead th.equip-col{ background:var(--c-primari); }
td.stat{ font-variant-numeric:tabular-nums; color:var(--c-tinta-suau); }
td.pt{ font-weight:800; color:var(--c-primari-fosc); }

td.diagonal{ background:var(--c-diagonal); }
td.resultat{ font-weight:600; }
td.resultat.guany{ background:var(--c-guany); }
td.resultat.derrota{ background:var(--c-derrota); }
td.programat{ background:var(--c-data); font-size:.7rem; color:var(--c-tinta-suau); }
td.sensedata{ background:var(--c-sensedata); color:var(--c-tinta-suau); font-size:.7rem; font-style:italic; }
td.espera{ background:var(--c-data); color:var(--c-primari-fosc); font-size:.68rem; font-weight:600; }

.llegenda{
  display:flex; flex-wrap:wrap; gap:1rem; margin-top:.6rem;
  font-size:.72rem; color:var(--c-tinta-suau);
}
.llegenda span{ display:inline-flex; align-items:center; gap:.35rem; }
.llegenda i{ width:.85rem; height:.85rem; border-radius:3px; border:1px solid var(--c-linia); display:inline-block; }

footer{ text-align:center; padding:1.5rem 1rem 2.5rem; color:var(--c-tinta-suau); font-size:.75rem; }
footer .refresc{ margin-top:.3rem; }
footer button{
  margin-top:.6rem; font:inherit; font-weight:700; color:var(--c-primari-fosc);
  background:none; border:1px solid var(--c-linia); border-radius:999px;
  padding:.4rem .95rem; cursor:pointer;
}
footer button:hover{ background:var(--c-guany); }