/* ============================================================
   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.
   ============================================================ */
:root{
  --carbo:#16232A; --carbo-2:#1F303A; --carbo-3:#2B404C;
  --brasa:#EB5E1F; --brasa-2:#FF7A3D; --brasa-suau:#FEF0E8;
  --granat:#511219; --granat-suau:#F7EAEB;
  --inox:#EEF3F6; --inox-2:#F7FAFB;
  --blanc:#FFFFFF;
  --linia:#E2EAEF; --linia-2:#EDF2F5;
  --text:#16232A; --text-2:#576A75; --text-3:#8FA0AA;
  --ok:#12836A; --ok-suau:#E7F4F1;
  --rail:252px;
  --r-l:18px; --r-m:12px; --r-s:9px;
  --om-1:0 1px 2px rgba(16,32,41,.04), 0 6px 20px -6px rgba(16,32,41,.10);
  --om-2:0 2px 6px rgba(16,32,41,.06), 0 20px 44px -16px rgba(16,32,41,.22);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0; background:var(--inox); color:var(--text);
  font-family:Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
  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(--brasa)}
:focus-visible{outline:2px solid var(--brasa);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.micro{font-family:"Roboto Condensed",Roboto,sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em; font-size:10.5px; color:var(--text-3)}
.num{font-family:"Roboto Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}

.app{display:grid; grid-template-columns:var(--rail) minmax(0,1fr); min-height:100vh}

/* ================= Rail ================= */
.rail{background:var(--carbo); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; padding:26px 0 18px; min-width:0}
.marca{padding:0 22px 26px}
.logo{
  width:168px; height:51px;
  background-color:#fff;
  -webkit-mask:url(josper-logo.svg) no-repeat center/contain;
  mask:url(josper-logo.svg) no-repeat center/contain;
}
.logo-min{
  width:28px; height:36px; display:none;
  background-color:#fff;
  -webkit-mask:url(josper-flama.svg) no-repeat center/contain;
  mask:url(josper-flama.svg) no-repeat center/contain;
}
.rail-sec{padding:0 22px 8px}
.rail-sec .micro{color:#5B7180}
.nav{display:flex; flex-direction:column; gap:3px; padding:0 12px; min-width:0}
.nav button{display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:none; border:0; padding:10px 12px; border-radius:11px;
  color:#AFC2CD; font-size:14px; transition:background .15s,color .15s; white-space:nowrap; min-width:0}
.nav button:hover{background:var(--carbo-2); color:#fff}
.nav button[aria-current="page"]{background:var(--carbo-3); color:#fff; font-weight:500}
.nav button[aria-current="page"] .ic{color:var(--brasa-2)}
.nav .txt{overflow:hidden; text-overflow:ellipsis}
.ic{width:18px;height:18px;flex:none;color:#78909E;transition:color .15s}
.nav button:hover .ic{color:#C3D4DD}
.pastilla{margin-left:auto; font-family:"Roboto Mono",monospace; font-size:10px; font-weight:500;
  background:rgba(255,255,255,.09); color:#9DB2BE; padding:2px 7px; border-radius:99px; flex:none}
.nav button[aria-current="page"] .pastilla{background:rgba(235,94,31,.2); color:#FF9A66}
.rail-peu{margin-top:auto; padding:18px 24px 0; border-top:1px solid rgba(255,255,255,.07)}
.eslogan{font-family:Lora,Georgia,serif; font-style:italic; font-size:15px; color:#89A0AD; margin:0 0 4px; white-space:nowrap}
.rail-peu .micro{color:#4C606C; font-size:9.5px}
.rail-priv{display:block; width:max-content; margin-top:8px; font-size:11.5px; color:#89A0AD; text-decoration:none}
.rail-priv:hover{color:#fff; text-decoration:underline}

/* ================= Capçalera ================= */
.cap{background:var(--blanc); border-bottom:1px solid var(--linia);
  padding:12px clamp(14px,2.4vw,30px); min-height:70px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; position:sticky; top:0; z-index:30}
.cap-tit{min-width:0; flex:1 1 auto}
.cap h1{font-size:clamp(17px,2vw,21px); font-weight:700; margin:0; letter-spacing:-.015em}
.cap .sub{font-size:12.5px; color:var(--text-3); margin-top:2px}
.cerca{position:relative; width:clamp(180px,22vw,290px); flex:none}
.cerca input{width:100%; padding:9px 14px 9px 36px; border:1px solid var(--linia);
  border-radius:99px; background:var(--inox-2); font-size:13px}
.cerca input::placeholder{color:var(--text-3)}
.cerca input:focus{outline:none; border-color:var(--brasa); background:#fff}
.cerca svg{position:absolute; left:13px; top:10px; width:15px; height:15px; color:var(--text-3)}
.segell{display:flex; align-items:center; gap:8px; padding:6px 13px;
  border:1px solid var(--linia); border-radius:99px; background:var(--inox-2); flex:none}
.punt{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none}
.segell span{font-size:11.5px; color:var(--text-2); white-space:nowrap}
.usuari{display:flex; align-items:center; gap:9px; flex:none}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--carbo);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:500;flex:none}
.usuari-txt{line-height:1.25}
.usuari-txt b{display:block;font-size:12.5px;font-weight:500;white-space:nowrap}
.usuari-txt span{font-size:11px;color:var(--text-3);white-space:nowrap}
.usuari .boto{padding:6px 14px}

/* ================= Contingut ================= */
main{padding:clamp(16px,2.2vw,26px) clamp(14px,2.4vw,30px) 60px; max-width:1620px}
.reixa{display:grid; gap:clamp(12px,1.3vw,18px)}
.r4{grid-template-columns:repeat(4,minmax(0,1fr))}
.r2{grid-template-columns:repeat(2,minmax(0,1fr))}
.r23{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.r3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mb{margin-bottom:clamp(12px,1.3vw,18px)}
.targeta{background:var(--blanc); border-radius:var(--r-l); box-shadow:var(--om-1); min-width:0;
  display:flex; flex-direction:column}
.targeta-cap{display:flex; align-items:baseline; gap:12px; padding:18px 20px 0; flex-wrap:wrap}
.targeta-cap h2{font-size:15px; font-weight:700; margin:0; letter-spacing:-.008em}
.targeta-cap .nota{margin-left:auto; font-size:11.5px; color:var(--text-3)}
.targeta-cos{padding:16px 20px 20px; min-width:0; flex:1 1 auto; display:flex; flex-direction:column}

.kpi{display:flex; gap:14px; align-items:flex-start; padding:18px 19px; flex-direction:row}
.kpi-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;background:var(--inox);color:var(--carbo)}
.kpi-ic svg{width:20px;height:20px}
.kpi.hot .kpi-ic{background:var(--brasa-suau); color:var(--brasa)}
.kpi.deep .kpi-ic{background:var(--granat-suau); color:var(--granat)}
.kpi.cool .kpi-ic{background:var(--ok-suau); color:var(--ok)}
.kpi-xifra{font-family:"Roboto Mono",monospace; font-size:clamp(24px,2.4vw,31px); font-weight:500; line-height:1.05; letter-spacing:-.03em}
.kpi-nom{font-size:12.5px; color:var(--text-2); margin-top:4px}
.kpi-peu{font-size:11.5px; color:var(--text-3); margin-top:7px}

.donut-fila{display:flex; gap:24px; align-items:center; flex-wrap:wrap; flex:1 1 auto}
.donut{width:clamp(126px,13vw,152px); flex:none; position:relative}
.donut svg{display:block; width:100%; height:auto}
.donut-centre{position:absolute; inset:0; display:grid; place-content:center; text-align:center; pointer-events:none}
.donut-centre b{font-family:"Roboto Mono",monospace; font-size:23px; font-weight:500; letter-spacing:-.02em; display:block}
.donut-centre span{font-size:10.5px; color:var(--text-3)}
.donut-leg{flex:1 1 190px; min-width:0; align-self:stretch; display:flex; flex-direction:column; justify-content:center}
.leg-fila{display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--linia-2); flex:1 1 auto}
.leg-fila:last-child{border-bottom:0}
.mostra{width:9px;height:9px;border-radius:3px;flex:none}
.leg-nom{font-size:13px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.leg-nom small{display:block; color:var(--text-3); font-size:11px}
.leg-val{margin-left:auto; display:flex; align-items:baseline; gap:8px; flex:none}
.leg-val b{font-family:"Roboto Mono",monospace; font-size:14px; font-weight:500}
.leg-val i{font-style:normal; font-size:11.5px; color:var(--text-3); width:34px; text-align:right; display:inline-block}

.barres{display:flex; flex-direction:column; gap:13px; flex:1 1 auto; justify-content:space-between}
.barra-fila{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 12px; align-items:center}
.barra-nom{font-size:12.5px; color:var(--text-2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.barra-val{font-family:"Roboto Mono",monospace; font-size:12px; color:var(--text-2); white-space:nowrap; text-align:right}
.barra-pista{grid-column:1/-1; height:9px; background:var(--inox); border-radius:99px; overflow:hidden}
.barra-om{height:100%; border-radius:99px; background:linear-gradient(90deg,var(--brasa),var(--brasa-2))}
.barra-om.fred{background:var(--carbo-3)}
/* Embut de quota */
.embut{display:flex; flex-direction:column; gap:12px; flex:1 1 auto; justify-content:space-between}
.em-fila{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 12px; align-items:baseline}
.em-nom{font-size:12.5px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.em-val{display:flex; align-items:baseline; gap:8px; white-space:nowrap}
.em-val b{font-family:"Roboto Mono",monospace; font-size:15px; font-weight:500}
.em-val i{font-style:normal; font-size:11.5px; color:var(--text-3)}
.em-pista{grid-column:1/-1; height:11px; background:var(--inox); border-radius:99px; overflow:hidden}
.em-om{height:100%; border-radius:99px; transition:width .5s ease}
.em-1{background:var(--carbo-3)}
.em-2{background:linear-gradient(90deg,var(--brasa),var(--brasa-2))}
.em-3{background:var(--granat)}
.em-4{background:repeating-linear-gradient(45deg,#C6D3DA,#C6D3DA 5px,#D9E3E8 5px,#D9E3E8 10px)}

/* Eix temporal */
.eix{margin-top:auto; padding-top:18px; border-top:1px solid var(--linia-2)}
.eix-cap{display:flex; align-items:baseline; gap:10px; margin-bottom:12px}
.eix-cap .micro{flex:1 1 auto}
.eix-graf{position:relative; height:96px}
.eix-y{position:absolute; inset:0 auto 18px 0; width:26px; display:flex; flex-direction:column;
  justify-content:space-between; align-items:flex-end; font-family:"Roboto Mono",monospace;
  font-size:9.5px; color:var(--text-3); padding-right:6px}
.eix-pla{position:absolute; inset:0 0 18px 26px}
.eix-linia{position:absolute; left:0; right:0; border-top:1px dashed var(--linia); }
.eix-cols{position:absolute; inset:0; display:flex; align-items:flex-end; gap:0}
.eix-col{flex:1 1 0; display:flex; justify-content:center; align-items:flex-end; height:100%; position:relative}
.eix-barra{width:min(60%,34px); border-radius:6px 6px 0 0; background:linear-gradient(180deg,var(--brasa-2),var(--brasa))}
.eix-buida{width:min(60%,34px); height:100%; border-radius:6px 6px 0 0;
  border:1px dashed var(--linia); border-bottom:0; background:rgba(255,255,255,.4)}
.eix-xifra{position:absolute; top:-2px; left:0; right:0; text-align:center;
  font-family:"Roboto Mono",monospace; font-size:11px; font-weight:500}
.eix-x{position:absolute; left:26px; right:0; bottom:0; height:18px; display:flex;
  border-top:1px solid var(--linia)}
.eix-x span{flex:1 1 0; text-align:center; padding-top:4px;
  font-family:"Roboto Condensed",sans-serif; font-size:9.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-3)}
.eix-x span.ara{color:var(--brasa)}

/* Filtres */
.filtres{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-bottom:16px}
.filtres input[type=search]{padding:8px 13px; border:1px solid var(--linia);
  border-radius:99px; background:var(--blanc); font-size:13px; min-width:0; max-width:100%}
.filtres select{display:none}
.dd{position:relative; flex:none}
.dd-btn{display:flex; align-items:center; gap:9px; padding:8px 13px; border:1px solid var(--linia);
  border-radius:99px; background:var(--blanc); font-size:13px; color:var(--text); white-space:nowrap}
.dd-btn:hover{border-color:var(--text-3)}
.dd[data-obert="1"] .dd-btn{border-color:var(--brasa); box-shadow:0 0 0 3px rgba(235,94,31,.13)}
.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(--blanc);
  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(--brasa-suau); color:#B8410F; font-weight:500}
.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(--brasa)}
.segment{display:inline-flex; background:var(--blanc); border:1px solid var(--linia); border-radius:99px; padding:3px; flex:none}
.segment button{border:0; background:none; padding:5px 13px; border-radius:99px; font-size:12.5px; color:var(--text-2); transition:background .14s,color .14s}
.segment button[aria-pressed="true"]{background:var(--carbo); color:#fff; font-weight:500}
.compte{margin-left:auto; font-size:12.5px; color:var(--text-3); white-space:nowrap}
.compte b{font-family:"Roboto Mono",monospace; color:var(--text); font-weight:500}
.boto{background:var(--brasa); color:#fff; border:0; padding:8px 16px; border-radius:99px; font-size:12.5px; font-weight:500; white-space:nowrap; display:inline-flex; align-items:center; gap:7px}
.boto:hover{background:#D24F12}
.boto svg{width:15px;height:15px}
.boto.fantasma{background:var(--blanc); border:1px solid var(--linia); color:var(--text-2)}
.boto.fantasma:hover{background:var(--inox-2); color:var(--text)}
.boto.fosc{background:var(--carbo)} .boto.fosc:hover{background:var(--carbo-3)}

/* 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-family:"Roboto Condensed",Roboto,sans-serif; font-weight:600; 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-family:"Roboto Mono",monospace; 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:#B8410F}
.calaix{display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 7px; border-radius:8px; font-family:"Roboto Mono",monospace; font-size:11.5px; font-weight:600}
.calaix.A{background:var(--granat); color:#fff}
.calaix.B{background:var(--brasa); color:#fff}
.calaix.C{background:var(--inox); color:var(--text-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:#C6D3DA}
.gauge{display:inline-flex; gap:3px; align-items:flex-end; vertical-align:middle}
.gauge i{width:5px; border-radius:2px; background:#DDE6EB; 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)}

/* ================= Leads ================= */
.leads{display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:16px; align-items:start}
.lead-llista{background:var(--blanc); border-radius:var(--r-l); box-shadow:var(--om-1); overflow:hidden; position:sticky; top:86px}
.lead-llista-cap{padding:14px 16px; border-bottom:1px solid var(--linia); display:flex; align-items:center; gap:10px}
.lead-llista-cap .micro{flex:1 1 auto}
.lead-scroll{max-height:min(70vh,720px); overflow-y:auto}
.lead-fila{display:flex; gap:11px; align-items:center; width:100%; text-align:left; background:none;
  border:0; border-bottom:1px solid var(--linia-2); padding:11px 16px; transition:background .12s}
.lead-fila:hover{background:var(--inox-2)}
.lead-fila[aria-selected="true"]{background:var(--brasa-suau); box-shadow:inset 3px 0 var(--brasa)}
.lead-fila-txt{min-width:0; flex:1 1 auto}
.lead-fila-nom{font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lead-fila-sub{font-size:11.5px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.estat-punt{width:9px;height:9px;border-radius:50%;flex:none;background:#D7E1E7}
.estat-punt.josper{background:var(--granat)} .estat-punt.altra{background:var(--brasa)} .estat-punt.no{background:var(--text-3)}

.fitxa{background:var(--blanc); border-radius:var(--r-l); box-shadow:var(--om-1); overflow:hidden}
.fitxa-cap{padding:22px 24px; border-bottom:1px solid var(--linia-2); display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap}
.fitxa-cap h2{margin:0; font-size:clamp(18px,2.2vw,23px); letter-spacing:-.02em}
.fitxa-cap .sota{font-size:12.5px; color:var(--text-3); margin-top:4px}
.fitxa-score{margin-left:auto; text-align:right; flex:none}
.fitxa-score b{font-family:"Roboto Mono",monospace; font-size:30px; font-weight:500; letter-spacing:-.03em; display:block; line-height:1}
.fitxa-cos{padding:20px 24px 24px}
.bloc{margin-bottom:22px}
.bloc > .micro{display:block; margin-bottom:10px}
.dades-reixa{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.dada.ample{grid-column:span 2}
.dada.ample .v{white-space:normal; overflow:visible; line-height:1.35}
@media (max-width:900px){.dades-reixa{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.dades-reixa{grid-template-columns:minmax(0,1fr)} .dada.ample{grid-column:span 1}}
.dada{background:var(--inox-2); border-radius:var(--r-m); padding:11px 13px; min-width:0}
.dada .k{font-size:11px; color:var(--text-3); margin-bottom:2px}
.dada .v{font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.metriques{display:flex; gap:0; border:1px solid var(--linia); border-radius:var(--r-m); overflow:hidden; flex-wrap:wrap}
.metrica{flex:1 1 110px; padding:13px 15px; border-right:1px solid var(--linia); min-width:0}
.metrica:last-child{border-right:0}
.metrica b{font-family:"Roboto Mono",monospace; font-size:18px; font-weight:500; display:block; letter-spacing:-.02em}
.metrica span{font-size:11px; color:var(--text-3)}
.prova{background:var(--brasa-suau); border-radius:var(--r-m); padding:14px 16px}
.prova .cita{font-family:Lora,Georgia,serif; font-style:italic; font-size:14.5px; color:#8A3410; margin:0 0 9px; overflow-wrap:anywhere}
.prova .font{font-size:11.5px; color:#A65C33}
.validacio{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.vbtn{border:1px solid var(--linia); background:var(--blanc); padding:9px 15px; border-radius:99px; font-size:13px; color:var(--text-2); transition:.14s}
.vbtn:hover{border-color:var(--text-3)}
.vbtn[aria-pressed="true"]{background:var(--carbo); border-color:var(--carbo); color:#fff; font-weight:500}
.vbtn.josper[aria-pressed="true"]{background:var(--granat); border-color:var(--granat)}
.vbtn.altra[aria-pressed="true"]{background:var(--brasa); border-color:var(--brasa)}
textarea{width:100%; border:1px solid var(--linia); border-radius:var(--r-m); padding:11px 13px; font-size:13px; resize:vertical; min-height:84px; background:var(--inox-2)}
textarea:focus{outline:none; border-color:var(--brasa); background:#fff}
.desa-fila{display:flex; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap}
.desa-estat{font-size:12px; color:var(--ok); font-weight:500}

/* ================= Mapa ================= */
.mapa-caixa{background:var(--carbo); border-radius:var(--r-l); box-shadow:var(--om-2); overflow:hidden; position:relative}
#mapa{width:100%; height:clamp(400px,68vh,720px)}
.maplibregl-ctrl-group{border-radius:10px!important; box-shadow:var(--om-2)!important; overflow:hidden}
.maplibregl-ctrl-attrib{font-size:10px!important; background:rgba(255,255,255,.78)!important; border-radius:8px 0 0 0!important}
.maplibregl-popup-content{padding:0!important; border-radius:12px!important; box-shadow:var(--om-2)!important; overflow:hidden}
.maplibregl-popup-tip{display:none}
.pop{padding:13px 15px 11px; min-width:230px; font-family:Roboto,sans-serif}
.pop b{display:block; font-size:13.5px; margin-bottom:3px; color:var(--text); line-height:1.25}
.pop small{display:block; font-size:11.5px; color:var(--text-3); line-height:1.4}
.pop .adr{margin-top:5px; color:var(--text-2)}
.pop .fila{display:grid; grid-template-columns:repeat(3,1fr); align-items:center;
  gap:6px; margin-top:11px; padding-top:11px; border-top:1px solid var(--linia-2)}
.pop .cel{display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0}
.pop .cel .v{font-family:"Roboto Mono",monospace; font-size:16px; font-weight:500; letter-spacing:-.02em; line-height:1}
.pop .cel .l{font-family:"Roboto Condensed",sans-serif; font-size:9px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-3)}
.pop .cel .calaix{height:24px; min-width:24px; font-size:12px}
.pop .prods{margin-top:8px; display:flex; flex-wrap:wrap; gap:3px}
.pop .anar{display:inline-block; margin-top:10px; font-size:12px; font-weight:500;
  color:var(--brasa); text-decoration:none}
.pop .anar:hover{text-decoration:underline}
.mapa-ctrl{position:absolute; left:16px; bottom:16px; display:flex; flex-direction:column; gap:11px;
  background:rgba(22,35,42,.82); backdrop-filter:blur(8px); padding:14px 16px; border-radius:var(--r-m); width:min(232px,calc(100% - 32px))}
.mapa-ctrl label{display:flex; align-items:center; gap:10px; font-size:11px; color:#9DB2BE}
.mapa-ctrl label span{width:56px; flex:none; text-transform:uppercase; letter-spacing:.09em; font-family:"Roboto Condensed",sans-serif; font-weight:600}
.mapa-ctrl input[type=range]{flex:1 1 auto; min-width:0; accent-color:var(--brasa)}
.mapa-leg{position:absolute; right:16px; top:16px; background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  padding:12px 14px; border-radius:var(--r-m); font-size:12px; max-width:calc(100% - 32px)}
.mapa-leg div{display:flex; align-items:center; gap:8px; padding:3px 0; white-space:nowrap}
.mapa-tip{position:absolute; pointer-events:none; background:var(--blanc); border-radius:10px; padding:9px 12px;
  box-shadow:var(--om-2); font-size:12.5px; opacity:0; transition:opacity .12s; max-width:250px; z-index:5}
.mapa-tip b{display:block; font-size:13px; margin-bottom:2px}
.mapa-tip small{color:var(--text-3)}
.mapa-reset{position:absolute; right:16px; bottom:16px}

.tq{display:flex; flex-direction:column; gap:14px; flex:1 1 auto; justify-content:space-between}
.tq-fila{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; align-items:center}
.tq-nom{font-size:12.5px; color:var(--text-2); white-space:nowrap}
.tq-val{font-family:"Roboto Mono",monospace; font-size:12px; color:var(--text-2)}
.tq-pista{grid-column:1/-1; display:flex; height:22px; border-radius:7px; overflow:hidden; background:var(--inox)}
.tq-pista span{display:grid; place-items:center; font-family:"Roboto Mono",monospace; font-size:11px; color:#fff; min-width:0; overflow:hidden}
.tq-pista span.C{background:#DDE6EB; color:var(--text-2)}
.tq-pista span.B{background:var(--brasa)}
.tq-pista span.A{background:var(--granat)}
.tq-pista span.cli{background:var(--granat)}
.tq-pista span.cons{background:var(--ok)}
.tq-pista span.opf{background:var(--brasa)}
.tq-pista span.sbr{background:#DDE6EB; color:var(--text-2)}
.tq-leg{display:flex; gap:16px; flex-wrap:wrap; margin-top:auto; padding-top:16px; font-size:12px; color:var(--text-2)}
.tq-leg span{display:flex; align-items:center; gap:7px}

/* 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:Lora,Georgia,serif; font-style:italic; font-size:15.5px; color:var(--text-2); margin:0 0 24px}
.peu-nota{font-size:11.5px; color:var(--text-3); margin:13px 4px 0; 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:#B03A2E; font-weight:500; white-space:nowrap}
.estat-avis{color:#B8410F; font-weight:500; white-space:nowrap}   /* 5,5:1 sobre blanc (el --brasa en feia 3,4) */

/* ================= 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-family:"Roboto Mono",ui-monospace,monospace;
  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:#C6D3DA}

/* 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-family:"Roboto Mono",monospace; color:var(--text); font-weight:500}
.pag-btn{width:34px; height:34px; border-radius:99px; border:1px solid var(--linia);
  background:var(--blanc); display:grid; place-items:center; color:var(--text-2); transition:.14s}
.pag-btn:hover:not(:disabled){border-color:var(--text-3); color:var(--text)}
.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-family:"Roboto Mono",ui-monospace,monospace; 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}

/* Panell lateral de la fitxa */
.panell-fons{position:fixed; inset:0; background:rgba(13,23,29,.44); z-index:60}
.panell{position:fixed; top:0; right:0; bottom:0; width:min(540px,94vw); background:var(--inox);
  z-index:61; overflow-y:auto; box-shadow:var(--om-2)}
.panell-cap{position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:10px;
  padding:13px 16px; background:var(--inox); border-bottom:1px solid var(--linia)}
.panell-cap .micro{flex:1 1 auto}
.panell-cos{padding:14px}
.panell .fitxa{box-shadow:none}
.panell .dades-reixa{grid-template-columns:repeat(2,minmax(0,1fr))}
.panell .fitxa-cap{padding:18px 20px}
.panell .fitxa-cos{padding:18px 20px 22px}
.tanca{width:32px; height:32px; border-radius:99px; border:1px solid var(--linia);
  background:var(--blanc); display:grid; place-items:center; color:var(--text-2)}
.tanca:hover{border-color:var(--text-3); color:var(--text)}
.tanca svg{width:14px; height:14px}

/* ================= Producte ================= */
.xip.pr{border:1px solid transparent; font-weight:500}
.xip.pr-josper{background:var(--granat-suau); color:var(--granat); border-color:#E7CDCF}
.xip.pr-altra{background:var(--brasa-suau); color:#B8410F; border-color:#F6D6C4}
.xip.pr-carbo{background:var(--carbo); color:#fff}
.xip.pr-menaje{background:var(--ok-suau); color:var(--ok); border-color:#C9E6DF}
.xip.pr-sense{background:var(--inox); color:var(--text-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}
.prod-tria{display:flex; gap:8px; flex-wrap:wrap}
.pbtn{display:inline-flex; align-items:center; gap:9px; border:1px solid var(--linia);
  background:var(--blanc); padding:8px 14px; border-radius:99px; font-size:13px;
  color:var(--text-2); transition:.14s}
.pbtn:hover{border-color:var(--text-3)}
.pbtn i{width:14px; height:14px; border:1.5px solid var(--linia); border-radius:4px;
  flex:none; display:grid; place-items:center}
.pbtn[aria-pressed="true"]{background:var(--carbo); border-color:var(--carbo); color:#fff; font-weight:500}
.pbtn[aria-pressed="true"] i{background:#fff; border-color:#fff}
.pbtn[aria-pressed="true"] i::after{content:''; width:7px; height:7px; border-radius:2px; background:var(--carbo)}
.pbtn.josper[aria-pressed="true"]{background:var(--granat); border-color:var(--granat)}
.pbtn.josper[aria-pressed="true"] i::after{background:var(--granat)}
.pbtn.altra[aria-pressed="true"]{background:var(--brasa); border-color:var(--brasa)}
.pbtn.altra[aria-pressed="true"] i::after{background:var(--brasa)}
.pbtn.menaje[aria-pressed="true"]{background:var(--ok); border-color:var(--ok)}
.pbtn.menaje[aria-pressed="true"] i::after{background:var(--ok)}
.com-arribar{display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  border:1px solid var(--linia); border-radius:99px; padding:9px 15px; font-size:13px;
  color:var(--text); text-decoration:none; background:var(--blanc); transition:.14s}
.com-arribar:hover{border-color:var(--brasa); color:var(--brasa)}
.com-arribar svg{width:15px; height:15px; flex:none}

/* ================= Responsive ================= */
@media (max-width:1400px){ .col-cat{display:none} }
@media (max-width:1240px){
  :root{--rail:74px}
  .marca{padding:0 0 24px; display:grid; place-items:center}
  .logo{display:none} .logo-min{display:block}
  .rail-sec,.rail-peu,.nav .txt,.pastilla{display:none}
  .nav{padding:0 10px; align-items:center}
  .nav button{justify-content:center; padding:11px 0}
  .r4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .leads{grid-template-columns:minmax(0,290px) minmax(0,1fr)}
}
@media (max-width:1400px){
  .r3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Entre 1081 i 1400 px el tercer quadre de la fila de tres quedava sol amb un buit al costat */
@media (min-width:1081px) and (max-width:1400px){
  .r3 > :last-child:nth-child(3){grid-column:1/-1}
  .r3 > :last-child:nth-child(3) .donut-fila{justify-content:center; gap:64px}
  .r3 > :last-child:nth-child(3) .donut-leg{flex:0 1 460px}
}
@media (max-width:1080px){
  .r23,.r2,.r3{grid-template-columns:minmax(0,1fr)}
  .col-tiquet{display:none}
  .leads{grid-template-columns:minmax(0,1fr)}
  .lead-llista{position:static}
  .lead-scroll{max-height:290px}
}
@media (max-width:900px){
  #v-restaurants .taula-caixa{display:none}
  .targetes{display:flex}
  .app{grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr}  /* sense la 2a fila, el rail s'estirava a les pagines curtes */
  .vbtn,.pbtn{min-height:44px}  /* objectiu tactil minim */
  .rail{position:static; height:auto; flex-direction:row; align-items:center; padding:10px 14px; gap:12px; overflow-x:auto}
  .marca{padding:0; flex:none}
  .logo{display:block; width:112px; height:34px} .logo-min{display:none}
  .nav{flex-direction:row; gap:4px; padding:0}
  .nav button{padding:8px 12px}
  .nav .txt{display:inline}
  .cerca{order:3; width:100%}
  .cap{min-height:0}
  .col-zona{display:none}
}
@media (max-width:700px){
  .nav .txt{display:none}
  .segell,.usuari-txt{display:none}
  .col-valoracio{display:none}
  .mapa-leg{position:static; margin:12px; max-width:none}
}
@media (max-width:560px){
  .r4{grid-template-columns:minmax(0,1fr)}
  .tq-fila, .em-fila{grid-template-columns:minmax(0,1fr)}
  .tq-val{white-space:normal}
  .em-nom{white-space:normal}
  .metriques{display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}
  .metrica:nth-child(2n){border-right:0}
  .metrica:nth-child(-n+2){border-bottom:1px solid var(--linia)}
  .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 */
}

/* ================= 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}

/* 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(--carbo); color:#fff; 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(--brasa); color:#fff;
  padding:12px 16px; text-align:center; font-size:14px; font-weight:500; box-shadow:var(--om-2)}

/* Grafic mensual mentre nomes hi ha un mes */
.eix-nota{margin:8px 0 0; font-size:11.5px; color:var(--text-3)}

/* 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}

/* ================= Usuarios ================= */
.usu-nou{margin-bottom:16px}
.usu-nou .targeta-cos{padding:14px 20px 18px}
.usu-form{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end}
.usu-form label{display:flex; flex-direction:column; gap:5px; font-size:11.5px; color:var(--text-2); flex:1 1 180px}
.usu-form input,.usu-form select,.u-rol{padding:8px 12px; border:1px solid var(--linia); border-radius:var(--r-s);
  background:var(--blanc); font-size:13px; min-height:38px}
.usu-form input:focus,.usu-form select:focus,.u-rol:focus{outline:none; border-color:var(--brasa)}
.usu-form .boto{min-height:38px}
.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:#B03A2E}
#u-avis{margin:0 2px 12px}
.u-estat{font-weight:500; white-space:nowrap}
.u-estat.ok{color:var(--ok)} .u-estat.ko{color:#B03A2E} .u-estat.pend{color:#B8410F}
.u-accions{display:flex; gap:6px; flex-wrap:wrap}
.u-accions .boto{padding:6px 12px}
@media (max-width:640px){
  table.usu{min-width:0}
  table.usu thead{display:none}
  table.usu, table.usu tbody, table.usu tr, table.usu td{display:block; width:100%}
  #v-usuaris .taula-caixa{background:none; box-shadow:none; overflow:visible}
  table.usu tr{background:var(--blanc); border-radius:var(--r-m); box-shadow:var(--om-1); padding:10px 14px; margin-bottom:10px}
  table.usu td{border:0; padding:5px 0; display:flex; gap:10px; align-items:center; overflow-wrap:anywhere}
  table.usu td::before{content:attr(data-k); flex:0 0 74px; font-size:10.5px; text-transform:uppercase;
    letter-spacing:.08em; color:var(--text-3); font-family:"Roboto Condensed",Roboto,sans-serif; font-weight:600}
  table.usu td.hist-buit::before{content:none}
}
/* L'Historial, igual que Usuarios, passa de taula a targetes per sota de 640 px */
@media (max-width:640px){
  table.hist{min-width:0}
  table.hist thead{display:none}
  table.hist, table.hist tbody, table.hist tr, table.hist td{display:block; width:100%}
  #v-historial .taula-caixa{background:none; box-shadow:none; overflow:visible}
  table.hist tr{background:var(--blanc); border-radius:var(--r-m); box-shadow:var(--om-1); padding:10px 14px; margin-bottom:10px}
  table.hist td{border:0; padding:5px 0; display:flex; gap:10px; align-items:center; overflow-wrap:anywhere}
  table.hist td::before{content:attr(data-k); flex:0 0 74px; font-size:10.5px; text-transform:uppercase;
    letter-spacing:.08em; color:var(--text-3); font-family:"Roboto Condensed",Roboto,sans-serif; font-weight:600}
  table.hist td.hist-buit::before, table.hist td[data-k=""]::before{content:none}
  table.hist td.col-zona{display:flex}
  table.hist tr.hist-total{background:var(--inox-2)}
  table.hist td.num-cel{text-align:left; white-space:normal}
}

/* ---------- Pla 4: clients de Josper i proves de la cadena ---------- */
#l-tipus,#r-tipus{flex-wrap:wrap; max-width:100%; border-radius:20px}
.segment button .num{font-weight:600; margin-left:3px}
.xip.cli{background:var(--ok-suau); color:var(--ok); border:1px solid #C9E6DF; 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}
.prova + .prova{margin-top:8px}
.prova-cap{font-size:12.5px; font-weight:600; color:#8A3410; margin-bottom:4px}
.prova.ia{background:var(--inox-2)}
.prova.ia .prova-cap,.prova.ia .cita{color:var(--text-2)}
.prova.cli{background:var(--ok-suau)}
.prova.cli .prova-cap,.prova.cli .cita{color:var(--ok)}
.prova-estat{margin:0 0 10px; padding:10px 14px; border-radius:var(--r-m); background:var(--inox-2); color:var(--text-2); font-size:13px}
.prova-estat.sense_dades{background:#FFF4E5; color:#8A5300}

/* ---------- Pla 4: Revisión ---------- */
.cli-fitxer{margin-bottom:16px}
.cli-estat{margin:0; font-size:13.5px; color:var(--text-2)}
.cli-accions{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:12px 0}
.cli-accions .boto{min-height:44px; display:inline-flex; align-items:center; cursor:pointer}
.cli-ajuda,.cli-info{margin:6px 0; font-size:12.5px; color:var(--text-3)}
.cli-mapa{margin-top:14px}
.cli-camps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 14px; margin:10px 0}
.cli-camps label,.cli-defecte{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--text-2); min-width:0}
.cli-defecte{max-width:320px; margin-bottom:12px}
.cli-camps select,.cli-defecte select{min-height:40px; padding:6px 10px; border:1px solid var(--linia); border-radius:10px; background:var(--blanc); max-width:100%}
.cli-mostra{font-size:12px}
.cli-mostra th,.cli-mostra td{padding:6px 10px; white-space:nowrap; max-width:220px; overflow:hidden; text-overflow:ellipsis}
.cli-previa{margin-top:14px}
.cli-resum{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; margin:0 0 8px; font-size:13px; max-width:520px}
.cli-resum dt{color:var(--text-2)}
.cli-resum dd{margin:0; font-weight:600; text-align:right}
.rev-llista{display:flex; flex-direction:column; gap:12px}
.rev-grup{display:flex; flex-direction:column; gap:10px}
.rev-grup h3{font-size:13px; margin:6px 0 0; color:var(--text-2)}
.rev-parella{background:var(--blanc); border:1px solid var(--linia); border-radius:var(--r-m); padding:14px 16px; min-width:0}
.rev-motiu{font-size:12.5px; font-weight:600; color:#8A3410; margin-bottom:10px}
.rev-cap,.rev-fila{display:grid; grid-template-columns:110px minmax(0,1fr) minmax(0,1fr); gap:10px; padding:5px 0; font-size:13px}
.rev-fila{border-top:1px solid var(--linia)}
.rev-fila .k{color:var(--text-3); font-size:12px}
.rev-fila .a,.rev-fila .b{overflow-wrap:anywhere; min-width:0}
.rev-fila.dif .a,.rev-fila.dif .b{background:#FFF4E5; border-radius:6px; padding:0 4px; font-weight:500}
.rev-nota{margin:8px 0 0; font-size:12.5px; color:var(--text-2)}
.rev-enllacos{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; font-size:12.5px}
.rev-accions{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.rev-accions .boto,.rev-fitxa .boto{min-height:44px}
.rev-fitxa{display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; padding:8px 0; border-top:1px solid var(--linia); font-size:13px}
.rev-fitxa span{overflow-wrap:anywhere; min-width:0}
.rev-metode{color:var(--text-3); font-size:12px}
.rev-buit{color:var(--text-3); font-size:13px; padding:12px 0; margin:0}
@media (max-width:640px){
  .cli-camps{grid-template-columns:minmax(0,1fr)}
  .rev-cap,.rev-fila{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rev-cap > :first-child,.rev-fila .k{grid-column:1/-1}
}

/* ---------- 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 0 8px; overflow-wrap:anywhere}
.hist-barra{height:10px; background:var(--inox); border-radius:99px; overflow:hidden; margin-bottom:12px}
.hist-barra-om{height:100%; width:0; background:linear-gradient(90deg,var(--brasa),var(--brasa-2)); transition:width .4s ease}
.hist-barra-om.alerta{background:#B03A2E}
.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{min-height:30px; padding:2px 10px; font-size:12px; margin-left:8px}
.rev-intent{margin:4px 0; font-size:13px; overflow-wrap:anywhere}
.d-fonts{margin:-4px 0 12px; font-size:12.5px; color:#B8410F}   /* 4,9:1 sobre el fons --inox */
.targeta[hidden]{display:none}
#d-sense-dades-targeta{grid-column:1/-1}
.d-motius{margin:0; padding-left:18px; font-size:13px; color:var(--text-2)}
.estat-punt.brasa{background:var(--brasa-2)}
.vbtn.brasa[aria-pressed="true"]{background:#B8410F; border-color:#B8410F}   /* text blanc: 5,5:1 */
@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 */
}
@media (max-width: 640px){
  /* Estat i boto de la fila mensual en targeta: si no hi caben, el boto baixa en lloc de sortir de la pantalla */
  table.hist td[data-k="Estado"]{flex-wrap:wrap}
  .boto.mini{margin-left:0}
}

/* ---------- Pla 6: «Zona de borrado» de la fitxa (nomes l'administrador) ---------- */
.zona-esborrat{border-top:1px solid var(--linia); padding-top:14px; margin-top:6px}
.zona-botons{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
/* Contorn vermell, sense farciment: no es pot confondre amb els botons d'accio. El nom d'un client pot ser llarg: baixa de linia */
.boto.perill{background:var(--blanc); border:1px solid #B03A2E; color:#B03A2E; white-space:normal; text-align:left; max-width:100%; overflow-wrap:anywhere}
.boto.perill:hover{background:#FBEDEB; color:#8E2B20}
.boto.perill:disabled{opacity:.55; cursor:default}
@media (max-width: 900px){
  .boto.perill{min-height:44px}
}