/* ═══════════════════════════════════════════════════════════════════
   VISITES D'OBRA — estil «quadern d'obra»
   Minimalisme arquitectònic càlid · família bronze/grafit
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --paper: #F3F1EC;          /* fons paper càlid */
  --targeta: #FFFFFF;
  --grafit: #181D29;         /* barra lateral */
  --grafit-2: #222836;
  --tinta: #14181F;          /* text principal */
  --tinta-suau: #6B7280;     /* text secundari */
  --tinta-clara: #9AA1AC;
  --bronze: #A9743A;
  --bronze-clar: #D49A57;
  --bronze-fons: #F5EDE2;
  --linia: #E5E1D8;          /* hairline càlida */
  --linia-freda: #E8EAEE;
  --vermell: #C2382E;
  --vermell-fons: #FBEDEB;
  --ocre: #B0762E;
  --ocre-fons: #F7EFE2;
  --verd: #2E7D46;
  --verd-fons: #EAF4EC;
  --ombra: 0 1px 2px rgba(20, 24, 31, .05), 0 8px 24px -12px rgba(20, 24, 31, .12);
  --ombra-alta: 0 2px 6px rgba(20, 24, 31, .08), 0 18px 44px -16px rgba(20, 24, 31, .22);
  --radi: 12px;
  --display: "Bahnschrift", "Segoe UI Semibold", "Segoe UI", sans-serif;
  --cos: "Segoe UI", -apple-system, sans-serif;
}

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

html, body { height: 100%; }

body {
  font-family: var(--cos);
  color: var(--tinta);
  background: var(--paper);
  display: flex;
  overflow: hidden;
  font-size: 14px;
}

.ocult { display: none !important; }

/* ─────────────────────────────── barra lateral ── */

.lateral {
  width: 316px;
  min-width: 316px;
  background: linear-gradient(175deg, var(--grafit) 0%, #1B2130 100%);
  color: #E9ECF2;
  display: flex;
  flex-direction: column;
  border-right: 3px solid var(--bronze);
}

.lateral-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 18px 18px;
}

.monograma {
  width: 40px; height: 40px;
  background: linear-gradient(150deg, var(--bronze-clar), var(--bronze));
  border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: 22px; font-weight: 700; color: #fff;
  box-shadow: 0 6px 16px -6px rgba(169, 116, 58, .6);
}

.marca-nom {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: .14em;
}

.marca-sub {
  font-size: 10.5px;
  color: #8D95A5;
  margin-top: 2px;
}

.lateral-cerca { padding: 0 14px 10px; }

.lateral-cerca input {
  width: 100%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 9px;
  color: #E9ECF2;
  padding: 8px 12px;
  font-family: var(--cos);
  font-size: 12.5px;
  outline: none;
  transition: border-color .15s, background .15s;
}

.lateral-cerca input::placeholder { color: #79808F; }
.lateral-cerca input:focus {
  border-color: var(--bronze-clar);
  background: rgba(255, 255, 255, .09);
}

.llista-obres {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px 10px;
}

.obra-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 11px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s;
  margin-bottom: 3px;
}

.obra-item:hover { background: rgba(255, 255, 255, .05); }

.obra-item.actiu {
  background: rgba(169, 116, 58, .16);
  border-color: rgba(212, 154, 87, .35);
}

.obra-item-imatge {
  width: 54px; height: 54px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
  background: #262D3C;
  border: 1px solid rgba(255, 255, 255, .09);
}

.obra-item-inicial {
  width: 54px; height: 54px;
  border-radius: 9px;
  flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(212,154,87,.28), rgba(169,116,58,.18));
  color: var(--bronze-clar);
  font-family: var(--display);
  font-size: 21px;
  border: 1px solid rgba(212, 154, 87, .25);
}

.obra-item-text { flex: 1; min-width: 0; }

.obra-item-editar {
  background: transparent;
  border: none;
  color: #6B7380;
  cursor: pointer;
  padding: 4px;
  border-radius: 7px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  transition: color .13s, background .13s;
  align-self: flex-start;   /* alineat amb la línia de text superior */
  margin-top: 5px;
}

.obra-item-editar:hover {
  color: var(--bronze-clar);
  background: rgba(255, 255, 255, .07);
}

.obra-item-ref {
  font-family: var(--display);
  font-size: 12.5px;
  letter-spacing: .1em;
  line-height: 1.45;
  color: var(--bronze-clar);
  overflow-wrap: break-word;
}

.lateral-peu { padding: 12px 14px 16px; }

/* filet entre «Nova obra» i «Contactes» */
.lateral-peu .boto-ample + .boto-ample {
  margin-top: 12px;
  position: relative;
}
.lateral-peu .boto-ample + .boto-ample::before {
  content: "";
  position: absolute;
  top: -7px; left: 8%; right: 8%;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.lateral-buit {
  color: #79808F;
  font-size: 12px;
  text-align: center;
  padding: 30px 10px;
  line-height: 1.6;
}

/* ─────────────────────────────── contingut ── */

/* La capçalera, les dreceres i els comptadors queden FIXOS (petició de
   l'usuari): el que es desplaça són només les columnes de visites i
   observacions, cadascuna amb el seu propi scroll. */
.principal {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 20px 42px 0;
}

.vista-obra {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.vista-obra.ocult { display: none; }

/* animació d'entrada esglaonada */
@keyframes puja {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.anima-1 { animation: puja .45s .02s cubic-bezier(.2,.7,.3,1) both; }
.anima-2 { animation: puja .45s .10s cubic-bezier(.2,.7,.3,1) both; }
.anima-3 { animation: puja .45s .18s cubic-bezier(.2,.7,.3,1) both; }
.anima-4 { animation: puja .45s .26s cubic-bezier(.2,.7,.3,1) both; }

/* pantalla buida */
.pantalla-buida {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  animation: puja .5s ease both;
}

.buida-monograma {
  width: 74px; height: 74px;
  border: 2px solid var(--bronze);
  color: var(--bronze);
  border-radius: 18px;
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: 40px;
  margin-bottom: 6px;
}

.pantalla-buida h1 {
  font-family: var(--display);
  font-size: 26px;
  letter-spacing: .04em;
}

.pantalla-buida p { color: var(--tinta-suau); line-height: 1.6; }

/* capçalera d'obra */
/* Capçalera (proposta A, sense banda fosca): la referència és el títol —
   «20240022» petit en bronze i «ARTUR I SILVIA» ben gran sobre el paper. */
.obra-capcalera {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.obra-ref-num {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--bronze);
  margin-bottom: 2px;
}

.obra-capcalera h1 {
  font-family: var(--display);
  font-size: 31px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .05em;
  text-transform: uppercase;
  max-width: 760px;
}

.obra-subtitol {
  margin-top: 6px;
  font-size: 14px;
  color: var(--tinta-suau);
}

.obra-detall {
  margin-top: 2px;
  color: var(--tinta-clara);
  font-size: 12.5px;
}

/* «OBSERVACIONS · VISITA 06»: el número al costat, en bronze, ben visible */
.obs-visita-num {
  color: var(--bronze);
  letter-spacing: .06em;
}

.regla-bronze {
  width: 44px; height: 3px;
  background: var(--bronze);
  border-radius: 2px;
  margin-top: 12px;
}

.obra-accions { display: flex; gap: 8px; padding-top: 4px; }

/* avís carpeta */
.avis {
  margin-top: 18px;
  background: var(--vermell-fons);
  color: var(--vermell);
  border: 1px solid #F0D4D1;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
}

/* estadístiques editorials */
.estadistiques {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 26px 0 30px;
}

.stat { display: flex; align-items: baseline; gap: 9px; }

.stat-num {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 300;
  letter-spacing: .01em;
}

.stat-etq {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-clara);
}

.stat-obertes { color: var(--vermell); }
.stat-encurs { color: var(--ocre); }
.stat-resoltes { color: var(--verd); }

.stat-sep { width: 1px; height: 30px; background: var(--linia); }

/* taulell de dues columnes */
.taulell {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 22px;
  align-items: stretch;
  flex: 1;
  min-height: 0;               /* sense això, el grid no deixa encongir res */
}

/* cada columna es desplaça pel seu compte, la capçalera no es mou */
.taulell > .col-visites,
.taulell > .col-observacions {
  overflow-y: auto;
  min-height: 0;
  padding-bottom: 40px;
}

.col-capcalera {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 12px;
}

/* títol de columna + botó «+», ben junts */
.col-titol-fila {
  display: flex;
  align-items: center;
  gap: 14px;
}

.col-capcalera h2 {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta);
}

.col-subtitol {
  font-size: 12px;
  color: var(--tinta-clara);
  margin-top: 3px;
}

/* targetes de visita */
.targeta-visita {
  background: var(--targeta);
  border: 1px solid var(--linia);
  border-radius: var(--radi);
  padding: 13px 15px;
  margin-bottom: 10px;
  cursor: pointer;
  box-shadow: var(--ombra);
  transition: transform .16s, box-shadow .16s, border-color .16s;
  position: relative;
}

.targeta-visita:hover { transform: translateY(-1px); box-shadow: var(--ombra-alta); }

/* la visita seleccionada: fons bronze suau, pla i net */
.targeta-visita.actiu {
  border-color: var(--bronze);
  background: var(--bronze-fons);
  box-shadow: 0 0 0 1px var(--bronze), var(--ombra-alta);
}

.visita-cap { display: flex; align-items: baseline; gap: 10px; }

.visita-num {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  color: var(--bronze);
  min-width: 32px;
}

/* la data, just al costat del número */
.visita-data {
  font-weight: 600;
  font-size: 13px;
  color: var(--tinta-suau);
}

.visita-titol {
  font-size: 15px;
  font-weight: 600;
  color: var(--tinta);
  margin-top: 3px;
}

/* cos de la targeta: text + primera fotografia de la visita */
.visita-cos {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.visita-text { flex: 1; min-width: 0; }

.visita-foto {
  width: 92px; height: 92px;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid var(--linia);
  background: var(--paper);
  flex-shrink: 0;
  cursor: zoom-in;
  transition: transform .16s, box-shadow .16s;
}

.visita-foto:hover {
  transform: scale(1.06);
  box-shadow: var(--ombra);
}

/* detall: extensió del títol (p. ex. «sabates, riostres zona nit») */
.visita-detall {
  font-size: 12.5px;
  color: var(--tinta-suau);
  line-height: 1.4;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.visita-resum { font-size: 12px; color: var(--tinta-clara); margin-top: 5px; }
.visita-resum b { color: var(--vermell); font-weight: 600; }

.visita-accions {
  display: flex;
  gap: 5px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--linia);
}

/* targetes d'observació */
.targeta-obs {
  background: var(--targeta);
  border: 1px solid var(--linia);
  border-radius: var(--radi);
  box-shadow: var(--ombra);
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  gap: 15px;
  cursor: pointer;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}

.targeta-obs:hover { border-color: var(--bronze); }

.targeta-obs:hover { transform: translateY(-1px); box-shadow: var(--ombra-alta); }

/* mateixa mida que la miniatura de les visites */
.obs-foto {
  width: 92px; height: 92px;
  border-radius: 9px;
  object-fit: cover;
  cursor: zoom-in;
  background: var(--paper);
  border: 1px solid var(--linia);
  flex-shrink: 0;
  transition: transform .16s, box-shadow .16s;
}

.obs-foto:hover { transform: scale(1.06); box-shadow: var(--ombra); }

.obs-sense-foto {
  width: 92px; height: 92px;
  border-radius: 9px;
  border: 1px dashed var(--linia);
  display: grid; place-items: center;
  color: var(--tinta-clara);
  font-size: 11px;
  flex-shrink: 0;
}

.obs-cos { flex: 1; min-width: 0; }

.obs-cap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.obs-num {
  font-family: var(--display);
  font-size: 13px;
  color: var(--tinta-clara);
}

.obs-comentari { font-size: 13.5px; line-height: 1.5; }

.obs-peu {
  margin-top: 6px;
  font-size: 12px;
  color: var(--tinta-suau);
}

.obs-peu b { font-weight: 600; }

.obs-accions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: flex-start;
}

/* pastilles i xips */
.xip {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 4px 11px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: filter .12s, transform .12s;
  font-family: var(--cos);
}

.xip:active { transform: scale(.96); }
.xip:hover { filter: brightness(1.08); }

.xip-oberta {
  background: var(--vermell);
  color: #fff;
  animation: pols-incidencia 1.8s ease-out infinite;
}

/* pols lluminós: una ona vermella que s'expandeix i s'esvaeix */
@keyframes pols-incidencia {
  0%   { box-shadow: 0 0 0 0 rgba(194, 56, 46, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(194, 56, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(194, 56, 46, 0); }
}

/* si l'usuari té les animacions reduïdes al sistema, no bateguem */
@media (prefers-reduced-motion: reduce) {
  .xip-oberta { animation: none; }
}
.xip-encurs { background: var(--ocre); color: #fff; }
.xip-resolta { background: var(--verd); color: #fff; }

.xip-urgent {
  background: var(--vermell-fons);
  color: var(--vermell);
  cursor: default;
}
.xip-urgent:hover { filter: none; }

.obs-resolta-el { color: var(--verd); font-size: 11.5px; margin-top: 4px; font-weight: 600; }

/* estat buit de columna */
.col-buida {
  border: 1px dashed var(--linia);
  border-radius: var(--radi);
  padding: 34px 20px;
  text-align: center;
  color: var(--tinta-clara);
  font-size: 12.5px;
  line-height: 1.6;
}

/* ─────────────────────────────── botons ── */

.boto {
  font-family: var(--cos);
  font-size: 12.5px;
  font-weight: 600;
  border: none;
  border-radius: 9px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background .14s, transform .12s, box-shadow .14s;
}

.boto:active { transform: scale(.97); }

.boto-primari {
  background: linear-gradient(160deg, #BE8748, var(--bronze));
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(169, 116, 58, .55);
}
.boto-primari:hover { background: linear-gradient(160deg, #B37C3E, #946233); }

.boto-suau {
  background: #EBE8E1;
  color: var(--tinta);
}
.boto-suau:hover { background: #E1DDD3; }

.boto-perill-suau {
  background: transparent;
  color: var(--vermell);
  border: 1px solid #EBD4D1;
}
.boto-perill-suau:hover { background: var(--vermell-fons); }

.boto-ample { width: 100%; padding: 10px; }
.boto-petit { padding: 6px 13px; font-size: 12px; }

.boto-icona {
  background: transparent;
  border: none;
  color: var(--tinta-clara);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 7px;
  border-radius: 7px;
  transition: background .12s, color .12s;
}
.boto-icona:hover { background: var(--paper); color: var(--tinta); }
.boto-icona.perill:hover { background: var(--vermell-fons); color: var(--vermell); }

/* Les tres accions de la visita: veure-la a la pantalla, l'acta en PDF i el
   fitxer per enviar al client. NOMÉS ICONA (petició de l'usuari): el text les
   feia llargues i el «title» ja diu què fan. Mateixa caixa totes tres; el que
   les distingeix és el color. */
.boto-ull,
.boto-pdf,
.boto-compartir {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  margin-right: 7px;
  transition: background .14s, color .14s, border-color .14s;
}

.boto-ull svg,
.boto-pdf svg,
.boto-compartir svg { flex-shrink: 0; }

.boto-pdf {
  background: linear-gradient(160deg, #BE8748, var(--bronze));
  color: #fff;
  border: none;
  box-shadow: 0 4px 10px -5px rgba(169, 116, 58, .6);
}
.boto-pdf:hover { background: linear-gradient(160deg, #B37C3E, #946233); }

/* ull: la visita a la pantalla. Mateixa presència que l'acta. */
.boto-ull {
  background: var(--grafit);
  color: #fff;
  border: none;
  box-shadow: 0 4px 10px -5px rgba(24, 29, 41, .8);
}

.boto-ull:hover { background: #2A3242; }

/* compartir: el fitxer per al client. Va amb perímetre i no ple, perquè
   veure la visita i l'acta continuïn sent les dues accions principals. */
.boto-compartir {
  background: var(--bronze-fons);
  color: var(--bronze);
  border: 1px solid var(--bronze);
}

.boto-compartir:hover { background: var(--bronze); color: #fff; }

/* ───────────────────────── dreceres + comptadors (proposta A) ── */

/* una sola fila: les dreceres a l'esquerra i els comptadors a la dreta */
.panell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  margin: 14px 0 18px;
}

.panell .estadistiques { margin: 0; }

.enllac-afegir {
  background: transparent !important;
  border: 1.5px dashed var(--bronze);
}

.enllac:hover .enllac-afegir { background: var(--bronze) !important; border-style: solid; }

.enllacos-llista {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-start;   /* totes cap a l'esquerra */
}

/* Drecera nua: només la icona i el títol, sense caixa (petició de l'usuari) */
.enllac {
  position: relative;
  width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 8px 4px 6px;
  cursor: pointer;
  color: var(--tinta);
  transition: background .14s;
}

.enllac:hover { background: var(--bronze-fons); }

.enllac-icona {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bronze-fons);
  color: var(--bronze);
  display: grid;
  place-items: center;
  transition: background .14s, color .14s;
}

.enllac:hover .enllac-icona { background: var(--bronze); color: #fff; }

.enllac-titol {
  font-size: 11.5px;
  line-height: 1.25;
  text-align: center;
  color: var(--tinta-suau);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.enllac-punts {
  position: absolute;
  top: 0; right: 0;
  width: 22px; height: 22px;
  background: var(--targeta);
  border: 1px solid var(--linia);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .14s;
}

.enllac:hover .enllac-punts { opacity: 1; }

.enllacos-buit {
  font-size: 12.5px;
  color: var(--tinta-clara);
  line-height: 1.6;
  max-width: 520px;
}

/* tria de tipus (enllaç i contacte) */
.tipus-enllac, .tipus-contacte {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 6px;
}

.tipus-opcio {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  background: var(--targeta);
  color: var(--tinta-suau);
  border: 1px solid var(--linia);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all .14s;
}

.tipus-opcio:hover { border-color: var(--bronze); color: var(--bronze); }
.tipus-opcio.actiu {
  background: var(--bronze-fons);
  border-color: var(--bronze);
  color: var(--bronze);
}
.tipus-opcio[disabled] { opacity: .45; cursor: default; }
.tipus-opcio[disabled]:hover { border-color: var(--linia); color: var(--tinta-suau); }

.camp-ajuda {
  font-size: 12px;
  color: var(--tinta-clara);
  line-height: 1.55;
  margin: -6px 0 14px;
}

/* ───────────────────────── agenda de contactes ── */

.agenda {
  border: none;
  background: var(--paper);
  padding: 0;
  margin: auto;
  width: min(860px, 94vw);
  max-width: 94vw;
  height: min(88vh, 900px);
  border-radius: var(--radi);
  overflow: hidden;
  box-shadow: var(--ombra-alta);
}

.agenda[open] { display: flex; flex-direction: column; }
.agenda::backdrop { background: rgba(20, 24, 31, .55); backdrop-filter: blur(3px); }

.agenda-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px 14px;
  background: var(--targeta);
  border-bottom: 1px solid var(--linia);
}

.agenda-titol { font-size: 21px; font-weight: 600; }
.agenda-sub { font-size: 12.5px; color: var(--tinta-clara); }

.agenda-eines { display: flex; align-items: center; gap: 10px; }
.agenda-eines .camp { width: 260px; margin: 0; }
.agenda-eines .visor-tancar { color: var(--tinta-suau); }

.agenda-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 12px 22px;
  background: var(--targeta);
  border-bottom: 1px solid var(--linia);
}

.filtre {
  font-size: 12px;
  background: transparent;
  color: var(--tinta-suau);
  border: 1px solid var(--linia);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: all .14s;
}

.filtre span { color: var(--tinta-clara); margin-left: 4px; font-variant-numeric: tabular-nums; }
.filtre:hover { border-color: var(--bronze); color: var(--bronze); }
.filtre.actiu { background: var(--bronze); border-color: var(--bronze); color: #fff; }
.filtre.actiu span { color: rgba(255, 255, 255, .7); }

.agenda-llista { flex: 1; overflow-y: auto; padding: 8px 22px 22px; }

.agenda-lletra {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--bronze);
  padding: 14px 0 6px;
  position: sticky;
  top: 0;
  background: var(--paper);
}

.contacte {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: var(--targeta);
  border: 1px solid var(--linia);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 7px;
  transition: border-color .14s, box-shadow .14s;
}

.contacte[onclick] { cursor: pointer; }
.contacte[onclick]:hover { border-color: var(--bronze); box-shadow: var(--ombra); }

.cont-inicial {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bronze-fons);
  color: var(--bronze);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 14px;
  flex-shrink: 0;
}

.cont-cos { flex: 1; min-width: 0; }

.cont-nom {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.cont-grup {
  font-family: var(--display);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-clara);
  background: var(--paper);
  border-radius: 999px;
  padding: 3px 9px;
  font-weight: 400;
}

.cont-detall { font-size: 12.5px; color: var(--tinta-suau); margin-top: 2px; }

.cont-accions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }

.cont-accio {
  font-size: 12.5px;
  color: var(--bronze);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.cont-accio:hover { border-bottom-color: var(--bronze); }

@media (max-width: 700px) {
  .agenda-cap { flex-direction: column; align-items: stretch; }
  .agenda-eines .camp { width: auto; flex: 1; }
}

/* diàleg de compartir */
.compartir-cos {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.compartir-portada {
  width: 172px;
  height: 172px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--linia);
  flex-shrink: 0;
}

.compartir-dreta { flex: 1; min-width: 0; }

.compartir-nota {
  font-size: 13px;
  line-height: 1.6;
  color: var(--tinta-suau);
  margin-bottom: 14px;
}

.compartir-consell {
  color: var(--bronze);
  background: var(--bronze-fons);
  border-radius: 8px;
  padding: 9px 11px;
}

@media (max-width: 620px) {
  .compartir-cos { flex-direction: column; }
  .compartir-portada { width: 100%; height: auto; aspect-ratio: 1; }
}

.compartir-fitxa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--bronze-fons);
  border: 1px solid var(--linia);
  border-radius: 9px;
  padding: 13px 15px;
}

.compartir-nom {
  font-size: 12.5px;
  color: var(--tinta);
  word-break: break-word;
}

.compartir-mida {
  font-family: var(--display);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--bronze);
  white-space: nowrap;
}

/* alarma d'incidències a la targeta de visita */
.visita-alarma {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--vermell);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 4px 11px;
  border-radius: 999px;
  margin-top: 7px;
  animation: pols-incidencia 1.8s ease-out infinite;
}

.visita-alarma::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
}

/* ─────────────────────────────── diàlegs ── */

.dialeg {
  border: none;
  border-radius: 16px;
  box-shadow: var(--ombra-alta);
  padding: 0;
  width: min(600px, 92vw);
  max-height: 92vh;
  /* el reset global (* { margin: 0 }) es carrega el centrat natiu del <dialog> */
  margin: auto;
}

/* el d'observació és més ample i s'adapta a l'alçada de la pantalla,
   perquè hi càpiga tot sense haver de baixar */
#dialeg-obs { width: min(780px, 94vw); max-height: 96vh; }
#dialeg-obs .dialeg-cos { max-height: 96vh; padding: 22px 26px 18px; }
#dialeg-obs .camp-etiqueta { margin: 12px 0 5px; }
#dialeg-obs .dialeg-peu { margin-top: 16px; }

/* títol i icones de captura a la mateixa línia; sense línia sota el títol,
   perquè la imatge pugi fins aquí i es vegi el més gran possible */
.obs-cap-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

#dialeg-obs h2 {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.dialeg::backdrop {
  background: rgba(20, 24, 31, .45);
  backdrop-filter: blur(3px);
}

.dialeg-cos { padding: 26px 28px 22px; overflow-y: auto; max-height: 88vh; }

.dialeg h2 {
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: .03em;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--bronze);
  display: inline-block;
}

.camp-etiqueta {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suau);
  margin: 13px 0 5px;
}

.camp {
  width: 100%;
  border: 1px solid var(--linia);
  border-radius: 9px;
  background: #FAF9F6;
  padding: 9px 12px;
  font-family: var(--cos);
  font-size: 13.5px;
  color: var(--tinta);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.camp:focus {
  border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgba(169, 116, 58, .14);
}

textarea.camp { resize: vertical; }

.fila-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.fila-carpeta {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.fila-carpeta .camp { flex: 1; }

.camp-error {
  border-color: var(--vermell) !important;
  box-shadow: 0 0 0 3px rgba(194, 56, 46, .14) !important;
}

.fila-imatge-obra {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.imatge-obra-caixa {
  width: 210px; height: 130px;
  border: 1.5px dashed var(--linia);
  border-radius: 10px;
  display: grid; place-items: center;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  background: #FAF9F6;
  transition: border-color .15s;
  flex-shrink: 0;
}

.imatge-obra-caixa:hover { border-color: var(--bronze); }

.imatge-obra-caixa img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.imatge-obra-botons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.bloc-importar {
  background: var(--bronze-fons);
  border-radius: 10px;
  padding: 4px 14px 14px;
  margin-bottom: 4px;
}

.bloc-importar .camp-etiqueta { color: var(--bronze); }

.dialeg-peu {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

/* selector d'estat del diàleg */
.fila-estat {
  display: flex;
  align-items: center;          /* estat i URGENT a la mateixa línia */
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;             /* aire respecte del camp de sobre */
  padding-top: 20px;
  border-top: 1px solid var(--linia);
}

.tria-estat { display: flex; gap: 6px; }

.pastilla-tria {
  font-family: var(--cos);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--linia);
  background: #FAF9F6;
  color: var(--tinta-suau);
  cursor: pointer;
  transition: all .14s;
}

.pastilla-tria.actiu[data-estat="Incidència"] { background: var(--vermell); border-color: var(--vermell); color: #fff; }
.pastilla-tria.actiu[data-estat="Conforme"] { background: var(--verd); border-color: var(--verd); color: #fff; }

/* interruptor URGENT */
.interruptor {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--tinta-clara);
  user-select: none;
  transition: color .18s;
}

.interruptor .pista {
  width: 38px; height: 21px;
  border-radius: 99px;
  background: #E4E0D7;
  position: relative;
  transition: background .2s;
}

.interruptor .bola {
  position: absolute;
  top: 2.5px; left: 2.5px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: left .2s;
}

.interruptor.actiu { color: var(--vermell); }
.interruptor.actiu .pista { background: var(--vermell); }
.interruptor.actiu .bola { left: 19.5px; }

/* ── captura d'imatge: tres icones ── */
.icones-captura { display: flex; gap: 9px; }

.ico-captura {
  width: 54px; height: 54px;
  border: 1px solid var(--linia);
  border-radius: 12px;
  background: #fff;
  color: var(--tinta-suau);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color .15s, color .15s, box-shadow .15s, transform .12s;
}

.ico-captura:hover {
  border-color: var(--bronze);
  color: var(--bronze);
  box-shadow: 0 0 0 3px rgba(169, 116, 58, .1);
}

.ico-captura:active { transform: scale(.96); }

/* ── caixes d'imatge amb cantonades de visor ── */
.caixes-foto {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.caixes-foto.dues { grid-template-columns: 1fr 1fr; }
.caixes-foto.dues .foto-caixa { height: clamp(150px, 29vh, 280px); }

.foto-caixa {
  border: 1px solid var(--linia);
  border-radius: 10px;
  /* gran, però encongeix en pantalles baixes perquè el diàleg hi càpiga sencer */
  height: clamp(160px, 34vh, 360px);
  display: grid;
  place-items: center;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: border-color .15s, box-shadow .15s;
  background: #FCFBF9;
}

/* cantonades de visor, com quan enquadres una foto */
.foto-caixa::before,
.foto-caixa::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border-color: var(--bronze);
  border-style: solid;
  opacity: .55;
  transition: opacity .15s;
  z-index: 2;
}

.foto-caixa::before {
  top: 9px; left: 9px;
  border-width: 1.5px 0 0 1.5px;
  border-radius: 3px 0 0 0;
}

.foto-caixa::after {
  bottom: 9px; right: 9px;
  border-width: 0 1.5px 1.5px 0;
  border-radius: 0 0 3px 0;
}

.foto-caixa:hover { border-color: var(--bronze); }
.foto-caixa:hover::before, .foto-caixa:hover::after { opacity: 1; }

.foto-caixa.enfocada {
  border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgba(169, 116, 58, .11);
}

.foto-caixa.enfocada::before, .foto-caixa.enfocada::after { opacity: 1; }

/* la imatge es veu SENCERA, sigui horitzontal o vertical (no es retalla) */
.foto-caixa img {
  width: 100%; height: 100%;
  object-fit: contain;
  position: absolute;
  inset: 0;
  padding: 6px;
  background: #F2EFE9;
}

.foto-ajuda {
  text-align: center;
  font-size: 11.5px;
  color: var(--tinta-clara);
  line-height: 1.5;
}

/* paperera sobre la imatge, a dalt a la dreta */
.zona-foto { position: relative; }

.boto-esborrar-foto {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  background: rgba(20, 24, 31, .55);
  backdrop-filter: blur(4px);
  border: none;
  border-radius: 9px;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 3;
  transition: background .14s, transform .12s;
}

.boto-esborrar-foto:hover { background: var(--vermell); }
.boto-esborrar-foto:active { transform: scale(.93); }

.nota-enganxar {
  font-size: 11.5px;
  color: var(--tinta-clara);
  margin-top: 8px;
}

/* ═══════════════════ croquis ═══════════════════ */

.dialeg-croquis { width: min(1180px, 96vw); max-height: 94vh; }

.barra-croquis {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-bottom: 12px;
}

.eina-cr {
  width: 40px; height: 40px;
  border: 1px solid var(--linia);
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--tinta-suau);
  transition: all .13s;
}

.eina-cr:hover { border-color: var(--bronze); color: var(--bronze); }
.eina-cr.actiu { background: var(--grafit); border-color: var(--grafit); color: #fff; }

.sep-cr { width: 1px; height: 28px; background: var(--linia); margin: 0 3px; }

.pastilla-color {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--linia), var(--ombra);
  overflow: hidden;
  flex-shrink: 0;
}

.pastilla-color input {
  position: absolute;
  inset: -8px;
  width: 200%; height: 200%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: none;
}

.colors-rapids { display: flex; gap: 5px; }

.rapid {
  width: 22px; height: 22px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--linia);
  transition: transform .12s;
}

.rapid:hover { transform: scale(1.15); }

.gruix-zona {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #FCFBF9;
  border: 1px solid var(--linia);
  border-radius: 10px;
  padding: 0 12px;
  height: 40px;
}

.gruix-zona input[type=range] { width: 100px; accent-color: var(--bronze); cursor: pointer; }
.mostra-gruix { width: 24px; display: grid; place-items: center; }
.mostra-gruix i { display: block; width: 20px; background: var(--tinta); border-radius: 99px; }
.gruix-num {
  font-size: 11.5px;
  color: var(--tinta-suau);
  min-width: 32px;
  font-variant-numeric: tabular-nums;
}

.zoom-zona {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #FCFBF9;
  border: 1px solid var(--linia);
  border-radius: 10px;
  height: 40px;
  padding: 0 4px;
}

.zoom-zona button {
  width: 32px; height: 32px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 8px;
  color: var(--tinta-suau);
  display: grid;
  place-items: center;
  font-size: 17px;
}

.zoom-zona button:hover { background: var(--bronze-fons); color: var(--bronze); }

.zoom-val {
  font-size: 11.5px;
  color: var(--tinta-suau);
  min-width: 46px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.tela-zona {
  border: 1px solid var(--linia);
  border-radius: 12px;
  background: #EDEAE3;
  overflow: auto;
  max-height: 62vh;
  padding: 14px;
  display: flex;
  justify-content: center;
}

#cr-tela {
  background: #fff;
  box-shadow: var(--ombra);
  cursor: crosshair;
  touch-action: none;
  display: block;
  border-radius: 4px;
}

/* ═══════════ galeria d'imatges d'una visita ═══════════ */

.galeria {
  border: none;
  background: #14181F;
  padding: 0;
  margin: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

/* IMPORTANT: només es dibuixa quan està obert. Si es posa «display: flex»
   a .galeria sense més, es passa per sobre del «display: none» que el
   navegador dona als <dialog> tancats i tapa tota l'aplicació. */
.galeria[open] {
  display: flex;
  flex-direction: column;
}

.galeria::backdrop { background: #0B0E13; }

/* ── barra de progrés segmentada (una peça per imatge) ── */
.gal-progres {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  gap: 3px;
  padding: 10px 18px 0;
  z-index: 5;
}

.gal-seg {
  flex: 1;
  height: 2.5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .16);
  overflow: hidden;
  cursor: pointer;
  transition: background .2s;
}

.gal-seg:hover { background: rgba(255, 255, 255, .3); }

.gal-seg.vista { background: rgba(212, 154, 87, .45); }

.gal-seg.actiu {
  background: linear-gradient(90deg, var(--bronze-clar), #fff);
  box-shadow: 0 0 10px -2px var(--bronze-clar);
}

/* ── capçalera ── */
.gal-cap {
  position: absolute;
  top: 20px; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 5;
  pointer-events: none;
}

.gal-cap button { pointer-events: auto; }

.gal-context { display: flex; flex-direction: column; gap: 2px; }

.gal-visita {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .18em;
  color: #fff;
}

.gal-obra {
  font-size: 11px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .45);
}

.gal-dreta { display: flex; align-items: center; gap: 16px; }

.gal-comptador {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .5);
  font-variant-numeric: tabular-nums;
}

/* ── escena de la imatge ── */
.gal-escena {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}

.gal-escena.arrossegant { cursor: grabbing; }

/* Dues capes apilades: mentre s'arrossega, la foto que marxa i la que entra
   es mouen totes dues alhora. Amb una sola imatge i un fos, el moviment no
   s'entenia (era el que passava abans). */
.gal-capa {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  will-change: transform, opacity;
}

.gal-capa img {
  max-width: 92vw;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
  user-select: none;
  -webkit-user-drag: none;
}

.gal-buida {
  color: rgba(255, 255, 255, .45);
  text-align: center;
  font-size: 15px;
  line-height: 1.7;
}

.gal-buida span { font-size: 12.5px; color: rgba(255, 255, 255, .28); }

/* ── fletxes ── */
.gal-fletxa {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, .75);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 5;
  opacity: 0;
  transition: opacity .2s, background .16s, border-color .16s;
}

.galeria:hover .gal-fletxa { opacity: 1; }
.gal-fletxa:hover { background: var(--bronze); border-color: var(--bronze); color: #fff; }
.gal-fletxa.esq { left: 22px; }
.gal-fletxa.dre { right: 22px; }
.gal-fletxa[disabled] { opacity: 0 !important; pointer-events: none; }

/* ── fitxa de dades sobre la imatge ── */
.gal-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 60px 26px 26px;
  background: linear-gradient(to top, rgba(9, 11, 16, .96) 30%, rgba(9, 11, 16, 0));
  z-index: 4;
  pointer-events: none;
}

.gal-fitxa {
  max-width: 900px;
  margin: 0 auto;
  animation: puja .35s cubic-bezier(.2, .7, .3, 1) both;
}

.gal-fila-cap {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
}

.gal-num {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  letter-spacing: .04em;
}

.gal-xip {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 5px 12px;
  border-radius: 999px;
  color: #fff;
}

.gal-xip.conforme { background: var(--verd); }
.gal-xip.incidencia { background: var(--vermell); animation: pols-incidencia 1.8s ease-out infinite; }
.gal-xip.urgent { background: rgba(194, 56, 46, .18); color: #FF8578; }
.gal-xip.final { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .8); }

/* la data va a la mateixa línia que la descripció */
.gal-fila-text {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

.gal-data {
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .45);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

.gal-text {
  font-size: 19px;
  line-height: 1.45;
  color: #fff;
  font-weight: 300;
  max-width: 780px;
}

.gal-peu {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(212, 154, 87, .28);
}

.gal-dada { display: flex; flex-direction: column; gap: 3px; }

.gal-dada-etq {
  font-family: var(--display);
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--bronze-clar);
}

.gal-dada-val {
  font-size: 13px;
  color: rgba(255, 255, 255, .88);
}

@media (max-width: 700px) {
  .gal-text { font-size: 16px; }
  .gal-info { padding: 50px 18px 20px; }
  .gal-fletxa { display: none; }
}

/* visor de foto: pantalla completa, centrat, amb zoom */
.visor {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

.visor::backdrop { background: rgba(12, 15, 20, .92); }

.visor-escena {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: zoom-in;
}

.visor-escena.ampliada { cursor: grab; }
.visor-escena.arrossegant { cursor: grabbing; }

.visor img {
  max-width: 94vw;
  max-height: 88vh;
  border-radius: 8px;
  display: block;
  transform-origin: center center;
  transition: transform .18s ease-out;
  user-select: none;
  -webkit-user-drag: none;
}

.visor-escena.arrossegant img { transition: none; }

.visor-tancar {
  position: absolute;
  top: 16px; right: 20px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding-bottom: 3px;
  transition: background .13s;
}

.visor-tancar:hover { background: rgba(255, 255, 255, .2); }

.visor-ajuda {
  position: absolute;
  top: 22px; left: 24px;
  color: rgba(255, 255, 255, .5);
  font-size: 11.5px;
  letter-spacing: .04em;
  pointer-events: none;
}

/* barra inferior: miniatures de la visita + botó de portada */
.visor-barra {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: linear-gradient(to top, rgba(12, 15, 20, .96), rgba(12, 15, 20, 0));
}

.visor-miniatures {
  flex: 1;
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding: 2px;
}

.visor-miniatures img {
  width: 62px; height: 62px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  opacity: .55;
  border: 2px solid transparent;
  transition: opacity .14s, border-color .14s;
  flex-shrink: 0;
}

.visor-miniatures img:hover { opacity: .85; }

.visor-miniatures img.actiu {
  opacity: 1;
  border-color: var(--bronze-clar);
}

.visor-barra .boto { flex-shrink: 0; }

/* menú flotant d'accions (els tres punts) */
.menu-flotant {
  position: fixed;
  z-index: 70;
  background: #fff;
  border: 1px solid var(--linia);
  border-radius: 11px;
  box-shadow: var(--ombra-alta);
  padding: 5px;
  min-width: 172px;
  animation: puja .14s ease both;
}

.menu-opcio {
  padding: 8px 13px;
  font-size: 13px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--tinta);
  transition: background .12s;
}

.menu-opcio:hover { background: var(--paper); }

.menu-opcio.perill { color: var(--vermell); }
.menu-opcio.perill:hover { background: var(--vermell-fons); }

/* menú amb grups (contactes) */
.menu-flotant { max-height: 58vh; overflow-y: auto; }

.menu-grup {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bronze);
  background: var(--bronze-fons);
  border-radius: 7px;
  padding: 6px 12px;
  margin: 9px 0 5px;
}

.menu-grup:first-child { margin-top: 0; }

/* etiqueta amb botó «+» a la dreta */
.etiqueta-amb-boto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.boto-mes {
  width: 38px; height: 38px;
  border-radius: 9px;
  border: 1px solid var(--bronze);
  background: var(--bronze-fons);
  color: var(--bronze);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: background .13s, color .13s, transform .12s;
}

.boto-mes:hover {
  background: linear-gradient(160deg, #BE8748, var(--bronze));
  color: #fff;
}

.boto-mes:active { transform: scale(.94); }

/* l'etiqueta i el seu botó, ben junts */
.etiqueta-amb-boto {
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 6px;
}

.etiqueta-amb-boto .camp-etiqueta { margin: 13px 0 0; }

/* fila: camp d'escriptura + botó «+» + botó Contactes */
.fila-afegir {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.fila-afegir .camp { flex: 1; }

/* mateix vestit que el botó «+»: perímetre bronze i fons clar */
.boto-contactes {
  border: 1px solid var(--bronze);
  background: var(--bronze-fons);
  color: var(--bronze);
  padding: 0 16px;
  flex-shrink: 0;
  transition: background .13s, color .13s, transform .12s;
}

.boto-contactes:hover {
  background: linear-gradient(160deg, #BE8748, var(--bronze));
  color: #fff;
}

.boto-contactes:active { transform: scale(.97); }

/* llista d'assistents afegits */
.llista-assistents { margin-top: 10px; }

.assistent-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--linia);
  border-radius: 9px;
  background: #FAF9F6;
  margin-bottom: 6px;
  font-size: 13.5px;
}

.assistent-fila::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bronze);
  flex-shrink: 0;
}

.assistent-nom { flex: 1; }

.assistent-treure {
  background: none;
  border: none;
  color: var(--tinta-clara);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: color .12s, background .12s;
}

.assistent-treure:hover { color: var(--vermell); background: var(--vermell-fons); }

.assistents-buit {
  font-size: 12.5px;
  color: var(--tinta-clara);
  padding: 6px 2px;
}

.boto-punts { padding: 8px 10px; display: grid; place-items: center; }

/* toast */
.toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--grafit);
  color: #fff;
  font-size: 13px;
  padding: 11px 22px;
  border-radius: 999px;
  box-shadow: var(--ombra-alta);
  z-index: 60;
  animation: puja .3s ease both;
}

.toast.error { background: var(--vermell); }

/* scrollbars discrets */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #C9C4B8; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #B4AFA2; }
.llista-obres::-webkit-scrollbar-thumb { background: #39404F; }

/* responsive bàsic */
/* ─────────────────────────── tauleta i mòbil ── */

@media (max-width: 980px) {
  /* Una sola columna: el taulell recupera el scroll de tota la pàgina,
     perquè amb pantalla petita no hi caben dues columnes independents. */
  .taulell {
    /* minmax(0,…) i no 1fr: si no, el contingut de les targetes eixampla
       la columna i la pàgina se'n va cap a la dreta */
    grid-template-columns: minmax(0, 1fr);
    overflow-y: auto;
    min-height: 0;
  }
  .taulell > .col-visites,
  .taulell > .col-observacions { overflow: visible; padding-bottom: 0; }
  .taulell > .col-observacions { padding-bottom: 40px; }

  .principal { padding: 16px 18px 0; }
  .lateral { width: 220px; min-width: 220px; }
  .estadistiques { flex-wrap: wrap; gap: 14px; }
  .obra-capcalera h1 { font-size: 25px; }
}

/* Tauleta i mòbil: la barra lateral es converteix en un calaix que s'obre
   amb el botó de la capçalera. Amb 316 px fixos no hi cabia res més. */
@media (max-width: 820px) {
  body { position: relative; }

  /* Peu de la llista de projectes ben COMPACTE (petició de l'usuari, per
     guanyar alçada per als projectes): «+ Nova obra» i «Contactes» l'un al
     costat de l'altre, mitja amplada cadascun, i a sota una sola fila amb
     nom — versió — Sortir. */
  .lateral-peu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* safe-area: si el mòbil dibuixa de vora a vora (navegació per gestos),
       el peu s'aparta sol de la ratlleta del sistema */
    padding: 8px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .lateral-peu .boto-ample { flex: 1 1 40%; width: auto; white-space: nowrap; }
  .lateral-peu .boto-ample + .boto-ample { margin-top: 0; }
  .lateral-peu .boto-ample + .boto-ample::before { display: none; }
  .peu-usuari { width: 100%; margin-top: 2px; padding-top: 8px; }

  /* La llista de projectes és una PÀGINA sencera, com a les apps de mòbil:
     l'app s'obre aquí, en triar un projecte llisca cap a la seva pantalla,
     i la fletxa «enrere» de la capçalera hi torna. */
  .lateral {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: 100vw;
    max-width: none;
    z-index: 60;
    transform: translateX(-102%);
    /* més lent i suau: que es VEGI lliscar la pàgina (petició de l'usuari,
       amb .28s el canvi semblava de cop) */
    transition: transform .5s cubic-bezier(.3,.75,.25,1);
    border-right: none;
  }

  body.calaix-obert .lateral { transform: none; }

  .vel-calaix { display: none; }

  /* «‹ Projectes»: el botó d'enrere es veu i s'entén (la icona sola no
     s'intuïa). Amb text i alçada de dit. */
  .btn-calaix {
    display: flex !important;
    align-items: center;
    gap: 7px;
    height: 42px;
    padding: 0 14px 0 10px;
    font-family: var(--display);
    font-size: 13px;
    letter-spacing: .05em;
  }

  /* Al mòbil no hi ha capçalera fixa: la pantalla és massa petita i les
     llistes quedaven encabides en una finestreta amb scroll propi (i les
     seccions es trepitjaven). Aquí fa scroll TOTA la pàgina, com una web
     normal, i cada secció ocupa l'alçada que li cal.
     touch-action pan-y: el navegador només es queda el gest VERTICAL;
     els lliscaments horitzontals arriben sempre al nostre codi. */
  .principal { overflow-y: auto; display: block; touch-action: pan-y; }
  .lateral { touch-action: pan-y; }
  .vista-obra { display: block; min-height: 0; }
  .taulell {
    display: block;
    overflow: visible;
    min-height: auto;
  }
  .taulell > .col-visites,
  .taulell > .col-observacions { overflow: visible; min-height: auto; }
  .taulell > .col-visites { margin-bottom: 28px; }
  .principal { padding-bottom: env(safe-area-inset-bottom, 0px); }

  .principal { padding: 14px 16px 0; }

  /* Capçalera del projecte: a DALT de tot la fila de botons («‹ Projectes»
     a l'esquerra; Excel i editar a la dreta) i, a sota, la referència i el
     títol del projecte. En TARGETA BLANCA perquè es desenganxi del fons
     (petició de l'usuari: costava de veure), amb la regla bronze a tota
     l'amplada com a remat. */
  .obra-capcalera {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
    background: var(--targeta);
    border: 1px solid var(--linia);
    border-radius: var(--radi);
    box-shadow: var(--ombra);
    padding: 10px 14px 0;
    margin: 0 -4px;
  }
  .obra-capcalera .regla-bronze {
    width: auto;
    height: 4px;
    margin: 12px -14px 0;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--bronze-clar), var(--bronze));
  }
  .obra-accions { width: 100%; padding-top: 0; }
  .obra-accions .btn-calaix { margin-right: auto; }
  .obra-capcalera h1 { font-size: 22px; }
  .obra-subtitol { font-size: 13px; }

  /* Targeta d'observació COMPACTA: la foto a dalt a tota l'amplada;
     a sota el número, l'estat i la data; i el text ocupant tot el
     requadre blanc (abans quedava esclafat al costat de la foto). */
  .targeta-obs { flex-wrap: wrap; position: relative; padding: 10px 12px 12px; }
  .obs-foto, .obs-sense-foto { width: 100%; height: 190px; }
  .obs-sense-foto { height: 70px; }
  .obs-cos { flex: 1 1 100%; width: 100%; margin-top: 10px; }
  .obs-accions {
    position: absolute;
    top: 16px; right: 18px;
    background: rgba(255, 255, 255, .82);
    border-radius: 8px;
  }

  /* Capçalera COMPACTA: al mòbil cada píxel d'alçada compta.
     Els tres comptadors caben en una sola línia i les dreceres s'encongeixen. */
  .panell { gap: 10px; margin: 8px 0 10px; }
  .estadistiques { gap: 10px; flex-wrap: nowrap; margin: 0; }
  .stat { gap: 6px; }
  .stat-num { font-size: 20px; }
  .stat-etq { font-size: 10px; letter-spacing: .08em; }
  .stat-sep { height: 20px; }
  .enllacos-llista { gap: 2px; }
  .enllac-icona { width: 38px; height: 38px; border-radius: 10px; }
  .enllac-titol { font-size: 10.5px; }

  /* dits, no ratolí: tot el que es toca, més gros */
  .enllac { width: 70px; -webkit-touch-callout: none; user-select: none; }
  /* al mòbil, editar és amb toc MANTINGUT: els tres puntets no calen */
  .enllac-punts { display: none; }
  .boto-ull, .boto-pdf, .boto-compartir { width: 42px; height: 42px; }
  .boto-mes { width: 42px; height: 42px; }
  .visita-accions { gap: 4px; }
  .obs-punts, .boto-icona { width: 34px; height: 34px; }
  .obra-item-editar { width: 34px; height: 34px; }
  .camp, .boto { min-height: 42px; }
  .dialeg { width: 94vw; }
  .agenda { width: 96vw; height: 92vh; }

  /* Diàleg d'obra: la caixa d'imatge a tota amplada i els botons a sota,
     l'un al costat de l'altre (en columna quedaven esclafats). */
  .fila-imatge-obra { flex-wrap: wrap; }
  .imatge-obra-caixa { width: 100%; }
  .imatge-obra-botons { flex-direction: row; width: 100%; }
  .imatge-obra-botons .boto { flex: 1; white-space: nowrap; }

  /* Galeria: el comptador «01 / 09» s'aparta del botó de tancar */
  .gal-comptador { margin-right: 52px; }

  /* OBSERVACIONS = PÀGINA pròpia que entra lliscant per la DRETA (petició
     de l'usuari: res d'observacions a sota; al mòbil cada cosa és una
     pàgina). La pàgina del projecte queda només amb les visites. */
  .taulell > .col-observacions {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: var(--paper);
    transform: translateX(102%);
    transition: transform .5s cubic-bezier(.3,.75,.25,1);
    overflow-y: auto;
    padding: 16px 16px 40px;
    margin: 0;
    touch-action: pan-y;
    /* ⚠ CRÍTIC: l'animació d'entrada de l'escriptori (anima-4) acaba en
       transform:none i, amb fill "both", GUANYA per sempre sobre el
       translateX d'aquí: la pàgina quedava clavada tapant les visites. */
    animation: none;
  }
  body.obs-obertes .taulell > .col-observacions { transform: none; }
  .btn-obs-pagina {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
  }
  .btn-obs-tornar {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    margin-right: 10px;
    white-space: nowrap;
  }

  /* Croquis a PANTALLA COMPLETA: en un mòbil el diàleg no hi cabia i
     desbordava per la dreta. Barra d'eines compacta i tela a tota l'alçada. */
  .dialeg-croquis {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
  .dialeg-croquis .dialeg-cos {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 12px 12px 10px;
    box-sizing: border-box;
  }
  .barra-croquis { gap: 4px; margin-bottom: 8px; }
  .eina-cr { width: 38px; height: 38px; }
  #cr-gruix { width: 80px; }
  .tela-zona { flex: 1; max-height: none; min-height: 0; padding: 8px; }
}

/* El botó del calaix només existeix a pantalla petita */
.btn-calaix { display: none; }

/* Els botons de la pàgina d'observacions només existeixen al mòbil */
.btn-obs-pagina, .btn-obs-tornar { display: none; }

/* ─────────────────── login (mode plataforma, multiusuari) ── */

.pantalla-login {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1100px 600px at 78% -10%, rgba(169, 116, 58, .16), transparent 60%),
    linear-gradient(175deg, var(--grafit) 0%, #1B2130 100%);
}

.login-caixa {
  width: min(360px, 100%);
  background: var(--targeta);
  border-radius: 16px;
  border-top: 3px solid var(--bronze);
  box-shadow: var(--ombra-alta);
  padding: 30px 30px 26px;
  text-align: left;
}

.login-monograma {
  width: 52px; height: 52px;
  margin: 0 auto 12px;
  background: linear-gradient(150deg, var(--bronze-clar), var(--bronze));
  border-radius: 13px;
  display: grid; place-items: center;
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(169, 116, 58, .65);
}

.login-titol {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: .14em;
  text-align: center;
}

.login-sub {
  font-size: 12.5px;
  color: var(--tinta-suau);
  text-align: center;
  margin: 4px 0 18px;
}

.login-caixa .camp { width: 100%; }

.login-caixa .boto-ample { width: 100%; margin-top: 18px; justify-content: center; }

.login-error {
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--vermell-fons);
  color: var(--vermell);
  font-size: 12.5px;
}

/* Usuari amb la sessió iniciada, al peu de la barra lateral */
.peu-usuari {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(233, 236, 242, .12);
  font-size: 12px;
  color: var(--tinta-clara);
}

.peu-usuari-nom {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.peu-sortir {
  border: 1px solid rgba(233, 236, 242, .22);
  background: none;
  color: var(--tinta-clara);
  border-radius: 7px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}

.peu-sortir:hover { color: #fff; border-color: rgba(233, 236, 242, .45); }

/* Número de versió, a la mateixa fila que el nom i el «Sortir» (per saber
   si el mòbil té el codi nou; el posa el servidor amb l'hora de l'últim canvi) */
.versio-app {
  font-size: 10px;
  letter-spacing: .06em;
  color: rgba(233, 236, 242, .32);
  white-space: nowrap;
}