/* ELS ESTILS BASE de les apps de YourBox (caixa d'eines; copiats de
   public/style.css de booking). Tot surt de docs/guia-estil.md: una sola forma de
   botó (8 px de radi, 44 px d'alt), les cinc mides de lletra de l'escala bona
   (1,15 · 1 · 0,9 · 0,85 · 0,75 rem), els colors de la guia i el filet de les
   targetes. Una prova (src/guia.js) falla si aquí apareix una mida o un radi que
   no hi són. Cada app hi afegeix el seu style.css amb el que és només seu.

   De quina versió és aquest fitxer: el servidor hi posa la versió en fer la
   fotografia dels fitxers (src/fitxers.js), i la pàgina comprova en arrencar
   que coincideix amb la seva (comprovaFitxersDeLaVersio, a comu.js). */
:root {
  --yourbox-versio: "1ef89d2";
  --taronja: #ff6a00;
  --taronja-fosc: #e55f00;
  --negre: #1a1a1a;
  --fons: #f4f4f5;
  --barra: #f0f0f0;
  --vores: #ccc;
  --filet: #6e6e6e;
  --vermell: #c0392b;
  --verd: #1b7a4f;
  --text-etiqueta: #444;
  --text-secundari: #6b6b6b;
}

* { 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 de la barra d'estat amb l'app instal·lada, i les
   vores en fer el rebot al final. Negre, com la capçalera. */
html { background: #1a1a1a; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: #f4f4f5;
  color: #1a1a1a;
}
.hidden { display: none !important; }
/* Un import, una hora o un número amb la seva paraula no es parteixen en dues línies. */
.sense-tall { white-space: nowrap; }

/* ---------- Capçalera ---------- */
header {
  background: #1a1a1a;
  color: white;
  /* El negre ha d'arribar a la vora de dalt, per darrere de la barra d'estat. */
  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));
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}
header h1 { margin: 0; font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: 10px; }
/* El logo apaisat, a 24 px d'alçada. Mida explícita en les dues direccions. */
.header-logo { flex: 0 0 auto; }
.header-logo img { display: block; width: 92px; height: 24px; }
/* El nom de qui ha entrat, a la dreta. Si no hi cap, s'escurça amb «…»: la capçalera fa sempre una sola línia. */
.header-right { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; min-width: 0; }
#user-info { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Mode de proves: una franja sota la capçalera, a totes les pantalles. */
.mode-proves {
  background: #ffc879;
  color: #1a1a1a;
  padding: 8px
           calc(16px + env(safe-area-inset-right, 0px))
           8px
           calc(16px + env(safe-area-inset-left, 0px));
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
}
/* Sense connexió: la capçalera s'allarga cap avall amb una línia. */
.sense-connexio {
  background: #1a1a1a;
  color: #ffc879;
  padding: 0
           calc(16px + env(safe-area-inset-right, 0px))
           12px
           calc(16px + env(safe-area-inset-left, 0px));
  font-size: 0.85rem;
}
/* Versió nova: a baix de tot, per sobre de tot. La pàgina hi deixa lloc. */
.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;
  color: #1a1a1a;
  border-top: 1px solid #6e6e6e;
  font-size: 0.9rem;
}
.versio-boto {
  background: #ff6a00;
  color: #1a1a1a;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  min-height: 44px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

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 ---------- */
/* L'activa, taronja i plena; les altres, planes i grises. Dins d'una barra
   grisa, totes fan la mateixa amplada i omplen la barra. */
.tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 9px 4px;
  border: 1px solid transparent;
  background: transparent;
  color: #6b6b6b;
  cursor: pointer;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  transition: background-color 0.15s, color 0.15s;
}
.tab:hover { color: #444; }
.tab.active {
  background: #ff6a00;
  color: #1a1a1a;
  font-weight: 600;
}
.auth-tabs, .reserves-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  background: #f0f0f0;
  padding: 4px;
  border-radius: 10px;
}
/* La targeta d'entrar són dues peces enganxades: les pestanyes i el formulari. */
.auth-tabs { margin-bottom: 0; border-radius: 10px 10px 0 0; }

/* Filtres: botons secundaris en una fila, tots iguals. El marcat, com la pestanya activa. */
.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;
}
.filtre-btn[aria-pressed="true"] { background: #ff6a00; border-color: #ff6a00; color: #1a1a1a; font-weight: 600; }

/* ---------- Targetes ---------- */
.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: 0 0 12px; font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.panel h3 { margin: 0 0 8px; font-size: 1rem; font-weight: 600; }
.panel > :last-child, .auth-form > :last-child { margin-bottom: 0; }
/* El filet: totes les targetes porten el mateix, 1 px, dibuixat amb `outline`,
   que no ocupa lloc. La targeta d'entrar, com una sola peça (ombres d'1 px cap
   als costats de fora de cada meitat). */
.panel { outline: 1px solid var(--filet); outline-offset: 0; }
.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); }

/* El logo quadrat a la pantalla d'entrar: té les lletres blanques, i 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; }

/* ---------- Camps ---------- */
/* 44 px d'alt, radi 8, vora #ccc, lletra d'1rem (16 px: amb menys, l'iPhone fa
   zoom en tocar-los). L'etiqueta, a sobre, de 0,9rem i #444. Una sola columna. */
form label, .tria-idioma { display: block; margin-bottom: 10px; font-size: 0.9rem; color: #444; }
.auth-form label, .tria-idioma { margin-bottom: 12px; }
form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
form select,
form textarea,
.tria-idioma-select {
  display: block;
  min-height: 44px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  color: #1a1a1a;
  width: 100%;
  margin-top: 5px;
  background: white;
}
/* Un camp amb error, marcat també a la vista (i el missatge a sota ho diu amb paraules). */
form input:not([type="checkbox"]):not([type="radio"]):not([type="file"])[aria-invalid="true"],
form select[aria-invalid="true"] { border-color: #c0392b; box-shadow: inset 0 0 0 1px #c0392b; }
/* «Mostrar la contrasenya»: dins del mateix camp, a la dreta, amb paraules
   («Mostrar» / «Amagar») i no amb un dibuix. Gris com un botó secundari i sense
   caixa pròpia: la caixa és la del camp. 44 px d'alt i una amplada fixa, perquè
   no es mogui en canviar de paraula. El camp deixa lloc perquè el que s'escriu
   no hi passi per sota. */
.camp-contrasenya { display: block; position: relative; margin-top: 5px; }
form .camp-contrasenya input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { margin-top: 0; padding-right: 96px; }
.mostra-contrasenya {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 88px;
  min-height: 44px;
  padding: 0 8px;
  background: none;
  border: 0;
  border-radius: 0;
  color: #444;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
}
/* Una ratlla curta el separa del que s'escriu. */
.mostra-contrasenya::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: #ccc; }
/* L'ajuda d'un camp, a sota, lligada amb aria-describedby. */
.camp-ajuda {
  display: block;
  margin: -6px 0 10px;
  color: #6b6b6b;
  font-size: 0.85rem;
  line-height: 1.4;
}
.auth-form .camp-ajuda { margin: -8px 0 12px; }
.form-help { color: #6b6b6b; font-size: 0.9rem; line-height: 1.45; margin: 0 0 12px; }

/* ---------- Botons: una sola forma ---------- */
/* Principal: l'acció de la pantalla. */
button[type="submit"], .boto-primari, .primary-btn {
  background: #ff6a00;
  color: #1a1a1a;
  border: none;
  min-height: 44px;
  padding: 11px 24px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
/* El botó de crear d'una llista («+ Nou...»), amb aire a sota. */
.primary-btn { padding: 12px 18px; margin-bottom: 16px; }
button[type="submit"]:hover, .boto-primari:hover, .primary-btn:hover { background: #e55f00; }
/* Un botó apagat s'ha de veure apagat. */
button[type="submit"]:disabled, .boto-primari:disabled, .primary-btn:disabled {
  background: #d6d6d6;
  color: #6b6b6b;
  cursor: default;
}
/* Secundari: la resta. Fons blanc, vora clara, text gris fosc. */
.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;
}
/* De perill: vora i text vermells; ple, quan confirma (dins de la pregunta). */
.cancel-btn {
  background: white;
  border: 1px solid #c0392b;
  color: #c0392b;
  border-radius: 8px;
  min-height: 44px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
}
.boto-perill {
  background: #c0392b;
  border: 1px solid #c0392b;
  color: white;
  border-radius: 8px;
  min-height: 44px;
  padding: 10px 24px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
}
/* Enllaç: anar a un altre lloc. Text taronja subratllat, sense caixa. */
.link-btn {
  background: none;
  border: none;
  color: #b04a00;   /* taronja fosc, com a booking: el de la marca fa 2,87 sobre blanc (1.14.0) */
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
  padding: 10px 0;
  text-decoration: underline;
  min-height: 44px;
}
.link-btn:hover { color: #8a3a00; }
/* El botó que va sol en una fila l'omple tota: el d'enviar d'un formulari que
   no en té cap més, i qualsevol altre que es marqui amb .boto-sol. */
form > button[type="submit"], #reset-fields > button[type="submit"], .boto-sol { display: block; width: 100%; }
/* Els formularis d'entrar (1.14.0): el títol, de l'escala; i un enllaç just sota el botó, separat (criteri 11). */
.auth-form > h3 { margin: 0 0 8px; font-size: 1rem; font-weight: 600; }
.auth-form button[type="submit"] + .link-btn { margin-top: 8px; }
/* Els que van de costat fan la mateixa amplada i entre tots omplen la fila. */
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* La mateixa base i el mateix marge interior per a tots dos: sense això, el marge i la vora de cada forma de botó els feien 2 px diferents. */
.form-actions > button { flex: 1 1 120px; min-width: 0; min-height: 44px; margin: 0; padding-left: 8px; padding-right: 8px; }

/* ---------- Errors i «ha anat bé» ---------- */
/* Al costat d'on ha passat, amb paraules (no només el color). */
.error { color: #c0392b; margin: 10px 0 0; font-size: 0.9rem; font-weight: 600; }
.success { color: #1b7a4f; margin: 10px 0 0; font-size: 0.9rem; font-weight: 600; }
.error:empty, .success:empty { display: none; }
/* El missatge d'un camp, just a sota del camp. */
label + .error, label + .camp-ajuda + .error { margin: -6px 0 10px; }
.auth-form label + .error, .auth-form label + .camp-ajuda + .error { margin: -8px 0 12px; }

/* ---------- Etiqueta petita: una sola forma, mai una píndola ---------- */
.tipo-tag {
  display: inline-block;
  background: #f0f0f0;
  padding: 2px 9px;
  margin-left: 4px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 400;
  color: #444;
  vertical-align: middle;
}

/* ---------- Full que puja des de baix ---------- */
.full {
  width: 100%;
  max-width: 640px;
  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, 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); }
.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; font-weight: 700; }
.full-resum { margin: 0 0 4px; font-weight: 600; }
.fs-detall { margin: 0 0 10px; color: #444; font-size: 0.9rem; overflow-wrap: anywhere; }

/* ---------- Peu ---------- */
.versio-peu { text-align: center; font-size: 0.75rem; color: #6b6b6b; margin: 0; }

/* =====================================================================
   Versió 1.2.0: les peces de booking que fan falta per a un horari, unes
   reserves i un panell. Copiades de public/style.css de booking; només hi
   canvien les mides de lletra (les de l'escala bona de la guia) i el gris
   del text secundari (#6b6b6b, el de la guia, que es llegeix bé).
   ===================================================================== */

/* ---------- El menú principal i el del panell ---------- */
/* Una barra grisa amb les pestanyes; la marcada, taronja. Cap pestanya parteix
   el text: cadascuna fa el que necessita i la resta es reparteix. */
.app-nav, .sub-nav {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  background: #f0f0f0;
  padding: 4px;
  border-radius: 10px;
}
.nav-btn {
  flex: 1 1 auto;
  white-space: nowrap;
  border: none;
  background: transparent;
  color: #6b6b6b;
  min-height: 44px;
  padding: 10px 6px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
  transition: background-color 0.15s, color 0.15s;
}
.nav-btn:hover { color: #444; }
.nav-btn.active { background: #ff6a00; color: #1a1a1a; font-weight: 600; }
/* La barra del panell, una mica més clara i amb els botons més baixos. */
.sub-nav { background: #f7f7f7; margin-bottom: 14px; }
.sub-nav .nav-btn { padding: 8px 10px; }
/* El comptador de reserves futures, dins de la pestanya «Reserves (2)». Petit a posta: el número no es pot menjar el nom. */
.nav-comptador { display: inline-block; margin-left: 4px; font-size: 0.85rem; font-weight: 600; }
/* El menú del panell: no passa de quatre botons (l'últim, «Més», obre un full
   amb la resta) i es queda enganxat a dalt en baixar, amb el fons de la pàgina. */
.menu-panell {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: #f4f4f5;
  padding: 6px 0 8px;
  margin: -6px 0 6px;
  box-shadow: -4px 0 0 #f4f4f5, 4px 0 0 #f4f4f5;
}
.menu-panell .sub-nav { margin-bottom: 0; }
/* El full de «Més»: files que es toquen, 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; }

/* ---------- Llistes i files que es toquen ---------- */
.list { margin: 0; padding: 0; }
.list .fila {
  border-bottom: 1px solid #eee;
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  overflow-wrap: anywhere;
}
.list .fila:last-child { border-bottom: none; }
.list .fila > :first-child { min-width: 0; flex: 1 1 0; }
/* El text secundari d'una fila, a sota del nom. */
.box-meta { display: block; color: #6b6b6b; font-size: 0.85rem; margin-top: 4px; }
/* Una llista que no té res: ho diu, amb el gris del text secundari. */
.empty { color: #6b6b6b; font-size: 0.9rem; margin: 0; }
/* La fila que es toca sencera per obrir el seu detall o el seu formulari: no
   porta cap botó «Editar»; el nom duu una fletxa taronja al costat. */
.fila-obre { display: block; width: 100%; 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, .fila-ves:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }
.fila-obre > strong::after { content: "›"; color: #b04a00; font-weight: 700; margin-left: 6px; }
/* Una fila que porta a un altre lloc: el text, i prou. */
.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.mes-fila { display: flex; border-top: 1px solid #eee; }
.fila-ves.mes-fila:first-child { border-top: 0; }
/* El que no es fa cada dia («Desactivar el servei»), a sota del formulari. */
.form-perill { display: block; width: 100%; margin-top: 20px; min-height: 44px; }
.form-perill + .form-perill { margin-top: 8px; }
/* Una llista que no s'ha pogut carregar: ho diu al lloc de la llista, amb un botó per tornar-ho a provar. */
.carrega-error { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; color: #c0392b; font-size: 0.9rem; font-weight: 600; }
/* Les llistes llargues neixen curtes: «Veure'n més» i, al costat, el comptador, sempre de la mateixa amplada. */
.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; }
.llista-mes > .llista-compte { flex: 0 0 5.5rem; text-align: right; white-space: nowrap; color: #6b6b6b; font-size: 0.85rem; }

/* ---------- El saldo: una targeta fosca, a sobre de la targeta de reservar ---------- */
/* El saldo i, a la seva dreta, el botó de comprar-ne més (quan n'hi hagi), en una fila. Sense res a dir, res. */
.saldo-targeta { background: #1a1a1a; border-radius: 8px; margin: 0 0 12px; }
.saldo-fila { display: flex; align-items: center; gap: 10px; padding-right: 8px; }
.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; }
/* «Avui tens...», a sota del saldo, amb tota l'amplada. */
.saldo-targeta .avui-tens { margin: 0; padding: 0 12px 10px; background: transparent; color: #ffc879; font-size: 0.85rem; }
.saldo-linia { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; min-height: 44px; margin: 0; padding: 6px 12px; color: white; font-size: 1rem; line-height: 1.3; }

/* L'explicació de sota del títol d'una targeta del panell. */
.panel-intro { margin: -6px 0 18px; color: #6b6b6b; font-size: 0.9rem; line-height: 1.5; }

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

/* ---------- La tira de dies ---------- */
/* Les mides de la tira són les de booking: no es toquen sense una decisió
   expressa d'en Pere (guia, «Les agendes»). */
/* El mes, just a sobre de la tira, a l'esquerra: una nota petita. */
/* La frase d'ajuda de sota del títol («Toca una hora lliure per reservar-la»), curta i petita: com menys hi ha
   damunt de la tira, més amunt comença el dia. */
.uag-intro { margin: 0 0 8px; color: #6b6b6b; font-size: 0.85rem; line-height: 1.5; }
.uag-mes { margin: 0 0 2px; font-size: 0.75rem; line-height: 1.2; color: #6b6b6b; }
/* L'ALTA, la del panell: 66 px d'alt i 5 entre dies. */
.agenda-tira-fila { display: flex; align-items: stretch; gap: 4px; margin-bottom: 16px; }
.agenda-tira { display: flex; flex: 1 1 auto; min-width: 0; gap: 5px; }
/* LA BAIXA, la de l'horari de qui reserva: 44 px d'alt i 3 entre dies. */
.uag-dies { display: flex; align-items: stretch; gap: 4px; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 6; background: white; margin: 0 -14px; padding: 6px 14px 8px; }
.uag-dies .agenda-tira { gap: 3px; }
.uag-dies .ag-pastilla { min-height: 44px; padding: 3px 1px; gap: 0; }
.ag-pastilla {
  flex: 1 1 0;
  min-width: 0;
  min-height: 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: 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.75rem; color: #6b6b6b; text-transform: uppercase; }
.ag-pastilla-num { font-size: 1rem; font-weight: 600; color: #1a1a1a; }
.uag-fletxa { flex: none; width: 30px; min-height: 44px; padding: 0; }
.uag-fletxa:disabled { opacity: 0.4; cursor: default; }

/* =====================================================================
   Versió 1.5.0: més peces de booking, copiades de public/style.css. Com
   sempre, les mides de lletra són les de l'escala (on booking en té una
   d'heretada, la més propera) i els grisos, els de la guia.
   ===================================================================== */

/* ---------- La pantalla «Tria el teu idioma», el primer cop ---------- */
.lang-screen { position: fixed; inset: 0; background: #1a1a1a; display: flex; align-items: center; justify-content: center; z-index: 100; overflow: hidden; }
.lang-box { text-align: center; color: white; padding: 24px; position: relative; z-index: 1; }
.lang-box h1 { margin: 0 0 24px; line-height: 0; }
.lang-logo img { display: block; width: min(60vw, 220px); height: auto; aspect-ratio: 1275 / 1193; margin: 0 auto; }
.lang-title { font-size: 1.15rem; line-height: 1.8; color: #ccc; margin: 0 0 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; min-height: 44px; padding: 12px 28px; border-radius: 8px; font-size: 1rem; font-family: inherit; cursor: pointer; }
.lang-btn:hover { background: #ff6a00; color: #1a1a1a; }

/* ---------- El peu de l'app: la versió, a baix de totes les pantalles ---------- */
.peu-app { text-align: center; padding: 12px 8px 24px; }

/* ---------- El títol d'una targeta amb alguna cosa al costat, i el 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: 1rem; min-width: 0; }

/* ---------- La confirmació d'una cosa acabada de fer, i l'avís ---------- */
/* En un requadre, on la persona mira. Les confirmacions se'n van soles al cap d'uns segons (comu.js no hi entra: ho fa l'app). */
.reserva-feta { margin: 0 0 12px; padding: 10px 12px; background: #e8f6ec; border-radius: 8px; color: #12633a; font-size: 0.9rem; }
.reserva-avis { margin: 0 0 12px; padding: 10px 12px; background: #fdecea; border-radius: 8px; color: #8a1f11; font-size: 0.9rem; }
.reserva-feta:empty, .reserva-avis:empty { display: none; }

/* ---------- El full del saldo, càrrega per càrrega ---------- */
.fcr-ordre { margin: 0 0 8px; font-size: 0.85rem; color: #444; }
.fcr-llista { list-style: none; margin: 0; padding: 0; }
.fcr-bo { padding: 10px 0; border-top: 1px solid #eee; }
.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.85rem; color: #444; margin-top: 2px; overflow-wrap: anywhere; }
.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; }

/* ---------- El quadre del saldo, a dalt de «Compte» ---------- */
.saldo-panel { background: #1a1a1a; color: white; border-radius: 10px; padding: 16px 18px; margin-bottom: 18px; }
/* (0,85rem i no 0,75: a booking fa 0,8, entre totes dues, i així «Compte» no té una mida de lletra més.) */
.saldo-etiqueta { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: #999; }
/* LA SISENA MIDA, reservada només per a aquest número (guia, «Lletra»): 2rem, com a booking. */
.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: 1rem; color: #ddd; margin-top: 4px; }
.saldo-panel .saldo-veure-bons { display: block; min-height: 44px; color: #ffb37a; padding-left: 0; text-align: left; }

/* ---------- Les reserves, a «Les meves reserves» ---------- */
/* Cada pestanya porta el seu número a sota, més petit. */
.reserves-tabs .tab { white-space: nowrap; line-height: 1.15; }
/* (0,85rem: a booking fa 0,76, i el nom de la pestanya 0,78 a les pantalles estretes; aquí, tots dos de l'escala.) */
.reserves-tabs .tab .tab-n { display: block; font-size: 0.85rem; font-weight: 400; }
/* Una reserva: què és, quan, fins quan es pot cancel·lar; i a la dreta, el botó de cancel·lar. */
.list .booking-item { border-bottom: 1px solid #eee; padding: 12px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; overflow-wrap: anywhere; }
.list .booking-item:last-child { border-bottom: none; }
.list .booking-item > :first-child { min-width: 0; }
.booking-meta { color: #444; font-size: 0.9rem; margin-top: 3px; }
.booking-status { color: #6b6b6b; font-size: 0.75rem; margin-top: 2px; }
.booking-accions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.booking-devolucio { font-size: 0.85rem; color: #444; margin-top: 3px; }
.booking-termini { font-size: 0.85rem; color: #444; margin-top: 2px; }
.booking-termini.fora { color: #8a1f11; }
/* «Buidar la llista» de les cancel·lades, i la línia que diu quantes n'hi ha d'amagades. */
.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: #6b6b6b; font-size: 0.85rem; }
.cancellades-buidar > p .link-btn { min-height: 44px; }

/* ---------- L'agenda del panell: la setmana que es veu i el botó «Avui» ---------- */
.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.9rem; }

/* =====================================================================
   Versió 1.8.0: els dies de la setmana (guia, «Els dies de la setmana»).
   Dues peces noves: booking no en té cap de semblant. Surten dels
   filtres de la guia (botons secundaris iguals; el marcat, taronja).
   ===================================================================== */

/* ---------- Triar dies de la setmana: set botons que es marquen i es desmarquen ---------- */
/* Tots iguals, en una sola fila, de dilluns a diumenge: la setmana es llegeix d'un cop d'ull. El marcat, com un
   filtre marcat (taronja, que és el color del que es prem) i amb aria-pressed. 44 px d'alt i 4 de separació. */
.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; }

/* ---------- Els dies que es fa una cosa, en una fila de llista: només es llegeixen, no es toquen ---------- */
/* Els set dies, petits. Els que es fa, en fosc (no en taronja: no es premen); els que no, amb la vora clara. */
.dies-fets { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; flex: 1 1 auto; min-width: 0; max-width: 224px; }
.dia-xip { display: block; padding: 4px 0; border: 1px solid #ccc; border-radius: 6px; color: #6b6b6b; font-size: 0.75rem; line-height: 1.2; text-align: center; }
.dia-xip.fet { background: #1a1a1a; border-color: #1a1a1a; color: white; font-weight: 600; }

/* =====================================================================
   Versió 1.9.0: tres peces de formulari de booking (copiades de
   public/style.css), amb les mides de l'escala i els grisos de la guia.
   ===================================================================== */

/* ---------- Triar una opció d'una llista: cada fila, una opció; la triada, marcada ---------- */
.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; }
/* (A booking la dada de la dreta s'hi empeny amb un marge automàtic; aquí el nom ocupa el que sobra, que fa el mateix.) */
.uag-durada span { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.uag-durada small { flex: none; color: #6b6b6b; font-size: 0.85rem; }

/* ---------- Una casella amb el seu nom i una explicació a sota ---------- */
.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; }
/* L'etiqueta és el que es toca: 44 d'alt com a mínim (a booking en fa 36 quan l'explicació és d'una línia). */
form .checkbox-label { flex: 1 1 auto; min-height: 44px; margin: 0; cursor: pointer; }
.checkbox-label strong { display: block; font-size: 1rem; color: #1a1a1a; }
.checkbox-label small { display: block; color: #6b6b6b; font-size: 0.85rem; margin-top: 2px; }
/* Quan l'explicació és un avís que no deixa continuar: vermella i en negreta, com tots els errors. */
.checkbox-label small.error { color: #c0392b; font-weight: 600; }

/* ---------- Triar entre dues coses abans d'una acció greu («Què passa amb els crèdits?») ---------- */
.fc-politica { border: 1px solid #eee; border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; }
.fc-politica legend { font-weight: 600; padding: 0 4px; }
form .fc-politica label { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; font-size: 1rem; color: #1a1a1a; }
/* El botó que confirma una cosa greu, dins d'un full: vermell ple, encara que sigui el d'enviar el formulari. */
.full button.boto-perill { background: #c0392b; color: white; border: none; }
.full button.boto-perill:disabled { background: #d9a09a; }

/* =====================================================================
   Versió 1.10.0: la botiga de booking (copiada de public/style.css), amb
   les mides de l'escala i els grisos de la guia. On booking té una mida
   heretada, la de l'escala més propera: 1,05 → 1; 0,88 i 0,86 i 0,84 → 0,85;
   0,76, 0,74 i 0,72 → 0,75. El número i el preu de la targeta, 2rem (a
   booking, 2,5rem; decisió d'en Pere, 16 d'octubre de 2026). El radi de la
   targeta, 14 px (a booking, 16; 14 és el de la guia més proper), i el
   cercle de la cantonada, pintat amb un degradat i no amb un radi del 50 %.
   ===================================================================== */

/* ---------- «Comprar sessions», a la dreta del saldo de la targeta fosca ---------- */
/* Discret quan es pot reservar: el taronja clar de «avui tens», sobre el negre. */
.saldo-comprar {
  flex: 0 0 auto;
  min-height: 44px;
  margin: 8px 0;
  padding: 0 14px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  color: #ffc879;
  border: 1px solid rgba(255, 200, 121, 0.55);
}
/* Destacat quan no es pot reservar res (sense saldo): taronja ple, i el text fosc (blanc no hi fa prou contrast). */
.saldo-comprar.destacat { background: #ff6a00; color: #1a1a1a; border-color: #ff6a00; }
/* El mateix, al quadre del saldo de «Compte»: tota l'amplada, a sota. */
.saldo-btn {
  margin-top: 14px;
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #555;
  background: transparent;
  color: white;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
}

/* ---------- El full del saldo: les càrregues que caduquen aviat, i el botó de la botiga ---------- */
.fcr-bo.aviat { border-left: 4px solid #c0392b; padding-left: 8px; }
.fcr-aviat { display: inline-block; padding: 0 8px; border-radius: 6px; background: #c0392b; color: white; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.fcr-botiga { margin-top: 12px; }
.fcr-botiga > button { display: block; width: 100%; min-height: 44px; margin: 0; }

/* ---------- La botiga ---------- */
/* Que de moment no es cobra res: sempre a la vista, a la botiga, a «Compte» i al full de comprar. */
.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; }
/* La compra pendent: mentre n'hi ha una, no se'n pot fer cap altra. */
.solicitud-banner { padding: 12px 14px; border-radius: 10px; margin: 0 0 16px; font-size: 0.9rem; line-height: 1.45; background: #eef4fb; border: 1px solid #c3d8ef; color: #2c4a68; }
/* El preu d'abans, ratllat, i el rebaixat. */
.preu-abans { color: #6b6b6b; font-weight: 400; margin-right: 6px; }
.preu-oferta { color: #b04a00; }

/* Una targeta de color per producte, dibuixada per l'app: degradat en diagonal dins del mateix color, ombra
   suau i un cercle translúcid a la cantonada. El text blanc hi fa 4,5:1 com a mínim, també damunt del cercle. */
.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 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 14px;
  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;
  right: -60px;
  top: -80px;
  background: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.06) 99%, transparent 100%);
}
.bt-nom { font-weight: 700; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.bt-oferta, .bt-habitual {
  display: inline-block; vertical-align: 2px; margin-left: 4px; padding: 2px 8px; border-radius: 6px;
  background: white; color: var(--c2); font-size: 0.75rem; font-weight: 700;
}
/* El número de sessions i el preu, a la mateixa mida: el preu mai no queda per sota de cap altre text. */
.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: 2rem; font-weight: 800; letter-spacing: -1px; }
.bt-num span { font-size: 0.75rem; 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: 2rem; font-weight: 800; letter-spacing: -1px; }
.bt-preu small { display: block; font-size: 0.75rem; 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; }
/* La característica i la caducitat; la caducitat no es parteix mai: si no hi cap, baixa a la seva línia. */
.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.85rem; flex: 0 1 auto; min-width: 0; }
.bt-cad { flex: 0 0 auto; white-space: nowrap; font-size: 0.75rem; 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; padding: 0 16px; 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; }

/* ---------- El full de comprar: el codi de descompte i «Aplicar», a la mateixa alçada ---------- */
/* El requadre, a 16 px, perquè l'iPhone 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: 1rem; text-transform: uppercase; }
.codi-fila button { flex: 0 0 auto; height: 48px; margin: 0; box-sizing: border-box; font-size: 1rem; }
form .codi-fila input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { margin: 0; }
/* El que diu el codi: aplicat, en el text normal; o per què no val, com tots els errors (`.error`: vermell i en negreta). */
.codi-descompte .codi-msg { margin: 6px 0 0; }
.codi-descompte .codi-msg.error { color: #c0392b; font-weight: 600; }

/* ---------- «Les meves compres» i «Compres» del panell: l'estat de cada compra ---------- */
.compra-item .tipo-tag { color: #444; }
.compra-item .tipo-tag.estat-pendent { background: #fff4e5; color: #7a2e00; }
.compra-item .tipo-tag.estat-aprovada { background: #e3f4e8; color: #1d5e32; }
.compra-item .tipo-tag.estat-rebutjada { background: #fdf2f2; color: #8a2020; }
/* «Aprovar» i «Rebutjar», iguals de mida i de lletra. */
.compra-admin-accions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.compra-admin-accions button { min-height: 44px; margin: 0; padding: 10px 16px; font-size: 1rem; font-family: inherit; }

/* ---------- Els productes del panell: la mostra del color, i les fletxes d'ordenar a la dreta de la fila ---------- */
.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%); }
.fila-ordre { display: flex; flex-direction: column; gap: 4px; flex: none; }
.fila-ordre > button { min-width: 44px; min-height: 44px; margin: 0; padding: 0; }

/* ---------- Una llista plegada a baix («Desactivades (3)»): es desplega tocant el títol ---------- */
.plegat { margin-top: 16px; border-top: 1px solid #eee; }
.plegat > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; list-style: none; font-weight: 700; font-size: 1rem; }
.plegat > summary::-webkit-details-marker { display: none; }
.plegat > summary::after { content: '▸'; margin-left: auto; font-size: 1.15rem; color: #6b6b6b; }
.plegat[open] > summary::after { content: '▾'; }
.plegat > summary:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }

/* =====================================================================
   Versió 1.11.0: més peces de booking (public/style.css), amb les mides
   de l'escala: els avisos del saldo, «Què és un bo?», els dos botons de
   crear de costat i l'enllaç per baixar a un bloc de la mateixa pantalla.
   ===================================================================== */

/* ---------- Els avisos del saldo: poques sessions, o unes que caduquen aviat ---------- */
/* Sota de la targeta fosca del saldo (només quan hi ha alguna cosa a dir: un avís que hi és sempre és decoració). */
.saldo-avis-franja { margin: 0 0 12px; padding: 10px 12px; background: #3a2a12; color: #ffc879; border-radius: 8px; font-size: 0.9rem; }
/* Dins del quadre del saldo de «Compte»: el quadre es marca, i cada avís en la seva franja. */
.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; }

/* ---------- «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 summary:focus-visible { outline: 2px solid #ff6a00; outline-offset: 2px; }
.que-es p { margin: 4px 0 8px; }
/* Dins del quadre negre del saldo, clar. */
.saldo-panel .que-es { color: #ddd; }
.saldo-panel .que-es summary { color: #fff; }

/* ---------- Dos botons de crear, de costat i iguals («+ Nou producte» i «+ Nova oferta o codi») ---------- */
/* Fan sempre la mateixa amplada i alçada: si el text d'un fa dues línies, l'altre és igual d'alt. */
.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%; min-height: 44px; padding: 12px 4px; font-size: 1rem; font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
/* Amb un formulari obert a la pantalla, els botons de crear s'amaguen. */
.panel:has(> form:not(.hidden)) > .crear-parell { display: none; }

/* ---------- Un enllaç que baixa a un bloc de la mateixa pantalla («Anar a les ofertes i els codis ↓») ---------- */
.ves-al-bloc { display: block; min-height: 44px; margin: 0; text-align: left; }
.ves-al-bloc + .crear-parell { margin-top: 8px; }