@import url("../fonts/fonts.css");

/* ============================================================
   AE SIGALTAS · webapp dels socis (sigaltas.cat/app)
   Pensada per al mòbil i per instal·lar-la a la pantalla d'inici:
   barra de pestanyes a baix, zones tàctils de 48px, safe areas de
   l'iPhone i res que depengui del hover.
   Mateix sistema visual que el web: base fosca + taronja del club.
   ============================================================ */

:root {
  --ink:    #0E1013;
  --ink-2:  #16191E;
  --ink-3:  #1E232A;
  --ink-4:  #2A313A;
  --text:   #F2F3F5;
  --mute:   #A2A8B2;
  --subtle: #7A828E;
  --accent: #E08300;
  --accent-rgb: 224, 131, 0;       /* per als rgba() amb el color del club (marca genèrica) */
  --accent-hi-rgb: 245, 154, 31;
  --accent-hi: #F59A1F;
  --accent-soft: rgba(var(--accent-rgb), 0.14);
  --ok:     #3FB97A;
  --ok-soft: rgba(63, 185, 122, 0.14);
  --no:     #EF5A5F;
  --no-soft: rgba(239, 90, 95, 0.14);
  /* ⚠️ Sense això, les parts NATIVES dels camps (date, time, datetime-local i els seus
     selectors) es pinten amb l'esquema clar sobre el fons fosc: surten en blanc i no
     se'n veu el contingut. */
  color-scheme: dark;
  --line:   rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);

  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --r: 18px;
  --r-sm: 12px;
  --top: env(safe-area-inset-top, 0px);
  --bottom: env(safe-area-inset-bottom, 0px);
  --tabsh: 62px;
  --ample: 560px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; background: var(--ink); }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
/* Sense rebot ni «estirar per recarregar» al mòbil. Ha d'anar a html (el que fa scroll): al body, que amb
   overflow-x: hidden és un contenidor de scroll, bloquejava la roda del ratolí a l'escriptori. */
html { overscroll-behavior-y: none; }
body.bloquejat { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ---------- Portada · Sigaltas App by Moud Sports ----------
   Una pilota cau dins el logo, el logo es fa gran amb un halo taronja, i apareixen
   el nom i la signatura. app-base.js la manté ~2 s el primer cop de la sessió. */
.arrencada {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(90% 60% at 50% 40%, #1E150A 0%, var(--ink) 72%);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.arrencada--surt { opacity: 0; transform: scale(1.05); pointer-events: none; }
.cover { position: relative; display: grid; justify-items: center; text-align: center; padding: 0 24px; }
.cover__halo {
  position: absolute; left: 50%; top: 34%; width: 380px; height: 380px; margin: -190px 0 0 -190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .5) 0%, rgba(var(--accent-rgb), .14) 36%, transparent 68%);
  opacity: 0; animation: cover-halo 2.6s .5s var(--ease) infinite;
}
@keyframes cover-halo { 0% { transform: scale(.55); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.3); opacity: .25; } }
.cover__pilota {
  position: absolute; left: 50%; top: 18%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 47%, rgba(60, 25, 0, .55) 47% 53%, transparent 53%),
    radial-gradient(circle at 35% 30%, #FFC06A, #E08300 55%, #8A4A00);
  box-shadow: 0 0 22px rgba(var(--accent-rgb), .75);
  opacity: 0; animation: cover-pilota 1.05s cubic-bezier(.3, 0, .45, 1) .1s both;
}
@keyframes cover-pilota {
  0% { transform: translate(-150px, -150px) rotate(0) scale(.7); opacity: 0; }
  25% { opacity: 1; }
  72% { transform: translate(0, 30px) rotate(300deg) scale(1); opacity: 1; }
  86% { transform: translate(0, 8px) rotate(340deg) scale(1); }
  100% { transform: translate(0, 40px) rotate(360deg) scale(0); opacity: 0; }
}
.cover__logo {
  position: relative; width: min(66vw, 290px); height: auto;
  filter: drop-shadow(0 10px 34px rgba(var(--accent-rgb), .38));
  animation: cover-logo .95s .8s var(--ease) both;
}
@keyframes cover-logo {
  0% { transform: scale(.5) translateY(18px); opacity: 0; filter: blur(10px); }
  60% { transform: scale(1.07); opacity: 1; filter: blur(0) drop-shadow(0 10px 34px rgba(var(--accent-rgb), .38)); }
  100% { transform: scale(1); }
}
.cover__nom {
  margin: 22px 0 0; font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 1.5rem; letter-spacing: .24em; color: var(--text); animation: cover-puja .7s 1.3s var(--ease) both;
}
.cover__nom b { color: var(--accent-hi); }
.cover__by {
  margin: 6px 0 0; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--subtle);
  animation: cover-puja .7s 1.55s var(--ease) both;
}
.cover__by b { color: var(--mute); }
@keyframes cover-puja { from { opacity: 0; transform: translateY(12px); letter-spacing: .5em; } }
.cover__carrega {
  position: relative; width: 120px; height: 3px; margin-top: 26px; border-radius: 3px; overflow: hidden;
  background: rgba(255, 255, 255, .08); animation: cover-puja .4s 1.7s both;
}
.cover__carrega i {
  position: absolute; top: 0; bottom: 0; width: 45%; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: cover-barra 1.1s 1.7s ease-in-out infinite;
}
@keyframes cover-barra { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
.entrada__by { display: block; margin-top: 6px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--subtle); }
.entrada__by b { color: var(--mute); }
.marca-app { margin: 24px 0 0; text-align: center; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--subtle); }
.marca-app b { color: var(--mute); }
.instal__ico { width: 44px; height: 44px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-hi); }
.instal__ico svg { width: 22px; height: 22px; }

/* Accés per WhatsApp */
.btn--wa { background: #25D366; color: #052E16; }
.btn--wa:active { background: #1EBE5A; }
.wa-mini {
  width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: rgba(37, 211, 102, .16); color: #25D366;
}
.wa-mini svg { width: 19px; height: 19px; }
.form-fulla textarea.missatge { min-height: 200px; font-size: 14px; line-height: 1.45; }

/* ---------- Entrada (login / enllaç / contrasenya nova) ---------- */
.entrada {
  min-height: 100dvh;
  padding: calc(var(--top) + 40px) 22px calc(var(--bottom) + 28px);
  display: flex; flex-direction: column; justify-content: center;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(var(--accent-rgb), .22), transparent 60%),
    var(--ink);
}
.entrada__cap { text-align: center; margin: 0 auto 34px; max-width: var(--ample); }
.entrada__cap img { width: min(70vw, 280px); margin: 0 auto; }
.entrada__cap p {
  margin: 14px 0 0; font-family: var(--display); font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent); font-size: .95rem;
}
.entrada form { width: 100%; max-width: 420px; margin: 0 auto; display: grid; gap: 14px; }
.entrada h1 { font-family: var(--display); text-transform: uppercase; font-size: 1.9rem; line-height: 1; margin: 0; }
.entrada .nota { color: var(--mute); font-size: .92rem; margin: 0; }
.entrada .enllac { text-align: center; color: var(--mute); font-size: .92rem; margin: 6px 0 0; }
.entrada .enllac a { color: var(--accent-hi); font-weight: 600; text-decoration: none; }

/* ---------- Camps ---------- */
.camp { display: grid; gap: 6px; }
.camp > span { font-size: .8rem; font-weight: 600; color: var(--mute); letter-spacing: .02em; }
/* `.entrada` = el mateix camp però fora d'un `.camp` (per exemple, proposar una franja). */
.camp input, .camp textarea, input.entrada {
  width: 100%; min-height: 52px; padding: 12px 14px;
  background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--text); /* explícit: els inputs no hereten el color del text */
  font-size: 16px; /* <16px fa zoom a l'iPhone */
  outline: none; transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
input.entrada:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.camp input:focus, .camp textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.camp input:disabled { color: var(--subtle); background: var(--ink-2); }
.camp input[type="date"] { min-width: 0; }
.err { margin: 0; color: var(--no); font-size: .9rem; font-weight: 500; }
.ok  { margin: 0; color: var(--ok); font-size: .9rem; font-weight: 500; }

/* ---------- Botons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: 14px; border: 0;
  font-weight: 650; font-size: .98rem; text-decoration: none; white-space: nowrap;
  background: var(--ink-3); color: var(--text);
  transition: transform .12s var(--ease), background .15s, opacity .15s;
  touch-action: manipulation;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; }
.btn--pri { background: var(--accent); color: #111; }
.btn--pri:active { background: var(--accent-hi); }
.btn--ok { background: var(--ok); color: #06140C; }
.btn--no { background: var(--ink-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--bloc { width: 100%; }
.btn--gran { min-height: 54px; font-size: 1.02rem; }
.btn--petit { min-height: 38px; padding: 0 14px; font-size: .88rem; border-radius: 11px; }
.btn--text { background: transparent; color: var(--accent-hi); padding: 0 6px; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }

/* ---------- Barra superior ----------
   Alta a dalt de tot, amb el logo gran, i compacta en fer scroll (.barra--petita,
   app-base.js). A la dreta, la campaneta de notificacions i el soci. */
.barra {
  position: sticky; top: 0; z-index: 30;
  padding: var(--top) 16px 0;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(var(--accent-rgb), .17), transparent 55%),
    rgba(14, 16, 19, .88);
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s;
}
.barra::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .6) 25%, rgba(var(--accent-rgb), .6) 75%, transparent);
  opacity: .75;
}
.barra__in {
  max-width: var(--ample); margin: 0 auto; height: 70px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: height .25s var(--ease);
}
.barra__marca { display: block; line-height: 0; }
.barra__logo {
  height: 46px; width: auto; transition: height .25s var(--ease);
  filter: drop-shadow(0 3px 12px rgba(var(--accent-rgb), .25));
}
.barra--petita { box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .85); }
.barra--petita .barra__in { height: 56px; }
.barra--petita .barra__logo { height: 32px; }
body.mode-gestio .barra__logo { height: 38px; }
body.mode-gestio .barra--petita .barra__logo { height: 30px; }
.barra__dreta { display: flex; align-items: center; gap: 10px; flex: none; }
.barra__btn {
  position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink-3); color: var(--text); text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--line-2); transition: transform .12s var(--ease), background .15s;
}
.barra__btn:active { transform: scale(.92); }
.barra__btn svg { width: 22px; height: 22px; }
.barra__btn[aria-current="page"] { background: var(--accent-soft); color: var(--accent-hi); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45); }
/* Gestió (administradors i gestors): el taronja del club */
.barra__btn--gestio, .barra__btn--gestio[aria-current="page"] { background: var(--accent); color: var(--ink); box-shadow: none; }
.barra__btn--gestio:hover { background: var(--accent-hi); }
.barra__btn--gestio[aria-current="page"] { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--accent); }
.barra__badge {
  position: absolute; top: -4px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px;
  display: grid; place-items: center; background: var(--no); color: #fff; font-size: .7rem; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 2px var(--ink);
}
.barra__btn--sona svg { animation: campaneja 1s var(--ease) 2; transform-origin: 50% 12%; }
@keyframes campaneja {
  15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); }
  60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); }
}
.barra__jo { background: none; border: 0; padding: 0; border-radius: 50%; line-height: 0; }
.barra__jo .av { width: 42px; height: 42px; font-size: 1rem; }

/* ---------- Avatar ---------- */
.av {
  position: relative; flex: none; display: inline-grid; place-items: center; overflow: hidden;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ink-4); color: var(--mute);
  font-family: var(--display); font-weight: 700; font-size: .95rem; letter-spacing: .02em;
}
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.av--jo { box-shadow: 0 0 0 2px var(--accent); }
.av--xl { width: 104px; height: 104px; font-size: 2.2rem; }
.av--m { width: 42px; height: 42px; }

/* ---------- Vista ---------- */
.vista {
  max-width: var(--ample); margin: 0 auto;
  padding: 18px 16px calc(var(--tabsh) + var(--bottom) + 28px);
}
.vista.entra { animation: entra .28s var(--ease); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

.cap { margin: 4px 0 18px; }
.cap__sup {
  margin: 0 0 4px; font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .16em; font-size: .8rem; color: var(--accent);
}
.cap h1 {
  margin: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 2.15rem; line-height: .95; letter-spacing: -.005em;
}
.cap p { margin: 8px 0 0; color: var(--mute); font-size: .95rem; }

.secc { margin: 26px 0 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.secc h2 {
  margin: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 1.25rem; letter-spacing: .01em;
}
.secc a, .secc button { font-size: .88rem; color: var(--accent-hi); font-weight: 600; text-decoration: none; background: none; border: 0; padding: 4px 0; }

.buit {
  text-align: center; color: var(--mute); padding: 34px 18px; font-size: .95rem;
  background: var(--ink-2); border: 1px dashed var(--line-2); border-radius: var(--r);
}
.buit b { display: block; color: var(--text); font-family: var(--display); text-transform: uppercase; font-size: 1.15rem; margin-bottom: 4px; }

/* ---------- Targetes ---------- */
.card {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px;
}
.card + .card { margin-top: 10px; }
.tocable { cursor: pointer; transition: transform .12s var(--ease), background .15s; }
.tocable:active { transform: scale(.985); background: var(--ink-3); }

/* Xifres */
.xifres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 6px; }
.xifra {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 10px; text-align: left;
}
.xifra b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.75rem; line-height: 1; }
.xifra span { display: block; margin-top: 4px; font-size: .74rem; color: var(--mute); line-height: 1.25; }
.xifra--accent b { color: var(--accent-hi); }
.xifra--no b { color: var(--no); }

/* Avís de convocatòries per respondre */
.avis {
  border-radius: var(--r); padding: 14px; margin: 0 0 12px;
  background: linear-gradient(160deg, rgba(var(--accent-rgb), .20), rgba(var(--accent-rgb), .06));
  border: 1px solid rgba(var(--accent-rgb), .35);
}
.avis__t {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.05rem; letter-spacing: .02em;
}
.avis__t i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

/* ---------- Partit: targeta gran (el proper) ---------- */
.gran {
  position: relative; overflow: hidden; border-radius: 22px; padding: 16px;
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(var(--accent-rgb), .26), transparent 60%),
    var(--ink-2);
  border: 1px solid var(--line-2);
}
/* Versió compacta (Inici: el proper partit propi, que no s'ha de menjar la pantalla) */
.gran--compacte { padding: 12px 14px; border-radius: 18px; }
.gran--compacte .gran__vs { margin: 10px 0 6px; }
.gran--compacte .escut { width: 44px; height: 44px; font-size: 1rem; }
.gran--compacte .eq__nom { font-size: .9rem; }
.gran--compacte .gran__hora { font-size: 1.6rem; }
.gran--compacte .gran__marc { font-size: 1.9rem; }
.gran--compacte .gran__accions, .gran--compacte .gran__comparteix { margin-top: 8px; }
.gran__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .8rem; color: var(--mute); }
.gran__compe { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.gran__vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 18px 0 14px; }
.eq { display: grid; justify-items: center; gap: 8px; text-align: center; min-width: 0; }
.eq__nom { font-weight: 650; font-size: .9rem; line-height: 1.2; overflow-wrap: anywhere; }
.escut {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: var(--ink-3); font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: var(--mute);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.escut img { width: 78%; height: 78%; object-fit: contain; }
.escut--club img { width: 100%; height: 100%; object-fit: cover; }
.gran__mig { text-align: center; }
.gran__hora { font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1; }
.gran__dia { font-size: .8rem; color: var(--mute); margin-top: 4px; text-transform: capitalize; }
.gran__marc { font-family: var(--display); font-weight: 700; font-size: 2.3rem; line-height: 1; letter-spacing: .02em; }
.gran__lloc { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .85rem; color: var(--mute); margin-bottom: 14px; text-align: center; }
.gran__lloc svg { width: 15px; height: 15px; flex: none; }
.compte { display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-hi); font-size: .74rem; font-weight: 650; }

/* ---------- Partit: fila de llista ---------- */
.fila {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center;
  padding: 12px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 16px;
}
.fila + .fila { margin-top: 8px; }
/* Amb el logotip de la secció a l'esquerra (només les files de l'app del soci) */
.fila--logo { grid-template-columns: 34px 46px 1fr auto; gap: 9px; }
.fila__logo {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink-3); color: var(--mute); box-shadow: inset 0 0 0 1px var(--line-2);
}
.fila__logo svg { width: 20px; height: 20px; }
/* Els esports del soci, amb el taronja del club (com al menú) */
.fila__logo--meu { background: var(--accent-soft); color: var(--accent-hi); box-shadow: none; }
.fila__data {
  display: grid; place-items: center; align-content: center; height: 54px; border-radius: 12px;
  background: var(--ink-3); line-height: 1;
}
.fila__data b { font-family: var(--display); font-weight: 700; font-size: 1.5rem; }
.fila__data span { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); margin-top: 3px; }
.fila__cos { min-width: 0; }
.fila__rival { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: .96rem; }
.fila__rival img { width: 20px; height: 20px; object-fit: contain; flex: none; }
.fila__rival span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila__meta { font-size: .8rem; color: var(--mute); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila__dreta { display: grid; justify-items: end; gap: 5px; }
.marc { font-family: var(--display); font-weight: 700; font-size: 1.3rem; line-height: 1; }
.marc--g { color: var(--ok); } .marc--p { color: var(--no); }
.franja { width: 3px; align-self: stretch; border-radius: 3px; }

/* ---------- Píndoles i xips ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px;
  font-size: .72rem; font-weight: 650; white-space: nowrap;
  background: var(--ink-3); color: var(--mute);
}
.pill--ok { background: var(--ok-soft); color: var(--ok); }
.pill--no { background: var(--no-soft); color: var(--no); }
.pill--accent { background: var(--accent-soft); color: var(--accent-hi); }

.xips {
  display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 14px; padding: 2px 16px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.xips::-webkit-scrollbar { display: none; }
.xip {
  flex: none; min-height: 36px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line-2);
  background: transparent; color: var(--mute); font-size: .88rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px;
}
.xip i { width: 8px; height: 8px; border-radius: 50%; }
.xip[aria-pressed="true"] { background: var(--text); color: var(--ink); border-color: var(--text); }
/* Dreceres del tauler: xips amb icona. Cal dimensionar l'SVG explícitament (com a
   .btn o .grup__fila); sense regla, un SVG amb viewBox i prou surt desmesurat. */
.xips--dreceres { margin-bottom: 12px; }
.xips--dreceres .xip { color: var(--text); border-color: var(--line-2); text-decoration: none; }
.xips--dreceres .xip svg { width: 17px; height: 17px; flex: none; color: var(--mute); }
.xips--dreceres .xip small { font-weight: 700; color: var(--accent-hi); margin-left: 1px; }
/* Xip d'equip (Entorn): nom a dalt i categoria a sota, perquè hi ha equips amb el mateix nom */
.xip--equip { align-items: center; max-width: 64vw; padding: 7px 14px; border-radius: 16px; }
.xip--equip span { display: grid; gap: 1px; min-width: 0; text-align: left; }
.xip--equip span, .xip--equip small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.xip--equip small { font-size: .7rem; font-weight: 500; opacity: .72; }

.seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; margin: 0 0 14px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px;
}
.seg button {
  min-height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--mute);
  font-weight: 650; font-size: .9rem;
}
.seg button[aria-pressed="true"] { background: var(--ink-4); color: var(--text); }

/* ---------- Equips ---------- */
.equip { padding: 0; overflow: hidden; }
.equip__cap { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line); }
.equip__cap h2 { margin: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.35rem; line-height: 1; }
.equip__cap p { margin: 3px 0 0; font-size: .8rem; color: var(--mute); }
.equip__color { width: 6px; align-self: stretch; border-radius: 6px; }
.roster { list-style: none; margin: 0; padding: 6px 0; }
.roster li { display: grid; grid-template-columns: 34px 42px 1fr auto; align-items: center; gap: 10px; padding: 8px 16px; }
.roster__num { font-family: var(--display); font-weight: 700; font-size: 1.2rem; text-align: center; color: var(--mute); }
.roster__nom { font-weight: 550; font-size: .95rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster li.jo { background: var(--accent-soft); }
.roster li.jo .roster__num { color: var(--accent-hi); }
.roster li.reforc { opacity: .6; }

/* ---------- Social ---------- */
.acte { padding: 0; overflow: hidden; }
.acte__img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; background: var(--ink-3); }
.acte__cos { padding: 14px 16px 16px; }
.acte__cos h3 { margin: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.3rem; line-height: 1.05; }
.acte__meta { margin: 6px 0 0; font-size: .85rem; color: var(--mute); }
.acte__desc { margin: 10px 0 0; font-size: .92rem; color: var(--text); }
.galeria { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.galeria::-webkit-scrollbar { display: none; }
.galeria a { flex: none; width: 42%; scroll-snap-align: start; }
.galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--ink-3); }

/* ---------- Perfil ---------- */
.perfil-cap { text-align: center; padding: 8px 0 4px; }
.perfil-cap .av--xl { margin: 0 auto; }
.perfil-cap h1 { margin: 14px 0 0; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.9rem; line-height: 1; }
.perfil-cap p { margin: 6px 0 0; color: var(--mute); font-size: .9rem; }
.perfil-cap .pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.foto-btn { position: relative; display: inline-block; }
.foto-btn .lapis {
  position: absolute; right: 0; bottom: 2px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: #111; box-shadow: 0 0 0 3px var(--ink);
}
.foto-btn .lapis svg { width: 16px; height: 16px; }
.foto-btn.pujant .av { opacity: .5; }

.grup { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.grup + .grup { margin-top: 12px; }
.grup__fila {
  display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 10px 16px; width: 100%;
  background: none; border: 0; text-align: left; text-decoration: none; color: var(--text);
}
.grup > * + .grup__fila, .grup > .form { border-top: 1px solid var(--line); }
.grup__fila svg { width: 20px; height: 20px; color: var(--mute); flex: none; }
.grup__fila span { flex: 1; font-size: .96rem; }
.grup__fila em { font-style: normal; color: var(--mute); font-size: .88rem; }
.grup__fila--no span { color: var(--no); }
.grup .form { padding: 14px 16px 16px; display: grid; gap: 12px; }
.dues { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.peu { color: var(--subtle); font-size: .8rem; line-height: 1.45; margin: 12px 4px 0; }
.peu a { color: var(--mute); }

/* Barra de desar que apareix quan hi ha canvis */
.desar {
  position: fixed; left: 0; right: 0; z-index: 35;
  bottom: calc(var(--tabsh) + var(--bottom) + 10px);
  padding: 0 16px; pointer-events: none;
}
.desar__in {
  pointer-events: auto; max-width: var(--ample); margin: 0 auto; display: flex; gap: 10px; align-items: center;
  padding: 10px 10px 10px 16px; border-radius: 16px; background: var(--ink-4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); animation: puja .22s var(--ease);
}
.desar__in span { flex: 1; font-size: .9rem; color: var(--mute); }
@keyframes puja { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Pestanyes inferiors ---------- */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding-bottom: var(--bottom);
  background: rgba(22, 25, 30, .9);
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  border-top: 1px solid var(--line);
}
/* Columnes automàtiques: la pestanya Gestió només hi és per als administradors. */
.tabs__in { max-width: var(--ample); margin: 0 auto; height: var(--tabsh); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.tab {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 3px;
  text-decoration: none; color: var(--subtle); font-size: .68rem; font-weight: 600; letter-spacing: .01em;
  touch-action: manipulation;
}
.tab svg { width: 24px; height: 24px; transition: transform .15s var(--ease); }
.tab[aria-current="page"] { color: var(--accent-hi); }
.tab[aria-current="page"] svg { transform: translateY(-1px); }
/* Els esports del soci: icona en blanc (la pestanya activa, taronja) */
.tab--meu svg { color: #fff; }
.tab--meu[aria-current="page"] svg { color: inherit; }
.seccio-temporades { margin-top: 12px; }
.tab:active svg { transform: scale(.9); }
.tab__badge {
  position: absolute; top: 7px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 99px; background: var(--no); color: #fff; font-size: .66rem; font-weight: 700;
  display: grid; place-items: center; box-shadow: 0 0 0 2px var(--ink-2);
}
/* Cròniques noves a Social: el puntet batega fins que s'obren. */
.tab__badge--nou { animation: batega 1.8s var(--ease) infinite; }
@keyframes batega {
  0%, 62%, 100% { transform: scale(1); box-shadow: 0 0 0 2px var(--ink-2), 0 0 0 0 rgba(224, 69, 69, .5); }
  18% { transform: scale(1.18); box-shadow: 0 0 0 2px var(--ink-2), 0 0 0 7px rgba(224, 69, 69, 0); }
  40% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .tab__badge--nou { animation: none; } }

/* ---------- Pantalla completa (fitxa de partit) i portes ---------- */
.full {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--ink); overscroll-behavior: contain;
  animation: llisca .26s var(--ease);
}
@keyframes llisca { from { transform: translateX(28%); opacity: 0; } }
.full__barra {
  position: sticky; top: 0; z-index: 2; padding: var(--top) 8px 0;
  background: rgba(14, 16, 19, .86);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.full__barra > div { max-width: var(--ample); margin: 0 auto; height: 54px; display: flex; align-items: center; gap: 4px; }
.full__barra b { font-weight: 650; font-size: 1rem; }
.enrere { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--text); border-radius: 12px; }
.enrere svg { width: 24px; height: 24px; }
.full__cos { max-width: var(--ample); margin: 0 auto; padding: 16px 16px calc(var(--bottom) + 32px); }

/* ============================================================
   GESTIÓ (administradors) · rutes #/g-*
   Mateix sistema que la zona de socis, una mica més dens: llistes,
   fitxes a pantalla completa, fulles inferiors i formularis.
   ============================================================ */
body.mode-gestio .barra { border-bottom-color: rgba(var(--accent-rgb), .35); }
.barra__esq { display: flex; align-items: center; gap: 10px; min-width: 0; }
.barra__mode {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px 0 12px; border-radius: 99px;
  background: var(--accent-soft); color: var(--accent-hi); text-decoration: none;
  font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem;
}
.barra__mode svg { width: 14px; height: 14px; }

.cap--g { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cap--g > div { min-width: 0; }
.cap--g .btn { flex: none; margin-bottom: 2px; }
.g-compte { margin: 0 0 8px; font-size: .8rem; color: var(--subtle); }
a.fila, a.gfila { text-decoration: none; color: var(--text); }
.gfila__dreta .pill { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.xifra { text-decoration: none; color: var(--text); }
.xifra--ok b { color: var(--ok); }
.pill--warn { background: rgba(var(--accent-hi-rgb), .16); color: var(--accent-hi); }
.pills-l { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* Cerca i filtres */
.cerca {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; margin: 0 0 12px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px;
}
.cerca svg { width: 20px; height: 20px; color: var(--subtle); flex: none; }
.cerca input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 16px; color: var(--text); -webkit-appearance: none; appearance: none; }
.cerca:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.xips + .xips { margin-top: -6px; }
.xip small { color: inherit; opacity: .6; font-weight: 600; }
.xips--in { margin: 8px 0 0; padding: 0; flex-wrap: wrap; overflow: visible; }
.xips--in .xip { min-height: 32px; font-size: .82rem; padding: 0 12px; }
.seg button small { opacity: .6; font-weight: 600; }
.seg--4 button { font-size: .8rem; padding: 0 2px; }
.seg--sticky {
  position: sticky; top: calc(var(--top) + 55px); z-index: 3; margin-top: 16px;
  background: var(--ink-2); box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .7);
}

/* Files de llista */
.gfila {
  display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: var(--text);
}
.gfila + .gfila { margin-top: 6px; }
.gfila__cos { min-width: 0; }
.gfila__cos b { display: block; font-weight: 650; font-size: .96rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gfila__cos b em { font-style: normal; color: var(--accent-hi); font-family: var(--display); font-weight: 700; }
.gfila__cos small { display: block; font-size: .8rem; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gfila__dreta { display: flex; align-items: center; gap: 5px; }
.punt { width: 8px; height: 8px; border-radius: 50%; background: var(--no); flex: none; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.grup__fila .fila__fl { width: 16px; height: 16px; margin-left: -4px; color: var(--subtle); }
.grup__fila small.pill { vertical-align: 1px; }
.grup__fila span small.sub { display: block; font-size: .8rem; color: var(--mute); margin-top: 1px; }
.grup__fila--accio span, .grup__fila--accio svg { color: var(--accent-hi); font-weight: 600; }
.grup__fila .escut-mini { width: 22px; height: 22px; object-fit: contain; flex: none; }
/* L'avatar també és un <span>: sense això, `.grup__fila span { flex: 1 }` l'estirava
   a tota l'amplada i la foto quedava deformada (fulla «Veure l'app com…»). */
.grup__fila > .av { flex: none; }
.grup__peu { padding: 10px 12px; border-top: 1px solid var(--line); }
.num-g { flex: none !important; min-width: 36px; font-family: var(--display); font-weight: 700; color: var(--accent-hi); }

/* Fitxes a pantalla completa */
.full__barra > div > b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.full__dreta { display: flex; align-items: center; gap: 4px; flex: none; padding-right: 4px; }
.full__cos { padding-bottom: calc(var(--bottom) + 96px); }
.desar--full { bottom: calc(var(--bottom) + 12px); z-index: 65; }
.accions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 14px 0 4px; }
.accions .btn { min-height: 40px; padding: 0 14px; font-size: .88rem; }
.nota-avis {
  display: flex; gap: 8px; align-items: center; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px;
  background: var(--no-soft); color: #FFB3B5; font-size: .86rem;
}
.nota-avis svg { width: 18px; height: 18px; flex: none; }
.foto-btn--off { pointer-events: none; }
.estat-l { margin: 0; font-size: .92rem; color: var(--mute); line-height: 1.6; }
.btn--perill { background: var(--no); color: #fff; }
.btn--perill-t { background: transparent; color: var(--no); box-shadow: inset 0 0 0 1px rgba(239, 90, 95, .35); }
.btns--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Camps extra: select, textarea, color, interruptor, opcions */
.camp select {
  width: 100%; min-height: 52px; padding: 12px 40px 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--ink-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A2A8B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px;
  font-size: 16px; outline: none; -webkit-appearance: none; appearance: none;
}
.camp select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.camp textarea { resize: vertical; min-height: 92px; line-height: 1.45; }
.camp input[type="color"] { padding: 6px; height: 52px; }
.colors { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.colors button { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line-2); padding: 0; }
.colors button[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--text); }

.sw { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; cursor: pointer; position: relative; }
.sw__t { display: grid; gap: 2px; min-width: 0; }
.sw__t b { font-weight: 550; font-size: .96rem; }
.sw__t small { font-size: .8rem; color: var(--mute); line-height: 1.35; }
.sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw i { position: relative; flex: none; width: 50px; height: 30px; border-radius: 99px; background: var(--ink-4); transition: background .18s; }
.sw i::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); transition: transform .18s var(--ease);
}
.sw input:checked + i { background: var(--ok); }
.sw input:checked + i::after { transform: translateX(20px); }
.sw input:focus-visible + i { box-shadow: 0 0 0 3px var(--accent-soft); }

.tria { display: flex; flex-wrap: wrap; gap: 6px; }
.tria label { position: relative; }
.tria input { position: absolute; inset: 0; opacity: 0; margin: 0; }
.tria span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--line-2); color: var(--mute); font-size: .9rem; font-weight: 600;
}
.tria input:checked + span { background: var(--text); color: var(--ink); border-color: var(--text); }
.tria input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-soft); }

/* Fulla inferior */
.fulla-fons {
  position: fixed; inset: 0; z-index: 75; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, .55); animation: fons .2s ease;
}
@keyframes fons { from { opacity: 0; } }
.fulla {
  width: 100%; max-width: var(--ample); max-height: calc(100dvh - var(--top) - 24px); display: flex; flex-direction: column;
  background: var(--ink-2); border: 1px solid var(--line-2); border-bottom: 0; border-radius: 22px 22px 0 0;
  box-shadow: 0 -20px 50px rgba(0, 0, 0, .5); animation: puja-fulla .26s var(--ease);
}
@keyframes puja-fulla { from { transform: translateY(40%); opacity: .4; } }
.fulla__cap { position: relative; display: flex; align-items: center; gap: 10px; padding: 16px 8px 8px 18px; }
.fulla__cap::before { content: ""; position: absolute; top: 7px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: var(--line-2); }
.fulla__cap b { flex: 1; min-width: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.2rem; line-height: 1.1; padding-top: 4px; }
.fulla__x { width: 44px; height: 44px; border: 0; background: none; color: var(--mute); display: grid; place-items: center; flex: none; }
.fulla__x svg { width: 22px; height: 22px; }
.fulla__cos { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 6px 18px calc(var(--bottom) + 20px); }
.fulla__text { margin: 0 0 16px; color: var(--mute); font-size: .95rem; }
.form-fulla { display: grid; gap: 14px; }
.sel-llista { display: grid; gap: 6px; max-height: 44dvh; overflow-y: auto; }
.sel-llista label { display: grid; grid-template-columns: auto 36px 1fr; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--ink-3); }
.sel-llista input { width: 22px; height: 22px; accent-color: var(--accent); margin: 0; }
.sel-llista span { min-width: 0; font-size: .94rem; }
.sel-llista small { display: block; color: var(--mute); font-size: .78rem; }

/* Tauler */
.gres { margin-top: 10px; }
.gres .fila { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.gres__marc {
  display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 8px; align-items: center; padding: 10px 12px;
  background: var(--ink-3); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 16px 16px;
}
.gres__marc input {
  width: 100%; min-width: 0; min-height: 42px; text-align: center; color: var(--text);
  font-family: var(--display); font-weight: 700; font-size: 1.3rem;
  background: var(--ink); border: 1px solid var(--line-2); border-radius: 10px; -webkit-appearance: none; appearance: none;
}
.gres__marc input::placeholder { font-family: var(--sans); font-size: .72rem; font-weight: 500; color: var(--subtle); }
.gres__marc span { color: var(--mute); font-weight: 700; }
.dest { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 4px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.dest::-webkit-scrollbar { display: none; }
.dest__c { flex: none; width: 44%; max-width: 190px; scroll-snap-align: start; display: grid; gap: 2px; padding: 12px; border-radius: 16px; background: var(--ink-2); border: 1px solid var(--line); }
.dest__c--top { border-color: rgba(var(--accent-rgb), .4); background: linear-gradient(160deg, rgba(var(--accent-rgb), .14), var(--ink-2)); }
.dest__pos { font-family: var(--display); font-weight: 700; font-size: 1.3rem; line-height: 1; }
.dest__c small { margin-top: 6px; font-size: .72rem; color: var(--accent-hi); text-transform: uppercase; letter-spacing: .06em; font-weight: 650; }
.dest__c b { font-size: .92rem; line-height: 1.2; }
.dest__c em { font-style: normal; font-size: .76rem; color: var(--mute); }
.dreceres { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.dreceres a {
  display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 14px; border-radius: 16px;
  background: var(--ink-2); border: 1px solid var(--line); text-decoration: none; font-weight: 600; font-size: .9rem;
  transition: transform .12s var(--ease), background .15s;
}
.dreceres a:active { transform: scale(.98); background: var(--ink-3); }
.dreceres svg { width: 22px; height: 22px; color: var(--accent-hi); flex: none; }

/* Partit: convocatòria, cobraments, marcador */
.conv {
  display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; width: 100%;
  padding: 9px 12px; background: none; border: 0; border-top: 1px solid var(--line); text-align: left; color: var(--text);
}
.conv:first-child { border-top: 0; }
.conv__cos { min-width: 0; }
.conv__cos b { display: block; font-weight: 600; font-size: .94rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv__cos small { display: block; font-size: .78rem; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv--fora .av, .conv--fora .conv__cos { opacity: .6; }
.num { font-style: normal; font-family: var(--display); font-weight: 700; color: var(--accent-hi); }
.cobra { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: .9rem; color: var(--mute); }
.cobra b { color: var(--text); font-family: var(--display); font-size: 1.25rem; }
.marcador { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; }
.marcador label { display: grid; gap: 6px; text-align: center; min-width: 0; }
.marcador span { font-size: .8rem; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marcador input {
  width: 100%; min-height: 72px; text-align: center; color: var(--text);
  font-family: var(--display); font-weight: 700; font-size: 2.4rem;
  background: var(--ink-3); border: 1px solid var(--line-2); border-radius: 14px; -webkit-appearance: none; appearance: none;
}
.marcador input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.marcador b { font-family: var(--display); font-size: 2rem; color: var(--mute); padding-bottom: 14px; }

/* Taules (estadístiques, acta, classificació) */
.taula-w { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
.taula { width: 100%; border-collapse: collapse; font-size: .86rem; background: var(--ink-2); border-radius: 14px; overflow: hidden; }
.taula th { text-align: left; font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--mute); padding: 9px 10px; background: var(--ink-3); white-space: nowrap; }
.taula td { padding: 9px 10px; border-top: 1px solid var(--line); white-space: nowrap; }
.taula td small { color: var(--mute); }
.taula tr.nostre td { background: var(--accent-soft); font-weight: 600; }
.acta { margin-top: 10px; }
.acta summary { list-style: none; cursor: pointer; }
.acta summary::-webkit-details-marker { display: none; }
.acta .taula-w { margin: 0; padding: 0; border-top: 1px solid var(--line); }
.acta .taula { border-radius: 0; }

/* Fotos i QR */
.qr-caixa { display: grid; grid-template-columns: 128px 1fr; gap: 14px; align-items: center; }
.qr { width: 128px; height: 128px; border-radius: 12px; background: #fff; padding: 6px; }
.qr-caixa p { margin: 0 0 10px; font-size: .88rem; color: var(--mute); }
.qr-caixa .btn { min-height: 40px; font-size: .85rem; padding: 0 10px; }
.fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.fotos__f { position: relative; }
.fotos__f img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--ink-3); }
.fotos__f button {
  position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border-radius: 50%; border: 0;
  display: grid; place-items: center; background: rgba(0, 0, 0, .6); color: #fff;
}
.fotos__f button svg { width: 16px; height: 16px; }
.puja { position: relative; overflow: hidden; }
.puja input { position: absolute; inset: 0; opacity: 0; font-size: 0; }
.portada { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; background: var(--ink-3); }

/* Equips */
.equip-g { display: grid; grid-template-columns: 6px 1fr 18px; gap: 14px; align-items: center; padding: 14px 14px 14px 0; text-decoration: none; overflow: hidden; }
.equip-g .equip__color { height: 100%; border-radius: 0 6px 6px 0; }
.equip-g h2 { margin: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.3rem; line-height: 1; }
.equip-g p { margin: 4px 0 10px; font-size: .8rem; color: var(--mute); }
.equip-g > svg { width: 18px; height: 18px; color: var(--subtle); }
.avatars { display: flex; align-items: center; }
.avatars .av { width: 30px; height: 30px; font-size: .72rem; box-shadow: 0 0 0 2px var(--ink-2); }
.avatars .av + .av { margin-left: -8px; }
.avatars em { font-style: normal; font-size: .78rem; color: var(--mute); margin-left: 8px; }
.eq-cap { position: relative; overflow: hidden; padding: 18px 16px 16px 22px; border-radius: 20px; background: var(--ink-2); border: 1px solid var(--line-2); }
.eq-cap::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--eqc, var(--accent)); }
.eq-cap h1 { margin: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 2rem; line-height: .95; }
.eq-cap p { margin: 10px 0 0; color: var(--mute); font-size: .9rem; }
.eq-cap .pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.roster--g { padding: 6px 0; }
.roster--g li { display: block; padding: 0; }
.roster__btn {
  display: grid; grid-template-columns: 34px 42px 1fr auto; gap: 10px; align-items: center; width: 100%;
  padding: 8px 16px; background: none; border: 0; color: var(--text); text-align: left;
}
.roster__btn:active { background: var(--ink-3); }

/* Àrea social */
.acte-g { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; padding: 8px; text-decoration: none; }
.acte-g img, .acte-g__buit { display: block; width: 84px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--ink-3); }
.acte-g b { display: block; font-weight: 650; line-height: 1.25; }
.acte-g small { display: block; color: var(--mute); font-size: .8rem; margin-top: 3px; }

/* Eliminar lliscant cap a l'esquerra (G.swipe) · sempre amb confirmació
   t = fila solta (targeta) · g = fila dins d'un .grup o d'una plantilla */
.swipe { position: relative; overflow: hidden; }
.swipe--t { border-radius: 16px; }
.swipe--t + .swipe--t { margin-top: 8px; }
.grup > * + .swipe--g { border-top: 1px solid var(--line); }
.swipe--g .swipe__cos { background: var(--ink-2); }
.swipe__del {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 0 16px; border: 0; background: var(--no); color: #fff; font-weight: 700; font-size: .92rem;
  opacity: 0; transition: opacity .15s;
}
.swipe__del svg { width: 20px; height: 20px; }
.swipe--actiu .swipe__del { opacity: 1; }
.swipe--total .swipe__del { justify-content: center; }
.swipe__cos { position: relative; touch-action: pan-y; transition: transform .24s var(--ease); }
.swipe__cos a, .swipe__cos img { -webkit-user-drag: none; }
.swipe--mou .swipe__cos { transition: none; -webkit-user-select: none; user-select: none; }
.swipe--fora { opacity: .35; pointer-events: none; transition: opacity .2s; }
.swipe .fila, .swipe .gfila, .swipe .card { margin-top: 0; }
.pista-swipe { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0; font-size: .78rem; color: var(--subtle); }
.pista-swipe svg { width: 14px; height: 14px; }

/* «Veure com» (administradors): franja fixa a dalt. --top creix, i així la barra,
   les fitxes, les fulles i les portes baixen totes soles per sota de la franja. */
body.mode-vista { --top: calc(env(safe-area-inset-top, 0px) + 36px); }
.vista-com {
  position: fixed; left: 0; right: 0; top: 0; z-index: 99;
  height: calc(env(safe-area-inset-top, 0px) + 36px); padding: env(safe-area-inset-top, 0px) 8px 0 14px;
  display: flex; align-items: center; gap: 8px;
  background: #2563EB; color: #fff; font-size: .84rem;
}
.vista-com svg { width: 17px; height: 17px; flex: none; }
.vista-com span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vista-com button {
  flex: none; height: 26px; padding: 0 14px; border: 0; border-radius: 99px;
  background: #fff; color: #1D4ED8; font-weight: 700; font-size: .8rem;
}
body.mode-vista .barra { border-bottom-color: rgba(37, 99, 235, .55); }

/* Notificacions (campaneta de la barra) */
.notifs { display: grid; gap: 8px; }
.notif {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: start; width: 100%;
  padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--ink-2);
  color: var(--text); text-align: left; transition: transform .12s var(--ease);
}
.notif:active { transform: scale(.985); }
.notif--nova { background: linear-gradient(135deg, rgba(var(--accent-rgb), .13), var(--ink-2) 62%); border-color: rgba(var(--accent-rgb), .35); }
.notif__ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ink-3); color: var(--mute); }
.notif__ico svg { width: 20px; height: 20px; }
.notif__ico--ok { color: var(--ok); background: var(--ok-soft); }
.notif__ico--no { color: var(--no); background: var(--no-soft); }
.notif__ico--accent { color: var(--accent-hi); background: var(--accent-soft); }
.notif__cos { min-width: 0; }
.notif__cos b { display: block; font-weight: 650; font-size: .95rem; line-height: 1.3; }
.notif__cos span { display: block; margin-top: 3px; font-size: .84rem; color: var(--mute); line-height: 1.35; }
.notif__temps { display: grid; justify-items: end; gap: 7px; font-size: .74rem; color: var(--subtle); white-space: nowrap; }
.notif__temps i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }

.dades { display: grid; gap: 0; }
.dada { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
.dada:first-child { border-top: 0; }
.dada svg { width: 20px; height: 20px; color: var(--mute); flex: none; margin-top: 1px; }
.dada div { flex: 1; min-width: 0; }
.dada small { display: block; font-size: .76rem; color: var(--mute); }
.dada span { font-size: .96rem; }
.dada a { color: var(--accent-hi); font-weight: 600; text-decoration: none; }

.porta {
  position: fixed; inset: 0; z-index: 70; overflow-y: auto; background: var(--ink);
  padding: calc(var(--top) + 22px) 16px calc(var(--bottom) + 28px);
}
.porta__in { max-width: var(--ample); margin: 0 auto; display: grid; gap: 14px; }
.porta h1 { margin: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 2rem; line-height: .95; }
.porta p { margin: 0; color: var(--mute); font-size: .95rem; }
.legaldoc { background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.legaldoc summary { list-style: none; padding: 14px 16px; display: grid; gap: 2px; cursor: pointer; }
.legaldoc summary::-webkit-details-marker { display: none; }
.legaldoc__titol { font-weight: 650; }
.legaldoc__curt { font-size: .82rem; color: var(--mute); }
.legal { padding: 0 16px 16px; font-size: .88rem; color: var(--mute); max-height: 46vh; overflow-y: auto; }
.legal h3 { color: var(--text); font-size: .95rem; margin: 16px 0 6px; }
.legal p, .legal li { margin: 0 0 8px; }
.legal ul { padding-left: 18px; }
.check {
  display: flex; gap: 12px; align-items: center; padding: 12px 14px; min-height: 52px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; font-size: .92rem;
}
.check input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; margin: 0; }
.alta-foto { display: flex; align-items: center; gap: 16px; }

/* ---------- Instal·lar ---------- */
.instal {
  display: flex; gap: 12px; align-items: center; padding: 12px 12px 12px 14px; margin: 0 0 14px;
  background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 16px;
}
.instal img { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.instal div { flex: 1; min-width: 0; font-size: .86rem; color: var(--mute); line-height: 1.35; }
.instal b { display: block; color: var(--text); font-size: .95rem; }
.instal .tanca { width: 34px; height: 34px; border: 0; background: none; color: var(--subtle); display: grid; place-items: center; flex: none; }
.instal .tanca svg { width: 18px; height: 18px; }
.ios-share { display: inline-block; width: 15px; height: 15px; vertical-align: -2px; }

/* ---------- Estirar per refrescar ---------- */
.ptr {
  position: fixed; left: 50%; z-index: 45; top: calc(var(--top) + 78px);
  width: 36px; height: 36px; margin-left: -18px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink-4); color: var(--accent-hi);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
  transform: translateY(-80px); opacity: 0; transition: opacity .15s;
  pointer-events: none;
}
.ptr svg { width: 18px; height: 18px; }
.ptr.gira svg { animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 16px; right: 16px; z-index: 80;
  bottom: calc(var(--tabsh) + var(--bottom) + 14px);
  max-width: 420px; margin: 0 auto; padding: 13px 16px; border-radius: 14px;
  background: var(--text); color: var(--ink); font-weight: 600; font-size: .92rem;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5); animation: puja .22s var(--ease);
}
.toast--no { background: var(--no); color: #fff; }

/* ---------- Esquelet mentre carrega ---------- */
.esq { border-radius: 16px; background: linear-gradient(90deg, var(--ink-2) 25%, var(--ink-3) 50%, var(--ink-2) 75%); background-size: 200% 100%; animation: brilla 1.2s infinite; }
@keyframes brilla { to { background-position: -200% 0; } }

@media (min-width: 700px) {
  .vista { padding-top: 26px; }
  .cap h1 { font-size: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- invitació al club (enllaç de grup) ---------- */
.entrada__eyebrow { margin: 0 0 -6px; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-hi); }
.entrada .inv-fet { width: 100%; max-width: 420px; margin: 0 auto; display: grid; gap: 14px; justify-items: center; text-align: center; }
.entrada .inv-fet > .btn, .entrada .inv-fet > .esq, .entrada .inv-fet > .nota-avis { justify-self: stretch; }
.entrada .inv-fet > .esq { width: 100%; }
.entrada .nota a { color: var(--accent-hi); font-weight: 600; text-decoration: none; }
.entrada .camp small { font-weight: 400; color: var(--subtle); text-transform: none; letter-spacing: 0; }
.entrada .inv-peu { font-size: .82rem; text-align: center; }
.inv-ico { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-hi); }
.inv-ico svg { width: 32px; height: 32px; }
.inv-ico--ok { background: var(--ok-soft); color: var(--ok); }
.inv-ico--no { background: var(--no-soft); color: var(--no); }
.inv-cap { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--accent-soft); margin-bottom: 14px; }
.inv-cap > svg { width: 22px; height: 22px; flex: none; color: var(--accent-hi); margin-top: 2px; }
.inv-cap b { display: block; margin-bottom: 4px; }
.inv-cap p { margin: 0; font-size: .88rem; color: var(--mute); line-height: 1.45; }
.inv-card { margin-bottom: 12px; }
.inv-card__et { margin: 0 0 6px; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--subtle); }
.inv-enllac { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; line-height: 1.45; word-break: break-all; }

/* ---------- logos d'àrea (bàsquet: escut del club · gastronomia: Gastroclub) ---------- */
.escut--eq { width: 44px; height: 44px; flex: none; }
.equip-g--logo { grid-template-columns: 6px 44px 1fr 18px; }
.eq-cap--logo { padding-right: 96px; }
.escut--cap { position: absolute; top: 14px; right: 14px; width: 68px; height: 68px; }

/* ---------- benvinguda: instal·lar l'app i activar els avisos ---------- */
.benv {
  position: fixed; inset: 0; z-index: 78; display: grid; place-items: end center; /* sobre les fulles (75), sota els toasts (80) */
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  background: rgba(6, 7, 9, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: benv-fons .25s ease-out;
}
@media (min-width: 560px) { .benv { place-items: center; } }
.benv--surt { opacity: 0; transition: opacity .2s; }
.benv__caixa {
  position: relative; width: 100%; max-width: 420px; max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 26px 18px 16px; border-radius: 26px; text-align: center;
  background: linear-gradient(160deg, #2A1B08 0%, var(--ink-2) 48%); border: 1px solid var(--line-2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6); animation: benv-puja .4s cubic-bezier(.2, .9, .3, 1.15);
}
.benv__x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: none; color: var(--mute); display: grid; place-items: center; }
.benv__x svg { width: 22px; height: 22px; }
.benv__logo { display: block; width: 104px; height: 104px; margin: 0 auto 4px; filter: drop-shadow(0 10px 26px rgba(var(--accent-rgb), .35)); }
.benv__sup { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-hi); }
.benv h2 { margin: 6px 0 8px; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 2rem; line-height: .95; }
.benv__text { margin: 0 0 16px; color: var(--mute); font-size: .92rem; line-height: 1.45; }
.benv__pas { display: flex; align-items: center; gap: 12px; padding: 12px; margin-top: 10px; border-radius: 16px; background: var(--ink-3); border: 1px solid var(--line-2); text-align: left; }
.benv__pas > div { flex: 1; min-width: 0; }
.benv__pas b { display: block; font-size: .96rem; }
.benv__pas small { display: block; margin-top: 2px; color: var(--mute); font-size: .8rem; line-height: 1.35; }
.benv__num { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 1.05rem; background: var(--accent-soft); color: var(--accent-hi); }
.benv__pas--fet .benv__num { background: var(--ok-soft); color: var(--ok); }
.benv__pas .btn { flex: none; }
.benv__estat { flex: none; font-size: .8rem; font-weight: 700; color: var(--ok); white-space: nowrap; }
.benv__estat--no { color: var(--mute); font-weight: 600; }
.benv__guia { margin: 8px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); text-align: left; font-size: .86rem; color: var(--mute); line-height: 1.5; }
.benv__guia ol { margin: 0; padding-left: 18px; }
.benv__guia b { color: var(--text); }
.benv__peu { margin-top: 14px; display: grid; }
.benv__ara-no { border: 0; background: none; color: var(--mute); font: inherit; font-size: .92rem; padding: 10px; }
@keyframes benv-fons { from { opacity: 0; } }
@keyframes benv-puja { from { opacity: 0; transform: translateY(40px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .benv, .benv__caixa { animation: none; } }

/* ---------- Partits (els meus / tot l'esport) i Resultats (tot el club) ---------- */
.seg--abast { margin-bottom: 10px; }
.esports { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 12px; padding: 2px 0; scrollbar-width: none; }
.esports::-webkit-scrollbar { display: none; }
.esport {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 16px 6px 6px;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--mute);
  font: inherit; font-weight: 650; font-size: .92rem;
}
.esport img { width: 34px; height: 34px; border-radius: 50%; background: var(--ink-3); object-fit: cover; }
.esport[aria-pressed="true"] { background: var(--text); color: var(--ink); border-color: var(--text); }
.esport[aria-pressed="true"] img { background: var(--ink); }

/* Editor de partit · «Nou pavelló» just sota el desplegable */
.btn--nou-lloc { justify-self: start; margin-top: -4px; }

/* Resultats · selector de temporada */
.temporada { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 6px 6px 6px 14px; border-radius: 14px; background: var(--ink-2); border: 1px solid var(--line-2); }
.temporada span { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.temporada select {
  -webkit-appearance: none; appearance: none; min-width: 0; max-width: 70%; border: 0; border-radius: 10px; padding: 9px 34px 9px 12px;
  font: inherit; font-weight: 650; color: var(--text); background: var(--ink-3) no-repeat right 10px center / 14px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A2A8B2' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- barra de sota: seccions del soci (logo de cada àrea) ---------- */
.tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab__logo { width: 27px; height: 27px; border-radius: 50%; object-fit: cover; background: var(--ink-3); filter: grayscale(.6) brightness(.8); transition: filter .15s, box-shadow .15s; }
.tab[aria-current="page"] .tab__logo { filter: none; box-shadow: 0 0 0 2px var(--accent-hi); }
.tabs--moltes .tab { font-size: .56rem; letter-spacing: 0; }
.tabs--moltes .tab svg { width: 22px; height: 22px; }
.tabs--moltes .tab__logo { width: 24px; height: 24px; }
/* capçalera i pestanyes de secció */
.cap__logo { width: 1.15em; height: 1.15em; border-radius: 50%; background: var(--ink-3); vertical-align: -.16em; margin-right: .28em; object-fit: cover; }
.seg--seccio { overflow-x: auto; scrollbar-width: none; }
.seg--seccio::-webkit-scrollbar { display: none; }
.seg--seccio button { white-space: nowrap; font-size: .84rem; padding-left: 8px; padding-right: 8px; }

/* ---------- Tauler · mòduls del club (lliga 2+1, temporada activa, socis) ---------- */
.moduls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 14px; }
.modul { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 14px; border-radius: 18px; background: var(--ink-2); border: 1px solid var(--line-2); color: inherit; text-decoration: none; }
.modul--ample { grid-column: 1 / -1; }
.modul__cap { display: flex; align-items: center; gap: 8px; color: var(--mute); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.modul__cap svg { width: 18px; height: 18px; flex: none; color: var(--accent-hi); }
.modul__cap b { flex: 1; min-width: 0; font-weight: 700; }
.modul__cap .pill { text-transform: none; letter-spacing: 0; }
.modul__xifra { margin: 4px 0 0; font-family: var(--display); font-weight: 700; font-size: 1.8rem; line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.modul__sub { margin: 0; color: var(--mute); font-size: .82rem; line-height: 1.35; }
.modul .btn { margin-top: 10px; }
/* Escriptori: columnes segons l'amplada real (amb 2fr 1fr 1fr la targeta d'Interclubs quedava sota la següent) */
@media (min-width: 720px) { .moduls { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .modul--ample { grid-column: auto; } }
.modul { overflow: hidden; }
.modul__cap { flex-wrap: wrap; }
.modul .btn { white-space: normal; text-align: center; }

/* ---------- Pitch & Putt · jornada (sense rival): equip, camp i punts ---------- */
.gran__jornada { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 16px 0 12px; }
.gran__jornada-cos { display: grid; gap: 5px; min-width: 0; }
.gran__jornada-cos .eq__nom { text-align: left; }
.gran__camp { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--mute); font-size: .86rem; }
.gran__camp svg { width: 15px; height: 15px; flex: none; }
.marc--punts small { font-size: .55em; margin-left: 3px; opacity: .7; font-weight: 600; }
[data-gnojornada][hidden] { display: none !important; }

/* ---------- capçalera de cada esport: imatge de fons enfosquida, esport a l'esquerra, logos a la dreta ---------- */
.seccio-hero {
  display: grid; grid-template-columns: 1fr auto; align-items: stretch; gap: 12px; min-height: 168px; margin: 4px 0 14px;
  padding: 18px; border-radius: 22px; border: 1px solid var(--line-2); overflow: hidden;
  background-color: var(--ink-2); background-size: cover; background-position: center;
}
.seccio-hero__cos { display: grid; align-content: space-between; gap: 10px; min-width: 0; }
.seccio-hero h1 { margin: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 2.4rem; line-height: .95; color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .55); }
.seccio-hero__equip { margin: 0; font-weight: 650; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); overflow-wrap: anywhere; }
.seccio-hero__temporada { margin: 3px 0 0; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-hi); }
.seccio-hero__logos { display: flex; align-items: flex-start; gap: 6px; }
.seccio-hero__logos img { width: 66px; height: 66px; border-radius: 50%; background: rgba(9, 11, 14, .6); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
/* Gestió · capçaleres dels esports */
.capcalera-g { margin-bottom: 12px; padding: 10px; }
.capcalera-g__img { display: grid; align-content: end; gap: 2px; min-height: 110px; padding: 12px; border-radius: 14px; background-size: cover; background-position: center; color: #fff; }
.capcalera-g__img b { font-family: var(--display); font-size: 1.5rem; text-transform: uppercase; line-height: 1; }
.capcalera-g__img small { opacity: .75; }
.capcalera-g .btns { margin-top: 10px; }

/* Capa fosca de la capçalera d'esport: una capa pròpia que cobreix sempre tota la capçalera
   (dins la imatge de fons, amb background-size: cover, no quedava ben ajustada). Més fosca a
   l'esquerra, on hi ha el text, i a baix. */
.seccio-hero, .capcalera-g__img { position: relative; isolation: isolate; background-image: var(--fons); background-size: cover; background-position: center; }
.seccio-hero::before, .capcalera-g__img::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(9, 11, 14, .66) 0%, rgba(9, 11, 14, .22) 62%, rgba(9, 11, 14, .12) 100%),
    linear-gradient(180deg, rgba(9, 11, 14, .30) 0%, rgba(9, 11, 14, .18) 42%, rgba(9, 11, 14, .86) 100%);
}

/* ---------- Gastro · esdeveniments ---------- */
.gastro-card { padding: 0; overflow: hidden; }
.gastro-card__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ink-3); }
.gastro-card__cos { display: grid; gap: 6px; padding: 14px; }
.gastro-card__cos h3 { margin: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.45rem; line-height: 1; }
.gastro-card__meta { margin: 0; color: var(--mute); font-size: .86rem; }
.gastro-card .pills-l, .pills-l { display: flex; flex-wrap: wrap; gap: 6px; }
.gastro-portada { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; margin: 0 0 12px; background: var(--ink-3); }
.gastro-article p { margin: 0 0 12px; line-height: 1.6; }
.gastro-avatars { display: flex; flex-wrap: wrap; gap: 12px; }
.gastro-avatars > span { display: grid; justify-items: center; gap: 4px; width: 62px; font-size: .72rem; color: var(--mute); text-align: center; }
.btn--gestio { margin-top: 12px; border: 1px dashed var(--accent-hi); color: var(--accent-hi); background: transparent; }
.tria-conv input[type=checkbox] { margin-left: auto; width: 22px; height: 22px; flex: none; accent-color: var(--accent); }
.tria-conv[hidden] { display: none !important; }
/* color de cada àrea (Gestió → Àrees de l'app) */
/* sense vora: la vora deixava veure la foto sense enfosquir tot al voltant */
.seccio-hero { border: 0; }
/* franja de color a l'esquerra (com la data dels partits a Gestió), per sobre de la capa fosca */
.seccio-hero::after, .capcalera-g__img::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; z-index: -1; pointer-events: none;
  background: var(--area, var(--accent-hi));
}
.seccio-hero__temporada { color: var(--area, var(--accent-hi)); }

/* ---------- Gastro: membres sense dorsal ---------- */
.roster--sensenum li { grid-template-columns: 42px 1fr auto; }

/* ---------- taules estretes (Interclubs): el nom de l'equip salta de línia, sense desplaçament lateral ---------- */
.taula td.td-nom { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
.taula--ajust th, .taula--ajust td { padding: 8px 7px; }
.taula--ajust th:first-child, .taula--ajust td:first-child { padding-left: 10px; }
/* Taules d'imports: han de poder llegir-se en columna. Alineats a la dreta i amb
   dígits de la mateixa amplada; si no, «4,40 €» i «39,60 €» queden desquadrats. */
.taula--num th:not(:first-child), .taula--num td:not(.td-nom) { text-align: right; font-variant-numeric: tabular-nums; }
.taula--num .td-nom small { display: block; font-size: .72rem; margin-top: 1px; }
.taula--num td.deute { color: var(--no, #E5484D); font-weight: 600; }
/* Franges proposades per a una junta sense dia: la fila sencera és el botó. */
.franja {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2);
  background: var(--ink-2); color: var(--text);
}
.franja span { display: grid; gap: 1px; min-width: 0; flex: 1; }
.franja small { color: var(--mute); font-size: .78rem; }
.franja i {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--mute); font-style: normal; font-weight: 700;
}
.franja--meu { border-color: var(--accent); }
.franja--meu i { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* Resultats d'una enquesta de la Junta. */
.barra-enq { height: 8px; border-radius: 99px; background: var(--ink-3); overflow: hidden; }
.barra-enq i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }

/* ---------- Pitch & Putt · Destacat ---------- */
.destacat-pp {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; text-align: left; color: inherit; font: inherit; cursor: pointer;
}
.destacat-pp__xifra { display: grid; justify-items: center; line-height: 1; min-width: 44px; }
.destacat-pp__xifra b { font-family: var(--display); font-weight: 700; font-size: 1.9rem; }
.destacat-pp__xifra--pos b { color: var(--accent-hi); }
.destacat-pp small { color: var(--mute); font-size: .74rem; margin-top: 3px; }
.destacat-pp__cos { display: grid; gap: 3px; min-width: 0; }
.destacat-jug { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.destacat-jug > div { display: grid; gap: 2px; min-width: 0; }
.destacat-jug small { color: var(--mute); font-size: .78rem; }

/* ---------- logos dels rivals: escut o, si no en té, foto de l'equip ---------- */
.escut img.img-foto, .fila__rival img.img-foto { object-fit: cover; border-radius: 50%; }
.clas-logo { width: 22px; height: 22px; margin: -3px 7px -3px 0; vertical-align: middle; object-fit: contain; border-radius: 50%; background: var(--ink-3); }
.clas-logo.img-foto { object-fit: cover; }

/* ---------- botó de foto a la capçalera de cada secció (admins i gestors de l'àrea) ---------- */
.seccio-hero__foto {
  position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); background: rgba(9, 11, 14, .55); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.seccio-hero__foto svg { width: 18px; height: 18px; }
.seccio-hero__foto:active { transform: scale(.94); }
.seccio-hero.pujant .seccio-hero__foto { opacity: .45; pointer-events: none; animation: puja-foto 1s ease-in-out infinite alternate; }
@keyframes puja-foto { to { opacity: .9; } }

/* ---------- pujada de fotos: barra d'estat, vista prèvia a l'instant i inserció ---------- */
.pujada { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--ink-3); transition: opacity .3s, transform .3s; }
.pujada__txt { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 7px; font-size: .84rem; }
.pujada__txt b { color: var(--accent-hi); font-variant-numeric: tabular-nums; }
.pujada__barra { height: 6px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.pujada__barra i { display: block; width: 3%; height: 100%; border-radius: inherit; background: var(--accent); transition: width .25s ease; }
.pujada--ok .pujada__barra i { background: var(--ok, #35c47a); }
.pujada--ok .pujada__txt b { color: var(--ok, #35c47a); }
.pujada--error .pujada__barra i { background: var(--no); }
.pujada--error .pujada__txt span { color: var(--no); }
.pujada--fora { opacity: 0; transform: translateY(-4px); }
.foto-entra { animation: foto-entra .35s ease both; }
@keyframes foto-entra { from { opacity: 0; transform: scale(.92); } }
img.foto-pujant, .fotos__f--pujant img { filter: brightness(.6) saturate(.8); }
img.sense-vista {
  min-height: 60px;
  background: var(--ink-3) linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .07) 50%, transparent 70%) 0 0 / 200% 100%;
  animation: foto-espera 1.2s linear infinite;
}
@keyframes foto-espera { to { background-position: -200% 0; } }
.fotos__f--pujant { pointer-events: none; }
.fotos__progres { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 5px; border-radius: 99px; background: rgba(0, 0, 0, .5); overflow: hidden; }
.fotos__progres i { display: block; width: 0; height: 100%; background: var(--accent-hi); transition: width .2s ease; }
.fotos__f--error img { filter: grayscale(1) brightness(.5); }
.fotos__error { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 3px 6px; border-radius: 8px; background: var(--no); color: #fff; font-size: .68rem; line-height: 1.2; text-align: center; }

/* ---------- Bàsquet · Destacat (un bloc per equip) ---------- */
.destacat-bloc + .destacat-bloc { margin-top: 28px; padding-top: 8px; border-top: 1px solid var(--line); }
.destacat-equip { display: flex; align-items: center; gap: 10px; margin: 14px 0 -6px; font-family: var(--display); font-weight: 700; font-size: 1.4rem; line-height: 1; text-transform: uppercase; }
.destacat-equip span { min-width: 0; }
.xips--destacat { margin: 0 0 4px; }

/* ---------- Leaders: una card per categoria, amb la foto (separats de la classificació) ---------- */
.seg--sub { margin: 0 0 12px; }
.leaders { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; margin-top: 10px; }
.leader { display: grid; align-content: start; gap: 12px; padding: 14px; }
.leader--podi { border-color: rgba(var(--accent-rgb), .45); background: linear-gradient(160deg, rgba(var(--accent-rgb), .14), var(--ink-2) 60%); }
.leader__cap { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.leader__cap b { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-hi); }
.leader__cap small { font-size: .72rem; color: var(--mute); text-align: right; }
.leader__top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.leader__foto { position: relative; width: 64px; height: 64px; }
.leader__foto img, .leader__foto i {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  background: var(--ink-3); color: var(--mute); font-style: normal; font-weight: 700; box-shadow: 0 0 0 2px var(--line-2);
}
.leader--podi .leader__foto img, .leader--podi .leader__foto i { box-shadow: 0 0 0 2px var(--accent); }
.leader__pos { position: absolute; right: -6px; bottom: -4px; min-width: 28px; padding: 2px 6px; border-radius: 99px; background: var(--accent); color: #111; font-style: normal; font-size: .7rem; font-weight: 800; text-align: center; }
.leader__qui { display: grid; gap: 3px; min-width: 0; }
.leader__qui b { font-size: 1rem; line-height: 1.2; overflow-wrap: anywhere; }
.leader__qui small { font-size: .76rem; line-height: 1.3; color: var(--mute); }
.leader__xifra { display: grid; justify-items: end; line-height: 1; }
.leader__xifra b { font-family: var(--display); font-weight: 700; font-size: 2rem; }
.leader__xifra small { margin-top: 3px; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.leader__sub { margin: 0; padding-top: 9px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--mute); }
.leader__sub b { color: var(--text); }
.leader__llista { display: grid; gap: 7px; margin: 0; padding: 9px 0 0; border-top: 1px solid var(--line); list-style: none; }
.leader__llista li { display: grid; grid-template-columns: 30px 28px 1fr auto; align-items: center; gap: 8px; font-size: .86rem; }
.leader__n { font-family: var(--display); font-weight: 700; color: var(--mute); text-align: center; }
.leader__mini { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: var(--ink-3); color: var(--mute); font-size: .64rem; font-weight: 700; }
.leader__mini img { width: 100%; height: 100%; object-fit: cover; }
.leader__nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Galeria de cada secció: grups de fotos amb títol i descripció ---------- */
.gal-grups, .gal-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gal-grup {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden; padding: 0; border: 1px solid var(--line);
  border-radius: 16px; background: var(--ink-2); color: #fff; text-align: left; font: inherit; cursor: pointer;
}
.gal-grup img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gal-grup__buit { display: grid; place-items: center; width: 100%; height: 100%; color: var(--mute); }
.gal-grup__buit svg { width: 30px; height: 30px; }
.gal-grup__peu { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 28px 10px 9px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .8)); }
.gal-grup__peu b { font-size: .92rem; line-height: 1.2; }
.gal-grup__peu small { font-size: .72rem; opacity: .8; }
.gal-foto { position: relative; margin: 0; }
.gal-foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--ink-3); }
.gal-foto figcaption { margin-top: 5px; font-size: .78rem; line-height: 1.35; color: var(--mute); overflow-wrap: anywhere; }
.gal-foto__acc { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.gal-foto__acc button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; }
.gal-foto__acc svg { width: 15px; height: 15px; }
.xips--wrap { flex-wrap: wrap; overflow: visible; }
.gal-puja__titol { display: grid; gap: 6px; margin-top: 12px; }
.gal-puja__titol input { height: 46px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--ink-3); color: var(--text); font: inherit; font-size: 1rem; }
.gal-puja__llista { display: grid; gap: 8px; }
.gal-puja__fila {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 10px; padding: 8px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2); transition: opacity .2s, border-color .2s;
}
.gal-puja__thumb { display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; border-radius: 10px; background: var(--ink-3); color: var(--mute); font-size: .64rem; font-weight: 700; }
.gal-puja__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gal-puja__thumb i { font-style: normal; }
.gal-puja__fila input { width: 100%; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--ink-3); color: var(--text); font: inherit; font-size: 1rem; }
.gal-puja__treu { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--ink-3); color: var(--mute); cursor: pointer; }
.gal-puja__treu svg { width: 15px; height: 15px; }
.gal-puja__fila--pujant { opacity: .6; }
.gal-puja__fila--ok { border-color: rgba(53, 196, 122, .6); }
.gal-puja__fila--error { border-color: var(--no); }

/* ---------- Perfil · calendari subscrit ---------- */
.calendari { display: grid; gap: 10px; padding: 14px; }
.calendari__txt { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--mute); }
.calendari__tria { margin: 2px 0 0; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.calendari__opcions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.calendari__opcions .btn { min-height: 46px; justify-content: center; font-size: .88rem; text-align: center; }
.enllac { padding: 0; border: 0; background: none; color: var(--accent-hi); font: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- Després del partit: resultat, fotos i portada ---------- */
.partit-portada { display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 12px; object-fit: cover; border-radius: 18px; background: var(--ink-3); }
.postpartit { display: grid; gap: 12px; padding: 14px; }
/* Imatge del resultat per compartir al grup (gestors i administradors) */
.resimg-cta { display: flex; align-items: center; gap: 12px; padding: 14px; margin-top: 12px; color: var(--text); text-decoration: none; }
.resimg-cta > svg:first-child { width: 22px; height: 22px; flex: 0 0 auto; color: var(--accent); }
.resimg-cta > svg:last-child { width: 18px; height: 18px; flex: 0 0 auto; margin-left: auto; color: var(--subtle); }
.resimg-cta span { display: grid; gap: 2px; min-width: 0; }
.resimg-cta small { color: var(--mute); font-size: .82rem; }
.resimg { position: relative; width: 100%; max-width: 420px; margin: 0 auto 14px; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--ink-3); }
.resimg img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s var(--ease); }
.resimg--carregant img { opacity: .45; }
.resimg__esq { width: 100%; max-width: 420px; margin: 0 auto; aspect-ratio: 4 / 5; border-radius: var(--r); }
.resimg__spin { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--accent); animation: resimg-gira .8s linear infinite; }
@keyframes resimg-gira { to { transform: rotate(360deg); } }
.resimg__error { color: var(--no); text-align: center; }
.resimg__fotos { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.resimg__fotos::-webkit-scrollbar { display: none; }
.resimg__foto { flex: 0 0 auto; width: 76px; height: 76px; padding: 0; border-radius: var(--r-sm); overflow: hidden; border: 2px solid var(--line-2); background: var(--ink-3); color: var(--mute); font: 600 .72rem/1.2 var(--sans); cursor: pointer; }
.resimg__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.resimg__foto.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.resimg__foto--cap span { display: block; padding: 0 6px; }
.resimg__text { padding: 12px 14px; margin-top: 4px; }
.resimg__text small { color: var(--subtle); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.resimg__text p { margin: 4px 0 0; font-size: .9rem; line-height: 1.45; }
.resimg__puja { margin: 0 0 10px; }
.gran__comparteix { margin-top: 12px; }
/* Crònica i compartir, de costat */
.gran__accions { margin-top: 12px; }
.gran__accions .btn { width: 100%; }
.fila__comparteix { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-left: 6px; padding: 0; border: 0; border-radius: 50%; background: var(--accent-soft); color: var(--accent); cursor: pointer; flex: 0 0 auto; }
.fila__comparteix svg { width: 17px; height: 17px; }
/* Crònica i compartir, un al costat de l'altre dins la fila */
.fila__accions { display: flex; align-items: center; gap: 5px; }
.fila__accions .fila__comparteix { width: 30px; height: 30px; margin-left: 0; }
.fila__accions .fila__comparteix svg { width: 15px; height: 15px; }
/* Cròniques */
.cron-nova { margin: 0 0 12px; }
.cron-subtitol { margin: 4px 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.cron-card { position: relative; display: block; overflow: hidden; margin: 0 0 12px; padding: 0; color: var(--text); text-decoration: none; }
.cron-card__edita { position: absolute; top: 10px; right: 10px; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; }
.cron-card__edita svg { width: 18px; height: 18px; }
.cron-card__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ink-3); }
.cron-card__cos { padding: 12px 14px 14px; }
.cron-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 4px; font-size: .78rem; color: var(--mute); }
.cron-card h3 { margin: 0; font-family: var(--display); font-size: 1.35rem; line-height: 1.1; }
.cron-card__txt { margin: 6px 0 0; font-size: .9rem; line-height: 1.45; color: var(--mute); }
.cron-card__peu { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: .8rem; color: var(--subtle); }
.cron-card__peu > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cron-card__likes { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--mute); }
.cron-card__likes svg { width: 15px; height: 15px; }
.cron-card__likes.is-meu { color: var(--accent); }
.cron-card__likes.is-meu svg { fill: currentColor; }
.cron-avis { margin: 0 0 12px; }
.cron-slides-wrap { position: relative; }
.cron-slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--r); background: var(--ink-3); scrollbar-width: none; overscroll-behavior-x: contain; }
.cron-slides::-webkit-scrollbar { display: none; }
.cron-slide { flex: 0 0 100%; scroll-snap-align: start; }
.cron-slide img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cron-slides__n { position: absolute; top: 10px; right: 10px; padding: 3px 9px; border-radius: 99px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .75rem; font-weight: 600; pointer-events: none; }
.cron-slides__punts { display: flex; justify-content: center; gap: 6px; margin: 8px 0 0; }
.cron-slides__punts i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); transition: background .2s; }
.cron-slides__punts i.on { background: var(--accent); }
.cron__portada { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r); background: var(--ink-3); }
.cron__meta { margin: 14px 0 4px; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.cron h1 { margin: 0 0 12px; font-family: var(--display); font-size: 2rem; line-height: 1.05; overflow-wrap: anywhere; }
.cron__vincle { display: flex; align-items: center; gap: 10px; margin: 12px 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--ink-2); color: var(--text); font-size: .9rem; text-decoration: none; }
.cron__vincle svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--accent); }
.cron__vincle span { min-width: 0; }
.cron__vincle svg:last-child { margin-left: auto; color: var(--subtle); }
.cron__text { font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }
.cron__text p { margin: 0 0 12px; }
.cron__galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 14px 0 0; }
.cron__galeria img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.cron__accions { margin-top: 12px; }
.btn--like-on { color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.btn--like-on svg { fill: currentColor; }
/* Barra d'accions de la crònica, estil Instagram */
.cron-barra { display: flex; align-items: center; gap: 2px; margin: 12px -8px 0; }
.cron-barra__dreta { display: flex; align-items: center; gap: 0; margin-left: auto; }
.cron-ic { display: inline-flex; align-items: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 9px; border: 0; border-radius: 22px; background: none; color: var(--text); font: 700 .95rem var(--sans); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cron-ic svg { width: 26px; height: 26px; transition: transform .15s var(--ease); }
.cron-ic:active svg { transform: scale(.82); }
.cron-ic--cor.is-on { color: #ff3040; }
.cron-ic--cor.is-on svg { fill: currentColor; }
.cron-barra__dreta .cron-ic { min-width: 40px; height: 40px; padding: 0 8px; color: var(--mute); }
.cron-barra__dreta .cron-ic svg { width: 22px; height: 22px; }
.cron-likes { margin: 0 0 4px; font-size: .88rem; font-weight: 700; }
.cron-form textarea { min-height: 220px; }
.cron-fotos { padding: 14px; }
.cron-fotos__portada { display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 10px; object-fit: cover; border-radius: var(--r-sm); }
.xips--social { margin: 0 0 12px; }
/* Academy · 3x3 · tornejos (estil jornades de Pitch & Putt) */
.torneig { margin: 0 0 10px; text-decoration: none; }
.torneig > svg { width: 18px; height: 18px; color: var(--subtle); }
.torneig .torneig__equips { color: var(--text); font-weight: 600; }
.torneig-cap { padding: 14px 16px; margin: 0 0 4px; }
.torneig-cap h2 { margin: 2px 0 6px; font-family: var(--display); font-size: 1.7rem; line-height: 1.05; overflow-wrap: anywhere; }
.torneig-form__subt { margin: 10px 0 0; font-weight: 700; }
.torneig-part { display: grid; gap: 10px; padding: 12px 0 4px; border-top: 1px solid var(--line); }
/* Academy · 3x3 */
.info3x3 { overflow: hidden; margin: 0 0 12px; padding: 0; }
.info3x3__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ink-3); }
.info3x3__cos { padding: 14px 16px 16px; }
.info3x3__sup { margin: 0 0 2px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.info3x3 h3 { margin: 0 0 8px; font-family: var(--display); font-size: 1.5rem; line-height: 1.1; }
.info3x3 p:not(.info3x3__sup) { margin: 0 0 8px; font-size: .92rem; line-height: 1.5; color: var(--mute); }
.postpartit__txt { margin: 0; font-size: .9rem; color: var(--mute); }
.postpartit__marc { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; }
.postpartit__marc label { display: grid; gap: 6px; min-width: 0; }
.postpartit__marc span { overflow: hidden; font-size: .78rem; color: var(--mute); text-overflow: ellipsis; white-space: nowrap; }
.postpartit__marc b { padding-bottom: 12px; font-family: var(--display); font-size: 1.6rem; color: var(--mute); }
.postpartit__marc input {
  width: 100%; height: 58px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--ink-3); color: var(--text);
  font-family: var(--display); font-size: 1.9rem; font-weight: 700; text-align: center;
}
.postpartit__marc input:only-child { grid-column: 1 / -1; }
.fotos__f--portada img { box-shadow: 0 0 0 2px var(--accent); }
.fotos__portada { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 99px; background: var(--accent); color: #111; font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.fotos__f .fotos__estrella { left: 4px; right: auto; }

/* ---------- D'on ve el resultat (el de la competició preval) ---------- */
.res-font { display: flex; align-items: center; gap: 6px; margin: 12px 4px 14px; font-size: .78rem; line-height: 1.35; color: var(--mute); }
.res-font svg { width: 15px; height: 15px; flex: none; }
.res-font--oficial { color: var(--ok, #35c47a); font-weight: 650; }

/* ---------- Pantalla bloquejant de la fitxa · foto de la cara ---------- */
.alta-foto__txt { display: grid; gap: 4px; min-width: 0; }
.alta-foto__txt small { font-size: .82rem; line-height: 1.4; color: var(--mute); }

/* ---------- Insígnia blava: dades personals verificades ---------- */
.verif { display: inline-block; flex: none; width: 1.05em; height: 1.05em; margin-left: .28em; vertical-align: -.16em; }
h1 .verif { width: .8em; height: .8em; vertical-align: -.06em; }

/* ---------- iOS: la barra de dalt fora del flux ----------
   En fer scroll, la barra s'encongeix (70 → 56 px). Com que era sticky, aquest canvi d'alçada movia tota la pàgina
   mentre el dit encara la desplaçava i Safari (iPhone) dibuixava el menú de sota a mitja pantalla. Ara és fixa i el
   contingut ja en deixa l'espai: encongir-se no mou res. El menú de sota va en una capa pròpia. */
#app > .barra { position: fixed; left: 0; right: 0; top: 0; }
#app > .vista { padding-top: calc(var(--top) + 71px + 18px); }
.tabs { -webkit-transform: translateZ(0); transform: translateZ(0); }

/* ---------- Quotes i pagaments (soci i gestió) ---------- */
.quota-card { display: grid; gap: 10px; margin-bottom: 10px; padding: 14px; }
.quota-card__cap, .quota-g__cap { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.quota-card__cap b, .quota-g__cap b { display: block; font-size: 1rem; line-height: 1.25; }
.quota-card__cap small, .quota-g__cap small { display: block; margin-top: 3px; font-size: .8rem; color: var(--mute); }
.quota-card__import, .quota-g__import { font-family: var(--display); font-size: 1.7rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.quota-pagada > svg:first-child { color: var(--ok, #35c47a); }
.quota-pagada > span { display: grid; gap: 2px; min-width: 0; }
.quota-pagada small { font-size: .78rem; color: var(--mute); }
.avis--link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.avis--ok .avis__t i { background: var(--ok, #35c47a); }
.quota-g { margin-bottom: 10px; padding: 14px; }
.quota-g__ex { display: grid; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.quota-g__ex .enllac { justify-self: start; }
.quota-g__exfila { display: grid; grid-template-columns: 10px 1fr auto 30px; align-items: center; gap: 8px; font-size: .88rem; }
.quota-g__exfila button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--ink-3); color: var(--mute); }
.quota-g__exfila button svg { width: 14px; height: 14px; }
.terminis { display: grid; gap: 8px; }
.termini { display: grid; grid-template-columns: 1fr 1.25fr 34px; align-items: center; gap: 8px; }
.termini input { width: 100%; min-width: 0; height: 44px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--ink-3); color: var(--text); font: inherit; font-size: 1rem; }
.termini input[readonly] { opacity: .7; }
.termini button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--ink-3); color: var(--mute); }
.termini button svg { width: 14px; height: 14px; }
.carrec-g em { display: grid; justify-items: end; gap: 3px; font-style: normal; }
.dades-q { display: grid; gap: 1px; overflow: hidden; border-radius: 14px; background: var(--line); }
.dades-q div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--ink-2); font-size: .9rem; }
.dades-q span { color: var(--mute); }

/* Gestió · Llocs: ubicació exacta per al calendari i «Com arribar» */
.lloc-geo { display: flex; gap: 8px; align-items: flex-start; margin: 2px 0 10px; color: var(--mute); }
.lloc-geo svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.lloc-geo--ok { color: var(--ok, #1a7f4b); }
.lloc-cand { margin: 8px 0 14px; }
.lloc-cand .grup__fila small.sub { white-space: normal; }

/* Comunicació · comunicats (Gestió) i missatge sencer (soci) */
.com-msg { padding: 18px 18px 14px; margin-bottom: 14px; }
.com-msg h2 { font-size: 1.28rem; line-height: 1.25; margin: 6px 0 12px; }
.com-msg__desti { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.com-msg__desti svg { width: 15px; height: 15px; }
.com-msg__text { font-size: 1rem; line-height: 1.55; overflow-wrap: anywhere; }
.com-msg__text a { color: var(--accent); text-decoration: underline; }
.com-msg__peu { margin: 12px 0 0; font-size: .82rem; color: var(--mute); }
.com-autor { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.com-autor img, .com-autor .com-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.com-autor b { display: block; font-size: .95rem; }
.com-autor small { color: var(--mute); font-size: .8rem; }
.com-av { width: 32px; height: 32px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; overflow: hidden; background: rgba(127,127,127,.16); font-weight: 700; font-size: .85rem; }
.com-av img { width: 100%; height: 100%; object-fit: cover; }
/* Dins una fila de llista, `.grup__fila span { flex: 1 }` l'estirava en ovals. */
.grup__fila > .com-av, .com-autor > .com-av, .com-autor > img { flex: none; }
.com-lector { cursor: default; }
.com-barra { height: 8px; border-radius: 99px; background: rgba(127,127,127,.16); overflow: hidden; margin: 2px 0 14px; }
.com-barra i { display: block; height: 100%; border-radius: inherit; background: var(--ok, #1a7f4b); transition: width .3s; }
.com-compte { margin: 4px 0 14px; padding: 10px 12px; border-radius: 12px; background: rgba(var(--accent-rgb), .1); font-size: .92rem; }
.com-nota { margin: 0 0 8px; }
.com-llista { max-height: 320px; overflow-y: auto; margin: -4px 0 12px; border: 1px solid rgba(127,127,127,.22); border-radius: 12px; }
.com-persona { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid rgba(127,127,127,.14); }
.com-persona:first-child { border-top: 0; }
.com-persona input { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.com-persona b { display: block; font-size: .95rem; font-weight: 600; }
.com-persona small { font-size: .78rem; color: var(--mute); }
.com-form .btn--gran svg { width: 18px; height: 18px; margin-right: 6px; }

/* Gastro · menú de la jornada (un plat per línia) */
.gastro-menu { padding: 6px 18px; text-align: center; }
.gastro-menu p { margin: 0; padding: 10px 0; font-size: 1rem; font-weight: 500; border-top: 1px solid rgba(127,127,127,.16); }
.gastro-menu p:first-child { border-top: 0; }

/* Gastro: membres sense columna de dorsal */
.roster--sensenum .roster__btn { grid-template-columns: 42px 1fr auto; }

/* Canvis sense desar: la pregunta va per sobre de qualsevol fulla */
.fulla-fons.pregunta-desar { z-index: 120; align-items: center; }
.pregunta-desar .fulla { border-radius: 20px; max-width: 420px; margin: 0 16px; }
.btns-desar { display: grid; gap: 8px; margin-top: 6px; }

/* Gastro · menú per seccions i imatge del menú */
.gastro-menu h3 { margin: 16px 0 2px; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.gastro-menu h3:first-child { margin-top: 8px; }
.gastro-menu h3 + p { border-top: 0; }
.gastro-menu__foto { display: block; margin: 12px 0 10px; }
.gastro-menu__foto img { display: block; width: 100%; border-radius: 12px; }

/* Retallar la foto de perfil */
html.retallant, html.retallant body { overflow: hidden; }
.retall { position: fixed; inset: 0; z-index: 140; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 16px; background: rgba(8, 9, 12, .94); touch-action: none; }
.retall__t { color: #fff; font-weight: 700; font-size: 1.05rem; text-align: center; }
.retall__t small { display: block; margin-top: 4px; font-size: .82rem; font-weight: 400; opacity: .72; }
.retall__marc { position: relative; overflow: hidden; border-radius: 16px; background: #000; cursor: grab; touch-action: none; }
.retall__marc:active { cursor: grabbing; }
.retall__marc img { position: absolute; left: 0; top: 0; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.retall__marc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5); pointer-events: none; }
.retall__zoom { width: min(84vw, 380px); accent-color: var(--accent); }
.retall__btns { display: flex; gap: 10px; width: min(84vw, 380px); }
.retall__btns .btn { flex: 1; }

/* Gastro · chefs (cercador desplegable) */
.gastro-card__meta svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.chefs__triats { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.chef-xip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 3px; border-radius: 999px; background: rgba(var(--accent-rgb), .14); font-size: .88rem; font-weight: 600; }
.chef-xip .av { width: 24px; height: 24px; flex: none; font-size: .62rem; }
.chef-xip button { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: rgba(127, 127, 127, .2); color: inherit; }
.chef-xip button svg { width: 12px; height: 12px; }
.chefs input[type="search"] { width: 100%; }
.chefs__llista { margin-top: 6px; max-height: 300px; overflow-y: auto; border: 1px solid rgba(127, 127, 127, .24); border-radius: 12px; }
.chefs__grup { margin: 0; padding: 9px 12px 4px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.chefs__opc { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 0; background: none; color: inherit; font-size: .95rem; text-align: left; }
.chefs__opc .av { width: 28px; height: 28px; flex: none; font-size: .7rem; }
.chefs__opc:active { background: rgba(127, 127, 127, .14); }
.chefs__buit { margin: 0; padding: 6px 12px 10px; font-size: .85rem; color: var(--mute); }
.chefs__altres { display: block; width: 100%; padding: 11px 12px; border: 0; border-top: 1px solid rgba(127, 127, 127, .16); background: none; color: var(--accent); font-weight: 600; text-align: left; }

/* Capçal: Comunicats (admins i gestors de secció) */
.barra__btn[hidden] { display: none !important; }

/* Resultats de tota la lliga i jornades pendents de publicar */
.nota-pendent { display: flex; gap: 6px; align-items: flex-start; margin: 10px 2px 0; }
.nota-pendent svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.res-lliga { cursor: default; }
.res-lliga em { font-weight: 700; font-style: normal; color: var(--text); }
.res-lliga--nostre { background: var(--accent-soft); }
/* Enfrontaments d'una jornada de tota la lliga: local i visitant, un a sobre de l'altre, amb el marcador a la dreta. */
.enfr { display: grid; gap: 8px; }
.enfr__p { display: grid; gap: 4px; padding: 11px 14px; border-radius: var(--r-sm); background: var(--ink-2); border: 1px solid var(--line); }
.enfr__p.res-lliga--nostre { background: var(--accent-soft); border-color: rgba(var(--accent-rgb), 0.35); }
.enfr__eq { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--mute); font-size: .96rem; }
.enfr__eq span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enfr__eq b { font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.enfr__eq--guanya { color: var(--text); font-weight: 700; }
.enfr__p .sub { margin-top: 2px; }
/* Barra de jornada: ‹ · competició + jornada (selectors natius transparents a sobre) · › */
.jbar { display: grid; grid-template-columns: 50px minmax(0, 1fr) 50px; margin: 0 0 12px; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.jbar__nav { display: grid; place-items: center; background: none; border: 0; padding: 0; color: var(--text); cursor: pointer; }
.jbar__nav:first-child { border-right: 1px solid var(--line); }
.jbar__nav:last-child { border-left: 1px solid var(--line); }
.jbar__nav svg { width: 22px; height: 22px; }
.jbar__nav:disabled { color: var(--ink-4); cursor: default; }
.jbar__nav:not(:disabled):active { background: var(--ink-3); }
.jbar__mig { display: grid; justify-items: center; align-content: center; gap: 1px; min-width: 0; padding: 8px 6px; text-align: center; }
.jbar__lliga, .jbar__jor { position: relative; display: block; max-width: 100%; cursor: pointer; }
.jbar__lliga { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px; color: var(--accent); font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
span.jbar__lliga { cursor: default; }
.jbar__jor b { display: inline-flex; align-items: center; gap: 4px; font-family: var(--display); font-size: 1.4rem; font-weight: 700; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; }
.jbar__jor small { display: block; overflow: hidden; color: var(--mute); font-size: .78rem; white-space: nowrap; text-overflow: ellipsis; }
.jbar__jor small em { font-style: normal; font-weight: 600; color: var(--accent); }
.jbar .jbar__baix { width: 14px; height: 14px; flex: none; color: var(--mute); }
.jbar select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; cursor: pointer; -webkit-appearance: none; appearance: none; }

/* Mòdul «El rival» a la fitxa dels propers partits: capçalera amb escut, posició i forma, i pestanyes. */
.card.rival { display: grid; gap: 12px; padding: 14px; }
.rival-cap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rival-cap .escut { width: 46px; height: 46px; flex: none; }
.rival-cap__nom { display: grid; flex: 1; min-width: 0; }
.rival-cap__nom b { overflow: hidden; font-size: 1.05rem; white-space: nowrap; text-overflow: ellipsis; }
.rival-cap__nom small { color: var(--mute); font-size: .82rem; }
.rival-cap__forma { display: flex; gap: 3px; flex: none; }
.forma { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 6px; font-style: normal; font-size: .66rem; font-weight: 700; }
.forma--g { background: var(--ok-soft); color: var(--ok); }
.forma--p { background: var(--no-soft); color: var(--no); }
.card.rival .seg--sub { margin: 0; }
.rival-panel { display: grid; gap: 0; }
.rival-panel .grup { background: var(--ink-3); }
.rival-font { margin: 0 2px 8px; color: var(--subtle); font-size: .78rem; }
.rival-sub { margin: 10px 2px 6px; color: var(--subtle); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rival-panel > .rival-sub:first-child { margin-top: 0; }
.rival-pos { min-width: 2.4em; color: var(--accent); font-family: var(--display); font-size: 1.15rem; }
.rival-res .forma { margin-right: 0; }
.taula tr.rival td { background: var(--no-soft); }
/* Dins la targeta del rival res pot ser més ample que la targeta: les taules fan scroll dins seu i les 4 pestanyes es reparteixen l'amplada. */
.card.rival { grid-template-columns: minmax(0, 1fr); }
.card.rival > *, .rival-panel > * { min-width: 0; }
.card.rival .rival-tabs { display: flex; overflow: hidden; }
.card.rival .rival-tabs button { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rival-font { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rival-res em { flex: none; white-space: nowrap; }

/* Entorn · equips seguits via la Federació Catalana (fills, familiars, altres competicions). */
.entorn-llista { display: grid; gap: 10px; margin-top: 14px; }
.entorn-card { display: grid; gap: 8px; padding: 14px; color: var(--text); text-decoration: none; }
.entorn-card__cap, .entorn-cap, .entorn-mini { display: flex; align-items: center; gap: 12px; min-width: 0; }
.entorn-mini { padding: 12px 14px; color: var(--text); text-decoration: none; }
/* Proper partit de l'Entorn (Inici): targeta clicable amb qui juga, quan i on */
.entorn-prop { display: grid; gap: 10px; padding: 14px; color: var(--text); text-decoration: none; }
.entorn-prop + .entorn-prop { margin-top: 10px; }
.entorn-prop__cap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.entorn-prop__cap .entorn-av { width: 40px; height: 40px; font-size: 1rem; }
.entorn-prop__cap .entorn-card__nom small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.entorn-prop__quan { flex: none; display: grid; justify-items: end; line-height: 1.15; }
.entorn-prop__quan b { font-family: var(--display); font-weight: 700; font-size: 1.35rem; }
.entorn-prop__quan span { color: var(--mute); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.entorn-prop__cos { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.entorn-prop__linia { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--mute); font-size: .88rem; }
.entorn-prop__linia svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
.entorn-prop__linia span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.enfr__p--obre { cursor: pointer; }
.enfr__p--obre:active { transform: scale(.995); }
.entorn-mini .entorn-av { width: 38px; height: 38px; font-size: 1rem; }
/* Deixar de seguir, des de la mateixa targeta */
/* People (Gestió): qui segueix gent a l'Entorn · brúixola amb el nombre encerclat */
.gfila__entorn { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); }
.gfila__entorn svg { width: 16px; height: 16px; }
.gfila__entorn i {
  display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px;
  background: var(--accent-soft); color: var(--accent-hi); font-size: .7rem; font-style: normal; font-weight: 700;
}

/* Enquadrament de la foto (Game Day i roster) */
.resimg__enq { display: grid; gap: 8px; padding: 12px 14px; margin-top: 10px; }
.resimg__enq-fila { display: grid; gap: 4px; }
.resimg__enq-fila span { color: var(--mute); font-size: .78rem; }
.resimg__enq input[type=range] { width: 100%; accent-color: var(--accent); }

/* Últim partit jugat (quan no hi ha res programat): foto + resultat + MVP */
.ultim { display: grid; gap: 8px; }
.ultim__foto { display: block; width: 100%; height: 170px; object-fit: cover; border-radius: 18px; }
/* Foto i MVP de costat: la foto guanya alçada i el bloc no s'allarga */
/* La foto, una mica més ampla; l'alçada la marca el mòdul de l'MVP (totes dues iguals) */
.ultim__dalt { display: grid; grid-template-columns: 1.3fr .7fr; gap: 8px; align-items: stretch; }
.ultim__fotob { position: relative; min-height: 0; border-radius: 18px; overflow: hidden; }
.ultim__fotob .ultim__foto { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.mvp--compacte { margin-top: 0; padding: 12px; align-content: start; }
.mvp--compacte .mvp__cap { flex-direction: column; align-items: flex-start; gap: 8px; }
.mvp--compacte .mvp__av .av, .mvp--compacte .mvp__inicials { width: 62px; height: 62px; font-size: 1.3rem; }
.mvp--compacte .mvp__qui h3 { font-size: 1rem; }
.mvp--compacte .mvp__xifres { gap: 5px; }
.mvp--compacte .mvp__x { padding: 6px 2px; }
.mvp--compacte .mvp__x b { font-size: 1.2rem; }
.mvp--compacte .mvp__x span { font-size: .62rem; letter-spacing: .04em; }
/* MVP del partit: foto amb dorsal, xifres i pes dins l'equip */
.mvp {
  display: grid; gap: 10px; margin-top: 10px; padding: 14px; border-radius: 16px;
  background: linear-gradient(160deg, var(--accent-soft), var(--ink-2) 65%); border: 1px solid var(--line-2);
}
.mvp__cap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mvp__av { position: relative; flex: none; }
.mvp__av .av { width: 72px; height: 72px; font-size: 1.5rem; }
/* Les fotos dels socis són verticals i la cara queda a dalt: centrar-la deixava el tall a mitja cara. */
.mvp__av .av img { object-position: 50% 18%; }
.mvp__inicials {
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  background: var(--ink-3); color: var(--accent-hi); font-family: var(--display); font-size: 1.4rem;
}
.mvp__dorsal {
  position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; min-width: 24px; height: 24px;
  padding: 0 5px; border-radius: 99px; background: var(--accent); color: var(--ink);
  font-style: normal; font-weight: 800; font-size: .78rem; box-shadow: 0 0 0 2px var(--ink-2);
}
.mvp__qui { display: grid; gap: 2px; min-width: 0; }
.mvp__et { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--accent-hi); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mvp__et svg { width: 14px; height: 14px; }
.mvp__qui h3 { margin: 0; overflow: hidden; font-size: 1.12rem; white-space: nowrap; text-overflow: ellipsis; }
.mvp__pct { margin: 0; color: var(--mute); font-size: .82rem; }
.mvp__xifres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mvp__x { display: grid; place-items: center; padding: 8px 4px; border-radius: 12px; background: var(--ink-3); }
.mvp__x b { font-family: var(--display); font-size: 1.5rem; line-height: 1; }
.mvp__x span { color: var(--mute); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.mvp__barra { height: 6px; border-radius: 99px; background: var(--ink-3); overflow: hidden; }
.mvp__barra i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent-hi), var(--accent)); }

/* Inscripció d'equips de 3x3 (Academy) */
.insc3x3 { display: grid; gap: 8px; padding: 14px; margin-bottom: 10px; }
.insc3x3__cap { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.insc3x3__cap b { display: block; font-size: 1.02rem; }
.insc3x3__cap small { display: block; color: var(--mute); font-size: .82rem; }
.insc3x3__equips { margin: 0; font-size: .92rem; line-height: 1.55; }
.insc3x3__equips .sub { display: block; color: var(--mute); font-size: .8rem; }
.insc3x3__equip { padding: 12px; margin: 0 0 10px; background: var(--ink-3); }
.insc3x3__cond { margin: 0 0 10px; padding-left: 18px; color: var(--mute); font-size: .86rem; line-height: 1.5; }
.insc3x3__cond li + li { margin-top: 5px; }

/* Analítica de l'app (Gestió): barres d'obertures per dia */
.anal-barres {
  display: flex; align-items: flex-end; gap: 2px; height: 96px; padding: 10px 12px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px;
}
.anal-barra { display: flex; align-items: flex-end; flex: 1 1 0; height: 100%; min-width: 0; }
.anal-barra i { display: block; width: 100%; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--accent-hi), var(--accent)); }
.anal-llegenda { display: flex; justify-content: space-between; margin: 6px 2px 0; color: var(--mute); font-size: .74rem; }

/* Escut del club, quan en tenim el fitxer */
.entorn-av--escut { background: #fff; padding: 4px; }
.entorn-av--escut img { width: 100%; height: 100%; object-fit: contain; }
.entorn-treu {
  flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 50%; background: var(--ink-3); color: var(--mute); cursor: pointer;
}
.entorn-treu svg { width: 16px; height: 16px; }
.entorn-cap { padding: 14px; }
.entorn-av { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-family: var(--display); font-size: 1.2rem; font-weight: 700; }
.entorn-av--gran { width: 56px; height: 56px; font-size: 1.5rem; }
.entorn-card__nom { display: grid; flex: 1; min-width: 0; }
.entorn-card__nom b { overflow: hidden; font-size: 1.05rem; white-space: nowrap; text-overflow: ellipsis; }
.entorn-card__nom small { color: var(--mute); font-size: .82rem; }
.entorn-card__nom small.entorn-familiar { color: var(--accent); font-weight: 600; }
.entorn-card__linia { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin: 0; font-size: .88rem; }
.entorn-card__linia span { flex: none; width: 50px; color: var(--subtle); font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.entorn-card__linia em { overflow: hidden; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.entorn-card__linia .forma, .enfr__p .sub .forma { vertical-align: 1px; }
.entorn .seg--sub { margin: 12px 0; }
.entorn .seg--sub button { flex: 1 1 0; min-width: 0; }
.entorn-form { display: grid; gap: 12px; padding: 14px; margin-top: 12px; }
.cerca-entorn { display: grid; gap: 10px; margin-bottom: 14px; }
.entorn-form select, .fcbq-form select {
  width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--ink-3); color: var(--text); font: inherit;
}
/* Gestió · connexió amb la FCBQ */
.fcbq-estat { padding: 12px 14px; }
.fcbq-form { display: grid; gap: 12px; margin-top: 14px; }
.fcbq-avancat { border-top: 1px solid var(--line); padding-top: 8px; }
.fcbq-avancat summary { padding: 6px 2px; color: var(--mute); cursor: pointer; }
.fcbq-avancat[open] { display: grid; gap: 10px; }
.fcbq-mostra { overflow: auto; max-height: 240px; margin: 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--ink-2); color: var(--mute); font-size: .74rem; white-space: pre-wrap; word-break: break-all; }
/* Inactiu a l'equip: surt a la plantilla (atenuat) però no es convoca ni rep avisos dels partits. */
.roster li.inactiu { opacity: .5; }
.conv--inactiu .pill { flex: none; }
/* Galeria · pujada: desplegable «De quin partit/esdeveniment són?» */
.gal-puja__desti { margin: 0 0 6px; }
.gal-puja__desti select {
  width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--ink-3); color: var(--text); font: inherit; font-size: 16px;
}
.btns--wrap { display: flex; flex-wrap: wrap; gap: 8px; }
/* Convocatòria de l'equip a la fitxa del partit: xifres i qui hi serà / no / sense resposta. */
.conv-equip__t { margin: 14px 2px 8px; color: var(--subtle); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.conv-equip > span.jo { color: var(--accent); font-weight: 600; }
.conv-equip--rebutjat > span > :first-child, .conv-equip--convocat > span > :first-child { opacity: .6; }
.conv-resum { color: var(--ok); font-weight: 600; }
/* Galeria de fotos a la capçalera de la secció (Pitch&Putt): «Galeria · N fotos» + les darreres. */
.seccio-fotos { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0 0 12px; padding: 8px 10px; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); }
.seccio-fotos__cap { display: flex; align-items: center; gap: 8px; flex: none; padding: 0 4px; background: none; border: 0; color: var(--text); text-align: left; cursor: pointer; }
.seccio-fotos__cap svg { width: 20px; height: 20px; color: var(--accent); }
.seccio-fotos__cap span { display: grid; line-height: 1.2; }
.seccio-fotos__cap small { color: var(--mute); font-size: .74rem; }
.seccio-fotos__tira { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.seccio-fotos__tira::-webkit-scrollbar { display: none; }
.seccio-fotos__f { flex: none; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--ink-3); cursor: pointer; }
.seccio-fotos__f img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- RECEPTES (Gastro) ---------- */
/* Targeta amb la foto de protagonista: imatge gran a dalt i el títol a sobre. */
.rec-card { display: block; margin: 0 0 12px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-2); color: inherit; text-decoration: none; }
.rec-card__foto { position: relative; aspect-ratio: 16 / 10; background: var(--ink-3); }
.rec-card__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rec-card__cap { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg, var(--ink-4), var(--ink-3)); color: var(--mute); }
.rec-card__cap svg { width: 44px; height: 44px; }
.rec-card__cat { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 99px; background: var(--accent); color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.rec-card__cat--no { left: auto; right: 10px; background: rgba(14, 16, 19, .85); }
.rec-card__sobre { position: absolute; right: 0; bottom: 0; left: 0; padding: 40px 14px 12px; background: linear-gradient(180deg, transparent, rgba(14, 16, 19, .92)); }
.rec-card__sobre h3 { margin: 0; color: #fff; font-size: 1.18rem; line-height: 1.2; }
.rec-card__sobre p { margin: 4px 0 0; color: rgba(255, 255, 255, .78); font-size: .8rem; }
.rec-card__peu { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; }
.rec-card__qui { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--mute); font-size: .82rem; }
.rec-card__qui b { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.rec-card__xifres { display: flex; flex: none; gap: 12px; color: var(--mute); font-size: .8rem; }
.rec-card__xifres span { display: inline-flex; align-items: center; gap: 4px; }
.rec-card__xifres svg { width: 15px; height: 15px; }
.rec-card__xifres .is-meu { color: var(--accent); }
.rec-card--amagada { opacity: .6; }

.rec__portada { display: block; width: 100%; height: 220px; object-fit: cover; border-radius: 18px; }
.rec__cap { margin: 12px 0 0; }
.rec__cap h2 { margin: 0; }
.rec__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.rec__xip { padding: 4px 10px; border-radius: 99px; background: var(--ink-3); font-size: .76rem; }
.rec__autor { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; color: var(--mute); font-size: .86rem; }
.rec__txt { margin: 10px 0 0; line-height: 1.55; white-space: pre-wrap; }

.rec-barra { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; }
.rec-ic { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 99px; background: var(--ink-3); color: var(--text); }
.rec-ic svg { width: 20px; height: 20px; }
.rec-ic.is-on { background: var(--accent); color: #fff; }
.rec-likes { color: var(--mute); font-size: .86rem; }

.rec-ings { margin: 0; padding: 12px 12px 12px 30px; }
.rec-ings li { margin: 0 0 6px; }
.rec-ings li:last-child { margin: 0; }
.rec-ings b { color: var(--accent-hi); }
.rec-passes { margin: 0; padding: 12px 12px 12px 32px; }
.rec-passes li { margin: 0 0 10px; line-height: 1.55; }
.rec-passes li:last-child { margin: 0; }
.rec-passes::marker, .rec-ings::marker { color: var(--mute); }

.rec-coms { padding: 4px 12px; }
.rec-com { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rec-com:last-child { border-bottom: 0; }
.rec-com__qui { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin: 0; font-size: .86rem; }
.rec-com__qui span { color: var(--mute); font-size: .74rem; }
.rec-com__txt { margin: 2px 0 0; line-height: 1.5; white-space: pre-wrap; }
.rec-com__x { flex: none; padding: 2px; border: 0; background: none; color: var(--mute); }
.rec-com__x svg { width: 16px; height: 16px; }
.rec-comform { margin-top: 10px; }
.rec-form__fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.rec-admin { display: grid; gap: 8px; margin-top: 18px; }

/* ---------- MARIDATGE · vins ---------- */
/* L'ampolla es veu sencera (contain): retallar-la com una foto de plat queda malament. */
.vi-card { display: grid; grid-template-columns: 104px 1fr; gap: 0; margin: 0 0 12px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-2); color: inherit; text-decoration: none; }
.vi-card__foto { display: grid; place-items: center; padding: 10px; background: var(--ink-3); }
.vi-card__foto img { width: 100%; height: 130px; object-fit: contain; }
.vi-card__cap { display: grid; place-items: center; width: 100%; height: 130px; color: var(--mute); }
.vi-card__cap svg { width: 34px; height: 34px; }
.vi-card__cos { min-width: 0; padding: 12px; }
.vi-card__cos h3 { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.vi-card__qui { margin: 3px 0 0; color: var(--mute); font-size: .82rem; }
.vi-card__meta { margin: 6px 0 0; color: var(--accent-hi); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.vi-card__mars { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; }
.vi-card__mar { padding: 3px 8px; border-radius: 99px; background: var(--ink-3); color: var(--mute); font-size: .7rem; }
.vi-card__peu { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 0; }
.vi-preu { color: var(--accent-hi); font-family: var(--display); font-size: 1.2rem; }
.vi-punts { color: var(--accent); letter-spacing: -1px; }
.vi-card--amagat { opacity: .6; }

.vi-hero { display: grid; place-items: center; padding: 16px; border-radius: 18px; background: var(--ink-3); }
.vi-hero img { max-width: 100%; max-height: 300px; object-fit: contain; }
.vi-fitxa__qui { margin: 6px 0 0; color: var(--mute); }
.vi-preu-card { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 12px; }
.vi-preu-card p { margin: 0; }
.vi-preu-card b { display: block; font-family: var(--display); font-size: 1.6rem; line-height: 1; }
.vi-preu-card__preu b { color: var(--accent-hi); }
.vi-preu-card__punts b { color: var(--accent); font-family: inherit; font-size: 1.3rem; letter-spacing: -1px; }
.vi-preu-card span { color: var(--mute); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.vi-preu-card__on { flex: 1 0 100%; color: var(--mute); font-size: .86rem; }
.vi-mar { margin: 0; padding: 4px 12px; list-style: none; }
.vi-mar li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.vi-mar li:last-child { border-bottom: 0; }
.vi-mar b { color: var(--accent-hi); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.vi-mar span { line-height: 1.5; }
.vi-form__t { margin: 18px 0 6px; color: var(--accent-hi); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.camp--mar span { color: var(--mute); font-size: .78rem; }

/* Home · cada últim partit al seu bloc, amb capçalera d'equip, per no barrejar-los */
.ultim-bloc { margin: 0 0 14px; padding: 10px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255, 255, 255, .02); }
.ultim-bloc:last-child { margin-bottom: 0; }
.ultim-bloc__cap { display: flex; align-items: center; gap: 8px; margin: 2px 4px 10px; font-family: var(--display); font-size: .95rem; letter-spacing: .02em; text-transform: uppercase; }
.ultim-bloc__cap .escut--eq { width: 26px; height: 26px; flex: none; }

/* ---------- ANIVERSARIS · mòdul de felicitació a la home ---------- */
.aniv { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--accent); border-radius: 20px; background: linear-gradient(135deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .04)); }
.aniv__cap { display: flex; align-items: center; gap: 7px; color: var(--accent-hi); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.aniv__cap svg { width: 15px; height: 15px; }
.aniv__qui { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.aniv__qui + .aniv__qui { padding-top: 10px; border-top: 1px solid var(--line); }
.aniv__qui .av { width: 58px; height: 58px; font-size: 1.2rem; flex: none; }
.aniv__qui .av img { object-position: 50% 18%; }
.aniv__qui b { display: block; font-size: 1.05rem; }
.aniv__qui span { color: var(--mute); font-size: .84rem; }
.aniv__share { display: grid; place-items: center; width: 40px; height: 40px; flex: none; margin-left: auto; border: 0; border-radius: 99px; background: var(--accent); color: #fff; }
.aniv__share svg { width: 19px; height: 19px; }
.aniv__share:disabled { opacity: .5; }

/* ---------- Configurador de la felicitació d'aniversari ---------- */
.anivc__prev { display: block; width: 100%; max-width: 360px; margin: 0 auto; border-radius: 18px; background: var(--ink-3); }
.anivc__fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.anivc__foto { position: relative; display: grid; place-items: center; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2); color: var(--mute); cursor: pointer; }
.anivc__foto.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.anivc__foto img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; }
.anivc__foto em { font-size: .7rem; font-style: normal; text-align: center; }
.anivc__foto svg { width: 22px; height: 22px; }
.anivc__foto--puja input { display: none; }
.anivc__enq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 220px; }
.anivc__enq button { padding: 12px 0; border: 1px solid var(--line); border-radius: 10px; background: var(--ink-2); color: var(--mute); font-size: 1rem; }
.anivc__enq button.on { border-color: var(--accent); background: var(--accent); color: #fff; }

/* ---------- Aniversaris a Gestió (People) ---------- */
.anivg { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.anivg:last-child { border-bottom: 0; }
.anivg--avui { background: rgba(var(--accent-rgb), .12); }
.anivg__cos { flex: 1; min-width: 0; }
.anivg__cos b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .95rem; }
.anivg__cos small { color: var(--mute); font-size: .78rem; }
.anivg__puja { flex: none; cursor: pointer; }
.anivg__puja input { display: none; }

/* ---------- Cobraments per jornada (Gestió) ---------- */
.cobr { padding: 0; overflow: hidden; }
.cobr__cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 14px; border: 0; background: none; color: inherit; text-align: left; }
.cobr__cap b { display: block; font-size: .98rem; }
.cobr__cap small { color: var(--mute); font-size: .78rem; }
.cobr__imports { display: grid; gap: 4px; justify-items: end; flex: none; }
.cobr__imports b { font-family: var(--display); font-size: 1.1rem; color: var(--accent-hi); }
.cobr__imports em { font-style: normal; }
.cobr__gent { border-top: 1px solid var(--line); }
.cobr__fila { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.cobr__fila:last-child { border-bottom: 0; }
.cobr__fila > div { flex: 1; min-width: 0; }
.cobr__fila b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .9rem; }
.cobr__fila small { color: var(--mute); font-size: .76rem; }
/* Tauler de cobraments per àrea: la columna del net és la que mana visualment */
.cobr-taula td b { color: var(--accent-hi); }
.taula .td-nom small { color: var(--mute); font-size: .74rem; }

/* ============================================================
   BOTIGA DEL CLUB (app-botiga.js · app-gestio-botiga.js)
   ============================================================ */
.bt-cos { padding-bottom: 90px; }
.bt-ic { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ink-3); color: var(--text); }
.bt-ic svg { width: 20px; height: 20px; }
.bt-ic i { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: var(--accent); color: #fff; font: 700 11px/18px var(--sans); font-style: normal; text-align: center; }
.bt-cats { margin: 0 0 12px; }
.bt-graella { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 620px) { .bt-graella { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bt-prod { position: relative; display: flex; flex-direction: column; border-radius: var(--r-sm); overflow: hidden; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-decoration: none; transition: transform .2s var(--ease); }
.bt-prod:active { transform: scale(.98); }
.bt-prod__img { position: relative; aspect-ratio: 1; background: var(--ink-3); }
.bt-prod__img img, .bt-prod__img .bt-sensefoto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bt-prod__t { display: grid; gap: 2px; padding: 10px 11px 12px; }
.bt-prod__t b { font-size: 14px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bt-prod__t span { font: 700 18px/1.1 var(--display); color: var(--accent-hi); }
.bt-prod__pill { position: absolute; top: 8px; left: 8px; }
.bt-prod--esgotat .bt-prod__img img { filter: grayscale(1) brightness(.6); }
.bt-destacat { position: absolute; top: 8px; right: 8px; padding: 3px 8px; border-radius: 99px; background: var(--accent); color: #fff; font: 700 10.5px/1.3 var(--sans); font-style: normal; letter-spacing: .02em; }
.bt-sensefoto { display: grid; place-items: center; color: var(--subtle); background: var(--ink-3); }
.bt-sensefoto svg { width: 34%; height: 34%; }
.bt-meves { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 14px; border-radius: var(--r-sm); background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font-weight: 600; text-decoration: none; }
.bt-meves svg:first-child { width: 20px; height: 20px; color: var(--accent); }
.bt-meves .fila__fl { margin-left: auto; width: 18px; height: 18px; color: var(--subtle); }
.bt-barra { position: fixed; left: 50%; bottom: calc(14px + var(--bottom)); transform: translateX(-50%); z-index: 30; width: min(calc(100% - 28px), var(--ample)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-radius: 16px; background: var(--accent); color: #fff; text-decoration: none; box-shadow: 0 10px 30px -8px rgba(0,0,0,.6); animation: bt-puja .35s var(--ease); }
.bt-barra span { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.bt-barra svg { width: 19px; height: 19px; }
.bt-barra b { font-size: 14px; }
@keyframes bt-puja { from { transform: translate(-50%, 16px); opacity: 0; } }

/* fitxa de producte */
.bt-fotos { display: flex; gap: 8px; margin: -4px -16px 0; padding: 0 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.bt-fotos::-webkit-scrollbar { display: none; }
.bt-foto { flex: 0 0 100%; aspect-ratio: 1; border-radius: var(--r); object-fit: cover; scroll-snap-align: center; background: var(--ink-3); }
.bt-fotos .bt-sensefoto.bt-foto { display: grid; }
.bt-fotos__n { margin: 8px 0 0; font-size: 12px; color: var(--subtle); text-align: center; }
.bt-fitxa { padding-top: 16px; }
.bt-fitxa h1 { margin: 2px 0 6px; font: 700 30px/1.02 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.bt-preu { margin: 0 0 10px; font: 700 28px/1 var(--display); color: var(--accent-hi); }
.bt-desc { margin: 12px 0 0; color: var(--mute); font-size: 15px; line-height: 1.55; }
.bt-bloc { margin-top: 18px; }
.bt-et { display: block; margin-bottom: 8px; font: 600 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.bt-talles { display: flex; flex-wrap: wrap; gap: 8px; }
.bt-talla { min-width: 48px; height: 44px; padding: 0 14px; border-radius: 12px; background: var(--ink-3); color: var(--text); font-weight: 700; font-size: 15px; box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .15s, box-shadow .15s; }
.bt-talla[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent-hi); }
.bt-talla:disabled { opacity: .35; text-decoration: line-through; }
.bt-q { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 14px; background: var(--ink-3); }
.bt-q button { width: 40px; height: 40px; border-radius: 10px; background: var(--ink-4); color: var(--text); font-size: 20px; font-weight: 600; line-height: 1; }
.bt-q button:disabled { opacity: .35; }
.bt-q b { min-width: 34px; text-align: center; font-size: 16px; }
.bt-q--petit { margin-top: 8px; padding: 3px; }
.bt-q--petit button { width: 32px; height: 32px; font-size: 17px; }
.bt-q .bt-treu { margin-left: 6px; background: transparent; color: var(--subtle); }
.bt-q .bt-treu svg { width: 17px; height: 17px; }
.bt-afegeix { margin-top: 22px; }

/* cistella */
.bt-linies { display: grid; gap: 10px; margin-bottom: 14px; }
.bt-linia { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px; border-radius: var(--r-sm); background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.bt-linia__img { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--ink-3); }
.bt-linia__img img, .bt-linia__img .bt-sensefoto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bt-linia__t b { display: block; font-size: 14.5px; line-height: 1.3; }
.bt-linia__t small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--mute); }
.bt-linia__i { font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.bt-linia--ko { box-shadow: inset 0 0 0 1px var(--no); }
.bt-ko { color: var(--no) !important; font-weight: 600; }
.bt-total { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.bt-total span { color: var(--mute); font-weight: 600; }
.bt-total b { font: 700 28px/1 var(--display); }

/* comandes (soci i gestió) */
.bt-comanda, .gb-comanda { display: grid; gap: 10px; margin-bottom: 10px; padding: 14px; }
.bt-comanda__cap, .gb-comanda__cap { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bt-comanda__cap b, .gb-comanda__cap b { display: block; font-size: 15px; }
.bt-comanda__cap small, .gb-comanda__cap small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--mute); }
.gb-comanda__cap small a { color: var(--accent-hi); }
.bt-comanda__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 14px; }
.bt-comanda__l li { display: flex; justify-content: space-between; gap: 10px; color: var(--mute); }
.bt-comanda__l li b { color: var(--text); }
.bt-comanda__l em { font-style: normal; color: var(--text); white-space: nowrap; }
.bt-comanda__peu, .gb-comanda__peu { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }
.bt-comanda__peu b, .gb-comanda__peu b { margin-right: auto; font: 700 22px/1 var(--display); }
.gb-nota { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--ink-3); font-size: 13.5px; color: var(--mute); font-style: italic; }

/* accés a Inici */
.bt-inici { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: var(--r); background: linear-gradient(120deg, var(--accent-soft), var(--ink-2) 70%); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-decoration: none; }
.bt-inici > svg:first-child { width: 26px; height: 26px; color: var(--accent-hi); flex-shrink: 0; }
.bt-inici span { display: grid; gap: 2px; }
.bt-inici b { font: 700 18px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.bt-inici small { font-size: 12.5px; color: var(--mute); }
.bt-inici .fila__fl { margin-left: auto; width: 18px; height: 18px; color: var(--subtle); }

/* gestió */
.gb-xifres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gb-xifres div { padding: 12px; border-radius: var(--r-sm); background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.gb-xifres b { display: block; font: 700 24px/1 var(--display); }
.gb-xifres small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--mute); }
.gb-prod { align-items: center; }
.gb-thumb { width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; object-fit: cover; background: var(--ink-3); }
.gb-thumb--buit { display: grid; place-items: center; color: var(--subtle); }
.gb-thumb--buit svg { width: 20px; height: 20px; }
.gb-prod span small { display: block; margin-top: 2px; font-size: 12px; color: var(--mute); white-space: normal; }
.gb-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.gb-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.gb-foto { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--ink-3); }
.gb-foto img { width: 100%; height: 100%; object-fit: cover; }
.gb-foto button { position: absolute; top: 4px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.6); color: #fff; }
.gb-foto button svg { width: 14px; height: 14px; }
.gb-foto button[data-gbtreufoto] { right: 4px; }
.gb-foto button[data-gbportada] { left: 4px; }
.gb-foto em { position: absolute; left: 4px; bottom: 4px; padding: 2px 6px; border-radius: 6px; background: var(--accent); color: #fff; font: 700 10px/1.3 var(--sans); font-style: normal; }
.gb-foto--nova { display: grid; place-content: center; justify-items: center; gap: 4px; color: var(--mute); cursor: pointer; border: 1.5px dashed var(--line-2); font-size: 12px; }
.gb-foto--nova svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) { .bt-barra { animation: none; } .bt-prod { transition: none; } }
.gb-obre { margin-bottom: 12px; padding: 6px 14px; }
.bt-talla, .bt-q button, .gb-foto button { border: 0; -webkit-appearance: none; appearance: none; font-family: inherit; }

/* Logo reduït (monograma S + estrella): en gestió, on al costat hi ha el xip «Gestió»,
   i a les pantalles molt estretes. Cap logo s'encongeix mai (abans s'aixafava). */
.barra__logo { flex-shrink: 0; max-width: none; object-fit: contain; }
.barra__logo--reduit { display: none; }
body.mode-gestio .barra__logo:not(.barra__logo--reduit) { display: none; }
body.mode-gestio .barra__logo--reduit { display: block; height: 44px; }
body.mode-gestio .barra--petita .barra__logo--reduit { height: 34px; }
@media (max-width: 359px) {
  .barra__logo:not(.barra__logo--reduit) { display: none; }
  .barra__logo--reduit { display: block; height: 42px; }
}

/* Taules de xifres (Àrea Econòmica): el nom de l'àrea ja no es parteix lletra a lletra.
   Si no hi cap tot, la taula llisca de costat amb la columna del nom fixa. */
.taula--num td.td-nom { min-width: 104px; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.taula--num th:first-child, .taula--num td.td-nom { position: sticky; left: 0; z-index: 1; background: var(--ink-2); box-shadow: 1px 0 0 var(--line); }
.taula--num thead th:first-child { background: var(--ink-3); }
.taula--num tr.nostre td.td-nom { background: #32281a; }
@media (max-width: 430px) {
  .taula--num { font-size: .8rem; }
  .taula--num.taula--ajust th, .taula--num.taula--ajust td { padding: 8px 6px; }
  .taula--num th { font-size: .66rem; letter-spacing: .03em; }
}
.taula--num .col-com { display: none; }
@media (max-width: 430px) {
  .taula--num .col-det { display: none; }
  .taula--num .col-com { display: table-cell; }
  .taula--num td.td-nom { min-width: 92px; }
}
.xifra b { white-space: nowrap; font-size: clamp(1.25rem, 6.2vw, 1.75rem); }

/* Botiga v2: convidats, preu de soci, packs, lliurament */
.bt-prod__t s, .bt-preu s { color: var(--subtle); font-size: .72em; font-weight: 600; text-decoration-thickness: 2px; margin-right: 4px; }
.bt-preusoci { display: inline-block; margin-left: 8px; padding: 3px 8px; border-radius: 99px; background: var(--ok-soft); color: var(--ok); font: 700 11px/1.2 var(--sans); vertical-align: middle; letter-spacing: .02em; }
.bt-sociavis { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--ok-soft); color: var(--ok); font-size: 13.5px; font-weight: 600; }
.bt-sociavis svg { width: 16px; height: 16px; }
.bt-entra { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); text-decoration: none; }
.bt-entra > svg:first-child { width: 22px; height: 22px; color: var(--accent-hi); flex-shrink: 0; }
.bt-entra span { display: grid; gap: 2px; }
.bt-entra b { font-size: 14.5px; }
.bt-entra small { font-size: 12.5px; color: var(--mute); }
.bt-entra .fila__fl { margin-left: auto; width: 18px; height: 18px; color: var(--subtle); }
.bt-peces { display: grid; gap: 10px; }
.bt-peca { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px; border-radius: var(--r-sm); background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.bt-peca__img { position: relative; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--ink-3); }
.bt-peca__img img, .bt-peca__img .bt-sensefoto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bt-peca b { display: block; margin: 2px 0 8px; font-size: 14.5px; }
.bt-peca .bt-talla { min-width: 40px; height: 36px; padding: 0 10px; font-size: 13.5px; }
.bt-seg { margin: 0 0 10px; }
.bt-lltext { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; line-height: 1.45; }
.bt-lltext svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--accent-hi); }
.bt-2col { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.bt-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bt-accepta { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; font-size: 13.5px; line-height: 1.45; color: var(--mute); }
.bt-accepta input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--accent); flex-shrink: 0; }
.bt-accepta a { color: var(--accent-hi); }
.bt-totals { margin-top: 6px; }
.bt-totals > div:not(.bt-total) { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; color: var(--mute); }
.bt-totals .bt-total { margin-top: 8px; }
.bt-inici--entrada { margin: 18px auto 0; max-width: 420px; width: 100%; }
/* gestió botiga v2 */
.gb-canal { display: inline-block; padding: 1px 7px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-hi); font: 700 10.5px/1.5 var(--sans); font-style: normal; vertical-align: middle; }
.gb-adreca { display: flex; gap: 8px; margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--mute); }
.gb-adreca svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--accent-hi); }
.gb-adreca b { color: var(--text); }
.gb-adreca a { color: var(--accent-hi); }
.bt-comanda__l small { color: var(--mute); }
.gb-enllac { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--ink-3); font-size: 13px; color: var(--mute); word-break: break-all; }
.gb-talles-cap, .gb-talla { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 32px; gap: 6px; align-items: center; }
.gb-talles-cap { margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); }
.gb-talles { display: grid; gap: 6px; }
.gb-talla input, .gb-peca input, .gb-peca select { width: 100%; min-width: 0; height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--ink-3); color: var(--text); font: inherit; font-size: 14px; }
.gb-talla button, .gb-peca button { width: 32px; height: 32px; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--subtle); }
.gb-talla button svg, .gb-peca button svg { width: 16px; height: 16px; }
.gb-peces { display: grid; gap: 6px; }
.gb-peca { display: grid; grid-template-columns: minmax(0, 1fr) 56px 32px; gap: 6px; align-items: center; }
.barra__badge--cistella { background: var(--accent); color: #fff; }
/* Capçal ple (molts botons, p. ex. administradors a la zona de socis): logo sencer però més
   petit i botons més compactes, perquè no quedi tapat. El logo reduït és només per a la gestió. */
body.barra-plena:not(.mode-gestio) .barra__logo:not(.barra__logo--reduit) { height: 34px; }
body.barra-plena:not(.mode-gestio) .barra--petita .barra__logo:not(.barra__logo--reduit) { height: 28px; }
body.barra-plena:not(.mode-gestio) .barra__dreta { gap: 6px; }
body.barra-plena:not(.mode-gestio) .barra__btn { width: 38px; height: 38px; }
body.barra-plena:not(.mode-gestio) .barra__btn svg { width: 19px; height: 19px; }
body.barra-plena:not(.mode-gestio) .barra__jo .av { width: 38px; height: 38px; }

/* Perfil per seccions */
.perfil-xifres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; }
.perfil-xifres button { display: grid; gap: 3px; padding: 12px 10px; border: 0; border-radius: var(--r-sm); background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.perfil-xifres b { font: 700 20px/1.05 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perfil-xifres small { font-size: 11.5px; color: var(--mute); line-height: 1.25; }
.perfil-xifres button.no b { color: var(--no); }
.perfil-tabs { position: sticky; top: calc(var(--top) + 58px); z-index: 5; margin: 16px 0 4px; background: var(--ink-2); box-shadow: 0 8px 18px -12px rgba(0,0,0,.8); }
.perfil-tabs button { flex: 1; }
.perfil-intro { margin: 14px 0 12px; font-size: 14px; line-height: 1.5; color: var(--mute); }
/* Llistat de productes (gestió): fila + accions duplicar / eliminar */
.gb-prodfila { display: flex; align-items: center; border-top: 1px solid var(--line); }
.gb-prodfila:first-child { border-top: 0; }
.gb-prodfila .grup__fila { flex: 1; min-width: 0; border-top: 0 !important; }
.gb-prodacc { display: flex; gap: 2px; padding-right: 8px; }
.gb-prodacc button { width: 36px; height: 36px; border: 0; border-radius: 10px; display: grid; place-items: center; background: transparent; color: var(--mute); }
.gb-prodacc button:active { background: var(--ink-3); }
.gb-prodacc button[data-gbelimina] { color: var(--no); }
.gb-prodacc svg { width: 18px; height: 18px; }
.gb-prod .gb-thumb { flex: 0 0 44px; width: 44px; height: 44px; }
/* Llistat de productes (gestió) v2: targetes */
.gb-prods { display: grid; gap: 10px; }
.gb-pcard { position: relative; display: flex; align-items: stretch; border-radius: var(--r); background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; transition: box-shadow .15s; }
.gb-pcard--off .gb-pcard__img { opacity: .55; }
.gb-pcard__main { flex: 1; min-width: 0; display: flex; gap: 14px; align-items: flex-start; padding: 12px; border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.gb-pcard__main:active { background: var(--ink-3); }
.gb-pcard__img { position: relative; flex: 0 0 76px; width: 76px; height: 76px; border-radius: 14px; overflow: hidden; background: var(--ink-3); display: grid; place-items: center; color: var(--subtle); }
.gb-pcard__img img { width: 100%; height: 100%; object-fit: cover; }
.gb-pcard__img svg { width: 30px; height: 30px; }
.gb-pcard__img i { position: absolute; right: 4px; bottom: 4px; padding: 1px 6px; border-radius: 99px; background: rgba(0,0,0,.65); color: #fff; font: 700 10px/1.5 var(--sans); font-style: normal; }
.gb-pcard__t { flex: 1; min-width: 0; display: grid; gap: 4px; }
.gb-pcard__t b { font-size: 15px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gb-pcard__preu { font: 700 19px/1 var(--display); color: var(--accent-hi); }
.gb-pcard__preu small { margin-left: 6px; font: 600 12px/1 var(--sans); color: var(--ok); }
.gb-pcard__meta { font-size: 12.5px; color: var(--mute); line-height: 1.35; }
.gb-pcard__ets { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.gb-et { padding: 2px 8px; border-radius: 99px; background: var(--ink-3); color: var(--mute); font-size: 11px; font-weight: 600; line-height: 1.6; }
.gb-et--ok { background: var(--ok-soft); color: var(--ok); }
.gb-et--no { background: var(--no-soft); color: var(--no); }
.gb-et--off { background: var(--ink-4); color: var(--text); }
.gb-et--acc { background: var(--accent-soft); color: var(--accent-hi); }
.gb-pcard__acc { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 8px 8px 0; }
.gb-pcard__acc button { width: 38px; height: 38px; border: 0; border-radius: 12px; display: grid; place-items: center; background: var(--ink-3); color: var(--mute); }
.gb-pcard__acc button[data-gbelimina] { color: var(--no); background: var(--no-soft); }
.gb-pcard__acc svg { width: 18px; height: 18px; }
/* Personalització de l'equipació (nom i número) */
.bt-pers__camps { display: grid; grid-template-columns: 1fr 92px; gap: 10px; }
.bt-pers__camps input { text-transform: uppercase; }
.bt-pers__prev { margin-top: 10px; padding: 14px 10px 12px; border-radius: 14px; background: linear-gradient(160deg, var(--ink-3), var(--ink-2)); box-shadow: inset 0 0 0 1px var(--line-2); text-align: center; }
.bt-pers__prev b { display: block; font: 700 20px/1 var(--display); letter-spacing: .12em; color: var(--text); }
.bt-pers__prev span { display: block; margin-top: 4px; font: 700 54px/1 var(--display); color: var(--accent-hi); }
/* Gestió · equipació per peces i personalització */
.gb-parts { display: grid; gap: 10px; }
.gb-part { padding: 10px; border-radius: 14px; background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.gb-part__cap { display: grid; grid-template-columns: 1fr 34px; gap: 6px; margin-bottom: 8px; }
.gb-part__cap input, .gb-ptalla input { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text); font: inherit; font-size: 14px; }
.gb-part__cap input { font-weight: 700; }
.gb-part__cap button, .gb-ptalla button { width: 34px; height: 34px; border: 0; border-radius: 10px; display: grid; place-items: center; background: transparent; color: var(--subtle); }
.gb-part__cap button svg, .gb-ptalla button svg { width: 16px; height: 16px; }
.gb-part__cols, .gb-ptalla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; gap: 6px; align-items: center; }
.gb-part__cols { margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); }
.gb-part__talles { display: grid; gap: 6px; margin-bottom: 8px; }
.gb-persl { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-hi); font: 700 13px/1.5 var(--display); letter-spacing: .08em; text-transform: uppercase; }

/* ============================================================
   CARNET DE SOCI VIRTUAL (perfil · #/carnet)
   ============================================================ */
.carnet-enllac { display: block; margin: 18px 0 0; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
.carnet {
  --hx: 30%; --hy: 20%; --rx: 0deg; --ry: 0deg;
  position: relative; aspect-ratio: 1.586; width: 100%; max-width: 420px; margin: 0 auto; border-radius: 20px; overflow: hidden; isolation: isolate;
  color: #fff; background: #0b0c0e;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 0 0 1px rgba(255,255,255,.07) inset, 0 22px 40px -18px rgba(0,0,0,.9), 0 8px 30px -12px rgba(var(--accent-rgb), .35);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s var(--ease);
}
.carnet__fons { position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(var(--accent-rgb), .55), transparent 55%),
    radial-gradient(80% 70% at 0% 100%, rgba(var(--accent-rgb), .18), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 2px, transparent 2px 7px),
    linear-gradient(160deg, #1b1d22 0%, #0c0d10 55%, #050506 100%);
}
.carnet__holo { position: absolute; inset: -40%; z-index: 1; pointer-events: none; mix-blend-mode: color-dodge; opacity: .28;
  background: radial-gradient(circle at var(--hx) var(--hy), rgba(255,255,255,.55), transparent 22%),
    conic-gradient(from 210deg at var(--hx) var(--hy), rgba(255,0,153,.25), rgba(0,229,255,.25), rgba(255,214,0,.25), rgba(0,255,140,.2), rgba(255,0,153,.25));
  animation: carnet-holo 9s ease-in-out infinite alternate;
}
@keyframes carnet-holo { to { transform: rotate(18deg) scale(1.08); } }
.carnet__escut { position: absolute; right: -8%; bottom: -14%; width: 62%; opacity: .07; z-index: -1; filter: grayscale(1) brightness(2.4); }
.carnet__cap { position: absolute; top: 7%; left: 6%; right: 6%; display: flex; justify-content: space-between; align-items: flex-start; z-index: 4; }
.carnet__logo { height: clamp(26px, 9vw, 36px); width: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.carnet__tipus { text-align: right; font: 600 clamp(8.5px, 2.4vw, 10.5px)/1.2 var(--display); letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.carnet__tipus b { display: block; margin-top: 3px; font-size: 1.6em; letter-spacing: .08em; color: var(--accent-hi); }
.carnet__xip { position: absolute; left: 6%; top: 36%; width: 13%; z-index: 4; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.carnet__peu { position: absolute; left: 6%; right: 6%; bottom: 7%; z-index: 4; }
.carnet__nom { font: 700 clamp(19px, 6.4vw, 27px)/1.05 var(--display); letter-spacing: .06em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.55), 0 0 18px rgba(0,0,0,.35);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carnet__dades { display: flex; gap: clamp(14px, 5vw, 26px); margin-top: 8px; align-items: flex-end; }
.carnet__dades span { display: grid; gap: 2px; }
.carnet__dades small { font: 600 clamp(7.5px, 2.1vw, 9px)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.carnet__dades b { font: 700 clamp(13px, 4vw, 17px)/1 var(--display); letter-spacing: .06em; }
.carnet__dades .carnet__num { font-size: clamp(18px, 5.6vw, 24px); color: var(--accent-hi); font-variant-numeric: tabular-nums; }
.carnet__fins { margin-left: auto; text-align: right; }
.carnet--gran { max-width: 520px; border-radius: 24px; }
.carnet-full { padding-top: 24px; }
.carnet-viu { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 10px; font-size: 13.5px; color: var(--mute); }
.carnet-viu i { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(63,185,122,.6); animation: carnet-pols 1.6s ease-out infinite; }
.carnet-viu b { color: var(--text); font-variant-numeric: tabular-nums; }
@keyframes carnet-pols { to { box-shadow: 0 0 0 10px rgba(63,185,122,0); } }
.carnet-qui { display: flex; align-items: center; gap: 12px; margin: 8px auto 14px; max-width: 420px; padding: 12px; border-radius: 16px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.carnet-qui .av { width: 52px; height: 52px; flex-shrink: 0; }
.carnet-qui b { display: block; font-size: 15px; }
.carnet-qui small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--mute); letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) { .carnet__holo, .carnet-viu i { animation: none; } .carnet { transform: none; } }
/* Segell de soci confirmat (quota de soci pagada aquesta temporada) */
.segell-soci { display: inline-block; width: .95em; height: .95em; margin-left: .3em; vertical-align: -.1em; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); flex-shrink: 0; }
.pill--or { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg, rgba(247,221,154,.18), rgba(217,164,65,.22)); color: #f2c96b; box-shadow: inset 0 0 0 1px rgba(242,201,107,.35); }
.pill--or .segell-soci { margin: 0; width: 14px; height: 14px; }
.segell-pre .segell-soci { margin: 0 .3em 0 0; }
/* Carnet · marca amb el monograma (S + estrella) */
.carnet__marca { position: absolute; right: 4%; top: 50%; height: 118%; transform: translateY(-50%) rotate(-8deg); opacity: .09; z-index: -1; filter: drop-shadow(0 0 30px rgba(var(--accent-rgb), .4)); }
.carnet__club { display: flex; align-items: center; gap: 10px; }
.carnet__mono { height: clamp(34px, 11vw, 46px); width: auto; filter: drop-shadow(0 3px 8px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(var(--accent-rgb), .25)); }
.carnet__club > span { font: 600 clamp(7.5px, 2.1vw, 9.5px)/1.1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.carnet__club > span b { display: block; margin-top: 1px; font-size: 2.6em; line-height: .95; letter-spacing: .1em; color: #fff; }
/* Perfil · el carnet com a capçalera (mig carnet plegat, sencer en tocar-lo) */
.carnet-cap { position: relative; max-width: 420px; margin: 8px auto 0; border-radius: 20px; overflow: hidden; cursor: pointer; transition: height .5s cubic-bezier(.2, .9, .2, 1); -webkit-tap-highlight-color: transparent; }
.carnet-cap.sense-anim { transition: none; }
.carnet-cap .carnet { border-radius: 20px; }
.carnet-cap__fos { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; z-index: 6;
  background: linear-gradient(180deg, rgba(14,16,19,0), rgba(14,16,19,.85)); transition: opacity .35s var(--ease); pointer-events: none; }
.carnet-cap__fos i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; }
.carnet-cap__fos svg { width: 16px; height: 16px; transform: rotate(90deg); animation: carnet-avall 1.6s ease-in-out infinite; }
@keyframes carnet-avall { 50% { transform: rotate(90deg) translateX(3px); } }
.carnet-cap.obert .carnet-cap__fos { opacity: 0; }
.carnet-cap__acc { text-align: center; margin: 10px 0 0; }
.carnet-cap__acc a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--accent-hi); text-decoration: none; }
.carnet-cap__acc svg { width: 15px; height: 15px; }
.perfil-mini { display: flex; align-items: center; gap: 14px; margin: 16px 0 10px; }
.perfil-mini .foto-btn { flex-shrink: 0; }
.perfil-mini .av--lg { width: 64px; height: 64px; font-size: 1.3rem; }
.perfil-mini .lapis { width: 26px; height: 26px; }
.perfil-mini .lapis svg { width: 14px; height: 14px; }
.perfil-mini__t { min-width: 0; }
.perfil-mini__t h1 { margin: 0; font: 700 24px/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.perfil-mini__t p { margin: 3px 0 0; font-size: 13.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .carnet-cap { transition: none; } .carnet-cap__fos svg { animation: none; } }
/* Carnet de capçalera · animacions */
.carnet-cap { perspective: 1000px; transition: height .6s cubic-bezier(.22, 1.2, .36, 1); }
.carnet-cap .carnet { transform-origin: 50% 0; }
.carnet-cap .carnet::after { content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.38) 45%, rgba(255,214,140,.25) 50%, transparent 62%); transform: translateX(-120%); }
.carnet-cap.obrint .carnet { animation: carnet-obre .75s cubic-bezier(.22, 1, .36, 1); }
.carnet-cap.obrint .carnet::after { animation: carnet-llum .9s ease-out .1s; }
.carnet-cap.tancant .carnet { animation: carnet-tanca .55s cubic-bezier(.4, 0, .2, 1); }
@keyframes carnet-obre { 0% { transform: rotateX(18deg) translateY(-6px) scale(.985); } 60% { transform: rotateX(-3deg) translateY(0) scale(1.005); } 100% { transform: none; } }
@keyframes carnet-tanca { 0% { transform: none; } 45% { transform: rotateX(10deg) scale(.99); } 100% { transform: none; } }
@keyframes carnet-llum { 0% { opacity: 0; transform: translateX(-120%); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(120%); } }
/* Nom i número: apareixen en obrir-lo */
.carnet-cap .carnet__nom, .carnet-cap .carnet__dades { transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1); }
.carnet-cap:not(.obert) .carnet__nom, .carnet-cap:not(.obert) .carnet__dades { opacity: 0; transform: translateY(12px); }
.carnet-cap.obert .carnet__nom { transition-delay: .18s; }
.carnet-cap.obert .carnet__dades { transition-delay: .28s; }
.carnet-cap__fos i { transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.carnet-cap.obert .carnet-cap__fos i { transform: rotate(180deg) scale(.6); }
/* Entrada al perfil */
.carnet-cap.entra { animation: carnet-entra .8s cubic-bezier(.22, 1, .36, 1); }
.carnet-cap.entra .carnet::after { animation: carnet-llum 1.1s ease-out .35s; }
@keyframes carnet-entra { from { opacity: 0; transform: translateY(-14px) scale(.97); } }
.carnet-cap__acc:not([hidden]) { animation: carnet-acc .4s ease .3s both; }
@keyframes carnet-acc { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .carnet-cap.obrint .carnet, .carnet-cap.tancant .carnet, .carnet-cap.entra, .carnet-cap .carnet::after, .carnet-cap__acc:not([hidden]) { animation: none !important; }
}
/* Segell de soci confirmat a la foto de perfil de la barra */
.barra__jo { position: relative; }
.barra__jo--soci .av--jo { box-shadow: 0 0 0 2px #d4a94a; }
.barra__segell { position: absolute; right: -4px; bottom: -3px; width: 16px; height: 16px; display: grid; place-items: center; pointer-events: none; }
.barra__segell .segell-soci { margin: 0; width: 16px; height: 16px; }
/* Segell de la barra: més gran i amb halo daurat */
.barra__segell { width: 19px; height: 19px; right: -5px; bottom: -4px; }
.barra__segell .segell-soci { width: 19px; height: 19px; filter: drop-shadow(0 0 3px rgba(242,193,78,.75)) drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.barra__jo--soci .av--jo { box-shadow: 0 0 0 2px #f2c14e, 0 0 10px rgba(242,193,78,.45); }
/* Quotes per concepte agrupades per àrea */
.quota-area { margin: 12px 0 6px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
/* Segell de soci = emblema reduït daurat (càpsula vertical) */
.segell-soci { width: auto; height: 1.25em; vertical-align: -.25em; }
.pill--or .segell-soci { width: auto; height: 16px; }
.barra__segell { width: auto; height: 24px; right: -6px; bottom: -6px; }
.barra__segell .segell-soci { width: auto; height: 24px; }
/* Carnet · accions del perfil (píndoles) i compartir */
.carnet-cap__acc:not([hidden]) { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.carnet-xip { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border: 0; border-radius: 999px;
  background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: 600 13.5px/1 var(--sans);
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .2s, transform .15s; }
.carnet-xip:hover { background: var(--ink-3, #23262c); }
.carnet-xip:active { transform: scale(.96); }
.carnet-xip svg { width: 16px; height: 16px; color: var(--accent-hi); }
.carnet-comparteix { margin-left: auto; flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(var(--accent-hi-rgb), .14); color: var(--accent-hi); cursor: pointer; transition: transform .15s, background .2s; }
.carnet-comparteix:active { transform: scale(.92); }
.carnet-comparteix svg { width: 20px; height: 20px; }
/* QR rotatiu de la pantalla completa */
.carnet-qr { display: flex; align-items: center; gap: 16px; max-width: 420px; margin: 4px auto 12px; padding: 14px; border-radius: 18px;
  background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.carnet-qr__img { width: 132px; height: 132px; flex-shrink: 0; padding: 8px; border-radius: 14px; background: #fff; overflow: hidden; transition: opacity .3s, filter .3s; }
.carnet-qr__img svg { display: block; width: 100%; height: 100%; }
.carnet-qr__t { flex: 1; min-width: 0; display: grid; gap: 6px; }
.carnet-qr__t small { font: 600 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.carnet-qr__t b { font: 700 34px/1 var(--display); letter-spacing: .14em; color: var(--accent-hi); font-variant-numeric: tabular-nums; }
.carnet-qr__temps { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.carnet-qr__temps i { display: block; height: 100%; background: var(--accent-hi); transform-origin: 0 50%; transition: transform .25s linear; }
.carnet-qr__t em { font-style: normal; font-size: 12px; color: var(--mute); }
.carnet-qr.nou .carnet-qr__img, .carnet-qr.nou b { animation: carnet-qr-nou .5s ease; }
@keyframes carnet-qr-nou { from { opacity: .2; filter: blur(3px); } }
.carnet-qr.caducat .carnet-qr__img { opacity: .25; filter: blur(2px); }
.carnet-qr.caducat b { color: var(--mute); }
.carnet-cap__acc .carnet-xip, .carnet-cap__acc .carnet-xip:visited { color: var(--text); text-decoration: none; }
/* ===== Carnet «Negre i or» ===== (mides en cqw: 100cqw = amplada del carnet) */
.carnet--or { container-type: inline-size; background: #09090a; color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 22px 40px -18px rgba(0,0,0,.95), 0 10px 30px -14px rgba(212,169,74,.35); }
.carnet--or .carnet__fons { background:
    radial-gradient(90% 70% at 20% 0%, rgba(255,255,255,.08), transparent 60%),
    repeating-radial-gradient(circle at 112% 50%, transparent 0 2.2cqw, rgba(212,169,74,.075) 2.2cqw 2.45cqw),
    linear-gradient(145deg, #1a1a1c, #070708 60%, #121214); }
.carnet--or::after { content: ""; position: absolute; inset: 1.7cqw; border-radius: 3.4cqw; border: 1px solid rgba(242,193,78,.42); pointer-events: none; z-index: 5; }
.carnet--or .carnet__holo { opacity: .14; mix-blend-mode: soft-light; }
.carnet--or .or { background: linear-gradient(100deg, #8a6420 0%, #f7e3a1 22%, #c9973e 40%, #fff3c4 55%, #b98a30 72%, #f2cf7a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.carnet--or .carnet__mono-or { position: absolute; right: 7cqw; top: 6.5cqw; height: 31cqw; width: auto; z-index: 3;
  filter: brightness(0) saturate(100%) invert(79%) sepia(46%) saturate(566%) hue-rotate(353deg) brightness(95%) drop-shadow(0 1px 0 rgba(255,255,255,.3)) drop-shadow(0 1cqw 2.4cqw rgba(0,0,0,.8)); }
.carnet--or .carnet__club { position: absolute; left: 7cqw; top: 7.5cqw; display: block; z-index: 4; }
.carnet--or .carnet__club small { display: block; font: 600 2.3cqw/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: #d8c08a; }
.carnet--or .carnet__club b { display: block; margin-top: .8cqw; font: 700 7cqw/.95 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.carnet--or .carnet__tipus { position: absolute; left: 7cqw; top: 25cqw; right: auto; text-align: left; z-index: 4;
  font: 600 2.5cqw/1 var(--display); letter-spacing: .3em; text-transform: uppercase; color: #a9905a; }
.carnet--or .carnet__nom { position: absolute; left: 7cqw; right: 7cqw; bottom: 19cqw; z-index: 4; font-weight: 700; font-family: var(--display); line-height: 1.05;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: none;
  filter: drop-shadow(0 .3cqw .6cqw rgba(0,0,0,.7)); }
.carnet--or .carnet__dades { position: absolute; left: 7cqw; right: 24cqw; bottom: 7cqw; margin: 0; display: flex; gap: 6cqw; align-items: flex-end; z-index: 4; }
.carnet--or .carnet__dades span { display: grid; gap: 1cqw; }
.carnet--or .carnet__dades small { font: 600 2.1cqw/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: #8f7d55; }
.carnet--or .carnet__dades b { font: 700 4.6cqw/1 var(--display); letter-spacing: .08em; }
.carnet--or .carnet__segell { position: absolute; right: 7cqw; bottom: 6.5cqw; width: 12.5cqw; height: 12.5cqw; border-radius: 50%; display: grid; place-items: center; z-index: 4;
  background: conic-gradient(from 20deg, #8a6420, #f7e3a1, #c9973e, #fff3c4, #b98a30, #f2cf7a, #8a6420);
  box-shadow: 0 0 0 .5cqw #0a0a0b, 0 1.4cqw 3cqw rgba(0,0,0,.6); }
.carnet--or .carnet__segell i { width: 10.2cqw; height: 10.2cqw; border-radius: 50%; background: #0d0d0e; display: grid; place-items: center; text-align: center;
  font: 700 1.9cqw/1.1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: #e9c877; font-style: normal; }
.carnet--or .carnet__segell i { font-size: 1.6cqw; letter-spacing: .06em; line-height: 1.15; }
.carnet--or .carnet__mono-or { height: 29cqw; top: 6cqw; }
/* Plegat: la fletxa baixa sota la línia de la temporada */
.carnet-cap .carnet--or ~ .carnet-cap__fos { height: 30%; }
/* Gestió · Xarxes socials */
.gx-card { padding: 16px; margin-bottom: 14px; }
.gx-cap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.gx-cap svg { width: 20px; height: 20px; color: var(--accent-hi); }
.gx-cap b { font-size: 16px; }
.gx-cap .pill { margin-left: auto; }
.gx-error { color: #e5484d; margin: 0 0 8px; }
.gx-form { margin-top: 12px; }
.gx-passos { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13px; color: var(--mute); line-height: 1.5; }
.gx-passos b { color: var(--text); }
.gx-grup { padding: 10px 12px; margin: 8px 0; }
.gx-grup__cap { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.gx-grup__cap b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-grup .xips { margin-top: 6px; }
.gx-afegir { display: flex; gap: 8px; align-items: flex-end; }
.gx-afegir .camp { flex: 1; margin: 0; }
.gx-disponibles { margin: 6px 0 10px; }
.gx-env small { display: block; }
.gx-publica { padding: 12px 14px; margin: 12px 0; }
.gx-publica .btns { margin-top: 8px; }
.gx-publica svg { width: 16px; height: 16px; }
.gx-publica .btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.gx-publica .btns .btn { min-width: 0; justify-content: center; }
/* Botiga · assignar productes a un soci */
.gb-nova-linia { padding: 12px; margin: 6px 0 14px; }
.gb-2col { display: grid; grid-template-columns: 1fr 110px; gap: 10px; }
[data-gbsoci] { min-height: 150px; }
[data-gblinies] .bt-comanda__l li { align-items: center; }
/* Peu del perfil: enllaç a la web de Moud Sports */
a.marca-app { display: block; text-decoration: none; padding: 8px 0; -webkit-tap-highlight-color: transparent; transition: color .2s; }
a.marca-app:hover b, a.marca-app:active b { color: var(--accent-hi); }
/* Botiga · assignar a un soci (3 passos) */
.gb-as-pas { padding: 0 0 18px; margin: 0 0 18px; border-bottom: 1px solid var(--line); }
.gb-as-pas h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 700 17px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.gb-as-pas h3 i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--sans); font-style: normal; background: var(--accent); color: #1a0f00; letter-spacing: 0; }
.gb-as-ajuda { margin: 8px 0 0; }
.gb-as-cerca { margin: 0; }
.gb-as-persones { display: grid; gap: 6px; margin-top: 8px; }
.gb-as-persones button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; border: 0; border-radius: 14px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: 600 15px/1.2 var(--sans); text-align: left; cursor: pointer; }
.gb-as-persones button span { flex: 1; min-width: 0; }
.gb-as-persones button:active { transform: scale(.98); }
.gb-as-persones .av, .gb-as-triat .av { width: 38px; height: 38px; flex-shrink: 0; }
.gb-as-triat { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(var(--accent-hi-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--accent-hi-rgb), .35); }
.gb-as-triat > div { flex: 1; min-width: 0; }
.gb-as-triat b { display: block; font-size: 15.5px; }
.gb-as-triat small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--mute); }
.gb-as-cataleg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.gb-as-cataleg button { display: grid; gap: 4px; padding: 8px; border: 0; border-radius: 14px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-align: left; cursor: pointer; }
.gb-as-cataleg button:active { transform: scale(.97); }
.gb-as-cataleg .gb-thumb { width: 100%; height: auto; aspect-ratio: 1; border-radius: 10px; object-fit: cover; }
.gb-as-cataleg b { font-size: 13.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gb-as-cataleg small { font-size: 13px; color: var(--accent-hi); font-weight: 700; }
.gb-as-config { padding: 14px; margin-top: 4px; }
.gb-as-config__cap { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.gb-as-config__cap .gb-thumb { width: 56px; height: 56px; border-radius: 12px; }
.gb-as-config__cap b { display: block; font-size: 15px; }
.gb-as-config__cap small { color: var(--accent-hi); font-weight: 700; }
.gb-as-talles { display: flex; flex-wrap: wrap; gap: 8px; }
.gb-as-talles label { position: relative; }
.gb-as-talles label { position: relative; }
.gb-as-talles input { position: absolute; top: 0; left: 0; width: 1px !important; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.gb-as-talles span { display: inline-grid; place-items: center; min-width: 46px; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--ink-3, #23262c); box-shadow: inset 0 0 0 1px var(--line); font-weight: 700; font-size: 14px; cursor: pointer; }
.gb-as-talles input:checked + span { background: var(--accent); color: #1a0f00; box-shadow: none; }
.gb-as-talles .esgotada span { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.gb-as-quant { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px; background: var(--ink-3, #23262c); box-shadow: inset 0 0 0 1px var(--line); }
.gb-as-quant button { width: 38px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--text); font-size: 20px; cursor: pointer; }
.gb-as-quant b { min-width: 30px; text-align: center; font-size: 16px; }
.gb-as-config .btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 6px; }
.gb-as-linies { display: grid; gap: 8px; margin-bottom: 12px; }
.gb-as-linia { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.gb-as-linia .gb-thumb { width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0; }
.gb-as-linia > div { flex: 1; min-width: 0; }
.gb-as-linia b { display: block; font-size: 14.5px; }
.gb-as-linia small { display: block; font-size: 12.5px; color: var(--mute); margin-top: 2px; }
.gb-as-linia em { font-style: normal; font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.gb-as-treu { width: 30px; height: 30px; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--mute); cursor: pointer; }
.gb-as-treu svg { width: 16px; height: 16px; }
.gb-as-total { display: flex; align-items: baseline; justify-content: space-between; margin: -4px 0 12px; }
.gb-as-total:empty { display: none; }
.gb-as-total span { font-size: 13px; color: var(--mute); text-transform: uppercase; letter-spacing: .1em; }
.gb-as-total b { font: 700 28px/1 var(--display); color: var(--accent-hi); }
.gb-as-persones .av, .gb-as-triat .av { flex: 0 0 38px; width: 38px !important; min-width: 38px; max-width: 38px; height: 38px; border-radius: 50%; }
.gb-as-cataleg .gb-thumb { aspect-ratio: 4 / 3; }
.gb-as-config .camp { margin-bottom: 14px; }
.gb-as-quant { justify-self: start; width: auto; }
/* Xarxes · WhatsApp del club (QR) */
.gx-local { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 4px 0 12px; }
.gx-local > svg { width: 26px; height: 26px; color: #25d366; flex-shrink: 0; }
.gx-local > div { flex: 1; min-width: 0; }
.gx-local b { display: block; font-size: 15px; }
.gx-local small { display: block; font-size: 12.5px; color: var(--mute); margin-top: 2px; }
.gx-local--ok { box-shadow: inset 0 0 0 1px rgba(37,211,102,.45); background: rgba(37,211,102,.08); }
.gx-local--qr { flex-direction: column; text-align: center; }
.gx-local--qr img { width: 240px; max-width: 100%; height: auto; border-radius: 12px; background: #fff; padding: 8px; }
.gx-local--qr p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; }
.gx-altres { display: block; margin: -4px 0 12px; font-size: 13px; }
.gx-local:not(.gx-local--ok):not(.gx-local--qr) { flex-wrap: wrap; }
.gx-local:not(.gx-local--ok):not(.gx-local--qr) > .btn { flex: 1 1 100%; justify-content: center; }
.gx-local--ok > .btn { flex-shrink: 0; }
/* Felicitació d'aniversari: espera mentre es genera la vista prèvia */
.anivc__prev--carregant { aspect-ratio: 4 / 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center; color: var(--mute); }
.anivc__prev--carregant b { color: var(--text); font-size: 15px; }
.anivc__prev--carregant small { font-size: 13px; }
.anivc__spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent-hi); animation: anivc-gira .9s linear infinite; }
@keyframes anivc-gira { to { transform: rotate(360deg); } }
/* Clubs nous (marca genèrica): les pestanyes de seccions de Sigaltas no hi són fins que el club en configuri */
#tabs .tab[hidden] { display: none; }
body.club-generic .barra__logo, body.club-generic .cover__logo { object-fit: contain; }
/* Posada en marxa (clubs nous) */
.gp-tauler { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; padding: 14px 16px; margin: 0 0 14px; text-decoration: none; color: inherit; box-shadow: inset 0 0 0 1px var(--accent); }
.gp-tauler > svg { width: 22px; height: 22px; color: var(--accent-hi); grid-row: span 2; }
.gp-tauler b { display: block; font-size: 15px; } .gp-tauler small { display: block; color: var(--mute); font-size: 13px; }
.gp-barra { display: block; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; grid-column: 1 / -1; margin-top: 6px; }
.gp-barra > i { display: block; height: 100%; background: var(--accent-hi); border-radius: 6px; }
.gp-cap { display: grid; gap: 4px; margin: 0 0 14px; } .gp-cap b { font-size: 18px; } .gp-cap small { color: var(--mute); font-size: 13.5px; line-height: 1.45; }
.gp-passos { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.gp-passos a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; color: inherit; }
.gp-passos a > i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; background: var(--ink-3, #23262c); flex-shrink: 0; }
.gp-passos li.fet a > i { background: var(--accent); color: #111; }
.gp-passos span { flex: 1; min-width: 0; } .gp-passos b { display: block; font-size: 15px; } .gp-passos small { display: block; color: var(--mute); font-size: 13px; margin-top: 2px; }
.gp-prev { border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); margin: 0 0 16px; }
.gp-prev__barra { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--gp-fons); }
.gp-prev__barra img { height: 34px; width: auto; max-width: 110px; object-fit: contain; }
.gp-prev__barra b { font-size: 16px; color: #fff; }
.gp-prev__ini { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--gp-acc); color: #fff; font-weight: 700; font-size: 14px; }
.gp-prev__cos { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; background: var(--ink-2); }
.gp-prev__cos small { color: var(--mute); font-size: 13px; }
.gp-prev__boto { padding: 8px 16px; border-radius: 10px; background: var(--gp-acc); color: #fff; font-weight: 700; font-size: 14px; }
.gp-logos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } /* minmax(0,…): un logo ample no pot eixamplar la pantalla */
.gp-logo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; place-items: center; gap: 6px; aspect-ratio: 1.3; min-width: 0; overflow: hidden; border-radius: 14px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; padding: 10px; }
.gp-logo img { width: auto; height: auto; max-width: 80%; max-height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.gp-logo span svg { width: 26px; height: 26px; color: var(--mute); }
.gp-logo em { font-style: normal; font-size: 12.5px; color: var(--mute); }
.gp-logo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.gp-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-color { width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); position: relative; }
.gp-color.on { box-shadow: 0 0 0 3px var(--ink-1, #0e1013), 0 0 0 5px #fff; }
.gp-color--tria { display: grid; place-items: center; background: var(--ink-3, #23262c); color: var(--text); font-weight: 700; font-size: 18px; overflow: hidden; }
.gp-color--tria input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.gp-passos a > svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--mute); }
body.club-generic .entrada__cap img { max-height: 120px; width: auto; }
body.club-generic .cover__logo { max-height: 140px; width: auto; }
body.sense-pilota .cover__pilota { display: none; }
/* Clubs nous: els fons tenyits de taronja de Sigaltas, amb el color del club */
body.club-marca .benv__caixa { background: linear-gradient(160deg, rgba(var(--accent-rgb), .10) 0%, var(--ink-2) 48%); }

/* ---------- Mòduls nous · entrenaments ---------- */
.ent-fila { gap: 10px; }
.ent-estats { display: flex; gap: 4px; margin-left: auto; flex-shrink: 0; }
.ent-estats .xip { min-width: 34px; padding: 6px 0; justify-content: center; }
.ent-card--anul { opacity: .7; }
/* ---------- Mòduls nous · reserves d'espais ---------- */
.res-franges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.res-franges .xip { min-width: 64px; justify-content: center; }
.res-franges .xip[disabled] { opacity: .35; text-decoration: line-through; }
/* ---------- Mòduls nous · patrocinadors ---------- */
.patro-tira { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 12px; scrollbar-width: none; }
.patro-tira a, .patro-tira > .patro-logo { flex-shrink: 0; }
.patro-logo { display: inline-flex; align-items: center; justify-content: center; height: 54px; width: 110px; object-fit: contain; background: #fff; border-radius: 12px; padding: 8px; box-sizing: border-box; }
.patro-logo--nom { color: #111; font-weight: 700; font-size: 12px; text-align: center; line-height: 1.1; }
.patro-logo--gran { height: 90px; width: 200px; }
.patro-card { display: grid; justify-items: center; gap: 8px; text-align: center; margin-bottom: 10px; }
.patro-card p { margin: 0; opacity: .8; }
/* ---------- Mòduls nous · entrades ---------- */
.ent-tipus { border-top: 1px solid rgba(255,255,255,.08); padding-top: 8px; }
.ent-qr__codi { background: #fff; border-radius: 16px; padding: 14px; max-width: 260px; margin: 0 auto; }
.ent-qr__codi svg { display: block; width: 100%; height: auto; }
.ent-qr__text { text-align: center; font-family: ui-monospace, Menlo, monospace; letter-spacing: .3em; font-size: 18px; margin: 8px 0 0; }
.porta-video { width: 100%; border-radius: 16px; background: #000; aspect-ratio: 1; object-fit: cover; margin-bottom: 10px; }
.porta-res { display: grid; gap: 4px; text-align: center; padding: 22px 16px; border-radius: 18px; margin-bottom: 14px; }
.porta-res b { font-size: 28px; }
.porta-res--ok { background: rgba(31,157,85,.18); color: #3ecf8e; }
.porta-res--no { background: rgba(217,48,37,.18); color: #ff6b5e; }
/* ---------- Mòduls nous · tornejos ---------- */
.torn-part { display: grid !important; grid-template-columns: 1fr auto auto 1fr auto; gap: 6px; align-items: center; }
.torn-part .torn-eq { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.torn-part .torn-eq--d { text-align: right; }
.torn-part input { width: 46px; text-align: center; padding: 6px 2px; border-radius: 8px; border: 1px solid rgba(255,255,255,.14); background: transparent; color: inherit; font: inherit; }
.torn-part .torn-res { grid-column: span 2; text-align: center; min-width: 60px; }
div.torn-part { grid-template-columns: 1fr auto 1fr; }
div.torn-part .torn-res { grid-column: auto; }
/* Àrea social · dreceres dels mòduls en graella */
.social-dreceres { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 0 0 12px; }
.social-dreceres:empty { display: none; }
.social-dreceres .btn { margin: 0 !important; min-height: 72px; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.2; text-align: center; padding: 10px 8px; }
.social-dreceres .btn svg { width: 20px; height: 20px; }
.social-dreceres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.social-dreceres .btn { white-space: normal; min-width: 0; overflow: hidden; }
/* Aniversaris a la home: es poden treure lliscant o amb la creu */
.aniv__qui { position: relative; transition: transform .25s ease, opacity .25s ease; touch-action: pan-y; }
.aniv__qui--fora { opacity: 0 !important; }
/* La creu va al costat del botó de compartir, centrada amb ell (si no hi ha compartir, a la dreta) */
.aniv__treu { position: static; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: inherit; opacity: .7; display: grid; place-items: center; cursor: pointer; }
.aniv__qui > div { min-width: 0; flex: 1; }
.aniv__share + .aniv__treu { margin-left: 0; }
.aniv__qui > .aniv__treu:not(.aniv__share + .aniv__treu) { margin-left: auto; }
.aniv__treu svg { width: 14px; height: 14px; }
/* Secció esportiva: selector principal (els meus equips · tot el club · cròniques) i desplegable d'equips */
.xips--seccio { margin: 14px 0 10px; }
.sec-desp { display: grid; gap: 4px; margin: 0 0 10px; }
.sec-desp select { font: inherit; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card, rgba(255,255,255,.04)); color: inherit; }
/* Secció · equip · Contacte */
.contacte-fila { gap: 10px; }
.contacte-fila > span { flex: 1; min-width: 0; }
.contacte-btn { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); color: inherit; }
.contacte-btn svg { width: 18px; height: 18px; }
.contacte-btn--wa { background: #25D366; color: #fff; }
/* WhatsApp dels contactes: el globus en blanc sobre el verd (la fila pinta les icones en gris) */
.grup__fila .contacte-btn--wa, .grup__fila .contacte-btn--wa svg { color: #fff !important; stroke: #fff !important; opacity: 1 !important; }
/* Home · els meus fills (tutors familiars) */
.fills { margin-bottom: 12px; }
.fills__fila { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; color: inherit; padding: 10px 0; text-align: left; font: inherit; cursor: pointer; }
.fills__fila + .fills__fila { border-top: 1px solid var(--line); }
.fills__fila > span:not(.av) { flex: 1; min-width: 0; display: grid; }
.fills__fila > .av { flex: none; }
.fills__fila small { opacity: .7; }
/* Convocatòries dels entrenadors */
.roster__cap { margin: 8px 16px 0; padding-top: 12px; border-top: 1px solid var(--linia, rgba(255,255,255,.08)); color: var(--mute); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.conv-part { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; color: inherit; text-decoration: none; }
.conv-part small, .conv-fila small, .pet__cap small { color: var(--mute); display: block; font-size: .8rem; }
.conv-fila { display: grid; grid-template-columns: 22px auto 1fr auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linia, rgba(255,255,255,.08)); cursor: pointer; }
.conv-fila:last-child { border-bottom: 0; }
.conv-fila input { width: 18px; height: 18px; accent-color: var(--accent); }
.conv-altre { margin-bottom: 8px; }
.conv-altre summary { font-weight: 700; cursor: pointer; padding: 2px 0 6px; }
.conv-altre summary small { color: var(--mute); font-weight: 400; }
.pet-avis { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; margin: 12px 0; border-left: 3px solid var(--accent); }
.pet-avis svg { width: 22px; height: 22px; flex: none; color: var(--accent-hi); }
.pet-avis small { display: block; color: var(--mute); font-size: .82rem; margin-top: 2px; }
.pet { margin-bottom: 10px; }
.pet__cap { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.pet p { margin: 6px 0; }
.pet__btns { display: flex; gap: 8px; margin-top: 10px; }
.pet__btns .btn { flex: 1; }
/* Entrenaments per equip */
.ent-extra { margin-top: 10px; }
.ent-extra summary { font-weight: 700; cursor: pointer; }
.ent-extra form { margin-top: 10px; }
.ent-pct { font-variant-numeric: tabular-nums; color: var(--ok, #3fb950); }
.ent-pct--baix { color: var(--no, #f85149); }
/* Cos tècnic */
.tec-kit { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); vertical-align: -2px; margin-right: 4px; }
.tec-cap { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.tec-cap small { display: block; color: var(--mute); font-size: .82rem; margin-top: 2px; }
.tec-dreceres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 6px; }
.tec-dreceres .card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; color: inherit; text-decoration: none; font-size: .85rem; font-weight: 600; margin: 0; }
.tec-dreceres svg { width: 22px; height: 22px; color: var(--accent-hi); }
.tec-part { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: inherit; text-decoration: none; margin-bottom: 8px; }
.tec-part small { display: block; color: var(--mute); font-size: .8rem; margin-top: 2px; }
.tec-part__kit { font-size: .78rem; color: var(--mute); white-space: nowrap; }
.tec-kitfila { display: grid; grid-template-columns: 46px 1fr; gap: 8px; align-items: center; margin-bottom: 8px; }
.tec-kitfila input[type=color] { width: 46px; height: 42px; border: 1px solid var(--linia, rgba(255,255,255,.12)); border-radius: 10px; background: none; padding: 3px; }
.tec-kitfila .input { width: 100%; min-height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--linia, rgba(255,255,255,.12)); background: var(--card2, rgba(255,255,255,.04)); color: inherit; font: inherit; }
.nota-tecnic { display: flex; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); font-size: .9rem; }
.nota-tecnic svg { width: 18px; height: 18px; flex: none; color: var(--accent-hi); }
/* Cos tècnic · plantilla, assistent i samarretes */
.tec-samarreta { width: 30px; height: 30px; flex: none; }
.tec-samarreta--gran { width: 72px; height: 72px; margin: 0 auto 6px; display: block; }
.tec-peticions { display: flex; gap: 8px; align-items: center; margin: 4px 0 6px; font-size: .88rem; color: var(--accent-hi); text-decoration: none; }
.tec-peticions svg { width: 16px; height: 16px; }
.tec-mem { align-items: flex-start; }
.tec-mem__cos { flex: 1; min-width: 0; }
.tec-mem__ctl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.tec-mem__ctl select { min-height: 34px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--linia, rgba(255,255,255,.12)); background: var(--card2, rgba(255,255,255,.04)); color: inherit; font: inherit; font-size: .85rem; }
.tec-dorsal { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--linia, rgba(255,255,255,.12)); border-radius: 8px; padding: 0 6px; min-height: 34px; background: var(--card2, rgba(255,255,255,.04)); }
.tec-dorsal span { color: var(--mute); font-weight: 700; }
.tec-dorsal input { width: 42px; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-align: center; -moz-appearance: textfield; }
.tec-dorsal input::-webkit-inner-spin-button { display: none; }
.tec-permis { display: inline-flex; gap: 6px; align-items: center; font-size: .82rem; }
.tec-permis input { width: 18px; height: 18px; accent-color: var(--accent); }
.tec-afegir { margin-top: 10px; }
.tec-afegir input[type=search] { width: 100%; }
.tec-nou { margin-top: 10px; }
.tec-nou summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--accent-hi); }
.tec-nou form { margin-top: 10px; }
.tec-kits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tec-kits label { position: relative; display: block; min-width: 0; }
.tec-kits input { position: absolute; top: 0; left: 0; width: 1px !important; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.tec-kits__op { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--linia, rgba(255,255,255,.12)); font-size: .88rem; cursor: pointer; }
.tec-kits input:checked + .tec-kits__op { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.tec-kits__cap { width: 30px; height: 30px; border-radius: 50%; border: 1px dashed var(--mute); flex: none; }
.tec-wiz h2 { margin: 6px 0 4px; font-size: 1.25rem; }
.tec-wiz__passos { display: flex; gap: 6px; margin: 2px 0 16px; }
.tec-wiz__passos i { flex: 1; height: 4px; border-radius: 4px; background: var(--linia, rgba(255,255,255,.12)); }
.tec-wiz__passos i.fet { background: var(--accent); opacity: .55; }
.tec-wiz__passos i.ara { background: var(--accent); }
.tec-wiz__hola { text-align: center; padding: 8px 0; }
.tec-wiz__llista { text-align: left; margin: 12px 0; padding-left: 20px; line-height: 1.7; }
.tec-wiz__ok { width: 56px; height: 56px; color: var(--ok, #3fb950); }
.tec-wiz__peu { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.tec-wiz__peu .btn { flex: 1; }
.tec-wiz__despres { display: block; margin: 14px auto 0; background: none; border: 0; color: var(--mute); font: inherit; font-size: .88rem; text-decoration: underline; cursor: pointer; }
.tec-mem__cos .sub { display: block; margin-top: 2px; }
/* Gestió · pantalla Més en targetes */
.mes-cerca { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 0 14px; min-height: 46px; border-radius: 14px; background: var(--card, rgba(255,255,255,.04)); border: 1px solid var(--linia, rgba(255,255,255,.08)); color: var(--mute); }
.mes-cerca svg { width: 18px; height: 18px; flex: none; }
.mes-cerca input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 1rem; outline: none; }
.mes-compte { display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 14px; border-radius: 18px; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, var(--accent, #2f81f7), color-mix(in srgb, var(--accent, #2f81f7) 55%, #000)); box-shadow: 0 10px 26px -14px var(--accent, #2f81f7); }
.mes-compte__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: rgba(255,255,255,.18); flex: none; }
.mes-compte__ico svg { width: 22px; height: 22px; }
.mes-compte > span:nth-child(2) { flex: 1; min-width: 0; }
.mes-compte b { display: block; font-size: 1.05rem; }
.mes-compte small { display: block; opacity: .85; font-size: .84rem; margin-top: 2px; }
.mes-compte .fila__fl { width: 18px; height: 18px; opacity: .8; }
.mes-avisos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 18px; }
.mes-avis { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; text-decoration: none; color: inherit; background: color-mix(in srgb, #ef4444 14%, transparent); border: 1px solid color-mix(in srgb, #ef4444 35%, transparent); }
.mes-avis b { font-size: 1.35rem; line-height: 1.1; color: #fca5a5; font-variant-numeric: tabular-nums; }
.mes-avis span { font-size: .8rem; color: var(--mute); }
.mes-avis--diners { background: color-mix(in srgb, #f59e0b 14%, transparent); border-color: color-mix(in srgb, #f59e0b 35%, transparent); }
.mes-avis--diners b { color: #fcd34d; }
.mes-bloc { margin: 0 0 22px; }
.mes-bloc__t { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); font-family: inherit; }
.mes-bloc__t i { width: 8px; height: 8px; border-radius: 50%; }
.mes-graella { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 620px) { .mes-graella { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mes-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 112px; padding: 14px; border-radius: 16px; text-align: left; text-decoration: none; color: inherit; font: inherit; cursor: pointer;
  background: var(--card, rgba(255,255,255,.04)); border: 1px solid var(--linia, rgba(255,255,255,.08)); transition: transform .12s ease, border-color .12s ease; -webkit-tap-highlight-color: transparent; }
.mes-tile:active { transform: scale(.97); }
.mes-tile:hover { border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.mes-tile__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; margin-bottom: 8px; color: var(--c); background: color-mix(in srgb, var(--c) 17%, transparent); }
.mes-tile__ico svg { width: 21px; height: 21px; }
.mes-tile__t { font-weight: 700; font-size: .95rem; line-height: 1.2; }
.mes-tile__s { font-size: .78rem; line-height: 1.3; color: var(--mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mes-tile__n { position: absolute; top: 12px; right: 12px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; display: grid; place-items: center; font-size: .78rem; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--c) 20%, transparent); color: var(--c); }
.mes-tile__n--alerta { background: #ef4444; color: #fff; }
.mes-tile[hidden], .mes-bloc[hidden], .mes-compte[hidden] { display: none; }
.mes-buit { text-align: center; color: var(--mute); padding: 20px 0; }
/* Botons amb text llarg: dins d'una fila (.btns) o a tot l'ample, parteixen línia en lloc de sortir de la pantalla */
.btns > .btn, .btns > a > .btn { min-width: 0; white-space: normal; text-align: center; line-height: 1.2; }
.btn--bloc { white-space: normal; text-align: center; line-height: 1.2; }
.btn { max-width: 100%; }
/* Més: secció complimentada → check verd a la cantonada de la targeta */
.mes-tile__ok { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ok, #3FB97A); color: #0b0d10; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok, #3FB97A) 22%, transparent); }
.mes-tile__ok svg { width: 15px; height: 15px; stroke-width: 3; }
/* Retallador en mode logo: marc rectangular (sense cercle) sobre quadrícula de transparència */
.retall--logo .retall__marc { background: repeating-conic-gradient(#2a2e35 0 25%, #1c1f24 0 50%) 0 0 / 20px 20px; }
.retall--logo .retall__marc::after { border-radius: 16px; box-shadow: none; border: 2px dashed rgba(255, 255, 255, .6); }
.retall--logo .retall__zoom, .retall--logo .retall__btns { width: min(84vw, 480px); }
/* Files de partits: etiqueta Casa / Fora (un color per a cada lloc) i samarreta de joc triada */
.fila__meta:has(.lloc-et), .fila__meta:has(.fila__kit) { display: flex; align-items: center; gap: 6px; }
.fila__meta > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lloc-et { flex: none; display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 6px; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.lloc-et--casa { background: rgba(63, 185, 122, .16); color: #5fd49a; box-shadow: inset 0 0 0 1px rgba(63, 185, 122, .35); }
.lloc-et--fora { background: rgba(96, 165, 250, .16); color: #8fc0ff; box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .35); }
.fila__kit { flex: none; display: inline-flex; }
.tec-samarreta--mini { width: 20px; height: 20px; vertical-align: -5px; }
/* Subscripció · versió gratuïta: ús dels límits */
.gs-lims { display: grid; gap: 12px; }
.gs-lim > div { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: 5px; }
.gs-lim > div span { color: var(--mute); }
.gs-lim > i { display: block; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.gs-lim > i > i { display: block; height: 100%; border-radius: 6px; background: var(--accent); }
/* Entrada amb Google (pont de sports.moud.app) */
.btn--google { margin-top: 12px; gap: 10px; background: #fff; color: #1f1f1f; font-weight: 600; }
.btn--google svg { width: 18px; height: 18px; flex: none; }
/* Versió reduïda · funcions del pla complet apagades amb l'etiqueta PRO */
.et-pro { display: inline-block; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 2px 6px; border-radius: 6px; background: #c6f432; color: #0b0f14; vertical-align: 2px; margin-left: 4px; }
.gp-passos li.pro a { opacity: .55; }
.gp-passos li.pro i { background: transparent; border: 1px dashed currentColor; }
.gp-pro-avis { margin-bottom: 14px; }
.gp-apagat { opacity: .4; filter: grayscale(1); pointer-events: none; user-select: none; }
/* Canviar la foto de fons de la secció (administradors) */
.seccio-hero__fons { position: absolute; right: 60px; bottom: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .28); background: rgba(9, 11, 14, .55); color: #fff; font-size: 12px; font-weight: 600; text-decoration: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.seccio-hero__fons svg { width: 14px; height: 14px; }
/* Versió reduïda · «Moud Sports × equip» */
.gp-lockup { display: grid; place-items: center; padding: 18px; margin-bottom: 12px; border-radius: 16px; background: #0b0f14; border: 1px solid var(--line-2); }
.gp-lockup img { max-width: 100%; max-height: 64px; object-fit: contain; }
.drec-places { display: block; font-size: 11px; font-weight: 600; opacity: .7; margin-top: 2px; }
.gp-foto-eq { display: grid; place-items: center; align-content: center; gap: 6px; min-height: 150px; border-radius: 16px; border: 1px dashed var(--line-2);
  background: var(--ink-2) center / cover no-repeat; color: var(--text-2, #aab); cursor: pointer; position: relative; overflow: hidden; }
.gp-foto-eq em { font-style: normal; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(9, 11, 14, .6); color: #fff; }
.gp-foto-eq svg { width: 26px; height: 26px; }
/* Retall de foto apaïsada (foto de l'equip): marc rectangular sense cercle */
.retall--apaisat .retall__marc::after { border-radius: 16px; box-shadow: none; }
/* Adreça de l'equip i compartir l'app (versió reduïda) */
.ad-actual, .ad-compartir { display: grid; gap: 4px; }
.ad-actual small, .ad-compartir small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.ad-actual b, .ad-compartir b { font-size: 17px; overflow-wrap: anywhere; color: var(--accent); }
.ad-camp { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: var(--ink-2); }
.ad-camp input { flex: 1; min-width: 0; border: 0; background: none; padding: 12px; color: var(--text); font: inherit; outline: none; }
.ad-camp em { font-style: normal; padding: 0 12px; opacity: .6; font-size: 13px; white-space: nowrap; }
/* «El meu fill»: la fletxa a la seva mida · franja del pare a l'app del fill */
.fills__fila > svg { width: 18px; height: 18px; flex: none; opacity: .6; }
.vista-com [data-canvia-fill] { margin-left: 4px; }
/* Calendari · mode mes */
.calm { padding: 14px; margin-bottom: 6px; }
.calm__cap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.calm__cap b { font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem; }
.calm__set, .calm__graella { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calm__set span { text-align: center; font-size: .7rem; font-weight: 700; text-transform: uppercase; opacity: .55; padding-bottom: 4px; }
.calm__d { display: grid; justify-items: center; align-content: center; gap: 3px; aspect-ratio: 1 / 1; border: 0; border-radius: 12px; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.calm__d b { font-size: .92rem; font-weight: 600; }
.calm__d--buit { pointer-events: none; }
.calm__d--te { background: var(--ink-2); }
.calm__d--avui b { color: var(--accent-hi); }
.calm__d--on { background: var(--accent); }
.calm__d--on b { color: var(--ink, #0b0f14); }
.calm__d i { display: flex; gap: 3px; height: 6px; }
.calm__p { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-hi); }
.calm__p--acte { background: #f472b6; }
.calm__p--reunio { background: #60a5fa; }
.calm__p--modul { background: #34d399; }
.calm__d--on .calm__p { background: var(--ink, #0b0f14); }
/* Comentaris a l'entrenador */
.coment-ll { display: grid; gap: 10px; }
.coment { display: flex; gap: 10px; align-items: flex-start; }
.coment > div { min-width: 0; flex: 1; }
.coment b { display: block; font-size: .9rem; }
.coment small { opacity: .6; font-size: .75rem; }
.coment p { margin: 4px 0 0; overflow-wrap: anywhere; }
/* Capçalera de la secció amb noms oficials llargs */
.seccio-hero h1.h1--llarg { font-size: 1.7rem; line-height: 1; }
.seccio-hero h1.h1--llarg2 { font-size: 1.32rem; line-height: 1.05; }
.seccio-hero h1 { overflow-wrap: anywhere; }
.xips--seccio .xip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Enquadrament de la portada del partit (marc 16:9, com a la fitxa) */
.enq__marc { position: relative; width: min(88vw, 520px); aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; cursor: grab; touch-action: none; }
.enq__marc:active { cursor: grabbing; }
.enq__marc img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.partit-portada-w { position: relative; }
.partit-portada__enq { position: absolute; right: 10px; bottom: 22px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(9,11,14,.6); color: #fff; font: 600 12px/1 var(--sans, inherit); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.partit-portada__enq svg { width: 14px; height: 14px; }
/* Noms oficials llargs a les targetes de partit: el club (fins a 2 línies) i la categoria petita */
.nom-llarg { display: grid; gap: 2px; }
.nom-llarg > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nom-llarg > small { font-size: .62em; font-weight: 600; opacity: .7; letter-spacing: .02em; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
/* Calendari i Inici: els partits destacats amb el color del club; els entrenaments, en to neutre amb la seva etiqueta */
.cal-partit > * { border-color: rgba(var(--accent-rgb), .45) !important; background: linear-gradient(135deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .03) 60%), var(--ink-2) !important; }
.ent-card { position: relative; background: var(--ink-3, rgba(255,255,255,.03)); border-color: var(--line); }
.ent-card__eti { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.ent-card__eti svg { width: 13px; height: 13px; }
/* Incidències (comentaris de l'equip) a la pantalla del cos tècnic */
.tec-coment { display: inline-flex; align-items: center; gap: 4px; }
.tec-coment svg { width: 12px; height: 12px; }
.coment--equip { padding: 8px; border-radius: 12px; background: rgba(var(--accent-rgb), .08); }
/* iPhone (Safari): els camps d'hora i data tenen una amplada mínima pròpia que eixamplava les graelles de dues columnes
   (p. ex. «Hora de trobada | Lloc de trobada») i feia moure la pantalla cap als costats */
.dues { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.camp, .camp > * { min-width: 0; }
input[type="time"], input[type="date"], input[type="datetime-local"] { min-width: 0; max-width: 100%; width: 100%; -webkit-appearance: none; appearance: none; box-sizing: border-box; }
input[type="time"]::-webkit-date-and-time-value, input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.full__cos { overflow-x: hidden; }
/* Assistència a l'entrenament: «Hi és» / «No pot» */
.ent-estats .xip { font-size: .78rem; padding: 6px 10px; }
.ent-estats .xip--present[aria-pressed="true"] { background: #16a34a; border-color: #16a34a; color: #fff; }
.ent-estats .xip--justificat[aria-pressed="true"] { background: #dc2626; border-color: #dc2626; color: #fff; }
.gran__kit { align-items: center; }
.gran__kit .tec-samarreta--mini, .gran__kit svg { width: 20px; height: 20px; flex: none; }
.gran__nota span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Comentaris: fils, respostes i cor (sempre del color del club) */
.coment-fil + .coment-fil { border-top: 1px solid var(--line); padding-top: 10px; }
.coment-resps { margin: 8px 0 0 38px; display: grid; gap: 8px; padding-left: 10px; border-left: 2px solid rgba(var(--accent-rgb), .35); }
.coment__acc { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.coment__acc button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.coment__resp { font-size: .8rem; font-weight: 600; opacity: .7; }
.cor { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 700; color: var(--accent); }
.cor svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2; transition: transform .15s; }
.cor.on svg { fill: var(--accent); }
.cor:active svg { transform: scale(1.25); }
.coment-respf { display: grid; gap: 6px; margin-top: 8px; }
.coment-respf textarea { width: 100%; box-sizing: border-box; border-radius: 10px; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text); padding: 8px 10px; font: inherit; resize: vertical; }
.coment-respf button { justify-self: end; }
.ent-motiu { display: grid; gap: 6px; margin-top: 10px; }
.ent-motiu textarea { width: 100%; box-sizing: border-box; border-radius: 10px; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--text); padding: 8px 10px; font: inherit; resize: vertical; }
.ent-motiu button { justify-self: end; }

/* iPhone: en tocar un camp amb lletra de menys de 16 px, Safari fa zoom i la pantalla queda desquadrada
   (es pot moure en horitzontal). Als camps, mínim 16 px; i cap vista no es pot desplaçar de costat. */
@supports (-webkit-touch-callout: none) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { font-size: max(16px, 1em) !important; }
}
html, body { overflow-x: hidden; max-width: 100%; }
.full, .full__cos, #vista { overscroll-behavior-x: none; }
.full__cos { touch-action: pan-y pinch-zoom; }
.full__cos img, .full__cos video, .full__cos table, .full__cos iframe { max-width: 100%; }
.full__cos p, .full__cos li, .full__cos .com__text { overflow-wrap: anywhere; }
/* Noms complets (nom i cognoms) sota els avatars: fins a tres línies */
.gastro-avatars > span { width: 72px; line-height: 1.2; overflow-wrap: anywhere; }
/* Perfil · Els meus clubs (compte únic per correu) */
.grup__fila .club-mini { width: 26px; height: 26px; border-radius: 50%; object-fit: contain; background: rgba(255,255,255,.06); flex: none; }

/* ---------- Els meus equips: menú superior, rol i graella de coordinació ---------- */
.eq-menu { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -18px 14px; padding: 2px 18px 6px; scroll-snap-type: x proximity; }
.eq-menu::-webkit-scrollbar { display: none; }
.eq-menu button { flex: none; scroll-snap-align: start; display: flex; align-items: center; gap: 9px; max-width: 230px; padding: 8px 14px 8px 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--ink-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.eq-menu button[aria-selected="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--ink-2)); box-shadow: inset 0 0 0 1px var(--accent); }
.eq-menu button > span:last-child { display: grid; min-width: 0; }
.eq-menu b { font-weight: 650; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-menu small { font-size: .74rem; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-menu button[aria-selected="true"] small { color: var(--accent-hi); font-weight: 600; }
.eq-menu .escut--eq, .eq-menu__ico { width: 34px; height: 34px; flex: none; }
.eq-menu__ico { display: grid; place-items: center; border-radius: 50%; background: var(--ink-3); }
.eq-menu__ico svg { width: 18px; height: 18px; }
.eq-rol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; }
.eq-rol .peu { margin: 0; }
.eq-torna { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 0; border: 0; background: none; color: var(--accent-hi); font: inherit; font-weight: 600; cursor: pointer; }
.eq-torna svg { width: 18px; height: 18px; }
.eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.eq-card { display: grid; gap: 10px; padding: 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--ink-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, transform .15s; }
.eq-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.eq-card__cap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.eq-card__cap .equip__color { width: 4px; height: 28px; border-radius: 4px; flex: none; }
.eq-card__cap .escut--eq { width: 30px; height: 30px; flex: none; }
.eq-card__nom { font-size: .9rem; line-height: 1.25; font-weight: 650; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; min-height: 2.5em; }
.eq-card__dades { display: grid; gap: 2px; font-size: .78rem; color: var(--mute); }
.eq-card__dades span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-card__peu { display: flex; align-items: center; gap: 8px; min-width: 0; }
.eq-card__peu .marc { font-size: .9rem; flex: none; }
.eq-card__peu small { font-size: .74rem; color: var(--mute); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (min-width: 900px) { .eq-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }

/* ---------- Cerca (equips, partits i jugadors) ---------- */
.cerca__camp { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--ink-2); }
.cerca__camp:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cerca__camp svg { width: 20px; height: 20px; flex: none; color: var(--mute); }
.cerca__camp input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 1.02rem; }
.cerca__ajuda { margin: 8px 2px; }
.cerca__fila { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.cerca__fila > span { flex: 1; min-width: 0; }
.cerca__fila .escut--eq { width: 34px; height: 34px; flex: none; }
.cerca__fila em { font-style: normal; color: var(--mute); font-size: 1.2rem; }
.cerca__partit { margin-bottom: 8px; }
.fitxa-jug { display: grid; justify-items: center; gap: 10px; padding: 22px 16px; text-align: center; }
.fitxa-jug h2 { margin: 0; font-size: 1.35rem; }
.xifres--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.xifres--4 .xifra b { font-size: 1.45rem; }

/* ---------- Contactes de la plantilla ---------- */
.cont { padding: 4px 0; }
.cont__jug { padding: 8px 12px; border-bottom: 1px solid var(--line); }
.cont__jug:last-child { border-bottom: 0; }
.cont__fila { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.cont__fila--fam { min-height: 36px; }
.cont__num { width: 24px; flex: none; text-align: center; font-family: var(--display); font-weight: 700; color: var(--mute); }
.cont__nom { flex: 1; min-width: 0; display: grid; }
.cont__nom b { font-weight: 600; font-size: .93rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cont__fila--fam .cont__nom b { font-weight: 500; font-size: .86rem; color: var(--mute); }
.cont__nom small { font-size: .76rem; color: var(--mute); }
.cont__btns { display: flex; gap: 6px; flex: none; }
.cont__btns a { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--ink-3); color: var(--text); }
.cont__btns a:hover { background: var(--accent); }
.cont__btns svg { width: 16px; height: 16px; }

/* ---------- Convocar: equips inferiors, jugadors extres i incompatibilitats ---------- */
.conv-cerca { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--ink-2); }
.conv-cerca:focus-within { border-color: var(--accent); }
.conv-cerca svg { width: 18px; height: 18px; color: var(--mute); flex: none; }
.conv-cerca input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: inherit; }
.conv-fila--inc { background: rgba(240, 160, 40, .07); }
.conv-inc { display: block; margin-top: 2px; color: #F2A93B !important; font-weight: 600; white-space: normal !important; }
.pet--inc { border-color: rgba(242, 169, 59, .6); }
.pet__inc { margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: rgba(242, 169, 59, .12); color: #F6C27A; font-size: .9rem; }

/* ---------- Tauler del coordinador ---------- */
.xifres--coord { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xifres--coord .xifra small { font-size: .55em; font-weight: 600; color: var(--mute); }
.xifra--ok b { color: #4ADE80; }
.coord-inc { padding: 12px; margin-bottom: 8px; border-color: rgba(242, 169, 59, .5); }
.coord-inc__cap { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.coord-inc__cap > span { display: grid; }
.coord-inc__cap small { color: var(--mute); font-size: .8rem; }
.coord-inc__p { display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin-top: 4px; border-radius: 10px; background: rgba(242, 169, 59, .1); color: inherit; text-decoration: none; font-size: .88rem; }
.coord-inc__p b { color: #F6C27A; font-family: var(--display); font-size: 1rem; }
.coord-idc small { white-space: normal !important; }

/* ---------- People: contacte al costat (trucar i WhatsApp) ---------- */
.gfila__cont { display: inline-flex; gap: 6px; margin-left: 4px; }
.cont-mini { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 0; background: var(--ink-3); color: var(--text); cursor: pointer; }
.cont-mini svg { width: 16px; height: 16px; }
.cont-mini--wa { background: rgba(37, 211, 102, .16); color: #25D366; }
.cont-mini:active { transform: scale(.94); }

/* ---------- Fitxa visual de jugadors i tècnics ---------- */
.fp { display: grid; gap: 12px; }
/* Capçalera «targeta de jugador»: fons fosc amb el color del club, dorsal gegant en contorn i escut en filigrana */
.fp-cap { position: relative; overflow: hidden; padding: 22px 18px 20px; border-radius: 22px; min-height: 190px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 55%, #07080b) 0%, #0b0d11 58%, color-mix(in srgb, var(--c1) 22%, #07080b) 100%);
  border: 1px solid color-mix(in srgb, var(--c1) 35%, rgba(255,255,255,.08)); box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); }
.fp-cap::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.05) 50%, transparent 60%); pointer-events: none; }
.fp-cap::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--c1), var(--c2), transparent); }
.fp-num-fons { position: absolute; right: -10px; bottom: -44px; font-family: var(--display); font-weight: 800; font-size: 200px; line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--c2) 45%, transparent); opacity: .5; pointer-events: none; user-select: none; }
.fp-escut { position: absolute; left: -26px; top: -26px; width: 150px; height: 150px; object-fit: contain; opacity: .07; filter: grayscale(1) brightness(2); pointer-events: none; }
.fp-edita { position: absolute; top: 12px; right: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #fff; text-decoration: none; font-size: .82rem; font-weight: 600; backdrop-filter: blur(8px); }
.fp-edita svg { width: 14px; height: 14px; }
.fp-cap__cos { position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; }
.fp-foto { flex: none; }
.av--fp { width: 104px !important; height: 104px !important; border-radius: 26px !important; font-size: 2.2rem !important; object-fit: cover;
  border: 2px solid rgba(255,255,255,.14); box-shadow: 0 10px 26px rgba(0, 0, 0, .5), 0 0 0 5px color-mix(in srgb, var(--c1) 30%, transparent); }
.fp-id { min-width: 0; display: grid; gap: 2px; }
.fp-nom1 { margin: 0; font-size: .78rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: color-mix(in srgb, var(--c2) 70%, #fff); }
.fp-nom { margin: 0; font-family: var(--display); font-size: 1.9rem; line-height: .98; letter-spacing: .005em; text-transform: uppercase; overflow-wrap: anywhere; }
.fp-rols { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.fp-rol { padding: 3px 9px; border-radius: 6px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.fp-rol--num { background: var(--c1); border-color: transparent; color: #fff; font-family: var(--display); font-size: .82rem; letter-spacing: .02em; }
.fp-rol--c { background: color-mix(in srgb, var(--c2) 18%, transparent); }
.fp-equip { margin: 7px 0 0; color: rgba(255, 255, 255, .6); font-size: .84rem; }
@media (min-width: 700px) { .av--fp { width: 128px !important; height: 128px !important; } .fp-nom { font-size: 2.3rem; } .fp-num-fons { font-size: 240px; } }
.fp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fp-stats > div { display: grid; justify-items: center; padding: 12px 4px; border-radius: 14px; background: var(--ink-2); border: 1px solid var(--line); }
.fp-stats b { font-family: var(--display); font-size: 1.6rem; line-height: 1; color: var(--c2); }
.fp-stats span { margin-top: 4px; font-size: .72rem; color: var(--mute); text-transform: uppercase; letter-spacing: .04em; }
.fp-bloc { padding: 14px 16px; border-radius: 16px; background: var(--ink-2); border: 1px solid var(--line); }
.fp-bloc h2 { margin: 0 0 8px; font-family: var(--display); font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.fp-fila { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
.fp-fila:last-child { border-bottom: 0; }
.fp-fila span { color: var(--mute); }
.fp-eq { display: grid; padding: 9px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.fp-eq:last-child { border-bottom: 0; }
.fp-eq__nom { font-weight: 600; }
.fp-eq small { color: var(--mute); font-size: .8rem; }
a.fp-eq { position: relative; padding-right: 22px; }
a.fp-eq::after { content: "›"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: var(--mute); }
.fp-cont { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.fp-cont > span:first-child { display: grid; min-width: 0; }
.fp-cont > .fp-btns { display: flex; flex-direction: row; }
.fp-cont small { color: var(--mute); font-size: .8rem; }
.fp-btns { display: flex; gap: 6px; flex: none; }
.fp-btns a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--ink-3); color: var(--text); }
.fp-btns a.fp-wa { background: rgba(37, 211, 102, .16); color: #25D366; }
.fp-btns svg { width: 17px; height: 17px; }
.fp-hist-res { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; font-size: .88rem; color: var(--mute); }
.fp-hist-res b { color: var(--text); font-family: var(--display); font-size: 1.05rem; }
.fp-temp { padding: 10px 0 4px; border-top: 1px solid var(--line); }
.fp-temp__nom { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-family: var(--display); font-size: 1rem; color: var(--c2); }
.fp-temp__nom small { margin-left: auto; font-family: var(--sans); font-size: .75rem; color: var(--mute); }
.fp-temp__ara { padding: 2px 8px; border-radius: 6px; background: var(--c1); color: #fff; font-family: var(--sans); font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fp-temp__eqs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.fp-temp__eq { display: grid; gap: 3px; padding: 10px; border-radius: 12px; background: var(--ink-3); border: 1px solid var(--line); color: inherit; text-decoration: none; }
.fp-temp__eqnom { font-weight: 650; font-size: .86rem; line-height: 1.2; }
.fp-temp__eq small { color: var(--mute); font-size: .74rem; }
.fp-temp__barra { height: 4px; margin-top: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.fp-temp__barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--c1), var(--c2)); border-radius: 4px; }
.roster__tocable { cursor: pointer; }
.roster__tocable:active { background: rgba(255, 255, 255, .05); }
/* Fitxa de persona: 5 pestanyes (amb «Tutors i familiars») sense desbordar al mòbil */
.seg--sticky button { font-size: .8rem; line-height: 1.15; padding: 4px 2px; }
/* Tutors a la fitxa (gestió): dades a dalt, accions en una fila */
.tut-fila { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.tut-fila:last-child { border-bottom: 0; }
.tut-fila__cap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tut-fila__cap > span { display: grid; min-width: 0; }
.tut-fila__cap small { overflow-wrap: anywhere; }
.tut-fila__acc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tut-acc { display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--ink-3); color: var(--text); font: inherit; font-size: .82rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.tut-acc svg { width: 15px; height: 15px; }
.tut-acc--wa { color: #25D366; border-color: rgba(37, 211, 102, .35); background: rgba(37, 211, 102, .1); }
.tut-acc--no { color: var(--no, #F87171); }
/* Incompatibilitats (tauler del coordinador): resoldre-les des de la targeta */
.inc-card { padding: 14px; margin-bottom: 10px; border-color: rgba(242, 169, 59, .45); background: linear-gradient(180deg, rgba(242, 169, 59, .07), transparent 60%), var(--ink-2); }
.inc-card__cap { display: flex; align-items: center; gap: 10px; }
.inc-card__cap > span { flex: 1; display: grid; min-width: 0; }
.inc-card__cap small { color: #F6C27A; font-size: .8rem; }
.inc-card__fitxa { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--ink-3); color: var(--text); }
.inc-card__fitxa svg { width: 16px; height: 16px; }
.inc-card__q { margin: 12px 0 8px; font-weight: 700; font-size: .92rem; }
.inc-ops { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: stretch; }
.inc-vs { align-self: center; color: var(--mute); font-size: .8rem; font-weight: 700; text-transform: uppercase; }
.inc-op { display: grid; gap: 6px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--ink-3); }
.inc-op__h { font-family: var(--display); font-size: 1.35rem; line-height: 1; color: #F6C27A; }
.inc-op__cos { display: grid; min-width: 0; }
.inc-op__cos b { font-size: .88rem; line-height: 1.2; }
.inc-op__cos small { color: var(--mute); font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inc-op__btn { margin-top: auto; min-height: 38px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; }
.inc-op__btn:disabled { opacity: .6; }
.inc-card__peu { margin: 10px 0 0 !important; font-size: .78rem; }
.inc-card__cap > :first-child { flex: none; width: 44px !important; height: 44px !important; border-radius: 50%; object-fit: cover; }
/* Incompatibilitats en carrusel horitzontal (swipe) i opcions amb la informació per decidir */
.inc-carrusel { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -18px; padding: 2px 18px 8px; overscroll-behavior-x: contain; }
.inc-carrusel::-webkit-scrollbar { display: none; }
.inc-carrusel .inc-card { flex: 0 0 min(88%, 420px); scroll-snap-align: center; margin-bottom: 0; }
.inc-carrusel .inc-card:only-child { flex-basis: 100%; }
.inc-ops { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
.inc-op__top { display: flex; align-items: center; justify-content: space-between; }
.inc-op__lc { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; background: rgba(255,255,255,.08); color: var(--mute); }
.inc-op__lloc { display: block; margin-top: 1px; }
.inc-op__dades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 4px 0; }
.inc-op__dades span { display: grid; justify-items: center; padding: 5px 2px; border-radius: 8px; background: rgba(255,255,255,.04); font-size: .64rem; color: var(--mute); text-transform: uppercase; letter-spacing: .03em; }
.inc-op__dades b { font-family: var(--display); font-size: 1.05rem; color: var(--text); letter-spacing: 0; }
.inc-op__class { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.inc-op__class div { display: grid; padding: 5px 7px; border-radius: 8px; background: rgba(255,255,255,.04); }
.inc-op__class small { font-size: .62rem; color: var(--mute); text-transform: uppercase; letter-spacing: .05em; }
.inc-op__class b { font-family: var(--display); font-size: 1rem; }
.inc-op__class i { font-style: normal; font-size: .68rem; color: var(--mute); }
.inc-op__av { margin: 2px 0 0; font-size: .7rem; color: #F6C27A; }
.inc-op__qui { display: flex; align-items: flex-start; gap: 6px; margin: 2px 0 0; font-size: .74rem; color: var(--mute); }
.inc-op__qui svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.inc-op__qui span { display: grid; }
.inc-op__qui b { color: var(--text); font-weight: 600; }
.inc-op__qui small { font-size: .66rem; }
/* Incompatibilitats: que les dues opcions hi càpiguen sempre */
.inc-carrusel .inc-card { min-width: 0; box-sizing: border-box; }
.inc-carrusel .inc-card:only-child { flex: 0 0 100%; }
.inc-ops { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
.inc-ops > .inc-op { min-width: 0; padding: 9px; }
.inc-op__dades { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inc-op__dades span { font-size: .55rem; letter-spacing: 0; overflow: hidden; }
.inc-op__cos b, .inc-op__cos small { overflow: hidden; text-overflow: ellipsis; }
.inc-op__qui b { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- scouting */
.sc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.sc-kpis > div { background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; padding: 10px 10px 9px; display: grid; gap: 2px; min-width: 0; }
.sc-kpis b { font-family: var(--display); font-size: 1.7rem; line-height: 1; }
.sc-kpis span { color: var(--mute); font-size: .72rem; line-height: 1.2; }
.sc-kpis__ok b { color: var(--ok); }
.sc-cerca { display: flex; align-items: center; gap: 8px; background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 0 12px; margin-bottom: 10px; }
.sc-cerca svg { width: 18px; height: 18px; color: var(--mute); flex: none; }
.sc-cerca input { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font: inherit; padding: 12px 0; outline: none; }
.sc-filtres { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
.sc-filtres::-webkit-scrollbar { display: none; }
.sc-filtres .xip { flex: none; }
.sc-filtres .xip small { margin-left: 6px; opacity: .7; }
.sc-graella { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.sc-card { --sc: var(--mute); display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--sc) 12%, transparent), transparent 55%), var(--ink-2); border: 1px solid var(--line); border-left: 3px solid var(--sc); color: var(--text); text-decoration: none; min-width: 0; }
.sc-card__cap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sc-card__cap > span { display: grid; min-width: 0; }
.sc-card__cap b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-card__cap small, .sc-card__club { color: var(--mute); font-size: .8rem; }
.sc-card__club { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-card__val { display: flex; gap: 16px; }
.sc-card__val > span, .sc-hero__val > div { display: grid; gap: 3px; }
.sc-card__val small, .sc-hero__val small { color: var(--subtle); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.sc-card__peu { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sc-card__peu > small { display: inline-flex; align-items: center; gap: 4px; color: var(--mute); font-size: .78rem; }
.sc-card__peu > small svg { width: 14px; height: 14px; }
.sc-est { display: inline-flex; gap: 1px; }
.sc-est i, .sc-est button { display: inline-grid; color: rgba(255, 255, 255, .18); background: none; border: 0; padding: 0; }
.sc-est svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.sc-est .on { color: #F5B81F; }
.sc-est--edit button { padding: 3px; cursor: pointer; }
.sc-est--edit svg { width: 22px; height: 22px; }
.sc-estat { --sc: var(--mute); display: inline-flex; align-items: center; font-style: normal; font-size: .74rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; color: var(--sc); background: color-mix(in srgb, var(--sc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--sc) 35%, transparent); }
.sc-card--seguiment, .sc-estat--seguiment, .sc-hero--seguiment { --sc: #7FB2FF; }
.sc-card--interessant, .sc-estat--interessant, .sc-hero--interessant { --sc: #F5B81F; }
.sc-card--contactat, .sc-estat--contactat, .sc-hero--contactat { --sc: #C08BFF; }
.sc-card--prova, .sc-estat--prova, .sc-hero--prova { --sc: #FF9B52; }
.sc-card--fitxat, .sc-estat--fitxat, .sc-hero--fitxat { --sc: var(--ok); }
.sc-card--descartat, .sc-estat--descartat, .sc-hero--descartat { --sc: #7A828E; }
.sc-card--descartat { opacity: .7; }
.sc-hero { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; align-items: center; padding: 18px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--sc) 28%, transparent), transparent 60%), linear-gradient(180deg, var(--ink-3), var(--ink-2)); border: 1px solid color-mix(in srgb, var(--sc) 35%, var(--line)); }
.sc-hero__foto { position: relative; cursor: pointer; }
.sc-hero__foto .av--xl { width: 92px; height: 92px; font-size: 1.8rem; border-radius: 22px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 55%, transparent); }
.sc-hero__foto .av--xl img { border-radius: 22px; }
.sc-hero__foto i { position: absolute; right: -4px; bottom: -4px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); border: 1px solid var(--line-2); color: var(--text); }
.sc-hero__foto i svg { width: 14px; height: 14px; }
.sc-hero__t { min-width: 0; }
.sc-hero__t small { color: var(--sc); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.sc-hero__t h2 { font-family: var(--display); font-size: 1.9rem; line-height: 1; margin: 4px 0; text-transform: uppercase; }
.sc-hero__t p { margin: 0; color: var(--mute); font-size: .86rem; }
.sc-hero__val { grid-column: 1 / -1; display: flex; gap: 22px; padding-top: 12px; border-top: 1px solid var(--line); }
.sc-estats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 12px 0 4px; }
.sc-estats::-webkit-scrollbar { display: none; }
.sc-estats .sc-estat { flex: none; cursor: pointer; padding: 7px 12px; font-size: .8rem; opacity: .55; }
.sc-estats .sc-estat[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 1px var(--sc) inset; }
.sc-resum { line-height: 1.55; }
.sc-contacte { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sc-contacte > span { flex: 1 1 160px; display: grid; min-width: 0; }
.sc-contacte > span small { color: var(--mute); font-size: .8rem; }
.sc-contacte__b { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-contacte__b .btn svg { width: 15px; height: 15px; }
.sc-dades { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
.sc-dades > div { background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; display: grid; }
.sc-dades small { color: var(--subtle); font-size: .7rem; }
.sc-nota-form textarea, .sc-nota-form input, .sc-video-form input:not([type=file]) { width: 100%; background: var(--ink); border: 1px solid var(--line-2); border-radius: 10px; color: var(--text); font: inherit; padding: 10px 12px; }
.sc-nota-form textarea { resize: vertical; }
.sc-nota-form__peu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.sc-nota-form__peu input[name=context] { flex: 1 1 160px; width: auto; }
.sc-nota-form__peu input[type=date] { flex: 0 0 150px; width: auto; }
.sc-nota-form__v { display: grid; gap: 1px; }
.sc-nota-form__v small { color: var(--subtle); font-size: .68rem; }
.sc-nota-form__v .sc-est--edit svg { width: 18px; height: 18px; }
.sc-nota-form__peu .btn { margin-left: auto; }
.sc-notes { position: relative; display: grid; gap: 12px; margin-top: 14px; padding-left: 4px; }
.sc-nota { display: flex; gap: 10px; align-items: flex-start; }
.sc-nota__c { flex: 1; min-width: 0; background: var(--ink-2); border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; padding: 10px 12px; }
.sc-nota__cap { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.sc-nota__cap small { color: var(--mute); font-size: .76rem; }
.sc-nota__cap .sc-est svg { width: 12px; height: 12px; }
.sc-nota__c p { margin: 6px 0 0; line-height: 1.5; font-size: .92rem; }
.sc-nota__x { margin-left: auto; background: none; border: 0; color: var(--subtle); padding: 4px; cursor: pointer; }
.sc-nota__x svg { width: 15px; height: 15px; }
.sc-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-bottom: 10px; }
.sc-video { background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.sc-video video, .sc-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border: 0; }
.sc-video__link { display: flex; align-items: center; gap: 12px; aspect-ratio: 16 / 9; padding: 16px; background: linear-gradient(135deg, var(--ink-3), var(--ink)); color: var(--text); text-decoration: none; }
.sc-video__link svg { width: 30px; height: 30px; color: var(--accent-hi); flex: none; }
.sc-video__link span { display: grid; min-width: 0; font-weight: 700; }
.sc-video__link small { color: var(--mute); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-video__peu { display: flex; align-items: center; gap: 8px; padding: 9px 12px; }
.sc-video__peu > span { display: grid; min-width: 0; }
.sc-video__peu small { color: var(--mute); font-size: .76rem; }
.sc-video-form { display: grid; gap: 8px; }
.sc-video-form__f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-video-form__f .btn { cursor: pointer; flex: none; }
.sc-video-form__f .btn svg { width: 15px; height: 15px; }
.sc-video-form__f input[name=url] { flex: 1 1 180px; width: auto; }
.sc-progres { height: 6px; border-radius: 99px; background: var(--ink-3); overflow: hidden; }
.sc-progres i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
@media (max-width: 420px) { .sc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }