/* ==========================================================================
   Penjats — Panell d'administracio (PHP)
   Identitat de marca: verd #4F8523, taronja #E8822B
   ========================================================================== */
:root{
  --linia:#4F8523;
  --linia-clar:#6FA83A;
  --abisme:#0D1108;
  --senyal:#E8822B;
  --papel:#FFFFFF;
  --fons:#F6F6F2;
  --grafit:#15170F;
  --danger:#B3402A;
  --border:#E4E4DE;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--fons);
  color:var(--grafit);
  font-size:15px;
  line-height:1.5;
}
a{ color:inherit; }
h1,h2,h3{ margin:0; }

/* ---------- Layout general ---------- */
.layout{ display:flex; min-height:100vh; }
.main{ flex:1; min-width:0; }
.container{ max-width:980px; margin:0 auto; padding:34px 32px 80px; }

/* ---------- Sidebar ---------- */
/* ---------- Sidebar (barra d'icones + submenus flotants) ---------- */
.sidebar{
  width:76px; flex-shrink:0;
  background:var(--abisme); color:#fff;
  display:flex; flex-direction:column; justify-content:space-between;
  position:sticky; top:0; height:100vh; z-index:500;
}
.sidebar__rail{ display:flex; flex-direction:column; align-items:center; padding:18px 10px; gap:4px; flex:1; min-height:0; }
.sidebar__logo{ width:40px; height:40px; border-radius:50%; background:var(--papel); display:flex; align-items:center; justify-content:center; margin-bottom:22px; flex:none; overflow:hidden; }
.sidebar__logo-img{ width:24px; height:auto; }
.sidebar__nav{ display:flex; flex-direction:column; align-items:center; gap:4px; width:100%; }
.navbtn-wrap{ position:relative; width:100%; display:flex; justify-content:center; }
.navbtn{
  position:relative;
  width:48px; height:44px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  color:rgba(255,255,255,.6); background:none; border:none; cursor:pointer;
  text-decoration:none; flex:none; font-family:inherit;
}
.navbtn:hover{ background:rgba(255,255,255,.08); color:#fff; }
.navbtn.is-active{ background:var(--linia); color:#fff; }
.navbtn__label{ display:none; }
.navbtn__chevron{ display:none; }

/* Tooltip flotant en hover (nomes escriptori -- en mobil ja es veu la
   etiqueta de text al costat de la icona, no cal tooltip). Reutilitza
   l'atribut title= que ja porten tots els .navbtn. */
.navbtn::after{
  content:attr(title);
  position:absolute; left:64px; top:50%;
  transform:translateY(-50%) translateX(-4px);
  background:var(--abisme); color:#fff; font-size:12px; font-weight:600;
  padding:6px 11px; border-radius:8px; white-space:nowrap;
  box-shadow:0 10px 26px rgba(13,17,8,.3);
  opacity:0; visibility:hidden; pointer-events:none; z-index:900;
  transition:opacity .12s ease, transform .12s ease;
}
.navbtn:hover::after{ opacity:1; visibility:visible; transform:translateY(-50%) translateX(0); }

.flyout{
  display:none; position:absolute; left:64px; top:0;
  background:var(--papel); color:var(--grafit); border-radius:20px;
  box-shadow:0 16px 40px rgba(13,17,8,.28); padding:8px; min-width:216px; z-index:900;
}
.flyout.is-open{ display:block; }
.flyout__title{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--linia); padding:8px 12px 6px;
}
.flyout a{
  display:block; padding:9px 12px; border-radius:9px;
  font-size:13.5px; font-weight:600; color:var(--grafit); text-decoration:none;
}
.flyout a:hover{ background:rgba(79,133,35,.10); }
.flyout a.is-active{ background:var(--linia); color:#fff; }

.sidebar__bottom{ display:flex; flex-direction:column; align-items:center; gap:4px; padding-top:8px; }

.sidebar__user{
  padding:14px 10px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-direction:column; align-items:center; gap:8px; flex:none;
}
.sidebar__user-id{ display:none; }
.sidebar__logout{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.55); text-decoration:none;
}
.sidebar__logout:hover{ background:rgba(255,255,255,.08); color:#fff; }

/* ---------- Capçalera de pagina ---------- */
.page-head{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px; margin-bottom:26px; }
.page-head h1{ font-family:inherit; font-size:22px; font-weight:700; letter-spacing:-.01em; }
.page-head p{ margin:6px 0 0; font-size:13px; color:rgba(25,23,18,.55); }

/* ---------- Components ---------- */
.card{ background:var(--papel); border:1px solid var(--border); border-radius:16px; padding:22px; box-shadow:0 1px 2px rgba(15,17,9,.05); }
.card--flush{ padding:0; }
.row{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:13px 18px; border-bottom:1px solid rgba(0,0,0,.04);
}
.row:last-child{ border-bottom:none; }
.row--link{ cursor:pointer; text-decoration:none; color:inherit; }
.row--link:hover{ background:rgba(0,0,0,.015); }
.row__title{ margin:0; font-size:14px; font-weight:600; flex:1; min-width:0; }
a.row__title:hover{ color:var(--linia); }
.row__meta{ margin:2px 0 0; font-size:12px; color:rgba(25,23,18,.5); }
.row__side{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.row__desc-inline{ display:none; }
.row--muted > div:first-child{ opacity:.4; }

.badge{
  display:inline-block; font-family:inherit; font-size:11.5px; font-weight:600;
  padding:3px 10px; border-radius:999px; border:1px solid;
  white-space:nowrap;
}
.badge--ok{ color:var(--linia); border-color:rgba(79,133,35,.35); background:rgba(79,133,35,.08); }
.badge--warn{ color:var(--senyal); border-color:rgba(232,130,43,.4); background:rgba(232,130,43,.08); }
.badge--bad{ color:var(--danger); border-color:rgba(179,64,42,.35); background:rgba(179,64,42,.08); }
.badge--muted{ color:rgba(25,23,18,.5); border-color:rgba(0,0,0,.12); background:rgba(0,0,0,.03); }

.warn-flag{
  display:inline-flex; align-items:center; justify-content:center;
  margin-left:5px; color:var(--danger); cursor:help; flex:none; vertical-align:middle;
}
.warn-flag svg{ display:block; }
.warn-flag--on-event{ color:#fff; filter:drop-shadow(0 0 1.5px rgba(0,0,0,.75)); }

.btn{
  display:inline-block; font-family:inherit; font-size:13px;
  font-weight:600; border-radius:8px; cursor:pointer;
  border:1px solid transparent; padding:9px 16px; text-decoration:none; background:none;
}
.btn--sm{ padding:7px 12px; font-size:12.5px; }
.btn--primary{ background:var(--linia); color:#fff; box-shadow:0 1px 2px rgba(15,17,9,.08); }
.btn--primary:hover{ background:var(--linia-clar); }
.btn--outline{ border-color:var(--border); color:var(--grafit); background:var(--papel); }
.btn--outline:hover{ border-color:var(--linia); color:var(--linia); }
.btn--danger{ border-color:rgba(179,64,42,.35); color:var(--danger); }
.btn--danger:hover{ background:rgba(179,64,42,.08); }
.btn:disabled{ opacity:.5; cursor:progress; }

.link-add{
  background:none; border:none; cursor:pointer; padding:0;
  font-family:inherit; font-size:12.5px; font-weight:600;
  color:var(--linia);
}
.link-add:hover{ color:var(--linia-clar); }
.link-action{
  background:none; border:none; cursor:pointer; padding:0;
  font-family:inherit; font-size:12.5px; font-weight:600;
  color:var(--linia); text-decoration:none;
}
.link-action--muted{ color:rgba(25,23,18,.45); }
.link-action--x{ color:rgba(25,23,18,.3); font-size:13px; }
.link-action--x:hover{ color:var(--danger); }

.field label{
  display:block; margin-bottom:6px;
  font-family:monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(25,23,18,.55);
}
.field input, .field select, .field textarea{
  width:100%; padding:9px 11px; border-radius:8px;
  border:1px solid rgba(0,0,0,.16); font-size:14px; background:#fff;
  font-family:inherit;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--linia); box-shadow:0 0 0 1px var(--linia);
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid--3{ grid-template-columns:1fr 1fr 1fr; }
.form-grid--client-wide{ grid-template-columns:2fr 1fr 1fr; margin-bottom:20px; }
.form-grid .full{ grid-column:1 / -1; }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:34px; }
.stats--dash{ grid-template-columns:repeat(5,1fr); }
.stat{ text-align:center; }
.stat b{ display:block; font-family:inherit; font-size:28px; font-weight:700; color:var(--linia); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.stat b.accent{ color:var(--senyal); }
.stat span{ margin-top:4px; display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:rgba(25,23,18,.5); }

.dash-grid{ display:flex; gap:26px; align-items:flex-start; }
.dash-grid__main{ flex:1.7; min-width:0; }
.dash-grid__side{ flex:1; min-width:0; position:sticky; top:20px; }
@media (max-width:900px){
  .dash-grid{ flex-direction:column; }
  .stats--dash{ grid-template-columns:repeat(2,1fr); }
}

.section{ margin-bottom:34px; }
.section__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.section__head--boxed{ margin-bottom:0; padding:20px 20px 14px; border-bottom:1px solid rgba(0,0,0,.06); }
.section__head h2{ font-family:inherit; font-size:14.5px; font-weight:700; color:var(--grafit); }
.section__head h2.danger{ color:var(--danger); }

.empty{
  border:1px dashed rgba(0,0,0,.14); border-radius:12px; padding:34px;
  text-align:center; font-size:13px; color:rgba(25,23,18,.45);
}

/* Estat buit "millorat", amb icona + accio -- variant opcional de .empty,
   fes-la servir amb <div class="empty empty-state">...</div> quan
   vulguis oferir una accio concreta ("Afegir-ne una") en lloc de nomes
   informar que no hi ha res. No substitueix .empty, que segueix igual
   allà on ja es fa servir. */
.empty-state{ padding:40px 24px; }
.empty-state__icon{ font-size:26px; margin-bottom:10px; opacity:.55; }
.empty-state__title{ font-size:13.5px; font-weight:600; color:rgba(25,23,18,.55); margin:0 0 4px; }
.empty-state__hint{ font-size:12px; color:rgba(25,23,18,.4); margin:0 0 14px; }

/* Codis de referencia (LV001, PRES-2026-0142...) -- fes-los servir amb
   <span class="ref-code">LV001</span> a qualsevol llista, no nomes als PDFs. */
.ref-code{
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  font-size:.92em; font-weight:600; color:var(--linia); letter-spacing:.2px;
}

/* Edicio en linia (preu, etc.) */
.inline-edit{
  cursor:pointer; border-bottom:1px dashed rgba(79,133,37,.5);
  padding:1px 2px; border-radius:3px; transition:background .12s ease;
}
.inline-edit:hover{ background:rgba(79,133,37,.08); }
.inline-edit__input{
  width:80px; padding:2px 5px; font-size:inherit; font-family:inherit;
  border:1px solid var(--linia); border-radius:4px; outline:none;
}
.inline-edit__saving{ color:rgba(25,23,18,.4); font-style:italic; }

/* Campaneta d'avisos de caducitat al menu lateral -- bombolla a la
   cantonada de la icona quan el menu es estret (per defecte); quan el
   menu es amplia (mobil), passa a ser una bombolla normal al costat del
   text (veure la media query mes avall, junt amb .navbtn__label). */
.navbtn--alert{ position:relative; }
.navbtn__count{
  position:absolute; top:2px; right:2px;
  background:var(--danger, #B3402A); color:#fff;
  font-size:10px; font-weight:700; line-height:1; padding:2px 5px;
  border-radius:20px; min-width:15px; text-align:center;
}

.notice{
  background:rgba(232,130,43,.1); border-bottom:1px solid rgba(232,130,43,.25);
  padding:10px 32px; font-size:12.5px; color:#7a4315;
}
.flash{ padding:10px 14px; border-radius:8px; margin-bottom:18px; font-size:13px; }
.flash--ok{ background:rgba(79,133,35,.1); border:1px solid rgba(79,133,35,.3); color:var(--linia); }
.flash--error{ background:rgba(179,64,42,.08); border:1px solid rgba(179,64,42,.3); color:var(--danger); }

/* ---------- Login ---------- */
.login-page{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--abisme); padding:16px; }
.login-box{ width:100%; max-width:360px; }
.login-box__brand{ text-align:center; margin-bottom:28px; }
.login-box__logo{ font-family:monospace; font-weight:800; font-size:24px; color:#fff; }
.login-box__logo span{ color:var(--senyal); }
.login-box__logo-img{ height:48px; width:auto; margin:0 auto; display:block; }
.login-box__tag{ margin-top:4px; font-family:monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.45); }
.login-box form{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); border-radius:3px; padding:30px; }
.login-box .field label{ color:rgba(255,255,255,.55); }
.login-box .flash--error{ background:rgba(179,64,42,.15); border-color:rgba(179,64,42,.4); color:#f0a99b; }

/* ---------- Factura: linies dinamiques ---------- */
.inv-lines-head, .inv-line{
  display:grid;
  grid-template-columns:1fr 90px 110px 80px 110px 28px;
  gap:8px; align-items:start;
}
.inv-line__mobile-label{ display:none; }
.inv-line__field input{ width:100%; }
.inv-lines-head{
  font-family:monospace; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; color:rgba(25,23,18,.6); margin-bottom:6px; padding:0 2px 8px;
  border-bottom:1.5px solid rgba(0,0,0,.1);
}
.inv-line{ margin-bottom:8px; }
.inv-line__desc{ display:flex; flex-direction:column; gap:4px; }
.inv-line__desc select{ padding:6px 8px; font-size:12px; }
.inv-line__desc .sub{ font-size:12px; color:rgba(25,23,18,.6); padding:6px 11px; }
.inv-line__total{ text-align:right; font-size:14px; font-weight:600; padding-top:9px; }
.inv-line__total-label{ display:none; }
.inv-line__remove{ background:none; border:none; cursor:pointer; color:rgba(25,23,18,.3); padding-top:9px; }
.inv-line__remove:hover{ color:var(--danger); }
.inv-totals{ margin-left:auto; max-width:260px; margin-top:24px; padding-top:14px; border-top:1px solid rgba(0,0,0,.1); }
.inv-totals div{ display:flex; justify-content:space-between; font-size:13px; color:rgba(25,23,18,.6); margin-bottom:4px; }
.inv-totals .total{ font-size:15px; font-weight:700; color:var(--grafit); }

/* ---------- Vista imprimible de factura ---------- */
.invoice-doc{ max-width:640px; margin:0 auto; background:#fff; border:1px solid rgba(0,0,0,.1); padding:40px; }
.invoice-doc table{ width:100%; border-collapse:collapse; margin-bottom:24px; font-size:13px; }
.invoice-doc th{
  border-bottom:1px solid rgba(0,0,0,.15); text-align:left; padding-bottom:8px;
  font-family:monospace; font-size:9px; text-transform:uppercase; color:rgba(25,23,18,.4); font-weight:500;
}
.invoice-doc td{ padding:8px 0; border-bottom:1px solid rgba(0,0,0,.06); vertical-align:top; }
.invoice-doc .num{ text-align:right; }
.invoice-doc .subdesc{ margin-top:2px; font-size:11px; color:rgba(25,23,18,.5); }

/* ---------- Format formal (replica el prototip de factura) ---------- */
.invoice-doc--formal{ padding:36px 40px; font-size:12.5px; color:#333; }
.invoice-doc--formal p{ margin:0 0 2px; }
.invoice-doc--formal .b{ font-weight:700; }
.invoice-doc--formal .muted{ color:#888; font-size:11px; }
.invoice-doc--formal .label{ font-size:11.5px; color:#555; }
.invoice-doc--formal table{ margin-bottom:0; border-collapse:collapse; }
.invoice-doc--formal td{ border:none; padding:0; vertical-align:top; }

.inv-header{ margin-bottom:30px; }
.inv-header td{ vertical-align:top; }
.inv-header__logo{ width:55%; }
.inv-header__issuer{ width:45%; text-align:right; }
.inv-header__issuer h1{ font-size:22px; font-weight:400; margin:0 0 10px; color:#222; }

.inv-meta{ background:#F1F0EC; padding:20px 24px; margin-bottom:26px; }
.inv-meta td{ padding:0; }
.inv-meta__client{ width:58%; }
.inv-meta__fields{ width:42%; vertical-align:top; }
.inv-meta__fields table{ width:100%; }
.inv-meta__fields tr td{ padding:2px 0; }
.inv-meta__fields .label{ text-align:left; padding-right:16px; white-space:nowrap; }
.inv-meta__fields .val{ text-align:right; }

.inv-items{ margin-bottom:6px; }
.inv-items thead th{
  text-align:left; font-family:inherit; font-size:12px; font-weight:600; text-transform:none;
  color:#333; border-bottom:1px solid #ccc; padding:0 0 8px 14px;
}
.inv-items thead th:first-child{ padding-left:0; }
.inv-items thead th.num{ text-align:right; }
.inv-items tbody td{ padding:10px 0 10px 14px; border-bottom:1px solid #eee; }
.inv-items tbody td:first-child{ padding-left:0; }
.inv-items tbody td.num{ text-align:right; white-space:nowrap; width:1%; }

.inv-totals-table{ width:100%; margin-bottom:20px; }
.inv-totals-table td{ padding:3px 0; }
.inv-totals-table .label{ text-align:right; padding-right:24px; }
.inv-totals-table .num{ text-align:right; width:110px; }
.inv-totals-table tr:last-child td{ padding-top:6px; border-top:1px solid #ccc; font-size:14px; }

.inv-due{ background:#F1F0EC; margin-bottom:30px; }
.inv-due td{ padding:16px 24px; text-align:right; }
.inv-due .label{ margin:0; color:#555; }
.inv-due .amount{ margin:4px 0 0; font-size:22px; font-weight:700; color:#222; }

.inv-section{ margin-bottom:22px; }
.inv-section p{ font-size:12px; color:#444; line-height:1.6; }

/* ---------- Resum lateral (fitxa de client, pestanya Informacio) ---------- */
.info-layout{ display:grid; grid-template-columns:1fr 240px; gap:20px; align-items:start; }
.info-stack{ display:flex; flex-direction:column; gap:0; min-width:0; }
.summary-card{ display:flex; flex-direction:column; gap:12px; position:sticky; top:20px; padding:18px; }
.summary-card__head{ display:flex; align-items:center; gap:10px; }
.summary-avatar{
  width:42px; height:42px; border-radius:11px; background:var(--linia); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; flex:none;
}
.summary-card__name{ font-weight:700; font-size:13.5px; }
.summary-card__sub{ font-size:11px; color:rgba(25,23,18,.45); margin-top:1px; }
.summary-divider{ height:1px; background:var(--border); margin:2px 0; }
.summary-item{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.summary-item__label{ font-size:12px; color:rgba(25,23,18,.55); font-weight:500; }
.summary-item__value{ font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums; }
@media (max-width:900px){
  .info-layout{ grid-template-columns:1fr; }
  .summary-card{ position:static; }
}

/* ---------- Pestanyes (fitxa de client) ---------- */
.tabs{ display:flex; gap:4px; border-bottom:1px solid rgba(0,0,0,.1); margin-bottom:24px; flex-wrap:wrap; }
.tab-btn{
  background:none; border:none; cursor:pointer; padding:11px 16px;
  font-family:inherit; font-size:13px; font-weight:600;
  color:rgba(25,23,18,.5); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab-btn:hover{ color:var(--grafit); }
.tab-btn.is-active{ color:var(--linia); border-bottom-color:var(--linia); }
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; animation:tabFadeIn .16s ease; }
@keyframes tabFadeIn{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .tab-panel.is-active{ animation:none; }
}

/* ---------- Buscador amb suggeriments (tipus Google) ---------- */
.search-box{ position:relative; max-width:420px; }
.search-box input{
  width:100%; padding:10px 14px 10px 36px; border-radius:9px;
  border:1px solid rgba(0,0,0,.16); font-size:14px; background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="%23999" stroke-width="2"><circle cx="6.5" cy="6.5" r="5"/><line x1="10.5" y1="10.5" x2="15" y2="15"/></svg>') no-repeat 12px center;
}
.search-box input:focus{ outline:none; border-color:var(--linia); box-shadow:0 0 0 1px var(--linia); }
.search-box.is-picked input{ border-color:var(--linia); background-color:rgba(79,133,35,.06); font-weight:600; }

/* ---------- Filtre per estat (factures, pressupostos) ---------- */
.status-filter{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.status-filter__chip{
  font-family:inherit; font-size:12.5px; font-weight:600;
  padding:7px 14px; border-radius:100px; border:1px solid rgba(0,0,0,.15);
  background:#fff; color:rgba(25,23,18,.6); cursor:pointer;
}
.status-filter__chip:hover{ border-color:var(--linia); color:var(--linia); }
.status-filter__chip.is-active{ background:var(--abisme); border-color:var(--abisme); color:#fff; }

/* ---------- Filtre multiopcio (pagina Feines) ---------- */
.multi-filter{ display:flex; flex-wrap:wrap; gap:26px; margin-bottom:22px; padding:16px; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:10px; }
.multi-filter__group b{ display:block; font-family:monospace; font-size:10px; text-transform:uppercase; color:rgba(25,23,18,.4); margin-bottom:8px; }
.multi-filter__group label{ display:flex; align-items:center; gap:6px; font-size:13px; margin-bottom:6px; cursor:pointer; }
.search-suggest{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30;
  background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.12); max-height:320px; overflow-y:auto; display:none;
}
.search-suggest--floating{ z-index:260; } /* per sobre dels modals (z-index:200) */
.search-suggest.is-open{ display:block; }
.search-suggest__item{
  display:flex; flex-direction:column; justify-content:center; gap:2px; min-height:44px;
  padding:8px 14px; text-decoration:none; color:inherit; width:100%; text-align:left;
  border:none; border-bottom:1px solid rgba(0,0,0,.05); background:none; cursor:pointer; box-sizing:border-box;
  font-family:inherit;
}
.search-suggest__item:last-child{ border-bottom:none; }
.search-suggest__item:hover, .search-suggest__item.is-highlighted{ background:rgba(79,133,35,.07); }
.search-suggest__item b{
  font-size:13.5px; font-weight:600; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.search-suggest__item span{
  font-size:12px; color:rgba(25,23,18,.5); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.search-suggest__empty{ padding:14px; font-size:13px; color:rgba(25,23,18,.4); text-align:center; }

/* ---------- Xips de seleccio multiple (p.ex. treballadors) ---------- */
.chip-picker__list{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:8px; }
.chip-picker__list:empty{ display:none; }
.chip-picker__chip{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  padding:5px 6px 5px 12px; border-radius:100px; background:rgba(79,133,35,.09); color:var(--linia);
  border:1px solid rgba(79,133,35,.25);
}
.chip-picker__remove{
  display:flex; align-items:center; justify-content:center; width:16px; height:16px;
  border-radius:50%; border:none; background:rgba(79,133,35,.18); color:var(--linia);
  font-size:10px; line-height:1; cursor:pointer; padding:0;
}
.chip-picker__remove:hover{ background:var(--danger); color:#fff; }

/* Filtre instantani de llistes (articles, certificacions, treballs) */
.filter-box{ max-width:320px; margin-bottom:14px; position:sticky; top:0; z-index:5; background:var(--fons); padding:8px 0; isolation:auto; }
.filter-box input{
  width:100%; padding:8px 12px 8px 32px; border-radius:9px;
  border:1px solid rgba(0,0,0,.16); font-size:13px; background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="%23999" stroke-width="2"><circle cx="6" cy="6" r="4.5"/><line x1="9.5" y1="9.5" x2="13" y2="13"/></svg>') no-repeat 10px center;
}
.filter-box input:focus{ outline:none; border-color:var(--linia); }
.row[data-filter-hidden]{ display:none; }

/* Etiqueta discreta de numero de client */
.client-number{ font-family:monospace; font-size:11px; color:rgba(25,23,18,.35); }

/* ---------- Desplegable d'accions (PDF / QR / ZIP) per seu ---------- */
.dropdown-menu{ position:relative; display:inline-block; }
.dropdown-menu__trigger{
  width:30px !important; height:30px !important; padding:0 !important;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:15px; line-height:1; border-radius:8px !important;
}
/* Nomes el "⋮" solt (sense classe .btn combinada) porta el seu propi
   aspecte de boto; quan va combinat amb .btn/.btn--outline/.btn--primary
   (p.ex. "Opcions ▾"), ja rep el fons/vora del seu variant. */
.dropdown-menu__trigger:not(.btn){
  border:1px solid var(--border); background:var(--papel); color:rgba(25,23,18,.55);
}
.dropdown-menu__trigger:not(.btn):hover{ border-color:var(--linia); color:var(--linia); }
.dropdown-menu__trigger--wide{
  width:auto !important; height:auto !important; padding:8px 14px !important;
  border-radius:8px !important; font-size:13px !important;
}
/* Els botons "Opcions ▾" (amples) s'obren cap a la dreta -- ancorats a
   l'esquerra del boto -- en lloc de cap a l'esquerra com el "⋮" petit. */
.dropdown-menu__trigger--wide + .dropdown-menu__panel{ right:auto; left:0; }
.dropdown-menu__panel{
  display:none; position:absolute; z-index:70; top:calc(100% + 6px); right:0; min-width:220px;
  background:#fff; border:1px solid var(--border); border-radius:12px;
  box-shadow:0 12px 28px rgba(15,17,9,.14); padding:6px; text-align:left;
}
.dropdown-menu.is-open .dropdown-menu__panel{ display:block; }
.dropdown-menu__item{
  display:block; width:100%; padding:8px 10px; border-radius:8px; border:none; background:none;
  font-family:inherit; font-size:13px; text-align:left; color:var(--grafit); text-decoration:none;
  cursor:pointer; white-space:nowrap;
}
.dropdown-menu__item:hover{ background:rgba(79,133,35,.07); }

/* ---------- Finestra modal (p.ex. desar articles nous al cataleg) ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:200; background:rgba(15,14,10,.55);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:modalOverlayIn .15s ease;
}
.modal-box{
  background:#fff; border-radius:16px; width:100%; max-width:460px; max-height:85vh;
  overflow-y:auto; padding:24px; box-shadow:0 20px 50px rgba(0,0,0,.3); position:relative;
  animation:modalBoxIn .2s cubic-bezier(.2,.8,.3,1.15);
}
@keyframes modalOverlayIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes modalBoxIn{
  from{ opacity:0; transform:scale(.94) translateY(8px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .modal-overlay, .modal-box{ animation:none; }
}
.modal-box__close{
  position:absolute; top:14px; right:14px; width:26px; height:26px; border-radius:50%;
  border:none; background:rgba(0,0,0,.06); color:rgba(25,23,18,.6); font-size:13px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.modal-box__close:hover{ background:rgba(0,0,0,.12); }
.modal-box__title{ font-size:17px; margin:0 0 8px; }
.modal-box__head{ padding-right:34px; }
.modal-box__hint{ font-size:12.5px; color:rgba(25,23,18,.55); margin:0 0 16px; line-height:1.5; }
.modal-checklist{ display:flex; flex-direction:column; gap:2px; margin-bottom:18px; max-height:45vh; overflow-y:auto; }
.modal-checklist__item{
  display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:4px; cursor:pointer;
}
.modal-checklist__item:hover{ background:rgba(79,133,35,.06); }
.modal-checklist__item input{ flex-shrink:0; margin:0; }
.modal-checklist__desc{ flex:1; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.modal-checklist__price{ font-family:monospace; font-size:12.5px; color:rgba(25,23,18,.6); flex-shrink:0; }
.modal-box__actions{ display:flex; justify-content:flex-end; gap:8px; }

/* ---------- Selector de tipus de feina (desplegable multiopcio amb resum) ---------- */
.job-type-select{ position:relative; }
.job-type-select__trigger{
  display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  padding:8px 10px; border:1px solid rgba(0,0,0,.18); border-radius:8px; background:#fff;
  font-family:inherit; font-size:13px; text-align:left; cursor:pointer; color:var(--grafit);
}
.job-type-select__trigger:hover{ border-color:var(--linia); }
.job-type-select.is-open .job-type-select__trigger{ border-color:var(--linia); box-shadow:0 0 0 1px var(--linia); }
.job-type-select__summary{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(25,23,18,.45); }
.job-type-select__summary.has-value{ color:var(--grafit); }
.job-type-select__caret{ font-size:10px; color:rgba(25,23,18,.4); flex-shrink:0; transition:transform .15s ease; }
.job-type-select.is-open .job-type-select__caret{ transform:rotate(180deg); }
.job-type-select__panel{
  display:none; position:absolute; z-index:70; top:calc(100% + 4px); left:0; right:0;
  background:#fff; border:1px solid var(--border); border-radius:10px;
  box-shadow:0 12px 28px rgba(15,17,9,.14); max-height:190px; overflow-y:auto; padding:6px;
}
.job-type-select.is-open .job-type-select__panel{ display:block; }
.job-type-select__panel .job-type-select__option{
  display:flex !important; align-items:center; gap:10px; padding:7px 8px; border-radius:3px;
  font-family:inherit; font-size:12px; text-transform:none; letter-spacing:normal;
  color:var(--grafit); margin-bottom:0; cursor:pointer;
}
.job-type-select__option:hover{ background:rgba(79,133,35,.07); }
.job-type-select__option input{ margin:0; flex-shrink:0; width:14px; height:14px; }
.job-type-select__dot{ display:inline-block; width:12px; height:12px; border-radius:50%; flex-shrink:0; margin-left:2px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }
/* ---------- Planning (calendari, FullCalendar) ---------- */
.cal-legend{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:20px; }
.cal-legend__item{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:rgba(25,23,18,.6); }
.cal-legend__dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }

#planning-calendar{
  font-family:inherit; font-size:13px;
  background:var(--papel); border:1px solid rgba(0,0,0,.06); border-radius:18px;
  padding:20px; box-shadow:0 1px 3px rgba(13,17,8,.05);
}
#planning-calendar .fc{
  --fc-border-color:rgba(0,0,0,.07);
  --fc-today-bg-color:rgba(79,133,35,.07);
  --fc-page-bg-color:transparent;
  --fc-neutral-bg-color:var(--papel);
}

/* ---- Barra d'eines: botons blancs amb vora, no el rectangle fosc pla d'abans ---- */
#planning-calendar .fc-header-toolbar{ margin-bottom:18px; flex-wrap:wrap; gap:10px; }
#planning-calendar .fc-button{
  background:#fff; border:1px solid rgba(0,0,0,.14); color:var(--grafit);
  font-family:inherit; font-size:12.5px; font-weight:600;
  padding:6px 13px; border-radius:8px; box-shadow:none !important; transition:all .12s ease;
}
#planning-calendar .fc-button:hover{ background:rgba(79,133,35,.08); border-color:var(--linia); color:var(--linia); }
#planning-calendar .fc-button:focus{ box-shadow:0 0 0 2px rgba(79,133,35,.25) !important; }
#planning-calendar .fc-button-primary:not(:disabled).fc-button-active,
#planning-calendar .fc-button-active{ background:var(--linia) !important; border-color:var(--linia) !important; color:#fff !important; }
#planning-calendar .fc-button-group{ gap:1px; }
#planning-calendar .fc-toolbar-title{ font-family:inherit; font-size:16.5px; font-weight:700; text-transform:capitalize; color:var(--grafit); }

/* ---- Capçalera de dies i cel·les ---- */
#planning-calendar .fc-col-header-cell{ background:rgba(79,133,35,.05); }
#planning-calendar .fc-col-header-cell-cushion{
  font-family:inherit; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:rgba(25,23,18,.5); text-decoration:none; padding:6px 4px;
}
#planning-calendar .fc-daygrid-day-frame{ padding:2px; }
#planning-calendar .fc-daygrid-day-number{
  font-family:inherit; font-size:11.5px; font-weight:600; color:rgba(25,23,18,.6); text-decoration:none;
  padding:5px 6px; display:inline-block; font-variant-numeric:tabular-nums;
}
#planning-calendar .fc-day-other .fc-daygrid-day-number{ color:rgba(25,23,18,.28); }
#planning-calendar .fc-day-other{ background:rgba(0,0,0,.012); }
#planning-calendar td.fc-day-sat, #planning-calendar td.fc-day-sun{ background:rgba(232,130,43,.035); }
#planning-calendar .fc-day-today{ background:rgba(79,133,35,.07) !important; }
#planning-calendar .fc-day-today .fc-daygrid-day-number{
  background:var(--linia); color:#fff; font-weight:700; border-radius:50%;
  width:22px; height:22px; line-height:22px; padding:0; text-align:center; margin:3px 4px 0 0;
}

/* ---- Pastilles d'esdeveniment: cantonades arrodonides + ombra + hover ---- */
#planning-calendar .fc-daygrid-event{
  border-radius:6px; padding:2px 6px; margin:1px 3px 2px; border:none !important;
  box-shadow:0 1px 2px rgba(13,17,8,.1); transition:transform .12s ease, box-shadow .12s ease;
}
#planning-calendar .fc-daygrid-event:hover{ transform:translateY(-1px); box-shadow:0 3px 8px rgba(13,17,8,.18); }
#planning-calendar .fc-timegrid-event{ border-radius:6px; border:none !important; box-shadow:0 1px 3px rgba(13,17,8,.12); }
#planning-calendar .fc-daygrid-more-link{ font-size:10px; font-weight:600; color:rgba(25,23,18,.5); }
#planning-calendar .fc-event-title{ font-weight:600; font-size:11px; }

/* ---- Vista de llista ---- */
#planning-calendar .fc-list-day-cushion{ background:rgba(79,133,35,.06) !important; }
#planning-calendar .fc-list-day-text, #planning-calendar .fc-list-day-side-text{
  font-family:inherit; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; text-decoration:none;
}
#planning-calendar .fc-list-event:hover td{ background:rgba(79,133,35,.05) !important; cursor:pointer; }
#planning-calendar .fc-list-event-dot{ border-width:5px; }

/* ---- Popover de previsualitzacio d'un esdeveniment (en lloc de modal) ---- */
.cal-popover{
  position:fixed; width:280px; background:var(--papel); border:1px solid var(--border);
  border-radius:12px; box-shadow:0 16px 40px rgba(15,17,9,.22); padding:14px 16px; z-index:220;
}
.cal-popover::before{
  content:""; position:absolute; width:12px; height:12px; background:var(--papel);
  border:1px solid var(--border); top:18px;
}
.cal-popover--left::before{ left:-7px; border-right:none; border-bottom:none; transform:rotate(45deg); }
.cal-popover--right::before{ right:-7px; border-left:none; border-top:none; transform:rotate(45deg); }
.cal-popover--none::before{ display:none; }
.cal-popover .modal-box__head{ padding-right:0; }

#planning-calendar .fc-ev-done{ text-decoration:line-through; opacity:.55; }
#planning-calendar .fc-ev-cancelled{ text-decoration:line-through; opacity:.4; }
#planning-calendar .fc-ev-title-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- Boto de menu mobil (nomes visible en pantalla petita) ---------- */
.mobile-nav-toggle{
  display:none; position:fixed; top:14px; left:14px; z-index:120;
  width:40px; height:40px; border-radius:6px; border:none; cursor:pointer;
  background:var(--abisme); box-shadow:0 2px 10px rgba(0,0,0,.25);
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.mobile-nav-toggle__bar{ width:19px; height:2px; background:#fff; border-radius:2px; }
.sidebar-backdrop{
  display:none; position:fixed; inset:0; background:rgba(15,14,10,.5); z-index:105;
}
.sidebar-backdrop.is-open{ display:block; }

@media (max-width:840px){
  .mobile-nav-toggle{ display:flex; }
  .layout{ flex-direction:column; }
  .sidebar{
    position:fixed; top:0; left:0; bottom:0; z-index:500;
    width:270px; max-width:82vw; height:100vh;
    transform:translateX(-100%); transition:transform .22s ease;
    overflow-y:auto;
  }
  .sidebar.is-open{ transform:translateX(0); }
  .sidebar__rail{ align-items:stretch; padding:60px 12px 12px; }
  .sidebar__nav{ align-items:stretch; }
  .sidebar__logo{ display:none; }
  .navbtn-wrap{ display:block; width:auto; }
  .navbtn{
    width:100%; height:auto; justify-content:flex-start; text-align:left;
    padding:11px 12px; border-radius:9px; gap:10px;
  }
  .navbtn__label{ display:inline; font-size:13.5px; font-weight:600; white-space:normal; }
  .navbtn__count{ position:static; margin-left:auto; }
  .navbtn::after{ display:none; } /* etiqueta ja visible inline -- no cal tooltip */
  .navbtn__chevron{ display:block; margin-left:auto; flex:none; transition:transform .15s ease; transform:rotate(-90deg); }
  .navbtn-wrap.is-open .navbtn__chevron{ transform:rotate(0deg); }
  .flyout{
    display:none; position:static; box-shadow:none; background:transparent;
    padding:2px 0 6px 34px; margin:0; min-width:0; border-radius:0;
  }
  .flyout.is-open{ display:block; }
  .flyout__title{ display:none; }
  .flyout a{ color:rgba(255,255,255,.7); padding:8px 10px; margin-bottom:2px; }
  .flyout a:hover{ background:rgba(255,255,255,.08); color:#fff; }
  .flyout a.is-active{ background:var(--linia); color:#fff; }
  .sidebar__bottom{ align-items:stretch; }
  .sidebar__user{ flex-direction:row; align-items:center; justify-content:space-between; padding:14px 12px; }
  .sidebar__user-id{ display:block; min-width:0; overflow:hidden; }
  .sidebar__user-id b{ display:block; font-size:13px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sidebar__user-id span{ display:block; font-size:11px; color:rgba(255,255,255,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sidebar__logout{ width:auto; height:auto; padding:8px; flex:none; }
  .container{ padding:70px 16px 60px; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .form-grid, .form-grid--3, .form-grid--client-wide{ grid-template-columns:1fr; }
  .inv-lines-head{ display:none; }
  .inv-line{ grid-template-columns:1fr 1fr 1fr; gap:10px 8px; }
  .inv-line__desc{ grid-column:1 / -1; }
  .inv-line__field{ min-width:0; }
  .inv-line__mobile-label{ display:block; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:rgba(25,23,18,.5); margin-bottom:3px; }
  .inv-line__total{ text-align:left; padding-top:11px; grid-column:1 / -1; }
  .inv-line__total-label{ display:inline; color:rgba(25,23,18,.5); font-weight:400; }
  /* Files de llistat (certificacions, factures, clients...): en mobil
     s'apilen en lloc de quedar en una sola fila, que feia que
     .row__side (data/estat/accions) es superposes al text del titol. */
  .row{ flex-wrap:wrap; }
  .row__title{ flex-basis:100%; }
  .row__side{ flex-basis:100%; justify-content:flex-start; margin-top:6px; flex-wrap:wrap; }

  /* Certificacions: la descripcio surt al costat del nom en lloc de
     dins de la linia de metadades (que ja te client/tipus/marca/etc). */
  .row__desc-inline{ display:inline; font-weight:400; color:rgba(25,23,18,.55); }
  .row__meta-desc{ display:none; }
}

/* ---------- Impressio ---------- */
@media print{
  .no-print{ display:none !important; }
  body{ background:#fff; }
  .invoice-doc{ border:none; padding:0; }
  .container{ padding:0; }
}

/* ---------- Panell de progres de pujada d'arxius (estil Gmail) ---------- */
.upload-panel{
  position:fixed; right:20px; bottom:20px; z-index:300; width:300px;
  background:#fff; border-radius:14px; box-shadow:0 8px 30px rgba(0,0,0,.25);
  overflow:hidden; font-size:13px;
}
.upload-panel__head{
  background:var(--abisme); color:#fff; padding:10px 14px; font-weight:600; font-size:12.5px;
}
.upload-panel__list{ max-height:220px; overflow-y:auto; }
.upload-panel__item{
  display:flex; align-items:center; gap:8px; padding:8px 14px; border-bottom:1px solid rgba(0,0,0,.05);
}
.upload-panel__name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.upload-panel__spinner{
  width:14px; height:14px; border-radius:50%; border:2px solid rgba(0,0,0,.15); border-top-color:var(--linia);
  animation:upload-spin .7s linear infinite; flex-shrink:0;
}
.upload-panel__icon{ flex-shrink:0; font-size:13px; }
.upload-panel__item[data-status="done"] .upload-panel__icon{ color:var(--linia); }
.upload-panel__item[data-status="error"] .upload-panel__icon{ color:var(--danger); }
.upload-panel__bar{ height:3px; background:rgba(0,0,0,.08); }
.upload-panel__bar-fill{ height:100%; width:0%; background:var(--linia); transition:width .2s; }
@keyframes upload-spin{ to{ transform:rotate(360deg); } }

/* ==========================================================================
   MODE OBRA / MOBIL -- arees de toc mes grans
   Pensat per fer servir el panell amb el mobil a la ma (o amb guants) a
   peu d'obra: qualsevol cosa clicable passa a tenir com a minim 44px
   d'alcada, que es la mida minima recomanada per a un dit. Nomes
   s'aplica en pantalles tactils petites -- a l'ordinador tot queda
   exactament igual que ara.
   ========================================================================== */
@media (max-width:840px) and (pointer:coarse){
  .btn{ padding:13px 22px; font-size:13px; }
  .btn--sm{ padding:11px 16px; font-size:12.5px; }

  /* Els botons de nomes icona (⋮, ✕, 📲...) han de ser quadrats i grossos */
  .dropdown-menu__trigger{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  .dropdown-menu__item{ padding:13px 16px; font-size:13.5px; }

  /* Checkboxes i radios molt mes grans (accions en lot, checklists...) */
  input[type="checkbox"], input[type="radio"]{ width:22px; height:22px; }

  /* Camps de formulari: 16px evita que l'iPhone faci zoom automatic en
     tocar-los, que es molt molest omplint formularis llargs */
  input[type="text"], input[type="number"], input[type="date"], input[type="email"],
  input[type="tel"], input[type="password"], input[type="search"], select, textarea{
    font-size:16px; padding:12px 12px; min-height:46px;
  }

  /* Files de llista: mes altes i amb mes separacio entre elements */
  .row{ padding-top:15px; padding-bottom:15px; }
  .row__side{ gap:12px; }

  /* Pestanyes i sub-pestanyes mes facils d'encertar */
  .tab-btn, .subtab-btn{ padding:14px 16px; }

  /* Enllacos petits dins de llistes (📲, ✎...) amb area de toc ampliada */
  .row a[title], .row__side a{ min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; }
}

/* Ajuda de dreceres de teclat (tecla "?") */
#shortcuts-help{
  position:fixed; inset:0; background:rgba(13,17,8,.55); z-index:3000;
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.shortcuts-help__box{
  background:#fff; border-radius:14px; padding:22px 24px; max-width:340px; width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.shortcuts-help__title{ font-size:14px; font-weight:700; margin:0 0 14px; }
.shortcuts-help__row{ display:flex; align-items:center; gap:10px; margin-bottom:9px; font-size:12.5px; }
.shortcuts-help__row span{ color:rgba(25,23,18,.6); }
.shortcuts-help__row kbd{
  font-family: ui-monospace, monospace; font-size:11px; background:var(--fons, #F5F4EE);
  border:1px solid var(--line, #E3E1D8); border-bottom-width:2px; border-radius:5px;
  padding:2px 6px; min-width:20px; text-align:center;
}

/* Snapshot del client (en passar el ratoli pel seu nom) */
#client-snapshot{
  position:fixed; z-index:2500; background:#fff; border:1px solid var(--line, #E3E1D8);
  border-radius:12px; padding:14px 16px; min-width:230px; max-width:300px;
  box-shadow:0 12px 32px rgba(13,17,8,.18); pointer-events:none;
  opacity:0; transform:translateY(-4px); transition:opacity .12s ease, transform .12s ease;
}
#client-snapshot.is-in{ opacity:1; transform:translateY(0); }
.client-snapshot__name{ font-size:13.5px; font-weight:700; margin:0 0 3px; }
.client-snapshot__meta{ font-size:11.5px; color:rgba(25,23,18,.55); margin:0 0 10px; }
.client-snapshot__stats{ display:flex; gap:16px; flex-wrap:wrap; }
.client-snapshot__stats div{ display:flex; flex-direction:column; gap:1px; }
.client-snapshot__stats b{ font-size:15px; font-weight:700; }
.client-snapshot__stats b.is-alert{ color:var(--senyal, #E8822B); }
.client-snapshot__stats span{ font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; color:rgba(25,23,18,.45); }

/* ---------- Grafics (bootstrap.php: render_ranking_chart / render_timeseries_chart / render_status_bars / chart_svg_grouped_vbar) ---------- */
.charts-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.charts-grid .card--wide{ grid-column:1/-1; }
@media (max-width:900px){ .charts-grid{ grid-template-columns:1fr; } }

.cchart{ position:relative; }
.cchart-svg{ display:block; width:100%; height:auto; overflow:visible; }
.cchart-svg text{ fill:var(--grafit); font-family:inherit; }
.cchart-svg text.cchart-muted{ fill:rgba(25,23,18,.5); }
.cgrid-line{ stroke:rgba(0,0,0,.1); stroke-width:1; }

.chit{ cursor:pointer; }
.chit:focus{ outline:2px solid var(--linia); outline-offset:2px; border-radius:2px; }
.status-bar.chit:focus{ outline-offset:0; }

.ctooltip{
  position:fixed; z-index:2600; background:var(--grafit); color:#fff; font-size:11.5px;
  padding:6px 9px; border-radius:6px; pointer-events:none; opacity:0; transform:translate(-50%,-100%);
  transition:opacity .08s ease; white-space:nowrap; box-shadow:0 10px 26px rgba(13,17,8,.3);
}
.ctooltip.is-visible{ opacity:1; }
.ctooltip b{ font-weight:600; }

.chart-view-switch{ display:inline-flex; background:rgba(0,0,0,.05); border-radius:8px; padding:2px; gap:2px; margin-bottom:12px; }
.chart-view-btn{
  border:none; background:none; padding:6px 12px; border-radius:6px; font-size:12px; font-weight:600;
  color:rgba(25,23,18,.55); cursor:pointer; font-family:inherit;
}
.chart-view-btn.is-active{ background:#fff; color:var(--grafit); box-shadow:0 1px 2px rgba(15,17,9,.08); }

.chart-card__foot{ display:flex; justify-content:flex-end; margin-top:10px; }
.chart-table-toggle{
  font-size:11.5px; color:rgba(25,23,18,.5); background:none; border:none; cursor:pointer;
  text-decoration:underline; text-decoration-color:rgba(0,0,0,.15); font-family:inherit;
}
.chart-table-toggle:hover{ color:var(--grafit); }

.chart-table{ width:100%; border-collapse:collapse; font-size:12.5px; margin-top:10px; }
.chart-table th{ text-align:left; font-weight:700; color:rgba(25,23,18,.55); padding:6px 8px; border-bottom:1px solid rgba(0,0,0,.08); font-size:11px; }
.chart-table td{ padding:6px 8px; border-bottom:1px solid rgba(0,0,0,.06); }
.chart-table tr:last-child td{ border-bottom:none; }

.chart-legend{ display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; }
.chart-legend__item{ display:flex; align-items:center; gap:6px; font-size:12px; color:rgba(25,23,18,.65); }
.chart-legend__item--full{ width:100%; padding:3px 0; }
.chart-legend__swatch{ width:10px; height:10px; border-radius:3px; flex:none; }

.status-bars{ display:flex; flex-direction:column; gap:14px; }
.status-bar{ display:flex; align-items:center; gap:10px; }
.status-bar__label{ font-size:12.5px; width:96px; flex:none; }
.status-bar__track{ flex:1; background:rgba(0,0,0,.05); border-radius:5px; height:20px; overflow:hidden; }
.status-bar__fill{ height:100%; border-radius:5px; }
.status-bar__value{ font-size:12.5px; font-weight:700; width:30px; text-align:right; flex:none; }

/* ---------- Zona d'arrossegar i deixar anar (assets/js/dropzone.js, aplicat automaticament a tot input type=file) ---------- */
.dropzone{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-height:52px; border:1.5px dashed rgba(25,23,18,.16); border-radius:10px;
  background:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
    repeating-linear-gradient(135deg, rgba(25,23,18,.015) 0 10px, rgba(25,23,18,.03) 10px 20px);
  padding:8px 12px; cursor:pointer; text-align:center; overflow:hidden;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.dropzone::before{
  content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  box-shadow:inset 0 0 0 0 rgba(79,133,35,0); transition:box-shadow .15s ease;
}
.dropzone:hover{ border-color:rgba(79,133,35,.55); background-color:rgba(79,133,35,.035); }
.dropzone.is-dragover{
  border-color:var(--linia); background-color:rgba(79,133,35,.09);
  transform:scale(1.012);
}
.dropzone.is-dragover::before{ box-shadow:inset 0 0 0 2px rgba(79,133,35,.35); }
.dropzone.has-files{
  border-style:solid; border-color:rgba(79,133,35,.3);
  background-color:rgba(79,133,35,.04);
  background-image:none;
}
.dropzone__label{ display:flex; flex-direction:row; align-items:center; gap:8px; pointer-events:none; }
.dropzone__icon{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:24px; height:24px; border-radius:50%;
  background:rgba(79,133,35,.1); color:var(--linia);
  transition:background .15s ease, transform .15s ease;
}
.dropzone__icon svg{ width:13px; height:13px; display:block; }
.dropzone.is-dragover .dropzone__icon{ background:rgba(79,133,35,.18); transform:translateY(-1px); }
.dropzone__text{ font-size:12px; font-weight:600; color:rgba(25,23,18,.68); }
.dropzone__hint{ font-size:10.5px; color:rgba(25,23,18,.4); }
.dropzone.has-files .dropzone__label{ display:none; }
.dropzone__files{ position:relative; z-index:2; display:none; width:100%; flex-direction:column; gap:6px; pointer-events:none; }
.dropzone.has-files .dropzone__files{ display:flex; }
.dropzone__file{
  display:flex; align-items:center; gap:7px; padding:4px 8px;
  background:var(--papel, #fff); border:1px solid rgba(79,133,35,.25); border-radius:7px;
  text-align:left; box-shadow:0 1px 2px rgba(13,17,8,.05);
}
.dropzone__file-icon{ flex:none; width:14px; height:14px; color:var(--linia); }
.dropzone__file-icon svg{ width:100%; height:100%; display:block; }
.dropzone__file-name{ flex:1; min-width:0; font-size:12px; font-weight:600; color:rgba(25,23,18,.8); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dropzone__file-size{ flex:none; font-size:11px; color:rgba(25,23,18,.45); }
.dropzone__file-remove{
  flex:none; pointer-events:auto; width:18px; height:18px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(179,64,42,.1); color:var(--danger); font-size:12px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:background .12s ease;
}
.dropzone__file-remove:hover{ background:rgba(179,64,42,.2); }
.dropzone__input.dropzone__input{
  position:absolute; z-index:1; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; margin:0; padding:0;
}