/* ============================================================
   Kloosiv-Cartesian — dashboard.css  (extret de dashboard.html)
   Paleta: Kloosiv Design System (teal #1FC2C2 + base fosca).
   ============================================================ */
  /* DM Sans AUTOALOJADA (variable, pesos 400-800): abans venia de fonts.googleapis.com
     via @import — bloquejava el primer render i queia sense xarxa (demo offline en un
     ajuntament). Fitxers a web/fonts/ (v17 de Google Fonts); Poppins s'importava i no
     s'usava enlloc → fora. Les rutes /fonts/* les serveixen el hub i el pont. */
  @font-face{
    font-family:'DM Sans';font-style:normal;font-weight:400 800;font-display:swap;
    src:url('fonts/DMSans-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }
  @font-face{
    font-family:'DM Sans';font-style:normal;font-weight:400 800;font-display:swap;
    src:url('fonts/DMSans-latin-ext.woff2') format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }
  :root{
    /* ===== Kloosiv Design System — base clara (white) ===== */
    --bg:#F9FAFB; --bg2:#F3F4F6; --surface:#FFFFFF; --surface2:#F3F4F6;
    --surface3:#E5E7EB; --line:#E5E7EB; --line2:#D1D5DB;
    --txt:#111827; --mut:#6B7280; --mut2:#9CA3AF;
    /* marca: accent teal + estats harmonitzats (foscos per a fons clar) */
    --accent:#1FC2C2; --accent-2:#17A8A8; --accent-ink:#06251f; --blue:#4F46E5; --green:#0F9D6B;
    --accent-text:#0C7A7A;  /* teal fosc llegible com a TEXT sobre fons clar (AA) */
    /* el mateix per als avisos: `.notice.ok/.err` portaven text clar de quan el tauler era fosc
       (#bdf0d0 sobre verd pàl·lid no es llegia; passada d'Alcanar, 2026-10-01) */
    --green-text:#0B6B4A; --red-text:#B42318;
    --red:#ef5350; --purple:#7C3AED; --r:14px; --r-sm:9px;
    /* variants amb alfa (única font; les regles i el JS no hardcodegen rgba) */
    --accent-soft:rgba(31,194,194,.13); --accent-softer:rgba(31,194,194,.08);
    --accent-line:rgba(31,194,194,.30); --accent-glow:rgba(31,194,194,.55);
    --blue-soft:rgba(129,140,248,.12);
    --green-soft:rgba(45,190,138,.12); --green-line:rgba(45,190,138,.30); --green-glow:rgba(45,190,138,.45);
    --red-soft:rgba(239,83,80,.12); --red-line:rgba(239,83,80,.30);
    --glow-teal:rgba(31,194,194,.10); --glow-purple:rgba(124,58,237,.06);
    --sh:0 1px 2px rgba(16,24,40,.06),0 10px 24px -14px rgba(16,24,40,.12);
    --font:'DM Sans','Inter',system-ui,'Segoe UI',Roboto,sans-serif;
    /* layout: amplada del menú lateral i alçada del header (el menú hi penja a sota) */
    --sidew:248px; --headh:57px;
  }
  *{box-sizing:border-box}
  ::-webkit-scrollbar{width:11px;height:11px}
  ::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:8px;border:3px solid transparent;background-clip:content-box}
  ::-webkit-scrollbar-thumb:hover{background:var(--line2);background-clip:content-box}
  body{margin:0;background:
    radial-gradient(1200px 600px at 80% -10%,var(--glow-teal),transparent 60%),
    radial-gradient(900px 500px at -10% 10%,var(--glow-purple),transparent 55%),
    var(--bg);color:var(--txt);font:14px/1.5 var(--font);-webkit-font-smoothing:antialiased}

  header{display:flex;align-items:center;gap:10px;padding:11px 20px;
    background:#fff;backdrop-filter:blur(12px);flex-wrap:nowrap;
    border-bottom:1px solid var(--line2);position:sticky;top:0;z-index:20}
  /* El header ha de cabre SEMPRE en UNA línia. El seu contingut natural feia
     ~1575 px: a 1440 les etiquetes es partien en dues línies, el header passava
     de 65 a 86 px i, com que el menú lateral hi penja a sota (--headh), es
     desplaçava tot. Ordre de sacrifici quan no hi cap, del menys al més
     important: subtítol → etiquetes de les píndoles d'estat → etiquetes dels
     botons secundaris → títol → «Mostrar tot» (que sense Blender no fa res).
     El que NO es redueix mai: el selector de projecte, el destí de les edicions
     (✎ realitat/escenari) i «Desar canvis» amb el seu comptador — amagar-los és
     perdre feina o desar-la al lloc equivocat. */
  header>*{flex:none}
  header button,header .pill{white-space:nowrap}
  header h1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Un <select> natiu s'amida amb l'opció més llarga: «Montesquiu — Farga de
     Bebié (farga-de-bebie)» li donava 315 px, un cinquè de la barra sencera. */
  #proj-sel{max-width:210px;min-width:0;overflow:hidden;text-overflow:ellipsis}
  /* El <select> natiu del destí d'edicions venia amb la seva alçada de widget
     (34 px) i era l'element més alt de la barra: ell sol pujava el header a 69 px
     quan la resta de controls en fan 39. */
  #targetpill select{max-width:160px;height:22px;padding:0;font-size:13px}
  @media(max-width:1450px){ header h1 small{display:none} }
  @media(max-width:1380px){ header .pill .lbl{display:none} }
  @media(max-width:1220px){ header button .lbl{display:none} }
  @media(max-width:1000px){ header h1{display:none} }
  /* Per sota d'aquesta amplada no hi ha manera de fer-hi cabre deu controls (en
     calen ~710 px i n'hi ha 375). La barra es desplaça horitzontalment ELLA
     MATEIXA en comptes d'eixamplar el document: sense això el <header> estirava
     l'amplada de la pàgina i TOT el contingut es movia de costat en scroll. */
  @media(max-width:820px){
    header{overflow-x:auto;overflow-y:hidden}
    header::-webkit-scrollbar{height:3px}
    header .req3d{display:none}
    #proj-sel{max-width:130px}
  }

  .mark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-ink);
    font-size:17px;box-shadow:0 4px 14px -4px var(--accent-glow)}
  header h1{font-size:15px;margin:0;font-weight:650;letter-spacing:-.2px}
  header h1 small{color:var(--mut);font-weight:500}
  .chip{font-size:12px;color:var(--accent-text);background:var(--accent-soft);
    border:1px solid var(--accent-line);padding:3px 10px;border-radius:20px;font-weight:600}
  .spacer{flex:1}
  .pill{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--mut);
    background:var(--surface);border:1px solid var(--line);padding:5px 11px;border-radius:20px}
  #targetpill select{font:inherit;color:var(--txt);background:transparent;border:0;cursor:pointer;outline:none}
  #targetpill.scenmode{background:var(--accent-soft);border-color:var(--accent-text);color:var(--accent-text);font-weight:600}
  #targetpill.scenmode select{color:var(--accent-text);font-weight:600}
  .dot{width:8px;height:8px;border-radius:50%;background:var(--red);transition:.3s}
  .dot.ok{background:var(--green);animation:pulse 2.4s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 var(--green-glow)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
  button{font:inherit;color:var(--txt);background:var(--surface2);border:1px solid var(--line);
    border-radius:var(--r-sm);padding:8px 13px;cursor:pointer;transition:.15s;font-weight:500;
    display:inline-flex;align-items:center;gap:7px}
  button:hover{background:var(--surface3);border-color:var(--line2);transform:translateY(-1px)}
  button:active{transform:translateY(0)}
  button.ghost{background:transparent}
  button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent-text);font-weight:650}
  button.primary:hover{filter:brightness(1.08)}
  button:disabled{opacity:.45;cursor:not-allowed;transform:none}

  /* Controls que NOMÉS tenen efecte amb un viewport 3D (Blender). En mode hub-only
     s'atenuen i es desactiven perquè els clics no es perdin en silenci. */
  body.no3d .req3d{opacity:.4;pointer-events:none;filter:grayscale(.7)}
  #viewpill{color:var(--green)} #viewpill.off{color:var(--mut2)} #viewpill .t{font-weight:600}
  /* Calaix de canvis pendents (què conté el "Desar canvis (N)"). */
  .commitwrap{position:relative;display:inline-flex;gap:0;align-items:center}
  #pending-drawer{position:absolute;top:calc(100% + 8px);right:0;width:380px;max-height:62vh;overflow:auto;
    background:var(--surface);border:1px solid var(--line2);border-radius:var(--r);box-shadow:var(--sh);padding:12px 14px;z-index:40}
  #pending-drawer h3{margin:0 0 10px;font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
  .pend-row{padding:7px 0;border-bottom:1px solid var(--line);font-size:12px;line-height:1.35}
  .pend-row:last-of-type{border-bottom:0}
  .pend-row .pred{color:var(--accent-text);font-weight:600}
  .pend-row .val{color:var(--txt)} .pend-row .subj{color:var(--mut);font-size:11px}

  /* ── Menú lateral ───────────────────────────────────────────────────────
     Substitueix la barra horitzontal amb scroll: 22 pestanyes en una sola fila
     obligaven a arrossegar-la per trobar-ne una. Ara és una columna amb grups
     desplegables i és l'ÚNICA navegació (els sub-navs de Finances i FV ja no
     existeixen: els seus ítems són ítems del menú).
     `position:fixed` + `main{margin-left}` en comptes d'un wrapper flex, perquè
     no cal tocar <main> ni les regles del mode ?view=3d. */
  nav.tabs{position:fixed;top:var(--headh);left:0;bottom:0;width:var(--sidew);z-index:19;
    display:flex;flex-direction:column;gap:2px;padding:12px 10px 28px;background:#fff;
    border-right:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:var(--line2) transparent;transition:transform .18s ease}
  nav.tabs::-webkit-scrollbar{width:6px}
  nav.tabs::-webkit-scrollbar-thumb{background:var(--line2);border:0;border-radius:5px}
  nav.tabs button{background:transparent;border:none;border-radius:var(--r-sm);
    padding:9px 11px;color:var(--mut);font-weight:600;transform:none;text-align:left;
    width:100%;justify-content:flex-start;gap:8px;line-height:1.3;flex:none}
  nav.tabs button:hover{color:var(--txt);background:var(--surface2);transform:none}
  nav.tabs button.active{color:var(--accent-text);background:var(--accent-soft);
    box-shadow:inset 3px 0 0 var(--accent-text)}
  nav.tabs .badge-n{background:var(--surface3);color:var(--mut);border-radius:20px;
    padding:0 7px;font-size:11px;margin-left:auto}
  nav.tabs button.active .badge-n{background:#fff;color:var(--accent-text)}
  /* Tres estats, tres cares. Un `0` no pot voler dir alhora «mesurat i cap»,
     «ningú ho ha decidit» i «no s'ha executat el pas»: són tres accions
     diferents. Vocabulari de src/coverage.py. */
  nav.tabs .badge-n.is-buit{background:transparent;color:var(--mut2);
    border:1px solid var(--surface3)}
  nav.tabs .badge-n.is-absent{background:transparent;color:var(--red);
    border:1px dashed var(--red)}
  /* Grups desplegables: la capçalera obre/tanca, no navega. */
  .side-group{display:flex;flex-direction:column;flex:none}
  .side-head .chev{margin-left:auto;font-size:10px;color:var(--mut2);transition:transform .18s ease}
  .side-group.open .side-head .chev{transform:rotate(90deg)}
  /* Grup tancat que conté la vista activa: es marca perquè no es perdi de vista. */
  .side-group.has-active:not(.open) .side-head{color:var(--accent-text)}
  .side-sub{display:none;flex-direction:column;gap:2px;margin:1px 0 6px 13px;
    padding-left:9px;border-left:1px solid var(--line)}
  .side-group.open .side-sub{display:flex}
  .side-sub button{font-size:13px;padding:7px 10px}
  .side-sep{height:1px;background:var(--line);margin:8px 6px;flex:none}
  #sidetoggle{padding:8px 11px;font-size:14px}
  /* Amagat: botó ☰ del header (i per defecte en pantalla estreta). */
  body.side-hidden nav.tabs{transform:translateX(-100%)}
  #sidescrim{display:none;position:fixed;inset:var(--headh) 0 0 0;
    background:rgba(16,24,40,.35);z-index:18}

  main{padding:22px 24px 60px;max-width:1560px;margin:0 auto 0 var(--sidew);transition:margin .18s ease}
  body.side-hidden main{margin-left:auto}
  /* Pantalla estreta: el menú passa a ser una capa per sobre del contingut. */
  @media (max-width:1000px){
    main{margin-left:auto}
    nav.tabs{z-index:25;box-shadow:var(--sh)}
    body:not(.side-hidden) #sidescrim{display:block;z-index:24}
  }
  section.tab{display:none}
  section.tab.active{display:block;animation:fade .25s}
  /* Rehab tab: column flex so we can reorder panels via `order` (table+detail first,
     overview charts + batch form after) without moving the HTML / breaking JS IDs. */
  section#tab-rehab.active{display:flex;flex-direction:column}
  @keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:22px}
  .card{background:linear-gradient(180deg,var(--surface),var(--bg2));border:1px solid var(--line);
    border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh);position:relative;overflow:hidden;transition:.2s}
  .card:hover{transform:translateY(-2px);border-color:var(--line2)}
  .card .ico{position:absolute;right:14px;top:14px;font-size:20px;opacity:.5}
  .card .v{font-size:30px;font-weight:750;letter-spacing:-1px;line-height:1}
  .card .l{color:var(--mut);font-size:11px;margin-top:7px;text-transform:uppercase;letter-spacing:.6px;font-weight:600}
  .card .s{color:var(--mut2);font-size:12px;margin-top:3px}
  .card .accent{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
  .card.green .accent{background:var(--green)} .card.blue .accent{background:var(--blue)}
  .card.amber .accent{background:var(--accent)}

  .grid2{display:grid;grid-template-columns:1fr 1.4fr;gap:18px;margin-bottom:20px}
  @media(max-width:960px){.grid2{grid-template-columns:1fr}}
  .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
    padding:18px 20px;box-shadow:var(--sh)}
  .panel h2{margin:0 0 16px;font-size:12px;color:var(--mut);text-transform:uppercase;
    letter-spacing:.7px;font-weight:700;display:flex;align-items:center;gap:8px}
  .panel h2 .c{margin-left:auto;color:var(--mut2);font-weight:600;text-transform:none;letter-spacing:0}
  .legend{display:flex;flex-direction:column;gap:8px}
  .legend span{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mut)}
  .legend b{color:var(--txt);font-weight:600;margin-left:auto;font-variant-numeric:tabular-nums}
  .sw{width:11px;height:11px;border-radius:3px;flex:none}
  .bars{display:flex;flex-direction:column;gap:10px}
  .bar{display:grid;grid-template-columns:140px 1fr 54px;align-items:center;gap:12px;font-size:13px}
  .bar .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize}
  .bar .lbl small{color:var(--mut2);text-transform:none}
  .bar .track{height:20px;background:var(--surface3);border-radius:6px;overflow:hidden}
  .bar .fill{height:100%;border-radius:6px;width:0;transition:width .7s cubic-bezier(.2,.8,.2,1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
  .bar .n{text-align:right;color:var(--mut);font-variant-numeric:tabular-nums;font-weight:600}
  .bar.click{cursor:pointer;border-radius:7px;padding:1px 2px}
  .bar.click:hover{background:var(--surface2)}

  .toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
  .toolbar .grp{display:flex;align-items:center;gap:8px;background:var(--surface);
    border:1px solid var(--line);border-radius:11px;padding:6px 10px;box-shadow:var(--sh)}
  .toolbar .grp>b{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:700}
  .seg{display:inline-flex;background:var(--surface2);border-radius:8px;padding:2px;gap:2px}
  .seg button{background:transparent;border:none;padding:6px 12px;border-radius:7px;font-size:13px}
  .seg button:hover{background:var(--surface3);transform:none}
  .seg button.active{background:var(--accent);color:var(--accent-ink);font-weight:650}
  input,select,textarea{background:var(--surface);border:1px solid var(--line);border-radius:9px;
    color:var(--txt);padding:8px 12px;font:inherit;outline:none;transition:.15s}
  input:focus,select:focus,textarea:focus{border-color:var(--accent-text);box-shadow:0 0 0 3px var(--accent-soft)}
  input[type=search]{min-width:240px}
  label.ck{display:inline-flex;align-items:center;gap:8px;cursor:pointer}

  .tablewrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
    overflow:auto;max-height:62vh;box-shadow:var(--sh)}
  table{width:100%;border-collapse:separate;border-spacing:0}
  th,td{padding:10px 14px;text-align:left;font-variant-numeric:tabular-nums;white-space:nowrap}
  thead th{background:var(--surface2);color:var(--mut);font-size:11px;text-transform:uppercase;
    letter-spacing:.5px;font-weight:700;cursor:pointer;user-select:none;position:sticky;top:0;z-index:2;border-bottom:1px solid var(--line)}
  th:hover{color:var(--txt)} th .arr{opacity:0;font-size:10px;margin-left:3px} th.sorted .arr{opacity:1}
  td.num,th.num{text-align:right}
  tbody td{border-bottom:1px solid var(--line);font-size:13px}
  tbody tr{cursor:pointer;transition:background .1s}
  tbody tr:nth-child(even) td{background:rgba(17,24,39,.022)}
  tbody tr:hover td{background:var(--surface2)}
  /* Selecció (sincronitzada amb el 3D): teal ben visible perquè es vegi a cop d'ull. */
  tbody tr.msel td{background:rgba(31,194,194,.20)}
  tbody tr.msel td:first-child{box-shadow:inset 4px 0 0 var(--accent)}
  tbody tr.sel td{background:rgba(31,194,194,.30)}                          /* la primària, més marcada */
  tbody tr.sel td:first-child{box-shadow:inset 4px 0 0 var(--accent)}
  .badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:12px;font-weight:650;color:#0e130b}
  .pri{display:inline-flex;align-items:center;gap:7px} .pri .sw{border-radius:50%}
  .role{font-size:11px;color:var(--accent-text);background:var(--accent-softer);border:1px solid var(--accent-line);border-radius:6px;padding:1px 7px;font-weight:600}
  .role.committed{color:var(--green);background:var(--green-soft);border-color:var(--green-line)}
  .role.pending{border-style:dashed}
  .muted{color:var(--mut2)}
  .foot{margin-top:14px;color:var(--mut2);font-size:12px;display:flex;gap:8px;align-items:center}
  .donutwrap{display:flex;align-items:center;gap:24px}
  .donutwrap svg{flex:none;filter:drop-shadow(0 6px 14px rgba(16,24,40,.14))}
  .donut-center{font-size:12px;fill:var(--mut)} .donut-total{font-size:30px;font-weight:750;fill:var(--txt)}

  /* Forms / studies / intervention */
  .field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
  .field label{font-size:12px;color:var(--mut);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
  .row{display:flex;gap:14px;flex-wrap:wrap}
  .row .field{flex:1;min-width:180px}
  .selectlist{max-height:50vh;overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
  .selectlist .it{display:grid;grid-template-columns:24px 60px 1fr 80px 90px;gap:10px;align-items:center;
    padding:8px 12px;border-bottom:1px solid var(--line);font-size:13px;cursor:pointer}
  .selectlist .it:hover{background:var(--surface2)}
  .selectlist .it.on{background:var(--accent-softer)}
  .study{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:12px;box-shadow:var(--sh)}
  .study h3{margin:0 0 6px;font-size:16px;display:flex;align-items:center;gap:10px}
  .study .kv{display:flex;flex-wrap:wrap;gap:18px;color:var(--mut);font-size:13px;margin-bottom:8px}
  .study .kv b{color:var(--txt)}
  .study .big{color:var(--accent-text);font-size:20px;font-weight:750}
  details{margin-top:8px} summary{cursor:pointer;color:var(--mut);font-size:13px}
  details pre{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:12px;
    overflow:auto;font-size:12px;line-height:1.5;color:var(--txt);max-height:320px}
  .notice{padding:12px 14px;border-radius:10px;font-size:13px;margin-bottom:12px}
  .notice.ok{background:var(--green-soft);border:1px solid var(--green-line);color:var(--green-text)}
  .notice.err{background:var(--red-soft);border:1px solid var(--red-line);color:var(--red-text)}
  .prose{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px 26px;box-shadow:var(--sh)}
  .prose h3{color:var(--accent-text);margin:22px 0 8px;font-size:18px}
  .prose h4{color:var(--blue);margin:18px 0 6px;font-size:15px}
  .prose li{margin:3px 0;color:var(--mut)} .prose p{color:var(--mut)}
  .prose strong{color:var(--txt)} .prose code{background:var(--bg);padding:1px 6px;border-radius:5px;font-size:12px}
  .skeleton{opacity:.4;pointer-events:none}
  /* A11y: visible focus ring for keyboard users (mouse clicks keep the clean look). */
  button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
      transition-duration:.001ms!important;scroll-behavior:auto!important}
  }
  /* Fila sentinella de les taules per trams (veure lazyRows a dashboard.js): diu
     quantes files queden i és el que l'IntersectionObserver vigila per pintar-ne més. */
  tbody tr.lazy-more td,div.lazy-more{text-align:center;color:var(--mut2);font-size:12px;
    padding:12px 10px;font-style:italic;background:var(--surface2)}
  div.lazy-more{display:block;border-top:1px solid var(--line)}

  /* Expandable building rows → sublocs (BuildingParts) */
  .exp{cursor:pointer;color:var(--mut);user-select:none;display:inline-block;width:12px;text-align:center}
  .exp:hover{color:var(--txt)}
  tr.detail>td{background:var(--bg2);padding:4px 10px 10px 28px;border-bottom:1px solid var(--line)}
  table.subtbl{width:100%;border-collapse:collapse;font-size:12px}
  table.subtbl th{text-align:left;color:var(--mut);font-weight:500;padding:3px 8px;border-bottom:1px solid var(--line)}
  table.subtbl td{padding:3px 8px;border-bottom:1px solid var(--line)}
  table.subtbl tr:last-child td{border-bottom:none}
  .subtools{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
  .subtools input{padding:4px 8px;background:var(--surface);border:1px solid var(--line);
    border-radius:6px;color:var(--txt);min-width:160px}
  .subtools button{padding:4px 10px;font-size:12px}

  /* ── Plànols: anotador de parets/portes/finestres ── */
  .pl-wall{color:#DC2626} .pl-door{color:#2563EB} .pl-window{color:#16A34A} .pl-partition{color:#F59E0B}
  .pl-lg{font-weight:700}
  .pl-dot{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
  i.pl-dot.pl-wall{background:#DC2626} i.pl-dot.pl-door{background:#2563EB} i.pl-dot.pl-window{background:#16A34A} i.pl-dot.pl-partition{background:#F59E0B}
  .pl-cls.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text);font-weight:600}
  .pl-k{display:inline-block;margin-left:5px;padding:0 4px;font:600 10px/1.5 ui-monospace,monospace;
    background:rgba(127,127,127,.18);border:1px solid rgba(127,127,127,.35);border-radius:3px;color:var(--mut);vertical-align:1px}
  .pl-ec.active .pl-k{background:var(--accent);border-color:var(--accent);color:#fff}
  .pl-floorpick{display:inline-flex;gap:3px;align-items:center}
  .pl-fl{min-width:30px;padding:2px 7px;font-size:12px;font-weight:600;cursor:pointer;
    border:1px solid var(--bd);border-radius:5px;background:var(--card,#141b24);color:var(--mut)}
  .pl-fl:hover{border-color:var(--accent)}
  .pl-fl.active{background:var(--accent-soft,#123);border-color:var(--accent);color:var(--accent-text,#7fe)}
  .pl-fl.other{border-style:dashed;opacity:.7}
  .pl-fladd{border-style:dashed;color:var(--mut);font-weight:400;opacity:.75}
  .pl-fladd:hover{opacity:1}
  .mvfl{padding:2px 8px;font-size:11px;font-weight:600;cursor:pointer;border:1px solid var(--bd);
    border-radius:5px;background:var(--card,#141b24);color:var(--fg)}
  .mvfl:hover{border-color:var(--accent)}
  .mvfl.off{opacity:.4;text-decoration:line-through;color:var(--mut)}
  #pl-giros .pl-g{padding:3px 9px;font-weight:600}
  #pl-giros .pl-g.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text)}
  #pl-stype .pl-st{padding:3px 9px;font-weight:600}
  #pl-stype .pl-st.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text)}
  .pl-sp{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:var(--r-sm);
    padding:1px 3px;background:var(--surface2);font-size:11px}
  .pl-sp b{padding:0 3px;font-weight:600;min-width:42px;text-align:center}
  .pl-sp button{padding:1px 6px;font-size:12px;line-height:1;border-radius:4px;background:var(--surface);transform:none}
  .pl-sp button:hover{background:var(--surface3);transform:none}
  .pl-sp.bad{border-color:var(--red);background:var(--red-soft)}
  .pl-sp.bad b{color:var(--red)}
  #pl-stage{background:#0f1720;
    background-image:linear-gradient(#18232f 1px,transparent 1px),linear-gradient(90deg,#18232f 1px,transparent 1px);
    background-size:22px 22px}
  #pl-cv{position:absolute;top:0;left:0;cursor:crosshair}
  .pl-row{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;font-size:12px;cursor:pointer}
  .pl-row:hover{background:var(--surface2)}
  .pl-row.sel{background:var(--accent-soft);outline:1px solid var(--accent-line)}
  .pl-row .sw{width:10px;height:10px;border-radius:2px;flex:none}
  .pl-row .t{flex:1;color:var(--mut);font-variant-numeric:tabular-nums}
  .pl-row .x{opacity:.45;padding:0 3px} .pl-row .x:hover{opacity:1;color:#DC2626}

  /* ── Plànols · toolbar per zones + pipeline popover ─────────────────────── */
  .toolbar.pl-zones{align-items:stretch;gap:0;flex-wrap:wrap}
  .pl-zone{display:flex;flex-direction:column;gap:5px;padding:3px 13px;position:relative;justify-content:center}
  .pl-zone + .pl-zone::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:1px;background:var(--line2)}
  .pl-zlabel{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--mut2);white-space:nowrap;line-height:1}
  .pl-zrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .pl-zone.gen{background:var(--accent-soft);border-radius:9px}
  .pl-zone.gen + .pl-zone::before,.pl-zone.gen::before{display:none}
  .pl-zone.gen .pl-zlabel{color:var(--accent-text)}
  .pl-pop{position:absolute;z-index:50;top:100%;right:0;margin-top:8px;width:360px;background:var(--surface);
    border:1px solid var(--line2);border-radius:12px;box-shadow:var(--sh);padding:10px 14px 14px}
  .pl-pop-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);
    padding:4px 0 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
  .pl-step{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:9px 0;
    border-bottom:1px solid var(--line);cursor:pointer;margin:0}
  .pl-step:last-child{border-bottom:0}
  .pl-step input[type=checkbox]{margin-top:3px;accent-color:var(--accent);width:15px;height:15px}
  .pl-step.muted-row{cursor:default;color:var(--mut)}
  .pl-step .s-b{font-weight:600;font-size:13px;color:var(--txt)}
  .pl-step .s-p{color:var(--mut);font-size:11.5px;line-height:1.4;margin-top:1px}
  .pl-step .s-always{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
    color:var(--accent-text);background:var(--accent-soft);border-radius:5px;padding:1px 6px;margin-left:5px}
  .pl-sub{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:12px;color:var(--mut)}

  /* ── Plànols · log del build + llegenda de continuïtat ───────────────────── */
  .pl-log{margin:8px 14px 0;padding:11px 13px;background:var(--surface2);border:1px solid var(--line);
    border-radius:var(--r-sm);color:var(--mut);font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    white-space:pre-wrap;max-height:200px;overflow:auto}
  .pl-contleg{display:inline-flex;align-items:center;gap:14px;font-size:12px;color:var(--txt);
    background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:20px;padding:4px 13px;align-self:center}
  .pl-contleg .pl-dot{width:11px;height:4px;border-radius:2px;margin-right:5px;vertical-align:middle}
  #pl-gstatus a,#pl-gstatus .lnk{color:var(--accent-text);cursor:pointer;text-decoration:none;font-weight:600}
  #pl-gstatus a:hover,#pl-gstatus .lnk:hover{text-decoration:underline}

  /* ── Plànols · variants (mateixa geometria, altres classes de mur) ────────── */
  .pl-vb{font-size:12px;padding:5px 9px}
  .pl-vb.active{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-text);font-weight:700}
  .pl-vb b{font-weight:700} .pl-vb .muted{font-size:10px}

  /* Entresòl (½ nivell) al selector de plantes: més estret i tènue que una planta sencera */
  .pl-fl.pl-flhalf{min-width:20px;padding:2px 4px;color:var(--mut);font-weight:700;opacity:.8}
  .pl-fl.pl-flhalf.active{color:var(--accent-text);opacity:1}

  /* ── Tab PROJECTE (setup: àrea GPS + pipeline + estat) ─────────────────────── */
  .scope-form{display:flex;flex-direction:column;gap:8px}
  .scope-row{display:flex;align-items:center;gap:8px}
  .scope-row .scope-lbl{width:34px;font-weight:700;color:var(--accent-text);font-size:12px}
  .scope-row input{flex:1;min-width:0;font:inherit;color:var(--txt);background:var(--surface2);
    border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 9px}
  .scope-row input:focus{outline:none;border-color:var(--accent-text);background:var(--surface)}
  /* mapa: assegura que Leaflet no tapi el header sticky ni els popovers del dashboard */
  #scope-map{background:var(--surface2)} #scope-map .leaflet-top,#scope-map .leaflet-bottom{z-index:400}
  /* TOTS els mapes: Leaflet posa panells i controls a z-index 400-1000, i sense
     un context d'apilament propi es pintaven per sobre del header sticky (20) i
     del menú lateral en pantalla estreta (25). Així els seus z-index queden
     tancats dins del mapa. */
  .leaflet-container{isolation:isolate}
  /* barra de progrés del pipeline */
  .scope-progress{height:8px;background:var(--surface3);border-radius:6px;overflow:hidden;margin:2px 0 10px}
  .scope-progress>div{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));
    border-radius:6px;transition:width .4s}
  /* log del pipeline en viu */
  .pipe-log{margin:0;max-height:340px;overflow:auto;background:#0b1220;color:#cbd5e1;
    border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;
    font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word}
  /* taula d'estat d'artefactes */
  .status-tbl{width:100%;border-collapse:collapse;font-size:13px}
  .status-tbl td{padding:7px 10px;border-bottom:1px solid var(--line)}
  .status-tbl td.st-ic{width:26px;text-align:center}
  .status-tbl td.st-info{text-align:right;white-space:nowrap;font-size:12px}
  .setup-pane .panel{margin-bottom:16px}

/* ── Accions executables des del dashboard ─────────────────────────────────
   El dashboard ensenya una vintena de `python -m src.…`. Cada `<code>` que
   coincideix amb una acció del catàleg (`/actions`) rep un botó ▶; la resta
   es queden com estaven. Vegeu `src/api/cli_actions.py`.

   ⚠️ TOT amb els tokens del sistema (`--surface`, `--line`, `--r`, `--sh`…).
   La primera versió feia `var(--panel, #151a22)` i `--panel` NO existeix en
   aquest tema: queia al color fosc de reserva i plantava una caixa negra al mig
   d'una interfície clara. Si necessites un color que no és a `:root`, el que
   falta és el token, no un hex aquí. */
button.cmd-run{
  margin-left:6px;padding:1px 8px;font-size:11px;font-weight:600;line-height:17px;
  border-radius:999px;border:1px solid var(--accent-line);
  background:var(--accent-softer);color:var(--accent-text);
  vertical-align:middle;gap:0;transition:.15s}
button.cmd-run:hover{background:var(--accent-soft);border-color:var(--accent-text);
  transform:none}
button.cmd-run:disabled{opacity:.45}

/* Consola flotant: un panell com qualsevol altre, però ancorat a baix a la
   dreta. El LOG de dins sí que és fosc — `.pipe-log` ja ho és a tot el
   dashboard i una consola clara seria l'excepció, no la norma. */
#actconsole{
  position:fixed;right:20px;bottom:20px;width:min(640px,calc(100vw - 40px));
  z-index:60;background:var(--surface);border:1px solid var(--line2);
  border-radius:var(--r);box-shadow:0 12px 32px -8px rgba(16,24,40,.22),var(--sh);
  overflow:hidden}
#actconsole .act-head{
  display:flex;align-items:center;gap:10px;padding:11px 14px;
  background:var(--surface2);border-bottom:1px solid var(--line)}
#actconsole .act-head b{flex:0 0 auto;font-size:13px;font-weight:650}
#actconsole .act-head #act-prog{
  flex:1 1 auto;min-width:0;font-size:12px;color:var(--mut);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Botons d'icona: el `button` base porta padding de botó amb text i un ✕ hi
   queda nedant enmig d'una caixa buida. */
#actconsole .act-head button{padding:4px 10px;font-size:12px}
#actconsole .act-head button.act-x{padding:4px 9px;font-weight:600;color:var(--mut)}
#actconsole .act-head button.act-x:hover{color:var(--txt)}
#actconsole #act-log{margin:0;max-height:280px;border:0;border-radius:0}

/* Diàleg de paràmetres */
#actdlg{position:fixed;inset:0;z-index:70;background:rgba(16,24,40,.38);
  backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}
#actdlg .act-dlg-box{
  width:min(520px,calc(100vw - 32px));background:var(--surface);
  border:1px solid var(--line2);border-radius:var(--r);padding:20px 22px;
  box-shadow:0 18px 48px -12px rgba(16,24,40,.3)}
#actdlg .act-dlg-box h2{
  margin:0 0 4px;font-size:15px;font-weight:650;color:var(--txt)}
#actdlg .act-dlg-box label{
  display:block;font-size:12px;color:var(--mut);font-weight:600;
  text-transform:uppercase;letter-spacing:.4px;margin:12px 0 4px}
#actdlg .act-dlg-box input{width:100%}

/* Avís quan el servidor no serveix el catàleg: sense això, no tenir botons es
   veu igual que no tenir la funció. */
#actless{margin:0 0 12px}
#actconsole #act-next{padding:10px 14px;border-top:1px solid var(--line);
  background:var(--accent-softer);font-size:12px;color:var(--txt)}

/* ── Xat del ledger: ajudant flotant que s'expandeix ───────────────────────
   Tres mides, i el pas d'una a l'altra és el mateix element (no s'amaga un i
   se n'ensenya un altre): PLEGAT és una píndola a baix a la dreta, OBERT un
   panell de treball, GRAN un panell alt per a respostes llargues.

   Per què flotant i no un botó al header: el header ja va just —a 1220 px
   perd les etiquetes dels botons i a 820 px fa scroll ell mateix—, i un
   ajudant que has de buscar entre deu controls no l'obre ningú.

   Tot amb els tokens del tema: si necessites un color que no és a `:root`, el
   que falta és el TOKEN, no un hex aquí. */
#chatwidget{
  position:fixed;right:20px;bottom:20px;z-index:65;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px}
/* La consola d'accions viu al mateix racó: quan surt, l'ajudant li deixa lloc
   en comptes de tapar-la-hi. */
body.actconsole-obert #chatwidget{bottom:calc(20px + var(--actconsole-h,340px))}

/* — PLEGAT — */
#chat-launcher{
  display:inline-flex;align-items:center;gap:8px;padding:11px 16px;
  border-radius:999px;font-weight:650;font-size:13px;
  background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent-text);
  box-shadow:0 10px 26px -10px var(--accent-glow),var(--sh);transition:.18s}
#chat-launcher:hover{filter:brightness(1.07);transform:translateY(-2px)}
#chat-launcher .chat-pastilla{
  background:var(--accent-ink);color:var(--accent);border-radius:999px;
  padding:1px 7px;font-size:11px;font-weight:700}
#chatwidget.obert #chat-launcher{display:none}

/* — OBERT — */
#chatdrawer{
  display:none;flex-direction:column;overflow:hidden;
  width:min(430px,calc(100vw - 40px));height:min(580px,calc(100vh - var(--headh) - 60px));
  background:var(--surface);border:1px solid var(--line2);border-radius:var(--r);
  box-shadow:0 22px 48px -18px rgba(16,24,40,.34),var(--sh);
  transform-origin:bottom right;animation:chat-obre .16s ease-out}
#chatwidget.obert #chatdrawer{display:flex}
@keyframes chat-obre{from{opacity:0;transform:scale(.96) translateY(8px)}
                     to{opacity:1;transform:none}}
/* — GRAN — per a respostes llargues i per llegir la traça d'eines sencera */
#chatwidget.gran #chatdrawer{
  width:min(760px,calc(100vw - 40px));height:calc(100vh - var(--headh) - 50px)}

#chatdrawer .chat-head{
  display:flex;align-items:center;gap:8px;padding:10px 12px;
  background:var(--surface2);border-bottom:1px solid var(--line);flex:0 0 auto}
#chatdrawer .chat-head b{font-size:13px;font-weight:650;flex:0 0 auto}
#chatdrawer .chat-proj{
  flex:1 1 auto;min-width:0;font-size:11px;color:var(--mut);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#chatdrawer .chat-head button{padding:4px 9px;font-size:12px;color:var(--mut);
  background:transparent;border:0}
#chatdrawer .chat-head button:hover{color:var(--txt);background:var(--surface3);
  transform:none}
#chatdrawer .chat-body{flex:1 1 auto;overflow:auto;padding:14px;display:flex;
  flex-direction:column;gap:10px}
#chatdrawer .chat-msg{font-size:13px;line-height:1.5;border-radius:var(--r-sm);
  padding:10px 12px;max-width:100%;overflow-wrap:anywhere}
#chatdrawer .chat-you{background:var(--accent-softer);border:1px solid var(--accent-line);
  align-self:flex-end;max-width:88%}
#chatdrawer .chat-bot{background:var(--surface2);border:1px solid var(--line)}
#chatdrawer .chat-sys{background:transparent;border:1px dashed var(--line2);color:var(--mut);
  font-size:12px}
#chatdrawer .chat-wait{color:var(--mut);font-size:12px;font-style:italic;padding:2px 12px}
#chatdrawer .chat-err{background:var(--red-soft);border:1px solid var(--red-line)}
#chatdrawer .chat-msg code{background:var(--surface3);border-radius:4px;padding:1px 5px;
  font-size:12px}
/* L'avís de xifres sense font NO es plega: si s'amaga, no serveix de res. */
#chatdrawer .chat-warn{margin-top:9px;padding:9px 10px;border-radius:var(--r-sm);
  background:var(--red-soft);border:1px solid var(--red-line);font-size:12px;line-height:1.45}
#chatdrawer .chat-prop{margin-top:9px;padding:9px 10px;border-radius:var(--r-sm);
  background:var(--accent-softer);border:1px solid var(--accent-line);font-size:12px;
  line-height:1.45}
#chatdrawer .chat-prop button{margin-left:6px;padding:3px 9px;font-size:11px}
#chatdrawer .chat-cites{margin-top:8px;font-size:11px;color:var(--mut)}
#chatdrawer .chat-cites span{font-weight:650}
#chatdrawer .chat-steps{margin-top:8px;font-size:12px}
#chatdrawer .chat-steps summary{cursor:pointer;color:var(--accent-text);font-weight:600}
#chatdrawer .chat-step{padding:4px 0;color:var(--mut);border-bottom:1px solid var(--line);
  overflow-wrap:anywhere}
#chatdrawer .chat-steperr{display:block;color:var(--red)}
/* Suggeriments: què es pot preguntar. Un camp de text buit sobre un ledger de
   200 predicats no convida a res. */
#chatdrawer .chat-tips{display:flex;flex-wrap:wrap;gap:6px}
#chatdrawer .chat-tip{font-size:11.5px;padding:5px 10px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line2);color:var(--accent-text);
  cursor:pointer;font-weight:600}
#chatdrawer .chat-tip:hover{background:var(--accent-softer);border-color:var(--accent-text)}
#chatdrawer .chat-foot{display:flex;gap:8px;padding:11px 12px;border-top:1px solid var(--line);
  background:var(--surface2);flex:0 0 auto}
#chatdrawer .chat-foot textarea{flex:1 1 auto;resize:none;font-family:var(--font);
  font-size:13px;padding:8px 10px;border-radius:var(--r-sm);border:1px solid var(--line2);
  background:var(--surface);color:var(--txt);max-height:120px}
#chatdrawer .chat-foot button{flex:0 0 auto}
/* A mòbil no hi ha racó que valgui: ocupa la pantalla. */
@media(max-width:560px){
  #chatwidget{right:10px;bottom:10px;left:10px;align-items:stretch}
  #chatwidget.obert #chatdrawer,#chatwidget.gran #chatdrawer{
    width:auto;height:calc(100vh - var(--headh) - 30px)}
}

/* ── Login (F3) ────────────────────────────────────────────────────────────
   Tapa el dashboard sencer: sense sessió, darrere no hi ha res a mirar. */
#loginwrap{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;background:
    radial-gradient(1200px 600px at 80% -10%,var(--glow-teal),transparent 60%),
    radial-gradient(900px 500px at -10% 10%,var(--glow-purple),transparent 55%),
    var(--bg)}
#loginwrap .login-box{width:min(380px,calc(100vw - 32px));background:var(--surface);
  border:1px solid var(--line2);border-radius:var(--r);padding:26px 28px;
  box-shadow:0 18px 48px -12px rgba(16,24,40,.28)}
#loginwrap .login-mark{display:flex;align-items:center;gap:12px;margin-bottom:20px}
#loginwrap label{display:block;font-size:12px;color:var(--mut);font-weight:600;
  text-transform:uppercase;letter-spacing:.4px;margin:12px 0 4px}
#loginwrap input{width:100%}
#userpill #user-role{color:var(--mut);font-size:11px;text-transform:uppercase;
  letter-spacing:.4px;margin-left:6px}

/* ── El meu compte i usuaris (js/compte.js) ───────────────────────────────── */
#accwrap{position:fixed;inset:0;z-index:205;display:none;align-items:flex-start;justify-content:center;
  overflow:auto;padding:6vh 16px;background:rgba(16,24,40,.38);backdrop-filter:blur(2px)}
#accwrap.forced{backdrop-filter:none;background:
    radial-gradient(1200px 600px at 80% -10%,var(--glow-teal),transparent 60%),
    radial-gradient(900px 500px at -10% 10%,var(--glow-purple),transparent 55%),
    var(--bg)}
#accwrap .acc-box{width:min(420px,100%);background:var(--surface);border:1px solid var(--line2);
  border-radius:var(--r);padding:20px 22px;box-shadow:0 18px 48px -12px rgba(16,24,40,.3)}
#accwrap .acc-box.wide{width:min(760px,100%)}
#accwrap h2{margin:0 0 6px;font-size:15px;font-weight:650;color:var(--txt);display:flex;align-items:center;gap:8px}
#accwrap h2 .muted{font-weight:500;font-size:12px}
#accwrap h2 .acc-x{margin-left:auto;padding:4px 9px}
#accwrap h3{margin:0 0 4px;font-size:13px;font-weight:650;color:var(--txt)}
#accwrap .acc-sec,#accwrap .acc-new{border-top:1px solid var(--line);padding-top:12px;margin-top:14px}
#accwrap label{display:block;font-size:12px;color:var(--mut);font-weight:600;
  text-transform:uppercase;letter-spacing:.4px;margin:10px 0 4px}
#accwrap .acc-sec > input,#accwrap .acc-sec form input{width:100%}
#accwrap .acc-row{display:flex;flex-wrap:wrap;gap:10px}
#accwrap .acc-row > div{flex:1 1 140px;min-width:0}
#accwrap .acc-row input,#accwrap .acc-row select{width:100%}
#accwrap .acc-table td{vertical-align:middle}
#accwrap .acc-btns{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
#accwrap .acc-btns button{padding:3px 9px;font-size:12px}
#accwrap .acc-armed{border-color:var(--red-line);color:var(--red-text);background:var(--red-soft)}
#accwrap .acc-tag{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap}
#accwrap .acc-tag.on{background:var(--green-soft);color:var(--green-text)}
#accwrap .acc-tag.off{background:var(--surface3);color:var(--mut)}
#accwrap .acc-tag.prov{background:var(--accent-soft);color:var(--accent-text)}
#accwrap code.acc-pwd{font-size:13px;padding:1px 6px;user-select:all}

/* ── 3-30-300: repartiment del pressupost (js/regla_3_30_300.js) ─────────── */
.r3-top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.r3-budget{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--mut)}
.r3-budget input{width:130px;text-align:right}
#r3-eur-wrap input{width:80px}
.r3-share{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--surface2);margin:4px 0 12px}
.r3-share>div{height:100%;transition:flex .15s}
.r3-rows{display:flex;flex-direction:column;gap:8px}
.r3-row{display:grid;grid-template-columns:12px minmax(160px,1.3fr) minmax(120px,1fr) 46px 72px;gap:10px;align-items:center}
.r3-dot{width:12px;height:12px;border-radius:3px}
.r3-lab{display:flex;flex-direction:column;line-height:1.25}
.r3-lab .c{font-size:11px}
.r3-row input[type=range]{width:100%}
.r3-pctv{text-align:right;font-weight:650}
.r3-eur{text-align:right;color:var(--mut);font-size:12px}
.r3-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:14px}
.r3-card{background:var(--surface2);border:1px solid var(--line);border-radius:var(--r-sm,8px);padding:10px 12px}
.r3-card-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.r3-card-h span{font-weight:650}
.r3-meter{height:6px;border-radius:3px;background:var(--surface3);overflow:hidden}
.r3-meter>div{height:100%}
.r3-line{font-size:12.5px;line-height:1.5}
@media (max-width:640px){
  .r3-row{grid-template-columns:12px 1fr 46px;row-gap:4px}
  .r3-row input[type=range]{grid-column:1/-1;order:2}
  .r3-eur{grid-column:1/-1;text-align:left;order:3}
}
.r3-act-h{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:2px 0 2px 10px}
.r3-act-h .c{font-size:12px}
#r3-act table.t tfoot td{border-top:1px solid var(--line2);font-size:12.5px}
.r3-map{height:520px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface2)}
@media (max-width:640px){ .r3-map{height:380px} }
.r3-lyr{display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer}
.r3-sw{width:16px;height:0;border-top:4px solid;display:inline-block}
.r3-pin{padding:1px 5px;margin-right:4px;font-size:12px}

/* ── Carril bici (js/carril_bici.js) ─────────────────────────────────── */
#tab-bici .sw{display:inline-block;vertical-align:middle;margin-right:6px}
#tab-bici .bici-scroll{overflow-x:auto}
#tab-bici table.bici-grid th{white-space:normal;min-width:120px}
#tab-bici .bici-head{font-size:18px;margin:4px 0 10px}
#tab-bici table.bici-grid th,#tab-bici table.bici-grid td{text-align:center}
#tab-bici table.bici-grid th:first-child{text-align:left}
#tab-bici td.bici-first{background:var(--green-soft);box-shadow:inset 0 0 0 2px var(--green-line);font-weight:650}

/* ── Enllumenat (js/enllumenat.js) ───────────────────────────────────── */
#tab-llum .llum-head{font-size:18px;margin:4px 0 10px}
#tab-llum table.t tr.llum-main td{font-weight:650}

/* ── Voreres, TCI 18 (js/voreres.js) ─────────────────────────────────── */
#tab-voreres .vor-head{font-size:18px;margin:4px 0 10px}
#tab-voreres table.t tr.vor-main td{font-weight:650}
#tab-voreres .vor-map{height:540px;border-radius:8px}
#tab-voreres table.t{width:100%}
#tab-voreres table.t th,#tab-voreres table.t td{white-space:normal}
@media (max-width:640px){ #tab-voreres .vor-map{height:380px} }

/* ── Pla de barris · indicadors TCI (js/pla_barris_tci.js) ───────────── */
#tab-plabarris .pb-tci-item{border-top:1px solid var(--line);padding:12px 0}
#tab-plabarris .pb-tci-item.muted{color:var(--mut)}
#tab-plabarris .pb-tci-h{display:flex;gap:10px;align-items:baseline;margin-bottom:6px}
#tab-plabarris .pb-tci-n{min-width:34px}
#tab-plabarris .pb-tci-go{margin-left:auto;white-space:nowrap}
#tab-plabarris .pb-tci-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 16px;margin:4px 0 6px 44px}
#tab-plabarris .pb-tci-stats > div > .c:first-child{display:block;font-size:11.5px}
#tab-plabarris .pb-tci-item > .c,#tab-plabarris .pb-tci-cav{margin-left:44px}
#tab-plabarris .pb-tci-diff{color:var(--red);font-weight:650}
#tab-plabarris .pb-tci-cav{margin-top:4px;margin-bottom:0;padding-left:18px;font-size:12px;color:var(--mut)}
/* Necessitat i resposta (js/pla_barris_diagnosi.js): les dues lectures de cada indicador i a què respon el programa */
#tab-plabarris .pbn-tg{display:block;margin:8px 0 4px;font-size:13px}
#tab-plabarris .pbn-row{display:grid;grid-template-columns:minmax(170px,1.2fr) minmax(220px,1.6fr) minmax(110px,.7fr) minmax(120px,.8fr);gap:6px 16px;border-top:1px solid var(--line);padding:10px 0;align-items:start}
#tab-plabarris .pbn-h{display:flex;gap:10px;align-items:baseline}
#tab-plabarris .pbn-cell > .c:first-child{display:block;font-size:11.5px}
#tab-plabarris .pbn-bar{display:block;position:relative;height:6px;border-radius:3px;background:var(--surface3);margin-bottom:5px;overflow:hidden}
#tab-plabarris .pbn-bar > i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--red)}
#tab-plabarris .pbn-bar > i.hi{opacity:.35}
#tab-plabarris .pbn-bar-none{opacity:.5}
#tab-plabarris .pbn-reads{display:flex;flex-wrap:wrap;gap:2px 14px}
#tab-plabarris .pbn-blank{margin-top:10px}
#tab-plabarris .pbn-blank > summary{cursor:pointer}
.pbn-chip{display:inline-block;font-size:12px;line-height:1.5;padding:0 9px;border-radius:20px;background:var(--accent-softer);border:1px solid var(--accent-line);color:var(--accent-text);cursor:help}
.pbn-chip-dis{background:transparent;border-color:var(--red);color:var(--red)}
.pbn-chip-none,.pbn-none{background:transparent;border:1px dashed var(--line2);color:var(--mut)}
.pbn-none{display:inline-block;font-size:12px;padding:0 9px;border-radius:20px;cursor:help}
.pbn-on{margin:4px 0}
@media (max-width:760px){#tab-plabarris .pbn-row{grid-template-columns:1fr 1fr}#tab-plabarris .pbn-h,#tab-plabarris .pbn-need{grid-column:1 / -1}}
/* L'estadística que acompanya un indicador (els certificats energètics del TCI 3) */
#tab-plabarris .pbn-evwrap{grid-column:1 / -1}
/* «ℹ com es calcula» de cada fila del diagnòstic (pbTciDetail): el que era el panell del TCI, plegat. */
#tab-plabarris .pbn-how{grid-column:1 / -1;font-size:13px}
#tab-plabarris .pbn-how > summary{cursor:pointer;color:var(--mut);font-size:12.5px}
#tab-plabarris .pbn-how .pb-tci-stats,#tab-plabarris .pbn-how .pb-tci-cav{margin-left:0}
#tab-plabarris .pbn-how .pb-tci-go{margin:4px 0 0}
/* U-3: els punts com a número, el context plegat, i a cada necessitat «què hi fas». */
#tab-plabarris .pbn-lead{margin:0 0 8px;font-size:13.5px}
#tab-plabarris .pbn-ctx{margin:0 0 6px;font-size:12.5px;color:var(--mut)}
#tab-plabarris .pbn-ctx > summary{cursor:pointer}
#tab-plabarris .pbn-ctx p{margin:6px 0}
#tab-plabarris .pbn-pts{flex:none;min-width:44px;font-size:15px;font-weight:700;color:var(--red)}
#tab-plabarris .pbn-pts .c{font-size:11px;font-weight:500}
#tab-plabarris .pbn-pts-none{color:var(--mut)}
#tab-plabarris .pbn-act{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;align-content:flex-start}
#tab-plabarris .pbn-act > .c:first-child{flex-basis:100%}
#tab-plabarris .pbn-go{font-size:12px;padding:3px 10px}
#tab-plabarris .pbn-view{font-size:12px}
/* On sóc: «Falta N ▾» de la línia fixa (renderPbSummary). */
#tab-plabarris .pb-summary{flex:none}
#tab-plabarris .pbn-ev{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 12px;margin-top:4px;background:var(--surface2)}
#tab-plabarris .pbn-ev > summary{cursor:pointer;font-weight:650}
#tab-plabarris .pbn-ev-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px 16px;margin:8px 0}
#tab-plabarris .pbn-ev-kv > div > .c:first-child{display:block;font-size:11.5px}
#tab-plabarris .pbn-ev-l{margin:4px 0;font-size:13px}
#tab-plabarris .pbn-letters{display:flex;gap:6px;height:120px;margin:10px 0}
#tab-plabarris .pbn-l{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px}
#tab-plabarris .pbn-l > i{display:block;width:100%;min-height:2px;border-radius:3px 3px 0 0}
#tab-plabarris .pbn-l > .c{font-size:11px}
#tab-plabarris .pbn-l-ok > i{background:var(--green)}
#tab-plabarris .pbn-l-mid > i{background:var(--mut2)}
#tab-plabarris .pbn-l-bad > i{background:var(--red)}
.pbn-evline{margin:4px 0;font-size:12.5px}
@media (max-width:640px){ #tab-plabarris .pb-tci-stats,#tab-plabarris .pb-tci-item > .c,#tab-plabarris .pb-tci-cav{margin-left:0} }
/* Calendari d'execució (js/pla_barris_calendari.js): % acumulat per any, una
   sola mesura, amb la ratlla del llindar de l'art. 3.2. Barres primes amb la
   punta arrodonida ancorada a la base; el text, amb tokens de text. */
#tab-plabarris .pbc-chart{position:relative;display:flex;align-items:flex-end;gap:2px;
  height:214px;padding:0 4px;border-bottom:1px solid var(--line);margin:6px 0 10px;max-width:520px}
#tab-plabarris .pbc-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;cursor:default}
#tab-plabarris .pbc-bar{width:62%;max-width:46px;border-radius:4px 4px 0 0}
#tab-plabarris .pbc-val{font-size:11.5px;font-weight:650;color:var(--txt);margin-bottom:3px}
#tab-plabarris .pbc-lbl{height:38px;text-align:center;font-size:11.5px;color:var(--txt);padding-top:4px}
#tab-plabarris .pbc-ref{position:absolute;left:0;right:0;border-top:1.5px dashed var(--mut);pointer-events:none}
#tab-plabarris .pbc-ref span{position:absolute;left:4px;top:-17px;font-size:11px;color:var(--mut);
  background:var(--surface);padding:0 4px}
#tab-plabarris .pbc-grid td,#tab-plabarris .pbc-grid th{white-space:nowrap}
#tab-plabarris .pbc-grid td:nth-child(2){white-space:normal;min-width:220px}
/* Espai de treball del Pla de barris (js/pla_barris_programa.js): tres passos i
   una barra de límits que es queda a dalt mentre es baixa pel contingut. */
#tab-plabarris .pb-head{position:sticky;top:var(--headh);z-index:15;background:var(--bg);
  padding:6px 0;margin:-4px 0 10px;border-bottom:1px solid var(--line)}
/* Una línia: passos a l'esquerra, pastilles de límits i «Falta N ▾» a la dreta (U-1). */
#tab-plabarris .pb-bar{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap}
#tab-plabarris .pb-steps{display:flex;gap:4px;flex-wrap:wrap}
#tab-plabarris .pb-step-btn{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line2);
  border-radius:var(--r);background:var(--surface);color:var(--txt);cursor:pointer;font:inherit;font-size:13px;white-space:nowrap}
#tab-plabarris .pb-step-btn.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent) inset}
#tab-plabarris .pb-step-n{flex:none;width:20px;height:20px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;font-weight:700;font-size:11px;background:var(--surface3);color:var(--txt)}
#tab-plabarris .pb-step-btn.on .pb-step-n{background:var(--accent);color:var(--accent-ink)}
#tab-plabarris .pb-step-c{font-weight:500;color:var(--mut)}
#tab-plabarris .pb-limits{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
#tab-plabarris .pbl-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border:1px solid var(--line2);border-radius:20px;
  background:var(--surface);color:var(--txt);font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
#tab-plabarris .pbl-pill .pbl-pk{font-weight:400;color:var(--mut)}
#tab-plabarris .pbl-pill.pbl-bad{border-color:var(--red);background:var(--red-soft)}
#tab-plabarris .pbs-btn{font:inherit;font-size:12.5px;font-weight:650;padding:4px 10px;border-radius:var(--r);cursor:pointer;white-space:nowrap}
#tab-plabarris .pbs-btn.pbs-todo{border:1px solid var(--accent-line);background:var(--accent-softer);color:var(--accent-text)}
#tab-plabarris .pbs-btn.pbs-ok{border:1px solid var(--green);background:transparent;color:var(--green)}
/* El desplegable de «Falta»: el que falta, i els límits sencers. */
#tab-plabarris .pb-todo-pop{margin-top:6px;padding:10px 12px;border:1px solid var(--line2);border-radius:var(--r);background:var(--surface);
  box-shadow:var(--sh);max-height:60vh;overflow:auto}
#tab-plabarris .pb-todo-pop p{margin:0 0 6px;font-size:13.5px}
#tab-plabarris .pbs-list{margin:0 0 10px;padding-left:20px;font-size:13.5px;line-height:1.6}
#tab-plabarris .pbs-okt{color:var(--green);font-weight:650}
#tab-plabarris .pbs-limits{display:flex;gap:8px;flex-wrap:wrap}
#tab-plabarris .pbl-chip{flex:1 1 170px;min-width:150px;padding:6px 10px;border:1px solid var(--line2);
  border-left-width:4px;border-radius:var(--r-sm);background:var(--surface)}
#tab-plabarris .pbl-ok{border-left-color:var(--green)}
#tab-plabarris .pbl-bad{border-left-color:var(--red);background:var(--red-soft)}
#tab-plabarris .pbl-neutral{border-left-color:var(--mut2)}
#tab-plabarris .pbl-todo{border-left-color:var(--blue)}
#tab-plabarris .pbl-todo .pbl-mark{color:var(--blue)}
#tab-plabarris .pbl-k{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:650}
#tab-plabarris .pbl-ok .pbl-mark{color:var(--green)}
#tab-plabarris .pbl-bad .pbl-mark{color:var(--red)}
#tab-plabarris .pbl-v{font-size:17px;font-weight:700;color:var(--txt);line-height:1.25}
#tab-plabarris .pbl-s{font-size:11.5px;color:var(--mut);line-height:1.3}
#tab-plabarris .pbl-btn{margin-top:4px;font-size:11.5px;padding:2px 8px}
/* U-2: el programa i la fitxa de l'actuació triada, al costat (a pantalla estreta, a sota). */
#tab-plabarris .pbu-split{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
@media (min-width:1100px){#tab-plabarris .pbu-split.has-sel{grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr)}}
#tab-plabarris .pbu-side:empty{display:none}
#tab-plabarris .pbu-side{position:sticky;top:calc(var(--headh) + 56px);max-height:calc(100vh - var(--headh) - 70px);overflow:auto}
#tab-plabarris .pbu-row{cursor:pointer}
#tab-plabarris .pbu-table .pbu-mk,#tab-plabarris .pbu-table th:nth-child(3),#tab-plabarris .pbu-table th:nth-child(4){text-align:center;width:44px}
#tab-plabarris .pbu-split.has-sel .pbu-c-need{display:none}
#tab-plabarris .pbu-row:hover td{background:var(--surface2)}
#tab-plabarris .pbu-row.sel td{background:var(--accent-softer)}
#tab-plabarris .pbu-codi{font-size:12px}
#tab-plabarris .pbu-camp{font-size:11.5px;white-space:normal}
#tab-plabarris .pbu-need{display:inline-block;font-size:11.5px;padding:0 7px;border-radius:20px;border:1px solid var(--line2);white-space:nowrap}
#tab-plabarris .pbu-fx{border:1px solid var(--accent-line);border-radius:var(--r);background:var(--surface);padding:12px 14px}
#tab-plabarris .pbu-fx-h{display:flex;align-items:center;gap:8px;font-size:12px}
#tab-plabarris .pbu-fx-h > span{flex:1}
#tab-plabarris .pbu-fx h3{margin:4px 0 2px;font-size:15px}
#tab-plabarris .pbu-fx-camp{font-size:12px;margin-bottom:8px}
#tab-plabarris .pbu-fx-kv{display:grid;grid-template-columns:76px minmax(0,1fr);gap:6px 10px;margin:0 0 10px;font-size:13px}
#tab-plabarris .pbu-fx-kv dt{color:var(--mut)}
#tab-plabarris .pbu-fx-kv dd{margin:0}
#tab-plabarris .pbu-fx-miss{padding:7px 10px;border-radius:var(--r-sm);background:var(--accent-softer);border:1px solid var(--accent-line);font-size:12.5px}
#tab-plabarris .pbu-fx-ok{color:var(--green);font-weight:650;font-size:12.5px}
#tab-plabarris .pbu-fx-act{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 8px}
#tab-plabarris .pbu-fx-act button{font-size:12px;padding:4px 10px}
#tab-plabarris .pbu-fx-note{font-size:11.5px}
#tab-plabarris .pba-cov > summary{cursor:pointer;list-style:none}
#tab-plabarris .pba-cov > summary::-webkit-details-marker{display:none}
#tab-plabarris .pba-cov > summary h2{display:inline;margin:0}
/* Les taules del programa: el nom i el lloc es parteixen en línies (la regla general `th,td{white-space:nowrap}`
   les feia més amples que la pantalla, i a 1440 px el botó «Ubicar» quedava tallat). */
#tab-plabarris .pbu-table td:first-child,
#tab-plabarris .pbx-table td:first-child{white-space:normal;min-width:200px}
/* El botó d'una acció que falta (pbActBtn): el que abans era una ordre de consola. */
.pb-act{margin:4px 0 0;font-size:11.5px;padding:2px 8px}
#tab-plabarris .pbl-note{font-size:12px;color:var(--mut)}
#tab-plabarris .pb-lead{margin:0 0 10px;font-size:12.5px}
#tab-plabarris .pb-next{margin:4px 0 24px;text-align:right}
#tab-plabarris .pba-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 14px}
#tab-plabarris .pba-wide{grid-column:1/-1}
#tab-plabarris .pba-hint{margin-top:8px;font-size:12px}
#tab-plabarris .pba-hint > div{margin-top:3px}
/* «Nova actuació» comença per les eines; un camp amb eina porta a l'eina (_pbaEngineGate). */
#tab-plabarris .pba-h3{font-size:13px;margin:10px 0 6px}
#tab-plabarris .pba-h3 .mut{font-weight:400}
#tab-plabarris .pba-tool{display:grid;grid-template-columns:minmax(170px,250px) 1fr;gap:10px;align-items:center;margin:0 0 6px;font-size:12.5px}
#tab-plabarris .pba-tool > button{width:100%;text-align:left}
@media (max-width:640px){#tab-plabarris .pba-tool{grid-template-columns:1fr;gap:2px}}
#tab-plabarris .pba-tool-off{color:var(--mut)}
#tab-plabarris .pba-engine{margin-top:10px;padding:10px 12px;border:1px solid var(--accent-line);border-radius:var(--r-sm);background:var(--accent-softer);font-size:13px}
#tab-plabarris .pba-empty{padding:18px;border:1px dashed var(--line2);border-radius:var(--r);text-align:center;background:var(--surface2)}
#tab-plabarris .pba-empty .muted{margin:6px auto 12px;max-width:560px}
#tab-plabarris .pba-loose{margin-top:12px;font-size:13px}
#tab-plabarris .pba-loose summary{cursor:pointer;color:var(--mut)}
#tab-plabarris .pba-loose-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--line)}
/* Que el formulari i el mapa no quedin sota la barra fixa en fer scrollIntoView. */
#tab-plabarris #pba-form,#tab-plabarris #pbu-editor{scroll-margin-top:calc(var(--headh) + 190px)}
@media (max-width:640px){
  #tab-plabarris .pb-head{position:static}
  #tab-plabarris .pb-limits{margin-left:0}
}
/* «Què proposa el bessó» (js/pla_barris_programa.js): cada proposta amb el seu
   cost i el límit del cost al costat, i l'acció a la dreta. */
#tab-plabarris .pba-props > summary{cursor:pointer;list-style:none}
#tab-plabarris .pba-props > summary::-webkit-details-marker{display:none}
#tab-plabarris .pba-props > summary h2{display:inline;margin:0}
#tab-plabarris .pba-props > summary::after{content:"▸";float:right;color:var(--mut)}
#tab-plabarris .pba-props[open] > summary::after{content:"▾"}
#tab-plabarris .pba-group{margin-top:12px}
#tab-plabarris .pba-group h3{font-size:13px;margin:0 0 6px}
#tab-plabarris .pba-group h3 a{font-weight:400;font-size:12px;margin-left:8px}
#tab-plabarris .pba-prop{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;
  padding:10px 12px;margin-bottom:8px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--surface)}
#tab-plabarris .pba-prop-done{opacity:.6}
#tab-plabarris .pba-prop-main{min-width:0;flex:1}
#tab-plabarris .pba-prop-act{flex:none}
#tab-plabarris .pba-prop-meta{margin-top:4px;font-size:13px}
#tab-plabarris .pba-prop-cav{margin:6px 0 0;padding-left:18px;font-size:11.5px;color:var(--mut)}
@media (max-width:640px){ #tab-plabarris .pba-prop{flex-direction:column} }

/* La vista d'un motor ACOBLADA al costat del programa (pbDock, js/pla_barris_programa.js).
   No és una còpia ni una vista nova: és la pestanya del motor tal com és (mapa,
   taules, «el que aquesta vista NO diu»), col·locada perquè el programa es vegi a
   l'hora. A pantalla ampla, calaix a la dreta; a l'estreta, a baix. */
section.tab.docked{display:block;position:fixed;z-index:30;background:var(--bg);overflow:auto;
/* L'editor del calendari d'una actuació sense fitxa (pas ③, js/pla_barris_calendari.js). */
#tab-plabarris .pbe h3{margin:0 0 4px;font-size:14px}
#tab-plabarris .pbe-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0}
#tab-plabarris .pbe-k{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
#tab-plabarris .pbe-base{margin-left:auto;font-size:12px}
#tab-plabarris .pbe-base input{width:7em}
#tab-plabarris .pbe-years{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
#tab-plabarris .pbe-yr{display:flex;flex-direction:column;gap:2px;font-size:12px}
#tab-plabarris .pbe-yr input{width:100%}
#tab-plabarris .pbe-status{margin:8px 0}
#tab-plabarris .pbe-act{display:flex;gap:8px;margin-top:10px}
#tab-plabarris .pbe-open{margin-left:8px;font-size:12px;padding:2px 8px}

/* Suggeriments de lloc de l'editor d'ubicació (js/pla_barris_place_hints.js). */
#tab-plabarris .pbh{border:1px solid var(--line2);border-radius:var(--r-sm);padding:8px 10px;background:var(--surface)}
#tab-plabarris .pbh > summary{cursor:pointer}
#tab-plabarris .pbh-chips{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0}
#tab-plabarris .pbh-chip{display:inline-flex;gap:5px;align-items:baseline;font-size:12.5px}
#tab-plabarris .pbh-done{opacity:.6}
#tab-plabarris .pbh-act{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#tab-plabarris .pbh-msg{font-size:12px;margin-top:6px}
#tab-plabarris .pbh-src{margin-top:8px;font-size:12px}
#tab-plabarris .pbh-src div{margin-top:3px}

/* El lliurament (pas ④, js/pla_barris_lliurament.js). */
#tab-plabarris .pbx-verdict{margin:0 0 10px;display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}
#tab-plabarris .pbx-ok{color:var(--green)}
#tab-plabarris .pbx-no{color:var(--red);font-size:12px}
#tab-plabarris a.pbx-no{text-decoration:underline}
#tab-plabarris .pbx-prog{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin-bottom:12px}
#tab-plabarris .pbx-table td{vertical-align:top}
#tab-plabarris .pbx-row-ok{background:color-mix(in srgb,var(--green) 6%,transparent)}
#tab-plabarris .pbx-exp{margin-top:14px;padding-top:10px;border-top:1px solid var(--line)}
#tab-plabarris .pbx-act{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
#tab-plabarris .pbx-drift{color:var(--red);margin-top:4px}
#tab-plabarris .pbx-warn{margin-top:6px;font-size:12px}
#tab-plabarris .pbx-warn ul{margin:6px 0 0;padding-left:18px}
#tab-plabarris .pbx-note{font-size:12px}

/* «Dissenya amb els motors» (pas ②): una targeta per eina amb cistella. */
#tab-plabarris .pbt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
#tab-plabarris .pbt-card{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--line2);
  border-radius:var(--r-sm);background:var(--surface)}
#tab-plabarris .pbt-off{opacity:.65}
#tab-plabarris .pbt-t{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
#tab-plabarris .pbt-act{margin-top:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px}

  overscroll-behavior:contain;padding:0 14px 28px;box-shadow:0 -6px 24px rgba(16,24,40,.14);
  border:1px solid var(--line2)}
.pbd-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 0;margin-bottom:10px;background:var(--bg);border-bottom:1px solid var(--line)}
.pbd-bar .mut{flex:1;min-width:160px;font-size:12px}
.pbd-bar button{font-size:12px;padding:4px 10px}
.pbd-bar > b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* «Triar al mapa» ha d'ensenyar el mapa (U-1): al calaix, el panell que porta el mapa de l'estudi va just sota el cap
   fix, abans del text que explica l'estudi. Abans quedava a la meitat de baix i calia fer scroll per trobar-lo. */
section.tab.docked{display:flex;flex-direction:column}
section.tab.docked > .pbd-head{order:-2}
section.tab.docked > :has(.leaflet-container){order:-1}
/* Enllumenat i 3-30-300 porten els panells dins d'un contenidor (`#llum-body`, `#r3-body`): també s'hi ordena. Les
   eines amb cistella pròpia (ascensors, fotovoltaica, voreres) ja hi posen el seu mapa just sota el cap. */
section.tab.docked > :not(.panel):not(.pbd-head):has(.leaflet-container){display:flex;flex-direction:column}
section.tab.docked > :not(.panel):not(.pbd-head) > .panel:has(.leaflet-container){order:-1}
section.tab.docked{left:var(--sidew);right:0;bottom:0;height:var(--pbd-h,58vh);border-width:1px 0 0}
body.side-hidden section.tab.docked{left:0}
body.pb-docked #tab-plabarris{padding-bottom:var(--pbd-h,58vh)}
@media (max-width:1000px){
  section.tab.docked{left:0}
}
@media (min-width:1280px){
  body section.tab.docked,body.side-hidden section.tab.docked{top:var(--headh);left:auto;height:auto;width:var(--pbd-w,min(44vw,700px));
    border-width:0 0 0 1px;box-shadow:-6px 0 24px rgba(16,24,40,.14)}
  body.pb-docked #tab-plabarris{padding-bottom:0;margin-right:calc(var(--pbd-w,min(44vw,700px)) - 24px)}
  body.pb-dock-max #tab-plabarris{margin-right:0}
}
#tab-plabarris .pba-prop-act{display:flex;flex-direction:column;gap:6px;align-items:stretch}
#tab-plabarris .pba-data{font-size:12px;padding:4px 10px}
/* Amb la vista a baix la barra de límits deixaria poc espai al programa: es deixa anar. */
body.pb-docked #tab-plabarris .pb-head{position:static}
@media (min-width:1280px){
  body.pb-docked #tab-plabarris .pb-head{position:sticky}
}

/* Les actuacions del programa damunt del mapa d'un motor (js/pla_barris_overlay.js):
   una fitxa en passar-hi per sobre i una llegenda que és també l'índex. */
.pbo-card,.pbo-leg{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-sm);
  box-shadow:var(--sh);padding:8px 10px;font-size:12px;line-height:1.35;color:var(--txt)}
.pbo-card{width:260px;max-height:62vh;overflow:hidden;pointer-events:none}
.pbo-leg{width:260px;max-height:38%;display:flex;flex-direction:column}
.pbo-s,.pbo-note{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.pbo-note{-webkit-line-clamp:3}
.pbo-h{display:flex;align-items:baseline;gap:6px;font-size:13px;margin-bottom:2px}
.pbo-s{color:var(--mut);margin-bottom:4px}
.pbo-cost{font-size:13px;margin-bottom:2px}
.pbo-note{color:var(--mut);font-size:11.5px;margin:2px 0}
.pbo-where{margin-top:4px}
.pbo-aae{margin-top:2px;color:var(--mut)}
.pbo-hit{margin-top:6px;padding-top:5px;border-top:1px solid var(--line)}
.pbo-sw{flex:none;display:inline-block;width:12px;height:12px;border-radius:3px;border:1px solid rgba(0,0,0,.25);vertical-align:-1px}
.pbo-sw-prop{border:2px dashed #fff;outline:1px solid #111827}
.pbo-row-s{display:flex;align-items:center;gap:6px;margin-top:3px}
.pbo-leg-top{display:flex;align-items:baseline;gap:6px;flex:none;margin-bottom:4px}
.pbo-leg-h{flex:1;display:flex;align-items:baseline;gap:6px;cursor:pointer;margin:0}
.pbo-fold{flex:none;border:0;background:transparent;padding:0 4px;font-size:12px;cursor:pointer;color:var(--mut)}
.pbo-leg-list[hidden]{display:none}
.pbo-leg-h .muted{margin-left:auto;font-size:11px}
.pbo-leg-list{overflow:auto;min-height:0}
.pbo-row{display:flex;align-items:center;gap:7px;padding:3px 4px;border-radius:4px;cursor:pointer}
.pbo-row:hover{background:var(--surface2)}
.pbo-rt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbo-rm{flex:none;color:var(--mut);font-size:11px}
.pbo-leg-n{margin-top:4px;font-size:11.5px}

/* Mida del calaix de dades (pbDock): ampliar (botó o doble clic) i arrossegar pel tirador.
   `--pbd-w` (calaix a la dreta) i `--pbd-h` (fulla a baix) són variables perquè les
   toquin el botó i el tirador sense reescriure regles. Ampliat, el mapa del motor
   també creix: `min-height` guanya a l'alçada en línia que li posa cada motor. */
body.pb-dock-max{--pbd-w:calc(100vw - var(--sidew) - 40px);--pbd-h:calc(100vh - var(--headh) - 40px)}
body.pb-dock-max section.tab.docked .leaflet-container{min-height:64vh}
.pbd-grip{position:fixed;z-index:31;touch-action:none;background:transparent}
.pbd-grip::after{content:"";position:absolute;inset:0;margin:auto;border-radius:3px;background:var(--line2)}
.pbd-grip:hover::after,.pbd-grip:active::after{background:var(--accent)}
body.pbd-dragging{user-select:none;cursor:grabbing}
body.pbd-dragging .leaflet-container{pointer-events:none}
@media (max-width:1279px){
  .pbd-grip{left:var(--sidew);right:0;height:12px;bottom:calc(var(--pbd-h,58vh) - 6px);cursor:row-resize}
  .pbd-grip::after{width:56px;height:4px}
  body.side-hidden .pbd-grip{left:0}
}
@media (max-width:1000px){
  .pbd-grip{left:0}
}
@media (min-width:1280px){
  .pbd-grip{top:var(--headh);bottom:0;width:12px;right:calc(var(--pbd-w,min(44vw,700px)) - 6px);cursor:col-resize}
  .pbd-grip::after{width:4px;height:56px}
}

/* El cap del calaix de dades: la barra i, si el motor en té, la cistella. Es queda fix
   dalt mentre es baixa pel motor (js/pla_barris_programa.js, pla_barris_cistella.js). */
.pbd-head{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line);margin-bottom:10px}
.pbd-head > .pbd-bar{position:static;margin-bottom:0;border-bottom:0}

/* La cistella (js/pla_barris_cistella.js) */
.pbc{padding:6px 0 10px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.4;max-height:46vh;overflow:auto}
.pbc-h{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.pbc-h .mut{flex:1;font-size:12px}
.pbc-fold{padding:0 8px}
.pbc-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:5px 0}
.pbc-k{flex:none;min-width:74px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:650}
.pbc input[type=number]{width:72px;padding:3px 6px}
.pbc select{padding:3px 6px}
.pbc button{font-size:12px;padding:3px 9px}
.pbc-opt{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.pbc-big{font-size:13.5px;margin-top:4px}
.pbc-msg{margin-top:3px;font-size:12px}
.pbc-empty{margin-top:6px}
.pbc-cav{margin:5px 0 0;padding-left:18px;font-size:11.5px;color:var(--mut)}
.pbc-create{display:flex;gap:8px;align-items:center;margin-top:8px}
.pbc-create input[type=text]{flex:1;min-width:120px;padding:4px 8px}
/* La cistella de FV en mode «línies d'ajuts»: una targeta per via, amb els escenaris d'adhesió */
.pbc-linecard{background:var(--surface2);border-radius:var(--r-sm);padding:8px 12px;margin:8px 0}
.pbc-line-h{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.pbc-line-row input[type=range]{accent-color:var(--accent)}
.pbc-scen{border-collapse:collapse;margin-top:6px;font-size:12px}
.pbc-scen th,.pbc-scen td{padding:2px 12px 2px 0;text-align:left;font-weight:400}
.pbc-scen th{color:var(--mut)}
.pbc-list{margin-top:6px;font-size:12px}
.pbc-list summary{cursor:pointer;color:var(--mut)}
.pbc-li{display:flex;gap:10px;align-items:baseline;padding:2px 0;border-bottom:1px solid var(--line)}
.pbc-li > span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbc-props{margin-top:6px;display:flex;flex-direction:column;gap:4px}
.pbc-prop{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;padding:4px 6px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--surface);cursor:pointer}
.pbc-prop-done{opacity:.6;cursor:default}
.pbc-tip{font-size:12px;line-height:1.35}
.pbc-tip b{font-weight:650}

/* Vetos i forçats del 3-30-300 (js/regla_3_30_300.js) */
.r3-ovr{margin:10px 0 4px;padding:8px 10px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--surface2);font-size:12.5px}
.r3-ovr-veto{border-color:var(--red)}
.r3-ovr-force{border-color:var(--accent)}
.r3-ovr-x{cursor:pointer;color:var(--red);font-weight:700;margin-left:2px}
.r3-ovr-btn{font-size:12px;padding:2px 8px;margin:4px 4px 0 0;cursor:pointer}

/* La cistella d'Accessibilitat (js/pla_barris_cistella_acc.js): mapa d'edificis propi i efecte sobre el TCI. */
.pbc-mapcard{padding:8px;margin-bottom:10px}
.pbc-map{height:420px;border-radius:8px;overflow:hidden}
.pbc-map-leg{margin-top:6px;font-size:11.5px}
.pbc-key{display:inline-block;width:12px;height:10px;border-radius:2px;margin:0 4px 0 6px;vertical-align:-1px;opacity:.85}
.pbc-key-line{background:transparent;border-top:2px dashed #111827;height:0;width:16px}
.pbc-eff{margin-top:6px;padding:6px 8px;border-left:3px solid var(--accent);background:var(--surface2);font-size:12.5px}
.pbc-why{font-size:11.5px;margin-top:2px}