/* ═══════════════════════════════════════════════════════════════════
   GENERADOR DE DOCUMENTS (web) — el mateix llenguatge que Visites d'Obra:
   paper càlid, grafit, bronze; Bahnschrift per als títols, Segoe UI al cos.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --paper: #F3F1EC;
  --targeta: #FFFFFF;
  --grafit: #181D29;
  --grafit-2: #222836;
  --tinta: #14181F;
  --tinta-suau: #6B7280;
  --tinta-clara: #9AA1AC;
  --bronze: #A9743A;
  --bronze-clar: #D49A57;
  --bronze-fons: #F5EDE2;
  --linia: #E5E1D8;
  --linia-freda: #E8EAEE;
  --vermell: #C2382E;
  --vermell-fons: #FBEDEB;
  --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;
  --etiq: 150px;              /* amplada de les etiquetes (com els 140 px de l'escriptori) */
}

* { 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: 13.5px;
}
.ocult { display: none !important; }
button { font-family: inherit; }
/* cap anella de focus amb el ratolí: només amb el tabulador (body.teclat) */
button:focus, input:focus, textarea:focus { outline: none; }
body.teclat button:focus-visible { outline: 2px solid var(--bronze-clar); outline-offset: 2px; }

@keyframes puja { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ─────────────────────────────── barra lateral ── */
.lateral {
  width: 340px; min-width: 340px;
  /* el mateix fons que Visites d'Obra: grafit amb la retícula de GROMAAI insinuada (08/09, ell amb els dos programes de costat) */
  background-color: var(--grafit);
  background-image:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(175deg, var(--grafit) 0%, #1B2130 100%);
  background-size: 34px 34px, 34px 34px, 100% 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 14px 18px; }   /* = Visites */
/* la icona de sempre del programa (app_icon.png: la casa-document sobre el quadrat bronze) */
.monograma {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 10px; display: grid; place-items: center;
  box-shadow: 0 6px 16px -6px rgba(169, 116, 58, .6);
}
.monograma img { width: 48px; height: 48px; border-radius: 10px; display: block; }
.buida-icona img { width: 64px; height: 64px; border-radius: 14px; opacity: .85; }
.marca-text { min-width: 0; }
.marca-suite { font-family: var(--display); font-size: 9.5px; letter-spacing: .34em; color: var(--bronze-clar); opacity: .85; }
.marca-nom { font-family: var(--display); font-size: 15.5px; letter-spacing: .1em; color: #fff; margin-top: 1px; }   /* = Visites */
.marca-linia { display: flex; justify-content: space-between; gap: 10px; margin-top: 3px; }
.marca-sub { font-size: 11.5px; color: #9AA1AC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.versio-app { font-size: 10px; color: #6B7280; white-space: nowrap; }

.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-projectes { flex: 1; overflow-y: auto; padding: 4px 10px 10px; }
/* la fila del projecte, calcada de la fila de l'obra de Visites (.obra-item) */
.projecte-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 4px 9px 10px; border-radius: 11px; cursor: pointer;   /* = .obra-item de Visites */
  border: 1px solid transparent; transition: background .15s, border-color .15s; margin-bottom: 3px;
}
.projecte-item:hover { background: rgba(255, 255, 255, .05); }
.projecte-item.actiu { background: rgba(169, 116, 58, .16); border-color: rgba(212, 154, 87, .35); }
.projecte-imatge {
  width: 54px; height: 54px; border-radius: 9px; object-fit: cover; flex-shrink: 0;   /* 54 = la imatge de l'obra a Visites */
  background: #262D3C; border: 1px solid rgba(255, 255, 255, .09);
}
.projecte-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);
}
.projecte-editar {
  background: transparent; border: none; color: #6B7380; cursor: pointer; border-radius: 7px; flex-shrink: 0;
  display: grid; place-items: center; align-self: center; width: 30px; height: 30px; padding: 0;
  transition: color .13s, background .13s;
}
.projecte-editar:hover { color: var(--bronze-clar); background: rgba(255, 255, 255, .07); }
.projecte-text { flex: 1; min-width: 0; }
.projecte-ref { font-family: var(--display); font-size: 12.5px; letter-spacing: .1em; line-height: 1.45; color: var(--bronze-clar); }
/* el nom, amb el mateix vestit que la referència: a Visites la fila de l'obra és tota així («20210013_ALBA ORRA») */
.projecte-nom { font-family: var(--display); font-size: 12.5px; letter-spacing: .1em; line-height: 1.45; color: var(--bronze-clar); text-transform: uppercase; overflow-wrap: break-word; }
.lateral-buit { color: #79808F; font-size: 12px; text-align: center; padding: 30px 10px; line-height: 1.6; }
/* el missatge de mentre arriba la llista: classe PROPIA, que no es confongui amb «encara no hi ha projectes» */
.lateral-carregant { color: #79808F; font-size: 12px; text-align: center; padding: 30px 10px; line-height: 1.6; opacity: .75; }
/* el botó d'actualitzar del peu, com a Visites d'Obra */
#btn-refrescar.girant svg { animation: gira-refresc .8s linear infinite; }
@keyframes gira-refresc { to { transform: rotate(360deg); } }
.lateral-peu { padding: 12px 14px 16px; display: flex; gap: 8px; }
.lateral-peu .boto { display: flex; align-items: center; justify-content: center; gap: 8px; }
.lateral-peu .boto-ample { flex: 1 1 0; width: auto; }
/* contactes i configuració: mateixa alçada que «Nou projecte», només amb la icona */
.boto-peu { flex: 0 0 40px; padding: 0; background: rgba(255, 255, 255, .07); color: #E9ECF2; border: 1px solid rgba(255, 255, 255, .12); }
.boto-peu:hover { background: rgba(212, 154, 87, .22); border-color: var(--bronze-clar); color: #fff; }

/* ─────────────────────────────── 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-primari[disabled] { opacity: .55; cursor: default; box-shadow: none; }
.boto-suau { background: #EBE8E1; color: var(--tinta); }
.boto-suau:hover { background: #E1DDD3; }
.boto-ample { width: 100%; padding: 10px; }
.boto-petit { padding: 6px 12px; font-size: 12px; }
.boto-icona { background: transparent; border: none; color: var(--tinta-clara); font-size: 13px; cursor: pointer; padding: 4px 8px; 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); }
.boto-afegir { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--bronze); background: transparent; border: none; cursor: pointer; padding: 6px 4px; margin-top: 4px; }
.boto-afegir:hover { text-decoration: underline; }

/* ─────────────────────────────── contingut ── */
.principal { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.pantalla-buida { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--tinta-clara); gap: 8px; }
.buida-icona { color: var(--bronze-clar); opacity: .8; margin-bottom: 8px; }
.buida-titol { font-family: var(--display); font-size: 20px; letter-spacing: .08em; color: var(--tinta-suau); }
.buida-text { font-size: 13px; }

.vista-projecte { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 20px 42px 0; }
.capcalera { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.cap-ref { font-family: var(--display); font-size: 12px; letter-spacing: .18em; color: var(--bronze); }
.cap-nom { font-family: var(--display); font-size: 27px; letter-spacing: .02em; line-height: 1.15; text-transform: uppercase; }
.cap-sub { font-size: 12.5px; color: var(--tinta-suau); margin-top: 3px; }
.capcalera-accions { display: flex; gap: 8px; align-items: center; padding-bottom: 4px; }
/* el botó Documents és «viu»: respira amb la mateixa aurèola bronze que la IA de Visites d'Obra */
#btn-documents { animation: viu 3.4s ease-in-out infinite; }
@keyframes viu {
  0%, 100% { box-shadow: 0 6px 14px -6px rgba(169, 116, 58, .55), 0 0 0 0 rgba(212, 154, 87, .55); }
  50%      { box-shadow: 0 6px 14px -6px rgba(169, 116, 58, .55), 0 0 0 7px rgba(212, 154, 87, 0); filter: brightness(1.06); }
}
@media (prefers-reduced-motion: reduce) { #btn-documents { animation: none; } }
/* al costat del botó Desar: l'hora del darrer desat, o l'avís de canvis pendents */
.estat-desat { font-size: 12px; color: var(--tinta-clara); margin-right: 6px; white-space: nowrap; }
.estat-desat.brut { color: var(--bronze); font-weight: 600; }
.estat-desat.brut::before { content: "● "; }
.regla-bronze { width: 44px; height: 3px; background: var(--bronze); border-radius: 2px; margin: 12px 0 14px; flex-shrink: 0; }

.formulari { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-content: start; padding-bottom: 90px; padding-right: 6px; }
.columna { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ─────────────────────────────── seccions ── */
/* La barra verdosa (la part de la secció que ja té dades) és el FONS de la targeta,
   pintat només a l'alçada de la capçalera: així la retalla el mateix radi de la
   targeta i no hi queda cap línia blanca a sota (com passava amb una peça a dins). */
@property --pct { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.seccio {
  background-color: var(--targeta); border: 1px solid var(--linia); border-radius: var(--radi); box-shadow: var(--ombra); animation: puja .35s ease both;
  --verd-barra: rgba(46, 125, 70, .10);
  background-image: linear-gradient(90deg, var(--verd-barra) 0, var(--verd-barra) var(--pct), transparent var(--pct));
  background-repeat: no-repeat; background-size: 100% var(--alt-cap, 40px);
  transition: --pct .35s ease;
}
.seccio.plena { --verd-barra: rgba(46, 125, 70, .16); }
.seccio-cap { display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; user-select: none; }
.seccio-cap:hover { background: rgba(20, 24, 31, .025); border-radius: var(--radi); }
.seccio-chevron { width: 18px; height: 18px; color: var(--bronze); transition: transform .18s; flex-shrink: 0; }
.seccio.oberta .seccio-chevron { transform: rotate(90deg); }
.seccio-titol { font-family: var(--display); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta); flex: 1; min-width: 0; }
.seccio-chevron { width: 16px; height: 16px; }
.seccio-cos { display: none; padding: 2px 18px 16px; border-top: 1px solid var(--linia); }
.seccio.oberta .seccio-cos { display: block; }

/* peces del formulari */
.fila-camp { display: grid; grid-template-columns: var(--etiq) 1fr; gap: 10px; align-items: center; margin-top: 8px; }
.fila-camp.textarea { align-items: start; }
.fila-camp > .etiqueta { text-align: right; font-size: 12px; color: var(--tinta-suau); line-height: 1.25; padding-top: 1px; }
.fila-camp.textarea > .etiqueta { padding-top: 8px; }
.ia { color: var(--bronze); font-size: 9.5px; letter-spacing: .12em; margin-left: 5px; vertical-align: 1px; }
/* Una fila amb l'etiqueta al davant cau a la MATEIXA columna que la resta de
   camps: la primera etiqueta ocupa l'amplada de les etiquetes (--etiq) i va
   alineada a la dreta, com al programa d'escriptori. */
.fila-inline { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.fila-inline > .etiqueta { font-size: 12px; color: var(--tinta-suau); line-height: 1.25; }
.fila-inline > .etiqueta:first-child { flex: 0 0 var(--etiq); text-align: right; }
.fila-inline > .fila-camp { margin-top: 0; flex: 1 1 180px; min-width: 140px; }
.fila-inline > .camp, .fila-inline > .desp, .fila-inline > .fila-fitxer, .fila-inline > .tecnic-signant { flex: 1 1 120px; min-width: 90px; }
.fila-inline > .camp.curt { flex: 0 0 76px; min-width: 76px; }
.fila-inline:has(> textarea) { align-items: flex-start; }
.fila-inline:has(> textarea) > .etiqueta:first-child { padding-top: 8px; }
/* etiqueta A SOBRE del camp (rètols llargs i els blocs apilats de l'escriptori) */
.fila-camp.apilat { grid-template-columns: 1fr; gap: 4px; margin-top: 12px; }   /* comença a la columna dels camps (vegeu més avall) */
.fila-camp.apilat > .etiqueta { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suau); padding-top: 0; }
/* dins d'un bloc plegable (té 13 px de vora i coixí) la columna de les etiquetes
   s'escurça perquè els camps quedin a la mateixa columna que fora */
.plegable .fila-camp:not(.apilat) { grid-template-columns: var(--etiq) 1fr; }
.plegable .fila-inline > .etiqueta:first-child { flex-basis: var(--etiq); }

/* DUES COLUMNES NETES: a l'esquerra només hi ha etiquetes; tota la resta
   (subtítols, notes, taules, botons d'afegir, caselles, pastilles) comença al
   mateix punt que els camps. Els contenidors amb vora (plegable 13 px, fitxa
   15 px) descompten el seu coixí perquè el punt sigui el MATEIX a tot arreu. */
.seccio-cos > .nota, .seccio-cos > .pastilles, .seccio-cos > .casella, .seccio-cos > .fila-camp.apilat,
.bloc > .nota, .bloc > .pastilles, .bloc > .casella, .bloc > .fila-camp.apilat { margin-left: calc(var(--etiq) + 10px); }
.plegable-cos > .nota, .plegable-cos > .casella, .plegable-cos > .fila-camp.apilat { margin-left: calc(var(--etiq) + 10px); }
/* els subtítols, les taules i els grups de caselles són BLOCS: van a tota l'amplada,
   com a l'escriptori (dins de la columna dels camps les opcions sortien tallades) */
.bloc-taula { margin-top: 10px; }
.bloc-taula > .subtitol { margin-top: 0; }
.bloc-taula > .llista { margin-top: 2px; }
/* les llistes que ocupen tota l'amplada (l'etiqueta de cada fila va a la columna de l'esquerra):
   el seu botó d'afegir també comença a la columna dels camps */
.llista.forma-simple > .boto-afegir, .llista.forma-cataleg > .boto-afegir, .llista.forma-fitxa > .boto-afegir { margin-left: calc(var(--etiq) + 10px); }
.plegable-cos .llista.forma-simple > .boto-afegir, .plegable-cos .llista.forma-cataleg > .boto-afegir { margin-left: calc(var(--etiq) + 10px); }
.seccio-cos > .casella, .plegable-cos > .casella, .bloc > .casella { display: flex; }
.fila-inline > .llista { margin-left: 0; flex: 1 1 200px; }
.checklist .fila-inline > .etiqueta:first-child { flex: 0 0 auto; }
/* una taula amb rètol propi: el rètol a la columna de les etiquetes */
.llista.amb-titol { margin-left: 0 !important; display: grid; grid-template-columns: var(--etiq) 1fr; column-gap: 10px; align-items: start; }
.llista.amb-titol > .llista-titol { grid-column: 1; text-align: right; margin-top: 15px; }
.llista.amb-titol > :not(.llista-titol) { grid-column: 2; }
.subtitol { font-family: var(--display); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze); margin: 16px 0 2px; }
.seccio-cos .subtitol, .plegable-cap { background: var(--bronze-fons); border-radius: 8px; padding: 6px 10px; margin: 14px 0 6px; font-family: var(--display); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze); font-weight: 600; }
.nota { font-size: 11.5px; color: var(--tinta-clara); line-height: 1.45; margin-top: 6px; white-space: pre-line; }
/* les subseccions (08/09, tria seva «A»): sense requadre; el títol sobre una banda amb la trama de la casa,
   de cantó a cantó del contingut — el mateix llenguatge que els subtítols i que els grups de Documents */
.plegable { margin-top: 14px; }
.plegable-cap { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.plegable-cap > span { font: inherit; color: inherit; }
.plegable-cap .seccio-chevron { width: 13px; height: 13px; }
.plegable.oberta .plegable-cap .seccio-chevron { transform: rotate(90deg); }
.plegable-cos { display: none; padding: 0 0 4px; }
.plegable.oberta .plegable-cos { display: block; }
.bloc { margin-top: 2px; }
.bloc.amagat { display: none; }

.camp {
  width: 100%; border: 1px solid var(--linia); border-radius: 9px; background: #FAF9F6; padding: 7px 11px;
  font-family: var(--cos); font-size: 13px; color: var(--tinta); outline: none; transition: border-color .15s, box-shadow .15s;
  min-height: 34px;
}
.camp:focus { border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(169, 116, 58, .14); }
textarea.camp { resize: vertical; min-height: 78px; line-height: 1.4; }
/* el calendari de la casa (el mateix que CampCalendari a l'escriptori) */
.desp.data .camp[readonly] { background: #fff; }
.data-icona svg { display: block; }
.cal-flotant { position: fixed; z-index: 70; width: 272px; background: var(--targeta); border: 1px solid var(--linia); border-radius: 12px; box-shadow: var(--ombra-alta); padding: 10px 10px 10px; animation: puja .12s ease both; }
.cal-cap { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; }
.cal-titol { flex: 1; text-align: center; font-family: var(--display); font-size: 13px; letter-spacing: .04em; color: var(--tinta); }
.cal-nav { width: 26px; height: 26px; border-radius: 8px; border: none; background: transparent; color: var(--tinta-suau); font-size: 14px; font-weight: 700; cursor: pointer; display: grid; place-items: center; }
.cal-nav:hover { background: var(--bronze-fons); color: var(--bronze); }
.cal-setmana { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-family: var(--display); font-size: 10px; letter-spacing: .1em; color: var(--tinta-clara); margin-bottom: 2px; }
.cal-setmana span { padding: 3px 0; }
.cal-graella { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dia { height: 32px; border: 1.5px solid transparent; border-radius: 8px; background: transparent; color: var(--tinta); font-family: var(--cos); font-size: 12.5px; cursor: pointer; transition: background .1s, color .1s; }
.cal-dia:hover { background: var(--paper); }
.cal-dia.altre { color: var(--tinta-clara); }
.cal-dia.avui { border-color: var(--bronze); color: var(--bronze); font-weight: 600; }
.cal-dia.sel { background: var(--bronze); border-color: var(--bronze); color: #fff; font-weight: 600; }
.cal-dia.sel:hover { background: #946233; }
.cal-peu { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linia); }
.cal-espai { flex: 1; }
.cal-peu .boto-petit { padding: 5px 11px; font-size: 12px; }
.camp.curt { width: 90px; }
.camp-error { border-color: var(--vermell) !important; box-shadow: 0 0 0 3px rgba(194, 56, 46, .14) !important; }
.camp-ajuda { font-size: 12px; color: var(--tinta-suau); margin-top: 10px; line-height: 1.5; }

/* desplegable propi (el de sempre a la casa: res de <select> natiu) */
.desp { position: relative; width: 100%; }
.desp .camp { padding-right: 30px; }
.desp .camp[readonly] { cursor: pointer; background: #FAF9F6; }
.desp-fletxa { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border: none; background: transparent; color: var(--bronze); cursor: pointer; display: grid; place-items: center; border-radius: 6px; }
.desp-fletxa:hover { background: var(--bronze-fons); }
.desp-llista {
  position: fixed; z-index: 80; background: #fff; border: 1px solid var(--linia); border-radius: 11px; box-shadow: var(--ombra-alta);
  padding: 5px; max-height: 280px; overflow-y: auto; animation: puja .12s ease both; min-width: 160px; box-sizing: border-box;
}
.desp-opcio { padding: 7px 12px; font-size: 13px; border-radius: 8px; cursor: pointer; color: var(--tinta); }
.desp-opcio:hover, .desp-opcio.marcada { background: var(--paper); }
.desp-opcio.actual { color: var(--bronze); font-weight: 600; }
.desp-opcio.construccio, .desp-opcio.construccio:hover { color: var(--tinta-clara); cursor: default; background: transparent; }
.desp-buit { padding: 7px 12px; font-size: 12px; color: var(--tinta-clara); }

/* fitxers i carpetes (al PC: el diàleg del sistema, pel servidor) */
.fila-fitxer { display: flex; gap: 6px; align-items: stretch; width: 100%; }
.fila-fitxer .camp { flex: 1; min-width: 0; font-size: 12px; }

/* caselles pròpies */
.casella { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 12.5px; margin: 6px 0 0; user-select: none; line-height: 1.3; }
.casella input { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; border: 1.5px solid #C9C4B8; border-radius: 5px; background: #fff; display: grid; place-items: center; flex-shrink: 0; cursor: pointer; transition: background .12s, border-color .12s; }
.casella input:checked { background: var(--bronze); border-color: var(--bronze); }
.casella input:checked::after { content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.casella-grup { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin-top: 4px; }
.checklist-cap { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.checklist-cap .subtitol { margin: 0; flex: 1; }
.enllac { background: none; border: none; color: var(--bronze); font-size: 11.5px; cursor: pointer; padding: 2px 4px; }
.enllac:hover { text-decoration: underline; }

/* pastilles (ràdio) */
.pastilles { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.pastilla { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--linia); background: #FAF9F6; font-size: 12.5px; cursor: pointer; color: var(--tinta-suau); transition: all .12s; }
.pastilla.activa { background: var(--bronze); border-color: var(--bronze); color: #fff; }

/* llistes dinàmiques */
.llista { margin-top: 8px; }
.llista-cap { display: grid; column-gap: 10px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-clara); padding: 8px 40px 1px 0; }
.llista-fila { display: grid; column-gap: 10px; align-items: center; margin-top: 5px; }
.llista-fila .etiqueta-fila { font-size: 12px; color: var(--tinta-suau); text-align: right; }
.llista-titol + .llista-fila { margin-top: 4px; }
/* el botó de treure (files de taula, fitxes de promotor…): sempre la creu fina de la casa */
.boto-treure { width: 26px; height: 26px; border-radius: 7px; border: none; background: transparent; color: var(--tinta-clara); cursor: pointer; font-size: 14px; line-height: 1; display: inline-grid; place-items: center; flex-shrink: 0; }
.boto-treure:hover { background: var(--vermell-fons); color: var(--vermell); }
.llista-titol { font-size: 12px; color: var(--tinta-suau); margin-top: 10px; }
/* la fitxa (un promotor): els seus camps cauen a la mateixa columna que la
   resta de la secció (la vora i el coixí de la fitxa, 15 px, es descompten) */
.fitxa { border: 1px solid var(--linia); border-radius: 10px; padding: 10px 14px 12px; margin-top: 10px; background: #FCFBF9; }
.fitxa-cap { display: flex; align-items: center; gap: 10px; }
.fitxa-cap .fitxa-titol { font-family: var(--display); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--bronze); flex: 0 0 calc(var(--etiq) - 15px); text-align: right; }
.fitxa-cap .desp { flex: 1; }
.fitxa-cap .etiqueta { font-size: 12px; color: var(--tinta-suau); }
.fitxa-cap .curt { width: 64px; }
.fitxa-cos .fila-camp { grid-template-columns: calc(var(--etiq) - 15px) 1fr; }
.fitxa-cos .subtitol { margin-top: 12px; }

/* el tècnic signant */
.tecnic-signant { display: flex; align-items: center; gap: 8px; flex: 1; }
.tecnic-signant .desp { flex: 1; }

/* ─────────────────────────────── el calaix dels documents ── */
.vel { position: fixed; inset: 0; background: rgba(20, 24, 31, .28); z-index: 40; backdrop-filter: blur(2px); }
/* la finestra dels documents: al centre, tots els documents de cop, en dues columnes */
.dialeg.dialeg-documents { width: min(1040px, 94vw); max-height: 92vh; background: var(--targeta); padding: 0; overflow: hidden; }
.dialeg-documents[open] { display: flex; flex-direction: column; }
.calaix-cap-dreta { display: flex; align-items: center; gap: 14px; }
.calaix-total { font-size: 12.5px; color: var(--tinta-clara); }
.calaix-total.marcats { color: var(--verd); font-weight: 600; }
@keyframes entra { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.calaix-cap { display: flex; align-items: center; justify-content: space-between; padding: 18px 26px 12px; border-bottom: 1px solid var(--linia); }
.calaix-suptitol { font-family: var(--display); font-size: 13px; letter-spacing: .14em; color: var(--tinta); }
.calaix-projecte { font-size: 12px; color: var(--bronze); margin-top: 3px; }
.calaix-cos { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 26px 14px; column-count: 2; column-gap: 34px; }
/* ⚠ a la 2a columna el marge de dalt del primer grup es perd (salt de columna): el primer de tots
   tampoc no en porta, i així PROJECTE i FINAL D'OBRA queden a la mateixa línia */
.grup-docs { margin-top: 10px; break-inside: avoid; }
.grup-docs:first-child { margin-top: 0; }
/* els títols dels grups, amb una trama a tota l'amplada perquè es vegin (petició de l'usuari) */
.grup-docs-cap { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bronze-fons); border-radius: 8px; border-bottom: none; margin-bottom: 6px; }
.grup-docs-cap .subtitol { font-size: 12.5px; letter-spacing: .14em; }
.grup-docs .doc-fila { padding-left: 12px; }
.grup-docs-cap .seccio-chevron { display: none; }
.grup-docs-cap .subtitol { margin: 0; flex: 1; }
.grup-docs-cap .compte { font-size: 11px; color: var(--tinta-clara); }
.grup-docs-cap .compte.marcats { color: var(--verd); font-weight: 600; }
.grup-docs-cos { display: block; }
.doc-fila { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.doc-fila .casella { flex: 1; margin: 0; }
.doc-fila .casella span { line-height: 1.25; }
.doc-fila .casella.construccio { color: var(--tinta-clara); cursor: default; }
.doc-fila .casella.construccio input { cursor: default; opacity: .5; }
.doc-fila .desp { width: 130px; flex: 0 0 130px; }
.doc-fila .desp .camp { padding: 4px 26px 4px 9px; min-height: 28px; font-size: 12px; }
.doc-avis { font-size: 11px; color: var(--bronze); font-weight: 600; margin-left: 4px; white-space: nowrap; }
/* la icona de la IA als documents que en porten: LA MATEIXA que a Visites (línies + estrelleta), viva
   quan la IA hi és; apagada (grisa, sense batec) quan s'ha demanat generar-lo sense textos d'IA */
.boto-ia-doc { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--bronze); background: var(--bronze-fons); color: var(--bronze); cursor: pointer; display: inline-grid; place-items: center; padding: 0; flex-shrink: 0; transition: color .15s, background .15s, border-color .15s; }
.boto-ia-doc.on { animation: ia-viva 3.4s ease-in-out infinite; }
.boto-ia-doc.on svg { filter: drop-shadow(0 0 4px rgba(212, 154, 87, .8)); }
.boto-ia-doc:not(.on) { color: #B4AEA2; border-color: var(--linia); background: transparent; opacity: .8; }
.boto-repas-doc { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--linia); background: transparent; color: #B4AEA2; cursor: pointer; display: inline-grid; place-items: center; padding: 0; flex-shrink: 0; opacity: .8; transition: color .15s, background .15s, border-color .15s, opacity .15s; }
.boto-repas-doc.on { border-color: var(--bronze); background: var(--bronze-fons); color: var(--bronze); opacity: 1; animation: ia-viva 3.4s ease-in-out infinite; }
.boto-repas-doc.on svg { filter: drop-shadow(0 0 4px rgba(212, 154, 87, .8)); }
.boto-repas-doc.mini { width: 22px; height: 22px; border-radius: 6px; cursor: default; animation: none; }
.boto-repas-doc.mini svg { width: 14px; height: 14px; }
.boto-ia-doc.mini { width: 22px; height: 22px; border-radius: 6px; cursor: default; animation: none; }
.boto-ia-doc.mini svg { width: 14px; height: 14px; }
@keyframes ia-viva {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 154, 87, .55); }
  50%      { box-shadow: 0 0 0 6px rgba(212, 154, 87, 0); }
}
@media (prefers-reduced-motion: reduce) { .boto-ia-doc.on { animation: none; } }
.calaix-peu { padding: 12px 26px 18px; border-top: 1px solid var(--linia); flex-shrink: 0; }
.calaix-peu-fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* portàtils baixos (768 px): la finestra pot créixer una mica més perquè hi càpiguen tots els documents */
@media (max-height: 800px) {
  .dialeg.dialeg-documents { max-height: 97vh; }
  .calaix-cap { padding: 12px 26px 8px; }
  .calaix-peu { padding: 8px 26px 12px; }
}
.calaix-llegenda { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tinta-clara); }
/* GENERAR en VERD (petició de l'usuari): el mateix verd ple dels botons «prou» de Visites (var(--verd), text blanc) */
.boto-generar { font-family: var(--display); letter-spacing: .08em; font-size: 14px; padding: 13px 22px; background: var(--verd); color: #fff; box-shadow: 0 6px 14px -6px rgba(46, 125, 70, .55); }
.boto-generar:hover { background: #256639; }
.boto-generar[disabled] { background: var(--verd); opacity: .45; cursor: default; box-shadow: none; }
.progres { margin-bottom: 10px; }
.progres-barra { height: 6px; background: var(--linia); border-radius: 999px; overflow: hidden; }
.progres-omplert { height: 100%; width: 0; background: linear-gradient(90deg, var(--bronze-clar), var(--bronze)); border-radius: 999px; transition: width .4s ease; }
.progres-text { font-size: 12px; color: var(--tinta-suau); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.generats { margin-top: 10px; max-height: 24vh; overflow-y: auto; }
.generats-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.generats-toggle .seccio-chevron { width: 12px; height: 12px; transition: transform .15s; }
.generats:not(.plegat) .generats-toggle .seccio-chevron { transform: rotate(90deg); }
.generats.plegat .generat { display: none; }
.generats-titol { font-family: var(--display); font-size: 11px; letter-spacing: .12em; color: var(--tinta-suau); margin: 6px 0 4px; display: flex; align-items: center; justify-content: space-between; }
.generats-titol .enllac { font-family: var(--cos); letter-spacing: 0; }
.generat { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 5px 0; border-top: 1px solid var(--linia-freda); }
.generat a { color: var(--tinta); text-decoration: none; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.generat a:hover { color: var(--bronze); }
.generat .carpeta { font-size: 10.5px; color: var(--tinta-clara); letter-spacing: .06em; text-transform: uppercase; flex: 0 0 auto; }
.generat .mida { font-size: 11px; color: var(--tinta-clara); }

/* ─────────────────────────────── diàlegs, menú, toast ── */
.dialeg { border: none; border-radius: 16px; box-shadow: var(--ombra-alta); padding: 0; width: min(560px, 92vw); max-height: 92vh; margin: auto; }
.dialeg-estret { width: min(420px, 92vw); }
.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; }
.dialeg-peu { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.resultat-text { font-family: var(--cos); font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; max-height: 55vh; overflow-y: auto; background: #FAF9F6; border: 1px solid var(--linia); border-radius: 9px; padding: 12px 14px; }
.confirmar-text { font-size: 13.5px; line-height: 1.5; color: var(--tinta); white-space: pre-line; }

.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; max-height: 58vh; overflow-y: auto; }
.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); }

.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: 90; animation: puja .3s ease both; max-width: 80vw; }
.toast.error { background: var(--vermell); }

/* ─────────────────────────────── l'agenda de contactes (copiada de Visites d'Obra) ── */
.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: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px 18px; padding: 18px 22px 14px; background: var(--targeta); border-bottom: 1px solid var(--linia); }
.agenda-cap .agenda-titol-blok { grid-column: 1; grid-row: 1; }
.agenda-cap .agenda-eines { grid-column: 2; grid-row: 1; }
.agenda-cap .visor-tancar { grid-column: 3; grid-row: 1; }
.visor-tancar { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linia); background: var(--targeta); color: var(--tinta-suau); font-size: 24px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding-bottom: 3px; transition: background .13s; }
.visor-tancar:hover { background: var(--paper); border-color: var(--bronze); color: var(--bronze); }
.agenda-titol { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: .02em; }
.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-filtres { padding: 12px 22px; background: var(--targeta); border-bottom: 1px solid var(--linia); }
.tria-filtre { width: 100%; display: flex; align-items: center; gap: 10px; background: var(--targeta); border: 1px solid var(--linia); border-radius: 9px; padding: 10px 13px; cursor: pointer; color: var(--tinta); transition: border-color .14s, background .14s; }
.tria-filtre:hover { border-color: var(--bronze); }
.tria-filtre.actiu { border-color: var(--bronze); background: var(--bronze-fons); }
.tria-ico { color: var(--bronze); flex-shrink: 0; }
.tria-text { flex: 1; text-align: left; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tria-compte { font-family: var(--display); font-size: 11.5px; letter-spacing: .08em; color: var(--bronze); background: var(--bronze-fons); border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums; }
.tria-filtre.actiu .tria-compte { background: var(--targeta); }
.tria-fletxa { color: var(--tinta-clara); flex-shrink: 0; }
.tria-filtre:hover .tria-fletxa { color: var(--bronze); }
.agenda-llista { flex: 1; overflow-y: auto; padding: 0 22px 22px; }
.agenda-lletra { font-family: var(--display); font-size: 11px; letter-spacing: .18em; color: var(--bronze); padding: 10px 22px 7px; margin: 4px -22px 0; position: sticky; top: 0; z-index: 2; background: var(--paper); border-bottom: 1px solid var(--linia); }
.agenda-lletra:first-child { margin-top: 0; }
.contacte { display: flex; align-items: center; gap: 10px; 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.editable { cursor: pointer; }
.contacte.editable:hover { border-color: var(--bronze); box-shadow: var(--ombra); }
.cont-cos { flex: 1; min-width: 0; }
.cont-nom { font-size: 14px; font-weight: 600; line-height: 1.3; }
.cont-detall { font-size: 12px; color: var(--tinta-clara); margin-top: 1px; }
.cont-accions { display: flex; gap: 7px; flex-shrink: 0; }
.cont-accio { width: 36px; height: 36px; border-radius: 50%; background: var(--bronze-fons); color: var(--bronze); display: grid; place-items: center; text-decoration: none; transition: background .14s, color .14s; }
.cont-accio:hover { background: var(--bronze); color: #fff; }
.col-buida { color: var(--tinta-clara); font-size: 13px; text-align: center; padding: 40px 10px; }
.menu-grup { font-family: var(--display); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); padding: 8px 13px 4px; }
.menu-opcio.perill { color: var(--vermell); }
.menu-opcio.perill:hover { background: var(--vermell-fons); }
/* la fitxa de contacte: el tipus en pastilles */
.tipus-contacte { display: flex; flex-wrap: wrap; gap: 8px; }
.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; }
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ─────────────────────────────── configuració (copiada de Visites d'Obra) ── */
#dialeg-config { width: min(560px, 92vw); }
.config-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.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; }
.logo-caixa { background: #FFFFFF; }
.logo-caixa img { width: calc(100% - 20px); height: calc(100% - 20px); inset: 10px; object-fit: contain; }
.imatge-obra-botons { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.foto-ajuda { text-align: center; font-size: 11.5px; color: var(--tinta-clara); line-height: 1.5; }
.boto-perill-suau { background: transparent; color: var(--vermell); border: 1px solid #EBD4D1; }
.boto-perill-suau:hover { background: var(--vermell-fons); }
.fila-tecnics { display: flex; align-items: flex-start; gap: 10px; }
.fila-tecnics #llista-tecnics { flex: 1; min-width: 0; }
.fila-tecnics #llista-tecnics:empty { display: none; }
.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; cursor: pointer; }
.assistent-fila:hover { border-color: var(--bronze); }
.assistent-nom { flex: 1; }
.tecnic-defecte { background: var(--bronze-fons); border-color: var(--bronze); }
.promotor-sota { display: block; font-size: 11.5px; color: var(--tinta-clara); margin-top: 2px; }
/* el «+» de la casa (38×38, com a Visites) */
.boto-mes { width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--bronze); background: var(--bronze-fons); color: var(--bronze); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; font-size: 18px; line-height: 1; 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); }
.boto-afegir .boto-mes { width: 30px; height: 30px; border-radius: 8px; }


/* ─────────────────────────────── els botons de la secció (obren els diàlegs de l'escriptori) ── */
.fila-boto { margin: 8px 0 2px calc(var(--etiq) + 10px); }
.fila-boto .boto { font-weight: 600; }
.amb-botons .fila-boto { margin-top: 4px; }
.nota-fitxes { white-space: pre-line; margin-left: calc(var(--etiq) + 10px); }
.nota-excel { margin-left: calc(var(--etiq) + 10px); }
.nota-excel.be { color: var(--verd); }
.nota-excel.mal { color: var(--vermell); }

/* ─────────────────────────────── calculadora del PEM ── */
.dialeg.dialeg-pem { width: min(1180px, 96vw); }
.pem-globals { display: flex; gap: 26px; align-items: center; background: var(--paper); border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; }
.pem-global { display: flex; align-items: center; gap: 10px; }
.pem-global .etiqueta { font-size: 12.5px; color: var(--tinta-suau); white-space: nowrap; }
.pem-global .camp.curt { width: 90px; text-align: right; font-weight: 600; }
.pem-cg { flex: 1; min-width: 0; }
.pem-cg .desp { flex: 1; min-width: 0; }
.pem-valor { font-family: var(--display); color: var(--bronze); font-size: 13px; white-space: nowrap; }
.pem-cap, .pem-fila { display: grid; grid-template-columns: 28px 1.1fr 1.6fr 1.3fr 1.6fr 82px 118px 84px 30px; gap: 6px; align-items: center; }
.pem-cap { font-family: var(--display); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-clara); padding: 0 0 6px; border-bottom: 1px solid var(--linia); }
.pem-cap .dreta, .pem-fila .dreta { text-align: right; }
.pem-zones { max-height: 38vh; overflow-y: auto; padding: 4px 0; }
.pem-fila { padding: 4px 0; }
.pem-fila .num { text-align: center; color: var(--tinta-suau); font-size: 12px; }
.pem-fila .camp { min-height: 32px; padding: 5px 9px; font-size: 12.5px; }
.pem-fila .desp .camp { padding-right: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pem-fila .pres { font-weight: 600; color: var(--bronze); font-size: 12.5px; }
.pem-fila .eur { color: var(--tinta-suau); font-size: 12px; }
.pem-resultats { margin-top: 10px; border-top: 2px solid var(--bronze); background: var(--paper); border-radius: 0 0 10px 10px; padding: 10px 16px; }
.pem-res { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; font-size: 12.5px; color: var(--tinta-suau); }
.pem-res b { font-size: 13px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.pem-res-pr { font-family: var(--display); font-size: 12.5px; letter-spacing: .06em; color: var(--tinta); }
.pem-res-pr b { color: var(--bronze); font-size: 16px; }

/* ─────────────────────────────── resum de pressupost ── */
.dialeg.dialeg-resum { width: min(640px, 94vw); }
.resum-info { display: flex; gap: 22px; align-items: center; background: var(--paper); border-radius: 10px; padding: 9px 14px; margin-bottom: 10px; font-size: 13px; }
.resum-suma { font-family: var(--display); font-size: 12px; letter-spacing: .04em; color: var(--bronze); }
.resum-suma.mal { color: var(--vermell); }
.resum-cap, .resum-fila, .resum-total { display: grid; grid-template-columns: 30px 1fr 84px 120px; gap: 8px; align-items: center; }
.resum-cap { font-family: var(--display); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-clara); padding-bottom: 6px; border-bottom: 1px solid var(--linia); }
.resum-cap .dreta, .resum-fila .dreta, .resum-total .dreta { text-align: right; }
.resum-files { max-height: 52vh; overflow-y: auto; }
.resum-fila { padding: 2px 0; font-size: 12.5px; }
.resum-fila .num { color: var(--tinta-suau); }
.resum-fila .camp { min-height: 28px; padding: 3px 8px; font-size: 12.5px; text-align: right; }
.resum-fila .imp { text-align: right; font-variant-numeric: tabular-nums; color: var(--tinta-suau); }
.resum-total { margin-top: 6px; padding-top: 8px; border-top: 2px solid var(--bronze); font-size: 13px; }
.resum-total b { font-variant-numeric: tabular-nums; }


/* ─────────────────────────────── la caràtula dels plànols ── */
.dialeg.dialeg-caratula { width: min(1280px, 96vw); max-height: 94vh; }
.dialeg-caratula[open] { display: flex; flex-direction: column; }
.car-cos { display: flex; flex-direction: column; flex: 1; min-height: 0; max-height: none; overflow: hidden; }
.car-barra { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.car-fitxer { font-size: 12.5px; color: var(--tinta-suau); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.car-espai { flex: 1; }
.car-perfil { display: flex; align-items: center; gap: 8px; }
.car-perfil .etiqueta { font-size: 12px; color: var(--tinta-suau); white-space: nowrap; }
.car-perfil .desp, .car-perfil .camp { width: 220px; }
.car-perfil .camp { min-height: 34px; }
.car-mig { display: grid; grid-template-columns: 1fr 250px; gap: 14px; flex: 1; min-height: 0; }
.car-vista { position: relative; background: #DAD6CD; border-radius: 10px; overflow: hidden; height: 62vh; min-height: 380px; cursor: crosshair; user-select: none; }
.car-full { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.car-full img { display: block; box-shadow: 0 6px 24px rgba(20, 24, 31, .25); background: #fff; }
.car-rects { position: absolute; inset: 0; pointer-events: none; }
.car-rect { position: absolute; border: 2px solid var(--bronze); background: rgba(212, 154, 87, .14); box-sizing: border-box; pointer-events: none; }
.car-rect.trasllat { border-style: dashed; }
.car-rect.temp { border-color: var(--verd); background: rgba(46, 125, 70, .12); }
.car-rect .car-etiq { position: absolute; left: 0; top: 0; transform: translateY(-100%); font-family: var(--display); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--bronze); padding: 1px 6px; border-radius: 4px 4px 0 0; white-space: nowrap; }
.car-buit { position: absolute; inset: 0; display: grid; place-items: center; color: var(--tinta-suau); font-size: 13px; padding: 30px; text-align: center; }
.car-costat { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; }
.car-pagines { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 13px; }
.car-pagines span { min-width: 70px; text-align: center; }
.car-mida { font-size: 12px; color: var(--tinta-suau); }
.car-ajuda { font-size: 11.5px; color: var(--tinta-clara); line-height: 1.4; }
.car-zona { border: 1px solid var(--linia); border-radius: 9px; padding: 8px 10px; background: #FAF9F6; }
.car-zona.marcant { border-color: var(--verd); box-shadow: 0 0 0 3px rgba(46, 125, 70, .12); }
.car-zona-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--display); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze); }
.car-zona-cap .boto { padding: 3px 9px; font-size: 11px; }
.car-zona-valor { font-size: 12.5px; margin-top: 4px; word-break: break-word; min-height: 18px; }
.car-zona-valor.buit { color: var(--tinta-clara); }
.car-estat { font-size: 12px; color: var(--tinta-suau); line-height: 1.4; }
.car-estat.mal { color: var(--vermell); }
.car-prova { max-height: 60vh; overflow-y: auto; font-family: Consolas, "Courier New", monospace; font-size: 12px; white-space: pre; line-height: 1.5; background: var(--paper); border-radius: 9px; padding: 12px 14px; }


/* ─────────────────────────────── les ajudes (la finestreta de la casa, no el tooltip del navegador) ── */
.etiqueta[data-ajuda], .ia[data-ajuda], .subtitol[data-ajuda] { cursor: help; }
.etiqueta[data-ajuda]:hover, .subtitol[data-ajuda]:hover { color: var(--bronze); }
.pista { position: fixed; z-index: 90; max-width: 340px; background: var(--targeta); border: 1px solid var(--linia); border-left: 3px solid var(--bronze); border-radius: 10px; box-shadow: var(--ombra-alta); padding: 10px 14px 11px; font-size: 12.5px; line-height: 1.5; color: var(--tinta); pointer-events: none; animation: puja .12s ease both; }
.pista-titol { font-family: var(--display); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze); margin-bottom: 4px; }
.pista-titol .ia { margin-left: 6px; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #C9C4B8; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* pantalles estretes: una sola columna (és una app d'ordinador, però que no es trenqui) */
@media (max-width: 1280px) {
  .formulari { grid-template-columns: 1fr; }
}

/* ── taules compactes (coberta, façana, fusteria, acabats addicionals): com un camp més ── */
.fila-camp.fila-llista { align-items: start; }
.fila-camp.fila-llista > .etiqueta { padding-top: 10px; }
.llista.compacta { margin-top: 0; min-width: 0; }
.llista.compacta > .llista-fila { margin-top: 0; column-gap: 2px; margin-right: -18px; }   /* el ✕ penja al coixí del plegable: les caselles queden arran del marge dret dels altres camps */
.llista.compacta > .llista-fila > .boto-treure { width: 16px; height: 16px; min-width: 0; padding: 0; font-size: 11px; }
.llista.compacta > .llista-fila + .llista-fila { margin-top: 5px; }
.llista.compacta > .llista-fila .desp { min-width: 0; }
.llista.compacta > .llista-fila .camp { min-width: 0; text-overflow: ellipsis; }
.llista.compacta > .boto-afegir { padding: 0; margin: 5px 0 2px; }
.boto-afegir.sol .boto-mes { width: 28px; height: 28px; border-radius: 7px; }
.boto-afegir.sol .boto-mes svg { width: 15px; height: 15px; }
/* si la columna dels camps és estreta (pantalles de menys de 1600 px), les tres caselles no hi caben
   llegibles: l'etiqueta va a sobre i les files ocupen tota l'amplada, sempre sense capçalera */
.plegable-cos, .seccio-cos { container-type: inline-size; }
@container (max-width: 600px) {
  .plegable-cos .fila-camp.fila-llista, .seccio-cos .fila-camp.fila-llista { grid-template-columns: 1fr; gap: 4px; margin-top: 12px; }
  .plegable-cos .fila-camp.fila-llista > .etiqueta, .seccio-cos .fila-camp.fila-llista > .etiqueta { text-align: left; padding-top: 0; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suau); }
}

/* ── plegable «en construcció» (Resta de plànols): es veu en gris i no es pot tocar ── */
.plegable.construccio .plegable-cap { color: var(--tinta-clara); background: var(--paper); }
.plegable.construccio .plegable-cos { opacity: .55; }
/* ── enllaç dins d'una nota (p. ex. «Veure un exemple» del plànol d'emplaçament) ── */
.nota-enllac { color: var(--bronze); font-weight: 600; text-decoration: none; white-space: nowrap; margin-left: 6px; }
.nota-enllac:hover { text-decoration: underline; }

/* ── catàlegs: el «+ Afegir…» i el «Gestionar base de dades» a la mateixa fila ── */
.accions-cataleg { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.accions-cataleg > .boto:last-child { margin-left: auto; }   /* el «Gestionar» arran del marge dret, com els altres camps */
.seccio-cos .nota.ampla, .plegable-cos .nota.ampla { margin-left: 0 !important; margin-top: 2px; margin-bottom: 4px; }
.accions-cataleg > .boto-afegir { margin-top: 0; }
.accions-cataleg > .boto { font-size: 12px; padding: 7px 12px; }
.llista.forma-cataleg > .accions-cataleg { margin-left: calc(var(--etiq) + 10px); }

/* ── finestra de Documents: on es desen (la carpeta pròpia del projecte o la del programa) ── */
.calaix-carpeta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--tinta-suau); margin-bottom: 10px; }
.calaix-carpeta svg { flex-shrink: 0; color: var(--bronze); }
.calaix-carpeta-etq { flex-shrink: 0; }
.calaix-carpeta-ruta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta); }
.calaix-carpeta-ruta.defecte { color: var(--tinta-clara); font-style: italic; }
.calaix-carpeta .enllac { font-size: 16px; line-height: 1; padding: 0 6px; }

/* ── la icona de carpeta de cada projecte (obre la carpeta dels documents o la tria) ── */
.projecte-carpeta {
  background: transparent; border: none; cursor: pointer; border-radius: 7px; flex-shrink: 0;
  display: grid; place-items: center; align-self: center; width: 26px; height: 30px; padding: 0;
  margin-right: -6px;   /* ben arrambada als tres punts (08/09) */
  color: #6B7380; opacity: .75; transition: color .13s, background .13s, opacity .13s;
}
.projecte-carpeta.te { color: var(--bronze-clar); opacity: 1; }
.projecte-carpeta:hover { color: var(--bronze-clar); opacity: 1; background: rgba(255, 255, 255, .07); }

/* ── comprovació de camps buits (finestra de Documents) ── */
.comprovacio { margin-top: 10px; max-height: 26vh; overflow-y: auto; border-top: 1px solid var(--linia); padding-top: 8px; }
.comprovacio-titol { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--bronze); font-weight: 600; margin-bottom: 6px; }
.comprovacio-titol .visor-tancar { position: static; margin-left: auto; width: 24px; height: 24px; font-size: 16px; flex-shrink: 0; }
.comprovacio-taula { display: grid; grid-template-columns: 1fr auto auto; column-gap: 22px; align-items: baseline; font-size: 12px; color: var(--tinta-suau); }
.comprovacio-taula .cap { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-clara); border-bottom: 1px solid var(--linia); padding-bottom: 3px; margin-bottom: 5px; text-align: right; }
.comprovacio-taula > span { padding: 1px 0; }
.comprovacio-taula .c-doc { color: var(--tinta); font-weight: 600; }
.comprovacio-taula .c-sec { color: var(--tinta-clara); white-space: nowrap; text-align: right; }
.comprovacio-taula .c-camp { text-align: right; white-space: nowrap; }
.comprovacio-taula .c-camp em { color: #C2382E; font-style: normal; font-size: 11px; }
.comprovacio-taula .nou-doc { margin-top: 7px; }

/* el botó de comprovar: una lupa quadrada, de la mateixa alçada que GENERAR DOCUMENTS
   (⚠ es va perdre en reescriure el bloc de la comprovació: no tallar per marcadors que
   tinguin altres regles pel mig) */
.calaix-peu-fila { align-items: stretch; gap: 10px; }
.calaix-peu-fila .calaix-llegenda { align-self: center; margin-right: auto; }
.boto-lupa { align-self: stretch; aspect-ratio: 1; width: auto; min-width: 42px; padding: 0; display: inline-grid; place-items: center; flex: 0 0 auto; color: var(--tinta-suau); }
.boto-lupa:hover { color: var(--bronze); }

/* ── el repàs final amb IA (finestra de Documents) ── */
.repas .repas-doc { margin-bottom: 8px; font-size: 12px; }
.repas .repas-doc b { font-weight: 600; color: var(--tinta); }
.repas-avis { color: var(--tinta-suau); line-height: 1.45; padding: 2px 0 2px 14px; position: relative; }
.repas-avis::before { content: ""; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--bronze); }
.repas-avis.g-alta::before { background: #C2382E; }
.repas-avis.g-baixa::before { background: var(--tinta-clara); }
.repas-avis.buit { color: var(--tinta-clara); font-style: italic; }
.repas-avis.buit::before { background: var(--linia); }
.repas-on { color: var(--bronze); font-weight: 600; margin-right: 6px; }

/* ═════════════════════════════════════════════════════════════════
   LA PORTADA D'ENTRADA, LA MATEIXA QUE VISITES D'OBRA
   ⚠ Copiada tal qual de VisitesObra/web/estil.css (norma de la suite:
   el que fa la mateixa funció es veu igual a totes les apps). Si es
   canvia allà, s'ha de canviar aquí.
   ═════════════════════════════════════════════════════════════════ */
/* ═══════════ PORTADA D'ENTRADA «Nit d'obra» (mode plataforma) ═══════════
   Grafit amb llum càlida zenital, malla de plànol, els eixos cardo i
   decumanus, les quatre plomades de la groma penjant i la filigrana de la
   marca al fons. El nom de l'APP mana; GROMAAI hi és de manera subtil. */

.pantalla-login {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  background: var(--tinta);
  color: #EDEAE3;
  font-family: var(--cos);
}

.lg-fons { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

.lg-llum {
  position: absolute; inset: 0;
  background:
    radial-gradient(78% 58% at 50% 6%, rgba(212, 154, 87, .16) 0%, rgba(212, 154, 87, 0) 62%),
    radial-gradient(120% 90% at 50% 46%, #222836 0%, #171C27 45%, #101319 100%);
}

.lg-malla {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(243, 241, 236, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(243, 241, 236, .045) 1px, transparent 1px);
  background-size: 34px 34px;
  /* La posició exacta la calcula el JS en píxels (`ajustarEixPortada`), perquè
     el CENTRE d'una casella caigui sempre damunt de la groma. Amb percentatges
     no surt: el navegador els mesura sobre (amplada − casella), i la línia
     acabava passant just pel mig de la groma. */
  background-position: 50% 50%;
  -webkit-mask-image: radial-gradient(85% 75% at 50% 42%, #000 10%, transparent 88%);
          mask-image: radial-gradient(85% 75% at 50% 42%, #000 10%, transparent 88%);
}

.lg-eixos { position: absolute; inset: 0; }
.lg-eixos i {
  position: absolute;
  background: linear-gradient(var(--dir, to bottom), transparent,
              rgba(169, 116, 58, .42) 18%, rgba(169, 116, 58, .42) 82%, transparent);
}
.lg-eixos .v { top: 0; bottom: 0; width: 1px; left: 50%; }
.lg-eixos .h { left: 0; right: 0; height: 1px; top: var(--eix, 46%); --dir: to right; }
.lg-creu {
  position: absolute; left: 50%; top: var(--eix, 46%);
  width: var(--rombe, 70px); height: var(--rombe, 70px);
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(169, 116, 58, .30);
}

.lg-gra {
  position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* les quatre plomades */
.lg-plomades { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lg-plomada {
  position: absolute; top: 0; width: 1px;
  transform-origin: top center;
  animation: lg-oscil 7s ease-in-out infinite;
}
.lg-plomada .fil {
  display: block; width: 1px;
  background: linear-gradient(to bottom, rgba(169, 116, 58, 0), rgba(169, 116, 58, .55));
}
/* punta de la plomada: més fina i plana (petició de l'usuari) */
.lg-plomada .bob {
  display: block; width: 4.5px; height: 13px; margin-left: -1.75px;
  background: var(--bronze-clar);
  opacity: .88;
  clip-path: polygon(50% 0, 100% 30%, 50% 100%, 0 30%);
}
.lg-plomada.pa { left: 11%; animation-duration: 8.5s; }
.lg-plomada.pa .fil { height: 32vh; }
.lg-plomada.pb { left: 26%; animation-duration: 6.8s; animation-delay: -2.4s; }
.lg-plomada.pb .fil { height: 21vh; }
.lg-plomada.pc { left: 74%; animation-duration: 9.4s; animation-delay: -1.1s; }
.lg-plomada.pc .fil { height: 41vh; }
.lg-plomada.pd { left: 89%; animation-duration: 7.6s; animation-delay: -4s; }
.lg-plomada.pd .fil { height: 26vh; }
@keyframes lg-oscil { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }

/* contingut */
.lg-escena {
  position: relative; z-index: 3;
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 44px 24px 32px;
  overflow-y: auto;
}

.lg-capcalera { text-align: center; animation: lg-apareix .9s cubic-bezier(.22,1,.36,1) both; }

/* l'ull de l'app, presidint la portada */
.lg-monograma {
  width: 62px; height: 62px;
  margin: 0 auto 22px;
  border-radius: 16px;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(150deg, var(--bronze-clar), var(--bronze));
  box-shadow: 0 14px 34px -12px rgba(212, 154, 87, .75),
              inset 0 1px 0 rgba(255, 255, 255, .35);
}
.lg-monograma svg { width: 34px; height: 34px; }

.lg-marca {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display);
  font-size: 10px; letter-spacing: .42em; text-transform: uppercase;
  color: var(--bronze-clar); opacity: .85; margin-bottom: 30px;
}
.lg-marca::before, .lg-marca::after {
  content: ""; width: 34px; height: 1px; background: rgba(212, 154, 87, .4);
}

.lg-titol {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(38px, 6.4vw, 72px);
  letter-spacing: .16em; text-transform: uppercase; line-height: 1.02;
  color: #FBF9F4; text-indent: .16em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .10), 0 24px 60px rgba(0, 0, 0, .6);
}
.lg-titol em {
  display: block; font-style: normal;
  color: var(--bronze-clar);
  font-size: .62em; letter-spacing: .30em; margin-top: .34em;
}

.lg-sub {
  margin: 24px auto 0; max-width: 38ch;
  font-size: 13.5px; line-height: 1.7; color: #9AA0AC; letter-spacing: .02em;
}

.lg-separador {
  display: flex; align-items: center; justify-content: center;
  width: min(100%, 380px); margin: 34px auto 30px;
}

/* El ROMBE de la groma fa de separador entre el títol i els camps. La seva
   alçada NO és un percentatge fix: el JS la calcula a partir del buit real
   (`--eix`), perquè a qualsevol mida de finestra quedi lliure de text. */
@media (min-width: 641px) {
  .pantalla-login { --rombe: 60px; }
  .lg-separador { margin: 62px auto 58px; opacity: 0; }
}
@media (max-width: 640px) {
  .pantalla-login { --rombe: 44px; }
  .lg-separador { margin: 40px auto 38px; opacity: 0; }
}
.lg-separador span {
  flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, rgba(243,241,236,.13), transparent);
}
.lg-form {
  width: min(100%, 380px);
  animation: lg-apareix 1s cubic-bezier(.22,1,.36,1) .18s both;
}
#login-bloc-entrar, #login-bloc-recuperar { display: flex; flex-direction: column; gap: 22px; }
#login-bloc-entrar.ocult, #login-bloc-recuperar.ocult { display: none !important; }

.lg-grup { display: flex; flex-direction: column; gap: 9px; }
.lg-etq {
  font-family: var(--display); font-weight: 400;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: #9AA0AC;
}
.lg-caixa { position: relative; display: flex; align-items: center; }
.lg-caixa input {
  width: 100%; height: 46px; padding: 0 2px;
  font-family: var(--cos); font-size: 16px; color: #FBF9F4;
  background: transparent; border: 0; border-bottom: 1px solid rgba(243,241,236,.13);
  transition: border-color .25s;
}
.lg-caixa input::placeholder { color: #5C6470; }
.lg-caixa input:hover { border-bottom-color: rgba(243, 241, 236, .28); }
.lg-caixa input:focus { outline: none; border-bottom-color: var(--bronze-clar); }
.lg-caixa::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--bronze-clar);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.lg-caixa:focus-within::after { transform: scaleX(1); }
.lg-caixa input:-webkit-autofill { -webkit-text-fill-color: #FBF9F4; transition: background-color 9999s; }

.lg-ull {
  position: absolute; right: -6px; width: 42px; height: 42px;
  display: grid; place-items: center; background: none; border: 0; cursor: pointer;
  color: #9AA0AC; border-radius: 8px;
}
.lg-ull:hover { color: var(--bronze-clar); }
.lg-ull svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; }

.lg-entrar {
  margin-top: 30px; height: 52px; width: 100%;
  font-family: var(--display); font-weight: 400;
  font-size: 12.5px; letter-spacing: .30em; text-transform: uppercase;
  color: #14181F;
  background: linear-gradient(180deg, var(--bronze-clar), #B9803F);
  border: 0; border-radius: 8px; cursor: pointer; position: relative; overflow: hidden;
  box-shadow: 0 10px 30px -14px rgba(212, 154, 87, .85), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .3s, filter .3s;
}
.lg-entrar::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.55) 50%, transparent 68%);
  transform: translateX(-120%); transition: transform .7s ease;
}
.lg-entrar:hover { transform: translateY(-2px); filter: brightness(1.05); }
.lg-entrar:hover::after { transform: translateX(120%); }
.lg-entrar:disabled { opacity: .7; cursor: default; }

.lg-oblidat {
  align-self: center; display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; width: 100%;
  background: none; border: 0; cursor: pointer;
  font-family: var(--cos); font-size: 12.5px; color: #9AA0AC; letter-spacing: .02em;
}
.lg-oblidat:hover { color: var(--bronze-clar); }

.lg-recupera { font-size: 13px; line-height: 1.6; color: #9AA0AC; }

.lg-peu {
  margin-top: 40px; text-align: center;
  font-family: var(--display); font-size: 9.5px; letter-spacing: .34em; text-transform: uppercase;
  color: #5F6673;
  animation: lg-apareix 1s ease .5s both;
}
.lg-peu b { color: #8B919C; font-weight: 400; }
.lg-peu-marca {
  background: none; border: 0; cursor: pointer; padding: 6px 4px;
  font-family: inherit; font-size: inherit; letter-spacing: inherit;
  text-transform: inherit; color: inherit;
}
.lg-explica {
  margin: 9px auto 0; max-width: 44ch;
  letter-spacing: .01em; text-transform: none; line-height: 1.6;
  font-family: var(--cos); font-size: 11px; color: #6A7280;
}
.lg-peu i { font-style: italic; color: #8B919C; }

@keyframes lg-apareix { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* avisos dins de la portada fosca */
.pantalla-login .login-error {
  padding: 9px 12px; border-radius: 8px;
  background: rgba(194, 56, 46, .16); color: #F0A9A2; font-size: 12.5px;
}
.pantalla-login .login-avis {
  padding: 9px 12px; border-radius: 8px;
  background: rgba(46, 125, 70, .16); color: #A7D6B6; font-size: 12.5px;
}
.pantalla-login .login-avis.error { background: rgba(194, 56, 46, .16); color: #F0A9A2; }

@media (max-width: 640px) {
  .lg-escena { padding: 44px 22px 32px; }
  .lg-titol { font-size: 38px; letter-spacing: .13em; }
  .lg-sub { font-size: 13px; margin-top: 20px; max-width: 34ch; }
  .lg-plomada.pa .fil { height: 34vh; }
  .lg-plomada.pc .fil { height: 15vh; }
  .lg-plomada.pb, .lg-plomada.pd { display: none; }
  .lg-separador { margin: 28px auto 24px; }
  .lg-marca { margin-bottom: 24px; letter-spacing: .34em; }
  .lg-monograma { width: 54px; height: 54px; margin-bottom: 18px; }
  .lg-monograma svg { width: 30px; height: 30px; }
  .lg-marca::before, .lg-marca::after { width: 22px; }
  /* la marca, al capdavall de tot; l'explicació NO es veu fins que s'hi toca */
  .lg-escena { justify-content: flex-start; padding-top: 52px; }
  .lg-form { margin-top: 26px; }
  .lg-peu { margin-top: auto; padding-top: 26px; }

  .lg-explica {
    position: fixed;
    left: 16px; right: 16px; bottom: 74px;
    max-width: none; z-index: 20;
    margin: 0;
    padding: 15px 17px;
    text-align: left;
    font-size: 12px; color: #B9BFC9;
    background: rgba(20, 24, 31, .97);
    border: 1px solid rgba(212, 154, 87, .28);
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .65);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .26s, transform .26s, visibility .26s;
  }
  .lg-explica.vista { opacity: 1; visibility: visible; transform: none; }
  .lg-peu-marca { text-decoration: underline; text-decoration-color: rgba(212,154,87,.35);
                  text-underline-offset: 4px; }
}

@media (max-height: 700px) {
  .lg-escena { padding-top: 32px; }
  .lg-separador { margin: 22px auto 20px; }
  .lg-peu { margin-top: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .pantalla-login *, .pantalla-login *::before, .pantalla-login *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

/* ─────────────── la carpeta del projecte, vista des de l'app (30/09) ── */
.dialeg-carpeta { width: min(640px, 94vw); }
.carpeta-molles { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 2px 0 10px; }
.molla { border: none; background: none; font: inherit; font-size: 12px; color: var(--tinta-suau); cursor: pointer; padding: 3px 7px; border-radius: 7px; transition: background .12s, color .12s; }
.molla:hover { background: var(--bronze-fons); color: var(--bronze); }
.molla-sep { color: var(--tinta-clara); font-size: 12px; }
.carpeta-llista { max-height: 52vh; overflow-y: auto; border: 1px solid var(--linia); border-radius: 10px; background: #FAF9F6; }
.carpeta-fila { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 13px; border: none; border-bottom: 1px solid var(--linia-freda); background: none; font: inherit; font-size: 13px; text-align: left; color: var(--tinta); cursor: pointer; transition: background .12s, color .12s; }
.carpeta-fila:last-child { border-bottom: none; }
.carpeta-fila:hover { background: var(--bronze-fons); color: var(--bronze); }
.carpeta-fila .cf-ic { flex: 0 0 auto; display: grid; place-items: center; color: var(--bronze); }
.carpeta-fila.fitxer .cf-ic { color: var(--tinta-clara); }
.carpeta-fila:hover .cf-ic { color: var(--bronze); }
.carpeta-fila .cf-nom { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carpeta-fila .cf-mida { flex: 0 0 auto; font-size: 11px; color: var(--tinta-clara); }
.carpeta-buida { padding: 24px; text-align: center; color: var(--tinta-clara); font-size: 13px; }

/* ⚠ Amb el botó d'actualitzar, al peu de la barra hi ha CINC peces: el de «Nou
   projecte» ha de poder encongir-se (el flex no encongeix si no es treu el
   min-width: auto) i les icones es fan una mica més estretes. Si no, el peu
   desborda la barra. */
.lateral-peu { gap: 8px; }
/* sense text, els botons quedaven de 35 px: l'alçada de sempre per no fallar el clic */
.lateral-peu .boto-peu { min-height: 44px; }
.lateral-peu .boto-ample { min-width: 0; }
/* el «+» de projecte nou és bronze com sempre, però només amb la icona */
.lateral-peu .boto-primari.boto-peu { background: var(--bronze); border-color: var(--bronze); color: #fff; }
.lateral-peu .boto-primari.boto-peu:hover { background: var(--bronze-fosc, #946233); }