/* 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: "3295717"; }

* { 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; }
/* El gris de la pàgina arriba sempre fins a baix de la pantalla (5 d'octubre de 2026). El fons
   de sota de tot és negre (el de la capçalera, perquè a l'iPhone el que es veu en estirar la
   pàgina cap avall no sigui un tall gris); en una pantalla curta, com el tauler quan no es pot
   carregar, sota del peu es veia una franja negra fins al final. */
body { min-height: 100vh; min-height: 100dvh; }

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: 4px 2px; font-size: 0.86rem; line-height: 1.15; }
/* Una hora «10:00–11:00» no es parteix mai en dues línies. */
.sense-tall { white-space: nowrap; }
.reserves-tabs .tab .tab-n { display: block; font-size: 0.76rem; font-weight: 400; }
/* A 320 px, en català, «Cancel·lades» marcada (en negreta) no hi cabia per 6 px i es tallava (auditoria del 7 d'octubre de 2026). */
@media (max-width: 359px) { .reserves-tabs .tab { font-size: 0.78rem; } }
/* Els tres filtres de «Les meves reserves» (4 d'octubre de 2026): una línia, tots
   tres iguals. El marcat es veu pel fons i per la vora, i el lector de pantalla
   el diu (aria-pressed). */
.reserves-filtres { display: flex; gap: 6px; margin: 0 0 12px; }
.filtre-btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 6px 4px; border: 1px solid #ccc; border-radius: 8px; background: white;
  color: #444; font-size: 0.85rem; font-family: inherit; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* El filtre marcat, com la pestanya activa de «Futures / Passades / Cancel·lades» (5 d'octubre de
   2026; abans era una píndola negra, i enlloc més de l'app hi ha píndoles ni botons negres). */
.filtre-btn[aria-pressed="true"] { background: #ff6a00; border-color: #ff6a00; color: #1a1a1a; font-weight: 600; }
/* Una sèrie de reserves repetides, en una línia que es desplega. */
.serie-grup { border-bottom: 1px solid #eee; }
.serie-grup > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 0; cursor: pointer; list-style: none; font-weight: 600; overflow-wrap: anywhere; }
.serie-grup > summary::-webkit-details-marker { display: none; }
.serie-grup > summary::after { content: '▸'; margin-left: auto; color: #555; flex: none; }
.serie-grup[open] > summary::after { content: '▾'; }
.serie-grup .serie-grup-cos { padding: 0 0 8px 10px; border-left: 3px solid #eee; margin-bottom: 8px; }
.serie-grup .serie-grup-accions { display: flex; justify-content: flex-end; padding: 4px 0 8px; }
.booking-devolucio { font-size: 0.85rem; color: #555; margin-top: 3px; }
/* El títol «Cancel·lades» dins de Passades. */

.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; }

/* ---------- El filet de les targetes (5 d'octubre de 2026, decisió d'en Pere) ----------
   L'app és blanc sobre gris clar, i les targetes es distingien poc del fons. Totes
   porten ara un filet fi, el MATEIX a tot arreu: 1 px, gris fosc (--filet). Les
   targetes de cada pantalla (.panel), els blocs del tauler (.tl-bloc), la targeta
   d'entrar i de registrar-se, i els fulls que pugen des de baix (.full, que inclou
   la benvinguda). A les pàgines de condicions i privacitat, el mateix (src/legal.js).

   NO CANVIA CAP MIDA NI MOU RES. És un `outline`, que no ocupa lloc: es pinta per
   fora de la vora de la targeta. Va per fora (i no per dins) perquè a «Reservar» la
   graella i la fila dels dies arriben fins a la vora de la targeta i el taparien.
   Als fulls va per dins: toquen les vores de la pantalla, i per fora no es veuria.
   La targeta d'entrar són dues peces enganxades (les pestanyes i el formulari): el
   filet les envolta com una de sola, sense cap ratlla al mig (ombres d'1 px només
   cap als costats de fora de cada peça: amunt i als costats, o avall i als costats). Ho vigila tests/navegador-filet.test.js, element
   per element, a totes les pantalles. */
:root { --filet: #6e6e6e; }
.panel, .tl-bloc { outline: 1px solid var(--filet); outline-offset: 0; }
/* (El dels fulls és a la seva regla, `.full`, més avall.) */
.auth-tabs { box-shadow: -1px 0 0 var(--filet), 1px 0 0 var(--filet), 0 -1px 0 var(--filet), -1px -1px 0 var(--filet), 1px -1px 0 var(--filet); }
.auth-form { box-shadow: -1px 0 0 var(--filet), 1px 0 0 var(--filet), 0 1px 0 var(--filet), -1px 1px 0 var(--filet), 1px 1px 0 var(--filet), 0 1px 3px rgba(0,0,0,0.08); }
/* Sense les pestanyes (recuperar la contrasenya, o el registre tancat), el formulari és la targeta
   sencera: el filet i les cantonades, a tot el voltant. Abans semblava tallada a dalt, sota el logo
   (revisió visual, 19 d'octubre de 2026). */
.auth-tabs.hidden ~ .auth-form { border-radius: 10px; box-shadow: 0 0 0 1px var(--filet), 0 1px 3px rgba(0,0,0,0.08); }

/* ---------- 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: 600;   /* com .primary-btn i les pestanyes actives (guia d'estil) */
}
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: #6b6b6b; font-size: 0.9rem; }   /* el gris de la guia: #888 feia 3,5 sobre blanc (20 d'octubre de 2026) */

/* ---------- 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: 600;   /* com .primary-btn i les pestanyes actives (guia d'estil) */
  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; }

/* L'ETIQUETA PETITA, la forma única a tota l'app (guia d'estil, 5 d'octubre de 2026,
   decisió d'en Pere): un rectangle de cantonades suaus (6 px), mai una píndola. Abans
   n'hi havia de tres formes, i a les llistes del panell sortien sense cap forma (text
   pelat). Cada lloc només hi canvia el color i el marge. */
.tipo-tag {
  display: inline-block;
  background: #f0f0f0;
  padding: 2px 9px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 400;
  color: #555;
  margin-left: 4px;
  vertical-align: middle;
}
.box-card .tipo-tag { margin-left: 8px; }
.box-meta { color: #666; font-size: 0.88rem; margin-top: 4px; }
/* La descripció curta de l'espai (migració 044), a la targeta: una línia més, sota de tot. */
.box-desc { display: block; color: #444; font-size: 0.88rem; margin-top: 4px; overflow-wrap: anywhere; }

/* ---------- 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: #6b6b6b; 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; }
/* Botons secundaris, com tots (.secondary-btn; guia d'estil, 5 d'octubre de 2026: abans
   tenien la vora fosca i el text negre, i «Tancar» o «Sortir», la vora clara). */
.move-btn, .serie-btn {
  background: white; border: 1px solid #ccc; color: #444; border-radius: 8px;
  min-height: 44px; padding: 6px 14px; cursor: pointer; font-size: 0.85rem;
}
.move-btn:hover, .serie-btn:hover { background: #f0f0f0; }

@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; }
/* UN BOTÓ QUE ESTÀ SOL A LA SEVA FILA L'OMPLE (pregunta 24 de docs/USABILITAT.md; 7 d'octubre de 2026): els de crear de cada
   llista, «Anar a la botiga», «Afegir foto», «Afegir un tram» i «Afegir un dia». Els dos de crear de «Productes» van de costat
   (.crear-parell) i no hi entren. */
#obre-botiga, #box-new-btn, #franja-nova, #centre-nova, #costos-nou, #box-foto-afegeix, #franja-afegeix-tram, #franja-afegeix-dia { width: 100%; box-sizing: border-box; }
/* (Només l'amplada: no es toca el `display`, perquè el de crear s'amaga sol quan el seu formulari és obert.) */

.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; }
/* El menú de l'admin únic (A3, 2 de novembre de 2026; el mateix que .menu-admin de la caixa d'eines 1.18.0): les
   pestanyes de sempre, en una franja negra sota del logo, que fa de segona línia de la capçalera. No s'enganxa. Les
   pestanyes són enllaços: cada apartat és una pàgina. */
.menu-admin {
  background: #1a1a1a;
  padding: 0 calc(16px + env(safe-area-inset-right, 0px)) 12px calc(16px + env(safe-area-inset-left, 0px));
}
.menu-admin .app-nav { margin: 0; gap: 4px; }
/* La capçalera a l'adreça de l'admin (A6, 2 de novembre de 2026): «yourbox Admin», igual que a workout (el logo, i al
   costat el nom en blanc, amb el mateix aire que el menú de sota). A la pantalla d'entrar, com a workout: el logo
   petit s'amaga (ja hi ha el gran) i el nom «Admin» es queda. */
html[data-admin-unic="si"] header { padding-left: calc(16px + env(safe-area-inset-left, 0px)); padding-right: calc(16px + env(safe-area-inset-right, 0px)); }
html[data-admin-unic="si"] .header-logo { display: flex; align-items: center; gap: 10px; }
.header-logo span { color: white; font-size: 1rem; font-weight: 600; letter-spacing: 0.02em; line-height: 24px; }
html[data-admin-unic="si"] .header-logo.logo-amagat { visibility: visible; }
html[data-admin-unic="si"] .header-logo.logo-amagat img { display: none; }
/* L'avís a una entrenadora que entra per l'adreça de l'admin: l'enllaç a la seva app, a la línia de sota. */
.error .enllac-app { display: inline-flex; align-items: center; padding: 0; }
.menu-admin .nav-btn { flex: 1 1 auto; white-space: nowrap; padding: 10px 6px; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }

/* 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; }
/* Una llista del panell que no s'ha pogut carregar (app.js, carregaPanell): mentre no se sap
   què hi ha, no s'ensenya cap botó ni formulari de crear. */
.carrega-fallida .amaga-si-falla { display: none !important; }
.carrega-panell { text-align: left; }
/* Una fila que es toca i porta a un altre lloc del panell (guia d'estil, «Files que es
   toquen»): el text, amb la fletxa taronja. Aquí, la que diu on són les franges. */
.fila-ves { display: block; width: 100%; min-height: 44px; background: none; border: 0; padding: 10px 0; margin: 0; font: inherit; font-size: 0.9rem;
  color: #1a1a1a; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.fila-ves:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }
.setting-franges { border-bottom: 1px solid #eee; }
/* Els enllaços de dalt de «Productes», l'un sota de l'altre i junts: cadascun fa els seus 44 px de tocar, sense marge entre ells. */
.packs-ves-franges { display: block; min-height: 44px; margin: 0; text-align: left; }
.packs-ves-franges + .crear-parell { margin-top: 8px; }
#franges-panel h2:focus, #descomptes-panel h2:focus { outline: none; }
/* El rànquing d'entrenadors del tauler, a les pantalles estretes: cinc columnes no hi caben i la taula lliscava de costat.
   Per sota de 360 px s'amaga «Variació» (la quarta); a 375 es continua veient. */
@media (max-width: 359px) { #tauler-ranquing th:nth-child(4):not([colspan]), #tauler-ranquing td:nth-child(4) { display: none; } }
/* El peu d'una llista llarga (guia d'estil, «Les llistes llargues neixen curtes»): «Veure'n més», que omple
   la fila, i al costat quantes se'n veuen («5 de 300»). */
.llista-mes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.llista-mes > button { flex: 1 1 0; min-width: 0; min-height: 44px; margin: 0; }
/* El comptador fa sempre la mateixa amplada (hi cap «100 de 1.234») i va alineat a la dreta: així «Veure'n més» fa
   exactament la mateixa amplada a totes les llistes de l'app, digui el que digui el comptador. */
.llista-mes > .llista-compte { flex: 0 0 5.5rem; text-align: right; white-space: nowrap; color: #666; font-size: 0.88rem; }
.llista-mes > .error { flex: 1 1 100%; margin: 0; }
.llista-mes > .error:empty { display: none; }
/* A «Cancel·lades»: «Buidar la llista» (sol a la fila: l'omple) i, a sota, quantes n'hi ha d'amagades i l'enllaç per tornar-les a mostrar. */
.cancellades-buidar { margin-top: 12px; }
.cancellades-buidar > .secondary-btn { display: block; width: 100%; min-height: 44px; margin: 0; }
.cancellades-buidar > p { margin: 8px 0 0; color: #666; font-size: 0.88rem; }
.cancellades-buidar > p .link-btn { min-height: 44px; }
.cancellades-buidar > .error:empty { display: none; }
/* LA FITXA D'UN CLIENT (guia d'estil, «La fitxa d'un client»): blocs separats per un filet, cadascun amb el seu títol. */
#clients-filtres { margin-bottom: 12px; }
/* Els tres filtres dels clients tenen noms llargs («Sense activitat», «Entrenadores»): el text fa dues línies
   si cal, i no es talla mai amb punts suspensius ni es parteix cap paraula. Tots tres, igual d'amples i d'alts. */
#clients-filtres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
#clients-filtres .filtre-btn { min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; padding-left: 1px; padding-right: 1px; }
/* A les pantalles més estretes, «Entrenadores» no hi cap amb la lletra de 0,85rem (i marcat, que va en negreta, encara menys):
   la dels filtres dels clients baixa a 0,76rem, la mida petita de les pestanyes. */
@media (max-width: 359px) { #clients-filtres .filtre-btn { font-size: 0.76rem; } }
.client-bloc { margin-top: 16px; padding-top: 12px; border-top: 1px solid #eee; }
.client-bloc h3 { margin: 0 0 8px; font-size: 1rem; }
/* A dalt de la fitxa, sempre a la vista: sota del nom, els crèdits i l'última reserva; i el contacte. */
.client-resum { margin: 0 0 10px; font-weight: 600; }
/* L'aniversari, a «Les meves dades»: l'etiqueta a sobre, el dia i el mes de costat (el mes, més ample) i l'ajuda a sota. */
.camp-aniversari { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
/* L'etiqueta, com les altres etiquetes dels formularis (form label): no és un <label> perquè parla de dos desplegables. */
.camp-aniversari > span { font-size: 0.9rem; color: #444; }
/* Al registre va sota del NIF i la seva ajuda: separat com un camp més. */
#reg-fiscal:not(.hidden) { margin-bottom: 12px; }
.aniversari-parell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; }
.aniversari-parell select { min-height: 44px; width: 100%; margin: 0; }
.tag-aniversari { background: #fff4e5; color: #7a2e00; }
.client-contacte { margin-bottom: 4px; }
.client-llista li.empty { border-bottom: 0; color: #666; }
/* Un bloc plegat de la fitxa (compres, factures, xifres): el títol es toca i l'obre, com el de «Afegir o restar crèdits». */
.client-plegat { margin-top: 16px; border-top: 1px solid #eee; }
/* DONAR DE BAIXA, a baix de tot de la fitxa i separat de la resta: dos botons, un sota l'altre, a tota l'amplada.
   L'esborrat és .cancel-btn (vora i text vermells, sense fons): no ha de ser el que més es veu de la fitxa. */
.client-baixa { margin-top: 28px; display: flex; flex-direction: column; gap: 8px; }
.client-baixa h3 { margin: 0; }
.client-baixa button { width: 100%; min-height: 44px; margin: 0; font-size: 0.85rem; }
/* Un compte desactivat, a dalt de la fitxa: l'etiqueta i, a sota, des de quan (petit). */
.client-estat { margin: 0 0 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.client-estat small { font-size: 0.75rem; color: #6b6b6b; }
/* El text d'una pregunta pot tenir més d'un paràgraf. */
#fp-text { white-space: pre-line; }
.client-plegat > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; list-style: none; font-weight: 700; font-size: 1rem; }
.client-plegat > summary::-webkit-details-marker { display: none; }
.client-plegat > summary::after { content: '▸'; margin-left: auto; font-size: 1.1rem; color: #555; }
.client-plegat[open] > summary::after { content: '▾'; }
.client-plegat .tl-fitxa { margin-top: 0; border-top: 0; padding-top: 0; }
.client-bloc h4 { margin: 10px 0 4px; font-size: 0.88rem; font-weight: 600; color: #666; }
.client-bloc .tl-fitxa { margin-top: 0; border-top: 0; padding-top: 0; }
.client-dada { display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 0 0 6px; font-size: 0.88rem; }
.client-dada span { color: #666; }
.client-dada b { font-weight: 600; overflow-wrap: anywhere; }
.client-dada a { color: #b04a00; }
.client-llista { margin: 0; padding: 0; list-style: none; font-size: 0.88rem; }
.client-llista li { padding: 6px 0; border-bottom: 1px solid #eee; overflow-wrap: anywhere; }
.client-llista li:last-child { border-bottom: 0; }
/* En baixar-hi amb l'enllaç de dalt, el títol del bloc no queda sota del menú del panell, que va enganxat. */
#franges-panel, #descomptes-panel { scroll-margin-top: 76px; }
/* A dalt de «Productes», els dos botons de crear, de costat i iguals (guia d'estil, «El botó de crear d'una
   llista»): el taronja és «+ Nou producte»; «+ Nou descompte», blanc i de la mateixa mida. */
.crear-parell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 8px; margin: 0 0 14px; }
.crear-parell > button { margin: 0; height: 100%; padding: 12px 4px; font-size: 0.95rem; font-weight: 600; white-space: normal; overflow-wrap: anywhere; }

.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: #6b6b6b;
  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: #6b6b6b;   /* #999 feia 2,6 sobre el fons (20 d'octubre de 2026) */
  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: 8px;
  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; }

/* El menú del panell (5 d'octubre de 2026): tres apartats i «Més». Es queda enganxat
   a dalt en baixar; el fons és el de la pàgina perquè el que passa per sota no es
   vegi. A l'agenda no s'enganxa (.sense-enganxar): ja hi té la tira de dies. */
/* La franja de l'hora i la bateria de l'iPhone, amb l'app instal·lada (--franja-dalt):
   el menú s'enganxa just a sota. Mentre és enganxat (.enganxat, que posa app.js:
   marcaMenuEnganxat), aquella franja es tapa amb el negre de la capçalera, perquè no
   s'hi vegi passar el text de la pàgina i l'hora es continuï llegint. */
:root { --franja-dalt: env(safe-area-inset-top, 0px); }
.menu-panell.enganxat::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--franja-dalt);
  background: #1a1a1a;
  box-shadow: -40px 0 0 #1a1a1a, 40px 0 0 #1a1a1a;
}
.menu-panell {
  position: sticky;
  top: var(--franja-dalt);
  z-index: 20;
  background: #f4f4f5;
  padding: 6px 0 8px;
  margin: -6px 0 6px;
  /* Una mica més ample que les targetes, perquè el filet no surti pels costats. */
  box-shadow: -4px 0 0 #f4f4f5, 4px 0 0 #f4f4f5;
}
.menu-panell.sense-enganxar { position: static; }
.menu-panell .sub-nav { margin-bottom: 0; }
/* El full de «Més»: files que es toquen (guia d'estil), amb la fletxa a la dreta. */
.mes-fila { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid #eee; }
.mes-fila:first-child { border-top: 0; }
.mes-fila::after { content: "›"; color: #b04a00; font-weight: 700; }
.mes-fila.actiu { font-weight: 700; }
/* «Què es fa servir més», al final de «Configuració». */
.tl-rank.us-taula th { font-size: 0.75rem; font-weight: 600; color: #444; padding: 8px 3px; }
.tl-rank.us-taula td { padding: 8px 3px; }
.tl-rank.us-taula .us-num { text-align: right; }

.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; }

/* ELS CINC FORMULARIS DEL PANELL (espai, producte, franja, descompte i despesa), IGUALS (6
   d'octubre de 2026): cap va dins d'un requadre (el de l'espai en tenia un de gris, més
   estret), tots arriben a les mateixes vores, i el títol fa la mateixa mida a tots. */
#box-form { margin-bottom: 20px; }
#box-form h3, #pack-form-title, #dsc-form-title, #franja-form-titol, #costos-form-titol { 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: #e2e2e2; color: #444; }

.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: 6px;
}

/* ELS BOTONS QUE VAN DE COSTAT FAN LA MATEIXA AMPLADA (guia d'estil; 6 d'octubre de 2026): «Veure» i
   «Baixar el PDF» d'una factura, «Aprovar» i «Rebutjar» d'una compra. Columnes iguals, de l'amplada
   del text més llarg; al mòbil, on la fila d'accions va sola sota de la informació, l'omplen tota.
   Ho vigila tests/navegador-botons-fila.test.js. */
.box-admin-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  flex: 0 1 auto;
  max-width: 100%;
}
@media (max-width: 420px) {
  .box-admin-actions { width: 100%; }
}
/* El text pot fer dues línies si no hi cap («Descargar el PDF» a 320 px): abans que un botó sigui més ample que l'altre. */
.box-admin-actions button { min-height: 44px; white-space: normal; overflow-wrap: anywhere; }

@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: #b04a00;   /* taronja fosc de la guia: el de la marca fa 2,87 sobre blanc (PER-DECIDIR 11, 1/11/2026) */
  cursor: pointer;
  font-size: 0.88rem;
  font-family: inherit;
  padding: 10px 0;
  text-decoration: underline;
  min-height: 44px;
}
.link-btn:hover { color: #8a3a00; }

.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 { color: #444; }
/* 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; }

/* ---------- 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: 6px;
  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: 6px; padding: 3px 9px;
}
.bt-boto {
  display: block; width: 100%; min-height: 44px; border: none; border-radius: 8px;
  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; }
/* La regla general dels camps (form input:not(...)) hi posa 5 px de marge a dalt
   i guanya la d'aquí sobre: la caixa del codi quedava 5 px més avall que
   «Aplicar» (4 d'octubre de 2026). Amb el mateix selector, el marge a zero. */
form .codi-fila input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { margin: 0; }
#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; }
/* «Nova»: la compra que s'acaba de pagar (16 d'octubre de 2026). Una etiqueta petita de la guia, amb
   els colors de la d'«Oferta». */
.compra-item .tipo-tag.compra-nova { background: #fff4e5; color: #7a2e00; }
/* 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;
  /* El filet de les targetes (--filet, a dalt), per dins: el full toca les vores de la pantalla. */
  outline: 1px solid var(--filet);
  outline-offset: -1px;
}
.full::backdrop { background: rgba(0, 0, 0, 0.5); }
/* Amb un full obert, la pàgina del darrere no es mou ni rebota (app.js, fixaElDarrere): el Safari
   de l'iPhone només la deixa quieta fixant-la on era (16 d'octubre de 2026). */
html.full-obert { overflow: hidden; overscroll-behavior: none; }
html.full-obert body { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
/* «Els teus crèdits»: el full no es mou; només llisca la llista, i «En total» i la botiga queden a
   la vista (16 d'octubre de 2026). */
#full-agenda.full-credits[open] { display: flex; flex-direction: column; overflow: hidden; }
#full-agenda.full-credits #fag-cos { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#full-agenda.full-credits .fcr-llista { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.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: 6px;
  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; }
/* El quadre del saldo es pot tocar (5 d'octubre de 2026): obre els crèdits bo per
   bo. Es veu per una fletxa petita DINS del marge dret que ja tenia (12 px): no
   canvia cap mida ni mou res. */
.saldo-linia.tocable { position: relative; cursor: pointer; -webkit-tap-highlight-color: rgba(255, 255, 255, 0.15); }
.saldo-linia.tocable::after { content: '›'; position: absolute; right: 2px; top: 50%; transform: translateY(-54%); width: 8px; text-align: center;
  font-size: 1.15rem; line-height: 1; color: #ffb37a; pointer-events: none; }
.saldo-linia.tocable:focus-visible { outline: 2px solid #ff6a00; outline-offset: 2px; }
/* El full dels crèdits, bo per bo. */
.fcr-ordre { margin: 0 0 8px; font-size: 0.85rem; color: #5a6270; }
.fcr-llista { list-style: none; margin: 0; padding: 0; }
.fcr-bo { padding: 10px 0; border-top: 1px solid #eee; }
.fcr-bo.aviat { border-left: 4px solid #b3261e; padding-left: 8px; }
.fcr-cap { display: flex; align-items: baseline; gap: 10px; }
.fcr-mena { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.fcr-queden { flex: none; font-weight: 700; white-space: nowrap; }
.fcr-val, .fcr-caduca { font-size: 0.86rem; color: #444; margin-top: 2px; overflow-wrap: anywhere; }
.fcr-aviat { display: inline-block; padding: 0 8px; border-radius: 6px; background: #b3261e; color: white; font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
.fcr-total { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 12px 0 4px; border-top: 2px solid #1a1a1a; font-size: 1rem; }
.fcr-buit { margin: 4px 0 12px; }
#fag-cos .link-btn#fcr-botiga, .saldo-veure-bons { min-height: 44px; }
.saldo-panel .saldo-veure-bons { color: #ffb37a; padding-left: 0; text-align: left; }
.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; }
/* Un botó sol omple la fila (guia d'estil): «Veure demà» i «Tornar-ho a provar» a «Reservar»
   (revisió visual 25, 21 d'octubre de 2026). */
.dispo-accions > button:only-child { flex: 1 1 100%; }

/* ============================================================
   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; }

/* «Setmana», al panell: es dibuixa amb les mateixes peces que «Dia» (.agenda-graella,
   .agg-cap, .agg-hora, .agg-cel; vegeu renderAgendaSetmana, a app.js). Aquí només hi
   ha el que és propi del seu contingut: el dia d'avui a la capçalera, i l'ocupació
   de cada casella («2/8»), centrada. */
.ag-cap.avui { background: #ffe8d6; }
.ag-ocupacio { display: flex; align-items: center; justify-content: center; }
.ag-ocupacio.fora-horari { background-image: repeating-linear-gradient(135deg, rgba(0,0,0,0.06) 0 4px, transparent 4px 8px); }
.ag-ocupacio.n0 { background: white; }
.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: #6b6b6b; text-transform: uppercase; }   /* només el color (el gris de la guia); les mides, igual */
.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;
}


/* 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.9rem; }

/* 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: #6b6b6b; 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-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-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], .agenda-setmana-graella .agg-cap { font-size: 0.72rem; }
}
.agg-cap[data-cap]:focus-visible { outline: 2px solid #1a1a1a; outline-offset: -2px; }
/* Els espais que costen més crèdits per hora (4 d'octubre de 2026): el nom de la
   capçalera, subratllat dues vegades. És una marca al text, no un color, i no
   canvia cap mida de la graella (un subratllat no ocupa lloc). La llegenda ho diu. */
.agg-cap.mes-credits, .uag-mostra-cap.mes-credits { text-decoration: underline double; text-underline-offset: 2px; }
.uag-mostra-cap { font-weight: 700; color: #1a1a1a; }
/* Les hores que cauen dins d'una franja (bons de franja, 4 d'octubre de 2026):
   l'hora, amb una BARRA PLENA a l'esquerra. Abans era una ratlla de punts a sota, i
   es confonia amb els punts del «forat massa curt» (retoc del mateix dia): ara una
   és una barra llisa i l'altra un puntejat, i es distingeixen també en gris. És una
   ombra cap endins: no canvia cap mida de la graella. */
.agg-hora.franja { box-shadow: inset 4px 0 0 #333, inset 0 -1px 0 #ececec; }
/* A la llegenda, la barra sola (sense xifra): no fa la llegenda més llarga. */
.uag-mostra-barra { display: inline-block; width: 4px; height: 12px; background: #333; flex: none; }
/* El formulari d'una franja, al panell. */
.franja-part { border: 1px solid #e5e5e5; border-radius: 10px; padding: 10px 12px 12px; margin: 14px 0 0; }
.franja-part legend { font-weight: 600; padding: 0 6px; }
.franja-fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 8px 0; }
.franja-fila label { flex: 1 1 110px; min-width: 0; margin: 0; }
.franja-fila .franja-treu { flex: 0 0 auto; min-height: 44px; }
/* Un tram d'«Entre setmana» (7 d'octubre de 2026): dues columnes iguals (de quin dia a quin dia; de quina hora a quina
   hora), perquè els quatre desplegables facin la mateixa amplada; i «Treure», a sota, a la dreta, de la seva mida. */
.franja-fila.franja-tram { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.franja-fila.franja-tram .franja-treu { grid-column: 1 / -1; justify-self: end; }
.franja-fila .franja-tot { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; min-height: 44px; }
.franja-fila .franja-tot input { width: auto; min-height: 0; margin: 0; }
.franja-radio { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.franja-radio input { width: auto; min-height: 0; margin: 0; }
/* Quan valen els crèdits d'un bo de franja: just sota del nom i les etiquetes, amb la lletra del text normal (0,9rem),
   no la petita: és el que s'ha de veure abans de comprar. */
.bt-franja { display: block; font-size: 0.9rem; font-weight: 600; line-height: 1.3; margin-top: 4px; }
/* L'etiqueta amb el nom de la franja («Migdia»), al costat del nom: el gris de les etiquetes normals (.tipo-tag). */
.bt-etq-franja { display: inline-block; vertical-align: 2px; margin-left: 4px; padding: 2px 8px; border-radius: 6px; background: #f0f0f0; color: #444; font-size: 0.72rem; font-weight: 600; }
.fcp-franja { margin: 0 0 8px; font-size: 0.9rem; font-weight: 600; }
.saldo-franja { font-size: 0.85rem; margin-top: 4px; }
.agenda-llegenda-panell { margin: 0 0 6px; padding: 0 12px; }
.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-de-sempre { display: block; width: 100%; min-height: 44px; margin: 0 0 8px; text-align: left; overflow-wrap: anywhere; white-space: normal; }
.bt-habitual { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.9); color: #1a1a1a; font-size: 0.72rem; font-weight: 600; vertical-align: middle; }
/* El mes, just a sobre de la tira de dies, a «Reservar» i al panell: una nota petita, a
   l'esquerra, del gris del text secundari. Va fora del bloc que s'enganxa (#uag-dies,
   #agenda-tira) i no en toca cap mida. */
.uag-mes { margin: 0 0 2px; font-size: 0.75rem; line-height: 1.2; color: #6b6b6b; }
.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;
}
/* Les fletxes de setmana, als extrems de la fila dels dies (4 d'octubre de 2026).
   La fila fa la mateixa alçada que abans: les fletxes s'estiren fins a la dels dies. */
.agenda-tira-fila { display: flex; align-items: stretch; gap: 4px; }
.agenda-tira-fila .agenda-tira { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
#agenda-graella { overflow: clip; }
/* A «Dia», EXACTAMENT la mateixa alçada de fila que a «Setmana» (5 d'octubre de
   2026, petició d'en Pere; el 4 d'octubre només se n'havia baixat el mínim, i la fila
   continuava estirant-se fins a omplir la pantalla: 41 px a 393 × 852 i 30 px a
   375 × 667, contra els 24,4 de «Setmana»). A «Setmana» una hora fa 24,4 px: la
   casella (lletra de 12 px amb interlínia 1,2, més 4 px a dalt i a baix = 22,4) i
   els 2 px de separació. Aquí una hora són les seves files i un píxel de separació
   per fila (--ag-buit): es treu, i queda 24,4 px justos, a qualsevol pantalla. Només
   a l'agenda del panell; la de l'entrenador no es toca. Ho vigila
   tests/navegador-agenda-mides.test.js. */
#agenda-graella, .agenda-setmana-graella { --ag-hora-setmana: calc(0.75rem * 1.2 + 8px + 2px); --ag-hora-ajust: calc(var(--ag-hora-setmana) - var(--ag-buit)); }
#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: 8px; border: 1px solid #ccc; background: white; min-height: 44px; }
.tl-graella { display: grid; gap: 12px; }
@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: 10px; 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.15rem; }   /* el títol d'una targeta, com el .panel h2 */
.tl-bloc h4 { margin: 14px 0 6px; font-size: .85rem; color: #5a6270; font-weight: 600; }
/* El resultat de cada mes (4 d'octubre de 2026): quatre columnes que caben a 320 px. */
.tl-res { display: flex; flex-direction: column; font-size: .82rem; }
.tl-res-fila { display: grid; grid-template-columns: minmax(0, .9fr) repeat(3, minmax(0, 1.1fr)); gap: 4px 6px; padding: 6px 0; border-bottom: 1px solid #eee; align-items: start; }
.tl-res-fila.cap { font-weight: 600; color: #5a6270; font-size: .76rem; }
.tl-res-fila.cap span:not(:first-child), .tl-res-num { text-align: right; }
.tl-res-fila.total { border-top: 2px solid #1a1a1a; border-bottom: 0; font-weight: 600; }
.tl-res-mes { overflow-wrap: anywhere; }
.tl-res-num { display: flex; flex-direction: column; min-width: 0; font-variant-numeric: tabular-nums; }
.tl-res-num b { white-space: nowrap; }
.tl-res-num small { font-weight: 400; color: #5a6270; font-size: .7rem; overflow-wrap: anywhere; }
.tl-res-num .negatiu { color: #b3261e; }
.tl-res-dues { grid-column: span 2; }
.tl-res-num small { overflow-wrap: normal; }
.tl-res-num .tl-res-avis { color: #8a5a00; font-weight: 600; }
.tl-res-num .tl-res-exemple { color: #6b4a00; }
/* A 320 px (auditoria del 7 d'octubre de 2026) les xifres de cinc dígits («25.000 €», «-24.132 €») sortien de la seva
   columna i es tocaven: la primera columna (el mes) s'estreny fins a la seva paraula més llarga, i la lletra baixa un punt. */
@media (max-width: 359px) {
  .tl-res { font-size: .72rem; }
  .tl-res-fila { grid-template-columns: min-content repeat(3, minmax(0, 1fr)); gap: 4px; }
  .tl-res-mes { overflow-wrap: normal; }   /* la primera columna fa el que fa la seva paraula més llarga: «mesos» no es parteix */
}
.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: 8px; 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; }
/* «Per fer» (5 d'octubre de 2026): els avisos de l'admin, a dalt del tauler. Cada avís és
   una fila que es toca (el text, amb la fletxa) i un botó secundari, «Ara no». Tot de la
   guia d'estil: cap peça nova. */
.tl-perfer ul { list-style: none; margin: 0; padding: 0; }
.tl-avis { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0; border-top: 1px solid #eee; }
.tl-avis-ves { flex: 1 1 7.5rem; min-width: 0; min-height: 44px; background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: 0.9rem;
  color: #1a1a1a; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.tl-avis-ves:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }
/* «S'ha renovat» i «Vist», de costat: la mateixa amplada (la del més llarg). */
.tl-avis-accions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); flex: 0 1 auto; max-width: 100%; gap: 6px; margin-left: auto; }
/* Si no hi caben de costat («Se ha renovado» i «Visto», a 320 px), el text fa dues línies: abans que sortir de la targeta. */
.tl-avis-accions .secondary-btn { white-space: normal; }
/* Una parella de botons («S'ha renovat» i «Vist») va en una fila pròpia i l'omple, com les altres parelles de l'app. */
.tl-avis-parella { flex: 1 1 100%; margin-left: 0; }
/* Dins del bloc d'un resum d'IVA: «Mostrar el resum» i «Baixar el CSV» van sols en la seva fila i l'omplen (pregunta 24). */
.resum-boto { display: block; width: 100%; margin: 0 0 12px; }
#meu-iva-baixada > button, #iva-baixada > button { display: block; width: 100%; }
/* «S'ha renovat», dins del formulari d'una despesa. */
/* Sense ratlla: la mateixa separació que el botó de perill dels altres formularis. */
.cost-renova { margin-top: 20px; }
.cost-renova h3 { margin: 0 0 6px; font-size: 1rem; }
.tl-avis-estat { margin: 0; }
.tl-avis-estat:empty { display: none; }
.tl-avis-estat.error { color: #c0392b; }
.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; }
/* A dalt d'«Ocupació»: quantes reserves té el mes i quantes hores fan, amb el mes anterior a sota. */
.tl-reserves { margin: 0 0 4px; line-height: 1.45; }
.tl-reserves b { font-size: 1rem; }
.tl-reserves small { display: block; font-size: .75rem; color: #5a6270; }
/* 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)); }
/* Les hores més buides (4 d'octubre de 2026): una vora, que es veu també en gris. */
.tl-c.buida { box-shadow: inset 0 0 0 2px #b3261e; }
.tl-setmanes { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 0 0 8px; font-size: .85rem; }
.tl-setmanes select { flex: 1 1 auto; min-width: 0; min-height: 44px; font-size: 1rem; padding: 8px 10px; border-radius: 8px; border: 1px solid #ccc; background: white; font-family: inherit; }
/* 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; min-width: 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-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 140px; min-width: 0; }
/* El nom de la despesa es toca i obre el formulari (5 d'octubre de 2026): no és una caixa,
   és la fila mateixa, amb una fletxa al costat del nom (com el quadre del saldo). */
.cost-obre { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; min-height: 44px; justify-content: center; }
.cost-obre b { overflow-wrap: anywhere; }
.cost-obre:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }
.cost-fletxa { color: #b04a00; font-weight: 400; margin-left: 6px; }
.cost-etiquetes { display: flex; flex-wrap: wrap; gap: 4px; }
.cost-etiquetes .tipo-tag { margin-left: 0; }
/* ELS BOTONS DEL PEU D'UN FORMULARI (guia d'estil; 6 d'octubre de 2026). Els que van de costat
   («Desar» i «Cancel·lar», dins de .form-actions) fan la mateixa amplada i entre tots omplen la fila.
   El que va sol en una fila l'omple tota: el d'enviar d'un formulari que no en té cap més, i el de
   perill («Desactivar l'espai», «Esborrar la franja»...), que va a sota, separat dels altres dos.
   Ho vigila tests/navegador-botons-bloc.test.js. */
form > button[type="submit"], #reset-fields > button[type="submit"] { display: block; width: 100%; }
.costos-esborra { display: block; width: 100%; margin-top: 20px; }
/* ELS CINC BOTONS DE CREAR («+ Nou espai», «+ Nou producte», «+ Nova franja», «+ Nou descompte», «+ Nova despesa»), al
   mateix lloc (sota de l'explicació, abans de la llista) i de la mateixa mida. El de la franja és blanc perquè
   comparteix pantalla amb «+ Nou producte», i de botó taronja n'hi ha un per pantalla; la mida és la mateixa. */
#franja-nova, #centre-nova { padding: 12px 18px; font-size: 0.95rem; font-weight: 600; }
#costos-nou { margin-bottom: 14px; }
.cost-renova > button { display: block; width: 100%; }
/* Un sol botó principal alhora (auditoria d'usabilitat): amb el formulari d'una llista del
   panell obert, el seu «+ Nou...» s'amaga, perquè el principal és «Desar». */
.panel:has(> form:not(.hidden)) > .primary-btn.amaga-si-falla,
.panel:has(> form:not(.hidden)) > .crear-parell,
#admin-packs:has(#dsc-form:not(.hidden)) .crear-parell { display: none; }
/* L'error d'un camp, al costat del camp (al registre): just a sota, i no al final del formulari. */
label + .error[data-al-camp], fieldset + .error[data-al-camp], .row + .error[data-al-camp], .camp-error { margin: -6px 0 10px; }
/* Qui ha entrat i «Sortir», a dalt de «Compte». */
.compte-qui { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.compte-qui span { min-width: 0; overflow-wrap: anywhere; color: #6b6b6b; font-size: 0.85rem; }
.compte-qui button { flex: 0 0 auto; min-height: 44px; }
/* El mateix a tots els formularis del panell: desactivar, retirar o esborrar, a baix, sota de «Desar». */
.form-perill { display: block; width: 100%; margin-top: 20px; min-height: 44px; }
.form-perill + .form-perill { margin-top: 8px; }
/* Per què una oferta o un codi no es pot esborrar: sota del botó de desactivar, en el gris del text secundari. */
.dsc-no-esborra { margin: 8px 0 0; font-size: 0.85rem; line-height: 1.4; color: #6b6b6b; }
/* Les ofertes i els codis desactivats, plegats sota de la llista: el mateix plec de la fitxa del client,
   sense la seva ratlla de dalt (l'última fila de la llista ja en porta una: n'hi hauria dues). */
.dsc-plegat { margin-top: 0; border-top: 0; }
/* La fila d'una llista del panell que es toca sencera per obrir el seu formulari (guia
   d'estil, «Files que es toquen»): com la de «Costos i marge». */
.fila-obre { display: block; background: none; border: 0; padding: 0; margin: 0; min-height: 44px; font: inherit; color: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.fila-obre:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }
.fila-obre .box-meta { display: block; }
/* La fletxa taronja, al costat del nom: diu que la fila es toca. */
.fila-obre > strong::after { content: "›"; color: #b04a00; font-weight: 700; margin-left: 6px; }
/* Les fletxes d'ordenar els productes: una columna estreta a la dreta de la fila. */
.pack-fila { flex-wrap: nowrap; }
.pack-fila .fila-obre { flex: 1 1 0; }
.pack-ordre { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.tl-cost-info small { color: #5a6270; font-size: 0.78rem; }
.tl-cost .box-admin-actions { flex: 1 1 100%; justify-content: flex-end; }
/* L'import de cada despesa, editable a la mateixa llista (com l'eina de costos de
   PintOn, 4 d'octubre de 2026), i la marca dels que encara són d'exemple. */
.cost-rapid { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.cost-rapid input { width: 7.5em; min-height: 44px; padding: 8px 10px; border: 1px solid #ccc; border-radius: 8px; font-size: 16px;
  font-family: inherit; text-align: right; font-variant-numeric: tabular-nums; background: white; margin: 0; }
.cost-rapid input[aria-invalid="true"] { border-color: #c0392b; }
/* L'import d'exemple, en gris al fons del camp: s'hi escriu el propi sense esborrar res.
   El gris del text secundari de la guia, que es llegeix. */
.cost-rapid input::placeholder { color: #6b6b6b; opacity: 1; }
.cost-rapid input { color: #1a1a1a; }
.cost-rapid span { color: #5a6270; font-size: 0.82rem; white-space: nowrap; }
.tl-cost.exemple .cost-rapid input { border-style: dashed; border-color: #b97a00; background: #fff8e8; }
.tipo-tag.exemple-tag { background: #fff0cc; color: #6b4a00; border: 1px dashed #b97a00; }
.cost-estat { flex: 1 1 100%; margin: 0; font-size: 0.8rem; color: #5a6270; }
.cost-estat:empty { display: none; }
/* Acabada de desar: una marca verda dins del quadre, a l'esquerra (el número va a la dreta).
   No ocupa lloc: cap fila es mou. */
.tl-cost.desat .cost-rapid { position: relative; }
.tl-cost.desat .cost-rapid::before { content: '✓'; position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: #1b7a4f; font-weight: 700; pointer-events: none; }
.cost-estat.error { color: #c0392b; }
/* El total, sempre a la vista mentre es corregeixen els imports. */
#costos-peu { position: sticky; bottom: 0; background: white; flex-direction: column; align-items: stretch; gap: 2px; z-index: 2; }
#costos-peu > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
#costos-peu small { color: #6b4a00; font-size: 0.8rem; text-align: right; }
.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; }
/* «Per a qui», al full de reservar de l'admin (21 d'octubre de 2026): un camp com els altres. */
.full-per-a { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; }
.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; }
/* Un dia amb una alternativa (4 d'octubre de 2026): el text, i el botó per acceptar-la o treure-la. */
.serie-dates li.canvi { flex-wrap: wrap; align-items: center; }
.serie-dates li.canvi .serie-cos { flex: 1 1 9rem; min-width: 0; overflow-wrap: anywhere; }
.serie-dates li.canvi small { color: #8a5a00; display: block; }
.serie-dates li.canvi .serie-marca { color: #8a5a00; }
.serie-dates li.canvi.acceptat .serie-marca { color: #1b7a4f; }
.serie-dates .serie-alt { flex: 0 0 auto; min-height: 44px; margin-left: auto; }
.serie-dates small.serie-com { color: #5a6270; }
.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: 6px; 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: 8px; 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) ---------- */
/* La barra de filtres de «Factures» (4 d'octubre de 2026). La cerca ocupa tota la fila. */
.iva-tria .fac-cerca { flex: 1 1 100%; }
.iva-tria .fac-cerca input { width: 100%; }
.fac-aplicats { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: #f4f4f4; color: #333; font-size: 0.88rem; overflow-wrap: anywhere; }
.fac-aplicats:empty { display: none; }
.fac-aplicats { scroll-margin-top: 12px; font-weight: 600; }
.fac-aplicats.cap { background: #fff4e5; color: #6b3a00; }
.fac-aplicats:focus { outline: none; }
.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; }
/* «Mostrar», sota dels camps del filtre: sol en la seva fila, l'omple (pregunta 24), com «Mostrar el resum». */
.iva-tria > button { flex: 1 1 100%; }
/* 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; }
  /* El títol de la llista («Factures del període (2)»): sencer, d'una vora a l'altra. Sense això es quedava en una columna estreta, paraula per línia. */
  .iva-llista caption { display: block; text-align: left; }
  /* 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;
}
/* Un error d'una fila d'una llista del panell (activar, desactivar, moure): a la mateixa fila. */
.fila-error { flex: 1 1 100%; margin: 0; }
/* La mateixa marca a la fila de «Factures», dins del full de «Més» (en lloc de la fletxa). */
.mes-fila.amb-avis::after { content: "!"; width: 1.25em; height: 1.25em; line-height: 1.25em; border-radius: 50%; background: #b3261e; color: white; font-size: 0.85em; text-align: center; }
/* ---------- Afegir o restar crèdits (panell de l'admin, «Compres») ---------- */
.ajust-credits > summary { cursor: pointer; font-weight: 700; font-size: 1.15rem; min-height: 44px; display: flex; align-items: center; }   /* el títol d'una targeta, com el .panel h2 */
.ajust-credits[open] > summary { margin-bottom: 8px; }
/* Que es vegi que s'obre i es plega (4 d'octubre de 2026): una fletxa a la dreta
   del títol, cap avall quan és obert. El títol és flex i no ensenya la de sèrie. */
.ajust-credits > summary { list-style: none; gap: 8px; }
.ajust-credits > summary::-webkit-details-marker { display: none; }
.ajust-credits > summary::after { content: '▸'; margin-left: auto; font-size: 1.1rem; color: #555; }
.ajust-credits[open] > summary::after { content: '▾'; }
.ajust-plega { margin-top: 14px; width: 100%; min-height: 44px; }
.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; }

/* ELS DIES DE LA SETMANA (B5, 1 de novembre de 2026; la mateixa peça que «Setmana tipus» de workout, a la caixa
   d'eines): set botons iguals en una fila, de dilluns a diumenge, que es marquen i es desmarquen. El marcat, com un
   filtre marcat (taronja, el color del que es prem) i amb aria-pressed. 44 px d'alt i 4 de separació. El títol, com
   l'etiqueta d'un camp. Guia, «Els dies de la setmana». */
.camp-titol { display: block; margin-bottom: 5px; font-size: 0.9rem; color: #444; }
.dies-setmana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 10px; }
.dia-btn { min-width: 0; min-height: 44px; padding: 6px 0; border: 1px solid #ccc; border-radius: 8px; background: white; color: #444; font-size: 0.85rem; font-family: inherit; cursor: pointer; }
.dia-btn[aria-pressed="true"] { background: #ff6a00; border-color: #ff6a00; color: #1a1a1a; font-weight: 600; }