/* ============================================================
   Components compartits pels dos prototips.
   Res d'aquí és específic de la variant A o B: si un estil
   només el fa servir una variant, va al seu propi <style>.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-family);
  font-weight: var(--fw-medium);
  color: var(--text-body);
  background: #e5e7eb;
  -webkit-font-smoothing: antialiased;
  display: flex;
  justify-content: center;
  height: 100vh;
  height: 100dvh;   /* dvh evita el salt de la barra d'URL al mòbil */
  overflow: hidden;
}

/* ---------- Marc de telèfon ----------
   El prototip és mobile-first a 390px (l'amplada dels frames de
   Restaurant Shifts). En pantalla gran el marc evita que ningú
   el jutgi com una pàgina d'escriptori. */
.phone {
  width: 390px;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  background: var(--bg-surface);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (min-width: 430px) {
  body { align-items: center; padding: var(--dim-9) 0; }
  .phone {
    border-radius: var(--dim-11);
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    height: 844px;
    max-height: calc(100% - var(--dim-13));
  }
}

.statusbar {
  height: 44px; flex: 0 0 44px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--dim-6);
  font-size: var(--fs-s); font-weight: var(--fw-semibold);
  color: var(--text-title); background: var(--bg-neutral);
}
.statusbar .icons { letter-spacing: 2px; font-size: var(--fs-2xs); }

/* La barra d'estat simulada només té sentit dins el marc d'escriptori.
   Al mòbil duplica la barra real del sistema i roba 44px d'alçada útil,
   que és justament la que hi falta. Va després de la regla base a
   propòsit: una media query no suma especificitat. */
@media (max-width: 429px) {
  .statusbar { display: none; }
}

.appbar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--dim-5);
  padding: var(--dim-6) var(--dim-6);
  background: var(--bg-neutral);
  border-bottom: 1px solid var(--border-neutral);
}
.appbar h1 {
  font-size: var(--fs-heading-m); line-height: var(--lh-heading-m);
  font-weight: var(--fw-semibold); color: var(--text-title);
  flex: 1; text-align: center;
}
.appbar .back, .appbar .saltar { width: 24px; height: 24px; flex: 0 0 24px; }

/* Salt de pantalla, només per moderar sessions. Invisible a propòsit:
   ocupa la mateixa caixa que l'espaiador que substitueix, així que el
   logo segueix centrat, i queda fora del teclat i dels lectors de
   pantalla perquè no és una funcionalitat del producte.
   Veure `saltar()` a flow.js. */
.saltar {
  opacity: 0; border: 0; background: none; padding: 0;
  cursor: default;
}
/* A les dues pantalles que no tenen barra —l'entrada i la confirmació,
   on la imatge fa de capçalera— va flotant al mateix racó de dalt a la
   dreta, perquè el gest sigui sempre el mateix. */
.saltar-flotant {
  position: absolute; top: 0; right: 0;
  width: 56px; height: 56px; z-index: 5;
}

/* Capçalera de marca: el logo substitueix el títol als nivells
   superiors de navegació; la navegació profunda manté el títol.
   El lockup horitzontal s'exporta dins d'un artboard quadrat de 112×112
   del qual només n'ocupa una franja, així que el <use> porta el viewBox
   retallat al contingut real (4 35 104 40, ràtio 2,6:1). */
.appbar-brand .brand {
  height: 38px; width: 99px; flex: 0 0 auto;
  display: block; margin: 0 auto;
}
.appbar .back {
  border: 0; background: none; cursor: pointer; color: var(--icon-neutral);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}

.scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pad { padding: var(--dim-11) var(--dim-6) var(--dim-9); }

/* ---------- Entrada: hero + full ----------
   Mides del model (node 3290:16308): franja de 176px i el full que hi
   puja 16px per sobre. La foto fa de capçalera i per això aquí no hi
   ha appbar; el lockup quadrat va centrat a sobre. */
.hero { position: relative; height: 176px; flex: 0 0 auto; }
.hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-brand {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  /* El lockup porta els seus propis colors dins de l'SVG, així que
     `color` no l'afecta: sobre la foto es passa a blanc amb el filtre. */
  filter: brightness(0) invert(1) drop-shadow(0 1px 8px rgba(31,41,55,.5));
}
.hoja {
  position: relative;
  margin-top: -16px;
  border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
  background: var(--bg-neutral);
  min-height: 100%;
}

/* ---------- Tipografia ---------- */
h2.section {
  font-size: var(--fs-m); line-height: var(--lh-m);
  font-weight: var(--fw-semibold); color: var(--text-title);
  margin-bottom: var(--dim-4);
  text-wrap: balance;
}
/* Sense límit d'amplada: a 390px la columna ja és prou estreta i
   34ch només afegia un segon marge dret que no es veia com a decisió,
   sinó com una ratlla trencada a mitges. */
p.intro {
  font-size: var(--fs-xs); line-height: 20px;
  color: var(--text-label); margin-bottom: var(--dim-11);
}
.label {
  font-size: var(--fs-2xs); line-height: var(--lh-2xs);
  color: var(--text-label);
}

/* ---------- Targeta de context de la reserva ----------
   Mateixa estructura que la targeta d'hotel de "Mis comidas". */
/* Marge de 12 i no de 16: el que sobrava era l'aire dels costats, no
   la foto. */
/* ---------- Targeta d'hotel (Figma 3465:23139) ----------
   La mateixa a totes les pantalles que la porten. Tres línies i cap
   d'elles repeteix el que diu una altra: QUIN hotel, QUINS dies, i
   QUANT dura l'estada. */
.reserva-card {
  display: flex; align-items: center; gap: var(--dim-5);
  background: var(--bg-neutral);
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius-2xl);
  padding: var(--dim-4) var(--dim-5);
  margin-bottom: var(--dim-9);
}
.reserva-card .thumb {
  width: var(--dim-19); height: var(--dim-19);   /* quadrada, 64x64 */
  /* Mateix radi que la targeta que l'envolta: a 8px la foto es veia
     més quadrada que la caixa i desquadrava la cantonada. */
  border-radius: var(--radius-2xl);
  flex: 0 0 auto;
  object-fit: cover;
  display: block;
  background: var(--bg-surface);
}
.reserva-card .txt {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--dim-1); min-width: 0;
}
.reserva-card .nom {
  font-size: var(--fs-s); line-height: var(--lh-s);
  font-weight: var(--fw-semibold); color: var(--text-title);
}
.reserva-card .meta {
  font-size: var(--fs-2xs); line-height: var(--lh-2xs);
  font-weight: var(--fw-medium); color: var(--text-label);
}
/* La durada va en insígnia i no en text corregut: és el resum de
   l'estada, i al costat de les dates en text pla es llegia com una
   quarta data. En `accent`, que en aquesta app és el color de la
   informació, no de l'acció ni de l'estat. */
.reserva-card .estancia {
  display: inline-flex; align-items: center;
  min-height: 24px;
  padding: var(--dim-0) var(--dim-2);
  border-radius: var(--radius-lg);
  background: var(--bg-accent-subtle);
  font-size: var(--fs-2xs); line-height: var(--lh-2xs);
  font-weight: var(--fw-semibold); color: var(--accent);
}
/* La targeta té dues línies: el nom del hotel i les dates amb quanta
   gent. El règim hi era i no servia per a res aquí — no es fa res
   amb ell durant el check-in. */

/* ---------- Botons ---------- */
.btn {
  font-family: var(--font-family);
  font-size: var(--fs-s); line-height: var(--lh-s);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-full);
  padding: var(--dim-4) var(--dim-8);
  border: 1px solid transparent;
  cursor: pointer; transition: filter .15s, opacity .15s;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:not(:disabled):active { filter: brightness(.94); }
.btn-primary { background: var(--brand-primary); color: var(--text-inverse); }
.btn-outline { background: transparent; color: var(--brand-primary); border-color: var(--border-primary); }
.btn-ghost   { background: transparent; color: var(--text-label); border-color: var(--border-neutral); }
.btn-block {
  display: block; width: 100%;
  padding: var(--dim-5) var(--dim-8);
  font-size: var(--fs-m); line-height: var(--lh-m);
  min-height: 48px;
}
.btn-sm      { padding: var(--dim-2) var(--dim-5); font-size: var(--fs-xs); }

/* ---------- Barra d'accions fixa al peu ---------- */
.footer-bar {
  flex: 0 0 auto;
  padding: var(--dim-6) var(--dim-6) var(--dim-8);
  background: var(--bg-neutral);
  border-top: 1px solid var(--border-neutral);
  z-index: 1;
}
.footer-bar .hint {
  font-size: var(--fs-2xs); color: var(--text-label);
  text-align: center; margin-top: var(--dim-2);
}

/* ---------- Camps de formulari ---------- */
.field { margin-bottom: var(--dim-9); }
.field > label {
  display: block; margin-bottom: var(--dim-2);
  font-size: var(--fs-2xs); line-height: var(--lh-2xs);
  font-weight: var(--fw-semibold); color: var(--text-body);
}
/* No hi ha marca d'obligatori: aquí gairebé tot ho és, i set
   asteriscs seguits no distingeixen res. Es marca l'excepció.

   Marca d'opcional: ha de llegir-se com a informació secundària,
   no com un segon rètol que competeix amb el nom del camp. */
.field .opt {
  font-weight: var(--fw-medium); color: var(--text-label);
  text-transform: none;
}
/* Les matrícules s'escriuen en majúscules; que no depengui del teclat. */
.field input.matricula { text-transform: uppercase; }
.field input.matricula::placeholder { text-transform: none; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-family);
  font-size: var(--fs-s); line-height: var(--lh-s);
  font-weight: var(--fw-medium); color: var(--text-title);
  padding: var(--dim-6) var(--dim-5); background: var(--bg-neutral);
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius-lg);
}
.field input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
  min-height: 52px;          /* iOS no li dona l'alçada del padding sol */
  display: block;
}
/* El botó natiu del calendari, alineat a la dreta com la fletxa dels selects */
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.field input[type="date"]::-webkit-calendar-picker-indicator { margin-left: auto; }

/* ---------- Estat d'error ----------
   Surt en prémer Guardar amb la fitxa a mitges, i marxa tan bon punt
   el camp s'omple. La vora sola no n'hi ha prou: el missatge diu QUÈ
   passa, i és el que es llegeix si la vora no es distingeix bé. */
.campo-error input,
.campo-error select,
.campo-error textarea,
.campo-error .sign-pad {
  border-color: var(--status-error);
  background: var(--bg-error);
}
.campo-error > label { color: var(--text-error); }
.campo-error .error-msg,
.error-msg {
  display: flex; align-items: flex-start; gap: var(--dim-2);
  margin-top: var(--dim-2);
  font-size: var(--fs-2xs); line-height: var(--lh-2xs);
  color: var(--text-error);
}
/* La clàusula no és un .field sinó una fila flex; el seu missatge va
   a fora (veure marcarErrores) perquè dins hi entraria com a columna. */
/* ---------- Caselles de consentiment ----------
   ⚠️ Aquestes regles s'havien PERDUT: vivien enmig del bloc del
   pagament i van caure quan aquell es va reescriure. El marcatge era
   correcte, així que no petava res — només es veia malament.

   Dues caselles: la preferència comercial i la clàusula de dades.
   Totes dues pengen del correu; qui no en respon cap no les veu. */
.check-legal {
  display: flex; align-items: flex-start; gap: var(--dim-5);
  /* Tanquen la fitxa, sota la signatura. Separades amb espai i no amb
     cap ratlla: les targetes de sobre ja tenen vora pròpia. */
  margin-top: var(--dim-6);
  margin-bottom: var(--dim-5);
  /* 11px, un pas per sota de l'escala. És lletra petita legal i ha de
     llegir-se com a tal: als 12px de la resta competia amb el contingut
     del formulari, que és el que s'ha d'omplir. L'excepció és
     deliberada i no s'ha d'estendre a res més. */
  font-size: 11px; line-height: 15px;
  font-weight: var(--fw-medium); color: var(--text-label);
  cursor: pointer;
}
/* La primera del parell obre l'espai; la segona el tanca. */
.check-legal:first-of-type { margin-top: var(--dim-9); }
.check-legal input {
  width: 18px; height: 18px; flex: 0 0 18px;
  margin: 0; accent-color: var(--brand-primary);
}
/* Subratllat i no només en color: "sembla un enllaç" ha de ser una
   propietat de la forma, no del to. */
.check-legal a {
  color: var(--accent); font-weight: var(--fw-semibold);
  text-decoration: underline; text-underline-offset: 2px;
}
.check-legal + .nota { margin-top: var(--dim-5); }

.check-legal.campo-error > input { outline: 2px solid var(--status-error); outline-offset: 1px; }
.check-legal + .error-msg { margin-top: var(--dim-4); }

/* ---------- Informació per capes (model AEPD) ----------
   La primera capa és la taula Responsable / Finalidad / … El paràgraf
   corregut d'abans obligava a llegir-ho tot per trobar una sola cosa;
   així es pot anar directe a "Derechos" o a "Destinatarios", que és
   el que la gent hi busca. */
.legal-capas {
  margin-top: var(--dim-5);
  margin-bottom: var(--dim-6);
  padding: var(--dim-6);
  /* La clàusula viu FORA de les targetes i el fons de la pàgina ja és
     bg-surface: el panell va en blanc amb vora, o no es veuria. */
  background: var(--bg-neutral);
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius-lg);
}
.legal-capas dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(88px, auto) 1fr;
  column-gap: var(--dim-5);
  row-gap: var(--dim-3);
}
.legal-capas dt {
  font-size: var(--fs-2xs); line-height: 16px;
  font-weight: var(--fw-semibold); color: var(--text-title);
}
.legal-capas dd {
  margin: 0;
  font-size: var(--fs-2xs); line-height: 16px;
  color: var(--text-label);
}
.legal-capas dd a { color: var(--accent); font-weight: var(--fw-semibold); }
.legal-maqueta {
  margin: var(--dim-5) 0 0;
  padding-top: var(--dim-4);
  border-top: 1px solid var(--border-neutral);
  font-size: var(--fs-2xs); line-height: 16px;
  color: var(--text-label); font-style: italic;
}

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(242,102,43,.12);
}
.field textarea { resize: vertical; min-height: 76px; }
.field .help,
.sub-grupo-head .help {
  display: flex; gap: var(--dim-2);
  font-size: var(--fs-2xs); line-height: var(--lh-2xs);
  color: var(--text-label); margin-top: var(--dim-2);
}
.field .help .ic-mini { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 1px; }
.field-row { display: flex; gap: var(--dim-5); }
.field-row .field { flex: 1; }

/* Telèfon: prefix + número. El prefix mai s'ha de menjar el
   número, per això té una amplada fixa i l'input és el que cedeix. */
.tel-row { display: flex; gap: var(--dim-3); }
.tel-row .tel-pref { flex: 0 0 108px; width: 108px; }
.tel-row input { flex: 1; min-width: 0; }

/* Casella de "el mateix per a tota la reserva".
   És una targeta i no una casella solta perquè el text és llarg i,
   marcada, canvia dades d'altres persones: ha de ser visible. */
.check-card {
  display: flex; align-items: flex-start; gap: var(--dim-5);
  padding: var(--dim-5) var(--dim-6);
  margin-bottom: var(--dim-5);
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius-lg);
  background: var(--bg-neutral);
  font-size: var(--fs-2xs); line-height: 17px; color: var(--text-body);
  cursor: pointer;
}
.check-card.on { border-color: var(--brand-primary); background: var(--bg-pending); }
.check-card input {
  width: 20px; height: 20px; flex: 0 0 20px; margin: 0;
  accent-color: var(--brand-primary);
}
.check-card strong { font-weight: var(--fw-semibold); color: var(--text-title); }

/* Camp omplert per l'OCR.
   Marcat a propòsit: una de les preguntes del test és si l'usuari
   REVISA el que l'escaneig ha omplert (documento funcional §10 —
   les dades del DNI no sempre estan al dia). */
/* ⚠️ Els camps que omple l'escaneig ja NO es tenyeixen. Portaven fons i
   vora blaus i eren el marcador permanent de "això ho ha escrit el
   document, revisa-ho" —el toast se'n va, els camps es quedaven—. Tret
   a petició: set camps blaus seguits pesaven més que els que havies
   escrit tu. El que queda dient-ho és el títol del bloc, que passa a
   "Revisa tus datos", i el toast en acabar l'escaneig.
   La classe es manté al marcatge: recuperar-ho és tornar a omplir
   aquesta regla. */
.field.ocr-filled { }

/* ---------- Blocs del registre ---------- */
.bloc {
  background: var(--bg-neutral);
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius-2xl);
  padding: var(--dim-8);
  margin-bottom: var(--dim-6);
}
.bloc.locked { opacity: .5; pointer-events: none; }
.bloc-head {
  display: flex; align-items: center; gap: var(--dim-5);
  margin-bottom: var(--dim-8);
}
/* El número del pas no canvia mai: és una ETIQUETA, no un estat.
   Encès mentre l'omples i verd en acabar, la fitxa tenia tres senyals
   d'estat competint —el número, el bloc i el botó— i el número
   deixava de servir per dir per on vas. Sempre igual: `text.accentHighlight`
   sobre blanc, amb vora `border.neutral`. */
.bloc-num {
  width: var(--dim-9); height: var(--dim-9); flex: 0 0 auto;
  border-radius: var(--radius-full);
  background: var(--bg-neutral); color: var(--accent);
  border: 1px solid var(--border-neutral);
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  display: flex; align-items: center; justify-content: center;
}
.bloc-title {
  font-size: var(--fs-s); line-height: var(--lh-s);
  font-weight: var(--fw-semibold); color: var(--text-title);
}
.bloc-sub { font-size: var(--fs-2xs); color: var(--text-label); }

/* ---------- Zona d'escaneig ----------
   A l'AS-IS "Capturar documento" és una caixa idèntica a la resta
   de camps, entre "Tipo de documento" i "Número de documento".
   Aquí és una zona pròpia i diferenciada: és el canvi que es prova. */
/* Zona d'escaneig (Figma 3323:51061). Superfície grisa amb vora sòlida
   i no la caixa de punts taronja d'abans: amb una sola via de captura ja
   no és una zona on triar, és el pas que et proposen. */
.scan-zone {
  border: 1px solid var(--border-form);
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  padding: var(--dim-8) var(--dim-6);
  text-align: center;
  /* Els altres blocs de la fitxa acaben amb un camp, que ja porta
     aquests 24px abans del filet del bloc següent. El mòdul no en
     portava cap i quedava enganxat a la ratlla, com si la ratlla fos
     la seva vora inferior. Amb els mateixos 24, tots els blocs acaben
     a la mateixa distància del seu filet. */
  margin-bottom: var(--dim-9);
}
/* La icona va en una pastilla blanca sobre el gris: sense ella es
   perdia contra el fons de la caixa. */
.scan-zone .ico {
  width: var(--dim-13); height: var(--dim-13);
  margin: 0 auto var(--dim-6);
  border-radius: var(--radius-full);
  background: var(--bg-neutral);
  border: 1px solid var(--border-neutral);
  display: flex; align-items: center; justify-content: center;
}
.scan-zone .ic-scan { width: 24px; height: 24px; }
.scan-zone .t {
  font-size: var(--fs-m); line-height: var(--lh-s);
  font-weight: var(--fw-semibold);
  color: var(--text-title); margin-bottom: var(--dim-6);
}
.scan-zone .d {
  font-size: var(--fs-xs); line-height: var(--lh-xs);
  font-weight: var(--fw-medium);
  color: var(--text-label); margin-bottom: var(--dim-6);
}
/* Un sol botó, que ocupa tot l'ample. El que hi ha darrere és la
   càmera a pantalla completa, i és allà on es tria com capturar. */
.scan-acciones { display: flex; flex-direction: column; gap: var(--dim-5); }
.scan-acciones .btn {
  display: flex; align-items: center; justify-content: center; gap: var(--dim-3);
}
.scan-acciones .btn .ic { width: 20px; height: 20px; flex: 0 0 20px; }
.scan-acciones .btn .ic { width: 20px; height: 20px; flex: 0 0 20px; }
/* Què passa amb la foto. Va sota el botó i en petit: és una garantia,
   no una instrucció — es llegeix si et fa dubtar, no abans. */
.scan-nota {
  margin-top: var(--dim-6);
  font-size: var(--fs-2xs); line-height: var(--lh-2xs);
  font-weight: var(--fw-medium); color: var(--text-label);
}

.scan-zone.scanning { border-style: solid; }
/* Confirmat: la mateixa caixa, en verd. La mida no canvia, així que el
   bloc no es desinfla en acabar d'escanejar. */
.scan-zone.hecho {
  border-color: var(--status-success);
  background: var(--bg-success);
}
/* Confirmat, la icona ÉS el cercle: `ui_check-circle-filled` ve amb el
   disc ple de la llibreria i el check retallat a dins. Deixar-la dins de
   la pastilla blanca donava un cercle dins d'un altre cercle, amb un
   anell blanc entremig. La pastilla desapareix i el disc verd ocupa tot
   el contenidor; el check es veu del color del panell, que és el que fa
   que es llegeixi blanc. */
.scan-zone.hecho .ico {
  background: none;
  border: 0;
}
.scan-zone.hecho .ic-scan {
  width: var(--dim-13); height: var(--dim-13);
  color: var(--status-success);
}
/* El botó viu sobre el verd del panell: fons blanc perquè es llegeixi
   com un control i no com una part més del fons. */
.scan-zone.hecho .btn-ghost {
  background: var(--bg-neutral);
  border-color: var(--border-neutral);
}
.scan-zone.hecho .d { font-variant-numeric: tabular-nums; margin-bottom: var(--dim-6); }
/* Aire a sota: sense ell l'enllaç queda tocant la vora del bloc. */
/* `.scan-manual` i `.link-manual` s'han tret amb l'entrada manual i la
   galeria: amb una sola via de captura no hi ha res a enllaçar. Els
   camps segueixen sent editables, així que escriure a mà no s'ha
   perdut — ha deixat de ser una branca que calia triar. */
.spinner {
  width: var(--dim-9); height: var(--dim-9); margin: 0 auto var(--dim-5);
  border: 3px solid #fed7aa; border-top-color: var(--brand-primary);
  border-radius: var(--radius-full); animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Signatura ---------- */
.sign-pad {
  height: 116px; background: var(--bg-surface);
  border: 1px dashed var(--border-neutral);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-label); font-size: var(--fs-2xs);
  cursor: pointer; margin-bottom: var(--dim-3);
}
.sign-pad.signed {
  background: var(--bg-success); border-style: solid;
  border-color: #bbf7d0; color: var(--status-success);
  font-family: 'Snell Roundhand', 'Brush Script MT', cursive; font-size: 26px;
}

/* ---------- Insígnies ---------- */
/* ContextBadge de SkyLoop (node 9583:61400 del Figma del sistema, i
   `components/atoms/Badge` al paquet): `padding: 2px 6px` i radi de
   4px — no és una píndola, el `rounded` del component és
   `borderRadius.rounded`, que val 4.

   La lletra és `text.semibold.2xs` (12/16) i no la `xs` (13/18) del
   component: a la fila d'un hòspede el badge no ha de competir amb el
   nom. Va la parella sencera del sistema, no només la mida. */
.badge {
  display: inline-flex; align-items: center; gap: var(--dim-1);
  font-size: var(--fs-2xs); line-height: var(--lh-2xs);
  font-weight: var(--fw-semibold);
  padding: var(--dim-0) var(--dim-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.badge-done    { background: var(--bg-success); color: var(--status-success); }
.badge-pending { background: var(--bg-pending); color: var(--brand-primary); }
/* L'estat i el chevron són una parella, no dos elements solts al final
   de la fila: van junts, amb menys aire entre ells que amb la resta.
   A part de llegir-se millor, els 8px que estalvia són els que li
   faltaven al nom per no acabar en punts suspensius. */
.fin { display: flex; align-items: center; gap: var(--dim-1); flex: 0 0 auto; }

/* ---------- Progrés ---------- */
/* Fix sota la barra de navegació, fora del scroll: la resposta a
   "quant em queda" ha de ser-hi tota l'estona, no només quan has
   baixat prou. En fons blanc, com la capçalera de sobre: així les
   dues peces es llegeixen com una sola franja de chrome. */
.progress {
  flex: 0 0 auto;
  padding: var(--dim-5) var(--dim-6);
  background: var(--bg-neutral);
  border-bottom: 1px solid var(--border-neutral);
}
/* Capçalera del progrés: QUÈ es compta a l'esquerra i QUANT en portes
   a la dreta, tots dos a 13px semibold i distingits pel color, no per
   la mida (Figma 3339:10788). El recompte estava previst al CSS des del
   principi i no s'havia arribat a pintar mai: la barra deia la
   proporció però no el número, que és el que es recorda. */
.progress-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--dim-5);
  margin-bottom: var(--dim-3);
}
.progress-head .t,
.progress-head .n {
  font-size: var(--fs-xs); line-height: var(--lh-xs);
  font-weight: var(--fw-semibold);
}
.progress-head .t { color: var(--text-title); }
.progress-head .n { color: var(--text-label); white-space: nowrap; }

/* Una barra contínua de 2px, no punts.
   Abans eren N segments separats, un per persona. El disseny de Figma
   els substitueix per una barra sencera i posa el "1 de 4" a la
   capçalera: la granularitat per persona no es perd —amb quatre, la
   barra avança de quart en quart— i el número passa a dir-la amb
   paraules, que és més exacte que comptar punts.

   La pista va en `progressBar.bar.inactive` (gray.400) i no en el gris
   de les vores: a 2px, `--border-neutral` gairebé no es veu.

   Una sola tira, sense partir per habitació: el progrés respon "quantes
   persones em queden", i partit en dos semblaven dues barres a mitges.
   De quina habitació és cadascú ja ho diu la llista. */
.progress-bar {
  height: 2px;
  background: var(--progressbar-bar-inactive);
  overflow: hidden;
}
.progress-bar .fill {
  display: block; height: 100%; width: 0;
  background: var(--progressbar-bar-active);
  transition: width .3s cubic-bezier(.32,.72,0,1);
}
/* El moviment respon a una acció —acabes de desar una fitxa— i és el
   que fa veure que ha comptat. Sense acció no s'anima res. */
@media (prefers-reduced-motion: reduce) {
  .progress-bar .fill { transition: none; }
}

/* ---------- Grup d'habitació ----------
   Encapçala les persones que dormen a la mateixa habitació. No és
   una targeta: si ho fos, competiria amb les files de persona, que
   són el que s'ha de poder tocar. És un rètol amb un recompte. */
/* El buit entre grups és el que fa que la capçalera de l'habitació
   següent s'entengui com un començament i no com una fila més. */
.hab-grupo { margin-bottom: var(--dim-11); }
.hab-grupo:last-of-type { margin-bottom: 0; }
/* Les peticions tanquen el grup de l'habitació. Separades de l'última
   persona, o semblen una fila més de la llista. */
.hab-grupo .bloc-peticiones { margin: var(--dim-6) 0 0; }
/* La capçalera ha de pesar MÉS que les targetes que encapçala. Abans no:
   el nom anava a 13px contra els 14 dels noms de les persones, i el que
   la sostenia era un filet. Una capçalera més fluixa que el seu contingut
   es llegeix com un peu de foto, no com el començament d'un grup. */
.hab-head {
  display: flex; align-items: center; gap: var(--dim-5);
  padding: 0 var(--dim-2);
  margin-bottom: var(--dim-6);
}
/* ⚠️ Aquí hi va haver una barra curta de color sota el nom, pensada com a
   "marca de començament de grup". Fora: no volia dir res. Una marca que
   qui la mira no pot descodificar és decoració, i el filet que va
   substituir almenys es llegia com "la capçalera acaba aquí".

   El que separa un grup del següent és l'espai de `.hab-grupo`, i el que
   fa que la capçalera es llegeixi com a capçalera són els 16px i el xip.
   Una pantalla plena de vores de targeta no necessita cap ratlla més. */
/* Nom i tipus a la MATEIXA línia, alineats per la base. En dues línies,
   el tipus feia de subtítol i competia amb els subtítols de les persones
   ("Adulto · Titular"), que sí que són subtítols. */
.hab-head .hab-nm {
  min-width: 0;
  display: flex; align-items: baseline; gap: var(--dim-4);
}
.hab-head .hab-t {
  font-size: var(--fs-m); line-height: var(--lh-m);
  font-weight: var(--fw-semibold); color: var(--text-title);
}
/* El tipus, com a xip: és una qualitat de l'habitació —i la que et fa
   reconèixer quina és, perquè és el que van comprar—, no el seu nom. */
.hab-head .hab-tipo {
  padding: 2px var(--dim-3);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--border-neutral);
  font-size: var(--fs-2xs); line-height: var(--lh-2xs);
  font-weight: var(--fw-medium); color: var(--text-label);
  white-space: nowrap;
}
/* ⚠️ El recompte per habitació ("2 de 3" / "✓ Completada") s'ha tret:
   la barra de dalt ja diu quanta gent queda i cada fila porta la seva
   insígnia. Les regles se'n van amb ell — `.hab-n` i `.hab-head.done`
   ja no tenen marcatge que les faci servir. */

/* ---------- Nota informativa ----------
   Text del producte que matisa una regla: per què a un menor se li
   demanen menys camps, o que un cop enviat ja no es pot editar.
   No és una anotació sobre el prototip. */
/* ---------- Resum de pagament ---------- */
.pay-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--dim-5) 0; border-bottom: 1px solid var(--border-neutral);
  font-size: var(--fs-s);
}
.pay-row:last-of-type { border-bottom: 0; }
.pay-row .c { color: var(--text-body); }
.pay-row .c small { display: block; font-size: var(--fs-2xs); color: var(--text-label); }
.pay-row .v { font-weight: var(--fw-semibold); color: var(--text-title); }
.center { text-align: center; }
.center p.intro { margin-left: auto; margin-right: auto; }
.hidden { display: none !important; }

/* ---------- Llista de requisits (step 2) ----------
   Icones de la llibreria SkyLoop (`cn_iconname`), en cercles amb un
   tint suau. Cada tint apunta al pas del flux que anticipa: el
   document és informació (accent), el pagament és l'acció de marca
   (taronja), l'adult registrat és la condició que s'ha de complir
   (verd). No és decoració: és el mateix codi de color que es tornarà
   a trobar més endavant.

   ⚠️ La llibreria NO té icona de document ni de DNI. `sp_creditcard`
   s'hi acosta perquè un DNI és una targeta, però convindria afegir-ne
   una de pròpia. */
/* Una SOLA targeta amb les tres files a dins, no tres targetes soltes
   (Figma 3436:5882). Són tres coses de la mateixa llista —què has de
   tenir a mà— i separades en tres caixes es llegien com tres avisos
   independents. Sense filets entremig: l'espaiat ja les separa. */
.checklist {
  list-style: none;
  background: var(--bg-neutral);
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius-2xl);
  /* Aire propi a dalt i a baix, a més del que ja porta cada fila: la
     primera i l'última quedaven enganxades a la vora i la targeta es
     veia plena fins dalt. Entre files no cal — allà ja hi ha els 12px
     de dues files seguides.

     El Figma en posa 4; a la pantalla no es notaven, així que 8. */
  padding: var(--dim-3) 0;
}

.check-item {
  /* Alineades a DALT: amb tres línies de descripció, centrada la icona
     quedava surant a mitja alçada del paràgraf i lluny del títol que
     encapçala. */
  display: flex; align-items: flex-start; gap: var(--dim-6);
  padding: var(--dim-5) var(--dim-6);
}
.check-ico {
  width: var(--dim-13); height: var(--dim-13); flex: 0 0 var(--dim-13);
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  /* Un sol tint per a les tres. Abans cada una portava el color del pas
     que anticipava (document → accent, pagament → marca, adult → verd);
     el Figma les unifica, i té sentit: aquí encara no ha passat res, i
     tres colors deien que hi havia tres tipus de cosa quan totes tres
     són el mateix tipus — una cosa que has de portar. */
  background: var(--bg-accent-subtle); color: var(--accent);
}
.check-ico svg { width: 24px; height: 24px; fill: currentColor; }

.check-txt { flex: 1; min-width: 0; }
.check-txt .t {
  display: block;
  font-size: var(--fs-xs); line-height: var(--lh-xs);
  font-weight: var(--fw-semibold); color: var(--text-body);
}
.check-txt .d {
  display: block; margin-top: var(--dim-0);
  font-size: var(--fs-2xs); line-height: var(--lh-2xs);
  font-weight: var(--fw-medium); color: var(--text-label);
}

/* Títol + subtítol enganxats, com un sol bloc (Figma 3436:5878).
   Només a la pantalla que ha adaptat el disseny; la resta segueixen
   amb la separació antiga. */
.titulo-bloc h2.section { margin-bottom: var(--dim-1); }
.titulo-bloc p.intro {
  line-height: var(--lh-xs);
  margin-bottom: var(--dim-6);
}

/* Avís informatiu. Blau i sense vora, com un toast: en gris i amb
   vora es llegia com una targeta més de la llista de sobre, i no ho
   és — no és una cosa que hagis de portar, és una condició. */
.nota-tiempo {
  display: flex; align-items: center; gap: var(--dim-5);
  margin-bottom: var(--dim-6);
  padding: var(--dim-6);
  background: var(--bg-info);
  border-radius: var(--radius-lg);
  font-size: var(--fs-2xs); line-height: 17px; color: var(--status-info);
}
.nota-tiempo .nt-ico {
  width: 20px; height: 20px; flex: 0 0 20px;
  fill: currentColor; color: var(--status-info);
}
.nota-tiempo strong { color: var(--status-info); font-weight: var(--fw-semibold); }

/* Quan l'avís tanca la pantalla en comptes d'obrir-la, la separació
   ha d'anar a dalt: sota no hi ha res a empènyer. */
.nota-tiempo.al-final { margin-top: var(--dim-9); margin-bottom: 0; }

/* ---------- Icones de la llibreria SkyLoop ----------
   Els SVG originals no porten `fill`, així que hereten el color del
   context. `fill: currentColor` és el que ho fa efectiu. */
.ic, .ic-thumb, .ic-chip, .ic-scan, .ic-conf {
  fill: currentColor;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: middle;
}
.ic       { width: 20px; height: 20px; }
.ic-thumb { width: 28px; height: 28px; color: var(--text-inverse); }
.ic-chip  { width: 14px; height: 14px; margin-right: 2px; }
.ic-scan  { width: 32px; height: 32px; color: var(--brand-primary); }
.ic-conf  { width: 48px; height: 48px; color: var(--status-success); }

.conf-ok { margin-bottom: var(--dim-5); line-height: 0; }

/* Ajustos per context */
.appbar .back .ic          { width: 22px; height: 22px; }
/* Sempre `icon.neutral`, també un cop registrat: la icona diu QUI és,
   no en quin estat està. L'estat el diuen la barra de l'esquerra i la
   insígnia; tenyir-la de verd la convertia en un tercer indicador
   d'estat i deixava d'identificar la persona. */
.huesped-row .ava .ic,
.acc-head .ava .ic         { width: 22px; height: 22px; color: var(--icon-neutral); }
/* Igual que el caret de la variant A. Eren 18 aquí i 16 allà: dues
   mides per a la mateixa pista de "això s'obre" és soroll al test,
   i els 2px són els que li faltaven al nom en aquesta variant. */
.huesped-row .chev .ic     { width: 16px; height: 16px; }
.badge .ic                 { width: 14px; height: 14px; }
.bloc-num .ic              { width: 15px; height: 15px; }
.resumen-pendientes > .ic  { width: 18px; height: 18px; color: var(--brand-primary); }
.resumen-pendientes.ok > .ic { color: var(--status-success); }
.acc-head .caret .ic       { width: 16px; height: 16px; }

/* ══════════ Pagament (Figma 3443:12481) ══════════ */

/* Un títol de secció en `text/body` i no en `text/title`: aquesta
   pantalla no obre res, resumeix. */
.section-body { color: var(--text-body); }

/* El desglossament, en una targeta amb vora taronja de 2px. És l'únic
   objecte de la pantalla i el que has de comprovar abans de pagar; la
   vora de marca és el que el separa del fons sense necessitar ombra. */
.pago-card {
  background: var(--bg-neutral);
  border: 2px solid var(--brand-primary);
  border-radius: var(--radius-xl);
  padding: var(--dim-6);
}
.pc-head {
  font-size: var(--fs-s); line-height: var(--lh-s);
  font-weight: var(--fw-semibold); color: var(--text-title);
  padding-bottom: var(--dim-6);
  margin-bottom: var(--dim-6);
  border-bottom: 1px solid var(--border-neutral);
}
/* Concepte a l'esquerra, import a la dreta i en `accent`, que és el
   color de `text/price` al sistema. */
.pc-linea {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--dim-5);
}
.pc-k {
  font-size: var(--fs-s); line-height: var(--lh-s);
  font-weight: var(--fw-semibold); color: var(--text-title);
}
.pc-v {
  font-size: var(--fs-m); line-height: var(--lh-m);
  font-weight: var(--fw-semibold); color: var(--accent);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pc-tasas {
  margin-top: var(--dim-8);
  display: flex; flex-direction: column; gap: var(--dim-6);
}
.pc-grup { display: flex; flex-direction: column; gap: var(--dim-5); }
/* L'habitació encapçala els seus hostes. En `text/title` i no en gris:
   és qui mana sobre les línies de sota, no una anotació. */
.pc-hab {
  font-size: var(--fs-2xs); line-height: var(--lh-2xs);
  font-weight: var(--fw-semibold); color: var(--text-title);
  text-transform: uppercase;
}
/* Cada persona i el que paga. Sense "2 noches" a sota: les nits són les
   mateixes per a tothom i ja les diu la reserva. */
.pc-persona {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--dim-5);
  font-size: var(--fs-xs); line-height: var(--lh-xs);
  font-weight: var(--fw-medium); color: var(--text-body);
}
.pc-persona span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-nota {
  font-size: var(--fs-2xs); line-height: var(--lh-2xs);
  font-weight: var(--fw-medium); color: var(--text-label);
}

/* El total, fora de la targeta: no és una línia més del desglossament,
   és el que es cobra. */
.pago-total {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--dim-5);
  margin-top: var(--dim-11); padding: 0 var(--dim-1);
}
.pt-txt { display: flex; flex-direction: column; }
.pt-k {
  font-size: var(--fs-heading-m); line-height: 28px;
  font-weight: var(--fw-semibold); color: var(--text-title);
}
.pt-sub {
  font-size: var(--fs-2xs); line-height: var(--lh-2xs);
  font-weight: var(--fw-medium); color: var(--text-label);
}
.pt-v {
  font-size: var(--fs-heading-m); line-height: 28px;
  font-weight: var(--fw-semibold); color: var(--accent);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---- Tira de mètodes de pagament ----
   Va sota el botó, dins de la barra fixa: amb què podràs pagar i qui ho
   processa és el que es mira just abans de prémer. */
/* El botó, dins del document. L'aire que abans li donava la barra fixa
   ara l'ha de posar ell. */
.btn-pago { margin-top: var(--dim-11); }

/* Va al final del scroll i no fixa: es llegeix quan hi arribes. El fons
   blanc i el filet de dalt la separen del contingut i fan que es
   llegeixi com el tancament de la pantalla.

   Amb el `margin-top: auto` s'enganxa al fons quan el contingut no
   omple la pantalla: sense això quedava surant a mitja alçada amb el
   gris del fons a sota, com si li faltés alguna cosa a continuació.
   Només al pagament, que és qui la té. */
[data-screen="pago"] .scroll { display: flex; flex-direction: column; }
[data-screen="pago"] .pay-strip { margin-top: auto; }

.pay-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--dim-5);
  padding: var(--dim-5) var(--dim-6);
  background: var(--bg-neutral);
  border-top: 1px solid var(--border-neutral);
}
.ps-logos { display: flex; align-items: center; gap: var(--dim-2); flex-wrap: wrap; }
/* Marques reals exportades del Figma. Cada una porta el seu color; el
   marc blanc el posa el CSS perquè totes facin la mateixa caixa. */
.pm {
  width: 35px; height: 24px; flex: 0 0 auto; display: block;
  background: var(--bg-neutral);
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius-sm);
  padding: 5px;
  box-sizing: border-box;
}
.ps-seguro {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 1px; flex: 0 0 auto;
}
.ps-k {
  display: flex; align-items: center; gap: 3px;
  font-size: 7px; line-height: 1.3; letter-spacing: .1px;
  font-weight: var(--fw-medium); color: var(--text-label);
  white-space: nowrap;
}
.ps-lock { width: 8px; height: 10px; flex: 0 0 8px; }
.ps-wl   { width: 76px; height: 8px; display: block; }

/* ══════════ Confirmació ══════════ */

/* ---------- Qué pasa ahora ----------
   Una línia de temps, no una llista de targetes: el que la fa llegible
   és l'ORDRE, i el fil vertical entre icones és qui ho diu. L'hora va
   sobre el títol perquè és per on s'hi entra ("¿a qué hora puedo…?"). */
/* ---------- Qué pasa ahora ----------
   Va DINS de la targeta del resum, sota un filet. El fil vertical és
   el que fa que els tres passos es llegeixin com una seqüència i no
   com tres blocs solts; discontinu i en `border/accentSubtle`, com al
   Figma: marca continuïtat sense pesar com una vora. */
.pasos {
  list-style: none; margin: 0;
  padding: var(--dim-8) var(--dim-5);
  border-top: 1px solid var(--border-neutral);
}
.paso {
  display: flex; gap: var(--dim-5);
  padding-bottom: var(--dim-9);
  position: relative;
}
/* Centrat als 24px del cercle → left: 11px. */
.paso::before {
  content: ''; position: absolute;
  left: 11px; top: 26px; bottom: 2px; width: 0;
  border-left: 2px dashed var(--bg-accent-subtle);
}
.paso:last-child { padding-bottom: 0; }
.paso:last-child::before { display: none; }
/* El número: cercle blanc amb vora gruixuda del mateix to que el fil,
   perquè el fil hi entri i en surti sense trencar-se. */
.paso-num {
  width: var(--dim-9); height: var(--dim-9); flex: 0 0 var(--dim-9);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  background: var(--bg-neutral); color: var(--accent);
  border: 2px solid var(--bg-accent-subtle);
  font-size: var(--fs-xs); line-height: var(--lh-xs);
  font-weight: var(--fw-semibold);
  position: relative; z-index: 1;
}
.paso-txt { display: flex; flex-direction: column; gap: var(--dim-3); }
.paso-t {
  font-size: var(--fs-s); line-height: var(--lh-s);
  font-weight: var(--fw-medium); color: var(--accent);
}
.paso-d {
  font-size: var(--fs-s); line-height: var(--lh-s);
  font-weight: var(--fw-medium); color: var(--text-body);
}

/* ---------- L'app ----------
   Tanca la pantalla amb l'única cosa que encara pots fer aquí: el
   check-in ja està fet. Targeta blanca amb les cantonades de dalt
   arrodonides i ombra cap amunt, com si pugés des del peu. */
.app-bloc {
  background: var(--bg-neutral);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  padding: var(--dim-9) var(--dim-6);
  box-shadow: 0 -2px 6px rgba(28,39,49,.08);
}
.app-t {
  font-size: var(--fs-heading-m); line-height: var(--lh-heading-m);
  font-weight: var(--fw-semibold); color: var(--text-title);
  text-wrap: balance;
}
.app-d {
  font-size: var(--fs-s); line-height: var(--lh-s);
  font-weight: var(--fw-medium); color: var(--text-body);
  margin-top: var(--dim-3);
}
.app-lista {
  list-style: none; margin: var(--dim-9) 0;
  display: flex; flex-direction: column; gap: var(--dim-6);
}
.app-item {
  display: flex; align-items: center; gap: var(--dim-5);
  font-size: var(--fs-s); line-height: var(--lh-s);
  font-weight: var(--fw-semibold); color: var(--text-body);
}
.app-ico {
  width: var(--dim-13); height: var(--dim-13); flex: 0 0 var(--dim-13);
  border-radius: var(--radius-full);
  background: var(--bg-neutral);
  box-shadow: 0 2px 3px rgba(28,39,49,.16);
  display: flex; align-items: center; justify-content: center;
  color: var(--status-success);
}
.app-ico .ic { width: 16px; height: 16px; }


/* Capçalera verda amb la vora inferior corbada, com la referència. */
.hero-ok {
  position: relative;
  background: linear-gradient(160deg, #16a34a 0%, #15803d 100%);
  color: var(--bg-neutral);
  padding: var(--dim-13) var(--dim-8) var(--dim-17);
  text-align: center;
  border-radius: 0 0 100% 100% / 0 0 var(--dim-13) var(--dim-13);
  /* ⚠️ Aquí hi havia `margin-bottom: -40px`, per encavalcar la targeta
     del QR sobre la corba. Amb el QR fora, el que hi queia a sobre era
     el títol del resum, damunt del verd. El marge negatiu només té
     sentit si el primer element és una targeta pròpia; ara no ho és. */
}
.hero-ico {
  width: 64px; height: 64px; margin: 0 auto var(--dim-6);
  border-radius: var(--radius-full); background: var(--bg-neutral);
  display: flex; align-items: center; justify-content: center;
}
.hero-ico .ic-conf { width: 34px; height: 34px; color: var(--status-success); }
.hero-ok h2 {
  font-size: 20px; line-height: 28px; font-weight: var(--fw-semibold);
  margin-bottom: var(--dim-1); text-wrap: balance;
}
.hero-ok p {
  font-size: var(--fs-s); line-height: var(--lh-s);
  font-weight: var(--fw-medium);
  opacity: .92; max-width: 32ch; margin: 0 auto;
}
/* Sortir. Cercle blanc sobre el verd, com la icona d'estat. */
.hero-cerrar {
  position: absolute; top: var(--dim-9); right: var(--dim-8);
  width: var(--dim-13); height: var(--dim-13);
  border-radius: var(--radius-full);
  background: var(--bg-neutral); border: 1px solid var(--border-neutral);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-title);
  box-shadow: 0 2px 3px rgba(0,0,0,.16);
}
.hero-cerrar .ic { width: 20px; height: 20px; }
.hero-ok strong { font-weight: var(--fw-semibold); }

/* ---------- QR ----------
   ⚠️ NO S'USA des que el mòdul es va treure de la confirmació. Es manté
   sencer perquè tornar-lo a posar sigui recuperar el marcatge i prou:
   una `.qr-card` amb `assets/qr.png` a dins. Si es decideix que el QR
   no torna, aquest bloc i l'asset se'n van junts.

   El marc no és decoració: és la zona tranquil·la que un lector de QR
   necessita per trobar-ne les vores. Per això el codi no arriba mai a
   la vora de la targeta.

   El fitxer fa 88px i es pinta a 176: exactament el doble, perquè cada
   mòdul del codi ocupi 2px justos. Amb un factor no enter, `pixelated`
   deixa uns mòduls d'1px i altres de 2 i el codi es veu tremolós. I
   sense `pixelated`, el suavitzat el desdibuixa. */
.qr {
  width: 208px; height: 208px; margin: 0 auto var(--dim-6);
  background: var(--bg-neutral); border: 1px solid var(--border-neutral);
  border-radius: var(--radius-2xl);
  display: flex; align-items: center; justify-content: center;
}
.qr-img {
  width: 176px; height: 176px; display: block;
  image-rendering: pixelated;
}
.qr-card {
  background: var(--bg-neutral);
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius-2xl);
  padding: var(--dim-9) var(--dim-6) var(--dim-8);
  text-align: center;
  margin: 0 0 var(--dim-11);
  box-shadow: 0 4px 16px -8px rgba(31,41,55,.18);
}
.qr-t {
  font-size: var(--fs-m); font-weight: var(--fw-semibold);
  color: var(--text-title); margin-bottom: var(--dim-2);
}
.qr-d {
  font-size: var(--fs-2xs); line-height: 17px; color: var(--text-label);
  max-width: 30ch; margin: 0 auto;
}

/* ---------- Resum del check-in ----------
   Una sola targeta amb els blocs separats per filets, calcada de
   l'estructura de la confirmació del funnel d'hotels. Files soltes
   amb ratlla pròpia i una llista a part feien dues seccions on n'hi
   ha una: tot això és el MATEIX rebut. */
/* ---------- Resum del check-in (Figma 3378:10459) ----------
   UNA targeta amb tot el que has reservat i tot el que passarà: hotel,
   habitacions, qui hi dorm i els següents passos. Els imports van fora,
   perquè tanquen el rebut i no són una dada més de la reserva. */
.res-card {
  background: var(--bg-neutral);
  border: 1px solid var(--border-neutral);
  border-radius: 20px;
  overflow: hidden;
}
.res-hotel-bloc { padding: var(--dim-5); }
.res-hotel {
  font-size: var(--fs-m); line-height: var(--lh-m);
  font-weight: var(--fw-semibold); color: var(--text-title);
}
.res-adr {
  font-size: var(--fs-2xs); line-height: var(--lh-2xs);
  font-weight: var(--fw-medium); color: var(--text-body);
  margin-top: var(--dim-1);
}
.res-loc {
  display: flex; align-items: center; gap: var(--dim-2);
  margin-top: var(--dim-5); min-height: 22px;
}
.res-loc-k {
  font-size: var(--fs-2xs); line-height: var(--lh-2xs);
  /* El Figma el posa en Bold, però el prototip només carrega Montserrat
     500 i 600: un 700 aquí seria un negreta sintètic. L'etiqueta i el
     valor ja es distingeixen per mida i pel fons de la insígnia. */
  font-weight: var(--fw-semibold); color: var(--text-title);
}
/* És un botó i no un xip mort: copiar-lo és el que se'n fa. */
.loc-chip {
  display: inline-flex; align-items: center; gap: var(--dim-1);
  padding: var(--dim-0) var(--dim-2);
  border: 0; border-radius: var(--radius-sm);
  background: var(--badge-info-bg);
  font-family: var(--font-family);
  font-size: var(--fs-xs); line-height: var(--lh-xs);
  font-weight: var(--fw-semibold); color: var(--text-body);
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
  cursor: pointer;
}
.loc-chip .ic { width: 16px; height: 16px; }
/* Confirma al mateix botó: qui acaba de prémer aquí està mirant aquí,
   no el peu de la pantalla on viuen els toasts. */
.loc-chip.copiat { background: var(--bg-success); color: var(--status-success); }

/* Capçalera d'habitació. La foto la fa reconeixible d'un cop d'ull. */
.res-hab {
  display: flex; align-items: center; gap: var(--dim-6);
  padding: var(--dim-5);
  border-top: 1px solid var(--border-neutral);
  border-bottom: 1px solid var(--border-neutral);
}
.res-foto {
  width: var(--dim-19); height: var(--dim-19); flex: 0 0 auto;
  border-radius: var(--radius-sm); object-fit: cover; display: block;
  background: var(--bg-surface);
}
.res-hab-txt { min-width: 0; }
.res-hab-nom {
  font-size: var(--fs-s); line-height: var(--lh-s);
  font-weight: var(--fw-semibold); color: var(--text-title);
}
.res-hab-meta {
  font-size: var(--fs-2xs); line-height: var(--lh-2xs);
  font-weight: var(--fw-medium); color: var(--text-label);
  margin-top: var(--dim-2);
}

/* Qui dorm a cada habitació, just sota la seva: el que es comprova a
   recepció és aquest aparellament, no una llista de noms solta. */
.res-gent { list-style: none; margin: 0; padding: var(--dim-1) 0; }
.res-persona {
  display: flex; align-items: center; gap: var(--dim-5);
  padding: var(--dim-3) var(--dim-6);
  font-size: var(--fs-xs); line-height: var(--lh-xs);
  font-weight: var(--fw-medium); color: var(--text-body);
}
.res-persona .ava { width: 20px; height: 20px; }
.res-persona .ava .ic { width: 20px; height: 20px; color: var(--icon-neutral); }
.res-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-ok { width: 16px; height: 16px; flex: 0 0 auto; color: var(--status-success); }

/* ---------- Imports ----------
   Fora de la targeta. Els preus en `accent`, que és el color de
   `text/price` al sistema. */
.res-precios { margin-top: var(--dim-6); padding: 0 var(--dim-1); }
.rp-linea, .rp-total {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--dim-5); padding: var(--dim-2) 0;
}
.rp-total {
  border-top: 1px solid var(--border-neutral);
  margin-top: var(--dim-5); padding-top: var(--dim-6);
}
.rp-txt { display: flex; flex-direction: column; min-width: 0; }
.rp-k {
  font-size: var(--fs-s); line-height: var(--lh-s);
  font-weight: var(--fw-semibold); color: var(--text-title);
}
.rp-sub {
  font-size: var(--fs-2xs); line-height: var(--lh-2xs);
  font-weight: var(--fw-medium); color: var(--text-label);
}
.rp-v {
  font-size: var(--fs-m); line-height: var(--lh-m);
  font-weight: var(--fw-semibold); color: var(--accent);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rp-total .rp-k { font-size: var(--fs-heading-m); line-height: 28px; }
.rp-total .rp-v { font-size: var(--fs-heading-m); line-height: 28px; }

/* ---------- Toast ----------
   Flota per damunt de la pantalla, just sobre la barra d'accions, i
   marxa sol. Va al marc i no al contingut perquè no ha d'empènyer res
   ni desaparèixer amb el scroll. La distància al fons la posa
   mostrarToast(), perquè la barra d'accions no sempre hi és. */
.toast-zone {
  position: absolute; left: 0; right: 0; bottom: 32px;
  z-index: 20; display: flex; justify-content: center;
  pointer-events: none; padding: 0 var(--dim-6);
}
.toast {
  display: flex; align-items: flex-start; gap: var(--dim-5);
  border-radius: var(--radius-2xl);
  padding: var(--dim-6) var(--dim-8);
  font-size: var(--fs-xs); line-height: 18px;
  text-align: left;
  animation: toast-entra .3s cubic-bezier(.2,.8,.3,1);
}
.toast .ic { margin-top: 1px; }

/* Confirmació: alguna cosa ha anat bé i ja està. Cap per línia,
   així que la píndola arrodonida del tot encara funciona. */
.toast-ok {
  background: var(--bg-success); color: var(--status-success);
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-full);
  align-items: center;
  box-shadow: 0 8px 24px -8px rgba(22,163,74,.35);
}
.toast-ok .ic, .toast-ok strong { color: var(--status-success); }

/* Informatiu: explica una cosa i ocupa més d'una línia. Mateix blau
   que .nota-tiempo — són el mateix tipus de missatge i no s'han de
   llegir com dos sistemes diferents. Aquí sí que porta ombra: flota
   per damunt del contingut i s'ha de desenganxar. */
.toast-info {
  background: var(--bg-info); color: var(--status-info);
  box-shadow: 0 8px 24px -8px rgba(55,48,163,.35);
}
.toast-info .ic     { color: var(--status-info); }
.toast-info strong  { color: var(--status-info); font-weight: var(--fw-semibold); }

.toast.fuera { animation: toast-surt .4s ease forwards; }

@keyframes toast-entra { from { opacity: 0; transform: translateY(28px); } }
@keyframes toast-surt  { to   { opacity: 0; transform: translateY(28px); } }
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.fuera { animation: none; }
}

/* ---- Copy que depèn de si la reserva té una habitació o més ----
   L'MVP és d'una sola (bandera MULTIHABITACION a data.js). El text
   que només val amb dues no s'esborra: es marca i s'amaga, i torna
   sol el dia que la bandera s'engegui. `aplicarModoHabitaciones()`
   posa `.multi-hab` al body. */
body:not(.multi-hab) .solo-multi { display: none; }
body.multi-hab .solo-una { display: none; }

/* ---- Subgrup opcional dins d'un bloc ----
   Ara mateix només l'usa el document del menor. Un recuadre pla, sense
   ombra ni número: no és un pas més de la fitxa —aquests els numera
   `.bloc`— sinó un grup de camps que van junts i que es poden deixar
   buits. La marca d'opcional va a la capçalera del grup i UNA sola
   vegada; els camps de dins van nets. */
.sub-grupo {
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius-lg);
  padding: var(--dim-6);
  margin-bottom: var(--dim-9);
  background: var(--bg-surface);
}
.sub-grupo-head { margin-bottom: var(--dim-6); }
.sub-grupo-t {
  display: block;
  font-size: var(--fs-s); line-height: var(--lh-s);
  font-weight: var(--fw-semibold); color: var(--text-title);
}
.sub-grupo-t .opt {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium); color: var(--text-label);
}
.sub-grupo-head .help { margin: var(--dim-2) 0 0; }
/* L'últim camp del grup no ha d'empènyer el marge del recuadre. */
.sub-grupo > .field:last-child { margin-bottom: 0; }

/* ══════════ Càmera a pantalla completa (SIMULADOR) ══════════
   ⚠️ No obre la càmera del dispositiu. El visor és una maqueta i el
   retall del document, un dibuix: serveix per ensenyar què passa quan
   prems "Escanear documento".

   Va dins del marc del telèfon i no al `body`: al prototip el "món" és
   el marc de 390px, i una capa a pantalla completa de debò taparia
   també la pàgina d'escriptori que l'envolta. */
.cam {
  position: absolute; inset: 0; z-index: 30;
  background: #111827;
  display: flex; flex-direction: column;
  animation: cam-entra .22s ease-out;
}
@keyframes cam-entra { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cam { animation: none; } }

.cam-top {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--dim-8) var(--dim-6) 0;
}
/* Sortir. Cercle translúcid: sobre el visor, un botó opac tallaria la
   il·lusió que estàs mirant per la càmera. */
.cam-x {
  width: var(--dim-13); height: var(--dim-13);
  border: 0; border-radius: var(--radius-full);
  background: rgba(255,255,255,.16); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.cam-x .ic { width: 20px; height: 20px; }
/* El rètol de simulació no s'amaga: qui modera el test ha de poder dir
   "això és una maqueta" sense sortir de la pantalla. */
.cam-sim {
  padding: var(--dim-0) var(--dim-4);
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.16);
  font-size: var(--fs-2xs); line-height: var(--lh-2xs);
  font-weight: var(--fw-semibold); color: #fff;
}

/* El visor: ocupa tot el que sobra entre la barra de dalt i la de baix. */
.cam-visor { position: relative; flex: 1 1 auto; }
/* Les quatre cantonades, amb vuit gradients creuats: una sola caixa i
   cap element extra. */
.cam-marc {
  position: absolute; inset: var(--dim-9) var(--dim-8);
  background:
    linear-gradient(#fff 0 0) 0 0 / 28px 3px no-repeat,
    linear-gradient(#fff 0 0) 0 0 / 3px 28px no-repeat,
    linear-gradient(#fff 0 0) 100% 0 / 28px 3px no-repeat,
    linear-gradient(#fff 0 0) 100% 0 / 3px 28px no-repeat,
    linear-gradient(#fff 0 0) 0 100% / 28px 3px no-repeat,
    linear-gradient(#fff 0 0) 0 100% / 3px 28px no-repeat,
    linear-gradient(#fff 0 0) 100% 100% / 28px 3px no-repeat,
    linear-gradient(#fff 0 0) 100% 100% / 3px 28px no-repeat;
}
/* El document insinuat, a proporció d'un DNI real (85,6 × 54 mm). */
.cam-doc {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 74%; aspect-ratio: 85.6 / 54;
  border: 2px dashed rgba(255,255,255,.5);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.05);
}
.cam-ayuda {
  flex: 0 0 auto;
  padding: 0 var(--dim-8) var(--dim-8);
  text-align: center;
  font-size: var(--fs-xs); line-height: var(--lh-xs);
  font-weight: var(--fw-medium); color: rgba(255,255,255,.85);
}

/* La barra d'accions. Tres columnes iguals per mantenir el disparador
   centrat de debò: amb `space-between` el buit de la dreta el desviava
   cap a un costat. */
.cam-bar {
  flex: 0 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: var(--dim-6) var(--dim-6) var(--dim-13);
}
/* El disparador és el que has vingut a fer: gran, blanc i al centre.
   L'anell exterior el separa del fons fosc. */
.cam-disparo {
  width: 68px; height: 68px;
  border: 4px solid rgba(255,255,255,.5);
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: inset 0 0 0 4px #111827;
  cursor: pointer;
}
/* La galeria és la sortida per a qui ja té la foto feta: a l'esquerra,
   i amb TEXT al costat de la icona. Només amb la icona —un "+"— no es
   diria sola, perquè la llibreria no té icona d'imatge. */
.cam-galeria {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: var(--dim-1);
  border: 0; background: none; cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--fs-2xs); line-height: var(--lh-2xs);
  font-weight: var(--fw-semibold); color: #fff;
  justify-self: start;
}
.cam-galeria .ic { width: 26px; height: 26px; }
/* Contrapès invisible: manté el disparador al centre exacte. */
.cam-hueco { display: block; }

/* Amb la càmera oberta, el que hi ha a sota no s'ha de poder tocar
   ni llegir per un lector de pantalla. */
body.cam-abierta .scroll { overflow: hidden; }

/* ---------- TextInput de SkyLoop ----------
   El prototip mostrava l'etiqueta a sobre del camp; el TextInput del
   Design System la porta DINS, flotant a la part superior, amb el valor
   a sota i la vora de 2 px en focus. Aquí s'alinea amb el component real
   (paw-shared-packages · atoms/TextInput): caixa de 56 px, radi rounded-lg,
   etiqueta en accentHighlight quan el camp té valor o focus. */
.field:has(> input:not([type="checkbox"]):not([type="radio"])),
.field:has(> select) {
  position: relative;
}

.field:has(> input:not([type="checkbox"]):not([type="radio"])) > label,
.field:has(> select) > label {
  position: absolute;
  top: 8px;
  left: var(--dim-6);
  z-index: 1;
  margin: 0;
  color: var(--accent);
  font-size: var(--fs-2xs);
  line-height: var(--lh-2xs);
  font-weight: var(--fw-semibold);
  pointer-events: none;
}

.field > input:not([type="checkbox"]):not([type="radio"]),
.field > select {
  min-height: 56px;
  padding: 26px var(--dim-6) 8px;
}

.field > input[type="date"] {
  min-height: 56px;
}

.field > input:not([type="checkbox"]):not([type="radio"]):focus,
.field > select:focus {
  border-width: 2px;
  border-color: var(--accent);
  box-shadow: none;
  padding: 25px calc(var(--dim-6) - 1px) 7px;
}

.campo-error:has(> input) > label,
.campo-error:has(> select) > label {
  color: var(--text-error);
}

.campo-error > input,
.campo-error > select {
  border-width: 2px;
  padding: 25px calc(var(--dim-6) - 1px) 7px;
}