/* EXEDCP · EXE Glass (R11, 28/10/2026): tokens, materials, components i moviment.
   Direcció: 04-model/DISSENY-PREMIUM.md. Es carrega primer; els altres fitxers només hi posen la
   disposició de cada pantalla. Vidre a la capa de sistema; el contingut, sòlid i llegible. */

:root {
  color-scheme: light;
  --exe-verd: #00807c;
  --exe-verd-fosc: #00635f;
  --exe-verd-clar: #e5f2f2;
  --tinta: #1e2b2a;
  --tinta-2: #4f5b5a;
  --tinta-3: #6f6b65;
  --linia: rgb(16 40 38 / 9%);
  --linia-forta: rgb(16 40 38 / 22%);
  --fons: #fff;
  --fons-suau: #f5f7f7;
  --fons-app: #f5f7f6;
  --ressalt: rgb(16 40 38 / 4%);
  --avis: #8a5300;
  --avis-fons: #fff4e0;
  --error: #b3261e;
  --error-fons: #fdecea;
  --correcte: #1e6b3a;
  --correcte-fons: #e8f4ec;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;
  --radi: 10px;
  --radi-targeta: 14px;
  --radi-full: 20px;
  --amplada: 1200px;
  --alcada-capcalera: 64px;

  --vidre-fi: rgb(251 253 252 / 72%);
  --vidre: rgb(255 255 255 / 78%);
  --vidre-gruixut: rgb(255 255 255 / 86%);
  --filtre-fi: blur(20px) saturate(180%);
  --filtre: blur(24px) saturate(180%);
  --filtre-gruixut: blur(40px) saturate(190%);
  --llum-vidre: inset 0 1px 0 rgb(255 255 255 / 85%), inset 0 0 0 1px rgb(255 255 255 / 40%);
  --vora-vidre: 0 0 0 1px rgb(16 40 38 / 7%);

  --ombra-1: 0 1px 2px rgb(16 40 38 / 5%), 0 1px 1px rgb(16 40 38 / 3%);
  --ombra-2: 0 2px 6px rgb(16 40 38 / 6%), 0 10px 24px -4px rgb(16 40 38 / 10%);
  --ombra-3: 0 4px 12px rgb(16 40 38 / 8%), 0 18px 40px -8px rgb(16 40 38 / 18%);
  --ombra-4: 0 12px 32px rgb(16 40 38 / 14%), 0 40px 80px -16px rgb(16 40 38 / 28%);
  --ombra-flotant: var(--ombra-3);

  --d-1: 120ms;
  --d-2: 200ms;
  --d-3: 320ms;
  --d-4: 500ms;
  --corba-resposta: cubic-bezier(0.2, 0.9, 0.3, 1);
  --corba-surt: cubic-bezier(0.22, 1, 0.36, 1);
  --corba-molla: cubic-bezier(0.34, 1.3, 0.64, 1);
  --transicio: var(--d-2) var(--corba-surt);
  --anell-focus: 0 0 0 4px rgb(0 128 124 / 18%);
  --fletxa-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f6b65' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
}

/* Molla real (ζ 0,72): sobrepassa un 3,8 % i s'assenta. */
@supports (transition-timing-function: linear(0, 1)) {
  :root { --corba-molla: linear(0, 0.031, 0.11, 0.216, 0.334, 0.454, 0.568, 0.671, 0.76, 0.835, 0.896, 0.943, 0.979, 1.005, 1.022, 1.032, 1.037, 1.038, 1.037, 1.034, 1.03, 1.025, 1.021, 1.016, 1.012, 1.009, 1.006, 1.004, 1); }
}

/* Base i fons ambient: un camp gairebé blanc amb el verd EXE molt diluït i un gra fi. */

*, *::before, *::after { box-sizing: border-box; }
html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--fons-app);
  color: var(--tinta);
  font: 400 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .06 0 0 0 0 .16 0 0 0 0 .15 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(56rem 36rem at 0% -8%, rgb(0 128 124 / 6%), transparent 70%),
    radial-gradient(48rem 34rem at 100% 0%, rgb(0 128 124 / 4%), transparent 70%),
    radial-gradient(60rem 40rem at 70% 110%, rgb(46 150 130 / 4%), transparent 70%);
  content: "";
}
h1, h2, h3, p { margin: 0; }
a { color: var(--exe-verd); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
::selection { background: rgb(0 128 124 / 18%); }
:focus-visible,
:is(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid rgb(0 128 124 / 70%); outline-offset: 3px; }
.icona { flex: none; }
.ocult-visual { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.salta { position: absolute; top: var(--e2); left: -9999px; z-index: 90; padding: var(--e2) var(--e3); border-radius: var(--radi); background: var(--fons); box-shadow: var(--ombra-3); }
.salta:focus { left: var(--e4); }

/* Tipografia: títols a l'estil SF Pro Display, etiquetes petites en gris càlid, xifres tabulars. */

.titol-pantalla { width: fit-content; max-width: 100%; font-size: 30px; font-weight: 600; line-height: 1.15; letter-spacing: -0.022em; text-wrap: balance; }
.titol-seccio { font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; }
.titol-subseccio { font-size: 15px; font-weight: 600; line-height: 1.4; }
.text-suport { color: var(--tinta-2); }
.text-ajuda, .camp__ajuda { color: var(--tinta-3); font-size: 13px; line-height: 1.45; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.dada-automatica { color: var(--tinta-3); font-size: 13px; }

/* Pàgina */

.pagina { max-width: var(--amplada); margin: 0 auto; padding: var(--e7) var(--e6) var(--e8); }
.capcalera-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e5); margin-bottom: var(--e6); }
.capcalera-pagina__text > * + * { margin-top: var(--e2); }
.pagina > .titol-pantalla { margin-bottom: var(--e6); }
/* Ritme vertical: dins del flux d'una pantalla, dos blocs seguits mai no es toquen (24 px). Especificitat
   zero: qualsevol marge propi d'una pantalla mana. */
:where(.pagina, #dcp-edicio, #marc-contenut, .resum-dcp, .lectura-resum, .seccio, .bloc-plegable__cos, .targeta) > :where(.avis:not(.avis-flotant), .targeta, .bloc-plegable, .seccio, .taula, .taula-desplacable, .serveis-bloc, .resum-dcp, .estat-buit, .navegador-serveis, .paquet-client, .condicions-oferta, .pressupost-holded, .fitxers) + :where(.avis:not(.avis-flotant), .targeta, .bloc-plegable, .seccio, .taula, .taula-desplacable, .serveis-bloc, .resum-dcp, .estat-buit, .navegador-serveis, .paquet-client, .condicions-oferta, .pressupost-holded, .fitxers) { margin-top: var(--e5); }
.capcalera-pagina__text p { color: var(--tinta-2); }
.capcalera-dcp { display: flex; align-items: center; justify-content: space-between; gap: var(--e5); margin-bottom: var(--e5); }
.capcalera-dcp__titol { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 0 var(--e3); min-width: 0; }
.capcalera-dcp__titol::before { order: 1; flex-basis: 100%; height: var(--e1); content: ""; }
.capcalera-dcp__titol > :not(.capcalera-dcp__codi) { order: 2; margin-block: 2px; }
.capcalera-dcp .titol-pantalla { overflow-wrap: anywhere; }
.codi-compacte, .capcalera-dcp__codi { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.capcalera-dcp__codi { width: fit-content; color: var(--tinta-3); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.capcalera-dcp__accions { display: flex; align-items: center; gap: var(--e3); }
.capcalera-dcp > .estat-desat { flex-shrink: 0; }
.seccio + .seccio { margin-top: var(--e7); }
.seccio__capcalera { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e4); margin-bottom: var(--e4); }
.seccio__capcalera p { margin-top: var(--e1); color: var(--tinta-2); }
.graella-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--e5); }
.graella-2 .camp--ample { grid-column: 1 / -1; }
.llista-dades { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e2) var(--e5); margin: 0; font-size: 14px; }
.llista-dades dt { color: var(--tinta-3); }
.llista-dades dd { margin: 0; }
.formulari-estret { max-width: 420px; }
.accions { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e5); }
.accions--dreta { justify-content: flex-end; margin-top: 0; }
.leads-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e5); margin-bottom: var(--e5); }
.leads-filtre { display: inline-flex; align-items: center; gap: var(--e2); }
.leads-filtre__etiqueta { color: var(--tinta-3); font-size: 13px; font-weight: 500; }
.enllac-retorn { display: inline-flex; align-items: center; gap: var(--e1); margin-bottom: var(--e4); font-size: 14px; font-weight: 500; }
.enllac-retorn .icona { transition: transform var(--d-2) var(--corba-surt); }
.enllac-retorn:hover { text-decoration: none; }
.enllac-retorn:hover .icona { transform: translateX(-3px); }

/* Capçalera: vidre fi enganxat que, en baixar, puja 10 px i es fa més compacte. */

.capcalera {
  position: sticky;
  top: -10px;
  z-index: 40;
  background: var(--vidre-fi);
  -webkit-backdrop-filter: var(--filtre-fi);
  backdrop-filter: var(--filtre-fi);
  box-shadow: inset 0 -1px 0 var(--linia);
  transition: box-shadow var(--d-3) var(--corba-surt), background-color var(--d-3);
  view-transition-name: capcalera;
}
.capcalera__interior { display: flex; align-items: center; gap: var(--e5); height: var(--alcada-capcalera); max-width: var(--amplada); margin: 0 auto; padding: 0 var(--e6); transition: transform var(--d-3) var(--corba-molla); }
.marca { display: flex; flex: none; align-items: center; margin-right: auto; }
.marca img { width: auto; height: 30px; transform-origin: left center; transition: transform var(--d-3) var(--corba-molla), filter var(--d-3); }
/* Logo (P18): en passar-hi s'aixeca; en prémer, la pantalla fa el gest de sortir; en clicar, el tauler entra
   com quan tornes a l'inici de l'iPhone. */
@media (hover: hover) and (pointer: fine) { .marca:hover img { filter: drop-shadow(0 4px 8px rgb(0 128 124 / 22%)); transform: translateY(-1px) scale(1.05); } }
.marca:active img { transform: scale(0.94); transition-duration: var(--d-1); }
main { transition: transform var(--d-3) var(--corba-surt), opacity var(--d-3) var(--corba-surt); }
.surt-a-inici main { opacity: 0.85; transform: scale(0.985); }
.is-desplacat .capcalera { background: rgb(251 253 252 / 80%); box-shadow: inset 0 -1px 0 var(--linia), 0 6px 20px -10px rgb(16 40 38 / 22%); }
.is-desplacat .capcalera__interior { transform: translateY(5px); }
.is-desplacat .marca img { transform: scale(0.9); }

/* Navegació: càpsula de vidre blanc a l'enllaç actiu, que llisca d'una pantalla a l'altra. */
.navegacio { position: relative; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgb(16 40 38 / 5%); box-shadow: inset 0 0 0 1px rgb(16 40 38 / 4%); }
.navegacio__enllac { position: relative; z-index: 1; display: flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; color: var(--tinta-2); font-size: 14px; font-weight: 500; white-space: nowrap; transition: color var(--d-2), background-color var(--d-2); }
.navegacio__enllac:hover { color: var(--tinta); background: rgb(255 255 255 / 55%); text-decoration: none; }
.navegacio__enllac.is-actiu { color: var(--tinta); anchor-name: --nav-actiu; }
.navegacio__capsula { display: none; }
@supports (anchor-name: --a) {
  .navegacio:has(.is-actiu) > .navegacio__capsula {
    position: absolute;
    position-anchor: --nav-actiu;
    inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
    display: block;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(16 40 38 / 12%), 0 3px 10px rgb(16 40 38 / 7%), inset 0 0 0 0.5px rgb(16 40 38 / 6%);
  }
  .navegacio__enllac.is-actiu:hover { background: none; }
}
@supports not (anchor-name: --a) {
  .navegacio__enllac.is-actiu { background: #fff; box-shadow: 0 1px 2px rgb(16 40 38 / 12%), 0 3px 10px rgb(16 40 38 / 7%); }
}

/* Campana i menú d'usuari */
.campana { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; color: var(--tinta-2); transition: background-color var(--d-2), color var(--d-2), transform var(--d-1) var(--corba-resposta); }
.campana:hover { background: rgb(16 40 38 / 6%); color: var(--tinta); text-decoration: none; }
.campana:active { transform: scale(0.94); }
.campana--activa { color: var(--exe-verd); }
.campana__comptador { position: absolute; top: 3px; right: 1px; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--exe-verd); box-shadow: 0 0 0 2px #fff, 0 2px 6px rgb(0 128 124 / 35%); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.campana.is-nova > .icona { transform-origin: 50% 4px; animation: balanceja 900ms var(--corba-surt); }
@keyframes balanceja {
  15% { transform: rotate(14deg); }
  35% { transform: rotate(-11deg); }
  55% { transform: rotate(7deg); }
  75% { transform: rotate(-3deg); }
}
.menu-usuari { position: relative; }
.menu-usuari > summary { display: flex; align-items: center; gap: var(--e2); padding: 3px 8px 3px 3px; border-radius: 999px; color: var(--tinta-2); font-size: 14px; font-weight: 500; transition: background-color var(--d-2); }
.menu-usuari > summary:hover, .menu-usuari[open] > summary { background: rgb(16 40 38 / 6%); }
.menu-usuari .desplegable-indicador { transform: rotate(90deg); }
.menu-usuari[open] .desplegable-indicador { transform: rotate(-90deg); }
.avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(150deg, #13958f, var(--exe-verd) 55%, #006d69); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgb(0 128 124 / 22%); color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; }
.menu-usuari__panell,
.marc-historial__cos {
  position: absolute;
  top: calc(100% + var(--e2));
  right: 0;
  z-index: 50;
  min-width: 248px;
  padding: 6px;
  border-radius: var(--radi-targeta);
  background: var(--vidre);
  -webkit-backdrop-filter: var(--filtre);
  backdrop-filter: var(--filtre);
  box-shadow: var(--llum-vidre), var(--vora-vidre), var(--ombra-3);
  transform-origin: top right;
  transition: opacity var(--d-2) var(--corba-surt), transform var(--d-3) var(--corba-molla);
}
@starting-style { .menu-usuari[open] .menu-usuari__panell { opacity: 0; transform: translateY(-4px) scale(0.96); } }
.menu-usuari__qui { margin-bottom: 6px; padding: var(--e2) 10px 10px; border-bottom: 1px solid var(--linia); }
.menu-usuari__qui strong { display: block; font-weight: 600; }
.menu-usuari__element { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--tinta); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.menu-usuari__element:hover { background: rgb(0 128 124 / 9%); color: var(--exe-verd-fosc); text-decoration: none; }

/* Desplegables natius: indicador explícit i, on el navegador ho permet, alçada animada. */

details > summary { list-style: none; cursor: pointer; border-radius: 8px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { content: ""; }
.desplegable-indicador { display: inline-flex; flex: none; transition: transform var(--d-3) var(--corba-molla); }
details[open] > summary > .desplegable-indicador { transform: rotate(90deg); }
.detalls { margin: var(--e3) 0; }
.detalls > summary { display: inline-flex; align-items: center; gap: var(--e2); color: var(--exe-verd); font-size: 14px; font-weight: 600; }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details:not(.menu-usuari, .marc-historial, .esborra-dcp)::details-content { block-size: 0; overflow: clip; transition: block-size var(--d-3) var(--corba-surt), content-visibility var(--d-3) allow-discrete; }
  details:not(.menu-usuari, .marc-historial, .esborra-dcp)[open]::details-content { block-size: auto; }
}

/* Botons: brillantor de vidre al principal, resposta a 120 ms i llum que segueix el ratolí. */

.boto {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  height: 38px;
  padding: 0 var(--e4);
  border: 0;
  border-radius: var(--radi);
  background: none;
  font: 600 14px/1 var(--font);
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--d-1) var(--corba-resposta), box-shadow var(--d-2) var(--corba-surt), background-color var(--d-2), color var(--d-2), opacity var(--d-2);
}
.boto:hover { text-decoration: none; }
.boto:active:not(:disabled, [aria-disabled="true"]) { transform: scale(0.98); }
.boto--principal {
  background-color: var(--exe-verd);
  background-image:
    radial-gradient(160px circle at var(--x, 50%) var(--y, -40%), rgb(255 255 255 / 16%), transparent 70%),
    linear-gradient(180deg, rgb(255 255 255 / 10%), transparent 55%, rgb(0 0 0 / 8%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 28%), inset 0 -1px 0 rgb(0 0 0 / 12%), 0 1px 2px rgb(0 80 76 / 28%), 0 6px 14px -6px rgb(0 128 124 / 55%);
  color: #fff;
}
.boto--principal:hover { background-color: #00746f; box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), inset 0 -1px 0 rgb(0 0 0 / 12%), 0 1px 2px rgb(0 80 76 / 30%), 0 10px 20px -8px rgb(0 128 124 / 60%); }
.boto--principal:active { background-color: var(--exe-verd-fosc); }
.boto--secundari { background: #fff; box-shadow: inset 0 0 0 1px rgb(16 40 38 / 13%), 0 1px 2px rgb(16 40 38 / 6%); color: var(--exe-verd-fosc); }
.boto--secundari:hover { box-shadow: inset 0 0 0 1px rgb(0 128 124 / 35%), 0 2px 6px rgb(16 40 38 / 8%); }
.boto--text { height: auto; min-height: 32px; padding: 0 var(--e2); color: var(--exe-verd); }
.boto--text:hover { background: rgb(0 128 124 / 8%); }
.boto--perill { color: var(--error); }
.boto--perill.boto--secundari { box-shadow: inset 0 0 0 1px rgb(179 38 30 / 40%); }
.boto--perill:hover { background: rgb(179 38 30 / 7%); }
.boto--ample { width: 100%; }
.boto--compacte { height: 32px; padding: 0 var(--e3); font-size: 13px; }
.boto--text.boto--compacte { padding: 0 var(--e2); }
.boto:disabled, .boto[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.boto[aria-busy="true"] { opacity: 0.85; cursor: progress; }
.boto[aria-busy="true"]::before { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira 0.8s linear infinite; content: ""; }
@keyframes gira { to { transform: rotate(360deg); } }
.boto-icona { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--tinta-3); cursor: pointer; transition: background-color var(--d-2), color var(--d-2), transform var(--d-1) var(--corba-resposta); }
.boto-icona:hover { background: rgb(16 40 38 / 6%); color: var(--exe-verd); }
.boto-icona:active { transform: scale(0.92); }
.boto-icona--perill:hover { color: var(--error); }

/* Camps: vora fina, anell de focus que s'expandeix i error amb una sacsejada curta. */

.camp { display: flex; flex-direction: column; gap: var(--e2); margin-bottom: var(--e5); }
fieldset.camp { min-width: 0; margin: 0 0 var(--e5); padding: 0; border: 0; }
fieldset.camp > legend { margin-bottom: var(--e2); padding: 0; }
.camp__etiqueta { color: var(--tinta-2); font-size: 13px; font-weight: 600; line-height: 1.4; }
.camp__control {
  width: 100%;
  height: 40px;
  padding: 0 var(--e3);
  border: 1px solid var(--linia-forta);
  border-radius: var(--radi);
  background-color: #fff;
  box-shadow: 0 0 0 0 rgb(0 128 124 / 0%), inset 0 1px 1px rgb(16 40 38 / 3%);
  color: var(--tinta);
  font: 400 15px var(--font);
  transition: border-color var(--d-2), box-shadow var(--d-3) var(--corba-molla);
}
.camp__control:hover { border-color: rgb(16 40 38 / 32%); }
.camp__control:focus, .control-cella:focus { border-color: var(--exe-verd); outline: none; box-shadow: var(--anell-focus); }
textarea.camp__control { height: auto; min-height: 120px; padding: var(--e3); line-height: 1.55; resize: vertical; }
.camp__control::placeholder, .control-cella::placeholder { color: var(--tinta-3); opacity: 0.8; }
.camp__error { color: var(--error); font-size: 13px; line-height: 1.45; animation: apareix var(--d-3) var(--corba-surt); }
.camp__error:empty { display: none; }
.camp--error .camp__control, [aria-invalid="true"]:is(.camp__control, .control-cella) { border-color: var(--error); animation: sacseja 360ms var(--corba-surt); }
@keyframes sacseja { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(3px); } }
@keyframes apareix { from { opacity: 0; transform: translateY(-3px); } }
input[type="checkbox"], input[type="radio"] { accent-color: var(--exe-verd); }
.control-cella { width: 100%; height: 36px; padding: 0 var(--e2); border: 1px solid transparent; border-radius: 8px; background-color: transparent; color: var(--tinta); font: inherit; transition: border-color var(--d-2), background-color var(--d-2), box-shadow var(--d-3) var(--corba-molla); }
.control-cella:hover { border-color: var(--linia-forta); }
.control-cella:focus { background-color: #fff; }
.control-cella--num { font-variant-numeric: tabular-nums; text-align: right; }
select.control-cella, select.camp__control { padding-right: var(--e6); appearance: none; background-image: var(--fletxa-select); background-position: right var(--e2) center; background-repeat: no-repeat; background-size: 16px; text-overflow: ellipsis; cursor: pointer; }
.text-cella { display: block; padding: 0 var(--e2); color: var(--tinta-3); font-size: 13px; white-space: nowrap; }
.camp-contrasenya { position: relative; }
.camp-contrasenya .camp__control { padding-right: 72px; }
.camp-contrasenya__mostra { position: absolute; top: 50%; right: 6px; padding: 5px 9px; border: 0; border-radius: 7px; background: none; color: var(--exe-verd); font: 500 13px var(--font); cursor: pointer; transform: translateY(-50%); }
.camp-contrasenya__mostra:hover { background: rgb(0 128 124 / 8%); }

/* «Desat»: el punt de «Desant…» passa a check i s'esvaeix, a la capçalera i al costat del camp. */
.estat-desat { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-3); font-size: 13px; white-space: nowrap; }
.estat-desat::before { width: 14px; height: 14px; flex: none; border-radius: 50%; background: rgb(0 128 124 / 12%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300807c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 10px no-repeat; content: ""; }
.estat-desat.is-desant::before { background: none; box-shadow: inset 0 0 0 4px var(--exe-verd); animation: batega 900ms ease-in-out infinite; }
.estat-desat.is-desat::before { animation: marca 520ms var(--corba-molla); }
.estat-desat.camp__error { color: var(--error); animation: sacseja 360ms var(--corba-surt); }
.estat-desat.camp__error::before { background: var(--error-fons); box-shadow: inset 0 0 0 4px var(--error); }
.marca-desat { position: absolute; z-index: 3; width: 18px; height: 18px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300807c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; box-shadow: 0 0 0 1px rgb(0 128 124 / 30%), 0 2px 6px rgb(0 128 124 / 25%); pointer-events: none; animation: marca 520ms var(--corba-molla), esvaeix 400ms var(--corba-surt) 1.1s forwards; }
@keyframes batega { 50% { transform: scale(0.7); opacity: 0.6; } }
@keyframes marca { from { transform: scale(0.4); opacity: 0; } }
@keyframes esvaeix { to { transform: scale(0.8); opacity: 0; } }

/* Cercadors (serveis, clients, proveïdors): llista desplegable de vidre. */
.cercador { position: relative; max-width: 560px; margin-bottom: var(--e5); }
.cercador__resultats { position: absolute; top: calc(100% + 6px); right: 0; left: 0; z-index: 30; display: none; max-height: 320px; margin: 0; padding: 6px; overflow-y: auto; border-radius: var(--radi-targeta); background: var(--vidre-gruixut); -webkit-backdrop-filter: var(--filtre); backdrop-filter: var(--filtre); box-shadow: var(--llum-vidre), var(--vora-vidre), var(--ombra-3); list-style: none; }
.cercador:focus-within .cercador__resultats { display: block; }
.cercador__resultats[hidden] { display: none; }
.cercador__familia { padding: var(--e2) 10px var(--e1); color: var(--tinta-3); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.cercador__opcio { display: flex; gap: var(--e3); width: 100%; padding: var(--e2) 10px; border: 0; border-radius: 8px; background: none; color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
.cercador__opcio:hover, .cercador__opcio:focus, .cercador__opcio[aria-selected="true"] { background: rgb(0 128 124 / 9%); color: var(--exe-verd-fosc); }
.cercador__opcio span:first-child { min-width: 72px; color: var(--exe-verd); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Pestanyes i filtres segmentats: un indicador que llisca amb molla (posició per àncora CSS). */

.pestanyes { position: relative; display: flex; gap: var(--e5); max-width: 100%; margin-bottom: var(--e5); overflow-x: auto; box-shadow: inset 0 -1px 0 var(--linia); scrollbar-width: none; }
.pestanyes::-webkit-scrollbar { display: none; }
.pestanya { display: inline-flex; flex: none; align-items: center; gap: var(--e2); padding: var(--e3) 0; border-bottom: 2px solid transparent; color: var(--tinta-2); font-weight: 500; white-space: nowrap; transition: color var(--d-2); }
.pestanya:hover { color: var(--tinta); text-decoration: none; }
.pestanya.is-actiu { color: var(--tinta); border-bottom-color: var(--exe-verd); anchor-name: --pestanya; }
.comptador { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgb(16 40 38 / 6%); color: var(--tinta-2); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color var(--d-2), color var(--d-2); }
.pestanya.is-actiu .comptador { background: rgb(0 128 124 / 12%); color: var(--exe-verd-fosc); }
.leads-abast, .segments { position: relative; display: inline-flex; gap: 2px; padding: 2px; border-radius: 10px; background: rgb(16 40 38 / 6%); box-shadow: inset 0 0 0 1px rgb(16 40 38 / 3%); font-size: 13px; }
.leads-abast a, .segments label > span { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 28px; padding: 0 var(--e3); border-radius: 8px; color: var(--tinta-2); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; transition: color var(--d-2), background-color var(--d-2); }
.leads-abast a:hover, .segments label:hover input:not(:checked) + span { color: var(--tinta); text-decoration: none; }
.leads-abast a.is-actiu, .segments input:checked + span { color: var(--tinta); font-weight: 600; }
.segments label { position: relative; display: inline-flex; }
.segments input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segments input:focus-visible + span { outline: 2px solid rgb(0 128 124 / 70%); outline-offset: 1px; }
.lliscador { display: none; }
:is(.leads-abast a.is-actiu, .segments input:checked + span) { background: #fff; box-shadow: 0 1px 2px rgb(16 40 38 / 12%), 0 3px 8px rgb(16 40 38 / 7%); }
.segments.amb-polze input:checked + span { background: none; box-shadow: none; }
.segments.amb-polze > .lliscador { position: absolute; top: var(--polze-y); left: 0; display: block; width: var(--polze-w); height: var(--polze-h); border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgb(16 40 38 / 12%), 0 3px 8px rgb(16 40 38 / 7%), inset 0 0 0 0.5px rgb(16 40 38 / 5%); transform: translateX(var(--polze-x)); transition: transform var(--d-4) var(--corba-molla), width var(--d-3) var(--corba-surt); }
.segments.sense-transicio > .lliscador { transition: none; }
@supports (anchor-name: --a) {
  .pestanya.is-actiu { border-bottom-color: transparent; }
  .pestanyes:has(.is-actiu) > .lliscador { position: absolute; position-anchor: --pestanya; bottom: 0; left: anchor(left); right: anchor(right); display: block; height: 2px; border-radius: 2px; background: var(--exe-verd); }
  .leads-abast a.is-actiu { background: none; box-shadow: none; }
  .leads-abast:has(.is-actiu) > .lliscador { position: absolute; inset: anchor(top) anchor(right) anchor(bottom) anchor(left); display: block; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgb(16 40 38 / 12%), 0 3px 8px rgb(16 40 38 / 7%), inset 0 0 0 0.5px rgb(16 40 38 / 5%); }
  .leads-filtre:nth-child(1) .leads-abast a.is-actiu { anchor-name: --seg-1; }
  .leads-filtre:nth-child(1) .leads-abast > .lliscador { position-anchor: --seg-1; }
  .leads-filtre:nth-child(2) .leads-abast a.is-actiu { anchor-name: --seg-2; }
  .leads-filtre:nth-child(2) .leads-abast > .lliscador { position-anchor: --seg-2; }
}

/* Avisos dins de pantalla: vidre tenyit de l'estat, sense blocs plens. */

.avis { padding: var(--e3) var(--e4); border-radius: var(--radi); background: rgb(0 128 124 / 7%); box-shadow: inset 0 0 0 1px rgb(0 128 124 / 14%); color: var(--exe-verd-fosc); font-size: 14px; }
.avis--error { background: rgb(179 38 30 / 6%); box-shadow: inset 0 0 0 1px rgb(179 38 30 / 18%); color: var(--error); }
.avis--avis, .avis--atencio { background: rgb(138 83 0 / 7%); box-shadow: inset 0 0 0 1px rgb(138 83 0 / 18%); color: var(--avis); }
.avis--correcte { background: rgb(30 107 58 / 7%); box-shadow: inset 0 0 0 1px rgb(30 107 58 / 18%); color: var(--correcte); }
/* Llista d'avisos amb enllaç (què falta completar): files com les d'iOS, amb el punt d'avís i la fletxa. */
ul.avis { display: grid; gap: 2px; margin: 0; padding: 6px; border-radius: var(--radi-targeta); background: var(--fons); box-shadow: 0 0 0 1px rgb(138 83 0 / 16%), var(--ombra-1); list-style: none; }
ul.avis > li > a { display: flex; align-items: center; gap: var(--e3); min-height: 44px; padding: 6px var(--e3) 6px 10px; border-radius: 10px; color: var(--tinta); font-size: 14px; transition: background-color var(--d-1); }
ul.avis > li > a::before { width: 22px; height: 22px; flex: none; border-radius: 50%; background: rgb(138 83 0 / 12%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a5300' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6.5v7M12 17.5v.01'/%3E%3C/svg%3E") center / 14px no-repeat; content: ""; }
ul.avis > li > a::after { width: 16px; height: 16px; flex: none; margin-left: auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6b65' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform var(--d-2) var(--corba-surt); content: ""; }
ul.avis > li > a:hover { background: rgb(138 83 0 / 6%); text-decoration: none; }
ul.avis > li > a:hover::after { transform: translateX(3px); }
ul.avis > li > a:active { background: rgb(138 83 0 / 10%); }
ul.avis strong { font-weight: 600; }

/* Toasts: vidre que baixa del centre, sota la capçalera, com la Dynamic Island. */
.avisos-flotants { position: fixed; top: calc(var(--alcada-capcalera) + var(--e2)); left: 50%; z-index: 70; display: grid; justify-items: center; gap: var(--e2); width: min(460px, calc(100vw - 24px)); pointer-events: none; transform: translateX(-50%); }
.avis-flotant {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 7px 7px 7px 10px;
  border-radius: 22px;
  background: var(--vidre);
  -webkit-backdrop-filter: var(--filtre);
  backdrop-filter: var(--filtre);
  box-shadow: var(--llum-vidre), var(--vora-vidre), var(--ombra-3);
  color: var(--tinta);
  pointer-events: auto;
  transform-origin: 50% 0;
  animation: illa-entra var(--d-4) var(--corba-molla) both, illa-surt var(--d-3) var(--corba-surt) 4s forwards;
}
.avis-flotant:is(:hover, :focus-within) { animation-play-state: paused; }
.avis-flotant--avis, .avis-flotant--error { animation: illa-entra var(--d-4) var(--corba-molla) both; }
.avis-flotant.is-surt { animation: illa-surt var(--d-2) var(--corba-surt) forwards; }
.avis-flotant__icona { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: rgb(0 128 124 / 12%); color: var(--exe-verd); }
.avis-flotant--correcte .avis-flotant__icona { background: rgb(30 107 58 / 12%); color: var(--correcte); }
.avis-flotant--avis .avis-flotant__icona { background: rgb(138 83 0 / 12%); color: var(--avis); }
.avis-flotant--error .avis-flotant__icona { background: rgb(179 38 30 / 10%); color: var(--error); }
.avis-flotant__cos { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.4; }
.avis-flotant__tanca { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--tinta-3); cursor: pointer; }
.avis-flotant__tanca:hover { background: rgb(16 40 38 / 6%); color: var(--tinta); }
@keyframes illa-entra { from { opacity: 0; transform: translateY(-14px) scale(0.92); } }
@keyframes illa-surt { to { visibility: hidden; opacity: 0; transform: translateY(-10px) scale(0.96); } }

/* Bloc on s'acaba de fer una acció que torna a la mateixa pantalla: ressalt verd que s'esvaeix i el
   contingut nou que puja. */
.acaba-de-canviar { position: relative; scroll-margin: calc(var(--alcada-capcalera) + var(--e4)) 0 112px; }
.acaba-de-canviar::after { position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 2px rgb(0 128 124 / 55%), inset 0 0 28px rgb(0 128 124 / 9%); opacity: 0; pointer-events: none; animation: ressalta 1.9s var(--corba-surt); content: ""; }
.acaba-de-canviar :is(.holded-resultat, .holded-accions, .cicle-holded) { animation: puja var(--d-4) var(--corba-molla) both; }
.acaba-de-canviar .holded-accions { animation-delay: 70ms; }
.acaba-de-canviar .cicle-holded { animation-delay: 140ms; }
@keyframes ressalta { 12% { opacity: 1; } }

/* Línia de progrés (només si la petició triga) i esquelets amb brillantor. */
.progres-pagina { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 2.5px; border-radius: 0 2px 2px 0; background: linear-gradient(90deg, rgb(0 128 124 / 25%), var(--exe-verd) 40%, #2fb3ac); box-shadow: 0 0 10px rgb(0 128 124 / 45%); opacity: 0; pointer-events: none; transform: scaleX(0); transform-origin: 0 50%; }
.progres-pagina.is-actiu { opacity: 1; animation: progres 9s cubic-bezier(0.08, 0.7, 0.2, 1) forwards; }
.progres-pagina.is-fet { opacity: 0; transform: scaleX(1); transition: transform var(--d-2) var(--corba-surt), opacity var(--d-3) var(--d-2); }
@keyframes progres { from { transform: scaleX(0.04); } to { transform: scaleX(0.92); } }
.fragment-estat .htmx-indicator { align-items: center; gap: var(--e2); color: var(--tinta-2); }
[data-fragment-carrega][aria-busy="true"] .htmx-indicator { display: block; opacity: 1; visibility: visible; }
.fragment-estat .htmx-indicator:not([hidden]) { position: relative; height: 112px; overflow: hidden; border-radius: var(--radi-targeta); background: linear-gradient(rgb(16 40 38 / 6%) 0 0) 16px 18px / 38% 12px no-repeat, linear-gradient(rgb(16 40 38 / 5%) 0 0) 16px 46px / 82% 10px no-repeat, linear-gradient(rgb(16 40 38 / 5%) 0 0) 16px 68px / 70% 10px no-repeat, linear-gradient(rgb(16 40 38 / 5%) 0 0) 16px 90px / 76% 10px no-repeat, #fff; box-shadow: 0 0 0 1px var(--linia), var(--ombra-1); color: transparent; font-size: 0; }
.fragment-estat .htmx-indicator:not([hidden])::after { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 75%) 50%, transparent 70%); animation: brilla 1.4s ease-in-out infinite; content: ""; }
@keyframes brilla { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.fragment-estat [data-fragment-error] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); margin-bottom: var(--e4); }
.fragment-estat [data-fragment-error][hidden], .fragment-estat .htmx-indicator[hidden] { display: none; }

/* Taules. Una sola pell per a les llistes, els externs, els preus, la lectura i l'equip:
   targeta blanca, capçalera grisa amb separadors fins i files de 40 a 44 px. */

.taula { width: 100%; border-collapse: collapse; font-size: 14px; }
.taula th { padding: 0 var(--e3) var(--e2); border-bottom: 1px solid var(--linia); color: var(--tinta-3); font-size: 12px; font-weight: 500; letter-spacing: 0.01em; text-align: left; overflow-wrap: anywhere; }
.taula th.num { text-align: right; white-space: normal; }
.taula td { height: 44px; padding: 0 var(--e3); border-bottom: 1px solid var(--linia); vertical-align: middle; }
.taula td.num, .accions-cella { white-space: nowrap; }
/* Els números no es tallen mai: la columna s'adapta al valor. */
.taula :is(td, th).num { min-width: 88px; overflow: visible; text-overflow: clip; }
.taula tr[hidden] { display: none; }
:is(.taula-dcp, .taula-leads, .taula-externs, .taula-externs-lectura, .marc-oferta, .marc-vista-previa, .taula-finances, table[class="taula"]) { border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: var(--radi-targeta); background: var(--fons); box-shadow: 0 0 0 1px var(--linia), var(--ombra-1); font-size: 13px; }
:is(.taula-dcp, .taula-leads, .taula-externs, .taula-externs-lectura, .marc-oferta, .marc-vista-previa, .taula-finances, table[class="taula"], .serveis-bloc__capcalera) thead th { height: 32px; padding: 0 var(--e3); border-bottom: 1px solid var(--linia); background-color: #f7f9f8; color: var(--tinta-3); font-size: 12px; font-weight: 500; letter-spacing: 0.01em; text-transform: none; white-space: nowrap; }
:is(.taula-dcp, .taula-leads, .taula-externs, .taula-externs-lectura, .marc-oferta, .marc-vista-previa, .taula-finances, table[class="taula"], .serveis-bloc__capcalera) thead th + th { background-image: linear-gradient(var(--linia), var(--linia)); background-position: left center; background-repeat: no-repeat; background-size: 1px 14px; }
:is(.taula-dcp, .taula-leads, .taula-finances, table[class="taula"]) tbody td { padding: var(--e2) var(--e3); border-top: 1px solid var(--linia); border-bottom: 0; }
:is(.taula-dcp, .taula-leads, .taula-finances, table[class="taula"]) tbody tr:first-child td { border-top: 0; }
:is(.taula-dcp, .taula-leads, .taula-finances, table[class="taula"]) tbody tr:hover td { background: rgb(16 40 38 / 2.5%); }
.taula-desplacable { overflow-x: auto; padding: 1px; }
.taula-desplacable > .taula { margin: 0; }
/* Files que s'obren: ressaltat suau, la fletxa s'hi acosta i, en prémer, una lleugera compressió. */
tr[data-href] { cursor: pointer; transition: transform var(--d-1) var(--corba-resposta); }
tr[data-href]:hover td { background: rgb(0 128 124 / 4%); }
tr[data-href]:active { transform: scale(0.996); }
tr[data-href]:active td { background: rgb(0 128 124 / 7%); }
tr[data-href]:focus-visible { outline: 2px solid rgb(0 128 124 / 70%); outline-offset: -2px; }
:is(.taula-dcp__obre, .taula-leads__obre) a { display: inline-flex; color: var(--tinta-3); transition: transform var(--d-2) var(--corba-surt), color var(--d-2); }
tr[data-href]:hover :is(.taula-dcp__obre, .taula-leads__obre) a { color: var(--exe-verd); transform: translateX(3px); }

/* Targetes: contingut sòlid. Les que s'obren (xifres i mòduls del tauler) s'alcen 2 px, reben una
   llum que segueix el ratolí (--x, --y de premium.js) i tornen amb la molla. */

.targeta { padding: var(--e5); border-radius: var(--radi-targeta); background: var(--fons); box-shadow: 0 0 0 1px var(--linia), var(--ombra-1); }
.targeta > .titol-subseccio { margin-bottom: var(--e5); }
:is(.tauler-xifra:has(a), .portal-modul) { position: relative; transition: transform var(--d-4) var(--corba-molla), box-shadow var(--d-3) var(--corba-surt); }
:is(.tauler-xifra:has(a), .portal-modul)::after { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(420px circle at var(--x, 50%) var(--y, 50%), rgb(0 128 124 / 7%), transparent 45%); opacity: 0; pointer-events: none; transition: opacity var(--d-3); content: ""; }
@media (hover: hover) and (pointer: fine) {
  :is(.tauler-xifra:has(a), .portal-modul):hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgb(16 40 38 / 11%), var(--ombra-2); }
  :is(.tauler-xifra:has(a), .portal-modul):hover::after { opacity: 1; }
}
.tauler-xifra:has(a):active { transform: scale(0.99); transition-duration: var(--d-1); }

/* Insígnies d'estat: píndola amb punt i tint de vidre, totes del mateix pes. */

.insignia { --c: var(--tinta-3); display: inline-block; max-width: 100%; height: 22px; padding: 0 9px; overflow: hidden; border-radius: 999px; line-height: 22px; text-overflow: ellipsis; vertical-align: middle; background: var(--fons-suau); background: color-mix(in srgb, var(--c) 10%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); font-size: 12px; font-weight: 600; letter-spacing: 0.005em; white-space: nowrap; }
:is(.insignia--esborrany, .insignia--per_revisar, .insignia--retornat, .insignia--aprovat, .insignia--a_holded, .insignia--enviat, .insignia--acceptat, .insignia--rebutjat, .insignia--cancellat, .insignia--falta)::before { display: inline-block; width: 6px; height: 6px; margin: 0 5px 1px 0; border-radius: 50%; background: currentColor; vertical-align: middle; content: ""; }
.insignia--per_revisar, .insignia--a_holded, .insignia--enviat, .insignia--lead-nou { --c: var(--exe-verd-fosc); }
.insignia--per_revisar::before { box-shadow: 0 0 0 3px rgb(0 128 124 / 18%); }
.insignia--aprovat, .insignia--acceptat { --c: var(--correcte); }
.insignia--retornat, .insignia--falta { --c: var(--avis); }
.insignia--rebutjat, .insignia--cancellat { --c: var(--error); }
.insignia--tipus, .insignia--lead-existent, .insignia--idioma { --c: var(--tinta-2); background: #fff; font-weight: 500; }
.insignia--certificat { --c: var(--exe-verd-fosc); }
td > .insignia--tipus { height: 18px; margin-right: var(--e1); padding: 0 7px; font-size: 11px; line-height: 18px; vertical-align: 1px; }
.estat-punt { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--linia-forta); }
.estat-punt--ok { background: var(--correcte); box-shadow: 0 0 0 3px rgb(30 107 58 / 15%); }

/* Estats buits: medalló amb la icona de traç i anells concèntrics, i el text del catàleg. */

.estat-buit { display: grid; justify-items: center; gap: var(--e2); padding: var(--e7) var(--e5); border-radius: var(--radi-targeta); background: rgb(255 255 255 / 55%); box-shadow: inset 0 0 0 1px var(--linia); color: var(--tinta-2); text-align: center; }
.estat-buit[hidden] { display: none; }
.estat-buit__icona, .estat-buit > svg.icona:first-child, .estat-buit:not(:has(svg))::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  width: 28px;
  height: 28px;
  margin-bottom: var(--e3);
  padding: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #fff, rgb(0 128 124 / 10%));
  box-shadow: 0 0 0 10px rgb(0 128 124 / 4%), 0 0 0 22px rgb(0 128 124 / 2.5%), inset 0 0 0 1px rgb(0 128 124 / 16%), 0 6px 16px -6px rgb(0 128 124 / 30%);
  color: var(--exe-verd);
}
.estat-buit__icona .icona { width: 28px; height: 28px; }
.estat-buit:not(:has(svg))::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300807c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13h4l2 3h4l2-3h4M4 13l2-8h12l2 8v6H4z'/%3E%3C/svg%3E") center / 28px no-repeat, radial-gradient(circle at 50% 30%, #fff, rgb(0 128 124 / 10%)); content: ""; }
.estat-buit__titol { color: var(--tinta); font-size: 17px; font-weight: 600; }
.estat-buit .boto { margin-top: var(--e4); }
.llista-buida { display: flex; flex-direction: column; align-items: center; gap: var(--e3); }
.llista-buida[hidden] { display: none; }

/* Barra d'accions: vidre flotant amb vora de llum, sempre a mà, que al final queda al seu lloc. */

.barra-accions { position: sticky; bottom: var(--e3); z-index: 35; margin-top: var(--e7); }
.barra-accions__interior { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); padding: 10px; border-radius: 18px; background: var(--vidre-fi); -webkit-backdrop-filter: var(--filtre-fi); backdrop-filter: var(--filtre-fi); box-shadow: var(--llum-vidre), var(--vora-vidre), var(--ombra-3); }
.barra-accions__dreta { display: flex; align-items: center; gap: var(--e3); }
.barra-accions__dreta > p { margin: 0 var(--e2); color: var(--tinta-3); font-size: 13px; }

/* Fulls i diàlegs: vidre gruixut que puja amb molla; fons enfosquit i desenfocat. */

dialog {
  /* Sempre al centre (P27): cap regla d'espaiat de la pàgina no li pot moure el marge. */
  margin: auto;
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: var(--e5);
  border: 0;
  border-radius: var(--radi-full);
  background: var(--vidre-gruixut);
  -webkit-backdrop-filter: var(--filtre-gruixut);
  backdrop-filter: var(--filtre-gruixut);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%), inset 0 0 0 1px rgb(255 255 255 / 55%), var(--vora-vidre), var(--ombra-4);
  color: var(--tinta);
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity var(--d-2) var(--corba-surt), transform var(--d-4) var(--corba-molla), overlay var(--d-2) allow-discrete, display var(--d-2) allow-discrete;
}
dialog[open] { opacity: 1; transform: none; }
#confirma-htmx { overflow-wrap: anywhere; } /* el codi d'un lead pot ser una sola paraula molt llarga */
@starting-style { dialog[open] { opacity: 0; transform: translateY(18px) scale(0.96); } }
dialog::backdrop { background: rgb(12 30 29 / 0%); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: background-color var(--d-3), backdrop-filter var(--d-3), overlay var(--d-3) allow-discrete, display var(--d-3) allow-discrete; }
dialog[open]::backdrop { background: rgb(12 30 29 / 24%); -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%); }
@starting-style { dialog[open]::backdrop { background: rgb(12 30 29 / 0%); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
dialog.targeta { box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%), inset 0 0 0 1px rgb(255 255 255 / 55%), var(--vora-vidre), var(--ombra-4); }
dialog > .titol-seccio { margin-bottom: var(--e3); }
dialog > p { color: var(--tinta-2); }
dialog .accions { justify-content: flex-end; }
dialog textarea.camp__control { min-height: 96px; margin-top: var(--e2); }

/* Paleta ⌘K (petició de l'Àlex): s'obre només amb el camp, com Spotlight; en escriure creix cap
   avall amb els leads, els pressupostos, les persones i les pantalles. Tot amb el teclat. */
.paleta-boto { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 9px; border: 0; border-radius: 999px; background: rgb(16 40 38 / 5%); box-shadow: inset 0 0 0 1px rgb(16 40 38 / 4%); color: var(--tinta-2); cursor: pointer; transition: background-color var(--d-2), color var(--d-2), transform var(--d-1) var(--corba-resposta); }
.paleta-boto:hover { background: rgb(16 40 38 / 8%); color: var(--tinta); }
.paleta-boto:active { transform: scale(0.95); }
.paleta-boto kbd { padding: 1px 6px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px rgb(16 40 38 / 10%), 0 1px 1px rgb(16 40 38 / 6%); color: var(--tinta-3); font: 600 11px/1.4 var(--font); }
/* R14-F2c · última actualització a la capçalera i el resum «On som». */
.estat-boto { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border: 0; border-radius: 999px; background: rgb(16 40 38 / 5%); box-shadow: inset 0 0 0 1px rgb(16 40 38 / 4%); color: var(--tinta-2); font: 500 12.5px/1 var(--font); white-space: nowrap; cursor: pointer; transition: background-color var(--d-2), color var(--d-2), transform var(--d-1) var(--corba-resposta); }
.estat-boto:hover { background: rgb(16 40 38 / 8%); color: var(--tinta); }
.estat-boto:active { transform: scale(0.95); }
.estat-boto time { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.estat-boto__punt { width: 7px; height: 7px; border-radius: 50%; background: var(--exe-verd); box-shadow: 0 0 0 3px rgb(0 128 124 / 16%); }
dialog.estat { width: min(560px, calc(100vw - 32px)); }
.estat__apartat { margin: var(--e3) 0 var(--e1); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--tinta-2); }
.estat__apartat--fet { color: var(--exe-verd-fosc); }
.estat__llista { margin: 0; padding-left: 1.2em; color: var(--tinta); line-height: 1.45; }
.estat__llista li + li { margin-top: 4px; }
dialog.paleta { width: min(680px, calc(100vw - 32px)); max-height: min(600px, 76vh); margin: 14vh auto auto; padding: 0; overflow: hidden; border-radius: 22px; transform: translateY(-8px) scale(0.98); }
dialog.paleta[open] { display: flex; flex-direction: column; transform: none; }
@starting-style { dialog.paleta[open] { opacity: 0; transform: translateY(-8px) scale(0.98); } }
dialog.paleta::backdrop { background: rgb(12 30 29 / 0%); }
dialog.paleta[open]::backdrop { background: rgb(12 30 29 / 16%); -webkit-backdrop-filter: blur(6px) saturate(115%); backdrop-filter: blur(6px) saturate(115%); }
.paleta__cap { display: flex; flex: none; align-items: center; gap: 14px; height: 64px; padding: 0 22px; color: var(--tinta-3); }
.paleta__cap > .icona { flex: none; }
dialog.paleta .paleta__camp { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--tinta); font: 400 20px/1.2 var(--font); letter-spacing: -0.012em; outline: none; -webkit-appearance: none; appearance: none; }
dialog.paleta .paleta__camp::placeholder { color: var(--tinta-3); opacity: 0.75; }
dialog.paleta .paleta__camp::-webkit-search-cancel-button, dialog.paleta .paleta__camp::-webkit-search-decoration { display: none; -webkit-appearance: none; }
.paleta__roda { flex: none; width: 16px; height: 16px; border: 2px solid rgb(0 128 124 / 16%); border-top-color: var(--exe-verd); border-radius: 50%; opacity: 0; transition: opacity var(--d-2); }
.paleta.is-cercant .paleta__roda { opacity: 1; animation: paleta-roda 700ms linear infinite; }
@keyframes paleta-roda { to { transform: rotate(1turn); } }
.paleta__llista { flex: 1; min-height: 0; padding: 4px 8px 8px; border-top: 1px solid var(--linia); overflow: auto; overscroll-behavior: contain; scroll-padding: 8px; }
.paleta__grup + .paleta__grup { margin-top: 2px; }
.paleta__titol { margin: 0; padding: 12px 12px 6px; color: var(--tinta-3); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.paleta__opcio { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 7px 12px; border-radius: 14px; color: var(--tinta); text-decoration: none; transition: background-color var(--d-1); }
.paleta__opcio:hover { text-decoration: none; }
.paleta__opcio[aria-selected="true"] { background: rgb(0 128 124 / 9%); }
.paleta__simbol { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgb(16 40 38 / 5%); box-shadow: inset 0 0 0 1px rgb(16 40 38 / 5%); color: var(--tinta-2); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; transition: background-color var(--d-1), color var(--d-1); }
.paleta__opcio[data-tipus="leads"] .paleta__simbol, .paleta__opcio[aria-selected="true"] .paleta__simbol { background: rgb(0 128 124 / 10%); box-shadow: inset 0 0 0 1px rgb(0 128 124 / 12%); color: var(--exe-verd); }
.paleta__opcio[data-tipus="persones"] .paleta__simbol { border-radius: 50%; background: linear-gradient(150deg, #13958f, var(--exe-verd) 55%, #006d69); box-shadow: none; color: #fff; }
.paleta__text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.paleta__text :is(strong, small) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paleta__text strong { font-size: 15px; font-weight: 500; }
.paleta__text small { color: var(--tinta-3); font-size: 12.5px; }
.paleta__text mark { border-radius: 3px; background: rgb(0 128 124 / 12%); box-shadow: 0 0 0 1px rgb(0 128 124 / 12%); color: var(--exe-verd-fosc); font-weight: 600; }
.paleta__opcio .insignia { flex: none; max-width: 38%; }
.paleta__intro { flex: none; width: 18px; color: var(--exe-verd); font-size: 14px; text-align: center; opacity: 0; transform: translateX(-4px); transition: opacity var(--d-1), transform var(--d-2) var(--corba-surt); }
.paleta__opcio[aria-selected="true"] .paleta__intro { opacity: 1; transform: none; }
.paleta__buit { margin: 0; padding: 26px 16px 22px; color: var(--tinta-3); text-align: center; }
:is(.paleta__llista, .paleta__opcio, .paleta__grup, .paleta__buit)[hidden] { display: none; }

/* Inici de sessió i pàgines d'error: la primera impressió. */

.sessio { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding: 0 var(--e4); }
.sessio::before { position: fixed; inset: 0; z-index: -1; background: radial-gradient(34rem 26rem at 50% 38%, rgb(0 128 124 / 10%), transparent 70%), radial-gradient(28rem 22rem at 18% 80%, rgb(46 150 130 / 8%), transparent 70%), radial-gradient(30rem 24rem at 86% 18%, rgb(0 128 124 / 8%), transparent 70%); content: ""; }
.sessio__capcalera { display: flex; justify-content: center; width: 100%; padding: 12vh 0 var(--e6); }
.sessio__capcalera img { width: auto; height: 48px; }
.sessio__cos { display: flex; flex: 1; align-items: flex-start; justify-content: center; width: 100%; }
.sessio__formulari, .error-pagina {
  width: 100%;
  max-width: 400px;
  padding: var(--e6) var(--e6) var(--e5);
  border-radius: 24px;
  background: var(--vidre-gruixut);
  -webkit-backdrop-filter: var(--filtre-gruixut);
  backdrop-filter: var(--filtre-gruixut);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%), inset 0 0 0 1px rgb(255 255 255 / 60%), var(--vora-vidre), var(--ombra-4);
  animation: puja var(--d-4) var(--corba-molla) both;
}
@keyframes puja { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.sessio__formulari .titol-pantalla { margin-bottom: var(--e5); font-size: 24px; }
.sessio__formulari .avis { margin-bottom: var(--e5); }
.sessio__formulari .boto--ample { height: 42px; margin-top: var(--e2); }
.sessio__peu { padding: var(--e5); color: var(--tinta-3); font-size: 12px; letter-spacing: 0.08em; text-align: center; }
.error-pagina { max-width: 480px; }
.error-pagina > * + * { margin-top: var(--e4); }
.error-pagina .boto { margin-top: var(--e5); }

/* Transicions entre pantalles (net, sense lletres flotant): la capçalera i el fons queden quiets i el
   contingut fa un fos curt amb una pujada de 6 px. Els indicadors (càpsula, pestanya, filtres) llisquen
   dins de la pàgina nova (premium.js), sota el text. */

@view-transition { navigation: auto; types: pagina; }
/* Capçalera i fons queden quiets; el contingut (main) se'n va en 120 ms i el nou arriba amb una pujada.
   Dins d'una mateixa pantalla (HTMX), el fos encreuat per defecte: només es mou el que canvia. */
main { view-transition-name: contingut; }
::view-transition-group(*) { animation-duration: 420ms; animation-timing-function: var(--corba-surt); }
::view-transition-group(contingut) { animation-duration: 0s; }
::view-transition-group(capcalera) { background: rgb(250 252 251); }
:active-view-transition-type(pagina)::view-transition-old(contingut) { animation: 120ms var(--corba-surt) both vt-surt; }
:active-view-transition-type(pagina)::view-transition-new(contingut) { animation: 260ms var(--corba-surt) 70ms both vt-puja; }
:active-view-transition-type(inici)::view-transition-old(contingut) { animation: 160ms var(--corba-surt) both vt-allunya; }
:active-view-transition-type(inici)::view-transition-new(contingut) { animation: 460ms var(--corba-molla) 130ms both vt-apropa; }
@keyframes vt-allunya { to { opacity: 0; transform: scale(0.94); } }
@keyframes vt-apropa { from { opacity: 0; transform: scale(1.035); } }
/* Un element amb nom que no té parella a l'altra pantalla se'n va (o arriba) com la resta: sense lletres
   que es queden flotant. */
::view-transition-old(*):only-child { animation: 110ms var(--corba-surt) both vt-surt; }
::view-transition-new(*):only-child { animation: 240ms var(--corba-surt) 80ms both vt-entra; }
@keyframes vt-surt { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; } }
@keyframes vt-puja { from { opacity: 0; transform: translateY(6px); } }

@keyframes creix { from { transform: scaleX(0); } }

/* Amplades */

@media (width < 1200px) {
  .capcalera__interior, .pagina { padding-right: var(--e5); padding-left: var(--e5); }
  /* R14-F6: a 768 px la capçalera desbordava i esprémia el logo; queden el punt i la data. */
  .paleta-boto kbd, .estat-boto__text { display: none; }
}
@media (width < 1024px) {
  .graella-2 { grid-template-columns: minmax(0, 1fr); }
  .usuari__nom { display: none; }
}
/* Tauleta i mòbil: el menú passa a una segona fila de tota l'amplada, sense desplaçament lateral. */
@media (max-width: 900px) {
  :root { --alcada-capcalera: 100px; }
  .capcalera__interior { flex-wrap: wrap; gap: 0 var(--e2); height: auto; padding: 0 var(--e4) var(--e2); }
  .marca { height: 54px; }
  .marca img { height: 26px; }
  .navegacio { order: 1; flex-basis: 100%; justify-content: space-between; }
  .navegacio__enllac { flex: 1 1 auto; justify-content: center; padding: 0 var(--e2); font-size: 13px; }
}
@media (max-width: 640px) {
  .pagina { padding: var(--e5) var(--e4) var(--e8); }
  .titol-pantalla { font-size: 26px; }
  .capcalera-pagina { flex-wrap: wrap; align-items: flex-start; }
  .leads-filtre { flex-wrap: wrap; width: 100%; }
  .leads-abast { display: flex; width: 100%; }
  .leads-abast a { flex: 1 1 0; justify-content: center; min-width: 0; height: auto; min-height: 30px; padding: 4px 6px; line-height: 1.2; text-align: center; white-space: normal; }
  table[class="taula"] :is(th, td) { padding-right: var(--e2); padding-left: var(--e2); white-space: normal; overflow-wrap: anywhere; }
  .taula :is(td, th).num { min-width: 0; }
  .barra-accions { bottom: var(--e2); }
  /* PREVIA-PDF P4: al mòbil els botons no surten de la barra; si no hi caben, passen a sota. */
  .barra-accions__interior { flex-wrap: wrap; gap: var(--e2); padding: var(--e2); border-radius: 16px; }
  .barra-accions__dreta { flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: var(--e2); min-width: 0; }
  dialog { width: 100%; max-width: none; max-height: 88vh; margin: auto 0 0; padding-bottom: calc(var(--e5) + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; transform: translateY(24px); }
  @starting-style { dialog[open] { transform: translateY(100%); } }
  dialog.paleta { width: calc(100vw - 16px); max-height: 80vh; margin: var(--e2) auto auto; padding-bottom: 0; border-radius: 20px; }
  .paleta__cap { height: 56px; padding: 0 16px; gap: 12px; }
  dialog.paleta .paleta__camp { font-size: 17px; }
  .paleta__opcio .insignia { display: none; }
  .sessio__capcalera { padding-top: 8vh; }
  .sessio__formulari, .error-pagina { padding: var(--e5); border-radius: 20px; }
}

/* Accessibilitat: moviment reduït (tot passa a un fos) i transparència reduïda (vidre sòlid). */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .boto[aria-busy="true"]::before, .estat-desat.is-desant::before { animation: none !important; }
  .fragment-estat .htmx-indicator:not([hidden])::after { display: none; }
  .avis-flotant { animation: illa-surt 1ms 4s forwards !important; }
  .avis-flotant--avis, .avis-flotant--error { animation: none !important; }
  ::view-transition-group(*) { animation: none !important; }
  ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 160ms !important; animation-name: vt-surt !important; }
  ::view-transition-new(*) { animation-name: vt-entra !important; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .capcalera, .barra-accions__interior, .menu-usuari__panell, .panell-vidre, .avis-flotant, .cercador__resultats, dialog, .sessio__formulari, .error-pagina, .paleta { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  dialog::backdrop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgb(12 30 29 / 45%) !important; }
  body::before, .sessio::before { display: none; }
}
@media (prefers-contrast: more) {
  :root { --linia: rgb(16 40 38 / 30%); --linia-forta: rgb(16 40 38 / 55%); --tinta-2: #2f3938; --tinta-3: #4f4b46; }
}