/* =============================================================
   AVIDESK — sistema de disseny Nuntia (light/dark)
   Tokens calcats de colors_and_type.css / README.md del handoff.
   ============================================================= */

/* `hidden` vol dir amagat, sempre i sense excepcions.
   L'atribut `[hidden]` del navegador ve de la fulla d'estil de l'agent
   d'usuari, o sigui que QUALSEVOL `display:` que escrivim nosaltres el
   guanya. Amagar un element per JavaScript no feia res i el bug era mut:
   `el.hidden = true` retornava true i l'element seguia a la vista.
   Ha passat tres vegades —`.ai-chips` (2026-09-03), `.tg-media`
   (2026-09-09) i `.pub-link` (2026-09-10, el GIF i la foto de la notícia
   sortien de costat al 50%)— i cada cop s'hi va posar un pedaç per a aquell
   selector concret. Aquesta regla els substitueix tots: l'`!important` hi
   és justament perquè ha de guanyar a les regles d'autor. */
[hidden] { display: none !important; }
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

html[data-theme="light"] {
  color-scheme: light;
  --app-bg:#F7F5F0; --surface:#FFFFFF; --surface-2:#FAFAFA; --surface-3:#F2F0EB;
  --line:#E5E5E5; --line-soft:#EDEBE6;
  --t1:#0C0C0C; --t2:#525252; --t3:#8A8A8A; --t4:#B5B5B5;
  --hdr-bg:#FFFFFF; --hdr-line:#E5E5E5; --hdr-fg:#0C0C0C;
  --side-bg:#FFFFFF; --side-fg:#0C0C0C; --side-line:#E5E5E5;
  --side-hover:#F4F2ED; --side-sel-bg:#E9E6DE;
  --c-video:#1F7A55; --c-foto:#2F6FD0; --c-audio:#7A4FCF; --c-vert:#0F7D80;
  --c-ok:#2C7A4B; --c-warn:#C87A16; --c-err:#D72638;
  --tint-ok:#E8F1EB; --tint-warn:#FBF1E2; --tint-err:#FBE4E6; --tint-info:#E9F0FB; --tint-neutral:#F2F0EB;
  --tint-err-strong: var(--tint-err);
  --tint-warn-strong: var(--tint-warn);
  --shadow:0 1px 2px rgba(10,10,10,.04), 0 10px 28px -18px rgba(10,10,10,.18);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --app-bg:#0B0C11; --surface:#13151D; --surface-2:#181B25; --surface-3:#1E2130;
  --line:#262A36; --line-soft:#20242F;
  --t1:#EFEAE0; --t2:#9CA2B0; --t3:#6C7280; --t4:#4B5060;
  --hdr-bg:#10121A; --hdr-line:#22262F; --hdr-fg:#EFEAE0;
  --side-bg:#13151D; --side-fg:#EFEAE0; --side-line:#262A36;
  --side-hover:#1E2130; --side-sel-bg:#282D3C;
  --c-video:#4FD6A0; --c-foto:#6FA8F5; --c-audio:#B592F0; --c-vert:#5BAFB4;
  --c-ok:#57D08A; --c-warn:#EFB63F; --c-err:#F2626F;
  --tint-ok:rgba(87,208,138,.12); --tint-warn:rgba(224,169,79,.13); --tint-err:rgba(242,98,111,.13);
  --tint-info:rgba(111,168,245,.13); --tint-neutral:rgba(239,234,224,.06);
  /* Un color traslúcid molt fluix sobre un fons gairebé negre es percep
     apagat/marronós (il·lusió òptica coneguda) — per a àrees grans com una
     fila sencera de taula o la barra de discrepàncies cal més intensitat
     que per a un badge petit (que ja fan servir --tint-err/--tint-warn
     directament i es veuen bé). Només afecten .tr--err/.tr--warn i .disc,
     no tota la resta del sistema de disseny que reutilitza els tokens base
     (queixa real de l'usuari, 2026-09-03). */
  --tint-err-strong: rgba(242,98,111,.24);
  --tint-warn-strong: rgba(224,169,79,.26);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -20px rgba(0,0,0,.7);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--app-bg); color: var(--t1);
  font-family: 'Satoshi','Inter',ui-sans-serif,system-ui,sans-serif;
  font-size: 14px; line-height: 1.5; letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  transition: background-color .28s cubic-bezier(.2,.6,.2,1), color .28s cubic-bezier(.2,.6,.2,1);
}
a { color: var(--t1); text-decoration: none; }
a:hover { color: var(--c-err); }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
svg { display: block; }

/* ── HEADER ── */
.hdr { position: sticky; top: 0; z-index: 40; background: var(--hdr-bg); border-bottom: 1px solid var(--hdr-line); color: var(--hdr-fg); }
.hdr-in { display: flex; align-items: center; gap: 20px; height: 60px; padding: 0 26px; }
.logo-mark { height: 24px; width: auto; display: block; }
.logo-mark.logo-light { display: none; }
html[data-theme="light"] .logo-mark.logo-dark { display: none; }
html[data-theme="light"] .logo-mark.logo-light { display: block; }
.hdr-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
/* Alineat amb l'inici del contingut (columna del sidebar, 252px + el padding
   propi de .main-col, 26px) perquè quedi just a sobre de les cards, sempre
   visible mentre naveguem — abans vivia dins de "Continguts publicats avui"
   (_kpis.html) i es perdia en qualsevol altra pantalla. */
.hdr-tot-when { position: absolute; left: 286px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; }
/* Una mica més gran (petició de l'usuari, 2026-09-03): com que .hdr-tot-when
   és position:absolute amb `left` fix, créixer aquí només allarga el text
   cap a la dreta — l'alineació de l'esquerra no es mou. */
.hdr-tot-when .d { font-size: 15px; color: var(--t3); white-space: nowrap; }
.hdr-tot-when .clock { font-size: 14.5px; }
.hdr-tot-when .clock .dot { width: 6px; height: 6px; }
@media (max-width: 1000px) { .hdr-tot-when { display: none; } }
.hdr-acn-logo { height: 22px; width: auto; opacity: .72; }
html[data-theme="light"] .hdr-acn-logo { filter: brightness(.42) saturate(.55); }
.hdr-div { width: 1px; height: 20px; background: var(--line); }
.clock { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 17px; color: var(--t1); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.clock .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--c-ok); animation: av-pulse 2s ease-in-out infinite; }
@keyframes av-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .clock .dot { animation: none; } }
.icon-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); color: var(--t2); background: var(--surface-2); transition: background .18s, color .18s; }
.icon-btn:hover { background: var(--surface-3); color: var(--t1); }
.icon-btn svg { width: 18px; height: 18px; }
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; letter-spacing: -.005em; border: 1px solid transparent; transition: background .18s, border-color .18s, transform .1s; cursor: pointer; }
.btn svg { width: 18px; height: 18px; }
.btn--pri { background: var(--t1); color: var(--surface); }
.btn--pri:hover { opacity: .88; }
.btn--gh { border-color: var(--line); color: var(--t1); background: var(--surface); }
.btn--gh:hover { background: var(--surface-3); }
.btn--gh:disabled { cursor: default; background: var(--surface); }
.btn--gh:disabled:hover { background: var(--surface); }
.btn:active { transform: translateY(1px); }

.usr { position: relative; }
.avatar { width: 34px; height: 34px; border-radius: 999px; background: var(--t1); color: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; cursor: pointer; }
.usr-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 260px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 44px -18px rgba(0,0,0,.5); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s, transform .16s, visibility .16s; z-index: 60; }
.usr-menu.on { opacity: 1; visibility: visible; transform: none; }
.usr-head { display: flex; align-items: center; gap: 11px; padding: 12px 12px 14px; }
.usr-av { width: 36px; height: 36px; flex: none; border-radius: 999px; background: var(--surface-3); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.usr-id b { font-size: 14px; font-weight: 600; display: block; }
.usr-id em { font-family: 'JetBrains Mono', monospace; font-style: normal; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--t3); }
.usr-sec { border-top: 1px solid var(--line); padding: 10px 12px; }
.usr-k { display: block; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--t4); margin-bottom: 8px; }
.tgl { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface-2); width: 100%; }
.tgl button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--t3); }
.tgl button svg { width: 15px; height: 15px; }
.tgl button[aria-pressed="true"] { background: var(--t1); color: var(--surface); }
.usr-i { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--t2); }
.usr-i svg { width: 16px; height: 16px; color: var(--t3); }
.usr-i:hover { background: var(--surface-2); color: var(--t1); }
.usr-note { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.45; color: var(--t3); padding: 0 2px; }
.usr-note svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--t4); }

/* ── LAYOUT: sidebar + main ── */
main.shell { display: grid; grid-template-columns: 252px minmax(0,1fr); align-items: start; }
@media (max-width: 1000px) { main.shell { grid-template-columns: 1fr; } }
.side { position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; border-right: 1px solid var(--side-line); background: var(--side-bg); padding: 14px 0 40px; }
@media (max-width: 1000px) { .side { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--line); } }
.side-h { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 20px; font-size: 14.5px; font-weight: 600; letter-spacing: -.014em; color: var(--side-fg); text-align: left; transition: background .16s, color .16s; }
.side-h svg:first-child { width: 25px; height: 25px; flex: none; opacity: .32; transition: opacity .16s, color .16s; }
.side-h > span { opacity: .5; }
.side-h .cv { width: 18px; height: 18px; margin-left: auto; opacity: .75; transition: transform .2s, opacity .16s; }
.side-h:hover { background: var(--side-hover); }
.side-h:hover svg:first-child { opacity: .75; }
.side-h:hover .cv { opacity: 1; }
.side-grp.open .side-h > span { opacity: 1; }
.side-grp.open .side-h svg:first-child { opacity: 1; }
.side-grp.open .side-h .cv { opacity: 1; transform: rotate(90deg); }
.side-badge { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: .07em; text-transform: uppercase; padding: 3px 6px; border-radius: 4px; background: var(--tint-neutral); color: var(--t3); margin-left: auto; }
.side-sub { display: none; padding-bottom: 8px; }
.side-grp.open .side-sub { display: block; }
.side-i { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 20px 8px 54px; font-size: 13.5px; letter-spacing: -.008em; color: var(--side-fg); opacity: .4; transition: background .16s, opacity .16s; }
.side-i:hover { background: var(--side-hover); opacity: .8; color: var(--side-fg); }
.side-i.active { background: var(--side-sel-bg); opacity: 1; font-weight: 600; }
.side-i.av-preview-item { opacity: .8; }
.side-i.av-preview-item:hover { opacity: 1; }
.side-i .lock { width: 13px; height: 13px; margin-left: auto; flex: none; opacity: .6; }

.main-col { min-width: 0; padding: 0 26px; }
@media (min-width: 900px) { .main-col { padding: 0 34px; } }

/* ── RESUM ── */
.top { padding: 26px 0 20px; }
.pagehd { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 12px; }
.pagehd h1 { display: flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', monospace; font-size: 17px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--t2); }
.pagehd h1 svg { width: 21px; height: 21px; flex: none; color: var(--t3); }

/* ── "Ritme de producció" (línies) + "Verticalització amb Verta" (anell) ── */
.top-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; margin-top: 16px; }
.top-row--solo { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.top-row--solo > .cmp { grid-column: 1; }
@media (max-width: 1000px) { .top-row { grid-template-columns: 1fr; } }
.cmp { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px 12px; }
.cmp-hd { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; position: relative; }
.cmp-k { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--t2); }
.cmp-hd .lgnd { margin-left: auto; margin-top: 0; }
/* Nomes .cmp-hd (títol + llegenda empesa a la dreta amb margin-left:auto,
   p.ex. Ritme de producció): el botonet s'enganxa al títol perquè no
   competeixi amb la llegenda per l'`auto`. La resta de capçaleres .sect-k
   (p.ex. "Publicat cada dia" a Balanç) NO tenen aquest problema — el seu
   .inf ha de quedar a la dreta de tot, igual que a les targetes KPI, amb
   el `margin-left:auto` per defecte de .inf. Abans una regla combinada
   `.cmp-hd .inf, .sect-k .inf` aplicava aquest ajust arreu, deixant "Publicat
   cada dia" amb l'"i" mal posada (petició de l'usuari, 2026-09-03: "ponla
   en la derecha como las cards de arriba"). */
.cmp-hd .inf { margin-left: 2px; }
/* .inf::after (el globus d'ajuda) és `position:absolute; right:0`, i sense
   `position:relative` al botó es col·loca respecte l'ancestre posicionat
   més proper — aquí .cmp-hd, que és tota l'amplada de la capçalera (títol +
   llegenda empesa a la dreta amb margin-left:auto). Resultat: el botonet
   queda a l'esquerra (just després del títol) però el globus sortia ancorat
   a la dreta de tota la capçalera, lluny de la icona (bug real reportat per
   l'usuari, 2026-09-03). Fent `.inf` mateix `position:relative` aquí, el
   globus s'ancora al propi botó. */
.cmp-hd .inf { position: relative; }
.cmp-wrap { position: relative; }
.cmp-svg { display: block; width: 100%; height: 170px; }
.cmp-x { display: flex; justify-content: space-between; margin-top: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; color: var(--t2); letter-spacing: .03em; }
.cmp-x span { flex: 1; text-align: center; }
.cmp-tip { position: absolute; top: 8px; pointer-events: none; opacity: 0; transform: translateY(-3px); transition: opacity .14s, transform .14s; background: var(--surface-3); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; min-width: 118px; z-index: 3; box-shadow: var(--shadow); }
.cmp-tip.on { opacity: 1; transform: none; }
.cmp-tip .d { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--t1); margin-bottom: 8px; }
.cmp-tip .r { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--t2); font-variant-numeric: tabular-nums; }
.cmp-tip .r + .r { margin-top: 3px; }
.cmp-tip .r i { width: 7px; height: 7px; border-radius: 2px; display: block; flex: none; }
.cmp-tip .r b { margin-left: auto; color: var(--t1); font-weight: 600; }
.vrt { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; }
.vrt-hd { display: flex; align-items: center; position: relative; margin-bottom: 14px; }
.vrt-main { display: flex; align-items: center; gap: 20px; flex: 1; }
.vrt-ring { position: relative; width: 124px; height: 124px; flex: none; }
.vrt-ring svg { width: 100%; height: 100%; display: block; }
.vrt-pc { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1px; color: var(--t1); line-height: 1; }
.vrt-pc b, .vrt-pc small { font-size: 30px; font-weight: 600; letter-spacing: -.035em; line-height: 1; color: inherit; }
.vrt-list { display: grid; gap: 10px; flex: 1; min-width: 0; }
.vrt-r { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 12px; min-width: 0; }
.vrt-r svg { width: 24px; height: 24px; color: var(--c-vert); justify-self: center; }
.vrt-r .l { font-size: 14.5px; color: var(--t2); min-width: 0; }
.vrt-r b { font-size: 26px; font-weight: 600; letter-spacing: -.032em; color: var(--t1); font-variant-numeric: tabular-nums; line-height: 1; }
.vrt-r--err svg { color: var(--c-warn); }
.vrt-r--err b { color: var(--c-warn); }
.vrt-bar { display: flex; gap: 3px; margin-top: 18px; }
.vrt-bar span { height: 7px; border-radius: 999px; }
.vrt-note { font-size: 12px; color: var(--t3); line-height: 1.45; margin-top: 12px; }
.vrt-note b { color: var(--t1); font-weight: 600; }
.kpis { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
@media (min-width: 1220px) { .kpis { grid-template-columns: repeat(4,1fr); } }
.kpis--6 { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
@media (min-width: 1000px) { .kpis--6 { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1480px) { .kpis--6 { grid-template-columns: repeat(5,1fr); } }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
.kpi .lbl { display: flex; align-items: center; gap: 9px; font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--t1); position: relative; }
.kpi-ic { width: 38px; height: 38px; flex: none; color: var(--t2); padding: 9px; border-radius: 11px; background: var(--surface-3); box-sizing: border-box; }
.kpi[data-k="video"] .kpi-ic, .kpi[data-k="video"] .val { color: var(--c-video); }
.kpi[data-k="foto"] .kpi-ic, .kpi[data-k="foto"] .val { color: var(--c-foto); }
.kpi[data-k="audio"] .kpi-ic, .kpi[data-k="audio"] .val { color: var(--c-audio); }
.kpi[data-k="inc"] .kpi-ic, .kpi[data-k="inc"] .val { color: var(--c-err); }
.kpi[data-k="tot"] .kpi-ic { color: var(--t2); }
.kpi .val { font-size: 46px; line-height: 1; font-weight: 600; letter-spacing: -.038em; margin-top: 14px; font-variant-numeric: tabular-nums; }
.kpi-per { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 400; letter-spacing: .05em; text-transform: lowercase; color: var(--t3); margin-top: 5px; }
.kpi .foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 18px; }
.kpi .trend { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: .04em; color: var(--t3); font-variant-numeric: tabular-nums; }
.kpi .trend.up { color: var(--c-ok); }
.kpi .trend.dn { color: var(--c-err); }
.kpi .degraded { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--c-warn); margin-top: 8px; }

/* ── Barra segmentada del KPI "Total publicat" ── */
.tot-bar { display: flex; gap: 4px; margin-top: 18px; }
.tot-bar span { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.tot-bar span::before { content: ''; display: block; height: 6px; border-radius: 999px; background: currentColor; }
.tot-bar b { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600; color: var(--t2); letter-spacing: .02em; font-variant-numeric: tabular-nums; text-align: center; display: block; }

/* ── Gràfic de barres agrupades amb tooltip i línia de mitjana (Balanç de producció) ── */
.b7 { position: relative; display: flex; align-items: flex-end; gap: 14px; height: 210px; padding: 0 4px; }
.b7 .col { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 5px; min-width: 0; }
.b7 .col i { display: block; width: 7px; border-radius: 2px; transition: opacity .16s; cursor: default; }
.b7 i:hover { opacity: 1; filter: brightness(1.18); }
.b7-tip { position: absolute; pointer-events: none; opacity: 0; transform: translate(-50%,-6px); transition: opacity .13s, transform .13s; background: var(--surface-3); border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; z-index: 5; box-shadow: var(--shadow); white-space: nowrap; }
.b7-tip.on { opacity: 1; transform: translate(-50%,-10px); }
.b7-tip .d { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .05em; color: var(--t3); margin-bottom: 4px; }
.b7-tip .r { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--t2); }
.b7-tip .r i { width: 7px; height: 7px; border-radius: 2px; display: block; flex: none; }
.b7-tip .r b { color: var(--t1); font-weight: 600; font-variant-numeric: tabular-nums; }
.b7-avg { position: absolute; left: 0; right: 0; border-top: 1px dashed currentColor; opacity: .85; pointer-events: none; }
.b7-avg span { position: absolute; right: 0; top: -8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .03em; color: currentColor; background: var(--surface); padding: 0 2px; font-variant-numeric: tabular-nums; }
.b7x { display: flex; gap: 14px; margin-top: 10px; padding: 0 4px; }
.b7x span { flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500; color: var(--t2); text-align: center; }
.lgnd { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .05em; color: var(--t2); }
.lgnd span { display: inline-flex; align-items: center; gap: 6px; }
.lgnd b { color: var(--t1); font-weight: 600; font-variant-numeric: tabular-nums; }
.lgnd i { width: 9px; height: 9px; border-radius: 2px; display: block; }
.sect-k { display: flex; align-items: center; position: relative; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--t2); padding: 0 0 14px; }
/* Etiqueta de període dins d'una capçalera de secció (Mapes de calor,
   petició de l'usuari, 2026-09-03) — MATEIX patró que .kpi-per a Balanç: a
   sota del títol, no al costat (confirmat amb una captura de referència),
   pes normal, minúscules, color apagat. .sect-k--per passa la capçalera de
   fila a columna només quan porta període; .sect-per sobreescriu els 4
   valors que .sect-k fixa per herència (pes, majúscules, espaiat, color). */
.sect-k--per { flex-direction: column; align-items: flex-start; gap: 3px; }
.sect-per { display: block; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--t3); }

/* ── SECTION (bloqued modules i continguts genèrics) ── */
.crumb { display: flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', monospace; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--t3); padding: 40px 0 14px; }
.crumb svg { width: 17px; height: 17px; }
.crumb b { color: var(--t2); font-weight: 500; }
.panel--half { width: 50%; min-width: 420px; }
@media (max-width: 1000px) { .panel--half { width: 100%; min-width: 0; } }
.scope { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 13px; font-size: 13px; color: var(--t2); margin: 0 0 22px; }
.scope svg { width: 17px; height: 17px; color: var(--t3); }
.scope select { font: inherit; color: var(--t1); background: none; border: none; outline: none; cursor: pointer; }
.scope input[type="date"] { font: inherit; color: var(--t1); background: none; border: none; border-left: 1px solid var(--line); outline: none; cursor: pointer; padding-left: 10px; margin-left: 2px; }
.rep-row { display: flex; gap: 10px; margin-top: 16px; }
.wkbar { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.ministack { display: flex; height: 7px; width: 100px; gap: 3px; background: none; overflow: visible; flex: none; }
.ministack i { display: block; height: 100%; border-radius: 999px; min-width: 3px; }

/* ── Equip humà: Per redactor/a ── */
.badge { font-size: 11px; font-weight: 600; letter-spacing: -.005em; padding: 3px 8px; border-radius: 5px; background: var(--tint-info); color: var(--c-video); white-space: nowrap; }
.badge--n { background: var(--tint-neutral); color: var(--t3); }
.rd-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--line-soft); transition: background .14s; }
.rd-row:last-child { border-bottom: none; }
.rd-row:hover { background: var(--surface-2); }
.rd-l { display: flex; align-items: center; gap: 11px; min-width: 0; }
.rd-l .car { width: 17px; height: 17px; color: var(--t4); flex: none; }
.rd-l .nm { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-l .sec { font-size: 11.5px; color: var(--t4); white-space: nowrap; }
.rd-r { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.cnt3 { display: flex; align-items: center; gap: 11px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--t2); font-variant-numeric: tabular-nums; }
.cnt3 span { display: inline-flex; align-items: center; gap: 4px; }
.cnt3 svg { width: 17px; height: 17px; }
.cnt3 [data-t="video"] svg { color: var(--c-video); }
.cnt3 [data-t="foto"] svg { color: var(--c-foto); }
.cnt3 [data-t="audio"] svg { color: var(--c-audio); }
.pct { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; padding: 3px 8px; border-radius: 5px; min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
.pct--ok { background: var(--tint-ok); color: var(--c-ok); }
.pct--warn { background: var(--tint-warn); color: var(--c-warn); }
.pct--err { background: var(--tint-err); color: var(--c-err); }
.av { width: 25px; height: 25px; border-radius: 999px; background: var(--surface-3); color: var(--t2); display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 500; flex: none; }

/* ── Tags / chips genèrics (reutilitzats a diverses pantalles) ── */
.tag { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; white-space: nowrap; background: var(--tint-err); color: var(--c-err); }
.tag--warn { background: var(--tint-warn); color: var(--c-warn); }
.tag--ok { background: var(--tint-ok); color: var(--c-ok); }
.tag--info { background: var(--tint-info); color: var(--c-video); }
.tag--n { background: var(--tint-neutral); color: var(--t2); }
.freqcell { display: inline-flex; align-items: center; gap: 9px; }
.freqcell svg { width: 18px; height: 18px; flex: none; color: var(--t4); }

/* ── Equip tècnic: Rendiment per càmera ── */
.bento { display: grid; gap: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.bl { padding: 22px; min-width: 0; }
.c-12 { grid-column: span 12; } .c-8 { grid-column: span 8; } .c-7 { grid-column: span 7; }
.c-6 { grid-column: span 6; } .c-5 { grid-column: span 5; } .c-4 { grid-column: span 4; }
@media (max-width: 1000px) { .bento > [class*="c-"] { grid-column: span 12; } }
.cams { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.cam { border: 1px solid var(--line); border-radius: 10px; padding: 16px; background: var(--surface-2); }
.cam .hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cam .nm { font-size: 13.5px; font-weight: 600; letter-spacing: -.012em; }
.cam .p { font-size: 20px; font-weight: 600; letter-spacing: -.028em; font-variant-numeric: tabular-nums; }
.cam .cap { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--t4); text-align: right; margin-top: 2px; }
.cam .meter { margin: 12px 0; }
.cam .row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cam .sect { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--t4); margin: 12px 0 7px; }
.callout { border: 1px solid var(--line); border-radius: 10px; padding: 18px; background: var(--tint-info); margin-top: 20px; }
.callout .hd { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-video); margin-bottom: 12px; }
.callout ul { list-style: none; display: grid; gap: 9px; }
.callout li { display: grid; grid-template-columns: 5px 1fr; gap: 11px; font-size: 13px; color: var(--t2); line-height: 1.5; }
.callout li::before { content: ''; width: 4px; height: 4px; border-radius: 999px; background: var(--t4); margin-top: 8px; }
.callout b { color: var(--t1); font-weight: 600; }
.mx { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 500; padding: 4px 9px; border-radius: 5px; font-variant-numeric: tabular-nums; display: inline-block; }
.mx sup { font-size: 8.5px; opacity: .7; margin-left: 2px; }
.legend { display: flex; flex-wrap: wrap; gap: 18px; padding: 12px 18px; border-top: 1px solid var(--line); font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .04em; color: var(--t3); background: var(--surface-2); }
.legend svg { width: 14px; height: 14px; flex: none; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

/* ── Mètriques: Mapes de calor ── */
/* Valors literals de design_handoff_mapes_de_calor/Avidesk App Dashboard.html
   (2026-09-03) — .hm/.heat-row substitueixen l'aproximació anterior. */
/* Base que faltava portar (el disseny la defineix un sol cop i tot ho
   reutilitza) — sense padding propi, el contingut de .panel-body quedava
   enganxat a la vora del panel (bug real reportat per l'usuari, 2026-09-03).
   `llindars.html` ja la fa servir amb un override inline propi, no es veu
   afectat. */
.panel-body { padding: 24px 22px; }
.heat-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.62fr); gap: 16px; align-items: stretch; }
.heat-row .panel { margin-top: 0; display: flex; flex-direction: column; }
.heat-row .panel > .panel-body { flex: 1; }
@media (max-width: 1250px) { .heat-row { grid-template-columns: minmax(0,1fr); } .heat-row .panel + .panel { margin-top: 0; } }
.hm { display: grid; grid-template-columns: 24px repeat(24, minmax(0,1fr)); column-gap: 3px; row-gap: 3px; align-items: start; }
.hm .rk { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: var(--t2); letter-spacing: .02em; display: flex; align-items: center; justify-content: flex-end; align-self: stretch; padding: 0 6px 0 0; margin: 0; background: none; border: 0; border-radius: 0; min-height: 0; box-shadow: none; }
.hm .ck { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600; color: var(--t2); display: flex; align-items: flex-end; justify-content: center; letter-spacing: 0; padding: 0 0 2px; margin: 0; background: none; border: 0; line-height: 1; }
.hm .cell { aspect-ratio: 1; width: 100%; border-radius: 2px; background: var(--surface-3); }
.hm .cell:hover { outline: 1.5px solid var(--t2); outline-offset: 1px; }
/* Un sol globus reposicionat per JS, no 168 pseudo-elements: el `title` natiu
   trigava un segon llarg a sortir i no s'assemblava gens al del mapa. */
.hm-wrap { position: relative; }
.hm-tip { position: absolute; z-index: 30; pointer-events: none; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); padding: 9px 11px; white-space: nowrap; }
.hm-tip .nm { font-size: 12.5px; font-weight: 600; color: var(--t1); letter-spacing: -.005em; }
.hm-tip .tot { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--t2); margin-top: 4px; }
.hm-tip .tot b { color: var(--t1); font-weight: 600; font-variant-numeric: tabular-nums; }
.hm-tip .sub { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--t3); margin-top: 3px; }
.hm-scale { display: flex; align-items: center; gap: 9px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--t3); letter-spacing: .05em; }
.hm-grad { width: 120px; height: 6px; border-radius: 999px; }
@media (max-width: 1000px) { .hm { grid-template-columns: 20px repeat(24, minmax(0,1fr)); column-gap: 2px; row-gap: 2px; } .hm .rk, .hm .ck { font-size: 9.5px; } }
.rvq { display: grid; gap: 12px; }
.rv { display: grid; grid-template-columns: 86px 1fr auto; gap: 16px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--surface-2); }
@media (max-width: 720px) { .rv { grid-template-columns: 1fr; } }
.two { font-size: 13px; line-height: 1.45; color: var(--t2); }
.two .lead { color: var(--t1); font-weight: 600; }
.rvq .two { font-size: 14px; }
.rvq .two .lead { font-size: 16px; font-weight: 600; letter-spacing: -.015em; display: inline-block; margin-bottom: 4px; }
.rvq .pct { font-size: 16px; font-weight: 600; padding: 7px 14px; border-radius: 8px; min-width: 64px; }
.fq { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.fq em { font-family: 'JetBrains Mono', monospace; font-style: normal; font-size: 9.5px; letter-spacing: .04em; color: var(--t3); white-space: nowrap; }

/* "Franges destacades": llista neta com .comq (files separades per una
   vora superior, sense fons ni vora pròpia), no targetes dins d'una
   targeta (petició de l'usuari, 2026-09-03 — "más como un listado bonito
   que una card dentro de otra card"). Escopat a --heat perquè "Revisió de
   deteccions" (modules/revisio.html) comparteix .rvq/.rv amb una altra
   estructura i mai s'ha de veure afectada. */
.rvq--heat { gap: 0; }
.rvq--heat .rv { border: none; border-top: 1px solid var(--line); border-radius: 0; background: none; padding: 16px 0; }
.rvq--heat .rv:first-child { border-top: none; padding-top: 2px; }
.rvq--heat .two { line-height: 1.32; }
.rvq--heat .two .lead { margin-bottom: 1px; }
.rvq--heat .pct { padding: 4px 13px; }
.rvq--heat .fq { gap: 3px; }

/* ── Mètriques: Mapes de calor — cobertura geogràfica (Leaflet + d3) ── */
.mapgrid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.3fr); gap: 16px; margin-top: 16px; align-items: stretch; }
.mapgrid > .panel { display: flex; flex-direction: column; min-height: 0; margin-top: 0; }
.mapgrid > .panel > .panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.map-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 14px; }
.mapbox { position: relative; height: 520px; background: var(--surface-2); border-radius: 10px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* Pantalla completa dins de l'àrea de treball: mai per sobre de la capçalera
   ni del menú lateral (z-index per sota dels modals, 50). Les mides exactes
   les posa el JS a partir del rectangle real de la capçalera i del menú, per
   no repetir aquí cap 60px ni cap amplada de barra que després es mogui. */
.mapbox--full { position: fixed; z-index: 45; border-radius: 12px; box-shadow: 0 24px 60px -16px rgba(0,0,0,.5); }
.mapbox--full .map-esc { display: block; }
.map-esc { display: none; position: absolute; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 500; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .05em; color: var(--t2); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; box-shadow: var(--shadow); pointer-events: none; }
.map-esc b { color: var(--t1); font-weight: 600; }
/* Fons fix del tema fosc (--surface-2 fosc), no el del tema actiu: el filtre
   dels tiles acaba en opacity(.62), o sigui que el fons del contenidor s'hi
   transparenta. Amb el fons clar, Catalunya sortia blanquinosa tot i tenir el
   mateix filtre que en fosc. */
#lmap { position: absolute; inset: 0; border-radius: 10px; z-index: 0; background: #181B25; }
.map-leg { position: absolute; left: 16px; bottom: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; box-shadow: var(--shadow); }
.map-leg .k { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); margin-bottom: 9px; }
.map-leg .ends, .lg-ends { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; color: var(--t4); margin-top: 5px; }
.lg-grad { width: 130px; height: 6px; border-radius: 999px; }
.map-zoom { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 6px; z-index: 500; }
/* A pantalla completa els controls pugen a dalt: a baix a la dreta hi ha el
   botó flotant "Pregunta a Avidesk" (fix, per sobre del mapa), que si no
   tapava justament el botó de sortir. */
.mapbox--full .map-zoom { top: 16px; bottom: auto; }
/* El mapa es veu igual en tema clar i fosc (decisió de l'usuari, 2026-09-03):
   la versió clara era un gris rentat que no lligava amb els punts de cobertura,
   pensats sobre fons fosc. Abans hi havia dues variants de filtre. */
.leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(var(--tbri,.86)) contrast(.66) saturate(.12) opacity(.62); }
.leaflet-container { background: var(--surface-2); font-family: 'Satoshi','Inter',ui-sans-serif,system-ui,sans-serif; outline: none; }
.leaflet-tile-container img { outline: 1px solid transparent; }
#lmap .leaflet-tile { will-change: auto; }
.leaflet-control-attribution { font-family: 'JetBrains Mono', monospace !important; font-size: 8.5px !important; background: var(--surface) !important; color: var(--t3) !important; }
.leaflet-control-attribution a { color: var(--t2) !important; }
.leaflet-popup-content-wrapper { background: var(--surface); color: var(--t1); border-radius: 9px; box-shadow: var(--shadow); }
.leaflet-popup-tip-container { display: none; }
.mk-hit { cursor: pointer; outline: none !important; -webkit-tap-highlight-color: transparent; }
.mk-hit:focus, .mk-hit:focus-visible { outline: none !important; stroke: none !important; }
.leaflet-interactive:focus, #lmap path:focus, #lmap svg:focus { outline: none !important; }
.pp .nm { font-size: 13px; font-weight: 600; letter-spacing: -.012em; line-height: 1.15; margin-bottom: 0; }
.mk-tt .tot, .pp .tot { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--t3); line-height: 1.2; margin: 3px 0 9px; }
.mk-tt .brk { display: flex; flex-direction: column; gap: 5px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--t2); }
.mk-tt .brk span { display: flex; align-items: center; gap: 7px; }
.mk-tt .brk i { width: 7px; height: 7px; border-radius: 2px; display: block; flex: none; }
.mk-tt .brk b { margin-left: auto; color: var(--t1); font-weight: 600; font-variant-numeric: tabular-nums; }
.pp-link { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .03em; text-transform: uppercase; color: var(--c-video) !important; border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; }
.pp-link:hover { background: var(--surface-2); }
.pp-link svg { width: 13px; height: 13px; }
.leaflet-tooltip.mk-tt { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); color: var(--t1); padding: 9px 11px; font-family: 'Satoshi','Inter',ui-sans-serif,system-ui,sans-serif; }
.leaflet-tooltip.mk-tt::before { display: none; }
.mk-glow { filter: blur(1.2px); }
@media (max-width: 1150px) { .mapgrid { grid-template-columns: minmax(0,1fr); } .mapgrid > .panel + .panel { margin-top: 0; } .comq { max-height: 420px; } }

.comq { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; margin-right: -18px; padding-right: 18px; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
.comq::-webkit-scrollbar { width: 4px; }
.comq::-webkit-scrollbar-track { background: transparent; }
.comq::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 99px; }
.comq::-webkit-scrollbar-thumb:hover { background: var(--t4); }
.comq .cq { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.comq .cq:first-child { border-top: 0; }
.comq .cq.z { opacity: .42; }
.comq .nm { font-size: 13.5px; color: var(--t1); letter-spacing: -.008em; }
.comq .dt { display: flex; gap: 9px; margin-top: 4px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--t3); }
.comq .dt span { display: flex; align-items: center; gap: 4px; }
.comq .dt i { width: 6px; height: 6px; border-radius: 2px; display: block; }
.comq .v { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; color: var(--t1); text-align: right; }
.comq .bar { height: 3px; border-radius: 2px; background: var(--surface-3); margin-top: 5px; overflow: hidden; width: 74px; }
.comq .bar em { display: block; height: 100%; border-radius: 2px; background: #4FDDD0; }
/* Àmbit territorial: nivell més ampli que la comarca, per al contingut que no
   en té. Va separat i amb la barra en ambre (revisió humana / dada menys
   precisa, mai el verd-blau del nivell precís) perquè no es confongui amb una
   comarca (jerarquia municipi > comarca > territori, 2026-09-03). */
.comq .cq-sep { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--t4); padding: 14px 0 2px; border-top: 1px solid var(--line); margin-top: 4px; }
.comq .cq--amb .nm { color: var(--t2); }
.comq .cq--amb .bar em { background: var(--c-warn); }

/* ── Control de qualitat: Revisió de deteccions ── */
.rv .ttl { font-size: 13px; line-height: 1.45; margin-bottom: 6px; }
.rv .m { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; flex-wrap: wrap; }
.rv .acts { display: flex; gap: 7px; }
.thumb { aspect-ratio: 16/10; border-radius: 6px; background: var(--surface-3); display: flex; align-items: center; justify-content: center; }
.thumb svg { width: 23px; height: 23px; color: var(--t4); }
.vbtn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line); background: var(--surface); color: var(--t2); transition: background .18s, color .18s, border-color .18s; }
.vbtn svg { width: 16px; height: 16px; }
.vbtn:hover { border-color: var(--t4); color: var(--t1); }
.vbtn--ok:hover { background: var(--tint-ok); border-color: var(--c-ok); color: var(--c-ok); }
.vbtn--no:hover { background: var(--tint-err); border-color: var(--c-err); color: var(--c-err); }
.vbtn:disabled { opacity: .5; cursor: default; pointer-events: none; }

/* ── Control de qualitat: Per revisar ── */
.mailbtn { color: var(--t3); }
.mailbtn:hover { color: var(--c-video); background: var(--surface-3); }
.mailbtn.is-reported { color: var(--c-ok); border-color: var(--c-ok); background: var(--tint-ok); }
.mailbtn:disabled { cursor: default; }
.mailbtn:disabled:hover { color: var(--c-ok); background: var(--tint-ok); }
.resolvebtn { color: var(--t3); }
.resolvebtn:hover { color: var(--c-ok); background: var(--tint-ok); border-color: var(--c-ok); }

/* ── Chips / segments (usats a seguiment, per revisar, directori...) ── */
.seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--t2); transition: background .18s, color .18s, border-color .18s; }
.chip svg { width: 18px; height: 18px; }
.chip:hover { background: var(--surface-3); color: var(--t1); }
.chip[aria-pressed="true"], .chip.on { background: var(--t1); border-color: var(--t1); color: var(--surface); }
.chip--icon { padding: 6px 9px; }
.chip--sm { padding: 5px 10px; font-size: 10px; }
.sfield { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); padding: 6px 11px; min-width: 180px; }
.sfield svg { width: 18px; height: 18px; color: var(--t3); }
.sfield input { font: inherit; font-size: 13px; border: none; outline: none; background: none; color: var(--t1); width: 100%; }
.sfield input::placeholder { color: var(--t4); }

/* ── Status pills / name cells (Directori i altres taules) ── */
.st { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 500; white-space: nowrap; }
.st--ok { color: var(--c-ok); } .st--warn { color: var(--c-warn); } .st--err { color: var(--c-err); } .st--off { color: var(--t3); }
.st-ico { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.st-ico svg { width: 16px; height: 16px; flex: none; }
.namecell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.grp { display: inline-flex; align-items: center; gap: 6px; }
.grp svg { width: 16px; height: 16px; color: var(--t4); flex: none; }

/* ── Equip humà: Informes ── */
.rep-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(246px, 1fr)); gap: 18px; padding: 22px; }
.rcard { display: flex; flex-direction: column; gap: 15px; text-align: left; border: 1px solid var(--line); border-radius: 11px; padding: 16px; background: var(--surface-2); transition: border-color .18s, background .18s; width: 100%; }
.rcard:hover { border-color: var(--t4); background: var(--surface); }
.rc-hd { display: flex; align-items: center; gap: 11px; min-width: 0; }
.rc-hd .nm { font-size: 13.5px; font-weight: 600; letter-spacing: -.014em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-hd .sec { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--t4); margin-top: 3px; }
.rc-bd { display: flex; align-items: center; gap: 15px; }
.rc-bd .tot { font-size: 25px; font-weight: 600; letter-spacing: -.032em; font-variant-numeric: tabular-nums; line-height: 1; }
.rc-bd .cap { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--t4); margin-top: 5px; }
.rc-ft { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rc-open { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--t3); display: inline-flex; align-items: center; gap: 6px; }
.rc-open svg { width: 14px; height: 14px; }
.backbar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.rep-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 22px 18px 20px; }
.rep-hd h2 { font-size: 23px; font-weight: 600; letter-spacing: -.028em; }
.rep-hd .meta { font-size: 12.5px; color: var(--t3); margin-top: 5px; }
.rep-hd .meta2 { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .04em; color: var(--t4); margin-top: 6px; }
.ring { position: relative; width: 78px; height: 78px; flex: none; }
.ring svg { transform: rotate(-90deg); }
.ring .lbl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ring-cap { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--t4); text-align: center; margin-top: 7px; }
.rep-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 18px 22px; }
@media (min-width: 820px) { .rep-kpis { grid-template-columns: repeat(6, 1fr); } }
.rk { border: 1px solid var(--line); border-radius: 9px; padding: 13px 14px; background: var(--surface-2); }
.rk .k { display: flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--t3); }
.rk .k svg { width: 16px; height: 16px; }
.rk .v { font-size: 22px; font-weight: 600; letter-spacing: -.028em; margin-top: 9px; font-variant-numeric: tabular-nums; }
.pats { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 0 18px 22px; }
@media (min-width: 760px) { .pats { grid-template-columns: 1fr 1fr; } }
.pat { border: 1px solid var(--line); border-left: 2px solid var(--c-warn); border-radius: 9px; padding: 15px 16px; background: var(--surface-2); }
.pat[data-c="ok"] { border-left-color: var(--c-ok); }
.pat[data-c="critical"] { border-left-color: var(--c-err); }
.pat .t { font-size: 13.5px; font-weight: 600; letter-spacing: -.012em; margin-bottom: 7px; }
.pat .d { font-size: 12.5px; color: var(--t2); line-height: 1.55; }
.ebars { display: grid; gap: 9px; padding: 0 18px 22px; }
.ebar { display: grid; grid-template-columns: 140px 1fr 74px; gap: 14px; align-items: center; }
.ebar .k { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--t2); }
.ebar .n { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--t3); text-align: right; font-variant-numeric: tabular-nums; }
.hist { display: grid; gap: 10px; padding: 0 18px 20px; }
.hitem { display: grid; grid-template-columns: 78px 1fr; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 9px; padding: 11px; background: var(--surface-2); }
.hitem .m { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.hitem .ttl { font-size: 13px; line-height: 1.45; color: var(--t1); }
.hitem .tags { margin-top: 7px; }

/* ── Administració: Llindars i aprenentatge ── */
.up { color: var(--c-ok); font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.ml-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; background: var(--tint-warn); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ml-bar .txt { font-size: 12.5px; color: var(--t2); }
footer.foot { padding: 44px 0 60px; text-align: center; }
footer.foot p { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--t4); }

.vs-nums { display: flex; align-items: flex-end; gap: 18px; margin-top: 14px; }
.vs-nums .n { display: block; font-size: 40px; font-weight: 600; letter-spacing: -.038em; line-height: 1; font-variant-numeric: tabular-nums; }
.vs-nums .l { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--t3); margin-top: 6px; }
.vs-a .n { color: var(--c-vert); }
.vs-b .n { color: var(--c-warn); }
.vs-div { width: 1px; align-self: stretch; background: var(--line); margin-bottom: 4px; }
.vs-note { font-size: 11px; color: var(--t4); margin-top: 10px; line-height: 1.4; }
.vs-bar { display: flex; gap: 3px; height: 6px; border-radius: 999px; overflow: hidden; margin-top: 14px; }
.vs-bar span { display: block; min-width: 0; height: 100%; }

/* ── LOGIN ── */
.av-center { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
/* 380px (abans 320): el subtítol va passar de tres paraules a la descripció
   del producte, i a 320 quedava en una columna estreta de 4 línies just sobre
   el formulari (2026-09-03). */
.av-login-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 40px 36px; width: 380px; box-shadow: var(--shadow); }
.av-login-title { height: 32px; width: auto; display: block; margin-bottom: 12px; }
.av-login-title.logo-light { display: none; }
html[data-theme="light"] .av-login-title.logo-dark { display: none; }
html[data-theme="light"] .av-login-title.logo-light { display: block; }
.av-login-sub { color: var(--t3); font-size: 13px; line-height: 1.55; margin-bottom: 26px; }
.av-field { margin-bottom: 16px; }
.av-field label { display: block; font-size: 12px; color: var(--t3); margin-bottom: 6px; }
.av-field input { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--t1); font-size: 14px; font-family: inherit; }
.av-field input:focus { outline: none; border-color: var(--t3); }
.av-btn { width: 100%; padding: 11px; border-radius: 8px; border: none; background: var(--t1); color: var(--surface); font-weight: 600; font-size: 14px; }
.av-btn:hover { opacity: .88; }
.av-login-error { background: var(--tint-err); border: 1px solid var(--c-err); color: var(--c-err); font-size: 13px; padding: 8px 10px; border-radius: 8px; margin-bottom: 16px; }

/* ── MODAL (ítem bloquejat) ── */
.av-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(10,10,10,.5); align-items: center; justify-content: center; z-index: 50; }
.av-modal-overlay.open { display: flex; }
.av-modal { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 26px; width: 320px; box-shadow: var(--shadow); }
.av-modal h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.av-modal p { color: var(--t3); font-size: 13px; line-height: 1.5; }
.av-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.av-btn-secondary { background: transparent; border: 1px solid var(--line); color: var(--t1); padding: 8px 14px; border-radius: 8px; font-size: 13px; }
.av-btn-inline { text-decoration: none; display: inline-block; padding: 8px 14px; width: auto; }

/* ── WEB/FTP: disc / mini / mn / tbl / ftp-leg ── */
.disc { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--tint-err-strong); border-radius: 12px 12px 0 0; }
.disc.disc-ok { background: var(--tint-ok); }
.disc.disc-warn { background: var(--tint-warn-strong); }
.disc .n { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 5px; background: var(--c-err); color: #fff; }
.disc.disc-ok .n { background: var(--c-ok); }
.disc.disc-warn .n { background: var(--c-warn); }
.disc .t { font-size: 12.5px; color: var(--t2); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); margin-bottom: 16px; }
.mini { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; padding: 20px; }
@media (min-width: 760px) { .mini { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1240px) { .mini { grid-template-columns: repeat(6,1fr); } }
.mn { border: 1px solid var(--line); border-radius: 9px; padding: 15px 16px; background: var(--surface-2); }
.mn .k { display: flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--t2); position: relative; }
.mn .k svg { width: 20px; height: 20px; flex: none; stroke-width: 1.7; color: var(--t3); }
.mn .v { font-size: 24px; font-weight: 600; letter-spacing: -.028em; margin-top: 10px; font-variant-numeric: tabular-nums; }
.mn[data-c="err"] .v { color: var(--c-err); }
.mn[data-c="err"] .fbar span { background: var(--c-err); }
.mn[data-c="warn"] .v { color: var(--c-warn); }
.mn[data-c="warn"] .fbar span { background: var(--c-warn); }
.mn .pc { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--t3); letter-spacing: .04em; margin-top: 8px; display: block; }
.fbar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-top: 11px; }
.fbar span { display: block; height: 100%; border-radius: 999px; background: var(--t2); }
.inf { margin-left: auto; width: 17px; height: 17px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; padding: 0; cursor: help; color: var(--t4); border-radius: 999px; transition: color .16s; }
.inf:hover, .inf:focus-visible { color: var(--t1); outline: none; }
.mn .k .inf svg { width: 15px; height: 15px; color: inherit; }
.inf::after { content: attr(data-tip); position: absolute; right: 0; top: calc(100% + 9px); width: 230px; background: var(--surface-3); color: var(--t2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-family: 'Satoshi','Inter',ui-sans-serif,system-ui,sans-serif; font-size: 12px; font-weight: 400; line-height: 1.45; letter-spacing: -.003em; text-transform: none; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity .16s, transform .16s, visibility .16s; z-index: 20; pointer-events: none; text-align: left; }
.inf:hover::after, .inf:focus-visible::after { opacity: 1; visibility: visible; transform: none; }
.panel-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.panel-bar .spacer, .spacer { margin-left: auto; }
.panel-title { font-size: 14.5px; font-weight: 600; letter-spacing: -.012em; }
.ftp-leg { display: flex; flex-wrap: wrap; gap: 16px; margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .04em; color: var(--t3); }
.ftp-leg span { display: inline-flex; align-items: center; gap: 5px; }
.ftp-leg svg { width: 15px; height: 15px; }
.tw { overflow-x: auto; }
.tbl { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13.5px; table-layout: fixed; }
.tbl thead th { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); font-weight: 500; text-align: left; padding: 10px 18px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2); }
.tbl tbody td { padding: 12px 18px; border-bottom: 1px solid var(--line-soft); color: var(--t1); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl tbody tr.tr--err { background: var(--tint-err-strong); }
/* Contingut que ja no arribarà (>120 min): sense franja vermella. Ja no
   és una incidència a perseguir, i mantenir-la marcada per sempre acaba
   fent que no es miri cap franja vermella. Un fons molt tènue la manté
   distingible d'una fila normal sense cridar. */
.tbl tbody tr.tr--gone { background: var(--surface-2); opacity: .72; }
.tbl tbody tr.tr--err:hover { background: var(--tint-err-strong); filter: brightness(1.08); }
.tbl tbody tr.tr--warn { background: var(--tint-warn-strong); }
.tbl tbody tr.tr--warn:hover { background: var(--tint-warn-strong); filter: brightness(1.08); }
.tbl .muted { color: var(--t3); }
.tbl .sub { color: var(--t2); }
.tbl .dt { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .01em; font-variant-numeric: tabular-nums; line-height: 1.5; white-space: nowrap; }
.tbl .dt .t { color: var(--t3); }
.tbl a { color: var(--t2); }
.tbl a:hover { color: var(--t1); text-decoration: underline; }
.tbl .c { text-align: center; }
.table-empty { color: var(--t3); font-size: 13px; text-align: center; padding: 18px 6px; }
.ext { display: inline-block; width: 10px; height: 10px; margin-left: 6px; color: var(--c-foto); opacity: .85; vertical-align: -1px; }

/* ── ALERTA D'INCIDÈNCIES ───────────────────────────────────── */
.alert { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); flex-wrap: wrap; }
.alert-ic { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; }
.alert-ic svg { width: 33px; height: 33px; }
.alert-tx { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.alert-tx .t { display: block; font-size: 16.5px; font-weight: 600; letter-spacing: -.015em; color: var(--t1); line-height: 1.3; }
.alert-tx .s { display: block; font-size: 12.5px; color: var(--t3); line-height: 1.4; }
.alert-n { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; }
.alert-act { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.alert-x { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: none; background: none; color: var(--t4); border-radius: 7px; cursor: pointer; transition: color .16s, background .16s; }
.alert-x:hover { color: var(--t1); background: var(--surface-3); }
.alert-x svg { width: 22px; height: 22px; }
.alert--crit { border-color: var(--c-err); background: var(--c-err); }
.alert--crit .alert-ic { background: none; color: #fff; }
.alert--crit .alert-n { background: rgba(255,255,255,.16); color: #fff; }
.alert--crit .alert-tx .t { color: #fff; }
.alert--crit .alert-tx .s { color: rgba(255,255,255,.82); }
.alert--crit .alert-x { color: rgba(255,255,255,.72); }
.alert--crit .alert-x:hover { color: #fff; background: rgba(255,255,255,.16); }
.alert--crit .btn { border-color: rgba(255,255,255,.45); color: #fff; background: transparent; }
.alert--crit .btn:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.7); }
.alert--warn { border-color: var(--c-warn); background: var(--tint-warn); }
.alert--warn .alert-ic { background: none; color: var(--c-warn); }
.alert--warn .alert-n { background: var(--c-warn); color: #0B0C11; }
.alert--inline { margin-bottom: 18px; }
.alert--pinned { border-radius: 0; border-left: none; border-right: none; border-top: none; padding: 14px 34px; box-shadow: 0 6px 18px -12px rgba(0,0,0,.5); }
/* La barra viu abans de <main class="shell"> al DOM (mateixa a totes les
   pàgines, mai dins .main-col) — per no haver de tocar-ho a les ~13
   plantilles, es desplaça amb un marge igual a l'ample fix del menú lateral
   (252px, main.shell { grid-template-columns: 252px ... }) perquè vagi de
   punta a punta però només del "frame" de contingut, sense trepitjar el
   menú (petició de l'usuari, 2026-09-03). Es treu per sota dels 1000px,
   mateix punt de tall on el menú deixa de ser una columna fixa i passa a
   apilar-se a sobre del contingut. */
.alert--pinned { margin-left: 252px; }
@media (max-width: 1000px) { .alert--pinned { margin-left: 0; } }
@media (max-width: 900px) { .alert-act { margin-left: 0; width: 100%; } .alert--pinned { padding: 14px 26px; } }

/* ── MODAL D'INCIDÈNCIES (llista de vàries alhora) ─────────── */
.av-modal--wide { width: 720px; max-width: calc(100vw - 40px); max-height: 78vh; display: flex; flex-direction: column; }
.av-modal--wide .alerts-list { overflow-y: auto; margin: 4px -8px; padding: 0 8px; }
/* Dues columnes d'acció al final: avisar Ebantic i tancar el clip a mà.
   Sense la segona, el botó nou queia a una fila de sota (2026-09-08). */
.alerts-row { display: grid; grid-template-columns: 110px 1fr 56px 38px 38px; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.alerts-row:last-child { border-bottom: none; }
.alerts-origin { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--t3); }
.alerts-content { font-size: 13px; color: var(--t1); min-width: 0; }
.alerts-content small { display: block; color: var(--t3); font-size: 11.5px; margin-top: 2px; }
.alerts-hora { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--t3); text-align: right; }
.ck { width: 20px; height: 20px; color: var(--c-ok); margin: 0 auto; }
.ck--no { color: var(--c-err); }
.ck--vt { color: var(--c-foto); }
.ck--warn { color: var(--c-warn); }
.panel-foot { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-2); font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--t3); }
.panel-foot .cnt { letter-spacing: .04em; }

/* ── Barres i anells (reutilitzats a Incidències, Equip tècnic, Administració...) ── */
.meter { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; min-width: 60px; }
.meter span { display: block; height: 100%; border-radius: 999px; background: var(--c-video); }
.meter[data-c="err"] span { background: var(--c-err); }
.meter[data-c="warn"] span { background: var(--c-warn); }
.meter[data-c="ok"] span { background: var(--c-ok); }
.rate3 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .rate3 { grid-template-columns: repeat(3,1fr); } }
.rate { border: 1px solid var(--line); border-radius: 10px; padding: 16px; background: var(--surface-2); }
.rate .hd { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--t3); }
.rate .hd svg { width: 32px; height: 32px; padding: 8px; border-radius: 9px; background: var(--surface-3); box-sizing: border-box; color: var(--t2); flex: none; }
.rate .v { font-size: 28px; font-weight: 600; letter-spacing: -.03em; margin: 12px 0 8px; font-variant-numeric: tabular-nums; color: var(--c-err); }
.rate .sub { font-size: 11.5px; color: var(--t3); }
.rate .sub b { font-weight: 600; }
.rate .ring2 { display: flex; align-items: center; gap: 14px; margin: 10px 0; }
.rate .ring2 svg { transform: rotate(-90deg); }
.rate .rv2 { font-size: 26px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dnut { position: relative; width: 54px; height: 54px; flex: none; }

/* ── ASSISTENT IA (backend real via Ollama, veure ai_assistant.py) ── */
.ai-fab { position: fixed; right: 26px; bottom: 26px; z-index: 55; display: inline-flex; align-items: center; gap: 9px; padding: 13px 18px; border-radius: 12px; background: var(--t1); color: var(--surface); font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; box-shadow: var(--shadow); border: none; cursor: pointer; }
.ai-fab:hover { opacity: .9; }
.ai-fab svg { width: 16px; height: 16px; }

/* Una mica més clar que --surface-3 (petició de l'usuari, 2026-09-03: "el
   fondo todavía más clarito", per separar visualment el xat de la resta de
   la pantalla) — barrejat cap a blanc en lloc d'un quart to fix, així
   funciona als dos temes amb la mateixa fórmula: en fosc s'allunya una mica
   més de --app-bg, en clar s'acosta a --surface (blanc pur). */
.ai-drawer { position: fixed; right: 26px; bottom: 26px; z-index: 55; width: 440px; max-width: calc(100vw - 40px); max-height: min(660px, calc(100vh - 52px)); display: flex; flex-direction: column; background: color-mix(in oklch, var(--surface-3) 85%, white 15%); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px -16px rgba(0,0,0,.5), 0 6px 18px -6px rgba(0,0,0,.4); overflow: hidden; }

.ai-hd { display: flex; align-items: center; gap: 10px; padding: 18px 18px 16px; border-bottom: 1px solid var(--line); flex: none; }
.ai-ico { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--t1); }
.ai-ico svg { width: 18px; height: 18px; }
.ai-hd-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ai-hd-t b { font-size: 15.5px; font-weight: 600; }
.ai-status { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--t3); }
.ai-status .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--c-warn); flex: none; }
.ai-close { flex: none; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--t3); border: none; background: none; }
.ai-close:hover { background: var(--surface-2); color: var(--t1); }
.ai-close svg { width: 16px; height: 16px; }

.ai-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 16px; min-height: 140px; }
.ai-msg { display: flex; gap: 10px; }
/* Preguntes (usuari) en gris, respostes (bot) en blanc — al revés que un chat
   habitual, seguint el feedback: la resposta és el que importa destacar. */
.ai-msg p { font-size: 15px; line-height: 1.6; color: var(--t1); }
.ai-msg--bot .ai-ico { width: 28px; height: 28px; border-radius: 8px; }
.ai-msg--bot .ai-ico svg { width: 15px; height: 15px; }
.ai-msg-body { min-width: 0; }
.ai-link { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--t1); text-decoration: underline; }
.ai-link:hover { color: var(--c-err); }
.ai-msg--user { justify-content: flex-end; }
.ai-msg--user p { background: var(--surface-2); color: var(--t2); padding: 10px 13px; border-radius: 12px 12px 2px 12px; max-width: 85%; }

/* "Escrivint…" mentre s'espera Ollama (petició de l'usuari, 2026-09-03: cap
   feedback entre enviar la pregunta i que arribés la resposta, 5-8s de
   mitjana). Mateixos 3 punts clàssics d'un indicador d'escriptura, amb
   l'onada de moviment desfasada entre punts via animation-delay. */
.ai-typing { display: flex; align-items: center; gap: 4px; height: 28px; padding-left: 2px; }
.ai-typing span { width: 6px; height: 6px; border-radius: 999px; background: var(--t3); animation: ai-typing-bounce 1.1s infinite ease-in-out; }
.ai-typing span:nth-child(2) { animation-delay: .15s; }
.ai-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ai-typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 14px; flex: none; }
/* `display:flex` d'aquí a dalt guanya sempre a l'estil per defecte de
   `[hidden]` del navegador — resolt globalment a dalt de tot.
   sense això, `chips.hidden = true` per JS no amaga res de debò. */
.ai-chip { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 8px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--t2); background: var(--surface-2); }
.ai-chip:hover { background: var(--surface); color: var(--t1); }
/* Suggeriments de continuació, dins de cada missatge del bot: mateix xip,
   una mica més discret perquè no competeixi amb el text de la resposta
   (petició de l'usuari, 2026-09-03 — "que no queden ahí anclados"). */
.ai-chips--inline { padding: 0; margin-top: 10px; }
.ai-chips--inline .ai-chip { padding: 6px 10px; font-size: 9.5px; }

.ai-input-row { display: flex; gap: 8px; padding: 0 18px 14px; flex: none; }
.ai-input-row input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--t1); font-size: 14.5px; font-family: inherit; }
.ai-input-row input:focus { outline: none; border-color: var(--t3); }
.ai-send { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--t1); color: var(--surface); display: flex; align-items: center; justify-content: center; border: none; }
.ai-send:hover { opacity: .88; }
.ai-send svg { width: 18px; height: 18px; }

.ai-foot { padding: 0 18px 16px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--t4); text-align: center; flex: none; }
@media (max-width: 480px) { .ai-drawer { right: 12px; left: 12px; bottom: 12px; width: auto; } .ai-fab { right: 16px; bottom: 16px; } }

/* Columna RETARD de Web/GEN: minuts entre publicar-se al web i pujar al GEN
   (petició de l'usuari, 2026-09-08). Context de negoci: els clients del GEN
   són els que paguen més, així que qualsevol retard vol dir que qui més paga
   rep el contingut més tard que qui menys paga. Els llindars surten de la
   mesura real d'aquell dia (108 clips): mediana 5 min, 87% per sota de 15.
   Monospace i tabular-nums perquè les xifres quedin alineades i es puguin
   comparar d'una passada vertical. */
.dly { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 2px 6px; border-radius: 5px; white-space: nowrap; }
.dly--ok { color: var(--c-ok); background: var(--tint-ok); }
.dly--warn { color: var(--c-warn); background: var(--tint-warn); }
.dly--err { color: var(--c-err); background: var(--tint-err); }
/* Encara comptant: mai amb el mateix aspecte que un retard tancat — el
   número és un mínim, no un resultat. */
.dly--open { color: var(--c-warn); background: none; border: 1px dashed var(--c-warn); }
/* Contingut que ja no arribarà: passats 120 min es deixa de comptar i es
   mostra "+120'" en neutre (petició de l'usuari, 2026-09-08). El vermell ja
   ha fet la seva feina —l'avís surt als 60 min—, i mantenir-lo mentre el
   comptador puja fins a 400 i més només crida l'atenció sobre una cosa que
   ja se sap i que ningú ha de resoldre. El minutatge real segueix guardat i
   es veu al rollover. */
.dly--gone { color: var(--t3); background: var(--surface-2); border: 1px solid var(--line); }

/* Seguiment de contingut: icona del tipus de media separada del titular
   (petició de l'usuari, 2026-09-09: "està una mica junt" i desproporcionada).
   Abans era un <i> de 17px enganxat al text amb un gap de 8px, i a mides
   diferents de titular quedava descentrat. Ara va dins d'un requadre de mida
   fixa: separació real del text i alineació estable tant si el titular ocupa
   una línia com tres. `align-items: flex-start` perquè amb titulars llargs
   la icona es quedi a dalt, a l'altura de la primera línia, i no surant al
   mig del bloc. */
.tipus-cell { display: inline-flex; align-items: flex-start; gap: 14px; }
.tipus-ic { width: 30px; height: 30px; flex: none; padding: 6px; border-radius: 8px;
            background: var(--surface-2); box-sizing: border-box; }
.tipus-ic--video { color: var(--c-video); }
.tipus-ic--foto  { color: var(--c-foto); }
.tipus-ic--audio { color: var(--c-audio); }

/* Capçalera de columna amb explicació al rollover: subratllat discontinu
   perquè es vegi que hi ha alguna cosa a llegir, sense fer soroll. */
.th-tip { border-bottom: 1px dotted var(--t4); cursor: help; }

/* ─────────────────────────────────────────────────────────────────────────
   MÒBIL: la pàgina no s'ha de desplaçar mai en horitzontal
   Diagnosticat el 2026-09-09 amb un iPhone 13 real (390px): el resum es
   desplaçava 172px i Web/GEN 222px. No era la taula —`.tw` ja té scroll
   propi— sinó tres coses concretes que no encongien.
   ───────────────────────────────────────────────────────────────────────── */

/* 1. Les 24 etiquetes d'hora del gràfic. Cada `span` és un flex item i per
      defecte no encongeix per sota del seu contingut, així que 24 x ~16px
      forçaven 397px i estiraven tota la pàgina. Amb `min-width: 0` poden
      encongir, i al mòbil s'amaga una de cada dues MANTENINT la casella
      (`visibility`, no `display`): si es tragués la casella, les 12 restants
      es repartirien l'espai i deixarien d'estar alineades amb el gràfic. */
.cmp-x span { min-width: 0; }
@media (max-width: 700px) {
  .cmp-x { font-size: 9px; letter-spacing: 0; }
  .cmp-x span:nth-child(even) { visibility: hidden; }
}

/* 2. Pista que la taula continua cap a la dreta (petició de l'usuari: "no
      queda clar que s'hagi de continuar per la dreta").

      PRIMER INTENT FALLIT, documentat perquè no es repeteixi: el truc
      clàssic de posar ombres al `background` amb `background-attachment:
      local` no serveix aquí. Mesurat el 2026-09-09 amb la mateixa taula i
      la mateixa posició, només activant i desactivant l'ombra: 0,8 punts
      de lluminositat de diferència sobre 35 — invisible. És lògic: és una
      ombra NEGRA sobre un fons gairebé negre (#13151D). Aquell truc està
      pensat per a temes clars.

      El que sí que es veu en fosc és esvair el CONTINGUT contra la vora
      amb una màscara: el text es dissol i es llegeix com "això continua".
      Només al mòbil, que és on la taula no hi cap. */
@media (max-width: 700px) {
  .tw {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
  }
  /* En arribar al final, o si la taula ja hi cabia, fora l'esvaïment: si no,
     l'última columna (el RETARD) quedaria difuminada per sempre. Les classes
     les posa _chrome_scripts.html. */
  .tw.tw--end, .tw.tw--fits {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* 3. Data curta al mòbil. "2026-09-09" no cabia a la columna i es
      trepitjava amb el titular del costat. Es pinten les dues formes i es
      commuten per CSS en lloc de mirar l'amplada amb JavaScript: així
      també és correcte si es gira el telèfon. */
.dt .d-short { display: none; }
@media (max-width: 700px) {
  .dt .d-full { display: none; }
  .dt .d-short { display: inline; }
}

/* 4. Els selectors de dalt de Web/GEN s'apilen en lloc d'estirar la pàgina:
      el commutador de tipus tenia un min-width de 280px en línia que, junt
      amb el selector de període, no cabia en 390px. */
@media (max-width: 700px) {
  .tgl { min-width: 0 !important; width: 100% !important; }
  .wf-toolbar { flex-wrap: wrap; }
  .wf-toolbar > div { flex-wrap: wrap; }
}

/* 5. Les targetes de KPI, d'una en una al mòbil. Eren dues columnes fins i
      tot a 390px, i cada targeta necessita uns 217px de mínim pel seu
      contingut (número gran + etiqueta + barres): dues no hi caben i
      estiraven la pàgina 172px cap a la dreta, deixant la de la dreta
      tallada (captura de l'usuari en un iPhone, 2026-09-09). `min-width: 0`
      a més perquè cap graella les pugui tornar a forçar. */
.kpi { min-width: 0; }
@media (max-width: 620px) {
  .kpis, .kpis--6 { grid-template-columns: 1fr; }
}

/* 6. Avís explícit que la taula continua cap a la dreta. La sombra de la
      vora ja ho insinua, però l'usuari va dir que "no queda clar que
      s'hagi de continuar per la dreta", i una insinuació no és una
      instrucció. Es fa amb `:has()` per no haver de tocar cap plantilla:
      als navegadors que no el suporten simplement no surt, i queda la
      sombra. Només al mòbil — a l'escriptori les taules hi caben. */
@media (max-width: 700px) {
  .panel:has(> .tw)::after {
    content: "Desplaça la taula cap a la dreta per veure la resta de columnes →";
    display: block; padding: 10px 16px 14px;
    font-size: 11.5px; color: var(--t3); font-style: italic;
  }
}

/* ── Mòdul Publica (en construcció, darrere de dev.preview) ──────────────
   Publicar al canal públic d'ACN sense dependre de si es fa des del mòbil o
   des de l'ordinador (petició de l'usuari, 2026-09-09). */
.pub-setup { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 16px;
             border: 1px solid var(--c-warn); border-radius: 10px; background: var(--tint-warn); color: var(--t1); font-size: 13.5px; }
.pub-setup svg { width: 18px; height: 18px; color: var(--c-warn); flex: none; margin-top: 1px; }
.pub-setup ul { margin: 6px 0 0; padding-left: 18px; }
.pub-setup li { margin: 3px 0; color: var(--t2); }
.pub-setup code { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--t1); }

/* Un sol panell: s'escriu DINS de la bombolla (idea de l'usuari,
   2026-09-10). Abans hi havia el quadre de text a l'esquerra i la vista
   prèvia a la dreta; si la vista prèvia ja ensenya el que sortirà, tenir
   les dues coses era demanar-li a algú que mirés dues pantalles per
   escriure una frase. */
/* Alineat a l'esquerra i no centrat (prova demanada per l'usuari,
   2026-09-10): la resta de pantalles d'Avidesk comencen a l'esquerra, i
   una columna centrada enmig d'una pantalla ampla fa que la vista salti
   en canviar de mòdul. */
.pub-one { padding: 18px; }
/* Al mòbil, els cinc tipus van a un desplegable. Amb etiquetes com
   "Notícia d'última hora", cinc botons en fila es partien en diverses
   línies i l'últim quedava fora de la pantalla (usuari, 2026-09-10,
   iPhone). Un desplegable ocupa una línia sempre, i es reconeix d'un cop
   d'ull com el que és. */
.tgl-sel { display: none; }
@media (max-width: 720px) {
  .tgl { display: none; }
  .tgl-sel {
    display: block; width: 100%; appearance: none;
    padding: 10px 34px 10px 12px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface-2); color: var(--t1);
    font: 600 14px/1.2 inherit; cursor: pointer;
    /* La fletxa, dibuixada al fons: sense ella no es veu que sigui un
       desplegable, que és justament el que ha de quedar clar. */
    background-image: linear-gradient(45deg, transparent 50%, var(--t3) 50%),
                      linear-gradient(135deg, var(--t3) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
  }
  .tgl-sel:focus { outline: none; border-color: var(--t3); }
  /* Les accions, també apilades i no partides a mitja paraula. */
  .pub-tools-row { gap: 6px; }
  .pub-b--wide { flex: 1 1 auto; justify-content: center; }
}
/* Tota la columna a l'amplada de la bombolla: així el botó de publicar,
   el comptador i les eines queden alineats amb el que es publica, en lloc
   que el botó volés cap a la dreta de la pantalla. */
.pub-col { max-width: 420px; transition: max-width .18s ease; }
.pub-col.is-wide { max-width: 100%; }
/* Dues línies: a dalt el format i les accions, a baix els emojis. */
.pub-tools { display: block; margin-bottom: 10px; }
.pub-tools-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Sota el globus: separat d'ell i enganxat al peu, perquè es llegeixi
   com una eina d'escriure i no com una part del missatge. */
.pub-tools-row--emos { margin: 10px 0 0; gap: 2px; }
.pub-tools-row .spacer { flex: 1; }
/* Només icona: amb el text al costat no hi cabia res a l'amplada de la
   bombolla. */
.pub-ico { display: inline-flex; align-items: center; justify-content: center; flex: none;
           width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 6px;
           background: none; color: var(--t2); cursor: pointer; padding: 0; }
.pub-ico:hover { color: var(--t1); border-color: var(--t3); }
.pub-ico.is-ok { color: var(--c-ok); border-color: var(--c-ok); }
.pub-ico svg { width: 15px; height: 15px; }
/* L'amplada de la bombolla imita la del canal. Al "Bon dia" (105 línies a
   aquesta amplada) el botó "Amplia per escriure" la treu mentre es
   redacta; es torna a l'amplada real per revisar-ho abans d'enviar. */
/* Capçalera i peu fixos: es veuen com el text que sortirà però en gris i
   sense poder-hi entrar, perquè és el mateix cada dia. El cadenat del peu
   els obre quan de debò cal canviar-los. */
.tg-fix { padding: 12px 14px 0; font-size: 14.5px; line-height: 1.5;
          color: var(--t3); white-space: pre-wrap; word-break: break-word;
          user-select: none; cursor: default; }
.tg-fix + .tg-body[contenteditable] { padding-top: 8px; }
/* Pel PEU cal l'id i no `:last-child`: després seu hi ha el div de
   l'enllaç, encara que estigui amagat, o sigui que el peu no és mai
   l'últim fill i aquella regla no s'aplicava mai. Es quedava amb el
   `padding-bottom: 0` de `.tg-fix` i el text tocava la vora de la
   bombolla (usuari, 2026-09-10). */
#pub-fix-baix { padding: 8px 14px 16px; }
.tg-fix.is-obert { color: var(--t1); user-select: text; cursor: text; outline: none;
                   box-shadow: inset 0 0 0 2px var(--c-foto); border-radius: 8px; }
.pub-b.is-obert { color: var(--c-warn); border-color: var(--c-warn); }
.tg-body[contenteditable] {
  outline: none; min-height: 92px; max-height: 58vh; overflow-y: auto;
  white-space: pre-wrap; cursor: text;
}
.tg-body[contenteditable]:focus { box-shadow: inset 0 0 0 2px var(--c-foto); border-radius: 0 0 12px 12px; }
/* El text d'ajuda NO és contingut de debò: viu en un pseudo-element, o
   sigui que no s'ha d'esborrar per escriure-hi a sobre i no es pot
   publicar sense voler. Va en `::after` i no en `::before` perquè els
   tipus comencen amb un emoji (🔴, 📋) i la pista ha d'anar DESPRÉS
   d'ell, no davant. */
.tg-body.is-buit::after { content: attr(data-buit-actiu); color: var(--t4); font-style: italic; }
/* L'adreça va FORA del que s'edita: s'hi afegeix en publicar, i a dins es
   podria esborrar sense voler. */
.tg-link-preview { padding: 0 14px 12px; font-size: 13px; color: var(--c-foto);
                   word-break: break-all; }

.pub-b { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
         border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--t2); }
.pub-b:hover { color: var(--t1); border-color: var(--t3); }
.pub-b svg { width: 15px; height: 15px; }
/* DESPRÉS de `.pub-b` a propòsit: tenen la mateixa especificitat i mana
   l'ordre. Amb el modificador a dalt, el `width: 30px` de `.pub-b`
   guanyava i els botons amb text quedaven aplastats a un quadrat de
   30px — per això "Escurça els enllaços" i "Amplia per escriure" no es
   veien al Bon dia (2026-09-10). */
.pub-b--wide { width: auto; gap: 6px; padding: 0 10px; font-size: 12px; font-family: inherit; }
/* L'emoji que posarà el botó, dins del mateix botó: el que fa, es
   veu, i no cal endevinar-ho pel nom. */
.pub-b-emo { font-size: 13px; line-height: 1; }
/* El grup de format és només un embolcall per poder-lo amagar sencer a
   "Notícia". `display: contents` fa que no generi caixa, així els botons
   segueixen sent fills directes del flex i mantenen el mateix espaiat que
   quan no hi era. Quan porta `hidden`, la regla global de dalt hi guanya
   igualment (té !important). */
#pub-format { display: contents; }
/* La franja va A SOBRE de la foto i no superposada, igual que la posa
   ffmpeg al servidor. Estava com a capa absoluta al peu, i des que
   s'afegeix al llenç en lloc de tapar la imatge, això feia que la vista
   prèvia ensenyés una cosa i el canal en publiqués una altra — que és
   just el que aquesta pantalla no ha de fer mai. */
/* Sense `order`: al HTML ja va després de la foto, que és on es
   publica. */
.pub-badge { width: 100%; height: auto; }
/* `display: contents`: els emojis passen a ser fills directes de la fila,
   així el camp d'afegir (+) s'hi encadena com un més i queda SEMPRE al
   final. Com a caixa pròpia, la tira ocupava tota l'amplada i empenyia
   el + a una línia només per a ell. */
.pub-emos { display: contents; }
.pub-emo { flex: none; width: 28px; height: 28px; border: none; cursor: pointer;
           color: inherit; background: none; border-radius: 6px; font-size: 15px;
           line-height: 1;
           /* Apagats en repòs i encesos en passar-hi per sobre (idea de
              l'usuari, 2026-09-10): 27 emojis a tot color eren una fira
              que competia amb el que de debò s'ha de mirar, que és el
              text del globus. En gris la forma encara es reconeix —és
              per això que es tria un emoji i no una paraula— i el color
              torna just quan el necessites, en el moment de clicar. */
           filter: grayscale(1); opacity: .55;
           transition: filter .12s ease, opacity .12s ease; }
.pub-emo:hover, .pub-emo:focus-visible { filter: none; opacity: 1; background: var(--surface-2); }
/* Un emoji que mig canal veurà com un requadre buit: es marca amb una
   ratlla ambre, i es deixa una mica més encès perquè l'avís es vegi
   sense haver de passar-hi per sobre. No es prohibeix, és decisió seva. */
.pub-emo.is-risc { opacity: .75; box-shadow: inset 0 -2px 0 var(--c-warn); }

#pub-text { width: 100%; box-sizing: border-box; resize: vertical; padding: 12px 14px; font: inherit;
            font-size: 14.5px; line-height: 1.55; color: var(--t1); background: var(--surface-2);
            border: 1px solid var(--line); border-radius: 9px; }
#pub-text:focus { outline: none; border-color: var(--t3); }
.pub-check { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line);
             border-radius: 8px; background: var(--surface-2); }
.pub-check-k { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px;
               letter-spacing: .07em; text-transform: uppercase; color: var(--t3);
               margin-bottom: 6px; }
.pub-check-l { font-size: 12px; line-height: 1.7; word-break: break-all; }
.pub-check-l a { color: var(--c-foto); }
.pub-check-fl { color: var(--t4); margin: 0 6px; }
.pub-check-d { color: var(--t2); }
.pub-check-l .muted { color: var(--t4); }
.pub-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
/* Mai partit en dues línies: és l'acció que no es desfà i ha de
   llegir-se d'un cop. */
.pub-foot .btn--pri { white-space: nowrap; flex: none; }
/* El format, enganxat al comptador: són les dues coses que es miren
   mentre s'escriu. */
.pub-foot #pub-format + .pub-count { margin-left: 12px; }
.pub-count { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--t3); font-variant-numeric: tabular-nums; }
/* Telegram retalla els peus a 1024 caràcters SENSE avisar, així que passar-se
   ha de ser evident abans d'enviar, no una sorpresa al canal. */
.pub-count.over { color: var(--c-err); font-weight: 600; }
.pub-msg { margin: 12px 0 0; font-size: 13px; }
.pub-msg--ok { color: var(--c-ok); }
.pub-msg--err { color: var(--c-err); }
.pub-msg--warn { color: var(--c-warn); }

.pub-prev-k { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
              letter-spacing: .07em; text-transform: uppercase; color: var(--t3); margin-bottom: 10px; }
/* Imita la bombolla de Telegram prou perquè el que es veu aquí sigui el que
   sortirà: mateixa mida de text i mateix ordre (mèdia a dalt, text a sota). */
.tg-msg { border-radius: 12px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
/* La vista prèvia ensenya el FITXER real, no un requadre pintat. Era un
   degradat vermell amb el text "ÚLTIMA HORA" a sobre; d'allò en quedaven
   tres regles `.tg-media` escampades pel full, una anul·lant el fons de
   l'altra. Consolidades el 2026-09-10.
   En columna perquè la franja d'última hora va SOTA la foto, igual que
   la posa ffmpeg al servidor: si aquí es veiés en un lloc i al canal en
   un altre, la vista prèvia no serviria de res. */
.tg-media { position: relative; display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            padding: 0; background: none; height: auto; }
.tg-body { padding: 12px 14px; font-size: 14.5px; line-height: 1.5; color: var(--t1); word-break: break-word; }
.tg-empty { color: var(--t4); font-style: italic; }

/* Camp lliure per afegir emojis: se'n copia un d'on sigui, s'enganxa aquí i
   queda a la barra (petició de l'usuari, 2026-09-10). Es guarda al navegador
   per compte. */
.pub-emo-add { width: 28px; height: 28px; text-align: center; font-size: 14px; padding: 0;
               border: 1px dashed var(--line); border-radius: 6px; background: none; color: var(--t3); }
.pub-emo-add:focus { outline: none; border-color: var(--t3); color: var(--t1); }
.tg-media video, .tg-media img { display: block; width: 100%; height: auto; }

/* Camp per enganxar l'enllaç de la notícia: és l'única cosa que ha de fer
   la persona, així que va a dalt i ben visible. */
.pub-link { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px 12px;
            border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.pub-link svg { width: 17px; height: 17px; color: var(--t3); flex: none; }
.pub-link input { flex: 1; min-width: 0; border: none; background: none; color: var(--t1);
                  font: inherit; font-size: 14px; }
.pub-link input:focus { outline: none; }
.pub-link-msg { display: block; font-size: 11.5px; color: var(--t3); margin: -6px 0 10px; }
.pub-link-msg:empty { display: none; }
.pub-link-msg--ok { color: var(--c-ok); }
.pub-link-msg--err { color: var(--c-err); white-space: normal; }
/* L'enllaç a la vista prèvia, amb l'aspecte que té a Telegram. */
.tg-link { color: #62A8EA; text-decoration: none; }

/* ── Enllaços curts (mòdul Publica) ─────────────────────────────────── */
.pub-shortdom { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--t3); }
/* El panell plegable. La fletxa pròpia del navegador es treu i es dibuixa
   la nostra a la dreta, per no trencar l'alineació de la barra. */
.pub-links > summary { cursor: pointer; list-style: none; }
.pub-links > summary::-webkit-details-marker { display: none; }
.pub-links > summary::after {
  content: ''; margin-left: auto; width: 7px; height: 7px;
  border-right: 1.5px solid var(--t3); border-bottom: 1.5px solid var(--t3);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s ease;
}
.pub-links[open] > summary::after { transform: rotate(225deg) translate(-1px, -1px); }
.pub-links > summary:hover .panel-title { color: var(--t1); }
.tbl--links { min-width: 620px; }
.tbl--links td:first-child { white-space: nowrap; }
/* L'adreça de destinació es retalla en una línia: el que importa d'ella és
   reconèixer la notícia, i el text sencer hi és al rollover. */
.lnk-target { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Discret: el que s'ha de llegir d'aquesta taula són els clics, no el
   botó de copiar. */
.lnk-copy {
  background: none; border: 1px solid var(--line); border-radius: 5px;
  color: var(--t3); cursor: pointer; padding: 2px; margin-right: 7px;
  vertical-align: middle; line-height: 0;
}
.lnk-copy:hover { color: var(--t1); border-color: var(--t3); }
.lnk-copy.is-ok { color: var(--c-ok); border-color: var(--c-ok); }
.lnk-copy i, .lnk-copy svg { width: 11px; height: 11px; }

/* L'interruptor de colors accessibles, al menú d'usuari. */
.usr-sw { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; width: 100%;
          padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
          background: none; color: var(--t2); cursor: pointer; font: inherit;
          font-size: 13px; text-align: left; }
.usr-sw:hover { color: var(--t1); border-color: var(--t3); }
.usr-sw.is-on { color: var(--t1); border-color: var(--c-ok); background: var(--tint-ok); }
.usr-sw svg { width: 15px; height: 15px; flex: none; }
.usr-sw-hint { flex-basis: 100%; font-size: 11px; font-style: normal; color: var(--t3); }

/* ── Colors accessibles ──────────────────────────────────────────────────
   Un ajust INDEPENDENT del tema, no un tercer tema. Qui no distingeix bé
   els colors també té preferència de clar o fosc; obligar-lo a triar
   "mode daltònic" EN LLOC de fosc seria donar-li una versió de segona.
   Per això `data-colors` conviu amb `data-theme` i n'hi ha una paleta per
   a cadascun.

   Es diu "Colors accessibles" i no "mode daltònic" a propòsit: descriu el
   que fa i no a qui assenyala, així ningú s'ha d'etiquetar per fer-lo
   servir. També serveix a qui mira una pantalla al sol.

   Els valors NO estan triats a ull. Es van simular les tres formes de
   daltonisme (protanòpia, deuteranòpia i tritanòpia) sobre cada parella
   de colors que apareixen JUNTS a la interfície, i es va buscar el
   conjunt que maximitza la separació mínima mantenint el significat
   (vídeo verd, foto blau, error càlid) i un contrast de 3,5 com a mínim
   sobre el seu fons. Resultat, contra la paleta normal:

     tipus de contingut  2%  ->  24% (fosc) / 17% (clar)
     estats             11%  ->  28% (fosc) / 25% (clar)

   El 2% d'avui vol dir que foto (blau) i àudio (morat) són literalment el
   mateix color per a qui té les dues formes més comunes: les barres de
   proporció no es podien llegir.

   Per retocar-ne un to, es canvia aquí i prou; la resta de la interfície
   no sap que existeix aquesta paleta. */
html[data-theme="dark"][data-colors="accessible"] {
  --c-video: #A0E3C4;
  --c-foto: #29A6E0;
  --c-audio: #C8417C;
  --c-vert: #815EE8;
  --c-ok: #81E4DA;
  --c-warn: #E8D65E;
  --c-err: #BC694E;
  --tint-ok: rgba(129,228,218,.14);
  --tint-warn: rgba(232,214,94,.14);
  --tint-err: rgba(188,105,78,.14);
  --tint-info: rgba(41,166,224,.14);
  --tint-err-strong: rgba(188,105,78,.26);
  --tint-warn-strong: rgba(232,214,94,.28);
}

html[data-theme="light"][data-colors="accessible"] {
  --c-video: #27684A;
  --c-foto: #3587D4;
  --c-audio: #E02991;
  --c-vert: #43206F;
  --c-ok: #16988B;
  --c-warn: #B38019;
  --c-err: #683327;
  --tint-ok: rgba(22,152,139,.14);
  --tint-warn: rgba(179,128,25,.14);
  --tint-err: rgba(104,51,39,.14);
  --tint-info: rgba(53,135,212,.14);
  --tint-err-strong: rgba(104,51,39,.26);
  --tint-warn-strong: rgba(179,128,25,.28);
}