/* ==========================================================================
   Obra Vista — sistema visual de la PWA d'Adrià Construccions (Fase B, Task 10)
   Direcció: docs/superpowers/design/2026-10-fase-b-direccio-visual.md
   Contrastos verificats: xat AAA (>=7), resta AA (>=4.5) en clar i fosc.
   ========================================================================== */

/* ---------- Tipografia local (Archivo variable, SIL OFL) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62.5% 125%;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* color — mode clar (calç / morter) */
  --fons: #F4F0E8;
  --superficie: #FFFFFF;
  --superficie-2: #E8E2D6;
  --tinta: #1C1814;
  --tinta-2: #5B544B;
  --vora: #D8D1C2;
  --accent: #FF7A1A;          /* taronja d'obra: fons de botó primari, ESCOLTANT */
  --accent-text: #A84300;     /* accent com a text/icona (AA sobre --fons) */
  --accent-tinta: #1C1814;    /* text SOBRE l'accent (mai blanc) */
  --parlant: #3FA34D;         /* verd de nivell: estat PARLANT */
  --parlant-text: #1E7A2E;
  --error: #B3261E;

  /* tipografia — Archivo local a la Task 11; mentrestant, system stack */
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mida-meta: 0.875rem;      /* 14px */
  --mida-text: 1.0625rem;     /* 17px — xat i cos */
  --mida-titol: 1.375rem;     /* 22px */
  --mida-display: 1.75rem;    /* 28px */
  --mida-conversa: 2.5rem;    /* 40px — ESCOLTANT / PARLANT */

  /* espaiat (base 4px) */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;

  /* forma i tacte */
  --radi-control: 10px;
  --radi-targeta: 14px;
  --radi-bombolla: 16px;
  --tacte-min: 56px;          /* alçada mínima tocable (guants) */
  --micro-mida: 92px;         /* botó-micro */
  --nav-alcada: 64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fons: #161310;          /* quitrà */
    --superficie: #211D17;
    --superficie-2: #2B261F;
    --tinta: #F3EDE2;
    --tinta-2: #ABA294;
    --vora: #3A342B;
    --accent: #FF8F3D;
    --accent-text: #FF8F3D;
    --accent-tinta: #1C1814;
    --parlant: #6CC77B;
    --parlant-text: #6CC77B;
    --error: #FF8A80;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* les pantalles de la SPA s'amaguen amb l'atribut hidden; ha de guanyar
   el display:flex de .pantalla i companyia */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  /* la nav inferior és fixa: qualsevol scroll automàtic (focus d'un input,
     scrollIntoView) ha de deixar l'element per sobre de la barra */
  scroll-padding-bottom: calc(var(--nav-alcada) + env(safe-area-inset-bottom, 0px) + var(--e5));
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--mida-text);
  line-height: 1.45;
  color: var(--tinta);
  background: var(--fons);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: var(--mida-display); font-weight: 800; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: var(--mida-titol); font-weight: 750; margin: 0; }

:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 2px;
}

/* ---------- Disposició de pantalla ---------- */
.pantalla {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: var(--e4) var(--e4)
           calc(var(--nav-alcada) + env(safe-area-inset-bottom, 0px) + var(--e4));
}

.capcalera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding-bottom: var(--e4);
}

.capcalera-accions { display: flex; gap: var(--e2); }

/* ---------- Marca (tres maons d'obra vista) ---------- */
.marca {
  display: inline-grid;
  grid-template-columns: repeat(2, 20px);
  gap: 3px;
  justify-items: start;
}
.marca i {
  display: block;
  width: 20px; height: 9px;
  background: var(--accent);
  border-radius: 1px;
}
.marca i:nth-child(3) { margin-left: 11px; grid-column: 1 / -1; }

/* ---------- Botons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: var(--tacte-min);
  padding: var(--e3) var(--e5);
  border: 2px solid transparent;
  border-radius: var(--radi-control);
  font: inherit;
  font-size: var(--mida-text);
  font-weight: 700;
  color: var(--tinta);
  background: var(--superficie-2);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primari {
  background: var(--accent);
  color: var(--accent-tinta);
}

.btn-contorn {
  background: transparent;
  border-color: var(--vora);
}

.btn-perill {
  background: transparent;
  border-color: var(--error);
  color: var(--error);
}

.btn-ample { width: 100%; }

/* botó quadrat només-icona (p. ex. esborrar un contacte) */
.btn-icona {
  min-width: var(--tacte-min);
  padding: var(--e3);
  font-size: 1.25rem;
}

/* ---------- Botó-micro (push-to-talk) ---------- */
.btn-micro {
  width: var(--micro-mida);
  height: var(--micro-mida);
  flex: 0 0 auto;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-tinta);
  font-size: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn-micro:active { transform: scale(0.96); }

/* mentre grava: el mateix anell que respira de l'estat ESCOLTANT
   (la icona passa a ⏹ per JS, que també serveix sense animacions) */
.btn-micro.gravant { animation: anell 1.6s ease-out infinite; }

/* Estats del mode conversa: la pantalla sencera canvia de material */
.conversa {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e6);
  padding: var(--e5);
  background: var(--fons);
  text-align: center;
}
.conversa .estat-text {
  font-size: var(--mida-conversa);
  font-weight: 800;
  letter-spacing: 0.06em;
}

.cercle-estat {
  width: 160px; height: 160px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  color: var(--accent-tinta);
  background: var(--superficie-2); /* neutre (PENSANT / EN PAUSA) */
}

.conversa .sub-estat {
  margin: 0;
  color: var(--tinta-2);
  font-size: var(--mida-text);
  font-weight: 600;
}

/* acció de WhatsApp dins el mode conversa (botó ja gran de per si) */
.conversa .conversa-accio { width: 100%; max-width: 360px; }
.conversa .conversa-accio:empty { display: none; }

/* sortida del mode: toc gran i inconfusible */
.conversa .btn-atura {
  max-width: 360px;
  min-height: var(--e8);
  font-size: var(--mida-titol);
}

/* ESCOLTANT: taronja amb anell que respira */
.conversa.escoltant .cercle-estat {
  background: var(--accent);
  animation: anell 1.6s ease-out infinite;
}
.conversa.escoltant .estat-text { color: var(--accent-text); }

/* PARLANT: verd de nivell, batec curt */
.conversa.parlant .cercle-estat {
  background: var(--parlant);
  animation: batec 0.9s ease-in-out infinite;
}
.conversa.parlant .estat-text { color: var(--parlant-text); }

@keyframes anell {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  100% { box-shadow: 0 0 0 28px transparent; }
}
@keyframes batec {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .conversa .cercle-estat { animation: none; }
  .btn-micro.gravant {
    animation: none;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  .btn:active, .btn-micro:active { transform: none; }
}

/* ---------- Inputs ---------- */
.camp { display: flex; flex-direction: column; gap: var(--e2); }

.camp label {
  font-size: var(--mida-meta);
  font-weight: 700;
  color: var(--tinta-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.input {
  min-height: var(--tacte-min);
  padding: var(--e3) var(--e4);
  font: inherit;
  font-size: var(--mida-text);
  color: var(--tinta);
  background: var(--superficie);
  border: 2px solid var(--vora);
  border-radius: var(--radi-control);
  width: 100%;
}
.input::placeholder { color: var(--tinta-2); }
.input:focus { border-color: var(--accent-text); outline: none; }

.missatge-error {
  color: var(--error);
  font-size: var(--mida-meta);
  font-weight: 600;
}

/* ---------- Xat ---------- */
.xat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  overflow-y: auto;
  padding: var(--e2) 0 var(--e4);
}

.bombolla {
  max-width: 85%;
  padding: var(--e3) var(--e4);
  font-size: var(--mida-text);
  border-radius: var(--radi-bombolla);
  overflow-wrap: break-word;
}
/* signatura Obra Vista: el racó d'origen queda quadrat */
.bombolla-agent {
  align-self: flex-start;
  background: var(--superficie);
  border: 1px solid var(--vora);
  border-bottom-left-radius: 2px;
}
.bombolla-usuari {
  align-self: flex-end;
  background: var(--superficie-2);
  border-bottom-right-radius: 2px;
}

.escrivint {
  align-self: flex-start;
  color: var(--tinta-2);
  font-size: var(--mida-meta);
  padding: 0 var(--e4);
}

/* la pantalla del xat omple la vista: l'historial fa scroll per dins
   i la barra d'entrada queda sempre a la vista, damunt de la nav */
.pantalla-xat { height: 100dvh; }

/* botó d'acció dins del xat (p. ex. «Obre WhatsApp») */
.bombolla .btn { margin-top: var(--e3); }

/* text d'una acció per copiar (escriptori sense Web Share) */
.text-accio {
  margin: var(--e3) 0 0;
  padding: var(--e3);
  font: inherit;
  font-size: var(--mida-meta);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  background: var(--superficie-2);
  border-radius: var(--radi-control);
}

/* error d'un missatge concret del xat, amb reintent al costat */
.error-xat {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: var(--e3);
  max-width: 85%;
}
.error-xat p {
  margin: 0;
  color: var(--error);
  font-size: var(--mida-meta);
  font-weight: 600;
}

.barra-entrada {
  display: flex;
  align-items: flex-end;
  gap: var(--e3);
  padding-top: var(--e3);
}
.barra-entrada .input { flex: 1; }

/* ---------- Targeta de projecte ---------- */
.targeta-projecte {
  display: block;
  background: var(--superficie);
  border: 1px solid var(--vora);
  border-radius: var(--radi-targeta);
  padding: var(--e4) var(--e4) var(--e3);
  min-height: var(--tacte-min);
}
.targeta-projecte + .targeta-projecte { margin-top: var(--e3); }

.targeta-projecte .nom { font-size: var(--mida-titol); font-weight: 750; }
.targeta-projecte .meta {
  color: var(--tinta-2);
  font-size: var(--mida-meta);
  margin-top: var(--e1);
}
.targeta-projecte .total {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  float: right;
}
.targeta-projecte .enllac {
  display: inline-block;
  margin-top: var(--e3);
  min-height: 44px;
  color: var(--accent-text);
  font-weight: 700;
  text-decoration: none;
}

.estat-buit {
  text-align: center;
  color: var(--tinta-2);
  padding: var(--e7) var(--e5);
}

/* indicador de càrrega d'una pantalla sencera */
.carregant {
  text-align: center;
  color: var(--tinta-2);
  font-size: var(--mida-meta);
  font-weight: 600;
  padding: var(--e6) var(--e5);
}

/* error de xarxa d'una pantalla: missatge + reintent */
.error-pantalla {
  text-align: center;
  padding: var(--e6) var(--e5);
}
.error-pantalla p {
  color: var(--error);
  font-weight: 600;
  margin: 0 0 var(--e4);
}

/* ---------- Seccions (Ajustos) ---------- */
.seccio-titol {
  font-size: var(--mida-meta);
  font-weight: 700;
  color: var(--tinta-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: var(--e6) 0 var(--e3);
}

/* ---------- Indicadors d'estat (Ajustos) ---------- */
.punt-estat {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  margin-right: var(--e2);
  background: var(--tinta-2);
  vertical-align: baseline;
}
.punt-estat.ok { background: var(--parlant); }
.punt-estat.ko { background: var(--error); }

.fila {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: var(--tacte-min);
  padding: var(--e2) 0;
  border-bottom: 1px solid var(--vora);
}
.fila .creix { flex: 1; min-width: 0; }
.fila .meta { color: var(--tinta-2); font-size: var(--mida-meta); }

/* ---------- Pantalla Eines (magatzem) ---------- */
/* alta inline d'una sola línia: camp que creix + botó quadrat */
.fila-alta { display: flex; gap: var(--e2); margin-top: var(--e3); }
.fila-alta .input { flex: 1; min-width: 0; }
.fila-alta .btn { min-width: var(--tacte-min); padding: var(--e3); }

/* formulari d'alta en columna (préstec, article nou) */
.form-alta {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  margin-top: var(--e3);
}
.fila-camps { display: flex; gap: var(--e2); }
.fila-camps .input { flex: 1; min-width: 0; }

/* estoc: quantitat destacada; sota mínim en vermell (token --error) */
.quantitat {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sota-minim { color: var(--error); }
.fila .meta.sota-minim { color: var(--error); font-weight: 700; }

/* ---------- Navegació inferior ---------- */
.nav-inferior {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  height: calc(var(--nav-alcada) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--superficie);
  border-top: 1px solid var(--vora);
}
.nav-inferior a {
  flex: 1;
  min-width: 0; /* 4 pestanyes: cap ítem no desborda, l'amplada es reparteix */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 var(--e1);
  text-decoration: none;
  color: var(--tinta-2);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  border-top: 3px solid transparent;
  -webkit-tap-highlight-color: transparent;
}
.nav-inferior a .icona { font-size: 1.625rem; line-height: 1; }
.nav-inferior a.activa {
  color: var(--accent-text);
  border-top-color: var(--accent);
}

/* ---------- Bàner d'instal·lació de la PWA ---------- */
.banner-installa {
  position: fixed;
  left: var(--e3); right: var(--e3);
  bottom: calc(var(--nav-alcada) + env(safe-area-inset-bottom, 0px) + var(--e3));
  z-index: 45; /* damunt la nav (40), sota el mode conversa (50) */
  max-width: 456px;
  margin: 0 auto;
  padding: var(--e4);
  background: var(--superficie);
  border: 1px solid var(--vora);
  border-radius: var(--radi-targeta);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.banner-installa .banner-titol {
  margin: 0 0 var(--e2);
  font-size: var(--mida-text);
  font-weight: 750;
}
.banner-installa p { margin: 0 0 var(--e2); }
.banner-installa .banner-accions {
  display: flex;
  gap: var(--e2);
  margin-top: var(--e3);
}
.banner-installa .banner-accions .btn { flex: 1; }

/* ---------- Pantalla de login ---------- */
.login {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e5);
  max-width: 360px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: var(--e8);
}
.login .titol-marca {
  display: flex;
  align-items: center;
  gap: var(--e4);
  margin-bottom: var(--e4);
}