/* Informes de robots de munyir · Agroservei Viñas
   Layout: una columna, mòbil primer, barra inferior fixa amb l'estat en directe.
   Fonts del sistema (no es carrega res de tercers per a la tipografia). */
:root{
  --bg:#E6EBEA; --surface:#FFFFFF; --sunk:#DCE2E1; --ink:#232727; --muted:#5C6464; --line:#C9D1D0; --field:#FFFFFF; --field-line:#A9B4B3;
  --accent:#007A75; --accent-ink:#FFFFFF; --accent-soft:#D6EFED; --brand-yellow:#FED300;
  --ok:#4E8A12; --ok-soft:#E7F3D8; --rep:#A87700; --rep-soft:#FFF2C2; --bad:#C8102E; --bad-soft:#F9DDE1; --na:#8A8F8F; --na-soft:#ECEEEE;
  --f-display:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono",monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0C1212; --surface:#18201F; --sunk:#222D2C; --ink:#EEF3F2; --muted:#A3AEAD; --line:#33403F; --field:#0F1716; --field-line:#4A5958;
  --accent:#2EC4BA; --accent-ink:#052625; --accent-soft:#163A37;
  --ok:#8BCB45; --ok-soft:#1E3014; --rep:#F2C230; --rep-soft:#3A2F0E; --bad:#F06A7C; --bad-soft:#3E1A20; --na:#7C8786; --na-soft:#232C2B;
  color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.45}
.wrap{max-width:860px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-left)) 130px max(16px,env(safe-area-inset-right))}
header.top{display:flex;flex-direction:column;gap:12px;padding-top:max(20px,env(safe-area-inset-top));padding-bottom:8px}
.brand{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;justify-content:space-between}
.brand h1{font-family:var(--f-display);font-weight:700;font-size:28px;margin:0;line-height:1.05;text-wrap:balance}
.brand .who{color:var(--muted);font-size:13px}
.brand .who a{color:var(--accent)}
.tabs{display:flex;gap:4px;background:var(--sunk);padding:4px;border-radius:10px;width:max-content;max-width:100%;overflow-x:auto}
.tabs button{border:0;background:transparent;color:var(--muted);font:600 15px var(--f-body);padding:8px 14px;border-radius:7px;cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
h2{font-family:var(--f-display);font-weight:700;font-size:21px;margin:0}
.label{font-size:12px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0}
.panel{background:var(--surface);border:1px solid var(--line);box-shadow:0 1px 3px rgba(0,0,0,.06);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px}
.stack{display:flex;flex-direction:column;gap:16px}
section.stack{margin-top:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 12px}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
input[type=text],input[type=date],input[type=search],input[type=password],input[type=email],.field input[type=number],select,textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--field);border:1px solid var(--field-line);border-radius:8px;padding:9px 10px}
.field>input,.field>select,.field>textarea,.field>.with-mic{margin-top:auto} /* camps alineats encara que l'etiqueta ocupi dues línies */
textarea{resize:vertical;min-height:84px}
input:focus,textarea:focus,select:focus,button:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.req{color:var(--bad)}
.btn{font:600 15px var(--f-body);border-radius:8px;padding:10px 14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:6px;justify-content:center;text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.small{padding:6px 10px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.row-actions{display:flex;flex-wrap:wrap;gap:8px}
.hint{color:var(--muted);font-size:13px;margin:0}
.note-box{font-size:14px;border-radius:8px;padding:10px 12px;background:var(--sunk);margin:0}
.note-box.err{background:var(--bad-soft);color:var(--bad)}
.with-mic{display:flex;gap:6px;align-items:flex-start}
.with-mic>input,.with-mic>textarea{flex:1;min-width:0}
.mic{flex:none;width:40px;height:40px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;display:grid;place-items:center}
.mic.rec{background:var(--bad);border-color:var(--bad);color:#fff;animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.6}}

/* resum */
.summary{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.donut{width:116px;height:116px;flex:none}
.donut text{font-family:var(--f-display);font-weight:700;fill:var(--ink)}
.donut .sub{font-family:var(--f-body);font-weight:500;fill:var(--muted)}
.legend{display:grid;grid-template-columns:repeat(2,minmax(120px,auto));gap:6px 18px;font-variant-numeric:tabular-nums}
.legend div{display:flex;align-items:center;gap:8px}
.sw{width:10px;height:10px;border-radius:3px;flex:none}
.legend b{font-family:var(--f-mono);font-weight:500;min-width:2ch;text-align:right}

/* checklist */
details.sec{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
details.sec>summary{list-style:none;cursor:pointer;padding:12px 16px;display:flex;align-items:center;gap:10px}
details.sec>summary::-webkit-details-marker{display:none}
details.sec>summary .chev{transition:transform .15s;color:var(--muted);flex:none}
details.sec[open]>summary .chev{transform:rotate(90deg)}
details.sec>summary h3{font-family:var(--f-display);font-weight:600;font-size:19px;margin:0;flex:1;min-width:0}
.chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.chip{font-size:12px;font-weight:600;border-radius:999px;padding:2px 9px;white-space:nowrap}
.chip.c{background:var(--ok-soft);color:var(--ok)}
.chip.r{background:var(--rep-soft);color:var(--rep)}
.chip.i{background:var(--bad-soft);color:var(--bad)}
.chip.na{background:var(--na-soft);color:var(--muted)}
.chip.up{background:var(--accent-soft);color:var(--accent)}
.items{border-top:1px solid var(--line)}
.item{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:10px 16px;border-bottom:1px solid var(--line);align-items:center;border-left:4px solid transparent}
.item:last-child{border-bottom:0}
.item[data-s="r"]{border-left-color:var(--rep)}
.item[data-s="i"]{border-left-color:var(--bad)}
.item .name{min-width:0}
.code{font-family:var(--f-mono);font-size:12px;color:var(--muted);margin-right:6px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{border:0;background:transparent;color:var(--muted);font:600 13px var(--f-body);padding:8px 10px;cursor:pointer;min-width:42px}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"][data-v="c"]{background:var(--ok);color:#fff}
.seg button[aria-pressed="true"][data-v="r"]{background:var(--rep);color:#fff}
.seg button[aria-pressed="true"][data-v="i"]{background:var(--bad);color:#fff}
.seg button[aria-pressed="true"][data-v="na"]{background:var(--na);color:#fff}
.item .noteinp{grid-column:1/-1}
.item .noteinp input{padding:7px 9px;font-size:16px}
.item .noteinp .mic{width:36px;height:36px}
.addnote{border:0;background:none;color:var(--accent);font:500 13px var(--f-body);cursor:pointer;padding:0;margin-left:6px}
@media (max-width:520px){.item{grid-template-columns:1fr}.seg{justify-self:start}}

/* barra inferior */
.dock{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));z-index:5}
.dock-in{max-width:860px;margin:0 auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dock .stat{display:flex;align-items:baseline;gap:8px;flex:1;min-width:150px}
.dock .big{font-family:var(--f-display);font-weight:700;font-size:28px;line-height:1}
.bar{height:8px;border-radius:4px;background:var(--sunk);overflow:hidden;display:flex;flex:1;min-width:60px;align-self:center}
.bar i{display:block;height:100%}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;font-weight:500;z-index:9;max-width:calc(100% - 32px)}

/* registre */
.reports{display:flex;flex-direction:column;gap:8px}
.rep{display:grid;grid-template-columns:auto 1fr auto;gap:4px 14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;cursor:pointer;text-align:left;font:inherit;color:inherit;width:100%}
.rep:hover{border-color:var(--accent)}
.rep .pct{font-family:var(--f-display);font-weight:700;font-size:26px;min-width:3.2ch;text-align:right;font-variant-numeric:tabular-nums}
.rep .meta{min-width:0}
.rep .meta b{display:block;font-weight:600;overflow-wrap:anywhere}
.rep .meta span{color:var(--muted);font-size:13px}
@media (max-width:520px){.rep{grid-template-columns:auto 1fr}.rep .chips{grid-column:1/-1;justify-content:flex-start}}
.empty{border:1px dashed var(--line);border-radius:12px;padding:28px 18px;text-align:center;color:var(--muted)}
.empty strong{display:block;color:var(--ink);font-family:var(--f-display);font-size:20px;margin-bottom:4px}
.kpis{display:flex;gap:24px;flex-wrap:wrap}
.kpis div{display:flex;flex-direction:column}
.kpis b{font-family:var(--f-display);font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters input{flex:2;min-width:180px}.filters select{flex:1;min-width:150px}
.detail-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.detail-list li{padding:8px 10px;border-radius:8px;font-size:14px}
.detail-list li.i{background:var(--bad-soft)}
.detail-list li.r{background:var(--rep-soft)}
.detail-list li em{display:block;font-style:normal;color:var(--muted)}
.confirm{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--bad-soft);padding:10px;border-radius:8px}
.tbl-wrap{overflow-x:auto}
table.users{border-collapse:collapse;width:100%;font-size:14px}
table.users th,table.users td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
table.users th{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}

/* pantalles d'accés */
body.auth{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.auth-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:14px}
.auth-card h1{font-family:var(--f-display);font-size:26px;margin:0;line-height:1.1}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- fase 1: visita per granja ---------- */
.muted{color:var(--muted);font-weight:500}
.glist{display:flex;flex-direction:column;gap:6px}
.gitem{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font:inherit;color:inherit;cursor:pointer;width:100%}
.gitem:hover{border-color:var(--accent)}
.gitem b{flex:1 1 200px;min-width:0}
.gitem span{color:var(--muted);font-size:13px}
.gitem .chip{color:inherit}
.vhead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.cards{display:flex;flex-direction:column;gap:12px}
.vcard{background:var(--surface);border:1px solid var(--line);box-shadow:0 1px 3px rgba(0,0,0,.06);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;border-left:5px solid var(--ok)}
.vcard.has-r{border-left-color:var(--rep)}
.vcard.has-i{border-left-color:var(--bad)}
.vc-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}
.vc-title{display:flex;flex-direction:column;min-width:0}
.vc-title h3{font-family:var(--f-display);font-weight:700;font-size:20px;margin:0}
.infoline{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap;font-size:14px;background:var(--sunk);border-radius:8px;padding:8px 10px}
.infoline.warn{background:var(--rep-soft)}
.temps,.rrow{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.rrow.small{font-size:14px}
.tfield{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted)}
.tfield input{width:84px;font:inherit;font-size:16px;color:var(--ink);background:var(--field);border:1px solid var(--field-line);border-radius:8px;padding:7px 8px}
label.tog{display:inline-flex;gap:8px;align-items:center;font-size:14px;cursor:pointer;min-height:36px}
label.tog input{width:20px;height:20px;accent-color:var(--accent)}
label.tog.big{font-weight:600;font-size:15px}
.kitinp{width:130px;font:inherit;font-size:15px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:7px 8px;font-family:var(--f-mono)}
.kitinp:disabled{opacity:.5}
.prevlist{display:flex;flex-direction:column;gap:6px}
.prev{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;background:var(--accent-soft);border-radius:8px;padding:8px 10px;font-size:14px}
.prev>div:first-child{display:flex;flex-direction:column;min-width:0;flex:1 1 200px}
.prev.done{background:var(--ok-soft)}
.seg.small button{padding:7px 10px;font-size:13px}
.seg button[aria-pressed="true"][data-prev][data-v="1"]{background:var(--ok);color:#fff}
.seg button[aria-pressed="true"][data-prev][data-v="0"]{background:var(--accent);color:var(--accent-ink)}
.seg button[aria-pressed="true"][data-p],.seg button[aria-pressed="true"][data-r]{background:var(--ink);color:var(--bg)}
.exc{align-self:flex-start}
.secs{display:flex;flex-direction:column;gap:6px;margin:0 -16px -14px;border-top:1px solid var(--line)}
.sec>.label{padding:10px 16px 2px}
.sec .item{border-left:4px solid transparent}
.iextra{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters>*{flex:1 1 180px}
.list{display:flex;flex-direction:column;gap:8px}
.prow{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)) auto;gap:6px 14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:14px}
.pmain{display:flex;flex-direction:column;min-width:0}
.pcol{display:flex;flex-direction:column;gap:2px;min-width:0}
.pcol .chip{align-self:flex-start}
@media (max-width:720px){.prow{grid-template-columns:1fr 1fr}.pmain{grid-column:1/-1}}
.btn.ok{color:var(--ok);border-color:var(--ok)}
.chips.left{justify-content:flex-start}
.irow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--rep);border-radius:10px;padding:12px 14px;font-size:14px}
.irow.urg{border-left-color:var(--bad)}
.iact{display:flex;flex-direction:column;gap:6px;min-width:180px}
.iact select{font-size:14px;padding:6px 8px}
@media (max-width:560px){.irow{grid-template-columns:1fr}.iact{min-width:0}}
.rform{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.grid.g6{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.bform,.cform{border-top:1px solid var(--line);padding-top:10px;align-items:end}
.warnbox{background:var(--rep-soft);color:var(--ink)}
.okbox{background:var(--ok-soft);color:var(--ink)}
.detail-list li.c{background:var(--ok-soft)}
.dock .stat{flex-direction:column;gap:0}
.dock .big{font-size:22px}

/* ---------- graella per Supply Unit, notes ràpides ---------- */
.viewseg{align-self:flex-start}
.viewseg button{padding:8px 12px;font-size:14px}
.seg button[aria-pressed="true"][data-mode]{background:var(--accent);color:var(--accent-ink)}
.vcard.off{border-left-color:var(--line);opacity:.85}
.addnote{border:0;background:none;color:var(--accent);font:500 13px var(--f-body);cursor:pointer;padding:0;margin-left:8px}
.qps{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.qp{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:5px 10px;font:500 13px var(--f-body);cursor:pointer}
.qp:active{background:var(--accent-soft)}
.glegend{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.gwrap{overflow-x:auto;margin:0 -16px;padding:0 16px}
.grid-t{border-collapse:separate;border-spacing:0;font-size:13.5px;min-width:100%}
.grid-t th,.grid-t td{padding:3px 3px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.grid-t thead th{font-family:var(--f-mono);font-size:12px;color:var(--muted);font-weight:500;padding-bottom:6px}
.grid-t .gname{text-align:left;font-weight:400;min-width:150px;max-width:220px;position:sticky;left:0;background:var(--surface);z-index:1;padding-right:8px}
.grid-t tr.gsec th{text-align:left;font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);padding-top:12px;position:sticky;left:0;background:var(--surface)}
.gcell{width:44px;height:38px;border-radius:8px;border:1px solid var(--line);background:var(--ok-soft);color:var(--ok);font:700 12px var(--f-body);cursor:pointer}
.gcell[data-s="r"]{background:var(--rep);border-color:var(--rep);color:#fff}
.gcell[data-s="i"]{background:var(--bad);border-color:var(--bad);color:#fff}
.gcell[data-s="na"]{background:var(--na-soft);color:var(--muted)}
.gall{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:8px;padding:8px 6px;font:600 11px var(--f-body);cursor:pointer}
.grid-t tr.gnote td{text-align:left;padding:4px 0 10px;background:var(--sunk)}
.grid-t tr.gnote .with-mic{padding:0 6px}
.grid-t tr.gnote input{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--field);border:1px solid var(--field-line);border-radius:8px;padding:7px 9px}
.grid-t tr.gnote .qps,.grid-t tr.gnote .iextra{padding:6px 6px 0}

/* ---------- peces ---------- */
.pieces{display:flex;flex-direction:column;gap:6px;background:var(--sunk);border-radius:8px;padding:8px 10px}
.pieces-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}
.linkbtn{border:0;background:none;color:var(--accent);font:600 14px var(--f-body);cursor:pointer;padding:4px 0}
.plist{display:flex;flex-direction:column;gap:4px}
.prow2{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;border-top:1px solid var(--line);padding-top:4px}
.prow2.off{opacity:.55}
.prow2 label{flex:1;min-width:0;align-items:flex-start}
.pq{width:70px;font:inherit;font-size:16px;color:var(--ink);background:var(--field);border:1px solid var(--field-line);border-radius:8px;padding:6px 8px}
.padd{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.padd input[type=text]{flex:1 1 180px;min-width:0;font:inherit;font-size:16px;color:var(--ink);background:var(--field);border:1px solid var(--field-line);border-radius:8px;padding:6px 8px}
details>summary.btn{list-style:none;display:inline-flex}
.resum-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px 24px}
.resum-cols>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.big2{font-family:var(--f-display);font-weight:700;font-size:26px;margin:0;line-height:1.1}
.rline{display:flex;justify-content:space-between;gap:8px;font-size:14px;border-bottom:1px solid var(--line);padding:3px 0}

/* ---------- estoc ---------- */
.srow{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.6fr);gap:8px 14px;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--ok);border-radius:10px;padding:10px 14px;font-size:14px}
.srow.need{border-left-color:var(--rep)}
.smain{display:flex;flex-direction:column;min-width:0}
.snums{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;font-variant-numeric:tabular-nums}
.snums>span{display:flex;flex-direction:column}
.sact{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sact select{width:auto;font-size:14px;padding:6px 8px}
.smovs{grid-column:1/-1}
@media (max-width:600px){.srow{grid-template-columns:1fr}}

/* ---------- toc de marca (blau GEA) ---------- */
header.top{border-top:5px solid var(--accent);margin-top:-1px}
.brand h1{color:var(--accent)}
.tabs button[aria-selected="true"]{color:var(--accent)}
.auth-card{border-top:5px solid var(--accent)}
.grid-t .gname{min-width:116px;font-size:13px}
.gcell{width:40px;height:38px}
.grid-t th,.grid-t td{padding:3px 2px}

/* ---------- estil DairyNet: barra verd blavós i hexàgon groc ---------- */
header.top{border-top:6px solid var(--accent)}
.brand h1{color:var(--ink);display:flex;align-items:center;gap:10px}
.brand h1::before{content:"";width:22px;height:25px;flex:none;background:var(--brand-yellow);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.tabs button[aria-selected="true"]{color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent)}
.gcell[data-s="r"]{color:#2B2F2F;background:#FED300;border-color:#E8C000}
.ico{display:inline-flex;flex:none;line-height:0}
.ico svg{display:block}
.vc-titlewrap{display:flex;gap:10px;align-items:center;min-width:0}
.seclabel{display:flex;align-items:center;gap:8px}

/* ---------- estil final: capçalera verd blavós a tota l'amplada, més contrast ---------- */
:root{--bg:#DCE4E3; --line:#C2CCCA; --sunk:#E4EAE9; --row:#F3F6F6; --bar:#007A75}
@media (prefers-color-scheme:dark){:root{--bg:#0B1111; --line:#33403F; --sunk:#202A29; --row:#1D2625; --bar:#00534F}}
h1,h2,h3{letter-spacing:-.2px}
header.top{border-top:0;margin-top:0;background:var(--bar);color:#fff;gap:14px;padding-bottom:0;
  box-shadow:0 0 0 100vmax var(--bar);clip-path:inset(0 -100vmax)} /* el fons s'estén a tota l'amplada de la pantalla */
.brand{align-items:center}
.brand h1{color:#fff;font-size:26px;font-weight:700}
.brand .who{color:rgba(255,255,255,.85)}
.brand .who a{color:#fff;font-weight:600}
.tabs{background:transparent;padding:0;border-radius:0;gap:2px}
.tabs button{color:rgba(255,255,255,.78);border-radius:8px 8px 0 0;padding:10px 14px 12px}
.tabs button:hover{color:#fff;background:rgba(255,255,255,.08)}
.tabs button[aria-selected="true"]{color:#fff;background:rgba(255,255,255,.12);box-shadow:inset 0 -4px 0 var(--brand-yellow)}
.tabs button:focus-visible{outline:2px solid var(--brand-yellow);outline-offset:-2px}
section.stack{margin-top:18px}
.panel,.vcard{border-color:var(--line);box-shadow:0 1px 2px rgba(0,0,0,.06),0 4px 14px rgba(0,40,38,.06)}
.gitem{background:var(--row);border-color:var(--line)}
.gitem:hover{border-color:var(--accent);background:var(--accent-soft)}
.label{color:var(--muted)}
.auth-logo{width:150px;height:auto;align-self:center;margin-bottom:4px}
.auth-card h1{text-align:center}