/* DUAT · estils de les pàgines de mòdul amb dades reals (KPIs + taules).
   Auto-carregat per Dash des de /assets. Usa les variables --pt-* del tema. */

/* Fila de KPIs */
.pt-kpi-row { display:flex; flex-wrap:wrap; gap:14px; margin:18px 0 26px; }
.pt-kpi { flex:1 1 160px; background:var(--pt-surface); border:1px solid var(--pt-line);
  border-top:3px solid var(--pt-verd); border-radius:var(--pt-radius); padding:14px 16px; }
.pt-kpi-label { color:var(--pt-muted); font-size:.85rem; margin:0 0 4px; }
.pt-kpi-val { color:var(--pt-text); font-size:1.5rem; font-weight:600; line-height:1.1; }
.pt-kpi-sub { color:var(--pt-muted); font-size:.82rem; margin-top:3px; }
.pt-kpi.warn { border-top-color:var(--pt-warn); }
.pt-kpi.warn .pt-kpi-val { color:var(--pt-warn-dark); }
.pt-kpi.ok   { border-top-color:var(--pt-verd); }
.pt-kpi.gold { border-top-color:var(--pt-blau); }

/* Blocs de secció */
.pt-sec { background:var(--pt-surface); border:1px solid var(--pt-line);
  border-radius:var(--pt-radius); padding:18px 20px; margin-bottom:22px; }
.pt-sec h3 { color:var(--pt-text); font-size:1.05rem; font-weight:600;
  margin:0 0 4px; }
.pt-sec-sub { color:var(--pt-muted); font-size:.875rem; margin:0 0 14px; line-height:1.5; }

/* Taules */
.pt-table { width:100%; border-collapse:collapse; font-size:.86rem; }
.pt-table th { text-align:left; color:var(--pt-muted); font-weight:600;
  border-bottom:2px solid var(--pt-line); padding:9px 10px; white-space:nowrap; }
.pt-table td { border-bottom:1px solid var(--pt-line); padding:7px 10px;
  color:var(--pt-text); }
.pt-table td.num { text-align:right; font-variant-numeric:tabular-nums; }
.pt-table tr:hover td, .pt-table tbody tr:hover td { background:var(--pt-soft); }

/* Semàfor de risc (colors amb contrast >=3:1 sobre surface/soft/bg) */
.pt-dot { display:inline-block; width:9px; height:9px; border-radius:50%;
  margin-right:6px; vertical-align:middle; }
.pt-dot.r { background:var(--pt-warn); } .pt-dot.a { background:var(--pt-ambre-fosc); }
.pt-dot.g { background:var(--pt-verd); }
.pt-dot.n { background:var(--pt-muted); }   /* neutre: sense font de seguiment */

/* Panell de casaments (formularis de vincle) */
.pt-cas-form { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.pt-cas-col { flex:1 1 260px; min-width:220px; }
.pt-cas-form .pt-btn { flex:0 0 auto; height:38px; }
.pt-cas-fb { margin-top:10px; }
.pt-cas-ok { display:inline-block; background:var(--pt-verd-pastel);
  color:var(--pt-verd-dark); border:1px solid var(--pt-verd); border-radius:var(--pt-radius-sm);
  padding:8px 12px; font-weight:500; }
.pt-cas-err { display:inline-block; background:var(--pt-blau-pastel);
  color:var(--pt-warn-dark); border:1px solid var(--pt-warn); border-radius:var(--pt-radius-sm);
  padding:8px 12px; font-weight:500; }
.pt-cas-mgmt-link { display:inline-block; margin:4px 0 8px; color:var(--pt-verd);
  font-weight:500; text-decoration:none; }
.pt-cas-mgmt-link:hover { text-decoration:underline; color:var(--pt-verd-dark); }

/* Nota de qualitat de dada / peu */
.pt-datanote { color:var(--pt-muted); font-size:.875rem; margin-top:6px;
  font-style:italic; line-height:1.5; }

/* Enllaç de retorn a l'inici (capçalera de tots els mòduls) */
.pt-back-link { display:inline-block; color:var(--pt-verd); text-decoration:none;
  font-size:.85rem; font-weight:500; margin-bottom:10px; }
.pt-back-link:hover { text-decoration:underline; color:var(--pt-verd-dark); }

/* ══════════════════════════════════════════════════════════════════════════
   SISTEMA DE DISSENY (línia MIDGARD) — profunditat, radius i jerarquia.
   Aquest fitxer es carrega DESPRÉS del _THEME_CSS injectat a app.py, així que
   a igual especificitat aquestes regles manen.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Ombres bi-capa idèntiques a les de MIDGARD (profunditat subtil) */
  --pt-shadow:     0 1px 2px rgba(38,36,32,0.04), 0 4px 16px rgba(38,36,32,0.06);
  --pt-shadow-hov: 0 2px 6px rgba(38,36,32,0.07), 0 12px 30px rgba(38,36,32,0.10);
  /* Dos nivells de radius (cards grans / elements inline), com MIDGARD */
  --pt-radius:    14px;
  --pt-radius-sm:  9px;
}

/* Profunditat: totes les superfícies-targeta floten sobre el fons */
.pt-kpi, .pt-sec, .pt-home-tile, .pt-home-card,
.pt-mod-card, .pt-form-card, .pt-login-card { box-shadow: var(--pt-shadow); }
.pt-home-tile:hover { box-shadow: var(--pt-shadow-hov); transform: translateY(-2px);
  border-left-color: var(--pt-verd-dark); }

/* Radius sistematitzat: 14px cards · 9px inline */
.pt-kpi, .pt-sec, .pt-home-card, .pt-login-card,
.pt-mod-card, .pt-form-card, .pt-home-tile { border-radius: var(--pt-radius); }
.pt-nav-link, .pt-legal, .pt-role-badge, .pt-mod-soon { border-radius: var(--pt-radius-sm); }

/* KPI: contrast tipogràfic label petit en caps / valor gran (patró MIDGARD) */
.pt-kpi-label { font-size:.72rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.6px; margin:0 0 6px; }
.pt-kpi-val { font-size:1.75rem; letter-spacing:-.5px; line-height:1.05; }

/* Capçalera de mòdul: ancoratge amb línia + filet verd (com .page-header) */
.pt-mod-head { padding-bottom:14px; margin-bottom:14px;
  border-bottom:1px solid var(--pt-line); position:relative; }
.pt-mod-head::after { content:""; position:absolute; left:0; bottom:-1px;
  width:44px; height:3px; background:var(--pt-verd); border-radius:3px; }
.pt-mod-title { font-size:1.4rem; letter-spacing:-.2px; line-height:1.2; }
.pt-mod-glyph { font-size:2rem; }

/* Nom del déu a les targetes de la home: to fosc (AA) i pes contingut */
.pt-home-tile-deu { color:var(--pt-verd-dark); font-weight:600; }

/* Taules: capçalera diferenciada + zebra (llegibilitat horitzontal) */
.pt-table th { background:var(--pt-soft); color:var(--pt-text); font-size:.78rem;
  text-transform:uppercase; letter-spacing:.5px; }
.pt-table tbody tr:nth-child(even) td { background:var(--pt-soft); }
.pt-table tr:hover td, .pt-table tbody tr:hover td { background:var(--pt-verd-pastel); }

/* Embolcall de taula: scroll horitzontal propi (el genera _modbase.table) */
.pt-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Enllaç de mapa (KHEPRI): target de toc que omple la cel·la */
.pt-map-link { display:block; padding:10px 0; min-height:44px; line-height:24px;
  color:var(--pt-verd); font-weight:500; text-decoration:none; white-space:nowrap; }
.pt-map-link:hover { text-decoration:underline; color:var(--pt-verd-dark); }

/* Header (topbar + NAV) enganxat: la navegació no es perd en scroll llarg */
.pt-header { position:sticky; top:0; z-index:100; background:var(--pt-surface); }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — breakpoints MIDGARD: 992 tauleta · 768 mòbil · 480 petit
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tauleta (≤ 992px): graelles compactes ── */
@media (max-width: 992px) {
  .pt-kpi-row { gap:10px; }
  .pt-home-grid { grid-template-columns:repeat(2,1fr); }
  .pt-mod, .pt-home { max-width:100%; }
}

/* ── Mòbil (≤ 768px): topbar condensat + NAV amb scroll horitzontal ── */
@media (max-width: 768px) {
  .pt-topbar { padding:8px 14px; flex-wrap:wrap; gap:4px; }
  .pt-logo { height:24px; }
  .pt-hello-lead { display:none; }
  .pt-hello-name { font-size:.82rem; }
  .pt-role-badge { display:none; }
  .pt-logout { font-size:.82rem; }

  /* NAV: una sola fila amb scroll (el retall a la dreta indica que hi ha més);
     els títols de grup s'amaguen i un filet vertical separa els grups. */
  .pt-nav { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; gap:6px; padding:8px 14px; align-items:center; }
  .pt-nav::-webkit-scrollbar { display:none; }
  .pt-nav-group { flex-direction:row; flex-shrink:0; gap:4px; align-items:center; }
  .pt-nav-group-title { display:none; }
  .pt-nav-group-links { flex-wrap:nowrap; gap:4px; }
  .pt-nav-group + .pt-nav-group::before { content:""; display:block; width:1px;
    height:20px; background:var(--pt-line); flex-shrink:0; margin-right:2px; }
  /* Touch target ≥44px (caps de producció amb guants) */
  .pt-nav-link { padding:10px 14px; font-size:.82rem; white-space:nowrap;
    flex-shrink:0; min-height:44px; }

  .pt-main { padding:18px 14px; }
  .pt-mod-lead { margin-bottom:16px; }

  /* KPIs: 2 per fila en mòbil normal */
  .pt-kpi { flex:1 1 140px; padding:12px 14px; }
  .pt-kpi-val { font-size:1.3rem; }

  .pt-home-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
  .pt-home-tile { padding:12px 14px; }
  .pt-home-tile-glyph { font-size:1.4rem; }

  .pt-sec { padding:14px 14px; }
  /* Taules: llisquen dins la targeta; columnes mai impossiblement estretes */
  .pt-table { min-width:480px; font-size:.82rem; }
  .pt-table th, .pt-table td { padding:8px 8px; }

  /* Formularis: targets còmodes */
  .pt-form-card { max-width:100%; padding:16px 14px; }
  .pt-btn { min-height:44px; font-size:1rem; }
  .pt-back-link { padding:10px 0; min-height:44px; line-height:24px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   COMPONENTS D'INTERACCIÓ I ESTAT (pàgina /entitat; reutilitzables)
   Cercador, resultats, cross-links de taula, taula clau-valor i estats
   "pendent de dades" (calm) vs "acció pendent" (ambre). Additiu — no trenca res.
   ══════════════════════════════════════════════════════════════════════════ */

/* Cercador */
.pt-cerca-wrap { margin:20px 0 24px; }
.pt-cerca-cap { color:var(--pt-muted); font-size:.82rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.5px; }
.pt-input { width:100%; max-width:520px; padding:9px 14px;
  border-radius:var(--pt-radius-sm); border:1.5px solid var(--pt-line);
  font-size:.95rem; font-family:inherit; background:var(--pt-surface);
  color:var(--pt-text); transition:border-color .15s ease, box-shadow .15s ease; }
.pt-input:focus, .pt-input:focus-visible { outline:none; border-color:var(--pt-verd);
  box-shadow:0 0 0 3px var(--pt-verd-pastel); }
.pt-input::placeholder { color:var(--pt-muted); }
.pt-cerca-hint { display:block; color:var(--pt-muted); font-size:.8rem; margin-top:6px; }
.pt-cerca-res { background:var(--pt-surface); border:1px solid var(--pt-line);
  border-radius:var(--pt-radius-sm); box-shadow:var(--pt-shadow); overflow:hidden;
  margin-top:10px; max-width:640px; }
.pt-cerca-fila { display:flex; align-items:center; gap:8px; padding:10px 14px;
  border-bottom:1px solid var(--pt-line); min-height:44px; }
.pt-cerca-fila:last-child { border-bottom:none; }
.pt-cerca-fila:hover { background:var(--pt-verd-pastel); }
.pt-cerca-fila a { color:var(--pt-verd); text-decoration:none; font-weight:500; }
.pt-cerca-fila a:hover { text-decoration:underline; color:var(--pt-verd-dark); }
.pt-cerca-fila .pt-cerca-cap { text-transform:none; font-weight:400; letter-spacing:0; }

/* Breadcrumb de la fitxa */
.pt-breadcrumb { margin-bottom:12px; font-size:.85rem; }
.pt-breadcrumb .pt-crumb-sep { color:var(--pt-muted); margin:0 6px; }
.pt-breadcrumb .pt-crumb-cur { color:var(--pt-muted); }

/* Enllaços dins de taula → verd de marca (no el blau Bootstrap per defecte) */
.pt-table td a, .pt-table td a:visited { color:var(--pt-verd);
  text-decoration:none; font-weight:500; }
.pt-table td a:hover { color:var(--pt-verd-dark); text-decoration:underline; }

/* Taula clau-valor (registre de la fitxa): 1a col = etiqueta, 2a = valor */
.pt-table-kv .pt-table td:first-child { color:var(--pt-muted); font-weight:400;
  width:38%; white-space:nowrap; }
.pt-table-kv .pt-table td:nth-child(2) { color:var(--pt-text); font-weight:500; }

/* Estat "pendent de dades" (P4): to CALM (argila), no urgència */
.pt-mod-pendent { display:inline-block; background:var(--pt-blau-pastel);
  color:var(--pt-blau); font-size:.72rem; font-weight:600; padding:2px 9px;
  border-radius:var(--pt-radius-sm); margin-left:8px; vertical-align:middle; }
.pt-pendent-text { color:var(--pt-text); font-size:.9rem; line-height:1.55; margin:4px 0 0; }

/* Avís d'ACCIÓ de l'usuari (p.ex. màquina sense vincle) — ambre, diferenciat del P4 */
.pt-avis-card { background:#FBF3E4; border:1px solid var(--pt-ambre);
  border-left:4px solid var(--pt-ambre); border-radius:var(--pt-radius);
  padding:16px 18px; margin-top:16px; box-shadow:var(--pt-shadow); }
.pt-avis-card h3 { font-size:1rem; font-weight:600; color:var(--pt-text); margin:0 0 4px; }
.pt-avis-badge { display:inline-block; background:var(--pt-ambre-fosc); color:#fff;
  font-size:.72rem; font-weight:600; padding:2px 9px; border-radius:var(--pt-radius-sm);
  margin-left:8px; vertical-align:middle; }
.pt-avis-text { color:var(--pt-text); font-size:.9rem; line-height:1.55; margin:4px 0 0; }

/* Graella de targetes per producte (assessor de compra de gasoil): 2 columnes
   que es despleguen a 1 sola a mòbil. */
.pt-mod-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px; margin-top:10px; }

/* ── Telèfon petit (≤ 480px): densitat mínima ── */
@media (max-width: 480px) {
  .pt-topbar { padding:7px 10px; }
  .pt-nav { gap:5px; padding:6px 10px; }
  .pt-main { padding:14px 10px; }
  .pt-kpi { padding:11px 13px; }
  .pt-kpi-val { font-size:1.25rem; }
  .pt-kpi-label { letter-spacing:.3px; }
  .pt-sec { padding:12px 12px; margin-bottom:14px; }
  .pt-sec h3 { font-size:.95rem; }
  .pt-home-grid { grid-template-columns:1fr 1fr; }
  .pt-home-title { font-size:1.2rem; }
  .pt-table { font-size:.8rem; }
  .pt-table th, .pt-table td { padding:6px 8px; }
  .pt-mod-glyph { font-size:1.6rem; }
  .pt-mod-title { font-size:1.2rem; }
}

/* ══ SESHAT · planificació diària (kanban modular) ══════════════════════ */
.ses-controls { display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  justify-content:space-between; margin-bottom:16px; }
/* Navegació de dia = pill segmentat cohesionat [‹ | data | ›] + Avui a part */
.ses-dianav { display:flex; align-items:center; gap:8px; }
.ses-nav-btn { min-width:44px; min-height:44px; border:1px solid var(--pt-line);
  background: var(--pt-surface); border-radius:var(--pt-radius); font-size:1.15rem;
  cursor:pointer; color: var(--pt-verd-dark); font-weight:600; }
.ses-nav-btn:hover { background: var(--pt-verd-pastel);
  border-color: var(--pt-verd); }
.ses-nav-avui { font-size:.85rem; padding:0 16px; }
.ses-dia-label { font-weight:700; min-width:180px; text-align:center;
  font-size:1.02rem; padding:0 8px; border:1px solid var(--pt-line);
  border-radius:var(--pt-radius); min-height:44px; display:inline-flex;
  align-items:center; justify-content:center; background: var(--pt-surface); }
.ses-dia-off { color: var(--pt-muted); }             /* dia ≠ avui, més apagat */
.ses-dia-label:not(.ses-dia-off) { color: var(--pt-verd-dark);
  border-color: var(--pt-verd); background: var(--pt-verd-pastel); }
/* Vistes = control segmentat (pestanyes) */
.ses-vistes { display:flex; flex-wrap:wrap; gap:4px; background: var(--pt-soft);
  border:1px solid var(--pt-line); border-radius:var(--pt-radius); padding:4px; }
.ses-chip { min-height:44px; display:inline-flex; align-items:center; min-height:40px;
  padding:6px 14px; border:1px solid transparent; border-radius:var(--pt-radius-sm);
  background:transparent; cursor:pointer; font-size:.88rem;
  font-weight:600; color: var(--pt-muted); }
.ses-chip:hover { background: var(--pt-verd-pastel); color: var(--pt-verd-dark); }
.ses-chip:has(input:checked) { background: var(--pt-surface); color: var(--pt-verd-dark);
  border-color: var(--pt-verd); box-shadow:0 1px 4px rgba(28,26,23,.1); }
.ses-chip input { position:absolute; opacity:0; pointer-events:none; }
.ses-pregunta { color: var(--pt-muted); font-style:italic; margin:4px 0 10px; }

.ses-det { background: var(--pt-surface); border:1px solid var(--pt-line);
  border-left:4px solid var(--pt-ambre-fosc); border-radius:var(--pt-radius-sm);
  padding:10px 14px; margin-bottom:14px; font-size:.9rem; }
.ses-det-buida { border-left-color: var(--pt-verd); color: var(--pt-muted); }
.ses-det-cap { margin:0 0 6px; font-weight:600; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.05em; color: var(--pt-muted); }
.ses-det-list { margin:0; padding-left:4px; list-style:none; }
.ses-det-list li { margin-bottom:5px; line-height:1.45; }

.ses-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:12px; }
.ses-card { background: var(--pt-surface); border:1px solid var(--pt-line);
  border-radius:var(--pt-radius-sm); padding:12px 14px; box-shadow: var(--pt-shadow, none); }
.ses-card-cap { font-size:.98rem; margin-bottom:8px; display:flex;
  align-items:center; gap:4px; flex-wrap:wrap; }
.ses-card-peu { color: var(--pt-muted); font-size:.82rem; margin:8px 0 0; }
.ses-glyph { font-size:1.1rem; }
.ses-feina { display:flex; justify-content:space-between; align-items:center;
  gap:10px; padding:7px 0; border-top:1px dashed var(--pt-line);
  flex-wrap:wrap; }
.ses-feina:first-child { border-top:none; }
.ses-muted { color: var(--pt-muted); font-size:.86rem; }
.ses-estat { white-space:nowrap; font-size:.84rem; color: var(--pt-muted); }
.ses-mov { margin-top:8px; font-size:.88rem; }

.ses-btn { min-height:44px; }
.ses-btn-2 { background: var(--pt-blau); }
.ses-btn-2:hover { background:#6E3A2D; }
.ses-btn-mini { border:1px solid var(--pt-line); background: var(--pt-soft);
  border-radius:var(--pt-radius-sm); padding:6px 10px; font-size:.8rem; cursor:pointer;
  color: var(--pt-warn-dark); min-height:34px; }
.ses-btn-mini:hover { background: var(--pt-blau-pastel); }

.ses-tr-form, .ses-tanca-form { display:flex; flex-wrap:wrap; gap:8px;
  align-items:center; margin-top:10px; }
.ses-dd { min-width:220px; flex:1; }
.ses-inp-h { width:110px; min-height:38px; border:1px solid var(--pt-line);
  border-radius:var(--pt-radius-sm); padding:4px 10px; }
.ses-inp-m { flex:1; min-width:160px; min-height:38px;
  border:1px solid var(--pt-line); border-radius:var(--pt-radius-sm); padding:4px 10px; }
.ses-radio label { margin-right:12px; }
.ses-col-h { max-width:140px; }

.ses-avis-text { background: var(--pt-soft); border:1px solid var(--pt-line);
  border-radius:var(--pt-radius-sm); padding:10px 12px; font-family:inherit; font-size:.86rem;
  white-space:pre-wrap; margin:8px 0; }

@media (max-width: 768px) {
  .ses-controls { flex-direction:column; align-items:stretch; }
  .ses-vistes { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .ses-chip { min-height:44px; white-space:nowrap; }
  .ses-grid { grid-template-columns:1fr; }
}

/* ── SESHAT · passada IDUN (contrast, targets, focus, jerarquia) ───────── */
/* DS-002: variant argila SEMPRE amb text blanc (6,69:1) */
.ses-btn-2, .ses-btn-2:hover { color:#FFFFFF; }
/* DS-003: target del boto destructiu (Anul·la) */
.ses-btn-mini { min-height:44px; padding:8px 14px; }
/* DS-001: cap font operativa per sota de .84rem; estat a .88rem */
.ses-estat { font-size:.88rem; }
.ses-card-peu { font-size:.84rem; }
.ses-det-cap { font-size:.84rem; }
/* DS-004: zona de controls ancorada + la pregunta guia amb pes de subtitol */
.ses-controls { background: var(--pt-soft); border:1px solid var(--pt-line);
  border-radius:var(--pt-radius); padding:12px 14px; margin-bottom:16px; }
.ses-pregunta { font-size:.95rem; font-weight:500; color: var(--pt-text);
  font-style:normal; margin:0 0 12px; padding:8px 0;
  border-bottom:1px solid var(--pt-line); }
/* DS-005: inputs de tancament alineats amb el sistema (focus ring de marca) */
.ses-inp-h, .ses-inp-m { border:1.5px solid var(--pt-line);
  font-family:inherit; font-size:.95rem; background: var(--pt-surface);
  color: var(--pt-text);
  transition: border-color .15s ease, box-shadow .15s ease; }
.ses-inp-h:focus, .ses-inp-h:focus-visible,
.ses-inp-m:focus, .ses-inp-m:focus-visible {
  outline:none; border-color: var(--pt-verd);
  box-shadow:0 0 0 3px var(--pt-verd-pastel); }
/* Contracte de focus per a tots els interactius SESHAT (teclat) */
.ses-nav-btn:focus-visible, .ses-chip:focus-visible,
.ses-btn-mini:focus-visible {
  outline:none; box-shadow:0 0 0 3px var(--pt-verd-pastel);
  border-color: var(--pt-verd); }
@media (max-width: 768px) {
  .ses-btn-mini { min-height:44px; padding:10px 14px; }
  .ses-inp-h, .ses-inp-m { min-height:44px; font-size:1rem; }
}

/* ── SESHAT · passada FREYA (context temporal + resum de safata) ────────── */
/* Dia seleccionat != avui: fons ambre suau perquè no es planifiqui
   sobre el dia equivocat sense adonar-se'n */
.ses-dia-off { background: #FBF3E0; border:1px solid var(--pt-ambre-fosc);
  color: var(--pt-text); border-radius:var(--pt-radius-sm); padding:6px 10px; }
.ses-av-resum { font-weight:600; font-size:.92rem; margin:0 0 10px;
  color: var(--pt-text); }
/* Panell «qui falta per confirmar» (d'un cop d'ull) */
.ses-av-panell { border:1px solid var(--pt-line); border-radius:var(--pt-radius);
  background: var(--pt-surface); padding:12px 14px; margin:0 0 12px; }
.ses-av-cap { font-weight:600; margin:0 0 8px; }
.ses-av-linia { font-size:.92rem; margin:3px 0; }
.ses-av-accions { display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin-top:6px; }

/* ── SESHAT 2.0 · tauler de targetes (columnes + drag&drop) ─────────────── */
/* El tauler ocupa TOTA l'amplada de pantalla (full-bleed), la resta de la
   pàgina es queda centrada. És l'apartat de treball intensiu amb volum. */
.ses-tauler-wrap { width:100vw; margin-left:calc(50% - 50vw);
  padding:0 clamp(12px, 3vw, 40px); box-sizing:border-box; }
.ses-tauler { display:flex; gap:12px; align-items:flex-start;
  overflow-x:auto; padding-bottom:10px; }
.ses-tcol { flex:0 0 288px; min-width:288px; background: var(--pt-soft);
  border:1px solid var(--pt-line); border-radius:var(--pt-radius); padding:10px; }
.ses-tcol-parc { background: var(--pt-surface);
  border-style:dashed; flex:0 0 250px; min-width:250px; }
.ses-tcol-cap { margin-bottom:8px; }
.ses-tcol-titol { font-size:.95rem; margin-bottom:2px; word-break:break-word; }
/* Client + KPIs fàcils d'obra */
.ses-tcol-client { color: var(--pt-muted); font-size:.82rem; margin:0 0 4px;
  font-weight:600; word-break:break-word; }
.ses-tcol-kpis { display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  font-size:.8rem; margin:2px 0 4px; }
.ses-tcol-badge { padding:1px 8px; border-radius:999px; font-weight:600;
  font-size:.76rem; background: var(--pt-line); color: var(--pt-muted); }
.ses-tcol-badge-on { background: var(--pt-verd-pastel); color: var(--pt-verd-dark); }
.ses-tcol-ritme { color: var(--pt-verd-dark); font-weight:600;
  font-size:.86rem; margin:2px 0; }
.ses-tcol-sub { color: var(--pt-muted); font-size:.84rem; margin:2px 0; }
.ses-tcol-nota { color: var(--pt-text-ambre); font-size:.8rem; margin:2px 0; }
.ses-tcol-sec { font-size:.74rem; letter-spacing:.05em; text-transform:uppercase;
  color: var(--pt-muted); font-weight:600; margin:10px 0 4px; }
.ses-tcol-cards { display:flex; flex-direction:column; gap:6px;
  min-height:34px; max-height:46vh; overflow-y:auto; padding:2px; }
.ses-tcol-peu { display:flex; gap:6px; align-items:center; margin-top:8px; }

.ses-tcard { display:flex; gap:8px; align-items:flex-start;
  background: var(--pt-surface); border:1px solid var(--pt-line);
  border-radius:var(--pt-radius-sm); padding:8px 10px; cursor:pointer; min-height:44px;
  transition: box-shadow .1s ease, border-color .1s ease; }
.ses-tcard:hover { border-color: var(--pt-verd); }
.ses-tcard-sel { border:2px solid var(--pt-verd);
  box-shadow:0 0 0 3px var(--pt-verd-pastel); }
.ses-tcard-cos { display:flex; flex-direction:column; gap:1px;
  font-size:.9rem; min-width:0; word-break:break-word;
  overflow-wrap:anywhere; line-height:1.25; }
.ses-tcard-maq { color: var(--pt-muted); font-size:.84rem; }
.ses-tcard-sub { color: var(--pt-muted); font-size:.8rem; }
.ses-card-drag { touch-action:manipulation; }
.sortable-ghost { opacity:.4; }
.sortable-drag { box-shadow:0 8px 20px rgba(28,26,23,.25); }

.ses-colbtn { width:100%; border:1px dashed var(--pt-verd);
  background: var(--pt-verd-pastel); color: var(--pt-verd-dark);
  border-radius:var(--pt-radius-sm); padding:8px; font-size:.82rem; font-weight:600;
  cursor:pointer; min-height:38px; margin-top:6px; }
.ses-colbtn:hover { background: var(--pt-verd); color:#fff; }
.ses-btn-est { color: var(--pt-verd-dark); }

.ses-bar { height:8px; background: var(--pt-line); border-radius:var(--pt-radius-sm);
  overflow:hidden; margin:6px 0 2px; }
.ses-bar-fill { height:100%; background: var(--pt-verd); border-radius:var(--pt-radius-sm); }

@media (max-width: 768px) {
  .ses-tcol { flex:0 0 84vw; min-width:84vw; }
  .ses-tcol-parc { flex:0 0 76vw; min-width:76vw; }
  .ses-tcol-cards { max-height:38vh; }
}

/* ── SESHAT 2.0 · ronda 1 agents (IDUN r2 + NJORD + FREYA) ──────────────── */
/* DS-S01: nota de calibratge llegible (abans 3.66:1 sobre --pt-soft) */
/* El color d'aquesta nota ja el mana --pt-text-ambre a la seva regla de
   dalt; abans hi havia aqui un hex a pel que la tapava. */
.ses-tcol-nota { font-size:.82rem; font-weight:500; }
/* DS-S02: seleccio tap-tap INEQUIVOCA (halo verd pur + fons tenyit) */
.ses-tcard-sel { border:2px solid var(--pt-verd);
  background: var(--pt-verd-pastel);
  box-shadow:0 0 0 3px rgba(27,94,52,.28); }
/* DS-S03: drag llegible + zona de desti marcada (:has, no cal JS extra) */
.sortable-ghost { opacity:.35; border-radius:var(--pt-radius-sm); }
.sortable-drag { opacity:1; box-shadow:0 10px 28px rgba(28,26,23,.30); }
.ses-tcol-cards:has(.sortable-ghost) { outline:2px dashed var(--pt-verd);
  outline-offset:3px; background: var(--pt-verd-pastel); border-radius:var(--pt-radius-sm); }
/* DS-S04: track de la barra de progres visible (abans 1.05:1). Els literals
   han passat a token (--pt-track) el 20-08, quan el mateix forat va reapareixer
   a dues barres noves. */
.ses-bar { height:10px; background:var(--pt-track);
  border:1px solid var(--pt-track-vora); }
.ses-bar-fill { border-radius:4px; }
/* Jerarquia tipografica de columna (3 nivells) */
.ses-tcol-sec { font-size:.78rem; }
.ses-tcol-sub { font-size:.85rem; }
.ses-tcol-ritme { font-size:.875rem; font-weight:500; }
/* DS-S05: scroll amb snap + sense conflicte de gestos */
.ses-tauler { scroll-snap-type:x proximity; overscroll-behavior-x:contain; }
.ses-tcol { scroll-snap-align:start; }

/* NJORD/FREYA: la targeta triada i les complementaries HO DIUEN */
.ses-tcard-badge { display:inline-block; background: var(--pt-verd);
  color:#fff; font-size:.76rem; font-weight:600; border-radius:var(--pt-radius-sm);
  padding:2px 8px; margin-top:3px; }
.ses-tcard-lliga { background: var(--pt-blau); }
/* Banner de viatges pendents amb drecera */
.ses-banner-tr { display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  background: var(--pt-surface); border:1px solid var(--pt-warn);
  border-left:4px solid var(--pt-warn); border-radius:var(--pt-radius-sm);
  padding:8px 12px; margin-bottom:10px; font-size:.9rem; }
.ses-btn-goto { color: var(--pt-verd-dark); font-weight:600; }
/* Controls del tauler (obrir obra + portar màquina del catàleg) */
.ses-tauler-ctrls { display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 4px;
  align-items:center; }
.ses-tauler-ctrls .ses-ctrls-cap { flex:0 0 100%; margin:0 0 2px;
  font-weight:600; font-size:.9rem; color: var(--pt-muted); }
.ses-tauler-ctrls .ses-tr-form { flex:1 1 320px; margin:0; }
/* Barra d'agilitat: comptador «sense destí» + cercador global */
.ses-tauler-barra { display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:10px; margin:4px 0 10px; }
.ses-tauler-compt { font-size:.95rem; }
.ses-tauler-compt strong { color: var(--pt-verd-dark); }
/* DS-S10: target tàctil ≥44px (WCAG 2.5.8) */
.ses-tauler-cerca { flex:1 1 260px; max-width:420px; min-height:44px;
  border:1.5px solid var(--pt-line); border-radius:var(--pt-radius-sm); padding:8px 12px;
  font-family:inherit; font-size:.95rem; background: var(--pt-surface); }
.ses-tauler-cerca:focus, .ses-tauler-cerca:focus-visible { outline:none;
  border-color: var(--pt-verd); box-shadow:0 0 0 3px var(--pt-verd-pastel); }
@media (max-width: 600px) {
  .ses-tauler-barra { flex-direction:column; align-items:stretch; }
  .ses-tauler-cerca { max-width:100%; }
}
/* Configuració plegada (un sol cop, fora del flux diari) */
.ses-config { margin-top:14px; border:1px solid var(--pt-line);
  border-radius:var(--pt-radius); background: var(--pt-surface); }
.ses-config[open] { padding-bottom:6px; }
.ses-config-sum { cursor:pointer; padding:12px 16px; font-weight:600;
  color: var(--pt-verd-dark); list-style:none; display:flex;
  align-items:center; }
.ses-config-sum::-webkit-details-marker { display:none; }
/* DS-S11: chevron CSS que rota (affordance d'estat clar) + focus visible */
.ses-config-sum::before { content:""; display:inline-block; width:0; height:0;
  border-top:5px solid transparent; border-bottom:5px solid transparent;
  border-left:4px solid var(--pt-verd-dark); margin-right:9px;
  transition:transform .2s ease; }
.ses-config[open] .ses-config-sum::before { transform:rotate(90deg); }
.ses-config-sum:focus-visible { outline:none; border-radius:var(--pt-radius);
  box-shadow:0 0 0 3px var(--pt-verd-pastel); border-color: var(--pt-verd); }
.ses-config .pt-section, .ses-config section { margin:0 8px 6px; }
/* Panell d'avisos: jerarquia semàfor (DS-S14) */
.ses-av-panell { border-top:3px solid var(--pt-ambre-fosc); }
.ses-av-panell.ses-av-tot-ok { border-top-color: var(--pt-verd);
  background: var(--pt-verd-pastel); }
.ses-av-cap { font-size:1rem; }
/* Tancament en lot */
.ses-tanca-lot { display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:0 0 12px; padding:10px 12px; border:1px solid var(--pt-line);
  border-radius:var(--pt-radius-sm); background: var(--pt-surface); }
/* Banner de transport en vermell (error operacional) */
.ses-banner-tr-r { border-color: var(--pt-warn); border-left-color: var(--pt-warn); }
/* DS-S13: text operatiu de targeta a 14px mínim (llegibilitat) */
.ses-tcard-sub { font-size:.875rem; }
/* DS-S12: track de la barra de progrés amb contrast ≥3:1 (WCAG 1.4.11) */
.ses-bar { background:#7E7568; }
/* FREYA: el feedback acompanya l'scroll */
.ses-fb-sticky { position:sticky; top:8px; z-index:60; }
.ses-fb-sticky > div { box-shadow:0 4px 14px rgba(28,26,23,.18); }
/* Boto del parc diferenciat del de les obres (evitar el toc equivocat) */
.ses-colbtn-parc { border-color: var(--pt-blau); background: var(--pt-blau-pastel);
  color: var(--pt-blau); }
.ses-colbtn-parc:hover { background: var(--pt-blau); color:#fff; }

@media (max-width: 768px) {
  .ses-tcol { flex:0 0 78vw; min-width:78vw; }
  .ses-tcol-parc { flex:0 0 70vw; min-width:70vw; }
  .ses-tcol-cards { overscroll-behavior-y:contain; }
}

/* CTA d'empty state (HORUS i futurs): botó prominent, no una nota al peu.
   Autocontingut perquè funcioni sobre un <a> (dcc.Link) sense dependre de .btn. */
.pt-empty-cta { margin-top: 16px; }
.pt-empty-cta a.pt-btn,
.pt-empty-cta a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 10px 20px; background: var(--pt-verd); color: #fff;
  border-radius: var(--pt-radius-sm, 9px); text-decoration: none;
  font-weight: 600; font-size: .9rem;
}
.pt-empty-cta a:hover { background: var(--pt-verd-dark); color: #fff; }

/* ══ IMHOTEP · gestió de recursos (Fase C) ══════════════════════════════ */
.rec-grup-cap { display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-bottom:8px; }
.rec-chips { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 8px; }
.rec-chip { display:inline-flex; align-items:center; gap:2px; padding:3px 4px 3px 10px;
  border:1px solid var(--pt-line); border-radius:999px; background: var(--pt-surface);
  font-size:.86rem; }
/* La × es veu petita però l'àrea tocable és ≥44px (::after invisible) — acció
   destructiva usable amb guants al mòbil (WCAG 2.5.8). */
.rec-chip-x { position:relative; border:none; background:transparent;
  cursor:pointer; font-size:1rem; line-height:1; color: var(--pt-muted);
  min-width:24px; min-height:24px; padding:0; }
.rec-chip-x::after { content:""; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); width:44px; height:44px; }
.rec-chip-x:hover { color: var(--pt-warn); }
.rec-llista { display:flex; flex-direction:column; }

/* Coherència /recursos: chip de tipus/categoria, filtre i blocs del form. */
/* Chip: text carbó sobre pastel (contrast ~9,6:1, AA) — no verd sobre verd. */
.rec-tipus-tag { display:inline-block; margin-left:6px; padding:1px 8px;
  background:var(--pt-verd-pastel); color:var(--pt-text);
  border-radius:var(--pt-radius-sm); font-size:.78rem; font-weight:600;
  white-space:nowrap; }
/* Tag secundari (grau de conveni): gris, sense fons, per no competir amb la funció. */
.rec-cat-tag { display:inline-block; margin-left:6px; color:var(--pt-muted);
  font-size:.78rem; font-weight:600; white-space:nowrap; }
/* Filtre ancorat visualment a la LLISTA de sota (no al formulari de dalt). */
.rec-filtre-row { display:flex; align-items:center; gap:8px; margin:16px 0 6px;
  flex-wrap:wrap; border-top:1px solid var(--pt-line); padding-top:12px; }
.rec-filtre-dd { min-width:240px; }
/* Blocs del form: accent verd PUR + fons propi → "dues coses separades". */
.rec-form-block { border-left:3px solid var(--pt-verd); padding-left:14px;
  padding-right:10px; background:var(--pt-soft);
  border-radius:0 var(--pt-radius-sm) var(--pt-radius-sm) 0; }
.rec-form-block > strong { display:block; margin-bottom:6px; color:var(--pt-verd-dark); }
.rec-sub-note { color:var(--pt-muted); font-size:.875rem; margin:0 0 6px;
  line-height:1.5; }

/* Flota unificada: pestanyes del mòdul (📍 Ara mateix / 📊 Estat i ús / ⛽ Consum). */
/* Marge retallat (ronda 5 del judici cec): la tira de pestanyes costava
   79 px MESURATS al navegador, i cada 32 px d'aquests son una fila de
   taula que no es veu. El `min-height:44px` del tab NO es toca: es el
   minim tocable de la casa i no es negocia per guanyar una fila. */
.flota-tabs { margin:8px 0 10px; border-bottom:1px solid var(--pt-line); }
.flota-tab { border:none !important; background:transparent !important;
  color:var(--pt-muted) !important; font-weight:600; font-size:.95rem;
  min-height:44px !important; display:inline-flex !important; align-items:center;
  gap:5px; padding:8px 18px !important;
  border-bottom:3px solid transparent !important; }
.flota-tab:hover { color:var(--pt-verd-dark) !important;
  background:var(--pt-verd-pastel) !important; }
/* Actiu: PINDOLA SOLIDA, la mateixa estetica que MIDGARD te fixada per a tota
   la plataforma («el gerent vol UNA sola estetica de pestanyes», style.css:434,
   passada UX del 07-25). DUAT reutilitzava el nom `flota-tab*` pero pintava un
   subratllat, i qui ve de MIDGARD nota que «es comporten diferent» sense saber
   dir per que. NO nomes color: la pindola canvia superficie, pes i contrast
   (WCAG 1.4.1), i el blanc sobre verd fosc dona 8,6:1. */
.flota-tab-sel { color:#FFFFFF !important; font-weight:600;
  background:var(--pt-verd-dark) !important;
  border-radius:999px !important;
  border-bottom:3px solid transparent !important; }
.flota-tab-sel:hover { color:#FFFFFF !important;
  background:var(--pt-verd-dark) !important; }
.flota-tab-cards { display:flex; flex-direction:column; }
@media (max-width:480px) {
  .flota-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .flota-tab { padding:8px 10px !important; font-size:.82rem !important; }
}

/* Licitacions públiques (/licitacions) */
.lic-obj { line-height:1.35; }
/* .875rem (12.25px) = pis mínim de text amb informació (IDUN DS-001). */
.lic-sub { display:block; color:var(--pt-muted); font-size:.875rem; line-height:1.45; }
.lic-classif { color:var(--pt-verd-dark); font-weight:600; }
.lic-mini { color:var(--pt-muted); font-size:.8rem; }
.lic-strong { font-weight:700; color:var(--pt-verd-dark); }
/* Enllaç amb àrea de toc >=44px (IDUN DS-004, WCAG 2.5.8). */
.lic-link { display:inline-block; min-height:44px; padding:10px 2px; line-height:24px;
  color:var(--pt-verd-dark); font-weight:600; text-decoration:none; white-space:nowrap; }
.lic-link:hover { text-decoration:underline; }

/* Estats de la clàusula del 5% d'àrid — color propi, no només caràcter (IDUN DS-002). */
.lic-estat-ok  { color:var(--pt-verd-dark); font-weight:600; font-size:.875rem; }
.lic-estat-err { color:var(--pt-warn-dark); font-weight:600; font-size:.875rem; }
.lic-estat-pnd { color:var(--pt-muted); font-size:.875rem; }

/* Badge de procediment i urgència de termini. */
.lic-badge { display:inline-block; background:var(--pt-soft); color:var(--pt-text);
  border:1px solid var(--pt-line); border-radius:var(--pt-radius-sm); padding:2px 8px; font-size:.8rem;
  font-weight:600; white-space:nowrap; }
.lic-termini { font-weight:600; }
.lic-urg-sub { color:var(--pt-muted); font-size:.8rem; font-weight:400; }
.lic-urg-alta { color:var(--pt-warn-dark); font-weight:700; }
.lic-urg-alta .lic-urg-sub { color:var(--pt-warn-dark); }
.lic-urg-mitja { color:var(--pt-text-ambre); font-weight:700; }
.lic-urg-mitja .lic-urg-sub { color:var(--pt-text-ambre); }

/* Estat de dades + llegenda dels dos nivells. */
.lic-fresc { color:var(--pt-muted); font-size:.85rem; margin:2px 0 12px; }
.lic-llegenda { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 16px; }
.lic-leg { font-size:.85rem; color:var(--pt-text); background:var(--pt-surface);
  border:1px solid var(--pt-line); border-left-width:4px; border-radius:var(--pt-radius-sm);
  padding:7px 12px; line-height:1.4; }
.lic-leg-n1 { border-left-color:var(--pt-verd); }
.lic-leg-n2 { border-left-color:var(--pt-blau); }

/* ── PRESSUPOST · l'editor (/pressupost) ──────────────────────────────────
   Reutilitza els inputs de SESHAT (.ses-inp-*, .ses-tr-form) i el sistema de
   targetes/taules de _modbase. Aquí només el que és propi d'aquesta pàgina:
   el desplegable, el retorn d'una acció d'escriptura i els dos distintius de
   l'arbre (l'estat i el capítol). */
.pt-dd { min-width:180px; flex:1; }
.pt-dd.ses-inp-s { flex:0 0 170px; min-width:170px; }
.ses-inp-s { width:150px; min-height:38px; border:1.5px solid var(--pt-line);
  border-radius:var(--pt-radius-sm); padding:4px 10px; font-family:inherit; font-size:.95rem;
  background:var(--pt-surface); color:var(--pt-text);
  transition:border-color .15s ease, box-shadow .15s ease; }
.ses-inp-s:focus, .ses-inp-s:focus-visible { outline:none;
  border-color:var(--pt-verd); box-shadow:0 0 0 3px var(--pt-verd-pastel); }

/* Retorn d'escriptura. Mai NOMES el color: el text ja diu que ha passat, i
   el simbol el repeteix per a qui no distingeixi verd de vermell (WCAG 1.4.1). */
.pt-fb { margin:10px 0; }
.pt-fb-ok, .pt-fb-err { border-radius:var(--pt-radius); padding:10px 14px;
  font-size:.92rem; border:1px solid; }
.pt-fb-ok { background:var(--pt-verd-pastel); border-color:var(--pt-verd);
  color:var(--pt-text); }
.pt-fb-ok::before { content:"✔ "; font-weight:700; }
.pt-fb-err { background:var(--pt-soft); border-color:var(--pt-warn);
  color:var(--pt-warn-dark); }
.pt-fb-err::before { content:"⚠ "; font-weight:700; }

/* «Certificacions emeses» amb els mesos a l'eix horitzontal (22-08). Una
   cel·la per mes, i l'estat NO es diu nomes amb el color: l'aprovada porta pes
   i l'anul·lada va ratllada, que es la forma. El motiu i qui la va emetre
   viatgen al `title` — la taula plana en tenia una columna cadascun i amb els
   mesos a l'eix no hi caben, pero perdre-ho seria tornar a corregir a cegues. */
.pt-cert-aprovada { font-weight:600; color:var(--pt-verd-dark); }
.pt-cert-anullada { text-decoration:line-through; color:var(--pt-muted);
  font-size:.78rem; cursor:help; margin-left:4px; }

/* LA CUA DE REVISIO D'HORES (22-08). Es llegeix per OBRA: cada obra porta el
   seu encapcalament i la seva taula, i la unitat es la LINIA que no quadra, mai
   la persona. La nota i el boto van a la MATEIXA linia: apilats, la fila creix
   el doble i deixa de llegir-se d'una ullada — i es el que passava sense
   aquesta regla, perque la classe no en tenia cap. */
.ses-cua-revisio { display:flex; flex-direction:column; gap:14px; }
.ses-cua-obra .ses-det-cap { margin:0 0 4px; font-size:.82rem;
  color:var(--pt-muted); letter-spacing:.02em; }
.ses-cua-resol { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  justify-content:flex-end; }
/* El punt d'equilibri, i les DUES vores es van veure al navegador: amb 180px
   la casella no cabia i el boto queia a sota (una nota i el seu boto en dues
   linies es llegeixen com dues coses); amb `min-width:0` la casella
   s'encongia fins a DESAPAREIXER, i un camp que no es veu no es un camp —
   pitjor que apilat. 130px i `wrap`: es veu sempre, i nomes s'apila quan de
   debo no hi cap. */
.ses-cua-resol .ses-inp-m { min-width:130px; flex:1 1 130px; }
.ses-cua-resol .pt-btn { flex:0 0 auto; }
@media (max-width: 768px) {
  /* A un telefon la nota ocupa tota l'amplada i el boto va sota, alineat amb
     ella: aqui apilar SI que es correcte, i s'ha de dir. */
  .ses-cua-resol { justify-content:flex-start; }
  .ses-cua-resol .ses-inp-m { width:100%; }
}

/* La FILA DE TOTALS de la relacio valorada (22-08). El paper la porta des del
   21-08 amb fons i linia; a la pantalla hi era sense cap pes i es llegia com una
   linia mes. Vora a sobre i fons: es el que separa un total d'una fila. */
.pt-rv-totals tbody tr:last-child td { border-top:2px solid var(--pt-verd);
  background:var(--pt-verd-pastel); font-weight:600; }

/* Estat del pressupost. El pes i la vora el fan llegible en gris tambe. */
.pt-tag { display:inline-block; border:1px solid var(--pt-line);
  border-radius:999px; padding:2px 10px; font-size:.78rem; font-weight:600;
  color:var(--pt-muted); background:var(--pt-soft); vertical-align:middle; }
.pt-tag.ok { border-color:var(--pt-verd); color:var(--pt-text);
  background:var(--pt-verd-pastel); }
.pt-tag.warn { border-color:var(--pt-warn); color:var(--pt-warn-dark); }
/* fons propi: nomes amb la vora, "ofert" i "esborrany" eren indistingibles a
   la llista, que es on s'escaneja l'estat de cop d'ull. */
.pt-tag.gold { border-color:var(--pt-blau); color:var(--pt-text);
  background:var(--pt-blau-pastel); }

/* Un capitol no es una partida: el to el separa sense cridar. Al hover, el
   gris sobre el verd pastel es queda a 4,58:1 -- passa AA per 0,08, un marge
   que qualsevol pantalla es menja. Sobre fila activa, text ple (13,1:1). */
.pt-cap { color:var(--pt-muted); letter-spacing:.02em; }
.pt-table tr:hover .pt-cap { color:var(--pt-text); }

/* Sagnat de l'arbre PER NIVELL. Abans es feia amb espais dins d'un span i
   l'HTML els col·lapsa: totes les files sortien al mateix marge i la jerarquia
   no es veia (el contrari del que la pagina promet). 16px = el grid de 8pt del
   sistema. Patro de treegrid del WAI-ARIA: sagnat per estil, mai per caracters. */
.pt-arbre-nom { display:inline-flex; align-items:baseline; }

/* Target tactil dels desplegables: Dash els renderitza a ~36px i son l'entrada
   de cada formulari d'aquesta pagina. 44px es el minim que es pot encertar amb
   el dit a la primera (WCAG 2.5.5). Va a TOTS els .pt-dd, no nomes als petits:
   la regla anterior nomes cobria .pt-dd.ses-inp-s i deixava fora els sis
   desplegables amples (triar pressupost, partida, recurs...). */
.pt-dd .Select-control, .pt-dd .Select-placeholder,
.pt-dd .Select--single > .Select-control .Select-value { min-height:44px; }
.pt-dd .Select-placeholder, .pt-dd .Select-value { line-height:44px; }
.ses-radio input[type="checkbox"] { width:20px; height:20px;
  margin-right:6px; vertical-align:middle; }
.ses-radio label { display:inline-flex; align-items:center; min-height:44px; }

@media (max-width: 768px) {
  .ses-inp-s, .pt-dd.ses-inp-s { width:100%; flex:1 1 100%; min-height:44px; }
  .pt-dd { min-width:100%; }
}

/* ── La pantalla d'entrada · accions, no llocs ────────────────────────────
   Concepte del gerent (19-08): una pregunta i respostes grans, pensades per a
   una ma i el sol de cara. Res centrat: a l'esquerra s'escaneja, i l'ull no ha
   de tornar al mig a cada linia. */
.pt-home { max-width: 760px; margin: 0 auto; padding: 8px 0 40px; }
.pt-home-q { font-size: 1.55rem; font-weight: 600; letter-spacing: -.015em;
  margin: 6px 0 18px; text-wrap: balance; }

.pt-acc-llista { display: flex; flex-direction: column; gap: 10px; }
.pt-acc { display: flex; flex-direction: column; justify-content: center;
  gap: 3px; min-height: 68px; padding: 14px 18px;
  background: var(--pt-surface); border: 1px solid var(--pt-line);
  border-radius: var(--pt-radius); box-shadow: var(--pt-shadow);
  text-decoration: none; color: var(--pt-text);
  transition: border-color .15s ease, transform .15s ease; }
.pt-acc:hover, .pt-acc:focus-visible { border-color: var(--pt-verd);
  transform: translateY(-1px); }
.pt-acc-verb { font-size: 1.12rem; font-weight: 600; line-height: 1.25; }
/* El recompte es DADA: mateixa amplada de xifra i color de marca segur. */
.pt-acc-n { font-size: .92rem; color: var(--pt-text-verd); font-weight: 500;
  font-variant-numeric: tabular-nums; }
.pt-acc-sub { font-size: .92rem; color: var(--pt-muted); }

/* Tot el tauler, a sota i tranquil: no es perd res, pero no competeix. */
.pt-home-peu { margin-top: 34px; padding-top: 18px;
  border-top: 1px solid var(--pt-line); }
.pt-home-peu-t { font-size: .78rem; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--pt-muted); margin: 0 0 14px; }
.pt-mod-mini-grup { margin-bottom: 14px; }
.pt-mod-mini-pilar { display: block; font-size: .74rem; color: var(--pt-muted);
  margin-bottom: 6px; }
.pt-mod-mini-fila { display: flex; flex-wrap: wrap; gap: 8px; }
.pt-mod-mini { display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 8px 14px; border-radius: var(--pt-radius-sm);
  background: var(--pt-soft); border: 1px solid var(--pt-line);
  color: var(--pt-text); text-decoration: none; font-size: .9rem; }
.pt-mod-mini:hover, .pt-mod-mini:focus-visible { border-color: var(--pt-verd);
  background: var(--pt-verd-pastel); }
.pt-mod-mini-glyph { font-size: 1rem; }

@media (max-width: 768px) {
  .pt-home-q { font-size: 1.35rem; }
  .pt-acc { min-height: 72px; }        /* dit gros, guants, sol de cara */
  .pt-mod-mini { flex: 1 1 calc(50% - 4px); justify-content: center; }
}

/* ═════════════════════════════════════════════════════════════════════════
   /avui · el semàfor i el full de ruta (vies 2 i 1 de la proposta del 19-08)

   Dues llistes, no dues graelles de targetes: totes dues es llegeixen de dalt
   a baix i cap element ha de competir amb el del costat. Els colors surten
   dels tokens de text (--pt-text-*), mai dels de fons: --pt-ambre és 2,86:1 i
   com a text no es pot fer servir.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── El semàfor ─────────────────────────────────────────────────────────── */
.pt-exc-llista { display: flex; flex-direction: column; }
.pt-exc { display: flex; align-items: center; gap: 12px;
          padding: 12px 2px; border-bottom: 1px solid var(--pt-line); }
.pt-exc:last-child { border-bottom: 0; }
.pt-exc-bar { flex: 0 0 3px; align-self: stretch; min-height: 34px;
              border-radius: 2px; background: var(--pt-muted); }
.pt-exc-bar.mal { background: var(--pt-text-warn); }
.pt-exc-bar.avis { background: var(--pt-text-ambre); }
.pt-exc-cos { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto;
              min-width: 0; }
.pt-exc-t { font-size: .98rem; font-weight: 600; line-height: 1.3; }
.pt-exc-p { font-size: .86rem; color: var(--pt-muted); line-height: 1.4; }
/* La xifra és l'ancoratge i alhora la porta al detall: alineada a la dreta,
   tabular perquè les columnes de números no ballin. */
.pt-exc-x { flex: 0 0 auto; font-size: .95rem; font-weight: 600;
            font-variant-numeric: tabular-nums; text-decoration: none;
            color: var(--pt-text); padding: 6px 8px; min-height: 44px;
            display: inline-flex; align-items: center;
            border-radius: var(--pt-radius-sm); }
.pt-exc-x.mal { color: var(--pt-text-warn); }
.pt-exc-x.avis { color: var(--pt-text-ambre); }
.pt-exc-x:hover, .pt-exc-x:focus-visible { background: var(--pt-soft); }
.pt-exc-calma { color: var(--pt-text-verd); font-size: .95rem; font-weight: 500;
                margin: 4px 0; }
.pt-exc-mes { display: inline-block; margin-top: 10px; font-size: .86rem;
              color: var(--pt-muted); }

/* ── El full de ruta ────────────────────────────────────────────────────── */
.pt-ruta { display: flex; flex-direction: column; gap: 12px; }
.pt-ruta-bloc { border: 1px solid var(--pt-line); border-radius: var(--pt-radius);
                padding: 12px 14px; }
.pt-ruta-bloc.lliure { background: var(--pt-soft); display: flex;
                       justify-content: space-between; align-items: center;
                       gap: 10px; flex-wrap: wrap; }
.pt-ruta-cap { display: flex; justify-content: space-between; align-items: flex-start;
               gap: 10px; margin-bottom: 8px; }
.pt-ruta-obra { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.pt-ruta-sub { margin: 2px 0 0; font-size: .84rem; color: var(--pt-muted); }
.pt-ruta-persona { display: flex; justify-content: space-between; gap: 12px;
                   padding: 6px 0; font-size: .93rem;
                   border-top: 1px solid var(--pt-line); }
.pt-ruta-maq { color: var(--pt-text-verd); text-align: right; }
.pt-ruta-maq.buida { color: var(--pt-muted); font-style: italic; }
.pt-ruta-lliure { font-size: .93rem; font-weight: 600;
                  font-variant-numeric: tabular-nums; }
.pt-ruta-buit { color: var(--pt-muted); margin: 0 0 12px; line-height: 1.5; }

/* ── L'etiqueta d'estat i el títol del detall ───────────────────────────── */
.pt-chip { display: inline-flex; align-items: center; font-size: .78rem;
           font-weight: 500; padding: 3px 9px; border-radius: 999px;
           background: var(--pt-soft); color: var(--pt-muted);
           white-space: nowrap; }
.pt-chip.ok { background: var(--pt-verd-pastel); color: var(--pt-verd-dark); }
/* El detall baixa de lloc, i el títol ho ha de dir sense cridar. */
.pt-detall-t { margin: 26px 0 12px; font-size: .8rem; font-weight: 600;
               text-transform: uppercase; letter-spacing: .06em;
               color: var(--pt-muted); }

@media (max-width: 768px) {
  /* A l'obra, amb una mà: la xifra no s'encongeix i la fila creix. */
  .pt-exc { padding: 14px 2px; }
  .pt-exc-x { min-height: 48px; }
  .pt-ruta-persona { padding: 8px 0; }
  .pt-ruta-cap { flex-direction: column; }
}

/* ── Control econòmic · barres de la cartera per estat ──────────────────
   Una sola tinta: els estats ja porten el nom escrit i codificar-los per to
   afegiria un canal que en protanòpia no diu res (verd i argila de marca es
   diferencien en dE 1,5). La barra només ha de dir la MAGNITUD. */
.ce-barres { display:flex; flex-direction:column; gap:14px; }
.ce-barra-cap { display:flex; align-items:center; gap:10px; margin-bottom:5px; }
.ce-barra-n { color:var(--pt-muted); font-size:.85rem; }
.ce-barra-eur { margin-left:auto; font-weight:600; color:var(--pt-text); }
.ce-barra-solc { background:var(--pt-track); border:1px solid var(--pt-track-vora);
  border-radius:999px; height:10px; overflow:hidden; }
.ce-barra-omplert { background:var(--pt-verd); height:100%; border-radius:999px;
  min-width:3px; }
@media (max-width: 480px) {
  .ce-barra-cap { flex-wrap:wrap; gap:6px; }
  .ce-barra-eur { margin-left:0; width:100%; }
}

/* ── Les PASTILLES del pressupost ───────────────────────────────────────
   Una partida sencera per peca. La CARA la posa .ses-card, que es el patro de
   targeta que ja fa servir el tancament del dia a planificacio: el gerent ja
   el te vist i aprovat, i dues cares diferents per a la mateixa idea nomes
   obliguen a aprendre-se-la dues vegades. Aqui nomes hi ha el que .ses-card
   no sap fer: el SAGNAT per nivell de l'arbre.
   NO es fa servir .ses-grid: es un mosaic de columnes i destruiria l'ordre de
   lectura que l'arbre es guanya recorrent pare-abans-que-fills. */
.pt-pastilles { display:flex; flex-direction:column; gap:10px; }

/* L'ARBRE COM A TAULA (22-08). El patro central del barem: «les linies son UNA
   taula». La sagnia de la jerarquia la posa `style_data_conditional` per
   {nivell} des del Python —es PRESENTACIO i no pot anar enganxada al text del
   codi, o el codi deixa de ser el codi—, aixi que aqui nomes hi ha el que
   diu que una fila es CLICABLE i la cara del panell de la fila triada.
   Sense cap boto a l'arbre, el cursor es l'unica pista que hi ha: sense
   aixo la taula sembla nomes de lectura. */
#pres-arbre .dash-cell { cursor:pointer; }
#pres-arbre .dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td {
  background:var(--pt-verd-pastel); }

/* El panell de la fila triada: les accions i les hores, UNA vegada i a sota.
   Va marcat amb la vora de marca a l'esquerra, la mateixa que du la fila
   seleccionada a la taula: es el que lliga el panell amb la linia de la qual
   parla. Sense el lligam, a un pressupost de 40 linies no se sap de qui es. */
.pt-arbre-tria { margin-top:10px; padding:10px 12px;
  background:var(--pt-soft); border:1px solid var(--pt-line);
  border-left:3px solid var(--pt-verd); border-radius:8px; }
.pt-arbre-tria-cap { display:flex; flex-wrap:wrap; gap:4px; align-items:baseline;
  margin-bottom:6px; }
.pt-arbre-tria-desc { color:var(--pt-muted); }
.pt-past-hores { list-style:none; margin:8px 0 0; padding:0; }
.pt-past-q { font-weight:600; color:var(--pt-text); }
.pt-past-cost { color:var(--pt-text); }
/* Un cost desconegut no es pinta de vermell d'alarma: no es un error, es una
   dada que falta. Pero s'ha de distingir d'un import de debo. */
.pt-past-sensecost { color:var(--pt-text-ambre); font-style:italic; }
.pt-past-btn { margin-top:8px; }
.pt-past-form { margin-top:10px; padding-top:10px;
  border-top:1px dashed var(--pt-line); }
.pt-past-camp { display:flex; flex-direction:column; gap:3px; }
.pt-past-lbl { font-size:.8rem; color:var(--pt-muted); }
/* ── Passar d'estat, per passes ─────────────────────────────────────────
   El gerent (20-08): «no m'agrada el format. Tot junt.» Eren quatre controls
   dins d'un .ses-tr-form, que es un flex que ho ajunta tot. El comportament no
   canvia; el que canvia es que la passa que NO te marxa enrere no s'assembli a
   les que si en tenen. */
.pt-estat { display:flex; flex-direction:column; gap:12px; }
.pt-estat-bloc { display:flex; flex-direction:column; gap:6px;
  padding:10px 12px; border:1px solid var(--pt-line);
  border-radius:var(--pt-radius-sm); background:var(--pt-surface); }
.pt-estat-pas { font-size:.78rem; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--pt-muted); }
/* La vora d'argila NO es l'unica marca: el text del pas ja diu «nomes per
   ACCEPTAR» i la casella diu que no es pot desfer. El color hi afegeix, no
   informa tot sol. */
.pt-estat-greu { border-color:var(--pt-blau); background:var(--pt-blau-pastel); }
.pt-estat-accio { border:0; background:none; padding:0; }
@media (max-width: 480px) { .pt-estat-bloc { padding:10px; } }

/* Corregir una linia d'hores des de la seva pastilla. */
.pt-past-hora-eines { display:inline-flex; gap:6px; margin-left:6px; }
.pt-past-mini { min-height:44px; padding:8px 12px; font-size:.8rem;
  border:1px solid var(--pt-line); border-radius:999px;
  background:var(--pt-soft); color:var(--pt-text); cursor:pointer; }
.pt-past-mini:hover { background:var(--pt-verd-pastel);
  border-color:var(--pt-verd); }

/* 1 · El boto que ESBORRA no es pot veure igual que el que desa. La classe
   s'usava i no existia: «Desa» i «Treu la linia» sortien identics, de costat, i
   treure esborra la fila de debo.
   DS-002 deia ARGILA; el 20-08 va passar a VERMELL, i el motiu esta mesurat:
   l'argila i l'alerta tenien ΔE 7,3 amb visio NORMAL —per sota del terra de 15—
   o sigui que ningu els distingia, i volien dir coses diferents. Destructiu i
   alerta son la mateixa cosa: un sol color. */
.pt-btn-perill, .pt-btn-perill:hover { background:var(--pt-warn);
  border-color:var(--pt-warn); color:#FFFFFF; }
/* El «Corregeix» de cada linia entra al mateix contracte de focus que la resta. */
.pt-past-mini:focus-visible { outline:none; box-shadow:var(--pt-focus); }

/* Els botons d'una pastilla, en fila i amb el target de la casa. */
.pt-past-botons { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.pt-past-botons .pt-past-btn { margin-top:0; }

/* ── Passada IDUN (20-08): jerarquia de SUPERFICIE ──────────────────────
   El diagnostic: DUAT nomes tenia UN tipus de capsa (.pt-sec, blanca i neutra)
   i UN tipus de boto de pes ple (.pt-btn verd solid), i els aplicava igual al
   contingut i a les eines. En obrir un pressupost es veien capses identiques
   apilades i desenes de botons verds competint entre ells. Les dues peces de
   recanvi ja existien a la casa; nomes no s'havien aplicat aqui. */

/* Una EINA no es veu com una DADA: accent superior als blocs de formulari. */
.pt-sec-eina { border-top: 3px solid var(--pt-verd); }

/* Els botons DINS d'una pastilla son secundaris: n'hi ha ~78 en un pressupost
   real i no poden competir amb el boto de debo de cada formulari. */
.pt-past-btn.pt-past-mini { min-height:44px; padding:8px 12px; }

/* La casella de confirmar i el boto que esborra, junts i separats de la resta. */
.pt-past-perill { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 10px; border:1px solid var(--pt-blau);
  background:var(--pt-blau-pastel); border-radius:var(--pt-radius-sm); }

/* El formulari d'afegir, amb el tipus a dalt i els camps que en depenen. */
.pt-fila-form { display:flex; flex-direction:column; gap:10px; }

/* ── Com avança l'obra: els mesos a dalt ────────────────────────────────
   Peticio del gerent (20-08). Una peça per periode, en ordre de calendari.
   NO es una graella auto-fill: l'ordre cronologic es la informacio, i un
   mosaic que reflueix per amplada el destruiria. */
.pt-mesos { display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; }
.pt-mes { flex:0 0 190px; background:var(--pt-surface);
  border:1px solid var(--pt-line); border-radius:var(--pt-radius-sm);
  padding:12px 14px; }
.pt-mes-nom { font-size:.8rem; font-weight:600; letter-spacing:.04em;
  color:var(--pt-muted); text-transform:uppercase; }
.pt-mes-import { font-size:1.35rem; font-weight:600; color:var(--pt-text);
  margin:2px 0 4px; }
.pt-mes-acum { font-size:.84rem; color:var(--pt-muted); }
.pt-mes-solc { background:var(--pt-track); border:1px solid var(--pt-track-vora);
  border-radius:999px; height:6px; overflow:hidden; margin:8px 0 4px; }
.pt-mes-omplert { background:var(--pt-verd); height:100%; border-radius:999px;
  min-width:2px; }
.pt-mes-pct { font-size:.8rem; color:var(--pt-muted); }
@media (max-width: 480px) { .pt-mes { flex-basis:82%; } }

/* L'historic, plegat. Reutilitza .ses-config, que ja es el patro de plec de
   la casa; nomes hi cal la capçalera clicable amb target de 44px. */
.pt-hist-cap { cursor:pointer; padding:10px 12px; min-height:44px;
  display:flex; align-items:center; gap:6px; }
.pt-hist-cap:hover { background:var(--pt-verd-pastel); }
.pt-hist[open] .pt-hist-cap { border-bottom:1px solid var(--pt-line); }

/* Una xifra no es parteix mai en dues linies: «11.388 €» sortia com a «11.388»
   i «€» a sota, i una columna de diners partida es fa il·legible d'un cop d'ull
   (vist al navegador amb la certificacio real de Bonmont, 20-08). */
.pt-table td.num, .pt-table th.num, .pt-kpi-val, .pt-mes-import,
.pt-past-import { white-space: nowrap; }

/* L'exces executat i no acreditat: es una xifra que ESPERA, no un error. Ambre
   segur per a text (5,74:1), mai el vermell d'alarma. */
.pt-text-pendent { color: var(--pt-text-ambre); font-weight: 600; }

/* El que s'ha executat i espera un modificat, a la peça del mes. */
.pt-mes-pendent { font-size:.8rem; margin-top:4px; }
/* Un titol de RESUM pesa mes que un de detall: amb set seccions totes iguals,
   l'ull deixa de distingir que importa. */
.pt-sec-resum h3 { font-size:1.2rem; }

/* ── Plegar capítols, enganxar partides i entrar un BC3 (20-08) ───────
   Les tres peces que va demanar el gerent per acabar el pressupost. El botó
   de plegar es diferencia dels altres «mini» a posta: no fa cap canvi al
   pressupost, només canvia el que es veu, i barrejar-lo amb «Edita» faria
   que semblés que toca dades. */
.pt-past-plega { font-variant-numeric: tabular-nums; opacity: .85; }
.pt-past-plega:hover { opacity: 1; }

.pt-eng-text {
  width: 100%; min-height: 120px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.45; padding: 8px 10px;
  border: 1px solid var(--pt-line); border-radius: 8px;
  background: var(--pt-surface); color: inherit; resize: vertical;
  /* Sense ajust de línia: una fila enganxada d'un Excel s'ha de poder llegir
     sencera, i partida per la meitat no es veu on acaba una columna. */
  white-space: pre; overflow-x: auto;
}
/* `--pt-focus` és un valor de BOX-SHADOW («0 0 0 3px …»), no un color: fer-lo
   servir dins d'un `outline` o d'un `border-color` fa la declaració invàlida i
   el navegador la llença sencera —sense dir res. El patró bo és el de
   `.pt-past-mini:focus-visible`, unes línies més amunt. */
.pt-eng-text:focus { outline: none; box-shadow: var(--pt-focus); }

/* La zona d'arrossegar el fitxer. Ha de semblar una zona i no un botó: un
   botó convida a prémer-lo i aquí també s'hi pot deixar caure un fitxer. */
.pt-puja {
  border: 2px dashed var(--pt-line); border-radius: 10px;
  padding: 18px; text-align: center; cursor: pointer;
  color: var(--pt-muted); background: var(--pt-soft);
}
.pt-puja:hover { border-color: var(--pt-verd); color: inherit; }
.pt-enllac { text-decoration: underline; cursor: pointer; }

.pt-resum { margin: 0 0 10px; padding-left: 18px; line-height: 1.6; }
.pt-resum li { margin: 2px 0; }

/* Treure una partida (20-08). El color del destructiu ja el té decidit la casa
   —ARGILA, DS-002, al bloc de `.pt-btn-perill` de més amunt— i aquí NO es torna
   a decidir: el primer intent redefinia `.pt-btn-perill` amb un vermell i, com
   que guanya l'última regla del fitxer, va canviar de color el botó «Treu la
   línia» que ja existia sense que ho demanés ningú, i va deixar mentint el
   comentari que explica l'argila. La porta FINAL ho va caçar.

   Aquí només s'hi afegeix el que a `.pt-btn-perill` li faltava (l'estat apagat)
   i el to de la versió MINI: l'argila NOMÉS a la vora, i el fons ple al hover.
   El color del text no es toca —l'hereta de `.pt-past-mini`, que ja té el
   contrast ple— i qui separa aquest botó de l'«Edita» que té al costat és el
   RÈTOL («Treu-la» / «Treu-lo»), no el color: és la regla que la casa ja té
   escrita unes línies més amunt. La vora hi afegeix, no informa tot sola. */
.pt-past-treu { border-color: var(--pt-warn); }
.pt-past-treu:hover { background: var(--pt-warn); color: #FFFFFF;
  border-color: var(--pt-warn); }
.pt-btn-perill:disabled { opacity: .45; cursor: not-allowed; }

/* La cua del gasoil (20-08): la feina que hi ha per fer, ordenada pel que pesa.
   La proposta ha de destacar sobre el text de la fila —és el que es llegeix per
   decidir— sense competir amb el botó, que és l'acció. */
.pt-cas-prop { font-weight: 600; }
.pt-cas-grup { color: var(--pt-muted); font-size: .85rem; }
.pt-cas-accio { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pt-cas-accio .pt-dd { min-width: 220px; }

/* ── L'ajuda del Control econòmic: un «?» per pantalla, amb modal ────────
   Decisió del gerent (20-08). El referent del patró (Odoo) posa el «?» per
   CAMP; això segueix la decisió i queda anotat a docs/baremoteca/INDEX.md. */
/* El «?» va a la fila de la capçalera, no flotant: `.pt-mod` no és un
   contenidor posicionat i un `absolute` hi hauria anat a parar al viewport. */
.pt-mod-capcalera { display:flex; align-items:flex-start;
  justify-content:space-between; gap:12px; }
.pt-mod-capcalera > *:first-child { flex:1 1 auto; min-width:0; }
/* 44 px, no 34: `DESIGN.md` §Layout diu «tot element tocable ≥44 px» i el
   primer tiratge d'aquest botó no ho complia. Ho va caçar la porta de disseny
   el 21-08, citant el document contra el botó mateix. */
.pt-ajuda-boto { flex:0 0 auto; margin-top:10px; width:44px; height:44px;
  border-radius:50%; border:1px solid var(--pt-line); background:var(--pt-surface);
  color:var(--pt-muted); font-size:1rem; font-weight:600; cursor:pointer;
  line-height:1; }
.pt-ajuda-boto:hover { color:var(--pt-verd); border-color:var(--pt-verd); }
/* El focus ha de VEURE'S: qui va amb teclat no sap on és sense això. */
.pt-ajuda-boto:focus-visible { outline:2px solid var(--pt-verd); outline-offset:2px; }

.pt-ajuda { position:fixed; inset:0; z-index:900; display:flex;
  align-items:center; justify-content:center; padding:16px; }
.pt-ajuda-fons { position:absolute; inset:0; background:rgba(38,36,32,0.45); }
.pt-ajuda-panell { position:relative; background:var(--pt-surface);
  border-radius:var(--pt-radius); box-shadow:var(--pt-shadow-hov);
  max-width:720px; width:100%; max-height:82vh; display:flex;
  flex-direction:column; }
.pt-ajuda-cap { display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:18px 20px 12px; border-bottom:1px solid var(--pt-line); }
.pt-ajuda-cap h2 { margin:0; font-size:1.15rem; color:var(--pt-text); }
/* Scroll DINS del panell: si l'overflow anés al fons, el títol se n'aniria
   amunt i el botó de tancar deixaria de trobar-se. */
.pt-ajuda-cos { overflow-y:auto; padding:6px 20px 20px; }
.pt-ajuda-sec { margin-top:16px; }
.pt-ajuda-sec h3 { font-size:.95rem; color:var(--pt-verd-dark); margin:0 0 6px; }
.pt-ajuda-sec ul { margin:0; padding-left:18px; }
.pt-ajuda-sec li { color:var(--pt-text); font-size:.9rem; line-height:1.55;
  margin-bottom:7px; }
/* min-height 44: mateixa regla que el germà «?», i el mateix defecte. La
   guarda del 21-08 llegia una sola classe pel nom i no el podia veure. */
.pt-ajuda-tanca { flex:0 0 auto; min-height:44px; padding:6px 16px;
  border-radius:999px;
  border:1px solid var(--pt-line); background:transparent; color:var(--pt-muted);
  font-size:.85rem; font-weight:500; cursor:pointer; }
.pt-ajuda-tanca:hover { color:var(--pt-text); border-color:var(--pt-muted); }
.pt-ajuda-tanca:focus-visible { outline:2px solid var(--pt-verd); outline-offset:2px; }

/* Estat d'una FILA, en marca i no en frase. Mesurat el 21-08: «Encara no hi ha
   hores ni màquines assignades» sortia DOTZE vegades a la mateixa pantalla. */
.pt-past-marca { display:inline-block; margin-top:6px; padding:1px 8px;
  border:1px dashed var(--pt-line); border-radius:999px;
  color:var(--pt-muted); font-size:.78rem; cursor:help; }

/* ── La molla d'estat i la barra d'accions ───────────────────────────────
   El patró del barem: l'estat és una molla al capdamunt i les accions són UNA
   fila de botons a dalt que canvien amb l'estat. Abans «Estat» era una capsa
   sencera al final de la pàgina, a ~5.800 px de baixada. */
.pt-molla { display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  margin:10px 0 4px; }
.pt-molla-pas { padding:3px 12px; border-radius:999px; font-size:.8rem;
  color:var(--pt-muted); background:var(--pt-soft);
  border:1px solid var(--pt-line); }
/* El pas fet i el pas d'ara NO es distingeixen només pel to: el d'ara va en
   negreta i amb vora de marca. El color no informa tot sol. */
.pt-molla-fet { color:var(--pt-verd-dark); background:var(--pt-verd-pastel);
  border-color:var(--pt-verd-pastel); }
/* El pas d'ara NO és una tercera pastilla verda plena. La porta de disseny
   (21-08, 2a passada) va comptar tres —el mòdul actiu, la pestanya activa i
   aquest— fent la mateixa feina visual en menys de 400 px, i el `DESIGN.md`
   diu «cada color amb UNA feina». Es distingeix pel PES i per una vora gruixuda
   de marca, que a més el fa llegible per a qui no distingeix el to. */
.pt-molla-ara { color:var(--pt-verd-dark); background:var(--pt-surface);
  border:2px solid var(--pt-verd-dark); font-weight:700; }
.pt-molla-no { color:var(--pt-text-warn); background:var(--pt-surface);
  border:2px solid var(--pt-text-warn); font-weight:700; }

/* El desplegable del document queia a l'anell de focus per defecte del
   navegador —violeta, fora de la paleta de la casa—. Ho va veure la porta de
   disseny a la captura. */
.pt-dd .Select-control:focus-within,
.pt-dd:focus-visible { outline:2px solid var(--pt-verd); outline-offset:2px; }

.pt-barra { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 14px;
  padding-bottom:12px; border-bottom:1px solid var(--pt-line); }
.pt-bar-btn { min-height:44px; padding:9px 14px; border-radius:var(--pt-radius-sm);
  border:1px solid var(--pt-line); background:var(--pt-surface);
  color:var(--pt-text); font-size:.85rem; font-weight:500; cursor:pointer; }
.pt-bar-btn:hover { border-color:var(--pt-verd); color:var(--pt-verd-dark); }
.pt-bar-btn:focus-visible { outline:2px solid var(--pt-verd); outline-offset:2px; }
/* El que està obert es veu obert, i no només pel color: porta `aria-expanded`
   i el fons de marca. */
.pt-bar-btn-obert { background:var(--pt-verd); color:var(--pt-sobre-marca);
  border-color:var(--pt-verd); font-weight:600; }

/* La línia d'identitat de la certificació del mes («Certificació núm. 1 ·
   revisió 1 · emesa el 20/08/2026 · 42.870 €»). És el text MÉS important del
   bloc i es pintava amb el <p> pelat del navegador: `pt-mes-cap` no existia a
   cap CSS. Mateix parany que `pt-inp`, que el mòdul ja documenta. */
.pt-mes-cap { font-size:1.02rem; font-weight:600; color:var(--pt-text);
  margin:10px 0 4px; line-height:1.45; }