/* ============================================================
   Manual d'identitat corporativa Josper
   #16232A Pantone 433 C · #706F6F Pantone 424 C
   #EB5E1F Pantone 7579 C · #E6EDF1 Pantone 656 C · #511219 Pantone 490 C
   Tipografia d'ús intern: Roboto (pàg. 13). Secundària: Lora italic.
   ============================================================ */
/* =========================================================
   Pla 9 · direcció A2 «Carbón» (aprovada pel Jaume el 25/10/2026). Els tokens, tal com són a la maqueta
   (josper_disseny_A2_carbon.html, línies 27-101): el clar és el :root; el fosc, el del sistema (prefers-color-scheme)
   si l'usuari no n'ha triat cap, o data-theme="dark" a <html> (tema.js). El clar és un joc propi, no la inversió del fosc.
   Afegits: --map-sd (el punt dels restaurants sense dades al mapa) i --map-sd-vora (la seva vora); i els colors dels
   punts del mapa (--map-pa/pb/pc, --map-ink, --map-vora, --map-districte), que nomes son al :root: el mapa base es
   sempre el clar (liberty), aixi que els punts i la seva llegenda porten els valors clars en tots dos modes.
   ========================================================= */
:root{
  color-scheme:light;
  /* claro: página casi blanca, superficies de papel cálido, tinta carbón */
  --bg-0:#EEEAE3; --bg-1:#FDFCFA; --bg-raise:#FFFFFF; --side-a:#F5F2EC; --side-b:#F2EEE7;
  --panel:#F6F3EE; --seg-bg:#EFEBE4;
  --line:rgba(22,35,42,.10); --line-2:rgba(22,35,42,.18);
  --ink:#16232A; --ink-2:#3F4A50; --ink-3:#69645C;
  --ember:#EB5E1F; --ember-txt:#B9440F; --ember-hot:#E0561A; --hot-shadow:none;
  /* .boto.brasa:hover (revisio final del pla 9): el text #16232A sobre #E0561A feia 4,22:1; una brasa MES CLARA, la
     #F07A42 de la maqueta (la brasa del mode fosc), fa 5,79:1. Enfosquir-la ho empitjoraria (#D4501A: 3,79:1). */
  --ember-hover:#F07A42;
  --ember-soft:rgba(235,94,31,.08); --ember-edge:rgba(235,94,31,.55); --ember-glow:transparent;
  --track:rgba(22,35,42,.07); --track-hi:rgba(22,35,42,.12);
  --fill:#3F4A50; --fill-2:#8A857C;
  --fun-1:#26363F; --fun-2:#4F6470; --fun-3:#7E93A0;
  --p-a:#EB5E1F; --p-b:#A33449; --p-c:#6F8594;
  --ok:#2A7A4F; --warn:#A8670E;
  --glow-a:rgba(235,94,31,.035); --glow-b:rgba(81,18,25,.025);
  --shell-shadow:0 30px 80px -50px rgba(22,35,42,.35);
  --tip-bg:rgba(255,255,255,.98); --tip-shadow:0 14px 34px -14px rgba(22,35,42,.30);
  --nav-bg:rgba(253,252,250,.95);
  --grain-op:.035; --grain-blend:multiply;
  --input-bg:#FFFFFF;
  --av-bg:#FFFFFF;
  --map-land:#EEEAE2; --map-land-2:#E5E0D6; --map-water:#DEE6EA; --map-line:rgba(22,35,42,.16); --map-road:rgba(22,35,42,.07);
  --display:"Roboto", system-ui, sans-serif;
  --sans:"Roboto", system-ui, sans-serif;
  --ital:"Lora", Georgia, serif;
  --side:232px; --trend-glow:.16; --quote-bg:#FBF3EC;
  --map-sd:#000; --map-sd-vora:#FDFCFA;
  /* el mapa base no canvia de mode: aquests sis no es redefineixen als blocs foscos (Jaume, 25/10/2026) */
  --map-pa:#EB5E1F; --map-pb:#A33449; --map-pc:#6F8594; --map-ink:#16232A; --map-vora:#EEEAE2; --map-cli:#2A7A4F;
  --map-districte:rgba(22,35,42,.28);
  /* producte («Productos» del Dashboard i els punts de la fitxa): nomes tons de la marca (Jaume, 25/10/2026): brasa,
     granat, carbo, gris acer i inox. Validats amb dataviz (parelles veines); el nom i la xifra van sempre al costat. */
  --pr-josper:#EB5E1F; --pr-altra:#A33449; --pr-carbo:#16232A; --pr-menaje:#706F6F; --pr-sense:#93A7B4;
}
/* oscuro: carbón profundo, marfil */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg-0:#0A1115; --bg-1:#1A262C; --bg-raise:#24323A; --side-a:#0C1418; --side-b:#0A1115;
    --panel:#1F2C33; --seg-bg:#24323A;
    --line:rgba(230,237,241,.075); --line-2:rgba(230,237,241,.14);
    --ink:#F3ECE1; --ink-2:#C4BAAB; --ink-3:#9A9184;
    --ember-txt:#F07A42; --ember-hot:#F07A42; --hot-shadow:none;
    --ember-soft:rgba(235,94,31,.10); --ember-glow:transparent;
    --track:rgba(230,237,241,.065); --track-hi:rgba(230,237,241,.12);
    --fill:#C4BAAB; --fill-2:#8E867A;
    --fun-1:#C9D5DC; --fun-2:#8EA2AE; --fun-3:#5E7380;
    --p-b:#B23A5C; --p-c:#7F93A1;
    --ok:#5FBF8C; --warn:#E0A246;
    --glow-a:rgba(235,94,31,.06); --glow-b:rgba(81,18,25,.16);
    --shell-shadow:0 40px 120px -40px rgba(0,0,0,.8);
    --tip-bg:rgba(14,22,27,.97); --tip-shadow:0 20px 50px -10px rgba(0,0,0,.7);
    --nav-bg:rgba(10,17,21,.95);
    --grain-op:.06; --grain-blend:overlay; --trend-glow:.35; --quote-bg:#24313A;
    --input-bg:#172228;
    --av-bg:#24323A;
    --map-land:#142026; --map-land-2:#18252C; --map-water:#0B1317; --map-line:rgba(230,237,241,.16); --map-road:rgba(230,237,241,.05);
    --map-sd:#000; --map-sd-vora:#F3ECE1;
    --pr-josper:#EB5E1F; --pr-altra:#B23A5C; --pr-carbo:#F3ECE1; --pr-menaje:#9A9A99; --pr-sense:#4F6470;
  }
}
:root[data-theme="dark"]{
    color-scheme:dark;
    --bg-0:#0A1115; --bg-1:#1A262C; --bg-raise:#24323A; --side-a:#0C1418; --side-b:#0A1115;
    --panel:#1F2C33; --seg-bg:#24323A;
    --line:rgba(230,237,241,.075); --line-2:rgba(230,237,241,.14);
    --ink:#F3ECE1; --ink-2:#C4BAAB; --ink-3:#9A9184;
    --ember-txt:#F07A42; --ember-hot:#F07A42; --hot-shadow:none;
    --ember-soft:rgba(235,94,31,.10); --ember-glow:transparent;
    --track:rgba(230,237,241,.065); --track-hi:rgba(230,237,241,.12);
    --fill:#C4BAAB; --fill-2:#8E867A;
    --fun-1:#C9D5DC; --fun-2:#8EA2AE; --fun-3:#5E7380;
    --p-b:#B23A5C; --p-c:#7F93A1;
    --ok:#5FBF8C; --warn:#E0A246;
    --glow-a:rgba(235,94,31,.06); --glow-b:rgba(81,18,25,.16);
    --shell-shadow:0 40px 120px -40px rgba(0,0,0,.8);
    --tip-bg:rgba(14,22,27,.97); --tip-shadow:0 20px 50px -10px rgba(0,0,0,.7);
    --nav-bg:rgba(10,17,21,.95);
    --grain-op:.06; --grain-blend:overlay; --trend-glow:.35; --quote-bg:#24313A;
    --input-bg:#172228;
    --av-bg:#24323A;
    --map-land:#142026; --map-land-2:#18252C; --map-water:#0B1317; --map-line:rgba(230,237,241,.16); --map-road:rgba(230,237,241,.05);
    --map-sd:#000; --map-sd-vora:#F3ECE1;
    --pr-josper:#EB5E1F; --pr-altra:#B23A5C; --pr-carbo:#F3ECE1; --pr-menaje:#9A9A99; --pr-sense:#4F6470;
}
/* Els noms d'abans (plans 1-8), com a àlies dels tokens nous: les pantalles que encara no s'han redibuixat
   (tasques 6-10) canvien de mode amb la resta. */
:root{
  --carbo:var(--ink); --carbo-2:var(--ink-2); --carbo-3:var(--fill);
  --brasa:var(--ember); --brasa-2:var(--ember-hot); --brasa-suau:var(--ember-soft);
  --granat:#511219; --granat-suau:#F7EAEB; --granat-txt:#511219;
  --inox:var(--seg-bg); --inox-2:var(--track);
  --blanc:var(--panel);
  --linia:var(--line-2); --linia-2:var(--line);
  --text:var(--ink); --text-2:var(--ink-2); --text-3:var(--ink-3);
  --ok-suau:#E7F4F1;
  --rail:var(--side);
  --r-l:18px; --r-m:12px; --r-s:9px;
  --om-1:0 0 0 1px var(--line);
  --om-2:var(--tip-shadow);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --granat-suau:var(--track-hi); --granat-txt:var(--ink); --ok-suau:var(--track);
  }
}
:root[data-theme="dark"]{
    --granat-suau:var(--track-hi); --granat-txt:var(--ink); --ok-suau:var(--track);
}

/* Icones de la maqueta (pantalles 627-660) com a mascares: es pinten amb el color de cada peça (Revisión, entrar) */
:root{
  --ic-note:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5h10l4 4v11H5z'/%3E%3Cpath d='M15 4.5v4h4M8.5 12.5h7M8.5 16h5'/%3E%3C/svg%3E");
  --ic-export:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7.5 10.5 12 15l4.5-4.5M5 19.5h14'/%3E%3C/svg%3E");
  --ic-copy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V5.5A1.5 1.5 0 0 0 14.5 4h-9A1.5 1.5 0 0 0 4 5.5v9A1.5 1.5 0 0 0 5.5 16H8'/%3E%3C/svg%3E");
  --ic-merge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='5.5' r='2'/%3E%3Ccircle cx='6' cy='18.5' r='2'/%3E%3Ccircle cx='18' cy='12' r='2'/%3E%3Cpath d='M6 7.5v9M6 9c0 3 3 3 6 3h4'/%3E%3C/svg%3E");
  --ic-spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 13.8 10 20.5 12l-6.7 2L12 20.5 10.2 14 3.5 12l6.7-2z'/%3E%3C/svg%3E");
  --ic-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg-1)}
body{margin:0; background:var(--bg-1); color:var(--ink);
  font-family:var(--sans); font-weight:300;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--ember-txt)}
b,strong{font-weight:500}
h1,h2,h3{font-weight:400}
:focus-visible{outline:2px solid var(--ink-2);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.micro{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); font-weight:400}
.eyebrow{font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-3); font-weight:400}
.num{font-variant-numeric:tabular-nums}
.ital{font-family:var(--ital); font-style:italic}

.app{display:grid; grid-template-columns:var(--side) minmax(0,1fr); min-height:100vh; background:var(--bg-1)}
.cos{min-width:0; padding:0 clamp(20px,3.9vw,56px)}

/* ================= Rail (carbon 119-136) ================= */
.rail{background:linear-gradient(180deg,var(--side-a),var(--side-b)); border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px; position:sticky; top:0; height:100vh; padding:30px 20px; min-width:0; z-index:2}
.marca{color:var(--ink); padding:0 10px 30px; display:flex; flex-direction:column; gap:10px}
.logo{width:132px; height:38px; background-color:var(--ink);
  -webkit-mask:url(josper-logo.svg) no-repeat left center/contain; mask:url(josper-logo.svg) no-repeat left center/contain}
.logo-min{width:24px; height:34px; display:none; background-color:var(--ink);
  -webkit-mask:url(josper-flama.svg) no-repeat center/contain; mask:url(josper-flama.svg) no-repeat center/contain}
.marca-sub{color:var(--ink-3); font-size:12.5px}
.nav-h{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); padding:22px 12px 8px; font-weight:400; white-space:nowrap}
.nav{display:flex; flex-direction:column; gap:0; min-width:0}
.nav button{display:flex; align-items:center; gap:12px; width:100%; text-align:left; position:relative;
  background:none; border:0; padding:10px 12px; border-radius:10px; color:var(--ink-2);
  font-size:13.5px; font-weight:400; transition:background .25s,color .25s; white-space:nowrap; min-width:0}
.nav button:hover{background:var(--track); color:var(--ink)}
.nav button[aria-current="page"]{color:var(--ink); background:var(--track)}
.nav button[aria-current="page"]::before{content:""; position:absolute; left:-20px; top:50%; width:3px; height:18px;
  margin-top:-9px; border-radius:0 3px 3px 0; background:var(--ember)}
.nav .txt{overflow:hidden; text-overflow:ellipsis}
.ic{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.4; opacity:.85}
.ic circle[fill]{fill:currentColor}
.pastilla{margin-left:auto; font-size:11.5px; color:var(--ink-3); flex:none}
#nav-mes{display:none}
.rail-peu{margin-top:auto; padding:16px 12px 0; border-top:1px solid var(--line); font-size:12px; color:var(--ink-3)}
.rail-peu strong{display:block; color:var(--ink-2); font-weight:400}
.rail-priv{display:block; width:max-content; margin-top:6px; font-size:12px; color:var(--ink-3); text-decoration:none}
.rail-priv:hover{color:var(--ink); text-decoration:underline}

/* ================= Capçalera (carbon 138-158) ================= */
.cap{min-height:76px; display:flex; align-items:center; gap:20px; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:30; background:var(--bg-1)}
.mlogo{display:none}
.cerca{display:flex; align-items:center; gap:10px; width:340px; max-width:100%; height:40px; padding:0 16px; margin-right:auto;
  border:1px solid var(--line-2); border-radius:999px; color:var(--ink-3); background:var(--input-bg)}
.cerca svg{width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5}
.cerca input{flex:1; min-width:0; border:0; outline:none; background:none; color:var(--ink); font-weight:300; font-size:14px; padding:0}
.cerca input::placeholder{color:var(--ink-3)}
.cerca:focus-within{border-color:var(--ink-3)}
.segell{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-3); flex:none; white-space:nowrap}
.segell b{font-weight:400; color:var(--ink-2)}
.punt{width:7px; height:7px; border-radius:50%; background:var(--ember); flex:none}
.tema-btn{width:36px; height:36px; border-radius:50%; border:1px solid var(--line-2); background:none; padding:0;
  display:grid; place-items:center; color:var(--ink-2); flex:none; transition:border-color .2s,color .2s}
.tema-btn:hover{border-color:var(--ink-3); color:var(--ink)}
.tema-btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5}
.tema-btn .lluna{display:none}
:root[data-theme="dark"] .tema-btn .sol{display:none}
:root[data-theme="dark"] .tema-btn .lluna{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tema-btn .sol{display:none}
  :root:not([data-theme="light"]) .tema-btn .lluna{display:block}
}
.vsep{width:1px; height:28px; background:var(--line-2); flex:none}
.usuari{display:flex; align-items:center; gap:12px; flex:none; font-size:13px}
.avatar{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; flex:none;
  font-weight:400; font-size:13px; letter-spacing:.04em; color:var(--ink); border:1px solid var(--line-2); background:var(--av-bg)}
.usuari-txt{line-height:1.25}
.usuari-txt b{display:block; font-weight:400; white-space:nowrap}
.usuari-txt span{display:block; font-size:11.5px; color:var(--ink-3); white-space:nowrap}
.usuari .boto{height:32px; padding:0 14px; font-size:12.5px}

/* ================= Capçalera de pantalla (carbon 160-164) ================= */
.ph{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:46px 0 34px}
.ph h1{font-weight:200; font-size:62px; line-height:1; letter-spacing:-.035em; margin:12px 0 0}

/* ================= «Más»: la fulla de baix del mobil (pantalles 534-540) ================= */
.mes-fons{position:fixed; inset:0; background:rgba(5,9,11,.45); z-index:60}
.mes-full{position:fixed; left:0; right:0; bottom:0; z-index:61; background:var(--bg-1); border-radius:22px 22px 0 0;
  padding:12px 20px calc(24px + env(safe-area-inset-bottom)); border-top:1px solid var(--line-2)}
.mes-full .nansa{width:40px; height:4px; border-radius:4px; background:var(--line-2); margin:0 auto 18px}
.mes-fila{display:flex; align-items:center; gap:14px; width:100%; min-height:44px; padding:16px 4px; border:0;
  border-bottom:1px solid var(--line); background:none; text-align:left; font-size:15px; color:var(--ink);
  text-decoration:none; font-weight:400}
.mes-fila svg{width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.4; color:var(--ink-2)}
@media (min-width:761px){ .mes-full,.mes-fons{display:none!important} }

/* ================= Contingut ================= */
main{padding:0 0 80px; max-width:1620px}

.targeta{background:var(--panel); border:1px solid var(--line); border-radius:16px; min-width:0; padding:24px 28px;
  display:flex; flex-direction:column}
/* el .card-h de la maqueta (pantalles 406-409): el titol a l'esquerra, la nota en Lora a la dreta i una ratlla a sota */
.targeta-cap{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 16px;
  padding:0 0 16px; border-bottom:1px solid var(--line); margin-bottom:18px}
.targeta-cap h2{font-size:22px; font-weight:300; margin:0; letter-spacing:-.01em; white-space:nowrap}
.targeta-cap .nota{margin-left:auto; font-family:var(--ital); font-style:italic; font-size:13px; color:var(--ink-3); text-align:right}
.targeta-cos{padding:0; min-width:0; flex:1 1 auto; display:flex; flex-direction:column}
@media (max-width:760px){ .targeta{padding:18px} .targeta-cap h2{white-space:normal} }   /* al mobil un titol llarg baixa de linia */

/* Filtres */
.filtres{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-bottom:16px}
.filtres input[type=search]{height:40px; padding:0 16px; border:1px solid var(--line-2);
  border-radius:999px; background:var(--input-bg); font-size:13px; min-width:0; max-width:100%; color:var(--ink)}
.filtres select{display:none}
.dd{position:relative; flex:none}
.dd-btn{display:flex; align-items:center; gap:9px; height:34px; padding:0 14px; border:1px solid var(--line-2);
  border-radius:999px; background:var(--input-bg); font-size:12.5px; color:var(--ink-2); white-space:nowrap; font-weight:400}
.dd-btn:hover{border-color:var(--text-3)}
.dd[data-obert="1"] .dd-btn{border-color:var(--ink-3)}
.dd-btn svg{width:13px;height:13px;color:var(--text-3);transition:transform .16s}
.dd[data-obert="1"] .dd-btn svg{transform:rotate(180deg)}
.dd-panell{position:absolute; z-index:40; top:calc(100% + 7px); left:0; min-width:100%; width:max-content;
  max-width:min(300px,86vw); max-height:288px; overflow-y:auto; background:var(--bg-raise);
  border:1px solid var(--linia); border-radius:14px; box-shadow:var(--om-2); padding:6px; display:none}
.dd[data-obert="1"] .dd-panell{display:block}
.dd-op{display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:none; border:0;
  padding:8px 11px; border-radius:9px; font-size:13px; color:var(--text-2); white-space:nowrap}
.dd-op:hover{background:var(--inox-2); color:var(--text)}
.dd-op[aria-selected="true"]{background:var(--track); color:var(--ink); font-weight:400}
.dd-op i{width:6px;height:6px;border-radius:50%;background:var(--brasa);flex:none;opacity:0}
.dd-op[aria-selected="true"] i{opacity:1}
.filtres input[type=search]{flex:1 1 200px; min-width:140px}
.filtres select:focus, .filtres input:focus{outline:none; border-color:var(--ink-3)}
/* .segment = el .seg de la maqueta: bloc de color beix, el triat en tinta, sense vores ni halos */
.segment{display:inline-flex; padding:3px; border-radius:10px; background:var(--seg-bg); flex:none; gap:2px}
.segment button{border:0; background:none; height:32px; padding:0 14px; border-radius:8px; font-size:12.5px; color:var(--ink-2);
  display:inline-flex; align-items:center; gap:7px; font-weight:400; white-space:nowrap; transition:background .15s,color .15s}
.segment button:hover{color:var(--ink)}
.segment button[aria-pressed="true"]{background:var(--ink); color:var(--bg-1)}
.compte{margin-left:auto; font-size:12.5px; color:var(--text-3); white-space:nowrap}
.compte b{font-variant-numeric:tabular-nums; color:var(--text); font-weight:500}
/* .boto = el .btn de la maqueta (contorn); .fosc = .btn.pri (tinta); .brasa = .btn.ember (text #16232A, >= 4,5:1) */
.boto{height:38px; display:inline-flex; align-items:center; gap:9px; padding:0 18px; border-radius:999px; font-size:13px;
  font-weight:400; border:1px solid var(--line-2); background:none; color:var(--ink); white-space:nowrap; text-decoration:none}
.boto:hover{border-color:var(--ink-3)}
.boto svg{width:15px; height:15px; fill:none; stroke:currentColor}
.boto.fantasma{background:none}
.boto.fosc{background:var(--ink); color:var(--bg-1); border-color:var(--ink)}
.boto.fosc:hover{background:var(--ink-2); border-color:var(--ink-2)}
.boto.brasa{background:var(--ember); border-color:var(--ember); color:#16232A}
.boto.brasa:hover{background:var(--ember-hover); border-color:var(--ember-hover)}
.boto:disabled{opacity:.5; cursor:default}

/* Taula */
.taula-caixa{overflow-x:auto; border-radius:var(--r-l); background:var(--blanc); box-shadow:var(--om-1); -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; font-size:13px; min-width:660px}
thead th{font-weight:500; text-transform:uppercase;
  letter-spacing:.08em; font-size:10.5px; color:var(--text-3); text-align:left;
  padding:13px 15px; background:var(--inox-2); border-bottom:1px solid var(--linia); white-space:nowrap}
thead th.dreta{text-align:right}
tbody td{padding:12px 15px; border-bottom:1px solid var(--linia-2); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--inox-2)}
.cel-nom{font-weight:500}
.cel-sub{font-size:11.5px; color:var(--text-3); margin-top:2px; max-width:270px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
td.num-cel{font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.xip{display:inline-block; padding:2px 9px; border-radius:99px; font-size:11px; background:var(--inox); color:var(--text-2); margin:2px 3px 2px 0; white-space:nowrap}
.xip.foc{background:var(--brasa-suau); color:var(--ember-txt)}
/* .calaix = la .badge de la maqueta: la lletra dins d'un cercle amb la vora del color de la prioritat */
.calaix{display:inline-grid; place-items:center; width:34px; height:34px; flex:none; border-radius:50%;
  font-weight:500; font-size:13px; color:var(--ink); border:1.5px solid; background:var(--bg-1)}
.calaix.A{border-color:var(--p-a)}
.calaix.B{border-color:var(--p-b)}
.calaix.C{border-color:var(--p-c); color:var(--ink-2)}
.web-punt{display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--text-2); white-space:nowrap}
.web-punt i{width:6px;height:6px;border-radius:50%;flex:none;display:block}
.url-cel{max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}
.w-propia{background:var(--ok)} .w-social{background:var(--brasa)} .w-cap{background:var(--fill-2)}
.gauge{display:inline-flex; gap:3px; align-items:flex-end; vertical-align:middle}
.gauge i{width:5px; border-radius:2px; background:var(--track-hi); display:block}
.gauge i:nth-child(1){height:7px}.gauge i:nth-child(2){height:11px}.gauge i:nth-child(3){height:15px}
.gauge[data-n="1"] i:nth-child(1),.gauge[data-n="2"] i:nth-child(-n+2),.gauge[data-n="3"] i{background:var(--brasa)}
.gauge[data-marca="josper"] i{background:var(--granat)}

/* ================= Mapa (pla 9, tasca 8: pantalles 373-404) =================
   El mapa base (liberty d'OpenFreeMap) no canvia amb el mode; la barra, la llegenda, els controls i el popup, si. */
.m-barra{gap:10px; margin-bottom:20px}
.m-barra .compte b{font-weight:400}
.m-barra .boto svg{width:15px; height:15px; fill:none; stroke:currentColor}
/* El mapa cap a la pantalla, sense scroll (revisio final del pla 9): per sobre de la seccio hi ha ~246 px (capçalera i
   titol) i, a sota, el marge de main, que a la pantalla del mapa es redueix a 24 px. La seccio fa la resta de la
   finestra i el mapa ocupa el que li deixa la barra: la llegenda, des que es a la barra (26/10/2026), fa una o dues linies
   segons l'amplada, i amb una alçada fixa del mapa la pagina feia scroll (29 px a 1366x800). Es un minim i no una
   alçada: en una finestra massa baixa per al minim del mapa, la seccio creix i la pagina fa scroll, i el mapa mai no
   surt de la seccio ni queda sota la barra de baix del mobil (Codex, volta 1). */
main:has(> #v-mapa:not([hidden])){padding-bottom:24px}
#v-mapa:not([hidden]){display:flex; flex-direction:column; min-height:calc(100vh - 270px); min-height:calc(100dvh - 270px)}
.mapa-caixa{position:relative; flex:1 1 auto; min-height:320px; border-radius:16px;
  overflow:hidden; border:1px solid var(--line); background:var(--map-water)}
/* absolut i no 100%: la caixa es un element flex sense alçada definida, i un 100% no es resol (el llenç es quedava a
   300 px) */
#mapa{position:absolute; inset:0}
/* els controls de zoom (map-zoom de la maqueta): a dalt a la dreta, del color dels panells flotants */
.maplibregl-ctrl-top-right{top:8px!important; right:8px!important}
.maplibregl-ctrl-group{background:var(--tip-bg)!important; border:1px solid var(--line); border-radius:12px!important;
  box-shadow:var(--tip-shadow)!important; overflow:hidden}
.maplibregl-ctrl-group button{width:38px!important; height:38px!important}
.maplibregl-ctrl-group button+button{border-top:1px solid var(--line)!important}
.maplibregl-ctrl-attrib{font-size:10px!important; background:rgba(255,255,255,.78)!important; border-radius:8px 0 0 0!important}
/* llegenda (pantalles 384-390): A, B i C de mida diferent, el punt negre dels sense dades i el punt verd dels clients,
   amb els mateixos colors que els punts (els clars, en tots dos modes). A la barra, a la dreta de tot, fora del
   mapa: a sobre tapava els punts, i al mobil gairebe tot el mapa. El mapa no s'escurça (Jaume, 26/10/2026). */
.mapa-leg{display:flex; flex-wrap:wrap; align-items:center; gap:4px 18px; margin-left:10px; font-size:12.5px; color:var(--ink-2)}
.mapa-leg .micro{display:none}
.mapa-leg div{display:flex; align-items:center; gap:8px; font-weight:400; white-space:nowrap}
.mapa-leg em{font-style:normal; color:var(--ink-3); font-weight:300; font-variant-numeric:tabular-nums}
.mapa-leg i{width:10px; height:10px; border-radius:50%; flex:none; border:1.5px solid var(--map-vora); box-shadow:0 0 0 1px var(--line)}
.mapa-leg i.punt.A{width:11px; height:11px; background:var(--map-pa)}
.mapa-leg i.punt.B{width:9px; height:9px; margin:0 1px; background:var(--map-pb)}
.mapa-leg i.punt.C{width:6px; height:6px; margin:0 2.5px; background:var(--map-pc)}
.mapa-leg i.punt.sd{width:9px; height:9px; margin:0 1px; background:var(--map-sd); border-color:var(--map-sd-vora)}
.mapa-leg i.cli{width:11px; height:11px; background:var(--map-cli)}
.mapa-leg p{display:none}
/* el popup (pantalles 392-398), fet amb nodes a app.js */
.maplibregl-popup-content{padding:16px 18px!important; border-radius:12px!important; background:var(--tip-bg)!important;
  border:1px solid var(--line-2); box-shadow:var(--tip-shadow)!important}
.maplibregl-popup-tip{display:none}
.pop{min-width:224px; font-family:var(--sans)}
.pop-cap{display:flex; align-items:center; gap:12px}
.pop-nom{display:block; font-weight:400; font-size:15px; color:var(--ink); line-height:1.2}
.pop-cap small{display:block; font-size:12px; color:var(--ink-3)}
.pop-prio{font-size:13px; color:var(--ink); margin:10px 0 12px; white-space:nowrap}
.pop-punt{display:inline-block; width:8px; height:8px; border-radius:50%; margin:0 0 1px 5px; vertical-align:middle}
.pop-punt.A{background:var(--p-a)} .pop-punt.B{background:var(--p-b)} .pop-punt.C{background:var(--p-c)}
.pop-anar{color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--line-2)}
.pop-anar:hover{color:var(--ink)}
.pop-q{font-family:var(--ital); font-style:italic; font-size:13px; color:var(--ink-2); margin:-6px 0 12px}
.pop-q mark{background:none; color:inherit; box-shadow:inset 0 -1px 0 var(--ember); padding:0 1px}
.pop-cap + .pop-fitxa{margin-top:12px}
.pop-fitxa{display:inline-flex; gap:6px; align-items:center; padding:0 0 1px; border:0; border-bottom:1px solid var(--ember-edge);
  background:none; font-size:12.5px; color:var(--ink); font-weight:400}
.pop-fitxa svg{width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:1.8}
/* en fosc, les icones de MapLibre (gris fosc) es giren perque es vegin sobre el fons fosc dels controls */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .maplibregl-ctrl-group .maplibregl-ctrl-icon{filter:invert(1) hue-rotate(180deg)}
}
:root[data-theme="dark"] .maplibregl-ctrl-group .maplibregl-ctrl-icon{filter:invert(1) hue-rotate(180deg)}
@media (max-width:760px){
  /* a sobre de la seccio ~236 px (i 1 px de marge pels arrodoniments); a sota, la barra de baix (el padding de .cos: 96 px i la zona segura) */
  #v-mapa:not([hidden]){min-height:calc(100vh - 333px); min-height:calc(100dvh - 333px - env(safe-area-inset-bottom))}
  .mapa-caixa{min-height:300px; border-radius:12px}
  main:has(> #v-mapa:not([hidden])){padding-bottom:0}
  /* la llegenda, compacta (pantalles 571-573): una franja sencera de la barra, despres del recompte */
  .mapa-leg{order:4; width:100%; margin-left:0; gap:2px 14px; font-size:11.5px}
  .m-barra{gap:8px; margin-bottom:14px}
  .m-barra .compte{order:3; width:100%; margin-left:0}
}

/* Panell pendent */
.buit{background:var(--blanc); border-radius:var(--r-l); padding:clamp(26px,4vw,46px); box-shadow:var(--om-1); max-width:720px}
.buit h2{font-size:clamp(19px,2.4vw,23px); margin:0 0 7px; letter-spacing:-.018em}
.buit .lead{font-family:var(--ital); font-style:italic; font-size:15.5px; color:var(--text-2); margin:0 0 24px}
.hist-filtre{display:flex; align-items:flex-end; gap:10px 14px; flex-wrap:wrap; margin:0 0 12px}
.hist-filtre label{display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:var(--text-2)}
.hist-filtre input{padding:7px 10px; border:1px solid var(--linia); border-radius:10px; font:inherit; font-size:13px;
  background:var(--blanc); color:var(--text)}
.hist-filtre .nota{margin-left:auto; align-self:center}
@media (max-width:640px){ .hist-filtre .nota{margin-left:0; flex-basis:100%} }
.peu-nota{font-family:var(--ital); font-style:italic; font-size:12.5px; color:var(--ink-3); margin:0; padding-top:22px; max-width:860px}
.barra-eines{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap}
.barra-eines .micro{margin-right:auto}
.estat-ok{color:var(--ok); font-weight:500; white-space:nowrap}
.estat-ko{color:var(--ember-txt); font-weight:500; white-space:nowrap}
/* Un avis no es un error: el text en tinta amb el punt --warn de la maqueta (el --warn clar com a text fa 4,1:1 sobre el
   panell, per sota de 4,5:1; com a punt n'hi ha prou amb 3:1) */
.estat-avis{color:var(--ink); font-weight:500; white-space:nowrap}
.estat-avis::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--warn);
  margin-right:7px; vertical-align:middle}

/* ================= Taula de restaurants, amplada fixa ================= */
.taula-caixa.fixa{overflow:visible}
table.rest{table-layout:fixed; min-width:0; width:100%}
table.rest th, table.rest td{overflow:hidden}
table.rest thead th{position:sticky; top:0; z-index:5}
table.rest thead th:first-child{border-top-left-radius:var(--r-l)}
table.rest thead th:last-child{border-top-right-radius:var(--r-l)}
table.rest tbody tr:last-child td:first-child{border-bottom-left-radius:var(--r-l)}
table.rest tbody tr:last-child td:last-child{border-bottom-right-radius:var(--r-l)}
table.rest tbody tr{cursor:pointer}
table.rest tbody tr:focus-visible{background:var(--inox-2)}
table.rest .cel-sub{max-width:none}
.c-nom{width:40%} .c-prio{width:9%} .c-score{width:9%}
.c-prod{width:22%} .c-ticket{width:12%} .c-web{width:8%}
table.rest thead th{padding:13px 12px}
table.rest tbody td{padding:12px}
/* La capcalera i la cel.la de cada columna, alineades igual.
   Prou especifiques per guanyar a thead th, th.dreta i td.num-cel. */
table.rest th.c-nom, table.rest td.c-nom,
table.rest th.c-prod, table.rest td.c-prod{text-align:left}
table.rest th.c-prio, table.rest td.c-prio,
table.rest th.c-score, table.rest td.c-score,
table.rest th.c-ticket, table.rest td.c-ticket,
table.rest th.c-web, table.rest td.c-web{text-align:center}
table.rest td.c-score{font-variant-numeric:tabular-nums; font-weight:500}
.web-ic{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:9px; background:var(--inox-2); color:var(--text-2); transition:.14s}
.web-ic:hover{background:var(--brasa-suau); color:var(--brasa)}
.web-ic svg{width:15px; height:15px}
.web-cap{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--fill-2)}

/* Paginacio */
.pagina{display:flex; align-items:center; gap:10px; justify-content:flex-end; margin-top:14px; flex-wrap:wrap}
.pagina .rang{font-size:12.5px; color:var(--text-3)}
.pagina .rang b{font-variant-numeric:tabular-nums; color:var(--text); font-weight:500}
/* el .pager de la maqueta (pantalles 304-306): bloc beix, sense vora */
.pag-btn{width:34px; height:34px; border-radius:8px; border:0; padding:0;
  background:var(--seg-bg); display:grid; place-items:center; color:var(--ink-2); transition:color .15s}
.pag-btn:hover:not(:disabled){color:var(--ink)}
.pag-btn:disabled{opacity:.38; cursor:default}
.pag-btn svg{width:15px; height:15px}

/* Targetes, per sota de 900 px */
.targetes{display:none; flex-direction:column; gap:10px}
.tarj{display:flex; gap:12px; align-items:center; background:var(--blanc); border-radius:var(--r-m);
  box-shadow:var(--om-1); padding:13px 15px; cursor:pointer}
.tarj:focus-visible{box-shadow:var(--om-1),0 0 0 2px var(--brasa)}
.tarj-txt{min-width:0; flex:1 1 auto}
.tarj-nom{font-size:13.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tarj-sub{font-size:11.5px; color:var(--text-3); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tarj-xips{display:flex; flex-wrap:wrap; gap:3px; margin-top:8px; align-items:center}
.tarj-score{font-variant-numeric:tabular-nums;
  font-size:11.5px; font-weight:500; color:var(--text-2); background:var(--inox-2);
  border-radius:8px; padding:3px 8px}

/* ================= Producte ================= */
.xip.pr{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--bg-1); color:var(--ink-2); font-weight:400}
/* el color del producte, el mateix token que el Dashboard (--pr-*), en un punt; el text sempre en tinta */
.xip.pr::before{content:""; width:7px; height:7px; border-radius:50%; flex:none; background:var(--pr-c,var(--ink-3))}
.xip.pr-josper{--pr-c:var(--pr-josper)} .xip.pr-altra{--pr-c:var(--pr-altra)} .xip.pr-carbo{--pr-c:var(--pr-carbo)}
.xip.pr-menaje{--pr-c:var(--pr-menaje)} .xip.pr-sense{--pr-c:var(--pr-sense); color:var(--ink-3)}
.cel-prod{display:flex; gap:3px; align-items:center; min-width:0; overflow:hidden; justify-content:flex-start}
.cel-prod .xip{margin:0; font-size:10.5px; padding:2px 8px; min-width:0;
  overflow:hidden; text-overflow:ellipsis}

/* ================= Leads (pla 9, tasca 7; pantalles 268-312 i 778-797) =================
   Una barra d'eines, la llista a tot l'ample (taula a l'escriptori, targetes fins a 760 px) i la fitxa al panell. */
.l-barra{gap:10px; padding-bottom:20px; border-bottom:1px solid var(--line); margin-bottom:0}
.segment.abc button{width:42px; padding:0; justify-content:center; gap:6px}
.segment.abc button i{width:7px; height:7px; border-radius:50%; flex:none}
#l-prio button[data-p="A"] i{background:var(--p-a)}
#l-prio button[data-p="B"] i{background:var(--p-b)}
#l-prio button[data-p="C"] i{background:var(--p-c)}
.l-cerca{display:flex; align-items:center; gap:10px; width:250px; max-width:100%; height:40px; padding:0 16px;
  border:1px solid var(--line-2); border-radius:999px; color:var(--ink-3); background:var(--input-bg); flex:none}
.l-cerca:focus-within{border-color:var(--ink-3)}
.l-cerca svg{width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5}
.filtres .l-cerca input[type=search]{flex:1 1 auto; min-width:0; height:auto; padding:0; border:0; border-radius:0;
  background:none; outline:none; color:var(--ink); font-weight:300; font-size:13px}
.l-barra .compte b{font-weight:400}
.l-barra .boto svg{width:15px; height:15px; fill:none; stroke:currentColor}

.l-taula{width:100%; min-width:0; border-collapse:collapse; margin-top:4px; font-size:13px}
.l-taula thead th{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); font-weight:400;
  text-align:left; padding:16px 14px; border-bottom:1px solid var(--line); background:none; white-space:nowrap}
.l-taula th:first-child,.l-taula td:first-child{padding-left:0}
.l-taula tbody td{padding:14px; border-bottom:1px solid var(--line); color:var(--ink-2); vertical-align:middle}
.l-taula tbody tr:last-child td{border-bottom:1px solid var(--line)}
.l-taula tbody tr{cursor:pointer; transition:background .15s}
.l-taula tbody tr:hover{background:var(--track)}
.l-taula tbody tr[aria-selected="true"]{background:var(--track); box-shadow:inset 3px 0 0 var(--ember)}
.l-taula .l-c-prio{width:84px}
.l-taula .l-c-tiquet{white-space:nowrap}
.l-nom{font-size:15px; font-weight:400; color:var(--ink); line-height:1.25; overflow-wrap:anywhere}
.l-dt{font-size:12px; color:var(--ink-3); margin-top:2px}
.l-horno.josper{color:var(--ink)}
.l-horno.sd{color:var(--ink-3); font-style:italic; font-family:var(--ital)}
.l-sc{display:flex; align-items:center; gap:12px}
.l-sc b{font-weight:300; font-size:15px; color:var(--ink); width:24px}
.l-sc i{display:block; width:84px; height:3px; border-radius:3px; background:var(--track-hi); position:relative; flex:none}
.l-sc s{position:absolute; left:0; top:0; bottom:0; border-radius:3px; background:var(--fill)}
.est{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-3); white-space:nowrap}
.est i{width:7px; height:7px; border-radius:50%; border:1px solid var(--ink-3); flex:none}
.est.fet{color:var(--ink-2)}
.est.fet i{background:var(--ok); border-color:var(--ok)}
.l-targetes{display:none}
.l-targeta{display:grid; grid-template-columns:12px minmax(0,1fr) auto; gap:4px 14px; align-items:center;
  padding:15px 0; border-bottom:1px solid var(--line); cursor:pointer}
.l-targeta .l-punt{width:8px; height:8px; border-radius:50%; border:1px solid var(--ink-3); grid-row:1/4; grid-column:1}
.l-targeta .l-punt.fet{background:var(--ok); border-color:var(--ok)}
.l-targeta .l-nom{grid-column:2}
.l-targeta .calaix{grid-row:1/4; grid-column:3}
.l-targeta .l-sub{grid-column:2; font-size:12px; color:var(--ink-3)}
.l-targeta .l-horno.josper{color:var(--ink-2)}
.l-buit{margin:0; padding:28px 0; border-bottom:1px solid var(--line); font-family:var(--ital); font-style:italic; color:var(--ink-3)}
.l-peu{display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:18px; font-size:12.5px; color:var(--ink-3); flex-wrap:wrap}
.l-peu .pagina{margin-top:0; margin-left:auto}

/* ================= La fitxa: panell lateral i fulla de baix (pla 9, tasca 7; pantalles 313-372 i 571-586) ================= */
.panell-fons{position:fixed; inset:0; z-index:70; background:rgba(5,9,11,.42); animation:fx-fons .3s ease}
.panell{position:fixed; top:0; right:0; bottom:0; width:600px; max-width:100vw; z-index:71; display:flex; flex-direction:column;
  background:var(--bg-1); border-left:1px solid var(--line-2); box-shadow:-30px 0 80px -30px rgba(5,9,11,.45);
  animation:fx-entra .38s cubic-bezier(.2,.8,.2,1)}
.panell.arrossega,.panell.entrat{animation:none; transition:none}
@keyframes fx-fons{from{opacity:0}}
@keyframes fx-entra{from{transform:translateX(102%)}}
@keyframes fx-puja{from{transform:translateY(105%)}}
body.amb-fitxa{overflow:hidden}
.fx-cap{flex:none; display:flex; align-items:center; gap:8px; height:62px; padding:0 20px 0 32px; border-bottom:1px solid var(--line); position:relative}
.fx-nansa{display:none}
.fx-titol{flex:1}
.fx-pos{font-size:12px; color:var(--ink-3); margin-right:6px; white-space:nowrap}
.fx-btn{width:32px; height:32px; border-radius:8px; border:0; padding:0; background:var(--seg-bg); color:var(--ink-2); display:grid; place-items:center; flex:none}
.fx-btn:hover:not(:disabled){color:var(--ink)}
.fx-btn:disabled{opacity:.4; cursor:default}
.fx-btn svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.fx-tanca{margin-left:6px}
.fx-cos{flex:1; min-height:0; overflow-y:auto; padding:26px 32px 30px; overscroll-behavior:contain}
.fx-accions{flex:none; display:flex; gap:10px; padding:14px 32px; border-top:1px solid var(--line); background:var(--bg-1)}
.fx-accions .boto{flex:1; justify-content:center; height:46px}
.fx-accions svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5}

.fitxa-cap{display:flex; justify-content:space-between; gap:16px; align-items:flex-start; padding-bottom:20px; border-bottom:1px solid var(--line)}
.fitxa-nom{min-width:0}
.fitxa-cap h2{font-weight:300; font-size:30px; line-height:1.1; letter-spacing:-.02em; margin:0; overflow-wrap:anywhere}
.fitxa-cap .sota{font-family:var(--ital); font-style:italic; color:var(--ink-3); font-size:13.5px; margin-top:6px}
.fitxa-score{text-align:right; flex:none}
.fitxa-score b{display:block; font-weight:200; font-size:48px; line-height:.9; letter-spacing:-.04em; color:var(--ink)}
.fitxa-prio{display:inline-flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:10px}
.bloc{padding:20px 0; border-bottom:1px solid var(--line); min-width:0}
.bloc:last-child{border-bottom:0}
.bloc > .micro{display:block; margin-bottom:12px}
.dades-reixa{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 22px}
.dada{min-width:0}
.dada.ample{grid-column:1/-1}
.dada .k{font-size:11.5px; color:var(--ink-3)}
.dada .v{font-size:14px; color:var(--ink); font-weight:400; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dada.ample .v{white-space:normal; overflow:visible; line-height:1.35}
.dada .v a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-2)}
.metriques{display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
.metrica{padding:0 12px; border-left:1px solid var(--line); min-width:0}
.metrica:first-child{padding-left:0; border-left:0}
.metrica b{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:200; font-size:24px; line-height:1;
  letter-spacing:-.02em; color:var(--ink)}
.metrica span{display:block; font-size:11px; color:var(--ink-3); margin-top:6px; line-height:1.3}
/* Selectors (pantalles 355-372): blocs sòlids, beix sense triar, tinta triat, sense contorn; el punt del producte es el
   seu token (--pr-*) */
.prod-tria,.validacio{display:flex; flex-wrap:wrap; gap:6px}
.pbtn,.vbtn{height:34px; display:inline-flex; align-items:center; gap:7px; padding:0 14px; border-radius:8px; border:0;
  background:var(--seg-bg); font-size:12.5px; color:var(--ink-2); font-weight:400; transition:background .15s,color .15s}
.pbtn:hover,.vbtn:hover{color:var(--ink)}
.pbtn[aria-pressed="true"],.vbtn[aria-pressed="true"]{background:var(--ink); color:var(--bg-1)}
.pbtn i{width:7px; height:7px; border-radius:50%; flex:none; background:var(--pr-c,var(--ink-3))}
.pbtn.josper{--pr-c:var(--pr-josper)} .pbtn.altra{--pr-c:var(--pr-altra)} .pbtn.carbo{--pr-c:var(--pr-carbo)}
.pbtn.menaje{--pr-c:var(--pr-menaje)} .pbtn.sense{--pr-c:var(--pr-sense)}
/* el punt de Carbón es del color de la tinta: amb el boto premut (tinta), una vora del color del fons el deixa veure */
.pbtn[aria-pressed="true"] i{box-shadow:0 0 0 1.5px var(--bg-1)}
select.marca-forn{display:block; margin-top:12px; height:34px; padding:0 14px; border:1px solid var(--line-2); border-radius:999px;
  background:var(--input-bg); color:var(--ink-2); font-size:12.5px}
/* Pla 10: «Visitado / No visitado» i la data de la visita, a sota dels botons de validacio */
.visita{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.visita select.visitat{display:none}
.marca-fila{display:flex; margin-top:12px}
.marca-fila select.marca-forn{display:none}
input.visitat-el{height:34px; padding:0 14px; border:1px solid var(--line-2); border-radius:999px;
  background:var(--input-bg); color:var(--ink-2); font-size:12.5px; font-family:inherit}
textarea{width:100%; min-height:80px; margin-top:12px; padding:12px 14px; border:1px solid var(--line-2); border-radius:10px;
  background:var(--input-bg); resize:vertical; font-weight:300; font-size:13.5px; color:var(--ink)}
textarea::placeholder{color:var(--ink-3)}
textarea:focus{border-color:var(--ink-3)}
/* teclat: el mateix contorn de tinta que els altres camps (.usu-form), amb el radi del camp (el :focus-visible general
   en posa 6 px). Revisio final del pla 9: fora l'outline:none que ho semblava treure */
textarea:focus-visible{outline:2px solid var(--ink-2); outline-offset:2px; border-radius:10px}
/* Pla 10: el registre de notas, un desplegable tancat d'entrada a sota de la caixa */
.registre{margin-top:14px; border-top:1px solid var(--line); padding-top:12px}
.registre>summary{cursor:pointer; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2);
  list-style-position:inside; min-height:32px; display:flex; align-items:center; gap:6px}
.registre>summary::before{content:'▸'; font-size:11px; color:var(--ink-3)}
.registre[open]>summary::before{content:'▾'}
.registre>summary::-webkit-details-marker{display:none}
.registre>summary{list-style:none}
.reg-llista{list-style:none; margin:8px 0 0; padding:0}
.reg-entrada{padding:10px 0; border-bottom:1px solid var(--line)}
.reg-entrada:last-child{border-bottom:0}
.reg-cap{font-size:12px; color:var(--ink-3)}
.reg-text{margin:4px 0 0; font-size:13.5px; font-weight:300; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere}
.reg-buit{margin:8px 0 0; font-size:13px; color:var(--ink-3)}
.reg-torna{margin-top:8px}
/* La prova: cites amb una ratlla a l'esquerra, sense caixes; la paraula clau subratllada en brasa */
.prova{padding:1px 0 1px 14px; border-left:2px solid var(--ember); margin-bottom:16px}
.prova:last-child{margin-bottom:0}
.prova.ia,.prova.buida{border-left-color:var(--line-2)}
.prova.cli{border-left-color:var(--ok)}
.prova-cap{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); font-weight:400}
.prova .cita{font-family:var(--ital); font-style:italic; font-size:14.5px; line-height:1.45; color:var(--ink); margin:4px 0 3px; overflow-wrap:anywhere}
.prova .cita mark{background:none; color:inherit; box-shadow:inset 0 -1px 0 var(--ember); padding:0 1px}
.prova .font{font-size:11.5px; color:var(--ink-3)}
.prova .font a{color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--line-2)}
.prova-estat{margin:0 0 16px; padding:1px 0 1px 14px; border-left:2px solid var(--line-2); font-family:var(--ital); font-style:italic;
  font-size:14.5px; line-height:1.45; color:var(--ink-2)}
.prova-estat.sense_dades{border-left-color:var(--warn)}
.prova-estat:last-child{margin-bottom:0}

@media (max-width:760px){
  .l-barra{gap:8px}
  .l-cerca{order:-1; width:100%; height:44px}
  .l-barra .segment{max-width:100%; overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap}
  .l-barra .segment button{padding:0 11px; flex:none}
  .l-barra .segment.abc button{padding:0; width:44px}
  .l-barra .compte{width:100%; margin-left:0}
  .l-taula{display:none}
  .l-targetes{display:block}
  .l-tecles{display:none}
  .l-peu .pagina{margin-left:0}
  /* la fitxa passa a fulla de baix, del 90 % de l'alcada */
  .panell{top:auto; left:0; width:auto; max-width:none; height:90vh; height:90dvh; border-left:0; border-top:1px solid var(--line-2);
    border-radius:22px 22px 0 0; box-shadow:0 -24px 60px -24px rgba(5,9,11,.45); animation-name:fx-puja}
  .fx-cap{justify-content:center; align-items:flex-start; height:44px; padding:10px 0 0; border-bottom:0; touch-action:none; cursor:grab}
  .fx-nansa{display:block; width:42px; height:5px; border-radius:5px; background:var(--line-2)}
  .fx-titol,.fx-pos,#fx-ant,#fx-seg{display:none}
  .fx-tanca{position:absolute; right:8px; top:0; width:44px; height:44px; border-radius:50%; margin:0}
  .fx-cos{padding:0 18px 22px}
  .fitxa-cap h2{font-size:27px}
  .fitxa-score b{font-size:40px}
  .metrica{padding:0 9px}
  .metrica b{font-size:21px}
  .metrica span{font-size:10.5px}
  .fx-accions{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
}

/* ================= Dashboard (pla 9, tasca 6; carbon 260-375 i, al mobil, 404-445) ================= */
.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line)}
.kpi{padding:13px 28px 14px; position:relative; min-width:0}
.kpi+.kpi{border-left:1px solid var(--line)}
.kpi:first-child{padding-left:0}
.kpi .v{font-weight:200; font-size:34px; line-height:1; letter-spacing:-.03em; margin:8px 0 6px; color:var(--ink); white-space:nowrap}
.kpi .v sup{font-size:13px; font-weight:300; letter-spacing:0; vertical-align:top; position:relative; top:4px; margin-left:4px; color:var(--ink-2)}
.kpi.hot .v{color:var(--ember-hot); text-shadow:var(--hot-shadow)}
.kpi .d{font-family:var(--ital); font-style:italic; font-size:13.5px; color:var(--ink-3)}
.kpi .meter{height:3px; border-radius:3px; background:var(--track); margin-top:8px; overflow:hidden}
.kpi .meter i{display:block; height:100%; width:0; border-radius:3px; background:var(--fill)}
.kpi.hot::after{content:""; position:absolute; left:28px; right:28px; bottom:-1px; height:1px; background:linear-gradient(90deg,transparent,var(--ember),transparent)}

/* panells: dues files de dos i una a tot l'ample; els d'una fila acaben a la mateixa alcada */
.dgrid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:20px; margin-top:28px; align-items:stretch}
.dgrid .sec{padding:26px 30px 30px; background:var(--panel); border:1px solid var(--line); border-radius:18px; min-width:0;
  display:flex; flex-direction:column}
.c7{grid-column:span 7} .c5{grid-column:span 5} .c6{grid-column:span 6} .c12{grid-column:span 12}
.sh{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:22px; margin-bottom:8px; border-bottom:1px solid var(--line)}
.sh h2{font-family:var(--display); font-weight:300; font-size:25px; line-height:1.15; letter-spacing:-.01em; margin:8px 0 0}
.sh p{font-family:var(--ital); font-style:italic; color:var(--ink-3); font-size:13.5px; margin:6px 0 0}

/* tooltip (carbon 197-205): un sol #tip, que posa app.js */
#tip{position:fixed; z-index:100; left:0; top:0; pointer-events:none; min-width:150px; max-width:260px; padding:12px 14px; border-radius:10px;
  background:var(--tip-bg); border:1px solid var(--line-2); box-shadow:var(--tip-shadow); font-size:12.5px; color:var(--ink-2);
  opacity:0; transform:translateY(4px); transition:opacity .15s,transform .15s; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
#tip.on{opacity:1; transform:none}
#tip b{display:block; font-weight:500; font-size:13.5px; color:var(--ink); margin-bottom:4px}
#tip div{display:flex; align-items:center; gap:8px; line-height:1.6}
#tip div i{width:8px; height:8px; border-radius:2px; flex:none}
#tip div em{font-style:normal; margin-left:auto; padding-left:14px; color:var(--ink); font-variant-numeric:tabular-nums}

/* text dels grafics SVG */
.chart{position:relative; width:100%; min-width:0}
.chart svg{display:block; max-width:100%}
.chart svg text{font-family:var(--sans); font-weight:400}
.ax{fill:var(--ink-3); font-size:11px}
.ax.ara{fill:var(--ink-2)}
.chart svg text.vl{fill:var(--ink); font-size:20px; font-weight:300}
.vm{fill:var(--ink-3); font-size:12px}
.hit{fill:transparent}
@keyframes pulse{0%{r:6;opacity:.55}100%{r:18;opacity:0}}
.pulse{animation:pulse 2.4s ease-out infinite}

/* cuota de mercado: xifres compactes i evolucio mensual */
.mkt{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:6px 0 18px; border-bottom:1px solid var(--line)}
.mkt>div{padding:0 16px; border-left:1px solid var(--line); min-width:0; display:flex; flex-direction:column}
.mkt>div:first-child{padding-left:0; border-left:0}
.mkt .k{font-size:11.5px; color:var(--ink-3); line-height:1.3}
.mkt b{display:block; font-weight:200; font-size:30px; line-height:1; letter-spacing:-.02em; color:var(--ink); margin-top:auto; padding-top:8px; white-space:nowrap}
.mkt b small{font-size:13px; font-weight:300; letter-spacing:0; color:var(--ink-3); margin-left:6px}
.mkt-sub{display:flex; justify-content:space-between; align-items:center; gap:8px 16px; flex-wrap:wrap; padding:16px 0 2px}
#g-eix{flex:1; display:flex; align-items:flex-end}

/* prioridad */
.prio{flex:1; display:flex; flex-direction:column; padding-top:8px}
.prio-big{display:grid; grid-template-columns:1fr 1fr 1.3fr; margin-top:26px}
.prio-big>div{padding:0 12px; border-left:1px solid var(--line); min-width:0}
.prio-big>div:first-child{padding-left:0; border-left:0}
.prio-big .l{display:flex; align-items:center; gap:7px; white-space:nowrap; font-size:12px; color:var(--ink-2); font-weight:400}
.prio-big .l i{width:10px; height:10px; border-radius:50%; flex:none}
.prio-big .n{font-weight:200; font-size:36px; line-height:1; letter-spacing:-.03em; margin:14px 0 6px; white-space:nowrap}
.prio-big .p{font-size:12.5px; color:var(--ink-3); white-space:nowrap}
.prio-gap{flex:1; min-height:28px}
.prio-foot{padding-top:18px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:12px; font-size:12.5px; color:var(--ink-3)}
.prio-foot b{font-weight:400; color:var(--ink)}

/* files de barres (districte): es reparteixen l'alcada que queda */
.rows{flex:1; display:flex; flex-direction:column; justify-content:space-between; padding-top:6px}
.r{display:grid; grid-template-columns:132px minmax(0,1fr) 124px; align-items:center; gap:18px; min-height:36px; border-radius:6px}
.r .rl{font-size:13px; color:var(--ink-2); font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.r.other .rl{color:var(--ink-3); font-weight:300}
.r .rb{position:relative; height:8px}
.r .rb i{position:absolute; left:0; top:0; bottom:0; border-radius:0 4px 4px 0}
.r .rb .t{background:var(--track-hi); transition:background .2s}
.r .rb .f{background:var(--fill)}
.r.other .rb .f{background:var(--fill-2)}
.r:hover .rb .t{background:var(--line-2)}
.r .rv{font-size:12.5px; color:var(--ink-3); text-align:right; white-space:nowrap; min-width:0}
.r .rv b{font-weight:400; color:var(--ink)}

/* ticket: cada franja igual, el nom i «46 de 82» a dalt; l'escala 0-100 % amb el punt i el % a baix */
.tk{flex:1; display:flex; flex-direction:column; margin-top:4px}
.tkh,.tkr{display:grid; grid-template-columns:minmax(0,1fr) auto 52px; grid-template-areas:"fr ct ct" "sc sc pc"; column-gap:14px; row-gap:10px; align-items:center}
.tkh{grid-template-areas:"sc sc pc"; padding:8px 0 10px; border-bottom:1px solid var(--line-2)}
.tkh .ticks{grid-area:sc; position:relative; height:14px}
.tkh .ticks i{position:absolute; top:0; white-space:nowrap; transform:translateX(-50%); font-style:normal; font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.tkh .ticks i:first-child{transform:none}
.tkh .ticks i:last-child{transform:translateX(-100%)}
.tkh>span:last-child{grid-area:pc}
.tkr{flex:1; padding:14px 0; border-bottom:1px solid var(--line)}
.tkr .fr{grid-area:fr; font-size:14px; color:var(--ink); font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.tkr .ct{grid-area:ct; font-size:12.5px; color:var(--ink-3); text-align:right; white-space:nowrap}
.tkr .ct b{font-weight:400; color:var(--ink)}
.tkr .pc{grid-area:pc; font-size:15px; font-weight:400; color:var(--ink); text-align:right; white-space:nowrap}
.tkr .sc{grid-area:sc; position:relative; height:18px; min-width:0;
  background-image:linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line));
  background-size:1px 100%; background-repeat:no-repeat; background-position:25% 0,50% 0,75% 0}
.tkr .sc::before{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line-2)}
.tkr .sc .stem{position:absolute; left:0; top:50%; height:2px; margin-top:-1px; background:var(--ember)}
.tkr .sc .dot{position:absolute; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--ember); box-shadow:0 0 0 2px var(--panel)}
.tkr.tot{border-bottom:0; border-top:1px solid var(--line-2); margin-top:-1px}
.tkr.tot .fr{font-weight:500}
.tkr.tot .stem{background:var(--ink-3)}
.tkr.tot .dot{background:var(--panel); border:2px solid var(--ink)}

/* que compran: l'anell i les cinc linies, a tot l'ample */
.prod{flex:1; display:grid; grid-template-columns:132px minmax(0,1fr); gap:40px; align-items:center; padding-top:20px}
.prod .ring{position:relative; width:132px; height:132px}
.prod .ring svg{display:block}
.prod .ring b{position:absolute; inset:0; display:grid; place-items:center; font-weight:200; font-size:40px; color:var(--ink-2); pointer-events:none; font-variant-numeric:tabular-nums}
.prod .ring b span{text-align:center; line-height:1}
.prod .ring b small{display:block; font-size:10px; text-transform:uppercase; color:var(--ink-3); text-align:center; margin-top:6px; font-weight:400; letter-spacing:.12em}
.prod ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0 28px}
.prod li{display:flex; align-items:center; gap:10px; padding:12px 0; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-2); font-weight:400; min-width:0}
.prod li i{width:8px; height:8px; border-radius:50%; flex:none}
.prod li span{margin-left:auto; color:var(--ink-3)}

/* fins a 1500 px l'eyebrow dels KPI cap en una linia: les xifres queden alineades */
@media (max-width:1500px){
  .kpi{padding-left:22px; padding-right:22px}
  .kpi .eyebrow{letter-spacing:.18em}
}
@media (max-width:1240px){
  .kpi{padding:11px 18px 12px}
  .kpi .v{font-size:30px}
  .dgrid .sec{padding:24px 24px 26px}
  .r{grid-template-columns:112px minmax(0,1fr) 112px; gap:14px}
}
@media (max-width:1080px){
  .c7,.c5,.c6{grid-column:span 12}
}
@media (max-width:760px){
  .kpis{grid-template-columns:1fr 1fr}
  .kpi{padding:10px 14px 11px}
  .kpi:first-child,.kpi:nth-child(3){padding-left:0; border-left:0}
  .kpi:nth-child(n+3){border-top:1px solid var(--line)}
  .kpi .v{font-size:28px; margin:6px 0 4px}
  .kpi .v sup{font-size:11px; top:3px}
  .kpi .d{font-size:12.5px}
  .kpi .eyebrow{letter-spacing:.16em; font-size:9.5px; min-height:28px}
  .kpi.hot::after{left:14px; right:14px}
  .dgrid{gap:14px; margin-top:14px}
  .dgrid .sec{padding:20px 18px 22px; border-radius:14px}
  .sh h2{font-size:22px}
  .mkt{grid-template-columns:1fr 1fr; row-gap:16px}
  .mkt>div:nth-child(3){padding-left:0; border-left:0}
  .mkt b{font-size:26px}
  .prio-big .n{font-size:34px}
  .prio-big>div{padding:0 10px}
  .r{grid-template-columns:112px minmax(0,1fr) 76px; gap:12px}
  .r .rv-t{display:none}
  .prod{grid-template-columns:104px minmax(0,1fr); gap:18px}
  .prod .ring{width:104px; height:104px}
  .prod .ring b{font-size:32px}
  .prod .ring b small{font-size:9px; letter-spacing:.08em}
  .prod ul{grid-template-columns:minmax(0,1fr); gap:0}
  .prod li{border-top:0; border-bottom:1px solid var(--line); padding:8px 0}
}

/* ================= Responsive ================= */
@media (max-width:1080px){
  .col-tiquet{display:none}
}
@media (max-width:900px){
  #v-restaurants .taula-caixa{display:none}
  .targetes{display:flex}
  .vbtn,.pbtn{min-height:44px}  /* objectiu tactil minim */
  .col-zona{display:none}
}
@media (max-width:700px){
  .col-valoracio{display:none}
}
@media (max-width:560px){
  .compte{margin-left:0; width:100%}
  .filtres select{flex:1 1 128px}
  .filtres input[type=search]{flex:1 1 100%}  /* sol a la seva fila: a 412 px el text de suggeriment quedava tallat */
}

/* ================= Rail d'icones (761-1080 px) i barra de baix del mobil (<= 760 px; carbon 225-258) ================= */
@media (max-width:1080px){
  :root{--side:74px}
  .rail{padding:26px 10px; align-items:stretch}
  .marca{padding:0 0 22px; align-items:center}
  .logo{display:none} .marca .logo-min{display:block} .marca-sub{display:none}
  .nav-h,.rail-peu,.nav .txt,.pastilla{display:none}
  .nav button{justify-content:center; padding:11px 0}
  .nav button[aria-current="page"]::before{left:-10px}
  .cap{gap:14px}
  .cerca{width:280px}
}
@media (max-width:760px){
  .app{display:block}
  .rail{display:contents}
  .marca,.rail > .nav-h,.rail-peu{display:none}
  #nav{position:fixed; left:0; right:0; bottom:0; z-index:40; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
    gap:0; padding:8px 6px calc(8px + env(safe-area-inset-bottom)); background:var(--nav-bg);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid var(--line-2)}
  #nav .nomes-rail{display:none!important}
  #nav button{flex-direction:column; justify-content:center; gap:5px; min-height:44px; padding:6px 0 4px; border-radius:0;
    background:none; color:var(--ink-3); font-size:10.5px; letter-spacing:.02em; text-align:center}
  #nav button .txt{display:block}
  #nav button .ic{width:22px; height:22px; opacity:1}
  #nav button:hover{background:none}
  #nav button[aria-current="page"],#nav-mes.actiu{color:var(--ink)}
  #nav button[aria-current="page"] .ic,#nav-mes.actiu .ic{color:var(--ember)}
  #nav button[aria-current="page"]::before,#nav-mes.actiu::before{content:""; position:absolute; top:-9px; left:50%; width:22px;
    height:2px; margin:0 0 0 -11px; border-radius:2px; background:var(--ember)}
  #nav-mes{display:flex}
  .cos{padding:0 16px calc(96px + env(safe-area-inset-bottom))}
  .cap{min-height:0; padding:14px 0 12px; flex-wrap:wrap; gap:10px; border-bottom:0;
    background:linear-gradient(180deg,var(--bg-1) 75%,transparent)}
  .mlogo{display:block; width:96px; height:28px; margin-right:auto}
  .cerca{order:3; width:100%; height:44px; margin-right:0}
  .segell{font-size:11px; gap:7px}
  .segell .lbl,.vsep,.usuari-txt,#btn-sortir{display:none}
  .tema-btn{width:44px; height:44px}
  .avatar{width:32px; height:32px; font-size:12px}
  .ph{padding:18px 0 22px; border-top:1px solid var(--line)}
  .ph h1{font-size:44px}
  .segment button,.boto,.dd-btn{min-height:44px}
  .filtres input[type=search]{height:44px}
  main{padding-bottom:0}
}

/* ================= Rols: el servidor mana; aixo nomes amaga el que no toca ================= */
body:not([data-rol="admin"]) [data-nomes="admin"] { display: none !important; }
body[data-rol="consulta"] [data-edita] { display: none !important; }
.lectura{margin-bottom:12px}

/* ================= Entorn de proves (pla 7) =================
   Franja fixa a dalt (entorn.js la posa a totes les pantalles quan /api/entorn diu que som a proves). El lila no és a la
   paleta de producció. Les peces enganxades al cap de la finestra baixen --franja, i les exportacions no es veuen
   (el servidor també les tanca). */
body.entorn-proves{--franja:28px}
.franja-proves{position:sticky; top:0; z-index:100; height:var(--franja); display:flex; align-items:center;
  justify-content:center; padding:0 12px; background:#6A2C91; color:#fff; font-size:12px; font-weight:500;
  letter-spacing:.04em; line-height:1.2; text-align:center; overflow:hidden}
/* Pantalles sense sessió (body.auth és la graella de dues columnes d'auth.css, sense marge): la franja surt del flux, a
   tota l'amplada, i el body baixa just la seva alçada */
body.auth > .franja-proves{position:fixed; left:0; right:0}
body.auth.entorn-proves{padding-top:var(--franja)}
body.entorn-proves .app{min-height:calc(100vh - var(--franja))}
body.entorn-proves .cap{top:var(--franja)}
@media (min-width:761px){
  body.entorn-proves .panell{top:var(--franja)}   /* al mobil la fulla surt de baix */
  body.entorn-proves .rail{top:var(--franja); height:calc(100vh - var(--franja))}
}
@media (max-width:640px){
  body.entorn-proves{--franja:40px}   /* el text pot baixar a dues línies */
  .franja-proves{font-size:11px; letter-spacing:.02em}
}
body.entorn-proves #f-export-tot, body.entorn-proves #l-export{display:none !important}

/* Avis flotant (desar o exportar ha fallat) */
.avis-flotant{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:200;
  max-width:min(520px,calc(100vw - 32px)); background:var(--ink); color:var(--bg-1); padding:11px 18px;
  border-radius:var(--r-m); box-shadow:var(--om-2); font-size:13px}

/* Error de carrega a l'arrencada (boot.js): franja fixa a dalt, visible sobre qualsevol pantalla */
.error-carrega{position:fixed; top:0; left:0; right:0; z-index:300; background:var(--ember); color:#16232A;
  padding:12px 16px; text-align:center; font-size:14px; font-weight:500; box-shadow:var(--om-2)}


/* Historial */
.hist-buit{color:var(--text-3); text-align:center}
.hist-total td{font-weight:500; background:var(--inox-2)}
.hist-consulta{min-width:0}
.hist-detall{margin-top:3px; font-size:11.5px; color:var(--text-2); overflow-wrap:anywhere}
/* Pla 9, tasca 10 (pantalles 452-467, 480, 484 i 582-588). Actor no es veu a cap amplada; la cel.la es queda al DOM. */
table.hist .col-cat{display:none}
/* «13 sin leer»: el .neutral de la maqueta, gris i sense punt (no es un avis ni un error) */
.estat-neutre{display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px; background:var(--track-hi);
  font-size:11.5px; font-weight:400; color:var(--ink-2); white-space:nowrap}
/* l'estat en pastilla (el .st-chip, pantalles 275-279) a la targeta i a la llista del mobil: text de tinta i el punt del color */
.hist-xip{display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 11px; border:1px solid var(--line-2);
  border-radius:999px; background:none; font-size:12px; font-weight:400; color:var(--ink-2); white-space:nowrap}
.hist-xip::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--ink-3); flex:none; margin:0}
.hist-xip.estat-ok::before{background:var(--ok)}
.hist-xip.estat-avis{color:var(--ink)}
.hist-xip.estat-avis::before{background:var(--warn)}
.hist-xip.estat-ko::before{background:var(--ember-txt)}
/* la targeta de la mensual en marxa: capçalera amb l'estat i «Detener», i els passos en quatre columnes */
.hist-run{margin-bottom:14px}
.hist-run-cap{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px}
.hist-run-cap h2{flex:1; margin:0; font-size:22px; font-weight:300; letter-spacing:-.01em}
.hist-passos{list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 28px}
.hist-pas{padding:14px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:22px minmax(0,1fr); gap:2px 10px; align-items:center}
.hist-pas .ic{width:18px; height:18px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line-2)}
.hist-pas .ic svg{width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2.4}
.hist-pas.fet .ic{border-color:var(--ok); color:var(--ok)}
.hist-pas.ara .ic{border-color:var(--ember)}
.hist-pas.ara .ic::after{content:""; width:6px; height:6px; border-radius:50%; background:var(--ember); animation:hist-viu 1.6s ease-in-out infinite}
.hist-pas.ko .ic{border-color:var(--ember-txt)}
.hist-pas .n{font-size:13.5px; color:var(--ink); font-weight:400; min-width:0; overflow-wrap:anywhere}
.hist-pas .d{grid-column:2; font-size:12px; color:var(--ink-3); min-width:0; overflow-wrap:anywhere}
.hist-pas.espera .n{color:var(--ink-3); font-weight:300}
.hist-pas.ko .d{color:var(--ember-txt)}
.hist-pas .pbar{grid-column:2; height:4px; border-radius:4px; background:var(--track-hi); margin:6px 0 2px; position:relative; overflow:hidden}
.hist-pas .pbar i{position:absolute; left:0; top:0; bottom:0; border-radius:4px; background:var(--ember)}
@keyframes hist-viu{50%{opacity:.25}}
/* fins a 760 px, una linia per execucio en lloc de la taula i del filtre de dates */
#h-llista{display:none; list-style:none; margin:0; padding:0}
.hist-llista li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:center; padding:14px 0;
  border-bottom:1px solid var(--line); font-size:13px; color:var(--ink-2)}
.hist-llista li b{font-weight:400; color:var(--ink); min-width:0; overflow-wrap:anywhere}
.hist-llista li small{grid-column:1/-1; font-size:12px; color:var(--ink-3); overflow-wrap:anywhere}
.hist-llista li .boto{grid-column:1/-1; justify-self:start; margin:4px 0 0}
.hist-llista li.hist-buit{display:block; text-align:left; color:var(--ink-3); font-family:var(--ital); font-style:italic}
@media (max-width:1080px){ .hist-passos{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){
  #v-historial .taula-caixa,.hist-filtre{display:none}
  #h-llista{display:block}
  .hist-passos{grid-template-columns:minmax(0,1fr)}
  .hist-pas.fet:not(.darrer){display:none}
}

/* ================= Usuarios (pla 9, tasca 9; pantalles 486-504 i 589-592) =================
   El formulari en una fila (nom, correu, rol, boto de tinta); la taula sense caixa, amb ratlles; l'estat en una pastilla
   amb punt. Per sota de 760 px cada usuari es una targeta: nom i estat a dalt, el correu a sota, el rol i les accions. */
.usu-nou{margin-bottom:12px}
.usu-form{display:grid; grid-template-columns:1.2fr 1.4fr 180px auto; gap:14px; align-items:end}
.usu-form label{display:flex; flex-direction:column; gap:7px; font-size:11.5px; color:var(--ink-3); min-width:0}
.usu-form input,.usu-form select{height:44px; padding:0 16px; border:1px solid var(--line-2); border-radius:12px;
  background:var(--input-bg); font-size:14px; font-weight:300; color:var(--ink); min-width:0; width:100%}
.usu-form select{appearance:none; -webkit-appearance:none; padding-right:38px; background:var(--input-bg) var(--chev) no-repeat right 16px center}
.usu-form input:focus,.usu-form select:focus,.u-rol:focus{outline:none; border-color:var(--ink-3)}
/* teclat: un contorn sòlid de tinta, sense halo (el :focus de dalt treu el del navegador) */
.usu-form input:focus-visible,.usu-form select:focus-visible,.u-rol:focus-visible,
.cli-camps select:focus-visible,.cli-defecte select:focus-visible{outline:2px solid var(--ink-2); outline-offset:2px}
.usu-form .boto{height:44px; padding:0 22px}
/* la fletxa dels selectors (pantalles 267): el color de --ink-3 de cada mode */
:root{--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2369645C' stroke-width='1.3'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239A9184' stroke-width='1.3'/%3E%3C/svg%3E")}
}
:root[data-theme="dark"]{--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239A9184' stroke-width='1.3'/%3E%3C/svg%3E")}
.u-msg{margin:10px 2px 0; font-size:12.5px; min-height:0}
.u-msg:empty{display:none}
.u-msg.ok{color:var(--ok)} .u-msg.ko{color:var(--ember-txt)}
#u-avis{margin:16px 2px 0}
#v-usuaris .taula-caixa{background:none; box-shadow:none; border-radius:0; margin-top:16px}
table.usu{min-width:0}
table.usu thead th{font-size:10px; letter-spacing:.22em; font-weight:400; color:var(--ink-3); background:none;
  padding:14px 12px; border-bottom:1px solid var(--line)}
table.usu tbody td{padding:16px 12px; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--ink-2)}
table.usu tbody tr:last-child td{border-bottom:1px solid var(--line)}
table.usu tbody tr:hover{background:none}
table.usu th:first-child,table.usu td:first-child{padding-left:0}
table.usu th:last-child,table.usu td:last-child{text-align:right; padding-right:0}
table.usu td[data-k="Nombre"]{color:var(--ink); font-weight:400}
.u-qui{display:flex; align-items:center; gap:14px; min-width:0}
.avatar.u-av{width:36px; height:36px; font-size:12.5px}
table.usu td.hist-buit{text-align:left; color:var(--ink-3); font-family:var(--ital); font-style:italic}
/* el rol: el select.sel de la maqueta (una pastilla amb fletxa); la propia fila, que no es pot canviar, es nomes text */
.u-rol{height:34px; padding:0 34px 0 14px; border:1px solid var(--line-2); border-radius:999px; font-size:12.5px; font-weight:400;
  color:var(--ink-2); appearance:none; -webkit-appearance:none; background:var(--input-bg) var(--chev) no-repeat right 14px center; max-width:100%}
.u-rol option{background:var(--bg-1); color:var(--ink)}
.u-rol:disabled{border-color:transparent; background:none; padding:0; color:var(--ink); font-size:13.5px; opacity:1; cursor:default}
/* l'estat: el .st-chip de la maqueta (pantalles 275-279); pendent amb el --warn, desactivat en gris */
.u-estat{display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 11px; border:1px solid var(--line-2); border-radius:999px;
  font-size:12px; font-weight:400; color:var(--ink-2); white-space:nowrap}
.u-estat::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--ink-3); flex:none}
.u-estat.ok::before{background:var(--ok)}
.u-estat.pend::before{background:var(--warn)}
.u-accions{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.u-accions .boto{height:32px; padding:0 14px; font-size:12px}
@media (max-width:1080px){
  .usu-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:760px){
  .usu-form{grid-template-columns:minmax(0,1fr)}
  .usu-form .boto{width:100%; justify-content:center}
  table.usu thead{display:none}
  table.usu, table.usu tbody{display:block; width:100%}
  table.usu tr{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:center;
    padding:14px 0; border-bottom:1px solid var(--line)}
  table.usu tbody td{display:block; border:0; padding:0; text-align:left; overflow-wrap:anywhere; min-width:0}
  table.usu td:last-child{text-align:left}
  table.usu td[data-k="Nombre"]{grid-column:1; grid-row:1; font-size:14px; position:relative; padding-left:48px}
  /* el cercle, a l'esquerra del nom i del correu (pantalles 1016-1036): el nom i el correu en columna al seu costat */
  table.usu .u-qui{display:block}
  table.usu .avatar.u-av{position:absolute; left:0; top:2px}
  table.usu td[data-k="Estado"]{grid-column:2; grid-row:1; justify-self:end}
  table.usu td[data-k="Correo"]{grid-column:1/-1; grid-row:2; font-size:12px; color:var(--ink-3); padding-left:48px}
  table.usu tbody tr:last-child td{border-bottom:0}
  table.usu td[data-k="Rol"]{grid-column:1; grid-row:3; margin-top:8px; padding-left:48px}
  table.usu td[data-k="Acciones"]{grid-column:2; grid-row:3; margin-top:8px; justify-self:end}
  table.usu td:empty{display:none}
  table.usu td.hist-buit{grid-column:1/-1}
  .u-rol{height:44px}
  .u-rol:disabled{height:auto}
  .u-accions .boto{height:44px}
}

/* ---------- Pla 4: clients de Josper i proves de la cadena ---------- */
#l-tipus,#r-tipus{flex-wrap:wrap; max-width:100%; border-radius:10px}
.segment button .num{font-weight:400; font-size:11.5px; color:inherit; opacity:.65}
.xip.cli{background:var(--ok-suau); color:var(--ok); border:1px solid var(--line); font-weight:500; margin-top:6px}
.prod-origen{margin:8px 0 0; font-size:12px; color:var(--text-3)}
.fusio{padding:10px 12px; border:1px solid var(--linia); border-radius:10px; margin-bottom:8px; background:var(--inox-2)}
.fusio-cap{font-weight:500; font-size:13px}
.fusio-val{font-size:12px; color:var(--text-2); margin-top:2px}
.fusio-notes{margin:6px 0 0; font-size:13px; white-space:pre-wrap; overflow-wrap:anywhere}

/* ---------- Revisión (pla 9, tasca 9; pantalles 405-438 i 575-579) ----------
   El fitxer: l'estat amb la icona i «Subir CSV» en brasa a la mateixa fila. Cada parella, una targeta: el motiu amb la
   icona, la comparacio en tres columnes amb la ratlla de brasa a les diferencies, els enllacos subratllats fins i el
   primer boto de tinta. La llista buida: «Nada que revisar» dins d'un quadre de vora discontinua. */
.cli-fitxer .targeta-cos{display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:22px; align-items:center}
.cli-fitxer .targeta-cos > *{grid-column:1/-1}
.cli-fitxer .targeta-cos > .cli-estat{grid-column:1}
.cli-fitxer .targeta-cos > .cli-estat + .cli-accions{grid-column:2; margin:0}
.cli-estat{margin:0; display:flex; align-items:center; gap:12px; font-size:14px; font-weight:400; color:var(--ink); min-width:0}
.cli-estat::before{content:""; width:22px; height:22px; flex:none; background:var(--ink-3);
  -webkit-mask:var(--ic-note) center/contain no-repeat; mask:var(--ic-note) center/contain no-repeat}
.cli-accions{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:12px 0}
.cli-accions .boto{cursor:pointer}
#c-tria::before{content:""; width:15px; height:15px; flex:none; background:currentColor;
  -webkit-mask:var(--ic-export) center/contain no-repeat; mask:var(--ic-export) center/contain no-repeat}
.cli-ajuda,.cli-info{margin:12px 0 0; font-size:12.5px; color:var(--ink-3)}
.cli-mapa{margin-top:18px; padding-top:18px; border-top:1px solid var(--line)}
.cli-camps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 14px; margin:14px 0}
.cli-camps label,.cli-defecte{display:flex; flex-direction:column; gap:7px; font-size:11.5px; color:var(--ink-3); min-width:0}
.cli-defecte{max-width:320px; margin-bottom:14px}
.cli-camps select,.cli-defecte select{height:44px; padding:0 38px 0 16px; border:1px solid var(--line-2); border-radius:12px; font-size:14px;
  color:var(--ink); appearance:none; -webkit-appearance:none; background:var(--input-bg) var(--chev) no-repeat right 16px center; max-width:100%}
/* el ratoli nomes canvia la vora; el teclat conserva el contorn de :focus-visible (la regla de .usu-form, mes amunt) */
.cli-camps select:focus,.cli-defecte select:focus{border-color:var(--ink-3)}
.cli-camps select:focus:not(:focus-visible),.cli-defecte select:focus:not(:focus-visible){outline:none}
#v-revisio .taula-caixa{background:none; box-shadow:none; border-radius:0; border-top:1px solid var(--line)}
.cli-mostra{font-size:12px; min-width:0}
.cli-mostra th{background:none; font-weight:400; letter-spacing:.22em; font-size:10px; border-bottom:1px solid var(--line)}
.cli-mostra th,.cli-mostra td{padding:8px 14px 8px 0; white-space:nowrap; max-width:220px; overflow:hidden; text-overflow:ellipsis; color:var(--ink-2)}
.cli-mostra tbody tr:hover{background:none}
.cli-previa{margin-top:18px; padding-top:18px; border-top:1px solid var(--line)}
.cli-resum{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 16px; margin:0 0 8px; font-size:13px; max-width:520px}
.cli-resum dt,.cli-resum dd{padding:8px 0; border-bottom:1px solid var(--line)}
.cli-resum dt{color:var(--ink-2)}
.cli-resum dd{margin:0; font-weight:400; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums}
#v-revisio > .barra-eines{margin:34px 0 22px}
.rev-llista{display:flex; flex-direction:column; gap:18px}
.rev-grup{display:flex; flex-direction:column; gap:12px}
.rev-grup h3{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:400; margin:6px 0 0; color:var(--ink-3)}
.rev-parella{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px 26px; min-width:0}
.rev-motiu{display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:400; color:var(--ink); overflow-wrap:anywhere}
.rev-motiu::before{content:""; width:18px; height:18px; flex:none; background:var(--ember-txt);
  -webkit-mask:var(--ic-copy) center/contain no-repeat; mask:var(--ic-copy) center/contain no-repeat}
.rev-fusio .rev-motiu::before{-webkit-mask-image:var(--ic-merge); mask-image:var(--ic-merge)}
.rev-lectura .rev-motiu::before{-webkit-mask-image:var(--ic-spark); mask-image:var(--ic-spark)}
.rev-taula{margin-top:16px; border-top:1px solid var(--line)}
.rev-cap,.rev-fila{display:grid; grid-template-columns:120px minmax(0,1fr) minmax(0,1fr); font-size:13px; border-bottom:1px solid var(--line)}
.rev-cap > *,.rev-fila > *{padding:11px 14px 11px 0; min-width:0; overflow-wrap:anywhere}
.rev-fila .k{color:var(--ink-3)}
.rev-fila .a,.rev-fila .b{color:var(--ink-2)}
.rev-fila.dif .a,.rev-fila.dif .b{color:var(--ink); font-weight:400; padding-left:12px;
  background:linear-gradient(90deg,var(--ember-soft),transparent); box-shadow:inset 2px 0 0 var(--ember)}
.rev-nota{margin:12px 0 0; font-family:var(--ital); font-style:italic; font-size:13px; color:var(--ink-3); overflow-wrap:anywhere}
.rev-enllacos{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:12px; font-size:12.5px}
.rev-enllacos a,.rev-fitxa a{color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--line-2)}
.rev-enllacos a:hover,.rev-fitxa a:hover{color:var(--ink); border-bottom-color:var(--ink-3)}
.rev-accions{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
/* la decisio principal de cada targeta (la que no es .fantasma) va de tinta, com el .btn.pri de la maqueta */
.rev-accions .boto:not(.fantasma){background:var(--ink); color:var(--bg-1); border-color:var(--ink)}
.rev-accions .boto:not(.fantasma):hover{background:var(--ink-2); border-color:var(--ink-2)}
.rev-fusio .rev-motiu{margin-bottom:14px}
.rev-fitxa{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); font-size:13px; color:var(--ink-2)}
.rev-fitxa b{flex:0 0 120px; font-weight:400; color:var(--ink)}
.rev-fitxa > span:not(.rev-metode){flex:1 1 240px; overflow-wrap:anywhere; min-width:0}
.rev-metode{color:var(--ink-3); font-size:12px}
.rev-fitxa .boto{height:32px; padding:0 14px; font-size:12px}
.rev-intent{margin:0; padding:10px 0; border-bottom:1px solid var(--line); font-size:13px; color:var(--ink-2); overflow-wrap:anywhere}
.rev-motiu + .rev-intent,.rev-nota + .rev-intent{margin-top:12px; border-top:1px solid var(--line)}
.rev-buit{color:var(--ink-3); font-family:var(--ital); font-style:italic; font-size:13px; padding:12px 0; margin:0}
/* res per revisar (pantalles 434-437) */
.rev-nada{padding:80px 20px; text-align:center; border:1px dashed var(--line-2); border-radius:16px}
.rev-nada::before{content:""; display:block; width:34px; height:34px; margin:0 auto 18px; background:var(--ink-3);
  -webkit-mask:var(--ic-check) center/contain no-repeat; mask:var(--ic-check) center/contain no-repeat}
.rev-nada b{display:block; font-weight:200; font-size:40px; line-height:1.15; letter-spacing:-.02em; color:var(--ink)}
.rev-nada span{display:block; font-family:var(--ital); font-style:italic; color:var(--ink-3); margin-top:8px}
@media (max-width:900px){
  .rev-accions .boto,.rev-fitxa .boto{min-height:44px; height:44px}
}
@media (max-width:760px){
  .cli-fitxer .targeta-cos{display:flex; align-items:stretch}
  .cli-fitxer .targeta-cos > .cli-estat + .cli-accions{margin:16px 0 0}
  .rev-parella{padding:18px}
  .rev-cap,.rev-fila{grid-template-columns:80px minmax(0,1fr) minmax(0,1fr)}
  .rev-fitxa b{flex-basis:100%}
  .rev-nada{padding:56px 18px}
  .rev-nada b{font-size:32px}
}
@media (max-width:640px){
  .cli-camps{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Pla 5: actualitzacio mensual, despesa, fiabilitat, grafic mensual, mostra, brasa sense forn ---------- */
.hist-targetes{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:14px; margin-bottom:14px}
.hist-gasto{margin:0; overflow-wrap:anywhere}
/* «Este mes» (pantalles 441-447): la xifra gran, la barra fina amb la marca del 80 % i el desglossament a sota */
.hist-xifra{display:block; font-weight:200; font-size:52px; line-height:1; letter-spacing:-.03em; color:var(--ink);
  font-variant-numeric:tabular-nums}
.hist-xifra small{font-size:20px; font-weight:300; color:var(--ink-3); letter-spacing:0}
.hist-barra{position:relative; height:6px; background:var(--track-hi); border-radius:6px; overflow:hidden; margin:18px 0 10px}
.hist-barra-om{position:absolute; left:0; top:0; bottom:0; width:0; border-radius:6px; background:var(--fill); transition:width .4s ease}
.hist-barra-om.alerta{background:var(--ember-txt)}
.hist-barra-avis{position:absolute; top:0; bottom:0; left:80%; width:1px; background:var(--ember)}
.hist-desglos{display:flex; gap:6px 22px; flex-wrap:wrap; margin:0 0 14px; font-size:12.5px; color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.hist-desglos:empty{display:none}
.hist-desglos em{font-style:normal; color:var(--ink-2); font-weight:400}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0}
.hist-fiab-classes{margin:6px 0 10px; padding-left:18px; font-size:13px; color:var(--text-2)}
tr.hist-mensual td{font-weight:500}
tr.hist-fill td{color:var(--text-2); font-size:12.5px}
.boto.mini{height:30px; min-height:30px; padding:2px 10px; font-size:12px; margin-left:8px}
.targeta[hidden]{display:none}
.d-motius{margin:0; padding-left:18px; font-size:13px; color:var(--text-2)}
@media (max-width: 900px){
  .boto.mini{min-height:44px}
  #l-tipus button,#r-tipus button{min-height:44px}   /* «Muestra» i «Lecturas IA» s'afegeixen als segments: objectiu tactil minim */
}

/* ---------- Pla 6: «Zona de borrado» de la fitxa (nomes l'administrador) ---------- */
.zona-esborrat{padding-top:20px}   /* el bloc ja porta la ratlla de dalt (la del bloc anterior) */
.zona-botons{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
/* Bloc solid del color dels segments amb el text brasa (4,54:1 en clar, 5,72:1 en fosc), sense cap anella de color
   (revisio final del pla 9: abans, contorn vermell); en passar-hi, brasa amb el text de tinta (4,7:1), com .boto.brasa.
   No es confon amb els botons d'accio (contorn o tinta). El nom d'un client pot ser llarg: baixa de linia */
.boto.perill{background:var(--seg-bg); border:1px solid transparent; color:var(--ember-txt); white-space:normal; text-align:left; max-width:100%; overflow-wrap:anywhere;
  height:auto; min-height:38px; padding-block:8px}   /* un nom de client llarg baixa de linia i el boto creix */
.boto.perill:hover{background:var(--ember); border-color:var(--ember); color:#16232A}
.boto.perill:disabled{opacity:.55; cursor:default}
@media (max-width: 900px){
  .boto.perill{min-height:44px}
}