/* De quina versió és aquest fitxer: el servidor hi posa la versió en fer la
   fotografia dels fitxers (src/fitxers.js), i l'app comprova en arrencar que
   coincideix amb la de la pàgina (comprovaFitxersDeLaVersio, a app.js). */
:root { --yourbox-versio: "5952224"; }

* { box-sizing: border-box; }

/* El fons del <html> és el que el navegador fa servir per a tot el que queda
   FORA de la pàgina: darrere la barra d'estat quan l'app va instal·lada, i les
   vores quan es fa el rebot en arribar al final.
   Si no n'hi ha, el navegador agafa el del <body>, que és gris clar, i això és
   el que es veia darrere l'hora i la bateria (i per això iOS hi posava el text
   en negre: es pensava que el fons era clar). Negre, com la capçalera. */
html { background: #1a1a1a; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  background: #f4f4f5;
  color: #1a1a1a;
}

.hidden { display: none !important; }

/* ---------- Pantalla de selecció d'idioma ---------- */
.lang-screen {
  position: fixed;
  inset: 0;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  overflow: hidden;   /* la franja de llum entra i surt per fora: que no desplaci res */
}
/* Per sobre de la franja de llum: el logo, el text i els botons. */
.lang-box { text-align: center; color: white; padding: 24px; position: relative; z-index: 1; }

/* ── LA PASSADA DE LLUM DE LA PANTALLA D'IDIOMA ────────────────────────────
   Una franja de llum blanca travessa el fons en diagonal, per darrere del logo:
   entra per la cantonada de dalt a l'esquerra i surt per la de baix a la dreta.

   DUES PASSADES I PROU, A POSTA: una en carregar la pantalla, 7 s d'espera amb
   la llum fora de la vista, una segona passada, i s'atura. No és un bucle
   infinit (decidit el 2026-09-19). Tota l'animació dura 11,2 s: 2,1 de passada
   + 7 d'espera + 2,1 de passada.

   La convenció ve de PintOn (~/pintor/backend/templates/nav.js, «ANIMACIONS
   DEL PANELL — CONVENCIÓ», l'animació nav-llum). Se'n manté:
     · linear: res d'ease, una passada que accelera i frena crida l'atenció.
     · la llum en una capa pròpia (::after, pointer-events: none), no al fons
       de l'element: el color base queda intacte.
     · una passada d'uns 2 s (el 30% del cicle de 7 s de PintOn), i entre
       passades, la llum fora de la vista.
     · amb prefers-reduced-motion, res.
   I s'hi aparta, a posta:
     · no és permanent: dues passades i prou (vegeu a dalt).
     · s'anima transform i no background-position. En un botó de 44 px no
       importa, però en una pantalla sencera background-position la repintaria
       a cada fotograma; amb transform, la capa es pinta una vegada i la mou la
       GPU mentre dura l'animació. No porta will-change: en acabar, no queda
       cap capa reservada.
     · 110° i no 100°: en un botó quadrat 100° és diagonal, però en una
       pantalla de mòbil, alta i estreta, gairebé semblaria vertical.

   LA GEOMETRIA. La capa ES la franja: un rectangle de --llum-gruix d'ample,
   molt llarg (250vmax, prou per creuar qualsevol pantalla), centrat a la
   cantonada de dalt a l'esquerra i girat 20° (les vores queden a 110°). Es
   mou perpendicular a ella mateixa, en la direcció de 110°: (0,9397, 0,3420).
   Projectada en aquesta direcció, la pantalla va de 0 (la cantonada de dalt a
   l'esquerra) a --llum-l = 0,9397·ample + 0,3420·alt (la de baix a la dreta),
   calculat amb vw i vh: val per a qualsevol mida i orientació.
     · inici: el centre a -gruix/2 → la vora del davant toca la cantonada de
       dalt a l'esquerra.
     · final: el centre a llum-l + gruix/2 → la vora del darrere acaba de
       sortir per la de baix a la dreta.
   (La primera versió era una capa de la mida de la pantalla amb el degradat a
   dins, desplaçada ±62% de costat: la franja inclinada no hi cabia i quedava
   tallada, no arribava a les cantonades, i durant l'espera un tros de llum es
   quedava quiet a baix a la dreta.)

   Llum blanca, i no càlida: una llum taronja per darrere del logo embrutaria el
   taronja de la marca. L'opacitat (0,08) la vigila un test de contrast (el
   blanc i el taronja del logo han de quedar per sobre de 4,5:1 fins i tot amb
   la franja just per darrere). */
.lang-screen {
  --llum-l: calc(93.97vw + 34.2vh);
  --llum-gruix: calc(var(--llum-l) * 0.24);
  --llum-inici: calc(var(--llum-gruix) * -0.5);
  --llum-final: calc(var(--llum-l) + var(--llum-gruix) * 0.5);
}
.lang-screen::after {
  content: '';
  position: absolute;
  left: calc(var(--llum-gruix) * -0.5);
  top: -125vmax;
  width: var(--llum-gruix);
  height: 250vmax;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent, rgba(255, 255, 255, 0.08) 50%, transparent);
  transform: translate(calc(var(--llum-inici) * 0.9397), calc(var(--llum-inici) * 0.342)) rotate(20deg);
  animation: lang-llum 11.2s linear 1 forwards;
}
/* 0 → 18,75%: primera passada (2,1 s). 18,75 → 81,25%: espera (7 s), amb la
   llum quieta FORA de la pantalla (step-end: salta a l'inici just abans de la
   segona passada, sense travessar res). 81,25 → 100%: segona passada. */
@keyframes lang-llum {
  0% {
    transform: translate(calc(var(--llum-inici) * 0.9397), calc(var(--llum-inici) * 0.342)) rotate(20deg);
  }
  18.75% {
    transform: translate(calc(var(--llum-final) * 0.9397), calc(var(--llum-final) * 0.342)) rotate(20deg);
    animation-timing-function: step-end;
  }
  81.25% {
    transform: translate(calc(var(--llum-inici) * 0.9397), calc(var(--llum-inici) * 0.342)) rotate(20deg);
    animation-timing-function: linear;
  }
  100% {
    transform: translate(calc(var(--llum-final) * 0.9397), calc(var(--llum-final) * 0.342)) rotate(20deg);
  }
}
/* Sense capa ni animació: ni moviment ni res que la GPU hagi de guardar. Els
   !important són defensius, com a PintOn. */
@media (prefers-reduced-motion: reduce) {
  .lang-screen::after {
    animation: none !important;
    display: none !important;
  }
}
.lang-box h1 { margin: 0 0 24px; line-height: 0; }
/* El logo quadrat amb l'eslògan, sobre el fons fosc de la pantalla d'idioma. */
/* Amplada i proporció explícites: cap navegador no ha de deduir la mida de l'SVG. */
.lang-logo img { display: block; width: min(60vw, 220px); height: auto; aspect-ratio: 1275 / 1193; margin: 0 auto; }
.lang-title { font-size: 1.1rem; line-height: 1.8; color: #ccc; margin-bottom: 28px; }
.lang-title .sep { color: #ff6a00; }
.lang-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lang-btn {
  background: transparent;
  border: 2px solid #ff6a00;
  color: white;
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
}
.lang-btn:hover { background: #ff6a00; }

/* ---------- Capçalera ---------- */
header {
  background: #1a1a1a;
  color: white;
  /* El negre ha d'arribar a la vora de dalt, per darrere de la barra d'estat.
     A l'esquerra i a la dreta, per al retall de la pantalla en horitzontal. */
  padding: calc(14px + env(safe-area-inset-top, 0px))
           calc(20px + env(safe-area-inset-right, 0px))
           14px
           calc(20px + env(safe-area-inset-left, 0px));
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Una sola línia, sempre: a 375 px, amb un nom llarg com «Pere BERTOMEU»,
     el logo, l'idioma, el nom i «Sortir» hi han de cabre sencers (requisit,
     2026-09-19). Si un nom és tan llarg que no hi cap, s'escurça amb «…»; és
     una xarxa, no el comportament habitual. */
  flex-wrap: nowrap;
  gap: 10px;
}
header h1 { margin: 0; font-size: 1.3rem; }
/* El logo apaisat sense eslògan, a 24 px d'alçada. Mida explícita en les dues
   direccions (5093 x 1328 a escala): cap navegador no l'ha de deduir. A 28 px
   no hi cabia el nom sencer. */
.header-logo { line-height: 0; flex: 0 0 auto; }
.header-logo img { display: block; width: 92px; height: 24px; }
.logo-amagat { visibility: hidden; }

/* El logo quadrat a la pantalla d'entrar. Té les lletres blanques: va sobre una
   franja del color de la capçalera. */
.auth-marca {
  background: #1a1a1a;
  border-radius: 10px;
  padding: 20px 16px;
  margin-bottom: 16px;
}
.auth-marca img { display: block; width: min(55vw, 200px); height: auto; aspect-ratio: 1275 / 1193; margin: 0 auto; }
.header-right { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; min-width: 0; }

/* Els camps de data, a tot arreu igual.
   A l'iPhone el camp de data té amplada pròpia i no baixa d'ella encara que
   se li digui width:100% i min-width:0: sortia per la dreta del panell
   (comprovat al mòbil el 2026-09-21, dues vegades). Amb appearance:none deixa
   de ser un control natiu amb mida pròpia i es comporta com els altres camps.
   El selector de data segueix obrint-se igual en tocar-lo.
   Va a tots dos camps de data, no només al que sortia: si no, el dels filtres i
   el del formulari es veurien diferents. */
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  /* A iOS el text de la data surt del color d'accent (blau) i centrat. El color
     el força text-fill-color, que és el que mana als controls de WebKit, i
     l'alineació va al tros de dins que escriu el valor. */
  color: #1a1a1a;
  -webkit-text-fill-color: #1a1a1a;
  text-align: left;
}
input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}

/* La tria d'idioma, a «Compte» i a la pantalla d'entrar. No és dins de cap
   <form>, o sigui que les regles dels camps no hi arriben i s'ha de nomenar:
   16 px perquè iOS no faci zoom, i 44 px d'alçada. */
.tria-idioma { display: block; margin-bottom: 12px; font-size: 0.9rem; color: #444; }
.tria-idioma-select {
  display: block;
  min-height: 44px;
  margin-top: 5px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  background: white;
  width: 100%;
}
.auth-idioma { margin-top: 16px; }

/* El saldo a la pantalla de reservar: una línia, no una targeta. */
.saldo-linia {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0 0 12px;
  padding: 0 12px;
  background: #1a1a1a;
  color: white;
  border-radius: 8px;
  font-size: 0.95rem;
}
/* L'avís, només quan hi ha alguna cosa a dir. */
.saldo-avis-franja {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: #3a2a12;
  color: #ffc879;
  border-radius: 8px;
  font-size: 0.9rem;
}
#user-info { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Al mòbil, el marge lateral de la capçalera és el mateix que el de la pàgina
   (16 px) i els espais són més curts: així hi cap el nom sencer. */
@media (max-width: 420px) {
  header {
    padding: calc(14px + env(safe-area-inset-top, 0px))
             calc(16px + env(safe-area-inset-right, 0px))
             14px
             calc(16px + env(safe-area-inset-left, 0px));
    gap: 8px;
  }
  .header-right { gap: 8px; }
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px
           calc(12px + env(safe-area-inset-right, 0px))
           calc(16px + env(safe-area-inset-bottom, 0px))
           calc(12px + env(safe-area-inset-left, 0px));
}

/* ---------- Pestanyes ---------- */
/* La pestanya ACTIVA es veu taronja i plena; la inactiva, plana i grisa.
   Abans l'activa era blanca i es confonia amb el fons del panell, cosa que
   feia semblar que la seleccionada era l'altra. */
.tab {
  min-height: 44px;
  padding: 9px 18px;
  border: 1px solid transparent;
  background: transparent;
  color: #6b6b6b;   /* #888 feia 3,1 sobre el gris de la barra */
  cursor: pointer;
  border-radius: 8px;
  font-size: 0.95rem;
  transition: all 0.15s;
}
.tab:hover { color: #444; background: #f0f0f0; }
.tab.active {
  background: #ff6a00;
  color: #1a1a1a;   /* fosc sobre el taronja (abans blanc: poc contrast) */
  font-weight: 600;
}

.auth-tabs, .reserves-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  background: #f0f0f0;
  padding: 4px;
  border-radius: 10px;
}
.auth-tabs { margin-bottom: 0; border-radius: 10px 10px 0 0; }
/* Futures / Passades: meitat i meitat, sempre, sense saltar de línia. */
.reserves-tabs .tab { flex: 1 1 0; min-width: 0; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
/* El títol «Cancel·lades» dins de Passades. */
.reserves-subtitol { margin: 18px 0 6px; font-size: 0.9rem; font-weight: 600; color: #666; }

.auth-form, .panel {
  background: white;
  padding: 14px;
  border-radius: 0 0 10px 10px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.panel { border-radius: 10px; }
.panel h2 { margin-top: 0; font-size: 1.15rem; }

/* ---------- Formularis ---------- */
form label { display: block; margin-bottom: 10px; font-size: 0.9rem; color: #444; }

/* Tots els camps d'un formulari, sense anar-los enumerant per tipus. Abans
   aquesta regla llistava date, time i number, i qualsevol altre camp (els de
   text del perfil, de la contrasenya, de l'espai, del paquet i l'etiqueta de la
   reserva) es quedava amb l'aspecte i la mida que li dona el navegador: a iOS,
   13 px, i la pàgina fa zoom en enfocar-lo. La llista per tipus era una llista
   per oblidar-se'n. */
form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
form select,
form textarea {
  min-height: 44px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;      /* 16px: per sota, iOS fa zoom en enfocar */
  font-family: inherit; /* si no, els desplegables van amb la lletra del sistema */
  width: 100%;
  margin-top: 5px;
  background: white;
}
/* Als formularis d'entrar, l'etiqueta va sobre el camp, com a la resta. */
.auth-form label { margin-bottom: 12px; }

/* Un camp amb error, marcat també a la vista, no només per al lector. */
form input[aria-invalid="true"] { border-color: #c0392b; }

.row { display: flex; gap: 12px; }
.row label { flex: 1; }

/* Casella "ús exclusiu" ben alineada */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 16px;
  padding: 12px;
  background: #fafafa;
  border-radius: 8px;
}
.checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: #ff6a00;
}
.checkbox-label { margin: 0 !important; cursor: pointer; }
.checkbox-label strong { display: block; font-size: 0.95rem; color: #1a1a1a; }
.checkbox-label small { display: block; color: #6b6b6b; font-size: 0.82rem; margin-top: 2px; }   /* #777: 4,29 sobre el gris del full */

/* .boto-primari: un botó que no envia cap formulari però ha de ser igual que
   els de desar (la botiga, Fase 4): mateixa mida, lletra i color. */
button[type="submit"], .boto-primari {
  background: #ff6a00;
  color: #1a1a1a;   /* fosc sobre el taronja (abans blanc: poc contrast) */
  border: none;
  min-height: 44px;
  padding: 11px 24px;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 500;
}
button[type="submit"]:hover, .boto-primari:hover { background: #e55f00; }
/* Un botó apagat s'ha de veure apagat. Fins al 2026-09-22 no hi havia cap
   estil i es pintava igual de taronja: al mòbil, «Desar» semblava actiu. */
button[type="submit"]:disabled,
button[type="submit"]:disabled:hover,
.boto-primari:disabled,
.boto-primari:disabled:hover {
  background: #d6d6d6;
  color: #6b6b6b;
  cursor: default;
}

.error { color: #c0392b; margin: 10px 0 0; font-size: 0.9rem; }
.success { color: #1e8449; margin: 10px 0 0; font-size: 0.9rem; }
.empty { color: #888; font-size: 0.9rem; }

/* ---------- Targetes de boxes ---------- */
.cards { display: grid; gap: 10px; }
.box-card {
  border: 1px solid #eaeaea;
  border-radius: 10px;
  min-width: 0;
}
.box-card.obert { border-color: #ffc9a3; }

/* La capçalera de la targeta és un botó: tocar-la obre el detall. Miniatura a
   96 px i el text al costat, que pot encongir-se fins a zero perquè un nom llarg
   no eixampli la pàgina. */
.box-card-cap {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 12px;
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.box-card-text { min-width: 0; overflow-wrap: anywhere; }
.box-card-text .box-meta,
.box-card-text .box-sede { display: block; }
.box-mini {
  display: block;
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
  background: #f0f0f0;
}
/* Sense foto: el mateix requadre, amb el tipus d'espai. Cap imatge trencada. */
.box-mini-buida {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 4px;
  color: #777;
  font-size: 0.75rem;
  text-align: center;
  overflow-wrap: anywhere;
}

.box-detall { padding: 0 12px 12px; min-width: 0; }
.box-foto { margin: 0; }
.box-foto-gran {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  background: #f0f0f0;
}
/* Les altres fotos de l'espai. Si no hi caben, es desplacen dins del seu
   requadre, mai la pàgina. */
.box-fotos-mini {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  padding-bottom: 4px;
  overflow-x: auto;
  max-width: 100%;
}
.box-foto-tria {
  flex: 0 0 auto;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  background: none;
  cursor: pointer;
}
.box-foto-tria.actiu { border-color: #ff6a00; }
.box-foto-tria img {
  display: block;
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
}
.box-veure-lliure {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  background: #ff6a00;
  color: #1a1a1a;   /* fosc sobre el taronja (abans blanc: poc contrast) */
  border: none;
  border-radius: 8px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.box-veure-lliure:hover { background: #e55f00; }

/* ---------- Panell: les fotos d'un espai ---------- */
.box-fotos { margin-top: 16px; min-width: 0; }
.box-fotos h3 { margin: 0 0 8px; }
.box-fotos-llista { display: grid; gap: 12px; margin-bottom: 12px; }
/* Miniatura i text a dalt; els botons a sota, i si no hi caben, a la línia
   següent. Mai més amples que la pantalla. */
.foto-fila {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
  min-width: 0;
}
.foto-fila-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.foto-fila-info .portada-tag { margin-left: 0; background: #fff1e6; color: #a34700; }
.foto-fila-botons { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.boto-44 { min-width: 44px; min-height: 44px; }
.foto-fila-botons button:disabled { opacity: 0.4; cursor: default; }
.boto-principal {
  background: #ff6a00;
  color: #1a1a1a;   /* fosc sobre el taronja (abans blanc: poc contrast) */
  border: none;
  padding: 11px 24px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.boto-principal:hover { background: #e55f00; }
.boto-principal:disabled { opacity: 0.5; cursor: default; }

/* La vista prèvia: la foto gran com al detall, i la miniatura a la mida de la
   targeta, que és on es nota el retall. */
.box-foto-previa { margin-top: 12px; padding: 12px; border: 1px solid #eee; border-radius: 10px; min-width: 0; }
.box-foto-previa figure { margin: 0; min-width: 0; }
.box-foto-previa figcaption { font-size: 0.8rem; color: #666; margin-top: 4px; }
.previa-mini canvas { display: block; width: 96px; height: 72px; border-radius: 6px; background: #f0f0f0; }
/* La foto sencera amb el requadre 4:3. Mida i posició les posa app.js; aquí,
   el centrat (queda marge a tots dos costats per desplaçar la pàgina) i que
   sobre la foto el dit mogui el requadre i no la pàgina. */
.previa-enquadra { margin: 0 0 12px; }
.enquadra {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 8px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: crosshair;
  background: #f0f0f0;
}
.enquadra canvas { display: block; }
/* El que queda fora del requadre, enfosquit. */
/* El fosc de fora del requadre es fa amb l'ombra del propi requadre, que el
   contenidor retalla. L'abast el posa el JS (--fosc-abast) i és la mida del
   contenidor: prou per arribar a totes les vores i res més.
   Abans hi havia 9999px fixos, que són una superfície d'uns 400 milions de
   píxels. A l'iPhone la capa no es pintava i es perdia el fosc sencer: la foto
   es veia sense cap zona enfosquida, i amb el requadre invisible semblava que
   arrossegar-lo no fes res (2026-09-20). El número de reserva és per si mai
   es pinta abans que el JS hi arribi. */
.enquadra-requadre {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #fff;
  outline: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 0 var(--fosc-abast, 900px) rgba(0, 0, 0, 0.55);
  cursor: grab;
}
.enquadra-requadre:focus-visible { border-color: #ff6a00; }
.enquadra-requadre.fix { cursor: default; box-shadow: none; }
.previa-enquadra figcaption { text-align: center; }

.box-card .tipo-tag {
  display: inline-block;
  background: #f0f0f0;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.75rem;
  margin-left: 8px;
  color: #555;
}
.box-meta { color: #666; font-size: 0.88rem; margin-top: 4px; }

/* ---------- Llista de reserves ---------- */
.list .booking-item {
  border-bottom: 1px solid #eee;
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.list .booking-item:last-child { border-bottom: none; }
.booking-meta { color: #444; font-size: 0.9rem; margin-top: 3px; }
.booking-status { color: #888; font-size: 0.8rem; margin-top: 2px; }

.cancel-btn {
  background: none;
  border: 1px solid #c0392b;
  color: #c0392b;
  border-radius: 8px;
  min-height: 44px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.cancel-btn:hover { background: #c0392b; color: white; }
/* Moure i Cancel·lar, l'un sota l'altre a la dreta de cada reserva (fase 3). */
.booking-accions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.move-btn, .serie-btn {
  background: none; border: 1px solid #555; color: #1a1a1a; border-radius: 8px;
  min-height: 44px; padding: 6px 14px; cursor: pointer; font-size: 0.85rem;
}
.move-btn:hover, .serie-btn:hover { background: #f2f2f2; }

@media (max-width: 480px) {
  .row { flex-direction: column; gap: 0; }
}

/* Error d'arrencada: si el servidor no dona la configuració no es pinta l'app,
   perquè les franges horàries sortirien inventades sense que es notés. */
.config-error {
  max-width: 520px;
  margin: 60px auto;
  padding: 20px 24px;
  border: 1px solid #e0b4b4;
  border-radius: 10px;
  background: #fdf2f2;
  color: #8a2020;
  text-align: center;
  line-height: 1.5;
}

/* Seu a la targeta del box. Discret: amb una sola seu és redundant, però quan
   n'hi hagi més d'una cal saber on és cada sala. */
.box-sede {
  font-size: 0.85em;
  color: #777;
  margin-top: 2px;
}

/* ============================================================
   Panell d'administració
   Pensat de 375px cap amunt (iPhone 11). Res d'amplades fixes:
   els controls s'apilen quan no hi caben i mai forcen scroll lateral.
   ============================================================ */

/* El comptador de reserves futures, dins del botó de la pestanya. Petit a
   posta: amb quatre pestanyes a 375 px, el número no es pot menjar el nom. */
.nav-comptador {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* La confirmació d'una reserva acabada de fer, a la pantalla de reservar. */
.reserva-feta {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: #e8f6ec;
  border-radius: 8px;
  color: #12633a;
  font-size: 0.92rem;
}

/* Una càrrega que ha fallat: es diu, i es pot tornar a provar. */
.carrega-error {
  color: #8a1f11;
}
/* Un botó de debò, no un enllaç: al mòbil, el subratllat taronja no es
   reconeixia com a botó. Va a la línia de sota, sencer. */
.carrega-reintenta {
  display: block;
  margin-top: 8px;
}

/* «Què és un bo?»: plegat, perquè qui ja ho sap no l'hagi de llegir. */
.que-es {
  margin: 8px 0;
  font-size: 0.9rem;
  color: #444;
}
.que-es summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #1a1a1a;
  text-decoration: underline;
}
.que-es p { margin: 4px 0 8px; }
/* Dins del quadre negre del saldo, clar. Abans es pintava negre sobre negre:
   el desplegable hi era, ocupava lloc i no es veia (2026-09-23). */
.saldo-panel .que-es { color: #ddd; }
.saldo-panel .que-es summary { color: #fff; }

/* Fins quan es pot cancel·lar amb devolució: al full i a cada reserva. */
.full-termini, .booking-termini {
  font-size: 0.88rem;
  color: #555;
}
.full-termini { margin: 0 0 10px; }
.booking-termini { margin-top: 2px; }
.booking-termini.fora { color: #8a1f11; }

/* La reserva no ha entrat perquè l'agenda havia canviat. */
.reserva-avis {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: #fdecea;
  border-radius: 8px;
  color: #8a1f11;
  font-size: 0.92rem;
}

/* «Avui tens Box 3 a les 18:00»: notícia, no navegació. */
.avui-tens {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: #fff4e5;
  border-radius: 8px;
  color: #6b3a00;
  font-size: 0.9rem;
}

.enllac-espais { margin: 0 0 12px; }
.tornar { margin: 0 0 12px; }

.app-nav {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  background: #f0f0f0;
  padding: 4px;
  border-radius: 10px;
}

.nav-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: #6b6b6b;   /* #888 feia 3,1 sobre el gris de la barra */
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  font-family: inherit;
  transition: all 0.15s;
}
.nav-btn:hover { color: #444; background: #e6e6e6; }
.nav-btn.active { background: #ff6a00; color: #1a1a1a;   /* fosc sobre el taronja (abans blanc: poc contrast) */ font-weight: 600; }

/* La barra principal (Reservar · Reserves · Compte · Admin). Amb les quatre
   pestanyes d'un admin i totes de la mateixa amplada, a 375 px a «Reserves»
   li quedaven 63 px, i «Reserves (12)» en necessita uns 90: el número baixava
   a una segona línia i la barra passava de 52 a 64 px (25 de setembre de
   2026). Ara cap pestanya parteix el text: cadascuna fa el que necessita i la
   resta de l'espai es reparteix a parts iguals. La lletra i els marges, el
   mínim més petits perquè hi càpiga «Reservas (99)» amb quatre pestanyes.
   Només aquí: les sub-pestanyes del panell i l'agenda tenen les seves. */
.app-nav { gap: 4px; }
.app-nav .nav-btn {
  flex: 1 1 auto;
  white-space: nowrap;
  padding: 10px 6px;
  font-size: 0.9rem;
}

.panel-intro {
  margin: -6px 0 18px;
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
}

.setting-row {
  padding: 16px 0;
  border-bottom: 1px solid #eee;
}
.setting-row:last-child { border-bottom: none; }

.setting-label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

/* L'explicació en paraules planes. Qui fa servir això és el gestor del
   gimnàs, no un programador: el nom de la clau no li diu res. */
.setting-help {
  margin: 0 0 10px;
  color: #666;
  font-size: 0.85rem;
  line-height: 1.45;
}

.setting-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Especificitat pujada a posta: el full ja té una regla `form input[type=...]`
   amb width:100% i margin-top que guanyaria per especificitat i desquadraria
   la fila. */
#settings-form .setting-control input,
#settings-form .setting-control select {
  flex: 1 1 120px;
  min-width: 0;              /* sense això un input flex desborda el contenidor */
  width: auto;
  margin-top: 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;           /* 16px: per sota, iOS fa zoom en enfocar */
  font-family: inherit;
}

.setting-unit {
  color: #888;
  font-weight: 400;
}

.setting-save {
  flex: 0 0 auto;
  border: none;
  background: #ff6a00;
  color: #1a1a1a;   /* fosc sobre el taronja (abans blanc: poc contrast) */
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
  font-weight: 600;
}
.setting-save:disabled { background: #ddd; color: #999; cursor: default; }

.setting-msg {
  margin: 8px 0 0;
  font-size: 0.85rem;
  min-height: 1.1em;         /* reserva l'espai perquè la fila no salti */
}
.setting-msg.error { color: #c0392b; }
.setting-msg.success { color: #1e8449; }
.setting-msg.warning { color: #8a5300; }

/* Versió. El peu diu quina versió corre en aquesta pàgina; la franja avisa que
   n'hi ha una de nova sense bloquejar res ni treure el focus. */
.peu-app { text-align: center; padding: 12px 8px 24px; }
/* Els enllaços legals del peu: petits de lletra però de 44 px de toc. */
.peu-legal { display: flex; justify-content: center; gap: 20px; }
.peu-legal a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; color: #666; font-size: 0.85rem;
}
.versio-peu {
  text-align: center;
  font-size: 0.72rem;
  color: #999;
  margin: 0;
}
.llista-legal { list-style: none; padding: 0; margin: 0; }
.llista-legal a { display: flex; align-items: center; min-height: 44px; color: #b04a00; }
/* Sense connexió: la capçalera s'allarga cap avall amb una línia sota el logo.
   El mateix negre i els mateixos marges, perquè es llegeixi com a part de la
   capçalera; text ambre, que destaca sobre el negre sense cridar, amb un punt
   al davant. La zona de dalt (la barra d'estat de l'iPhone) no es toca: és la
   de la capçalera, com sempre. */
.sense-connexio {
  background: #1a1a1a;
  color: #ffc879;
  padding: 0
           calc(20px + env(safe-area-inset-right, 0px))
           12px
           calc(20px + env(safe-area-inset-left, 0px));
  font-size: 0.85rem;
  line-height: 1.4;
}
.sense-connexio::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: #ffc879;
  vertical-align: 1px;
}
@media (max-width: 420px) {
  .sense-connexio {
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
  }
}

/* Mode de proves: una cinta ambre sota la capçalera, amb el text fosc. Al
   revés que la de sense connexió (ambre sobre negre), perquè no es confonguin
   quan surten totes dues. Els mateixos marges laterals que la capçalera. */
.mode-proves {
  background: #ffc879;
  color: #1a1a1a;
  padding: 8px
           calc(20px + env(safe-area-inset-right, 0px))
           8px
           calc(20px + env(safe-area-inset-left, 0px));
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
}
@media (max-width: 420px) {
  .mode-proves {
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
  }
}

/* A baix de tot i per sobre de tot (27 de setembre de 2026). A dalt, amb
   `sticky; top: 0`, a l'app instal·lada quedava darrere de la barra d'estat de
   l'iPhone (la pàgina hi arriba per viewport-fit=cover), només es veia estirant
   la pàgina, i la capçalera, que ja no era la primera, hi afegia el seu marge
   de la barra d'estat: un gran espai negre buit. A baix, amb el marge de la
   barra d'inici de l'iPhone. La pàgina hi deixa lloc (mostraFranjaVersio) per
   no tapar cap botó; els fulls que pugen des de baix van per sobre. */
.versio-franja {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px calc(14px + env(safe-area-inset-right, 0px))
           calc(10px + env(safe-area-inset-bottom, 0px))
           calc(14px + env(safe-area-inset-left, 0px));
  background: #fff4e5;
  border-top: 2px solid #ff6a00;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.15);
  color: #5c3300;
  font-size: 0.95rem;
  font-weight: 600;
}
.versio-boto {
  background: #ff6a00;
  color: #1a1a1a;   /* fosc sobre el taronja (abans blanc: poc contrast) */
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  min-height: 44px;
  font-weight: 600;
  cursor: pointer;
}
.setting-msg.warning ul { margin: 6px 0 0; padding-left: 18px; }

@media (max-width: 420px) {
  /* A 375px el botó al costat deixa l'input massa estret per llegir-hi res.
     El baixem a una línia sencera. */
  .setting-control { gap: 10px; }
  #settings-form .setting-control input,
  #settings-form .setting-control select { flex: 1 1 100%; }
  .setting-save { width: 100%; padding: 12px; }
}

/* ============================================================
   Filtres del llistat de boxes
   No estaven estilats: els selects sortien amb la mida per defecte del
   navegador i al mòbil eren incòmodes de prémer. 44px d'alçada mínima és
   el que recomana Apple per a una diana tàctil.
   ============================================================ */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.filters label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 160px;
  min-width: 0;
  font-size: 0.9rem;
  color: #444;
}

/* El camp de data d'aquí no és dins de cap <form>, o sigui que la regla dels
   formularis no hi arriba i s'ha de nomenar. Quan no hi era, Safari el pintava
   amb la seva mida (uns 13 px) i sense els 44 px d'alçada, al costat d'un
   desplegable que sí que els tenia. */
.filters select,
.filters input[type="date"] {
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;      /* 16px: per sota, iOS fa zoom en enfocar */
  font-family: inherit;
  background: white;
}

@media (max-width: 420px) {
  /* A 375px dos filtres de costat deixen cadascun uns 170px. Millor un per
     línia, a amplada sencera. */
  .filters label { flex: 1 1 100%; }
}

/* ============================================================
   Panell d'administració: espais
   ============================================================ */

.sub-nav { background: #f7f7f7; margin-bottom: 14px; }
.sub-nav .nav-btn { padding: 8px 10px; font-size: 0.9rem; }

/* ============================================================
   Barres de pestanyes que no hi caben (375px)
   ============================================================
   Sis pestanyes no caben en un mòbil. Abans, els botons estiraven la PÀGINA i
   tot es desplaçava de costat; a més, l'última quedava tallada a la vora sense
   cap senyal que allò es pogués arrossegar.

   Ara es desplaça NOMÉS la barra, i tres coses ho fan evident:
     - un degradat a la vora on hi ha més contingut, que desapareix en arribar
       al final (les classes les posa actualitzaIndicadorsNav() a app.js);
     - en entrar, la pestanya activa es posiciona sola dins la vista;
     - la pestanya tallada queda mig visible, mai clavada a la vora, perquè el
       posicionament sempre deixa un marge (PEEK a app.js) i el degradat no
       l'amaga del tot. */

.nav-scroll {
  position: relative;
  margin-bottom: 14px;
}

.nav-scroll .sub-nav {
  margin-bottom: 0;
  /* Sis píxels més d'aire al final: en arribar a l'última pestanya, no queda
     enganxada a la vora. */
  padding-inline-end: 10px;
  overflow-x: auto;
  scrollbar-width: none;          /* la barra de desplaçament no cal: ja hi ha el degradat */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.nav-scroll .sub-nav::-webkit-scrollbar { display: none; }

/* Els botons no s'estrenyen ni parteixen el text: es desplacen. */
.nav-scroll .nav-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.nav-scroll::before,
.nav-scroll::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  border-radius: 10px;
}
/* El degradat no arriba a tapar del tot la pestanya tallada: es continua veient
   que hi ha alguna cosa a sota. */
.nav-scroll::after {
  right: 0;
  background: linear-gradient(to right, rgba(247, 247, 247, 0) 0%, rgba(247, 247, 247, 0.92) 85%);
}
.nav-scroll::before {
  left: 0;
  background: linear-gradient(to left, rgba(247, 247, 247, 0) 0%, rgba(247, 247, 247, 0.92) 85%);
}
.nav-scroll.hi-ha-dreta::after { opacity: 1; }
.nav-scroll.hi-ha-esquerra::before { opacity: 1; }

.primary-btn {
  /* 44 px per tocar-lo amb el dit (repassada del 4 d'octubre de 2026: «+ Nou espai» i companyia en feien 42). */
  min-height: 44px;
  border: none;
  background: #ff6a00;
  color: #1a1a1a;   /* fosc sobre el taronja (abans blanc: poc contrast) */
  padding: 12px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 600;
  margin-bottom: 16px;
}

.secondary-btn {
  border: 1px solid #ccc;
  background: white;
  color: #444;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
}
.secondary-btn:hover { background: #f0f0f0; }

#box-form {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
  background: #fafafa;
}
#box-form h3 { margin: 0 0 14px; font-size: 1rem; }

.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.form-actions button { flex: 1 1 120px; min-height: 44px; }

.box-admin-item {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
}
.box-admin-item:last-child { border-bottom: none; }
.box-admin-item.inactiu { opacity: 0.6; }

.box-admin-info { flex: 1 1 200px; min-width: 0; }
.inactiu-tag { background: #999; }

.box-pending {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.8rem;
  color: #8f4e00;   /* #b06000: 4,28 sobre aquest fons, per sota del mínim (4,5) */
  background: #fff4e5;
  padding: 2px 8px;
  border-radius: 10px;
}

.box-admin-actions {
  display: flex;
  flex-wrap: wrap;      /* si no hi caben, a una segona línia; mai fora de la pantalla */
  gap: 8px;
  flex: 0 1 auto;
  max-width: 100%;
}
.box-admin-actions button { min-height: 44px; white-space: nowrap; }

@media (max-width: 420px) {
  /* A 375px els dos botons al costat de la informació deixen tot massa
     estret. Passen a una línia sencera sota de l'espai. */
  .box-admin-info { flex: 1 1 100%; }
  .box-admin-actions { flex: 1 1 100%; }
  /* Els botons de text s'estiren per omplir la línia, però mai per sota del
     que ocupa el seu text; les fletxes, sempre quadrades. Els que no hi caben
     passen a la línia de sota (Productes, amb ↑ ↓ Editar Desactivar Esborrar:
     29 de setembre de 2026, «Esborrar» sortia per la dreta). */
  .box-admin-actions button { flex: 1 0 auto; }
  .box-admin-actions .pack-amunt, .box-admin-actions .pack-avall { flex: 0 0 44px; }
}

/* ============================================================
   Saldo d'hores
   A dalt de tot de la vista de reserves: ha de ser el primer que es veu,
   no una cosa amagada dins d'un desplegable.
   ============================================================ */

.saldo-panel {
  background: #1a1a1a;
  color: white;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
}

.saldo-etiqueta {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #999;
}

.saldo-xifra {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 2px 0;
}

.saldo-detall { font-size: 0.85rem; color: #bbb; }
.saldo-buit { font-size: 0.95rem; color: #ddd; margin-top: 4px; }

/* Avisos dins del panell de saldo: poques hores o caducitat propera. */
.saldo-panel.amb-avis {
  border: 1px solid #b06000;
  background: #241a0e;
}

.saldo-avis {
  margin-top: 10px;
  padding: 8px 10px;
  background: #3a2a12;
  border-radius: 8px;
  font-size: 0.85rem;
  color: #ffc879;
}

/* Demanar hores i estat de la sol·licitud */
.saldo-btn {
  margin-top: 14px;
  width: 100%;
  min-height: 44px;
  border: 1px solid #555;
  background: transparent;
  color: white;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
}
.saldo-btn:hover:not(:disabled) { background: #2a2a2a; }
.saldo-btn:disabled { border-color: #333; color: #666; cursor: default; }

.solicitud-banner {
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  line-height: 1.45;
  background: #eef4fb;
  border: 1px solid #c3d8ef;
  color: #2c4a68;
}
.solicitud-banner.rebutjada {
  background: #fdf2f2;
  border-color: #e0b4b4;
  color: #8a2020;
}

/* Enllaços amb aspecte de text dins dels formularis d'autenticació */
.link-btn {
  background: none;
  border: none;
  color: #ff6a00;
  cursor: pointer;
  font-size: 0.88rem;
  font-family: inherit;
  padding: 10px 0;
  text-decoration: underline;
  min-height: 44px;
}
.link-btn:hover { color: #cc5500; }
/* «Demanar més hores» sota la línia del saldo: aspecte d'enllaç, 44 px de toc,
   i el taronja fosc, que sí que arriba al contrast (el de marca no). */
.boto-enllac {
  display: inline-flex; align-items: center; min-height: 44px;
  margin: -6px 0 6px; padding: 0; background: none; border: none;
  color: #b04a00; font: inherit; font-size: 0.92rem; font-weight: 600;
  text-decoration: underline; cursor: pointer;
}

.form-help {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0 0 12px;
}

/* Aclariment sota un camp del formulari */
.camp-ajuda {
  display: block;
  margin-top: 4px;
  /* #777 quedava just per sota del contrast mínim (4,48 sobre blanc; repassada del 4 d'octubre de 2026). */
  color: #6b6b6b;
  font-size: 0.82rem;
  line-height: 1.4;
}
/* L'ajuda de la capacitat parla dels dos camps de la fila: va sota la fila. */
#box-form > .camp-ajuda { margin: -4px 0 12px; }
/* L'ajuda de la contrasenya va fora de l'etiqueta (si no, seria part del
   nom del camp): s'enganxa al camp de sobre i deixa el marge a sota. */
.ajuda-contrasenya { margin: -6px 0 12px; }

/* ============================================================
   Què hi ha lliure
   Llista vertical d'hores. A 375px es llegeix de dalt a baix sense
   scroll lateral, que és el que un mòbil fa bé. Una graella d'espais
   per hores demanaria moure's de costat i no s'entendria.
   ============================================================ */


/* ---------- La botiga (Fase 4, pas 3) ---------- */
/* L'avís que de moment no es cobra res: sempre visible, a la botiga, a
   «Compte» i al full de comprar. Text fosc sobre blau clar, com l'avís de
   sol·licitud pendent. */
.avis-botiga {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #eef4fb;
  border: 1px solid #c3d8ef;
  color: #2c4a68;
  font-size: 0.9rem;
  line-height: 1.45;
}
.botiga-item .tipo-tag, .compra-item .tipo-tag {
  display: inline-block;
  background: #f0f0f0;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.75rem;
  color: #444;
  margin-left: 4px;
}
.botiga-preu { font-weight: 600; font-size: 1.05rem; margin-top: 6px; }
/* Amb oferta (pas 5): el preu d'abans, ratllat i gris, i el rebaixat. */
.preu-abans { color: #777; font-weight: 400; margin-right: 6px; }
.preu-oferta { color: #b04a00; }
.botiga-item .tipo-tag.tag-oferta { background: #fff4e5; color: #7a2e00; }

/* ---------- La botiga: una targeta de color per producte (29 de setembre de 2026) ----------
   Dibuixada per l'app amb les dades del producte (migració 029: color i
   característica). Degradat en diagonal dins del mateix color (més clar a dalt
   a l'esquerra), ombra suau i un cercle translúcid a la cantonada.
   - Els colors, del més clar al més fosc: el text blanc hi fa 4,5:1 com a
     mínim, també damunt del cercle (tests/botiga-contrast.test.js, que llegeix
     aquestes mateixes variables). El taronja de la marca no hi és: blanc sobre
     #ff6a00 no hi arriba.
   - El número de crèdits i el preu, a la mateixa mida (--bt-gran): el preu mai
     no queda per sota de cap altre text del producte.
   - La caducitat no es parteix mai: si no hi cap al costat de la
     característica, baixa a la seva línia. */
.bt-verd { --c1: #1b7a4f; --c2: #135535; --ombra: rgba(19, 85, 53, 0.55); }
.bt-lila { --c1: #6d42a6; --c2: #4a2a80; --ombra: rgba(74, 42, 128, 0.55); }
.bt-blau { --c1: #25629f; --c2: #184575; --ombra: rgba(24, 69, 117, 0.55); }
.bt-taronja { --c1: #a8490a; --c2: #7c3405; --ombra: rgba(124, 52, 5, 0.55); }
.bt-gris { --c1: #474c54; --c2: #2a2d33; --ombra: rgba(42, 45, 51, 0.55); }
#botiga-llista { display: grid; gap: 14px; }
.bt-targeta {
  --bt-gran: 2.5rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 16px;
  padding: 14px 16px 16px;
  color: white;
  background: linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%);
  box-shadow: 0 6px 18px -6px var(--ombra), 0 2px 4px rgba(0, 0, 0, 0.08);
}
.bt-targeta::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  right: -60px;
  top: -80px;
  background: rgba(255, 255, 255, 0.06);
}
.bt-nom { font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.bt-oferta {
  display: inline-block; vertical-align: 2px; margin-left: 4px; padding: 2px 8px; border-radius: 999px;
  background: white; color: var(--c2); font-size: 0.72rem; font-weight: 700;
}
.bt-mides { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 4px; }
.bt-num { line-height: 1; }
.bt-num b { font-size: var(--bt-gran); font-weight: 800; letter-spacing: -1px; }
.bt-num span {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; margin-left: 2px;
}
.bt-preu { text-align: right; line-height: 1; white-space: nowrap; }
.bt-preu b { display: block; font-size: var(--bt-gran); font-weight: 800; letter-spacing: -1px; }
.bt-preu small { display: block; font-size: 0.74rem; font-weight: 600; margin-top: 4px; }
.bt-preu .preu-abans { display: block; color: white; font-size: 0.85rem; font-weight: 600; margin: 0 0 2px; }
.bt-mig {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 6px 8px; margin: 8px 0 12px;
}
.bt-carac { font-size: 0.84rem; flex: 0 1 auto; min-width: 0; }
.bt-cad {
  flex: 0 0 auto; white-space: nowrap; font-size: 0.74rem; font-weight: 600;
  background: rgba(0, 0, 0, 0.18); border-radius: 999px; padding: 3px 9px;
}
.bt-boto {
  display: block; width: 100%; min-height: 44px; border: none; border-radius: 10px;
  background: white; color: var(--c2); font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
}
.bt-boto:disabled { opacity: 0.55; cursor: default; }

/* Al panell: la mostra del color, al costat del desplegable i a cada producte. */
.color-tria { display: flex; align-items: center; gap: 10px; }
.color-tria select { flex: 1 1 auto; }
.color-mostra {
  display: inline-block; width: 22px; height: 22px; border-radius: 6px; flex: none; vertical-align: -5px;
  background: linear-gradient(135deg, var(--c1, #ccc) 0%, var(--c2, #999) 100%);
}
/* El codi de descompte del full: el requadre i «Aplicar», a la mateixa
   alçada (44 px) i el requadre a 16 px, perquè Safari no hi faci zoom. */
.codi-descompte { margin: 10px 0 12px; }
.codi-descompte > label { display: block; font-size: 0.9rem; margin-bottom: 6px; }
.codi-fila { display: flex; gap: 8px; align-items: stretch; }
.codi-fila input { flex: 1 1 auto; min-width: 0; height: 48px; margin: 0; box-sizing: border-box; font-size: 16px; text-transform: uppercase; }
.codi-fila button { flex: 0 0 auto; height: 48px; margin: 0; box-sizing: border-box; font-size: 1rem; }
#compres-panel h3 { margin: 18px 0 6px; font-size: 1rem; }
.compra-item .tipo-tag.estat-pendiente { background: #fff4e5; color: #7a2e00; }
.compra-item .tipo-tag.estat-aprobada { background: #e3f4e8; color: #1d5e32; }
.compra-item .tipo-tag.estat-rechazada { background: #fdf2f2; color: #8a2020; }
/* Al panell, «Aprovar» i «Rebutjar» de cada compra, iguals de mida i de lletra
   (Fase 4, pas 4): abans, un era .primary-btn i l'altre .cancel-btn, amb
   lletres i marges diferents. */
.compra-admin-accions button { min-height: 44px; margin: 0; padding: 10px 16px; font-size: 1rem; font-family: inherit; }

/* ---------- El full de confirmació ---------- */
/* Puja des de baix i ocupa l'ample. El <dialog> ja atrapa el focus i respon a
   Esc; aquí només es col·loca. */
.full {
  width: 100%;
  max-width: 640px;
  /* Per sobre del teclat del mòbil (--teclat, que posa app.js: ajustaAlTeclat).
     Si no hi cap sencer, es desplaça per dins, sense moure la pàgina de darrere. */
  margin: auto auto var(--teclat, 0px);
  max-height: calc(100% - var(--teclat, 0px) - 12px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  border: 0;
  border-radius: 14px 14px 0 0;
  background: white;
  color: #1a1a1a;
}
.full::backdrop { background: rgba(0, 0, 0, 0.5); }
.full-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.full-cap h2 { margin: 0; font-size: 1.15rem; }
.full-resum { margin: 0 0 4px; font-weight: 600; }
/* «En curs», a la llista de reserves: es veu d'un cop d'ull, amb text fosc
   sobre verd clar (contrast per sobre de 4,5:1). */
.tag-en-curs {
  display: inline-block; padding: 1px 8px; margin-right: 4px; border-radius: 10px;
  background: #e3f4e8; color: #1d5e32; font-weight: 600; font-size: 0.8rem;
}
.fs-detall { margin: 0 0 10px; color: #555; font-size: 0.9rem; overflow-wrap: anywhere; }
/* Fora de termini: el que es perd s'ha de veure abans de confirmar. */
.fs-detall.fc-perd { color: #7a2e00; background: #fff4e5; padding: 10px 12px; border-radius: 8px; }
/* L'acció que no es pot desfer: vermell ple, text blanc (5,4:1). */
.full button.boto-perill { background: #c0392b; color: white; border: none; }
.full button.boto-perill:disabled { background: #d9a09a; }
/* Els botons d'una fila d'accions d'un full, tots de la mateixa mida i forma:
   només canvia el color (27 de setembre de 2026: «Moure» i «Cancel·lar», i
   «Moure-la aquí» i «Tornar», feien mides diferents). La vora hi és sempre,
   transparent si el botó no en porta, perquè cap no faci 2 px menys. */
.full .form-actions button {
  margin: 0; padding: 10px 14px; min-height: 44px; box-sizing: border-box;
  border: 1px solid transparent; border-radius: 8px;
  font-family: inherit; font-size: 0.95rem; font-weight: 600; line-height: 1.2;
}
.full .form-actions .secondary-btn { border-color: #ccc; }
.full-preu { margin: 0 0 14px; color: #6b3a00; background: #fff4e5; padding: 10px 12px; border-radius: 8px; font-size: 0.92rem; }
/* Espai, dia i hores ja venen decidits de l'agenda: els camps hi són perquè el que
   s'envia no canviï, però no s'ensenyen. */
.full-decidit { display: none; }
.full .boto-principal { width: 100%; }

/* Quantes persones: cinc botons en una fila, també a 375 px. El triat va amb
   text fosc sobre taronja clar i no blanc sobre taronja, que no arriba al
   contrast mínim (auditoria, punt 19). */
.tria-persones { border: 0; padding: 0; margin: 0 0 10px; min-width: 0; }
.tria-persones legend { padding: 0; margin-bottom: 5px; font-size: 0.9rem; color: #444; }
.persones-botons { display: flex; gap: 6px; }
.persona-opcio { flex: 1 1 0; min-width: 0; margin: 0 !important; position: relative; }
.persona-opcio input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
.persona-opcio span {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 4px;
  border: 1px solid #ccc; border-radius: 8px; background: white;
  color: #1a1a1a; font-size: 1rem; cursor: pointer; white-space: nowrap;
}
.persona-opcio input:checked + span {
  border: 2px solid #ff6a00; background: #fff6f0; color: #b04a00; font-weight: 600;
}
.persona-opcio input:focus-visible + span { outline: 2px solid #1a1a1a; outline-offset: 2px; }
.persona-opcio input:disabled + span {
  background: #f2f2f2; border-color: #e0e0e0; color: #aaa; cursor: not-allowed;
}
#booking-personas-camp { margin: 10px 0 0; }
/* La pregunta de la capacitat, dins del full, just on hi ha el botó. */
.confirma-capacitat {
  margin: 0 0 12px; padding: 12px; border-radius: 8px;
  background: #fff4e5; border: 1px solid #ffd0ab; color: #6b3a00;
}
.confirma-capacitat p { margin: 0 0 10px; font-weight: 600; }
.confirma-capacitat .form-actions { margin: 0; }
.tria-persones .camp-ajuda { display: block; margin-top: 5px; }

/* ---------- La part de dalt de «Reservar», compacta (29 de setembre de 2026) ----------
   Saldo i «avui tens» en una targeta, i a sota el títol i l'Agenda. Tot fa
   44 px per tocar i 16 px per escriure. (El Mapa, amb Avui/Demà/data i la
   durada, es va treure el 29 de setembre de 2026.) */

/* El saldo, «Comprar crèdits» i «avui tens», una sola targeta fosca. Sense
   res a la vista, res. */
.saldo-targeta { background: #1a1a1a; border-radius: 8px; margin: 0 0 12px; }
.saldo-targeta:not(:has(#saldo-linia:not(.hidden), #saldo-demanar-reservar:not(.hidden), #avui-tens:not(.hidden))) { display: none; }
/* El saldo i el botó, en una fila (29 de setembre de 2026). El botó, a la
   dreta, amb 8 px de marge fins a les vores de la targeta; el saldo, si és
   llarg (amb la caducitat), passa a una altra línia al seu costat. */
.saldo-fila { display: flex; align-items: center; gap: 10px; padding-right: 8px; }
.saldo-fila:not(:has(> :not(.hidden))) { display: none; }
.saldo-targeta .saldo-linia { margin: 0; background: transparent; flex: 1 1 auto; min-width: 0; padding-top: 6px; padding-bottom: 6px; line-height: 1.3; }
.saldo-comprar {
  flex: 0 0 auto;
  min-height: 44px;
  margin: 8px 0;
  padding: 0 14px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  /* Discret, amb crèdits: el taronja clar de «avui tens», sobre el negre. */
  background: transparent;
  color: #ffc879;
  border: 1px solid rgba(255, 200, 121, 0.55);
}
/* Destacat, quan no es pot reservar res: sense crèdits, o cap bo n'hi té un. */
.saldo-comprar.destacat { background: #ff6a00; color: #1a1a1a;   /* fosc sobre el taronja (abans blanc: poc contrast) */ border-color: #ff6a00; }
.saldo-targeta .avui-tens { margin: 0; padding: 0 12px 10px; background: transparent; color: #ffc879; font-size: 0.85rem; }
/* Sense saldo a la vista (encara no ha arribat), «avui tens» no queda enganxat a dalt. */
.saldo-targeta .saldo-fila:not(:has(> :not(.hidden))) + .avui-tens { padding-top: 10px; }

/* El títol de Reservar. */
.titol-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.titol-fila h2 { margin: 0; font-size: 1.05rem; min-width: 0; }

/* L'enllaç als espais, al final del bloc: a sota de l'agenda. */
#dispo-panel > .enllac-espais { margin: 14px 0 0; }

/* La graella de l'entrenador buida (avui ja no queda cap hora, un error de
   càrrega, cap espai): ni el requadre gris, que semblava un dia sense res. */
#uag-graella:empty,
.agenda-graella-embolcall:has(> #uag-graella:empty) { display: none; }

/* Només per als lectors de pantalla. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.dispo-nota { margin: 0 0 10px; color: #6b3a00; background: #fff4e5; padding: 10px 12px; border-radius: 8px; font-size: 0.9rem; }
.dispo-accions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

/* ============================================================
   Agenda de l'administrador
   Dues vistes de les mateixes dades. El CSS tria quina es veu.
   ============================================================ */

.agenda-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.agenda-controls button { min-height: 44px; min-width: 44px; }
.agenda-rang { flex: 1 1 auto; font-weight: 600; font-size: 0.95rem; }

/* --- Ordinador: la setmana com a mapa de densitat --- */

.agenda-setmana { display: block; }

.ag-graella {
  display: grid;
  grid-template-columns: 52px repeat(7, 1fr);
  gap: 2px;
}

.ag-cel {
  font-size: 0.75rem;
  padding: 4px 2px;
  text-align: center;
  border-radius: 3px;
  line-height: 1.2;
}

.ag-cap { background: #f4f4f4; padding: 6px 2px; }
.ag-cap strong { display: block; font-size: 0.8rem; }
.ag-cap small { color: #888; }
.ag-cap.avui { background: #ffe8d6; }

.ag-hora { color: #999; text-align: right; padding-right: 6px; }

/* El color diu com de ple està, no quin espai és. Amb vuit espais, vuit colors
   no els recorda ningú i a més no passen contrast. */
.ag-ocupacio { color: #444; min-height: 22px; }
.ag-ocupacio.n0 { background: #fafafa; }
.ag-ocupacio.n1 { background: #ffe8d6; }
.ag-ocupacio.n2 { background: #ffc79b; }
.ag-ocupacio.n3 { background: #ff9d52; color: #3d1c00; }
.ag-ocupacio.n4 { background: #e35a00; color: white; font-weight: 600; }

/* --- Mòbil: tira de dies i el dia sencer --- */



.agenda-tira {
  display: flex;
  gap: 5px;
  margin-bottom: 16px;
}

.ag-pastilla {
  flex: 1 1 0;
  min-width: 0;
  min-height: 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  border: 1px solid #e0e0e0;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}
.ag-pastilla.triat { border-color: #ff6a00; background: #fff6f0; }
.ag-pastilla-dia { font-size: 0.7rem; color: #888; text-transform: uppercase; }
.ag-pastilla-num { font-size: 1rem; font-weight: 600; color: #1a1a1a; }

.ag-barra {
  display: block;
  width: 100%;
  height: 22px;
  background: #f0f0f0;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.ag-barra i {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: #ff6a00;
  display: block;
}

.ag-fila-dia {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f2f2f2;
}
.ag-fila-dia:last-child { border-bottom: none; }
.ag-fila-hora { flex: 0 0 46px; color: #999; font-size: 0.85rem; padding-top: 3px; }
.ag-fila-blocs { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }

.ag-bloc {
  padding: 7px 10px;
  background: #fff6f0;
  border-left: 3px solid #ff6a00;
  border-radius: 0 6px 6px 0;
  line-height: 1.3;
}
.ag-bloc strong { font-size: 0.88rem; display: block; }
.ag-bloc small { color: #777; font-size: 0.78rem; }

/* A partir d'aquí hi cap una setmana sencera i val la pena veure-la. Per sota,
   set columnes de dia serien blocs de vuit píxels amb el text tallat, que és
   exactament el problema que volem no repetir. */


/* Avís sota un camp: informa, no bloqueja. */
.camp-avis {
  display: block;
  margin-top: 5px;
  padding: 6px 9px;
  background: #fff4e5;
  border-radius: 6px;
  color: #b06000;
  font-size: 0.8rem;
  line-height: 1.4;
}
/* «Comprar crèdits» al full de reservar, sota el text que diu que en compris. */
.full-comprar { margin: 0 0 12px; }

.booking-etiqueta {
  margin-top: 4px;
  font-size: 0.82rem;
  color: #777;
  font-style: italic;
}

/* ============================================================
   Agenda: la graella del dia
   Espais en columnes, files de la granularitat. Amb els espais en columnes,
   dues reserves que es trepitgen en el temps van a columnes diferents i no
   s'encavalquen mai. El problema d'encabir blocs dins d'una columna de dia,
   que és el que trenca la graella de l'eina que substituïm, no existeix.
   ============================================================ */

.agenda-modes {
  display: flex;
  gap: 6px;
  background: #f0f0f0;
  padding: 4px;
  border-radius: 10px;
  margin-bottom: 14px;
}
.agenda-modes .nav-btn { padding: 8px 12px; font-size: 0.88rem; }

/* Les vuit columnes hi caben a 375px si la graella s'escapa del coixí del
   panell. Sense això queden 34px per columna en comptes de 38. */
.agenda-graella-embolcall { margin: 0 -16px; padding: 0 4px; }

.agenda-graella {
  --ag-fila: 15px;
  /* Tot el dia a la pantalla (26 de setembre de 2026). L'alçada d'una hora és
     la de la pantalla, menys el que hi ha des de la tira de dies fins a la
     graella (--ag-sobre, que mesura app.js: la tira, la llegenda i els avisos
     s'han de veure alhora amb la graella) i la capçalera, repartida entre les hores del dia
     (--ag-hores, que posa app.js), menys les línies entre files (--ag-buit).
     Com a mínim 36 px per hora: si no hi caben, es fa scroll com sempre. Com
     a màxim, la mida d'abans (--ag-fila per fila): a l'ordinador, el panell
     només s'encongeix si cal. La pantalla és la dels 100svh, la que queda amb
     les barres del navegador a la vista: així no salta quan s'amaguen. */
  --ag-vh: 100vh;
  /* La capçalera de la graella (23 px i la vora) i els 6 px que es deixen a
     dalt en portar-hi la tira de dies. */
  --ag-cap-alt: 34px;
  --ag-buit: calc(var(--ag-k, 4) * 1px);
  --ag-hora-max: calc(var(--ag-fila) * var(--ag-k, 4));
  --ag-hora-ajust: clamp(36px, calc((var(--ag-vh) - var(--ag-sobre, 0px) - var(--ag-cap-alt)) / var(--ag-hores, 16) - var(--ag-buit)), var(--ag-hora-max));
  display: grid;
  gap: 1px;
  background: #ececec;
  border: 1px solid #ececec;
  border-radius: 6px;
  overflow: hidden;
}

.agg-cel {
  background: white;
  font-size: 0.62rem;
  overflow: hidden;
  min-width: 0;
}

.agg-cap {
  background: #f7f7f7;
  font-weight: 600;
  padding: 5px 2px;
  text-align: center;
  line-height: 1.15;
  font-size: 0.6rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.agg-hora {
  background: #fafafa;
  /* Més fosques (4 d'octubre de 2026): #999 es llegia malament (contrast 2,7). La
     mida no es toca: cap canvi de mides a l'agenda sense una decisió expressa
     (DOSSIER: «L'agenda no es toca de mides»). */
  color: #5f5f5f;
  text-align: right;
  padding-right: 4px;
  font-size: 0.62rem;
  line-height: var(--ag-fila);
}

/* Lliure: es veu, però no es toca (des de l'agenda no es reserva). */
.agg-lliure { background: white; }

/* Fora de l'horari actual. Les files només hi són perquè hi ha reserves fetes
   abans de reduir l'horari: es veuen apagades i no es poden reservar. */
.agg-tancat { background: #f1f1f1; }

/* Un espai desactivat que surt perquè té reserves aquella setmana. */
.agg-cap.inactiu { background: #ececec; color: #888; font-style: italic; }
/* L'espai que s'ha triat a «Veure què hi ha lliure» (veureLliure, a app.js),
   marcat una estona. */
.agg-cap.destacat { background: #ff6a00; color: #1a1a1a; transition: background 0.4s; }
.agg-hora.fora-horari { background: #eeeeee; color: #b5b5b5; }

/* Una reserva fora de l'horari s'ha de veure, i s'ha de veure diferent: ratlles
   i vora discontínua, que no depenen només del color. */
.agg-bloc.fora-horari {
  background: repeating-linear-gradient(135deg, #b34700 0 4px, #d85c00 4px 8px);
  outline: 2px dashed #5c2400;
  outline-offset: -2px;
}
.ag-cel.fora-horari { background-image: repeating-linear-gradient(135deg, rgba(0,0,0,0.06) 0 4px, transparent 4px 8px); }
.ag-hora.fora-horari { color: #c4c4c4; }
.ag-fora-horari { color: #8a5300; }

.agenda-avis-horari {
  margin: 8px 0;
  padding: 8px 10px;
  border-left: 3px solid #b34700;
  background: #fff4e5;
  color: #6b3a00;
  font-size: 0.85rem;
}

.agg-bloc {
  background: #ff6a00;
  color: #1a1a1a;   /* fosc sobre el taronja (abans blanc: poc contrast) */
  cursor: pointer;
  padding: 2px 3px;
  line-height: 1.1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}
.agg-bloc span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agg-bloc em { font-style: normal; opacity: 0.85; font-size: 0.55rem; }

/* El detall d'una cel·la va al full de l'agenda (#full-agenda), que puja des
   de baix com el de cancel·lar. */
.agg-bloc:focus-visible { outline: 2px solid #1a1a1a; outline-offset: -2px; }
.ag-detall-linia { font-size: 0.9rem; line-height: 1.5; color: #444; }
.ag-detall-nota { font-size: 0.85rem; color: #777; margin: 0 0 12px; }

/* Amb més espai, files i lletra més grans i el panell recupera el coixí. */
@media (min-width: 560px) {
  .agenda-graella-embolcall { margin: 0; padding: 0; }
  .agenda-graella { --ag-fila: 20px; }
  .agg-cap { font-size: 0.75rem; padding: 7px 4px; }
  .agg-hora, .agg-cel { font-size: 0.72rem; }
  .agg-bloc em { font-size: 0.65rem; }
}

/* En horitzontal al mòbil, o a l'ordinador, la graella respira. */
@media (min-width: 760px) {
  .agenda-graella { --ag-fila: 24px; }
  .agg-cap { font-size: 0.82rem; }
}

/* ---------- L'agenda de l'entrenador (Reservar > Agenda) ----------
   Files d'una hora i no de quart: a 375 px, una cel·la fa uns 41 × 44 px i es
   pot tocar amb el dit (auditoria, punt 22). A totes les amplades. */
@supports (height: 100svh) {
  .agenda-graella { --ag-vh: 100svh; }
}
/* A l'agenda de l'entrenador, sense línies entre quarts (la cel·la de l'hora
   les tapa, i ocupaven alçada): només la de sota de cada hora. Com a màxim,
   56 px per hora. */
.agenda-graella.agenda-usuari { row-gap: 0; --ag-buit: 0px; --ag-hora-max: 56px; }
.agenda-usuari .agg-cap, .agenda-usuari .agg-hora, .agenda-usuari .agg-lliure, .agenda-usuari .agg-tancat {
  box-shadow: inset 0 -1px 0 #ececec;
}
.agenda-usuari .agg-bloc { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12); }
.agenda-usuari .agg-bloc.meva { box-shadow: inset 3px 0 0 #ff6a00, inset 0 -1px 0 rgba(0, 0, 0, 0.12); }
/* Dues capes: la cel·la de l'hora a sota, i les reserves a sobre, al quart.
   Una reserva de mitja hora fa mitja cel·la. */
.agenda-graella .agg-bloc { position: relative; z-index: 1; }
.agenda-usuari .agg-lliure[data-tipus], .agenda-usuari .agg-tancat[data-tipus] { cursor: pointer; }
.agenda-usuari .agg-lliure[data-tipus]:focus-visible, .agenda-usuari .agg-tancat[data-tipus]:focus-visible { outline: 2px solid #1a1a1a; outline-offset: -2px; }
/* Els inicis d'una hora, al full: botons de 44 px, dos per fila a 375 px. */
.uag-inicis { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; }
.uag-inici { min-height: 44px; }
/* Quanta estona: una fila per durada, de 44 px, amb fins a quina hora arriba. */
.uag-durades { display: grid; gap: 6px; margin: 10px 0 12px; }
.uag-durada { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1px solid #ddd; border-radius: 8px; cursor: pointer; }
.uag-durada:has(input:checked) { border-color: #ff6a00; background: #fff6f0; }
.uag-durada span { font-weight: 600; }
.uag-durada small { color: #666; margin-left: auto; }
.uag-cancela { margin-top: 6px; }
/* Cancel·lar des del panell: les dues opcions (44 px) i el motiu. */
.fc-politica { border: 1px solid #eee; border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; }
.fc-politica legend { font-weight: 600; padding: 0 4px; }
.fc-politica label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.fc-motiu { display: block; font-weight: 600; margin-bottom: 4px; }
#fc-motiu, #ag-moure-motiu { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; margin-bottom: 10px; }
.agenda-usuari .agg-hora { line-height: 1.2; padding-top: 3px; }
.agenda-usuari .agg-bloc { font-size: 0.66rem; justify-content: flex-start; padding: 4px 2px 4px 3px; }
/* A 375 px una columna fa uns 38 px: «La teva» hi cap en dues línies («La» i
   «teva»), i per això el text pot partir-se per paraules. */
.agenda-usuari .agg-bloc span { white-space: normal; text-overflow: clip; line-height: 1.15; }
/* «La teva»: text fosc sobre taronja clar amb la vora de marca, i no blanc
   sobre taronja, que no arriba al contrast mínim (auditoria, punt 19). */
.agg-bloc.meva { background: #ffd9bd; color: #6b3a00; font-weight: 700; box-shadow: inset 3px 0 0 #ff6a00; padding-left: 5px; }
/* Ocupat per algú altre: gris amb ratlles marcades. Les ratlles no depenen
   només del color, i el separen de les hores passades (gris clar llis) i dels
   forats massa curts (punts). El text només quan hi cap. */
.agg-bloc.altri, .uag-mostra.altri {
  background: repeating-linear-gradient(135deg, #b3b3b3 0 4px, #d6d6d6 4px 8px);
  color: #2b2b2b;
}
.agg-bloc.altri span { display: none; }
@media (min-width: 560px) {
  .agg-bloc.altri span { display: block; }
}

/* Les hores sense cap inici lliure i sense reserva, per què (26 de setembre
   de 2026: a l'iPhone, tot en el mateix gris, el matí passat semblava ocupat). */
/* Passat: gris molt clar i llis, com apagat. */
.agenda-usuari .agg-tancat.passat, .uag-mostra.passat { background: #f4f4f4; }
/* Forat massa curt: lliure, però no hi cap la durada mínima. Blanc amb punts. */
.agenda-usuari .agg-tancat.curt, .uag-mostra.curt {
  background: radial-gradient(circle, #b5b5b5 1px, transparent 1.4px) 0 0 / 7px 7px, white;
}
/* Tancat: espai desactivat o fora de l'horari. Gris llis, més fosc que el passat. */
.agenda-usuari .agg-tancat.tancat, .uag-mostra.tancat { background: #e2e2e2; }

/* Text que només ha de sentir un lector de pantalla. */
.text-ocult {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* La capçalera de les agendes porta l'abreviatura («B3»), que hi cap sempre, i
   es pot tocar per veure el nom sencer. En vertical es llegia malament a
   l'iPhone (26 de setembre de 2026). */
.agg-cap[data-cap] { cursor: pointer; }
@media (max-width: 559px) {
  .agg-cap[data-cap] { font-size: 0.72rem; }
}
.agg-cap[data-cap]:focus-visible { outline: 2px solid #1a1a1a; outline-offset: -2px; }
.uag-llegenda { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 0 0 6px; font-size: 0.74rem; line-height: 1.3; color: #555; }
/* La mostra i el seu nom, sempre junts: no es parteixen entre dues línies. */
.uag-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.uag-mostra { display: inline-block; width: 11px; height: 11px; border-radius: 2px; border: 1px solid #ccc; flex: none; }
/* Damunt de la graella, el mínim: una línia d'explicació, i la tira de dies
   amb les fletxes als extrems. */
.uag-intro { margin: 0 0 8px; font-size: 0.85rem; }
.uag-dies { display: flex; align-items: stretch; gap: 4px; margin-bottom: 8px; }
.uag-dies .agenda-tira { flex: 1 1 auto; min-width: 0; margin-bottom: 0; gap: 3px; }
.uag-dies .ag-pastilla { min-height: 44px; padding: 3px 1px; gap: 0; }
.uag-fletxa { flex: none; width: 30px; min-height: 44px; padding: 0; }
.uag-fletxa:disabled { opacity: 0.4; cursor: default; }

/* ---------- La tira de dies i B1…B8, enganxades (29 de setembre de 2026) ----------
   Només a l'agenda de l'entrenador (la del panell no es toca). En baixar per la
   graella, la tira es queda a dalt, per sota de la barra d'estat de l'iPhone
   (env(safe-area-inset-top), amb l'app instal·lada), i la fila B1…B8 just a
   sota: sempre es pot canviar de dia i saber quina columna és cada espai. Uns
   80 px a 375 px. Per això ja no hi ha cap salt automàtic fins a la tira.
   - La tira tapa tota l'amplada i fins a la fila de sota: res no es veu passar
     per les escletxes.
   - La graella, `overflow: clip` i no `hidden`: amb `hidden` res de dins no es
     pot enganxar en baixar la pàgina; `clip` retalla igual les cantonades.
   - --uag-tira-alt, l'alçada de la tira, la mesura app.js (mesuraTiraUsuari). */
#uag-dies {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 6;
  background: white;
  margin: 0 -14px;
  padding: 6px 14px 8px;
}
#uag-graella.agenda-usuari { overflow: clip; }
#uag-graella .agg-cap {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + var(--uag-tira-alt, 58px));
  z-index: 5;
  box-shadow: 0 -2px 0 white;
}

/* L'agenda del panell, com la de l'entrenador (4 d'octubre de 2026): la tira de
   dies i la fila B1…B8 es queden a dalt en baixar. Fins llavors només ho feia la
   de l'entrenador (29 de setembre: «la del panell no es toca»). Les mateixes
   tres coses: la tira enganxada, la graella amb `overflow: clip` (amb `hidden`
   res de dins no s'enganxa) i la fila B1…B8 just a sota de la tira, a
   --agenda-tira-alt, que mesura app.js (mesuraTiraPanell). Les mides, les de
   sempre: «l'agenda no es toca de mides» (DOSSIER). */
#agenda-tira {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 6;
  background: white;
  margin: 0 -14px 16px;
  padding: 6px 14px 8px;
}
#agenda-graella { overflow: clip; }
#agenda-graella .agg-cap {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + var(--agenda-tira-alt, 80px));
  z-index: 5;
  box-shadow: 0 -2px 0 white;
}

/* La línia «ara», a l'hora en curs d'avui. Per sota de B1…B8 enganxada. */
.uag-ara {
  position: relative;
  align-self: start;
  height: 2px;
  background: #ff6a00;
  z-index: 3;
  pointer-events: none;
}
.uag-ara::before {
  content: '';
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff6a00;
}
.uag-mostra.meva { background: #ffd9bd; border-color: #ff6a00; }

/* ---------- Mode moure (fase 3) ----------
   La franja diu què es mou i com sortir-ne. La reserva d'origen, amb vora
   discontínua i transparent als tocs: el forat de sota (mitja hora més tard,
   al mateix espai) s'ha de poder tocar. Els forats on es pot moure, en verd;
   els espais d'un altre cost, amb ratlles fines i clares, que no es
   confonguin amb «Ocupat». */
.uag-moure {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 8px; padding: 6px 8px 6px 10px;
  border-left: 3px solid #ff6a00; background: #fff4e5; color: #6b3a00; font-size: 0.85rem;
}
.uag-moure-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.uag-moure-text span { overflow: hidden; text-overflow: ellipsis; }
.uag-moure button { flex: none; min-height: 44px; }
.agg-bloc.origen { outline: 2px dashed #6b3a00; outline-offset: -2px; opacity: 0.7; }
/* Les dues agendes tenen dues capes (des del 27 de setembre de 2026, també la
   del panell): el forat de sota de la que es mou es toca a través. */
.mode-moure .agg-bloc.origen { pointer-events: none; }
.mode-moure .agg-lliure[data-tipus] { background: #e8f5e9; box-shadow: inset 0 0 0 1px #9ccc9f, inset 0 -1px 0 #ececec; }
.agenda-graella.mode-moure .agg-lliure[data-tipus] { cursor: pointer; }
.agg-tancat.cost, .uag-mostra.cost, .agg-tancat.persones, .uag-mostra.persones {
  background: repeating-linear-gradient(45deg, #efe6da 0 2px, #faf7f2 2px 6px);
}
/* Ja hi té una altra reserva seva, en un altre espai (migració 031). */
.agg-tancat.jo, .uag-mostra.jo {
  background: repeating-linear-gradient(-45deg, #dfe6f3 0 2px, #f5f7fb 2px 6px);
}
.uag-mostra.origen { background: #ffd9bd; border: 1px dashed #6b3a00; }
.uag-moure-etiq { display: inline-block; min-width: 3.2em; font-weight: 700; color: #6b3a00; }
.uag-mostra.lliure { background: white; }
.uag-meva { font-weight: 600; color: #1a1a1a; }
.agenda-controls button:disabled { opacity: 0.4; cursor: default; }

/* A l'ordinador la graella se surt del contenidor de 640px: és la vista que el
   gestor mira cada dia i li convé tota l'amplada que hi hagi. */
@media (min-width: 1000px) {
  .agenda-graella-embolcall {
    width: min(1080px, calc(100vw - 40px));
    margin-left: 50%;
    transform: translateX(-50%);
    padding: 0;
  }
  .agenda-graella { --ag-fila: 26px; }
}

/* Cap requadre per escriure amb lletra de menys de 16 px: Safari de l'iPhone
   amplia la pàgina en tocar-lo i no la torna a la mida (27 de setembre de
   2026: el full del motiu de moure, al panell, quedava tallat per la dreta).
   Selectors d'element: qualsevol regla més concreta mana, i per això
   tests/navegador-zoom.test.js recorre tots els requadres de l'app i del
   panell i exigeix els 16 px. */
input, select, textarea { font-size: 16px; }
textarea { font-family: inherit; }

/* ---------- Panell: el tauler (29 de setembre de 2026) ----------
   Blocs de targetes: una columna al mòbil, dues a l'ordinador (els
   entrenadors, de banda a banda). Les xifres del bloc 1 són botons que porten
   on es fa la feina (44 px com a mínim).
   CAP PARAULA NO ES PARTEIX: les caselles tenen una amplada mínima perquè hi
   càpiga la paraula més llarga, i si n'hi cap una per fila, una per fila (ho
   prova tests/navegador-tauler.test.js). Abans, «overflow-wrap: anywhere»
   partia «compre/s» i «sol·licitu/ds» a l'ordinador. */
.tl-cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px; margin-bottom: 12px; }
.tl-cap h2 { margin: 0; }
.tl-mes { display: flex; flex-direction: column; font-size: .8rem; color: #5a6270; }
.tl-mes select { font-size: 1rem; padding: 8px 10px; border-radius: 10px; border: 1px solid #cfd4dc; background: white; min-height: 44px; }
.tl-graella { display: grid; gap: 14px; }
@media (min-width: 900px) {
  .tl-graella { grid-template-columns: 1fr 1fr; align-items: start; }
  .tl-b5 { grid-column: 1 / -1; }
}
.tl-bloc { background: white; border-radius: 14px; padding: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 14px -8px rgba(0,0,0,.15); min-width: 0; }
.tl-bloc h3 { margin: 0 0 10px; font-size: 1.05rem; }
.tl-bloc h4 { margin: 14px 0 6px; font-size: .85rem; color: #5a6270; font-weight: 600; }
.tl-xifres { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 10px; margin-bottom: 10px; }
.tl-xifra { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #f4f6f9; color: inherit; text-align: left; font: inherit; border: 1px solid transparent; min-width: 0; hyphens: manual; overflow-wrap: normal; word-break: normal; }
button.tl-xifra { cursor: pointer; min-height: 44px; }
.tl-xifra b { font-size: 1.6rem; line-height: 1.1; white-space: nowrap; }
/* Al mòbil, més petit: «3.848 €» no s'ha de partir mai. */
.tl-xifra.gran b { font-size: clamp(1.6rem, 7vw, 2rem); }
.tl-xifra span { font-size: .82rem; color: #3c4452; }
.tl-xifra small { font-size: .75rem; color: #5a6270; }
.tl-xifra em { font-style: normal; font-size: .82rem; font-weight: 600; color: #b44d00; margin-top: 4px; }
.tl-xifra.urgent { background: #fff1e6; border-color: #ffb27a; }
.tl-ara ul, .tl-avisos ul, .tl-llegenda { list-style: none; margin: 0; padding: 0; }
.tl-ara li { padding: 6px 0; border-top: 1px solid #eef0f3; font-size: .9rem; }
.tl-ara li b { display: inline-block; min-width: 56px; }
.tl-ara li span { white-space: nowrap; }
.tl-gris { color: #5a6270; }
.tl-var { font-size: .75rem; font-weight: 700; white-space: nowrap; }
.tl-var.bo { color: #1b7a4f; }
.tl-var.dolent { color: #b3261e; }
.tl-cascada { width: 100%; border-collapse: collapse; font-size: .88rem; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.tl-cascada td { padding: 4px 0; }
.tl-cascada td:last-child { text-align: right; white-space: nowrap; }
.tl-cascada .tl-total td { border-top: 1px solid #cfd4dc; font-weight: 700; padding-top: 6px; }
.tl-nota { font-size: .78rem; color: #5a6270; margin: 6px 0 0; line-height: 1.45; }
/* Bloc 4: barres per espai i mapa de calor. */
.tl-fila { display: grid; grid-template-columns: minmax(4.5rem, 7rem) 1fr auto; gap: 8px; align-items: center; font-size: .85rem; margin: 4px 0; }
.tl-fila b { font-variant-numeric: tabular-nums; font-size: .8rem; text-align: right; white-space: nowrap; }
.tl-barra { height: 10px; background: #eef0f3; border-radius: 6px; overflow: hidden; }
.tl-barra i { display: block; height: 100%; background: #25629f; border-radius: 6px; max-width: 100%; }
.tl-barra.grupal i { background: #6d42a6; }
.tl-heat { display: grid; grid-template-columns: 22px repeat(var(--cols), minmax(0, 1fr)); gap: 2px; font-size: .65rem; color: #5a6270; }
.tl-hd { line-height: 16px; }
.tl-c { height: 16px; border-radius: 3px; background: rgba(37, 98, 159, calc(0.06 + var(--v) * 0.94)); }
/* Bloc 5: avisos, rànquing i fitxa. */
.tl-avisos { background: #fff8f1; border: 1px solid #ffd8b5; border-radius: 12px; padding: 4px 12px 8px; }
.tl-avisos h4 { margin-top: 8px; }
.tl-avisos li { font-size: .85rem; padding: 2px 0; }
.tl-ic { display: inline-block; width: 22px; }
.tl-enllac-nom { background: none; border: none; padding: 0 2px; font: inherit; font-weight: 600; color: #1d2330; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; min-height: 44px; text-align: left; }
.tl-taula-emb { overflow-x: auto; margin: 8px -14px 0; padding: 0 14px; }
.tl-rank { width: 100%; border-collapse: collapse; font-size: .8rem; font-variant-numeric: tabular-nums; }
.tl-rank th { text-align: left; border-bottom: 1px solid #cfd4dc; white-space: nowrap; padding: 0; }
.tl-rank th button { background: none; border: none; font: inherit; font-size: .72rem; font-weight: 600; color: #3c4452; min-height: 44px; padding: 0 3px; cursor: pointer; }
.tl-rank td { padding: 0 3px; border-bottom: 1px solid #eef0f3; white-space: nowrap; }
.tl-rank td:first-child { white-space: normal; }
.tl-rank tr.triat { background: #f4f8fd; }
.tl-alerta { color: #b3261e; font-weight: 700; }
.tl-fitxa { margin-top: 14px; border-top: 1px solid #eef0f3; padding-top: 4px; }
.tl-fitxa-cap { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tl-fitxa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 10px; margin-top: 8px; }
.tl-fitxa-grid > div { background: #f4f6f9; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; font-size: .85rem; min-width: 0; }
.tl-fitxa-grid span { font-size: .72rem; color: #5a6270; }
.tl-fitxa-grid small { font-size: .72rem; color: #5a6270; }
.tl-mini { display: flex; align-items: flex-end; gap: 4px; height: 46px; margin-top: 18px; }
.tl-mini i { flex: 1; background: #25629f; border-radius: 3px 3px 0 0; position: relative; min-height: 1px; }
.tl-mini em { position: absolute; top: -15px; left: -4px; right: -4px; text-align: center; font-size: .65rem; font-style: normal; color: #3c4452; }
.tl-mini-et { display: flex; gap: 4px; }
.tl-mini-et span { flex: 1; text-align: center; font-size: .62rem; }
/* Bloc 6: productes. */
/* El nom i les vendes a dalt, i la barra a sota amb tota l'amplada: al costat no hi cabia. */
.tl-fila-producte { grid-template-columns: 1fr auto; grid-template-areas: "nom xifra" "barra barra"; row-gap: 3px; margin: 8px 0; }
.tl-fila-producte > span { grid-area: nom; }
.tl-fila-producte > .tl-barra { grid-area: barra; }
.tl-fila-producte > b { grid-area: xifra; }
.tl-punt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; background: var(--c1, #474c54); vertical-align: baseline; }
.tl-punt.privat { background: #1b7a4f; }
.tl-punt.grupal { background: #6d42a6; }
/* La barra, sense text a dins (la part petita el tallava): la llegenda, a sota. */
.tl-pg { display: flex; height: 14px; border-radius: 7px; overflow: hidden; }
.tl-pg i:first-child { background: #1b7a4f; }
.tl-pg i:last-child { background: #6d42a6; }
.tl-llegenda { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .85rem; margin-top: 6px; }
.tl-desc { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tl-desc td { padding: 6px 4px; border-bottom: 1px solid #eef0f3; }
.tl-desc td:not(:first-child) { text-align: right; white-space: nowrap; }
/* Bloc 3: costos i marge (migració 030). */
.tl-xifra.petit b { font-size: 1.25rem; }
.tl-xifra.positiu b { color: #1b7a4f; }
.tl-xifra.negatiu b { color: #b3261e; }
.tl-equil { font-size: 0.85rem; color: #3c4452; }
.tl-equil small { font-size: 0.75rem; color: #5a6270; }
.tl-equil .tl-barra { margin: 6px 0; }
.tl-enllac { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: none; background: none;
  font: inherit; font-weight: 600; font-size: 0.9rem; color: #b44d00; cursor: pointer; }

/* La pantalla «Costos». */
.tl-costos { list-style: none; margin: 8px 0 0; padding: 0; }
.tl-cost { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid #eee; }
.tl-cost.inactiu { opacity: 0.6; }
.tl-cost-info { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex: 1 1 180px; min-width: 0; }
.tl-cost-info small { color: #5a6270; font-size: 0.78rem; }
.tl-imp { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.tl-imp small { display: block; font-weight: 400; color: #5a6270; }
.tl-cost .box-admin-actions { flex: 1 1 100%; justify-content: flex-end; }
.tl-costos-total { display: flex; justify-content: space-between; padding: 12px 0; font-size: 1.05rem; }
#costos-form { margin-top: 12px; }
#costos-form label:not(.cost-radio) { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.cost-tipus { border: 1px solid #e5e7eb; border-radius: 10px; margin: 0 0 10px; padding: 4px 10px; }
.cost-radio { display: flex; align-items: center; gap: 8px; min-height: 44px; }

/* Reserves setmanals (migració 032): al full, la llista de dates; a la llista
   de reserves, l'etiqueta «Setmanal». */
.full-serie { margin: 8px 0 4px; }
.serie-fins { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.serie-dates { list-style: none; margin: 4px 0 0; padding: 0; max-height: 14rem; overflow-y: auto;
  border: 1px solid #eee; border-radius: 10px; }
.serie-dates li { display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; border-bottom: 1px solid #f1f1f1; font-size: 0.9rem; }
.serie-dates li:last-child { border-bottom: none; }
.serie-dates li.no { color: #6b7280; }
.serie-dates li.no .serie-data { text-decoration: line-through; }
.serie-dates small { color: #b3261e; }
.serie-marca { width: 1.1em; flex: none; font-weight: 700; }
.serie-dates li.ok .serie-marca { color: #1b7a4f; }
.serie-dates li.no .serie-marca { color: #b3261e; }
.tag-serie { display: inline-block; font-size: 0.72rem; font-weight: 600; background: #eef2ff; color: #3730a3;
  border-radius: 8px; padding: 1px 7px; }

/* La benvinguda dels entrenadors (30 de setembre de 2026). Un full com els
   altres (.full), una mica més alt, amb el dibuix, el títol, dues o tres línies,
   els punts i el botó. Cap paraula es parteix (ho prova
   tests/navegador-benvinguda.test.js). */
.benvinguda { display: none; flex-direction: column; gap: 12px; min-height: 62vh; }
.benvinguda[open] { display: flex; }
.bv-cap { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: #6b7280; }
.bv-saltar { background: none; border: none; font: inherit; font-weight: 600; color: #4b5563; min-height: 44px; min-width: 44px; padding: 0 4px; cursor: pointer; }
.bv-saltar.invisible { visibility: hidden; }
.bv-dibuix { display: flex; justify-content: center; align-items: center; min-height: 112px; }
.benvinguda h2 { margin: 0; font-size: 1.35rem; color: #1a1a1a; }
.bv-text p { margin: 0 0 8px; font-size: 1rem; line-height: 1.45; color: #3c4452; }
.bv-punts { display: flex; gap: 6px; justify-content: center; margin-top: auto; }
.bv-punts i { width: 8px; height: 8px; border-radius: 50%; background: #e5e7eb; }
.bv-punts i.actiu { background: #ff6a00; width: 20px; border-radius: 4px; }
.bv-seguent { min-height: 48px; border: none; border-radius: 10px; background: #ff6a00; color: #1a1a1a; font: inherit; font-weight: 700; font-size: 1.02rem; cursor: pointer; }
.bv-graella { display: grid; grid-template-columns: 28px repeat(3, 52px); gap: 4px; font-size: 0.75rem; color: #6b7280; }
.bv-graella b { font-weight: 600; text-align: center; }
.bv-graella i { height: 26px; border-radius: 4px; background: white; border: 1px solid #e5e7eb; }
.bv-graella i.ple { background: #d4d4d8; border-color: #d4d4d8; }
.bv-graella i.toc { background: #fff1e6; border: 2px solid #ff6a00; }
.bv-pastilles { display: flex; gap: 10px; }
.bv-p { display: flex; flex-direction: column; color: white; font-weight: 700; padding: 12px 14px; border-radius: 12px; font-size: 1rem; white-space: nowrap; }
.bv-p small { font-weight: 400; font-size: 0.75rem; opacity: 0.9; }
.bv-p.verd { background: #1b7a4f; }
.bv-p.lila { background: #6d42a6; }
.bv-dos { display: flex; gap: 10px; }
.bv-dos span { padding: 12px; border-radius: 8px; font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.bv-dos .meva { background: #ffd9bd; color: #6b3a00; }
.bv-dos .jo { background: repeating-linear-gradient(-45deg, #dfe6f3 0 2px, #f5f7fb 2px 6px); color: #3730a3; }
.bv-setmana { display: flex; gap: 8px; }
.bv-setmana span { padding: 8px 10px; border-radius: 8px; font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.bv-setmana .si { background: #e8f5e9; color: #1b7a4f; }
.bv-setmana .no { background: #fdecea; color: #b3261e; text-decoration: line-through; }
/* «Com funciona YourBox», a «Compte» › «Ajuda». */
.boto-ample { width: 100%; min-height: 44px; }

/* ---------- Veure una factura (el visor de dins de l'app) ---------- */
/* A tota la pantalla, amb la capçalera («Tornar», el número, «Baixa el PDF»)
   sempre a la vista encara que es desplaci el full. */
.full-factura {
  max-width: 900px;
  height: 100%;
  max-height: 100%;
  margin: 0 auto;
  border-radius: 0;
  padding: 0 calc(12px + env(safe-area-inset-right, 0px))
           calc(12px + env(safe-area-inset-bottom, 0px))
           calc(12px + env(safe-area-inset-left, 0px));
}
.factura-visor-cap {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 0 10px;
  background: white;
}
/* El número de la factura. Al mòbil, en una segona línia, sota els dos botons i
   a tota l'amplada: entre «Tornar» i «Baixa el PDF» no hi cap i sortia tallat
   («PROVA-F-2026-00…», vist a l'iPhone el 2 d'octubre de 2026). Sencer sempre:
   si mai fos més llarg que la pantalla, salta de línia; no es talla. */
.factura-visor-cap { flex-wrap: wrap; }
.factura-visor-cap h2 {
  order: 1;
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  text-align: center;
  font-size: 1rem;
  overflow-wrap: anywhere;
}
/* A l'ordinador, on hi cap, en una sola línia, entre els dos botons. */
@media (min-width: 640px) {
  .factura-visor-cap { flex-wrap: nowrap; }
  .factura-visor-cap h2 { order: 0; flex: 1 1 auto; }
}
.factura-visor-cap button { min-height: 44px; flex: none; }
.factura-visor-estat { margin: 16px 0; }
.factura-visor-estat:empty { display: none; }
.factura-visor-estat.error { color: #b3261e; font-weight: 600; }
.factura-visor-pagines:empty { display: none; }
.factura-visor-pagines { background: #e4e4e7; padding: 8px; border-radius: 8px; }
.factura-pagina { display: block; width: 100%; height: auto; background: white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.factura-pagina + .factura-pagina { margin-top: 8px; }

/* L'avís de la comprovació de les factures (panell de l'admin): vermell, i ben a la vista. */
.avis-factures { margin: 0 0 12px; padding: 12px; border: 2px solid #b3261e; border-radius: 8px; background: #fdecea; color: #7a1a14; }
.avis-factures strong { display: block; margin-bottom: 6px; }
.avis-factures ul { margin: 6px 0 0; padding-left: 20px; }

/* ---------- El resum d'IVA (panell de l'admin) ---------- */
.iva-tria { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 12px; }
.iva-tria label { display: flex; flex-direction: column; gap: 4px; }
.iva-tria button { min-height: 44px; }
/* Els camps del període no són dins d'un <form>: aquí tenen l'aspecte i la mida dels de la resta (44 px, i 16 px de lletra perquè l'iPhone no faci zoom). */
.iva-tria select, .iva-tria input { min-height: 44px; padding: 10px; border: 1px solid #ccc; border-radius: 8px; font-size: 1rem; font-family: inherit; background: white; }
.iva-avis { margin: 0 0 12px; padding: 12px; border: 2px solid #b26a00; border-radius: 8px; background: #fff4e0; color: #5c3700; }
.iva-avis strong { display: block; margin-bottom: 6px; }
.iva-avis ul { margin: 6px 0 0; padding-left: 20px; }
/* Les taules són amples: al mòbil es desplacen de costat dins del seu marc, sense moure la pàgina. */
.iva-marc { overflow-x: auto; margin: 0 0 16px; }
.iva-taula { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.iva-taula caption { text-align: left; font-weight: 600; padding: 0 0 6px; }
.iva-taula th, .iva-taula td { padding: 6px 8px; border-bottom: 1px solid #e4e4e7; text-align: left; white-space: nowrap; }
.iva-taula .num { text-align: right; font-variant-numeric: tabular-nums; }
.iva-taula tr.iva-classe th, .iva-taula tr.iva-classe td { font-weight: 600; background: #f4f4f5; }
.iva-taula tr.iva-total th, .iva-taula tr.iva-total td { font-weight: 700; border-top: 2px solid #1a1a1a; }
/* El nom del client pot ocupar més d'una línia, i un nom llarguíssim sense espais es parteix: no eixampla la taula. */
.iva-taula td.iva-client { white-space: normal; min-width: 120px; overflow-wrap: anywhere; }
.iva-marca { display: block; font-size: 0.8rem; font-weight: 400; color: #5c3700; white-space: normal; }

/* LA LLISTA DE FACTURES, A L'ORDINADOR. Vuit columnes no hi caben al contenidor
   de 640 px (el NIF sortia tallat i els imports quedaven darrere una barra de
   desplaçament: vist el 2 d'octubre de 2026). A partir de 1000 px la llista surt
   del contenidor, com la graella de l'agenda, i es veu sencera, sense desplaçar. */
@media (min-width: 1000px) {
  .iva-marc-llista {
    width: min(960px, calc(100vw - 40px));
    margin-left: 50%;
    transform: translateX(-50%);
    overflow-x: visible;
    padding: 14px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 14px -8px rgba(0, 0, 0, 0.25);
  }
  /* La nota de «expedida fora del període» no eixampla la columna del número: va a sota, en línies curtes. */
  .iva-llista .iva-c-num { white-space: normal; min-width: 170px; }
}

/* AL MÒBIL (i fins a 1000 px), CADA FACTURA EN TRES LÍNIES, sense desplaçar res:
     el número, i la data d'expedició a la dreta (i la de l'operació, si és una altra);
     el client, i el NIF a la dreta;
     la base, la quota i el total, cadascun amb el seu nom a sobre.
   I al resum, el nombre de factures va al costat del nom («Completes (3)»), que
   la columna no hi cap. */
@media (max-width: 999px) {
  .iva-marc { overflow-x: visible; }
  .iva-taula { font-size: 0.88rem; }
  .iva-taula th, .iva-taula td { padding: 6px 4px; }
  /* El resum, una mica més petit: amb imports de cinc xifres, a 375 px passava de l'amplada per 15 px (mesurat). */
  .iva-taula-resum { font-size: 0.8rem; }
  .iva-taula-resum th, .iva-taula-resum td { padding: 6px 3px; }
  .iva-taula-resum th:first-child { white-space: normal; padding-left: 0; }
  .iva-taula-resum thead th { white-space: normal; vertical-align: bottom; }
  .iva-taula-resum .iva-n { display: none; }
  .iva-taula-resum tbody th[data-n]::after { content: " (" attr(data-n) ")"; font-weight: 400; }

  .iva-llista, .iva-llista tbody { display: block; }
  /* La capçalera de la taula no es veu: cada casella porta el seu nom. Es deixa per a qui la llegeix amb un lector de pantalla. */
  .iva-marc-llista { position: relative; }
  .iva-llista thead { display: block; position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .iva-llista tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; padding: 10px 0; border-bottom: 1px solid #d4d4d8; }
  .iva-llista tbody th, .iva-llista tbody td { display: block; border: 0; padding: 0; white-space: normal; min-width: 0; overflow-wrap: anywhere; }
  .iva-llista .iva-c-num { grid-column: 1 / 3; grid-row: 1; }
  .iva-llista .iva-c-exp { grid-column: 3; grid-row: 1; text-align: right; }
  /* La data de l'operació només quan no és la d'expedició. */
  .iva-llista .iva-c-op { display: none; }
  .iva-llista tr.iva-dues-dates .iva-c-op { display: block; grid-column: 1 / -1; grid-row: 2; text-align: right; }
  .iva-llista tr.iva-dues-dates .iva-c-op::before { content: attr(data-etiqueta) ": "; color: #555; }
  .iva-llista .iva-c-client { grid-column: 1 / 3; grid-row: 3; min-width: 0; }
  .iva-llista .iva-c-nif { grid-column: 3; grid-row: 3; text-align: right; }
  .iva-llista .iva-c-diners { grid-row: 4; text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; margin-top: 4px; }
  .iva-llista .iva-c-diners::before { content: attr(data-etiqueta); display: block; font-size: 0.75rem; color: #555; white-space: normal; }
  .iva-llista .iva-c-total { font-weight: 700; }
}

/* La marca de la pestanya «Factures» quan la comprovació de les factures ha trobat
   un problema: un punt vermell amb un signe d'admiració, al costat del nom. */
.nav-btn.amb-avis::after {
  content: "!";
  display: inline-block;
  margin-left: 6px;
  width: 1.25em;
  height: 1.25em;
  line-height: 1.25em;
  border-radius: 50%;
  background: #b3261e;
  color: white;
  font-weight: 700;
  font-size: 0.85em;
  text-align: center;
}
/* ---------- Afegir o restar crèdits (panell de l'admin, «Compres») ---------- */
.ajust-credits > summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; min-height: 44px; display: flex; align-items: center; }
.ajust-credits[open] > summary { margin-bottom: 8px; }
.ajust-que { border: 0; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ajust-que legend { font-size: 0.9rem; color: #444; padding: 0; margin-bottom: 4px; }
.ajust-que label { display: inline-flex; align-items: center; gap: 6px; margin: 0; min-height: 44px; font-size: 1rem; color: #1a1a1a; }
.ajust-credits h3 { margin: 18px 0 8px; font-size: 1rem; }
.ajust-fila { padding: 8px 0; border-bottom: 1px solid #eee; }
.ajust-fila strong.resta { color: #b3261e; }
.ajust-fila .box-meta { overflow-wrap: anywhere; }

/* La pantalla 8 de la benvinguda: el final de l'agenda en miniatura, dins d'un
   marc de mòbil, amb els colors de l'agenda de debò (.agg-*); al costat, una
   fletxa cap avall fins a l'enllaç de les fotos, que es pot tocar. */
.bv-fotos { display: flex; justify-content: center; width: 100%; }
.bv-mobil { width: 270px; max-width: 100%; border: 3px solid #1a1a1a; border-top-width: 0; border-radius: 0 0 22px 22px; background: white; padding: 0 0 26px; }
.bv-mini-fila { display: flex; align-items: stretch; }
.bv-mini { flex: 1; display: grid; grid-template-columns: 42px repeat(3, 1fr); background: #e5e5e5; gap: 1px; border-bottom: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; }
.bv-mini-cap { background: #f7f7f7; font-weight: 700; font-size: 0.74rem; color: #1a1a1a; text-align: center; padding: 5px 0; }
.bv-mini-hora { background: #f7f7f7; font-size: 0.66rem; color: #8a8a8a; text-align: center; padding-top: 3px; }
.bv-mini i { height: 26px; background: white; }
.bv-mini i.meva { background: #ffd9bd; box-shadow: inset 3px 0 0 #ff6a00; }
.bv-mini i.altri { background: repeating-linear-gradient(135deg, #b3b3b3 0 4px, #d6d6d6 4px 8px); }
/* La fletxa baixa pel costat de la graella i la punta acaba just al marc de l'enllaç. */
.bv-baixa { display: flex; flex-direction: column; align-items: center; width: 46px; padding: 6px 0 0; flex: none; }
.bv-baixa i { flex: 1; width: 4px; border-radius: 2px 2px 0 0; background: #ff6a00; margin-bottom: -9px; }
.bv-baixa svg { display: block; }
/* L'enllaç, el lloc on es toca: marc taronja gruixut, fons clar, i un dit que el toca. */
.bv-toca { position: relative; margin: 0 6px; }
.bv-fotos-enllac { display: block; width: 100%; min-height: 46px; padding: 8px 10px; text-align: left; text-decoration: underline; font-size: 0.9rem; font-weight: 700; color: #a33f00; background: #fff1e6; border: 3px solid #ff6a00; border-radius: 12px; box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.2); }
.bv-dit { position: absolute; right: 14px; bottom: -24px; font-size: 30px; line-height: 1; pointer-events: none; }

/* Un camp de data amb la icona d'un calendari: a l'iPhone, un camp de data buit
   és una caixa sense res, i no es veu que en tocar-la s'obre el calendari. */
.camp-data { position: relative; display: block; }
.camp-data > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; pointer-events: none; color: #6b7280; }
.camp-data > input[type="date"]#ajust-data, .camp-data > input[type="date"] { padding-left: 40px; }
/* Als navegadors que ja hi posen la seva icona (Chrome), s'amaga i es posa, invisible, sobre la nostra: tocar la icona obre el calendari. */
.camp-data > input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; left: 0; top: 0; width: 40px; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }

/* El resum d'IVA de les meves factures, dins del bloc «Factures» del compte. */
.meu-iva { margin-top: 20px; padding-top: 16px; border-top: 1px solid #eeeeee; }
.meu-iva h3 { margin: 0 0 6px; font-size: 1.05rem; }

/* Registre: entrenador o per lliure (migració 039). Les dues opcions, fàcils de tocar. */
.reg-tipus { border: 0; margin: 0 0 12px; padding: 0; }
.reg-tipus legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.reg-tipus-opcio { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.reg-tipus-opcio input { width: 20px; height: 20px; margin: 0; flex: none; }
#reg-adreca { margin-top: 8px; }

/* La pregunta del primer cop: dues opcions grosses. */
.pregunta-tipus { display: none; flex-direction: column; gap: 12px; }
.pregunta-tipus[open] { display: flex; }
.pregunta-tipus h2 { margin: 0; font-size: 1.35rem; color: #1a1a1a; }
.pt-opcions { display: flex; flex-direction: column; gap: 10px; }
.pt-opcio { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 12px 16px; border: 2px solid #ff6a00;
  border-radius: 12px; background: #fff4e5; color: #1a1a1a; font: inherit; text-align: left; cursor: pointer; }
.pt-opcio b { font-size: 1.05rem; }
.pt-opcio small { color: #4b5563; font-size: 0.9rem; }

/* El panell: el grup de cada fila del rànquing, i la tria a la fitxa. */
.tl-rank tr.tl-grup th { background: #f4f4f5; text-align: left; font-weight: 700; padding: 6px 8px; }
.tl-fitxa-tipus { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 10px; }
.tl-fitxa-tipus select { min-height: 44px; padding: 8px 10px; border: 1px solid #ccc; border-radius: 8px; font: inherit; font-size: 1rem; background: white; }