/* Els estils que són només de workout. Tota la resta (botons, camps, targetes,
   pestanyes, colors, lletra) surt dels estils base de la caixa d'eines
   (comu/comu.css) i de docs/guia-estil.md. Aquí tampoc s'hi posa cap mida de
   lletra ni cap radi que no siguin a la guia: tests/guia-estil.test.js ho mira. */

/* El nom de l'app, al costat del logo de YourBox. */
.header-logo span { color: white; font-size: 1rem; font-weight: 600; letter-spacing: 0.02em; }
/* A la pantalla d'entrar ja hi ha el logo gran: a la capçalera només hi queda el nom. */
.header-logo.sense-logo img { display: none; }

/* L'idioma, sota de la targeta d'entrar: amb aire, perquè no sembli un camp més del formulari. */
#auth-section > .tria-idioma { margin: 16px 0 0; }

.panel > .tria-idioma-select { margin-top: 0; }



/* «Anul·lar», a sota d'una compra pendent de «Les meves compres», amb aire (com a booking). */
.compra-anulla { margin-top: 10px; }
/* Amb el formulari d'una oferta o codi obert (al bloc de sota), els dos botons de crear de dalt s'amaguen, com a booking. */
#pn-productes:has(#descompte-form:not(.hidden)) .crear-parell { display: none; }
/* A «Compres» del panell, les compres ja resoltes, més clares, com a booking. Booking ho fa amb transparència (0,6),
   que deixa el text per sota del contrast del criteri 20 (3,3 el gris, 2,9 l'etiqueta); aquí, tot el text amb el
   gris secundari de la guia, que fa 4,5 o més (DOSSIER, «Per portar a booking»). */
.compra-resolta strong, .compra-resolta .booking-meta, .compra-resolta .booking-devolucio, .compra-resolta .tipo-tag { color: #6b6b6b; }
/* La compra ocupa tota la fila, perquè «Anul·lar» l'ompli. */
.list .compra-item > div { flex: 1 1 auto; }

/* «Compte creat», amb aire abans del primer camp. */
#compte-benvinguda { margin: 0 0 12px; }

/* El títol d'un formulari del panell («Editar servei»), amb l'aire de booking abans del primer camp. */
.panel form > h3 { margin: 0 0 14px; }

/* «Apuntar algú», al full d'una sessió: amb aire a sobre, i sense el marge de sota dels botons de crear. */
#fs-apunta { margin: 12px 0 0; }

/* ---------- El panell ---------- */
/* Mentre una llista no ha arribat no se sap què hi ha: no s'ensenya cap botó de crear. */
.carrega-fallida .amaga-si-falla { display: none; }
/* El dia triat, sota de la tira, i els dies de la setmana tipus: títols d'apartat amb aire a sobre. */
#pn-dia-titol { margin: 12px 0 4px; }
/* Una hora de la setmana tipus: l'hora, gran, i al costat els set dies; a sota, si cal, el servei. */
.fila-hora-dalt { display: flex; align-items: center; gap: 10px; }
.fila-hora-dalt > strong { flex: none; font-size: 1.15rem; }
/* La fletxa de la fila, al final (després dels dies), i no enganxada a l'hora. */
.fila-hora .fila-hora-dalt > strong::after { content: none; }
.fila-hora .fila-hora-dalt::after { content: "›"; flex: none; color: #b04a00; font-weight: 700; }
/* El total de sessions de la setmana, sota de la llista. */
#setmana-total { margin-top: 12px; }
/* Una llista, amb aire sota del botó o de l'explicació que té a sobre. */
.panel .list { margin-top: 8px; }
.panel .list + .list { margin-top: 0; }
/* «4 de 5», a la dreta de la fila, sense partir-se. */
.ocupacio { flex: none; white-space: nowrap; color: #1a1a1a; font-weight: 600; }
.fila .tipo-tag { margin-left: 6px; }
/* L'avís de «desat», entre el botó de crear i la llista. */
.panel .boto-sol + .success, .panel .boto-sol + .form-help { margin-top: 12px; }
/* Les files del full de «Més», amb aire abans de «Tancar». */
.full-files { margin-bottom: 12px; }
/* Una fila que es toca i porta una cosa a la dreta («4 de 5»): el nom amb la fletxa, a l'esquerra. */
.fila-obre.amb-dreta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fila-obre.amb-dreta > span:first-child { min-width: 0; }
.fila-obre.amb-dreta > span > strong::after { content: "›"; color: #b04a00; font-weight: 700; margin-left: 6px; }
/* El dia triat de l'horari, com el del panell. */
#horari-dia-titol { margin: 12px 0 4px; }
/* Els dos botons del full d'una reserva, l'un sota de l'altre, amb aire. */
.full-botons { display: grid; gap: 8px; }
/* «← Serveis» i «← Clients»: l'enllaç de tornar, el primer de la targeta, enganxat a l'esquerra. */
#horari-torna, #client-torna { display: block; text-align: left; }
/* Un dia de la tira on no es pot anar: apagat. */
.ag-pastilla:disabled { opacity: 0.4; cursor: default; }
/* El menú del panell es queda enganxat a dalt: quan la pantalla es mou sola fins a un camp
   (un error, el cursor), el camp no queda a sota del menú. */
html { scroll-padding-top: 76px; }
/* A 320 px, «Cancel·lades» marcada (en negreta) no hi cabia per 9 px i sortia de la seva pestanya.
   Com a booking, només aquí la lletra de les tres pestanyes és un punt més petita (0,85rem, de l'escala). */
@media (max-width: 359px) {
  /* El menú del panell (Sessions · Clients · Compres (2) · Més) no hi cabia per 4 px amb el número de compres pendents:
     a les pantalles estretes, 8 px a cada costat de cada botó en lloc de 10. */
  .sub-nav .nav-btn { padding: 8px; }
  .reserves-tabs { gap: 4px; }
  .reserves-tabs .tab { padding: 4px 0; font-size: 0.85rem; }
}

/* Els textos legals (W2, 1 de novembre de 2026), com a booking: la llista de «Compte» i els dos enllaços del peu,
   petits de lletra però de 44 px de toc. El gris, el de la guia (#6b6b6b; booking hi té #666). */
.llista-legal { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }   /* separats (criteri 11); booking no en té */
.llista-legal a { display: flex; align-items: center; min-height: 44px; color: #b04a00; }
.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: #6b6b6b; font-size: 0.85rem; }
/* «He oblidat la contrasenya», separat del botó «Entrar» (criteri 11): entremig hi ha l'error i l'avís, buits. */
#forgot-link { margin-top: 8px; }

/* LA BENVINGUDA (E1, 1 de novembre de 2026), copiada de booking (public/style.css, «La benvinguda dels entrenadors»)
   dins de l'escala de workout: el títol a 1,15rem (booking, 1,35) i el botó «Següent», el principal de sempre (booking
   en té un de propi). Els dibuixos, fets amb l'app, sense imatges. */
.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: #6b6b6b; }
.bv-saltar { background: none; border: none; font: inherit; font-weight: 600; color: #444; 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.15rem; color: #1a1a1a; }
.bv-text p { margin: 0 0 8px; font-size: 1rem; line-height: 1.45; color: #444; }
.bv-punts { display: flex; gap: 6px; justify-content: center; margin-top: auto; }
.bv-punts i { width: 8px; height: 8px; border-radius: 6px; background: #e5e5e5; }
.bv-punts i.actiu { background: #1a1a1a; width: 20px; }   /* booking, taronja; aquí el taronja només el porta el que es prem (criteri 18) */
/* Les sessions d'un dia, en petit: una per fila, l'hora i les places; la que es toca, amb el marc taronja. */
.bv-sessions { display: grid; gap: 6px; min-width: 200px; }
.bv-sessions span { display: flex; justify-content: space-between; gap: 16px; padding: 8px 12px; border: 1px solid #e5e5e5; border-radius: 8px; font-size: 0.85rem; font-weight: 600; background: white; }
.bv-sessions small { font-size: 0.85rem; font-weight: 400; color: #444; }
.bv-sessions span.toc { border: 2px solid #1a1a1a; }
.bv-sessions span.plena { color: #6b6b6b; background: #f4f4f5; }
/* El saldo, com la targeta negra de l'Horari. */
.bv-saldo { padding: 14px 18px; border-radius: 10px; background: #1a1a1a; color: white; font-weight: 600; font-size: 1rem; }
/* Les places d'una sessió: les agafades, fosques; les lliures, amb vora. */
.bv-places { display: flex; gap: 8px; }
.bv-places i { width: 22px; height: 22px; border-radius: 10px; background: #1a1a1a; }
.bv-places i.lliure { background: white; border: 2px solid #1a1a1a; }
/* El logo de la pantalla d'entrar, en petit, dins d'un bloc fosc (les lletres són blanques). */
.bv-hola { padding: 12px 20px; border-radius: 10px; background: #1a1a1a; }
.bv-hola img { display: block; width: 96px; height: auto; }
/* Els formularis de «He oblidat la contrasenya» van sense pestanyes a sobre: la targeta sencera, amb la vora de dalt i
   les quatre cantonades, com a booking (sense això, a dalt quedava oberta). */
#forgot-form, #reset-form { border-radius: 10px; outline: 1px solid var(--filet); outline-offset: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }

/* «DIA» I «SETMANA» A «SESSIONS» (E2, 1 de novembre de 2026), com l'agenda de l'admin de booking. */
.agenda-modes { display: flex; gap: 6px; background: #f0f0f0; padding: 4px; border-radius: 10px; margin-bottom: 14px; }
.agenda-modes .nav-btn { flex: 1 1 0; }
/* La tira de dies es queda a dalt en baixar (a «Dia» i a «Setmana»), i el menú del panell, aquí, no. */
#panell-section.a-sessions .menu-panell { position: static; }
#pn-tira { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 6; background: white; margin: 0 -14px; padding: 6px 14px 2px; }
/* La setmana, d'hora en hora: les mateixes peces que booking (.agenda-graella, .agg-cap, .agg-hora, .agg-cel), a l'escala
   de workout (cap lletra de menys de 0,75rem). Com a booking, les caselles no es toquen (al dia, per la tira). */
.setmana-graella { --ag-hora: 32px; display: grid; grid-template-columns: 44px repeat(7, minmax(0, 1fr)); gap: 0; background: #ececec; border: 1px solid #ececec; border-radius: 6px; overflow: clip; margin-top: 8px; }
/* Les ratlles, per dins de cada casella (booking les fa amb 1 px d'espai; aquí els espais van de 2 en 2, criteri 22). */
.setmana-graella .agg-cel { background: white; font-size: 0.75rem; min-width: 0; overflow: hidden; box-shadow: inset -1px -1px 0 #ececec; }
.setmana-graella .agg-cap { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--pn-tira-alt, 90px)); z-index: 5; background: #f7f7f7; font-weight: 600; padding: 6px 2px; text-align: center; white-space: nowrap; box-shadow: 0 -2px 0 white, inset -1px -1px 0 #ececec; }
.setmana-graella .agg-cap.avui { background: #ffe8d6; }
.setmana-graella .agg-cap.tancat { color: #6b6b6b; }
.setmana-graella .agg-hora { background: #fafafa; color: #5f5f5f; text-align: right; padding: 4px 4px 0 0; }
.setmana-graella .ag-tancat { background: #f1f1f1; }
.setmana-graella .ag-ocupacio { display: flex; align-items: center; justify-content: center; color: #1a1a1a; }
.setmana-graella .ag-ocupacio.n0 { background: white; }
.setmana-graella .ag-ocupacio.n1 { background: #ffe8d6; }
.setmana-graella .ag-ocupacio.n2 { background: #ffc79b; }
.setmana-graella .ag-ocupacio.n3 { background: #ff9d52; color: #3d1c00; }
.setmana-graella .ag-ocupacio.n4 { background: #e35a00; color: white; font-weight: 600; }