/* ==========================================================================
   MediaScope — sistema de disseny.

   Copiat aqui com a FULL SEPARAT I IDENTIFICAT, tal com decideix la D-16: Meteo
   es Python amb Jinja i MediaScope es Laravel amb Blade, la plantilla no es pot
   compartir pero el CSS si.

   NO INVENTIS colors, radis ni tipografies (CLAUDE.md). Si et cal un component
   nou, construeix-lo amb aquest lexic i documenta'l a docs/disseny.md.

   Extret de docs/maqueta.html, que es la referencia visual i s'obre amb doble
   clic. Si toques res aqui, actualitza-la tambe: divergir-ne es el risc que la
   D-16 assumeix conscientment.
   ==========================================================================

   Sistema de disseny Xalanda — heretat de xalanda-meteo-tvc/app/templates/base.html
   Els tokens i els components base son identics. El que s'hi afegeix son els
   components que MediaScope necessita i Meteo no te (reixa de documents, zona
   de pujada, xips d'entitat, fitxa amb OCR), construits amb el mateix lexic.
   ========================================================================== */
:root {
  color-scheme: light dark;
  --brand: #2563eb; --brand-fosc: #1e40af;
  --bg: #f1f5f9; --surface: #ffffff; --surface-2: #f8fafc;
  --ink: #0f172a; --muted: #64748b; --line: #e2e8f0;
  --ombra: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --radi: 14px;
  --track: #e5e9f0;
  --verd: #16a34a; --vermell: #dc2626; --gris: #94a3b8; --taronja: #ea580c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220; --surface: #131c2e; --surface-2: #0f1728;
    --ink: #e6edf7; --muted: #93a1b5; --line: #24324a;
    --ombra: 0 1px 3px rgba(0,0,0,.4);
    --track: #26334a;
  }
}
/* El commutador de tema del visor marca data-theme a l'arrel i ha de guanyar
   la media query en tots dos sentits. */
:root[data-theme="dark"] {
  --bg: #0b1220; --surface: #131c2e; --surface-2: #0f1728;
  --ink: #e6edf7; --muted: #93a1b5; --line: #24324a;
  --ombra: 0 1px 3px rgba(0,0,0,.4);
  --track: #26334a;
}
:root[data-theme="light"] {
  --bg: #f1f5f9; --surface: #ffffff; --surface-2: #f8fafc;
  --ink: #0f172a; --muted: #64748b; --line: #e2e8f0;
  --ombra: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --track: #e5e9f0;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  margin: 0; background: var(--bg); color: var(--ink); line-height: 1.45;
}
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

/* --- Capcalera (identica a Meteo) --- */
.topbar { background: linear-gradient(100deg, var(--brand-fosc), var(--brand));
          color: #fff; box-shadow: var(--ombra); }
.topbar-in { max-width: 1180px; margin: 0 auto; padding: .85rem 1.1rem; }
.topbar-main { display: flex; flex-direction: column; gap: .7rem; }
.brand-line { display: flex; align-items: center; justify-content: space-between;
              gap: .6rem 1.5rem; flex-wrap: wrap; }
.brand-left { display: flex; align-items: center; gap: .9rem; }
.brand-right { display: flex; align-items: center; justify-content: flex-end;
               gap: .9rem; flex-wrap: wrap; }
.tabs-row { display: flex; justify-content: space-between; align-items: center;
            gap: .8rem 1rem; flex-wrap: wrap; }
.topbar-status { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.topbar img { height: 40px; width: auto; display: block; }
.brand-line .t { font-size: 1.6rem; font-weight: 800; letter-spacing: .2px; }
.brand-line .s { font-size: 1.2rem; opacity: .92; font-weight: 500; }
.servei { display: inline-flex; align-items: center; gap: .5rem;
          font-size: .9rem; font-weight: 700; color: #fff; white-space: nowrap;
          padding: .42rem .95rem; border-radius: 999px;
          background: var(--verd); border: 1px solid rgba(255,255,255,.28);
          box-shadow: 0 1px 3px rgba(0,0,0,.22); }
.servei .dot { width: 12px; height: 12px; border-radius: 50%; background: #eafff1;
               animation: batec-clar 1.8s infinite; }
/* Servei caigut: gris i SENSE batec. El batec vol dir "hi ha algu a l'altra
   banda"; deixar-lo bategant en gris seria contradir-se. */
.servei.off { background: var(--gris); }
.servei.off .dot { background: #f1f5f9; animation: none; }
/* Servei amb incidencia (D-69). En taronja com tot el que reclama atencio en
   aquest projecte -- .e-pendent, .ia-fet, .marca-serie.avis -- i no en vermell:
   el servei funciona, nomes hi ha alguna cosa a mirar. */
.servei.incidencia { background: var(--taronja); }
/* IA local ocupada per un altre model (D-109). Verda i amb batec -- funciona i
   hi ha algu a l'altra banda -- pero amb vora DISCONTINUA, com la pestanya de la
   Font UdL (D-86): "una altra mena de cosa" sense inventar cap color. El taronja
   no: al costat hi ha la pindola d'incidencies i vol dir "mira-t'ho". */
.servei.ocupada { border: 2px dashed rgba(255,255,255,.9); }
/* El commutador del pilot automatic (D-120). En manual, transparent: es
   l'estat normal i no ha de cridar. Engegat, en el blau fosc de la marca: no es
   cap incidencia (taronja) ni cap avaria (gris), pero s'ha de veure que la
   maquina esta decidint per tu. */
button.servei { font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
.servei.pilot { background: transparent; }
.servei.pilot.engegat { background: var(--brand-fosc); border-color: #fff; }
/* El monitor (D-121): batega mentre la IA te feina del pilot; quiet, el punt
   es queda encès sense batec -- engegat pero sense res a fer ara mateix. */
.servei.pilot.quiet .dot { animation: none; }
.servei.pilot .cnt { font-size: .78rem; font-weight: 800; padding: .05rem .45rem; border-radius: 999px;
                     background: rgba(255,255,255,.22); }
button.servei:disabled { cursor: default; }
a.servei { text-decoration: none; }
a.servei:hover { filter: brightness(1.08); }

@keyframes batec-clar {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
  70%  { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
/* Indicador rectangular blanc, per diferenciar-lo de les pestanyes i del servei */
.qos { font-size: .82rem; font-weight: 800; color: var(--brand); white-space: nowrap;
       padding: .34rem .7rem; border-radius: 8px; background: #fff;
       box-shadow: 0 1px 3px rgba(0,0,0,.18); font-variant-numeric: tabular-nums; }
.qos::before { content: "◔ "; opacity: .8; }
.qos.pendents::before { content: "⧗ "; }

.tabs { display: flex; gap: .4rem; align-items: stretch; flex-wrap: wrap; }
.tabs a { color: #fff; text-decoration: none; padding: .42rem .85rem;
          border-radius: 999px; font-size: .9rem; font-weight: 600;
          background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
          transition: background .15s;
          display: inline-flex; align-items: center; justify-content: center; }
.tabs a:hover { background: rgba(255,255,255,.22); }
.tabs a.actiu { background: #fff; color: var(--brand-fosc); border-color: #fff; }
.tabs a .lock { margin-left: .35rem; line-height: 1; font-size: .78rem; }
/* La pestanya d'una font PROPIA (D-86).

   Ha de distingir-se a cop d'ull perque no es el mateix que la premsa, pero no
   pot fer servir el taronja: aquell vol dir "mira-t'ho" a tot arreu i aixo no
   reclama res. La vora discontinua diu "una altra mena de cosa" sense inventar
   cap color, que es el que mana el CLAUDE.md. */
.tabs a.propia { border-style: dashed; border-color: rgba(255,255,255,.55); }
.tabs a.propia:hover { border-color: #fff; }
.tabs a.propia.actiu { border-style: dashed; border-color: var(--brand-fosc); }
.tabs a .marca { margin-left: .35rem; line-height: 1; font-size: .78rem; }

.tabs a .cnt { margin-left: .4rem; font-size: .72rem; font-weight: 800;
               background: rgba(255,255,255,.25); border-radius: 999px;
               padding: .05rem .4rem; font-variant-numeric: tabular-nums; }
.tabs a.actiu .cnt { background: color-mix(in srgb, var(--brand) 15%, #fff); }
/* La campaneta de la pestanya de Fonts (D-75). En taronja com tot el que
   reclama atencio: el numero de noves es informacio, aixo es FEINA. */
.tabs a .cnt.avis { background: var(--taronja); color: #fff; }
.tabs a.actiu .cnt.avis { background: var(--taronja); color: #fff; }


main { max-width: 1180px; margin: 0 auto; padding: 1.1rem 1.1rem 3rem; }

/* --- Targeta (identica a Meteo) --- */
.card { background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--radi); box-shadow: var(--ombra);
        padding: 1.1rem 1.15rem; margin-bottom: 1.15rem; }
.st-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .2rem; }
.st-head h2 { font-size: 1.1rem; margin: 0; font-weight: 700; }
.st-head .codi { display: inline-flex; align-items: center; font-size: .8rem;
                 font-weight: 700; padding: .2rem .6rem; border-radius: 999px;
                 background: var(--brand); color: #fff; }
.st-sub { color: var(--muted); font-size: .82rem; margin: .1rem 0 1rem; }
.k { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
     color: var(--muted); font-weight: 700; }

/* --- Cercador --- */
.cercador { display: flex; gap: .5rem; flex-wrap: wrap; }
.cercador .camp { flex: 1 1 260px; display: flex; align-items: center; gap: .5rem;
                  background: var(--surface-2); border: 1px solid var(--line);
                  border-radius: 8px; padding: .55rem .7rem; }
.cercador input { flex: 1; border: 0; background: transparent; color: var(--ink);
                  font: inherit; font-size: .95rem; min-width: 0; }
.cercador input:focus { outline: none; }
.btn { background: var(--brand); color: #fff; border: 0; border-radius: 8px;
       padding: .55rem 1.1rem; font-weight: 700; font-size: .9rem; cursor: pointer;
       font-family: inherit; }
.btn.secundari { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.filtres { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
/* ----------------------------------------------- el panell de xifres (D-81)
   Una caixa de l'ample de la pagina amb la magnitud de l'arxiu.

   UNA sola xifra heroi i cinc de secundaries. Les xifres grans van amb els
   digits PROPORCIONALS de la tipografia i no amb tabular-nums: aquell iguala
   l'amplada de tots els digits i a mida gran el numero queda solt. El
   tabular-nums es per a columnes que s'han d'alinear, no per a aixo.

   El taronja no hi va mai sol: sempre amb la campaneta i amb l'etiqueta. */
.panell { background: var(--surface); border: 1px solid var(--line);
          border-radius: var(--radi); box-shadow: var(--ombra);
          padding: 1.2rem 1.3rem; margin-bottom: 1.15rem;
          display: flex; flex-wrap: wrap; gap: 1.4rem 2.4rem; align-items: flex-start; }

.panell-heroi { display: flex; flex-direction: column; gap: .1rem;
                padding-right: 2.4rem; border-right: 1px solid var(--line); flex: 0 0 auto; }
.panell-heroi .xifra { font-size: 3.1rem; font-weight: 800; line-height: 1.05;
                       letter-spacing: -.02em; color: var(--brand); }
.panell-heroi .etiqueta { font-size: 1rem; font-weight: 600; color: var(--ink); }

.panell-caselles { display: flex; flex-wrap: wrap; gap: 1.2rem 2.2rem; flex: 1 1 340px; }
.casella { display: flex; flex-direction: column; gap: .1rem;
           text-decoration: none; color: inherit; min-width: 8.5rem; }
.casella .xifra { font-size: 1.85rem; font-weight: 800; line-height: 1.1; color: var(--ink); }
.casella .etiqueta { font-size: .92rem; font-weight: 600; color: var(--ink); }
.casella:hover .xifra { color: var(--brand); }

/* Reclama atencio: el mateix taronja de sempre, i nomes quan n'hi ha. */
.casella.reclama .xifra, .casella.reclama .etiqueta { color: var(--taronja); }
.casella.reclama:hover .xifra { color: var(--taronja); }

.panell .k { font-weight: 600; }

@media (max-width: 700px) {
  .panell-heroi { border-right: 0; padding-right: 0; }
  .panell-heroi .xifra { font-size: 2.6rem; }
}


/* --- Fila de comandes d'una fitxa. Pensada per creixer: les accions noves
       hi van a dins i s'alineen soles. L'esborrar se'n va a la dreta amb un
       margin-left:auto, que es una accio destructiva i no ha de quedar al
       costat de les altres. --- */
.comandes { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
            margin: 0 0 .9rem; }
.filtre { border: 1px solid var(--line); background: var(--surface); color: var(--ink);
          cursor: pointer; padding: .34rem .8rem; border-radius: 999px;
          font-size: .82rem; font-weight: 600; font-family: inherit; transition: background .15s; }
.filtre:hover { background: var(--surface-2); }
.filtre.actiu { background: var(--brand); color: #fff; border-color: var(--brand); }
/* Els filtres tambe poden portar recompte, com les pestanyes: a la safata de
   Fonts diuen quantes en queden per mirar a cada calaix (D-45). Es un enllac i
   no un boto, aixi que li cal el display per alinear la capsula. */
a.filtre { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.filtre .cnt { font-size: .72rem; font-weight: 800; padding: .05rem .4rem;
               border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.filtre.actiu .cnt { background: color-mix(in srgb, #fff 22%, transparent); color: #fff; }

/* --- El tros del text de l'OCR on surt el que s'ha buscat (D-35). Sense
       aixo, un resultat que nomes casa per dins de la fotografia sembla
       arbitrari: la paraula no surt enlloc de la targeta. --- */
.fragment { font-size: .78rem; line-height: 1.45; color: var(--muted);
            margin: .4rem 0 0; max-height: 3.6em; overflow: hidden; }
.fragment mark { background: color-mix(in srgb, var(--brand) 22%, transparent);
                 color: inherit; font-weight: 700; padding: 0 .1em; border-radius: 3px; }

/* --- Xips d'entitat: tenyits pel tipus, sempre dins la paleta --- */
.xips { display: flex; flex-wrap: wrap; gap: .3rem; }
.xip { display: inline-flex; align-items: center; gap: .3rem;
       font-size: .74rem; font-weight: 700; padding: .16rem .55rem;
       border-radius: 999px; white-space: nowrap;
       background: color-mix(in srgb, var(--xip-c) 14%, var(--surface));
       color: var(--xip-c);
       border: 1px solid color-mix(in srgb, var(--xip-c) 32%, var(--line)); }
.xip::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
               background: var(--xip-c); flex: none; }
/* Els noms de classe segueixen els valors de entities.type, que son els
   identificadors canonics del model. Traduir-los aqui obligaria a mantenir
   una taula de correspondencies nomes per al CSS. */
.xip-person       { --xip-c: #2563eb; }
.xip-place        { --xip-c: #16a34a; }
.xip-brand        { --xip-c: #7c3aed; }
.xip-organization { --xip-c: #ea580c; }
.xip-building     { --xip-c: #0891b2; }
.xip-address      { --xip-c: #64748b; }
.xip-event        { --xip-c: #db2777; }
.xip-topic        { --xip-c: #0d9488; }
.xip-other        { --xip-c: #94a3b8; }

/* --- Reixa de documents --- */
.reixa { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
         gap: .7rem; margin-top: .3rem; }
.doc { background: var(--surface-2); border: 1px solid var(--line);
       border-radius: 12px; overflow: hidden; display: flex; flex-direction: column;
       transition: border-color .15s, box-shadow .15s; cursor: pointer; }
.doc:hover { border-color: var(--brand); box-shadow: 0 2px 8px rgba(37,99,235,.14); }
.doc-img { position: relative; aspect-ratio: 3 / 4; background: var(--track);
           display: block; overflow: hidden; }
.doc-img svg { width: 100%; height: 100%; display: block; }
/* Franja d'estat: el color diu si cal fer-hi res abans de llegir cap text */
.doc-estat { position: absolute; left: 0; right: 0; top: 0; height: 4px; }
.e-pendent { background: var(--taronja); }
.e-revisat { background: var(--verd); }
.e-destacat { background: var(--brand); }
.doc-ocr { position: absolute; right: .35rem; bottom: .35rem;
           font-size: .64rem; font-weight: 800; text-transform: uppercase;
           letter-spacing: .04em; padding: .12rem .4rem; border-radius: 5px;
           background: rgba(15,23,42,.78); color: #fff; }
.doc-ocr.baixa { background: rgba(234,88,12,.9); }
.doc-cos { padding: .55rem .6rem .6rem; display: flex; flex-direction: column; gap: .35rem; }
.doc-tit { font-size: .84rem; font-weight: 700; line-height: 1.3; text-wrap: balance;
           display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
           overflow: hidden; }
.doc-meta { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
            font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mitja { font-size: .68rem; font-weight: 800; text-transform: uppercase;
         letter-spacing: .03em; color: var(--brand);
         background: color-mix(in srgb, var(--brand) 12%, var(--surface));
         border-radius: 5px; padding: .1rem .35rem; }
/* Data inferida de l'EXIF: es marca perque encara no esta confirmada */
.data-inf { border-bottom: 1px dashed var(--muted); cursor: help; }

/* --- Fitxa del document --- */
.fitxa { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 720px) { .fitxa { grid-template-columns: 1fr; } }
.fitxa-img { background: var(--track); border: 1px solid var(--line);
             border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 4; }
.fitxa-img svg { width: 100%; height: 100%; display: block; }
.camps { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
         gap: .6rem; margin-bottom: .8rem; }
.camp-b { background: var(--surface-2); border: 1px solid var(--line);
          border-radius: 12px; padding: .5rem .7rem; }
.camp-b .v { font-size: 1rem; font-weight: 700; margin-top: .1rem;
             font-variant-numeric: tabular-nums; }
.camp-b .v small { font-size: .7rem; color: var(--muted); font-weight: 600; }
.ocr-box { background: var(--surface-2); border: 1px solid var(--line);
           border-radius: 12px; padding: .7rem .8rem; margin-top: .8rem; }
.ocr-txt { font-size: .82rem; line-height: 1.6; margin: .4rem 0 0;
           max-height: 132px; overflow: auto; color: var(--ink); }
.ocr-txt mark { background: color-mix(in srgb, var(--brand) 22%, transparent);
                color: inherit; border-radius: 3px; padding: 0 .12rem; }
.ocr-cap { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.conf { font-size: .72rem; font-weight: 800; color: var(--verd);
        font-variant-numeric: tabular-nums; }
.conf.baixa { color: var(--taronja); }

/* --- Zona de pujada: reutilitza l'idioma de "tile buida" de Meteo --- */
.pujada { border: 2px dashed var(--line); border-radius: 12px;
          background: var(--surface-2); padding: 1.8rem 1.2rem; text-align: center;
          display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.pujada .ico { font-size: 2rem; line-height: 1; opacity: .55; }
.pujada .tit { font-weight: 700; font-size: 1rem; }
.pujada .sub { color: var(--muted); font-size: .84rem; max-width: 44ch; }
.progres { width: 100%; max-width: 320px; height: 7px; border-radius: 4px;
           background: var(--track); overflow: hidden; margin-top: .3rem; }
.progres > span { display: block; height: 100%; background: var(--brand); border-radius: 4px; }

/* --- Login: heretat de Meteo (base.html linies 555-570), sense tocar --- */
.login-wrap { display: flex; justify-content: center; padding: 2rem 0; }
.login-card { background: var(--surface); border: 1px solid var(--line);
              border-radius: var(--radi); box-shadow: var(--ombra);
              padding: 1.4rem 1.5rem; width: 100%; max-width: 360px; }
.login-card h1 { margin: 0 0 .2rem; font-size: 1.15rem; font-weight: 700; }
.login-card .sub { color: var(--muted); font-size: .82rem; margin: 0 0 1rem; }
.login-card label { display: block; font-size: .8rem; color: var(--muted);
                    font-weight: 600; margin-bottom: .8rem; }
.login-card input { display: block; width: 100%; margin-top: .25rem; font: inherit;
                    background: var(--surface-2); color: var(--ink);
                    border: 1px solid var(--line); border-radius: 8px; padding: .5rem .6rem; }
.login-card button { width: 100%; margin-top: .4rem; background: var(--brand); color: #fff;
                     border: 0; border-radius: 8px; padding: .55rem; font-weight: 700;
                     font-size: .95rem; cursor: pointer; font-family: inherit; }

/* Sessio oberta: nom i sortida, a la capcalera */
.sessio { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem;
          font-weight: 700; color: #fff; white-space: nowrap; }
.sessio form { display: inline; }
.sessio button { background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
                 border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
                 padding: .28rem .7rem; font: inherit; font-size: .8rem; font-weight: 600;
                 transition: background .15s; }
.sessio button:hover { background: rgba(255,255,255,.26); }

.banner { border-radius: 10px; padding: .6rem .9rem; margin: 0 0 1rem;
          font-size: .9rem; font-weight: 600;
          color: var(--brand);
          background: color-mix(in srgb, var(--brand) 10%, var(--surface));
          border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); }
.banner.err { color: var(--vermell);
              background: color-mix(in srgb, var(--vermell) 12%, var(--surface));
              border-color: color-mix(in srgb, var(--vermell) 35%, var(--line)); }
.banner.ok  { color: var(--verd);
              background: color-mix(in srgb, var(--verd) 14%, var(--surface));
              border-color: color-mix(in srgb, var(--verd) 35%, var(--line)); }
.peu { color: var(--muted); font-size: .78rem; text-align: center; padding: .5rem 0 0; }
@media (prefers-reduced-motion: reduce) {
  .servei .dot { animation: none; }
  * { transition: none !important; }
}

/* --- Formulari de la fitxa --- */
/* La targeta .doc passa a ser un enllac: ha de continuar semblant una targeta. */
a.doc { text-decoration: none; color: inherit; }

.camp-b input, .camp-b select, .camp-b textarea {
  width: 100%; margin-top: .2rem; font: inherit; font-size: .92rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: .4rem .55rem;
}
.camp-b textarea { resize: vertical; min-height: 4.5rem; }
.camp-b { cursor: text; }
.camp-b:focus-within { border-color: var(--brand); }

.fila-entitat { display: flex; gap: .4rem; margin-bottom: .35rem; }
.fila-entitat select { flex: 0 0 9.5rem; }
.fila-entitat select, .fila-entitat input {
  font: inherit; font-size: .88rem;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: .38rem .5rem;
}
.fila-entitat input { flex: 1 1 auto; min-width: 0; }

/* Paginacio de Laravel, amb el lexic del sistema. */
nav[role="navigation"] { font-size: .85rem; }
nav[role="navigation"] a, nav[role="navigation"] span[aria-current] {
  display: inline-block; padding: .3rem .6rem; border-radius: 8px;
  text-decoration: none; color: var(--ink); border: 1px solid var(--line);
  margin-right: .25rem;
}
nav[role="navigation"] span[aria-current] { background: var(--brand); color: #fff; border-color: var(--brand); }

/* --- Editor de captura (D-25) --- */
/* El llenc te alcada limitada perque a un mobil vertical l'editor no ha de
   deixar els botons fora de pantalla: retallar sense veure "Fet" es inutil. */
.editor-llenc { background: var(--surface-2); border: 1px solid var(--line);
                border-radius: 12px; overflow: hidden; }
.editor-llenc img { display: block; max-width: 100%; max-height: 60vh; }
.editor-eines { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }

/* Cropper.js pinta amb el seu blau; que faci servir el de la marca. */
.cropper-view-box, .cropper-face { outline-color: var(--brand); }
.cropper-line, .cropper-point { background-color: var(--brand); }

/* --- Pestanyes de prestatgeria (D-30) --- */
/* Pestanyes de prestatgeria (D-30).

   Son les mateixes "tipus bloc de notes" que les de l'Aemet al Meteo -- alla
   es diuen .nb-tab -- i no pindoles: la pestanya activa s'ha de veure
   enganxada al contingut de sota, com la llengueta d'una carpeta.

   Dues diferencies amb el Meteo, totes dues volgudes: aqui son ENLLAÇOS,
   perque cada lleixa te la seva URL i s'ha de poder desar als preferits (cal
   desfer el subratllat), i CEDEIXEN A LA LINIA SEGUENT, perque no sabem
   quantes prestatgeries hi haura. */
.lleixes { display: flex; gap: .35rem; flex-wrap: wrap; margin: .9rem 0 0;
           border-bottom: 2px solid var(--line); }
.lleixa { display: inline-flex; align-items: center; gap: .45rem;
          border: 1px solid var(--line); border-bottom: 0; background: var(--surface-2);
          color: var(--muted); font-weight: 700; font-size: .92rem;
          padding: .55rem 1.3rem; border-radius: 12px 12px 0 0; margin-bottom: -2px;
          border-top: 3px solid transparent; text-decoration: none; }
.lleixa:hover { color: var(--ink); }
.lleixa.actiu { background: var(--surface); color: var(--ink);
                border-top-color: var(--brand); border-bottom: 2px solid var(--surface); }
.lleixa .cnt { font-size: .72rem; font-weight: 800; padding: .05rem .4rem;
               border-radius: 999px; background: var(--surface); color: var(--muted);
               font-variant-numeric: tabular-nums; }
.lleixa.actiu .cnt { background: var(--surface-2); }

/* Insignia de la IA: ha de dir que ENCARA falta confirmar-ho (D-31). Va en
   taronja, el mateix color que .e-pendent: no es una novetat, es "pendent". */
.ia-fet { display: inline-flex; align-items: center; gap: .4rem;
          font-size: .78rem; font-weight: 700; padding: .22rem .6rem; border-radius: 999px;
          color: var(--taronja);
          background: color-mix(in srgb, var(--taronja) 12%, var(--surface));
          border: 1px solid color-mix(in srgb, var(--taronja) 32%, var(--line)); }
/* Ja revisat: neutre a proposit. El taronja de .ia-fet vol dir PENDENT, i un
   document confirmat ja no ho es. El que queda es la transparencia -- dir que
   hi ha passat una IA -- i aixo no ha de cridar l'atencio (D-32). */
.ia-fet.ia-vist { color: var(--muted); background: var(--surface-2);
                  border-color: var(--line); font-weight: 600; }

/* --- Analisi en curs (D-33). Substitueix el boto mentre la feina es a la
       cua: si el boto hi fos, es tornaria a clicar sense saber-ho i cada
       enviament ocupa la targeta. El batec diu que alla hi passa alguna cosa,
       encara que trigui dos minuts a acabar. --- */
.processant { display: inline-flex; align-items: center; gap: .5rem;
              font-size: .82rem; font-weight: 700; padding: .34rem .8rem;
              border-radius: 999px; color: var(--brand);
              background: color-mix(in srgb, var(--brand) 10%, var(--surface));
              border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); }
.processant .dot { width: 9px; height: 9px; border-radius: 50%;
                   background: var(--brand); animation: batec-marca 1.4s infinite; }
@keyframes batec-marca {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .processant .dot, .servei .dot { animation: none; }
}

/* --- Estat d'una fitxa: pendent o revisat. La classe s'usava des del primer
       dia a document.blade.php pero no s'havia arribat a definir mai, i el
       text sortia pelat al costat del titular. --- */
.live { display: inline-flex; align-items: center; gap: .4rem;
        font-size: .8rem; font-weight: 700; padding: .2rem .65rem;
        border-radius: 999px; border: 1px solid var(--line); }
.live .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.live.on  { color: var(--verd);
            background: color-mix(in srgb, var(--verd) 12%, var(--surface));
            border-color: color-mix(in srgb, var(--verd) 30%, var(--line)); }
.live.off { color: var(--taronja);
            background: color-mix(in srgb, var(--taronja) 12%, var(--surface));
            border-color: color-mix(in srgb, var(--taronja) 30%, var(--line)); }

/* --- Anàlisi (D-37): comparar sèries de l'arxiu ------------------------ */
.serie { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
         padding: .5rem .6rem; margin-top: .4rem; border: 1px solid var(--line);
         border-radius: 12px; background: var(--surface-2); }
.serie select, .serie input { padding: .35rem .5rem; border-radius: 8px;
                              border: 1px solid var(--line); background: var(--surface);
                              color: var(--ink); font-family: inherit; font-size: .85rem; }
.serie .serie-valor { flex: 1 1 12rem; display: flex; }
.serie .serie-valor > * { width: 100%; }
.serie-treu { margin-left: auto; }
/* El punt de color lliga la fila amb la seva línia a la gràfica: sense ell,
   amb tres sèries no se sap quina és quina. */
.serie-color { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }

.llegenda { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-bottom: .7rem; }
.llegenda-item { display: inline-flex; align-items: center; gap: .45rem;
                 font-size: .85rem; font-weight: 600; }

/* L'SVG s'estira sol amb el contenidor: el viewBox ja fixa les proporcions. */
.gr { width: 100%; height: auto; display: block; }
.gr text { font-family: inherit; font-variant-numeric: tabular-nums; }

/* --- Anàlisi: pista de contacte i taula de dades (D-37) ---------------- */
.grafica-zona { position: relative; }
.pista { position: absolute; z-index: 5; pointer-events: none;
         background: var(--surface); border: 1px solid var(--line);
         border-radius: 10px; box-shadow: var(--ombra);
         padding: .5rem .65rem; font-size: .82rem; min-width: 9rem; }
.pista-cap { font-weight: 800; margin-bottom: .3rem; }
.pista-fila { display: flex; align-items: center; gap: .45rem; }
.pista-fila b { margin-left: auto; font-variant-numeric: tabular-nums; }
/* La zona sensible és tota la columna, no la barra: encertar una barra prima
   amb el punter és una feina que no ha de fer l'usuari. */
.gr .zona:hover { fill: var(--ink); fill-opacity: .04; }

.taula-dades { width: 100%; border-collapse: collapse; margin-top: .7rem;
               font-size: .84rem; font-variant-numeric: tabular-nums; }
.taula-dades th, .taula-dades td { text-align: left; padding: .4rem .55rem;
                                   border-bottom: 1px solid var(--line); }
.taula-dades th { color: var(--muted); font-size: .72rem; text-transform: uppercase;
                  letter-spacing: .04em; }
.taula-dades td + td, .taula-dades th + th { text-align: right; }

/* --- Anàlisi: les notícies de darrere d'una barra (D-38) --------------- */
/* Les marques i les xifres es poden clicar: el cursor ho ha de dir. */
.gr .marca { cursor: pointer; }
.gr .marca:hover { filter: brightness(1.12); }
.xifra { background: none; border: 0; padding: 0; font: inherit; color: var(--brand);
         font-weight: 700; cursor: pointer; text-decoration: underline;
         text-underline-offset: 2px; font-variant-numeric: tabular-nums; }

.llista-not { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.llista-not li { display: flex; gap: .7rem; align-items: flex-start;
                 padding: .55rem; border: 1px solid var(--line); border-radius: 12px;
                 background: var(--surface-2); }
.llista-not img, .llista-not .sense-mini { width: 54px; height: 72px; flex: 0 0 auto;
                                           object-fit: cover; border-radius: 8px;
                                           background: var(--track); display: block; }
.llista-not a { color: var(--ink); font-weight: 700; text-decoration: none; }
.llista-not a:hover { text-decoration: underline; }
.llista-not .marques { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
/* La vora pren el color de la sèrie; el text va en el seu to, no en el de la
   marca de color, perquè es llegeixi (D-37). */
.marca-serie { font-size: .72rem; font-weight: 700; padding: .1rem .45rem;
               border-radius: 999px; border: 1px solid currentColor; }
.marca-serie.buida { color: var(--muted); border-color: var(--line); font-weight: 600; }

/* Per que va sonar el telefon (D-58). En taronja com la resta del que reclama
   atencio -- .e-pendent, .ia-fet -- perque es exactament aixo: mira-t'ho. */
.marca-serie.avis { color: var(--taronja);
                    background: color-mix(in srgb, var(--taronja) 12%, var(--surface));
                    border-color: color-mix(in srgb, var(--taronja) 32%, var(--line)); }

/* Per que et va sonar el telefon, a la lectura (D-74). El <mark> es el mateix
   que fa servir la cerca; el requadre nomes l'aplega a dalt de tot. */
.per-que { border: 1px solid color-mix(in srgb, var(--taronja) 32%, var(--line));
           background: color-mix(in srgb, var(--taronja) 8%, var(--surface));
           border-radius: 10px; padding: .7rem .9rem; margin: 0 0 1.1rem; }
.per-que p { margin: .35rem 0 0; font-size: .92rem; }
.per-que mark { background: var(--taronja); color: #fff; border-radius: 3px; padding: 0 .15rem; }

/* ------------------------------------------------------------------ lectura
   Llegir una noticia sencera abans de decidir-ne res (D-43).

   La safata es per triar de pressa i hi va el text retallat; aixo es
   l'oposat: una columna estreta, sense res al costat, per llegir de debo.

   Els 40rem d'amplada no son estetica: una linia de mes de 75 caracters fa
   que l'ull perdi el principi de la seguent. I la barra d'accions va
   enganxada a baix perque decidir es el que faras EN ACABAR de llegir, i no
   has de tornar a pujar a buscar el boto. */
.lectura { max-width: 40rem; margin: 0 auto; }
.lectura h1 { font-size: 1.55rem; line-height: 1.25; margin: 0 0 .55rem; }
.lectura-foto { width: 100%; border: 1px solid var(--line); border-radius: var(--radi);
                display: block; margin: 0 0 1.1rem; }
.lectura-cos { font-size: 1.06rem; line-height: 1.75; }
.lectura-cos p { margin: 0 0 1.15rem; }
/* El primer bloc fa d'entradeta quan l'article no en porta cap de separada. */
.lectura-cos p:first-child { font-weight: 600; }
.lectura-barra { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: .5rem;
                 align-items: center; margin: 1.2rem 0 0; padding: .75rem 0 .25rem;
                 background: linear-gradient(to top, var(--surface) 70%, transparent);
                 border-top: 1px solid var(--line); }
.lectura-barra .creix { flex: 1 1 auto; }

/* --------------------------------------------------------------- seleccio
   Triar-ne unes quantes i actuar-hi de cop (D-47).

   La barra va enganxada a baix i NOMES surt quan hi ha res triat: una barra
   d'accions permanent i buida es soroll, i una que apareix diu tota sola que
   la seleccio ha funcionat.

   La casella va FORA de l'enllac de la targeta. Posar-la a dins seria
   interactiu dins d'interactiu: clicar-la obriria el document. */
.doc-cel { position: relative; display: flex; }
.doc-cel > .doc { flex: 1 1 auto; min-width: 0; }
.doc-tria { position: absolute; z-index: 2; top: .4rem; left: .4rem;
            display: flex; align-items: center; justify-content: center;
            width: 1.7rem; height: 1.7rem; border-radius: 7px; cursor: pointer;
            background: rgba(15,23,42,.55); backdrop-filter: blur(2px); }
.doc-tria input { width: 1.05rem; height: 1.05rem; margin: 0; cursor: pointer;
                  accent-color: var(--brand); }
.doc-cel:has(input:checked) > .doc { border-color: var(--brand);
                                     box-shadow: 0 0 0 2px var(--brand) inset; }

/* La casella de les llistes (safata de Fonts), on no hi ha targeta. */
.llista-not .tria { width: 1.05rem; height: 1.05rem; margin: .2rem .1rem 0 0;
                    flex: 0 0 auto; cursor: pointer; accent-color: var(--brand); }

.barra-seleccio { position: sticky; bottom: .4rem; z-index: 5; display: flex;
                  flex-wrap: wrap; gap: .5rem; align-items: center;
                  margin-top: .8rem; padding: .7rem .8rem; border-radius: 12px;
                  background: var(--surface); border: 1px solid var(--brand);
                  box-shadow: 0 4px 14px rgba(37,99,235,.18); }
.barra-seleccio .creix { flex: 1 1 auto; }
.tria-tots { display: inline-flex; align-items: center; gap: .4rem;
             font-size: .82rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.tria-tots input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--brand); }

/* ------------------------------------------- compartir per enllaç (D-92, D-94)

   El primer intent era una taula, i amuntegava: l'estat s'enganxava al recompte
   d'obertures i el "Retira" quedava penjat a la dreta sense dir de què.

   Aquí cada enllaç és un BLOC de l'ample sencer amb dues columnes:
   l'adreça i els botons a l'esquerra --que és el que faràs--, i a la dreta el
   que has de SABER-NE, cada cosa amb la seva etiqueta i amb aire a sobre.

   Els colors surten tots del sistema; l'únic de fora és el verd de WhatsApp,
   que va a la icona i no a cap superfície (D-16). */
.comparteix-crea { display: flex; gap: .8rem; align-items: flex-end;
                   flex-wrap: wrap; margin-top: 1rem;
                   padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.comparteix-crea label { display: flex; flex-direction: column; gap: .3rem; }
.comparteix-crea select { background: var(--surface-2); color: var(--ink);
                          border: 1px solid var(--line); border-radius: 8px;
                          padding: .5rem .7rem; font: inherit; font-size: .9rem; }

.enllac-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto;
               gap: 1.4rem; align-items: start;
               padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.enllac-fila:last-child { border-bottom: 0; padding-bottom: .2rem; }

/* L'adreça: llegible i que es pugui triar amb el ratolí, però sense cridar.
   Trencada per qualsevol lloc, que no hi ha espais on trencar-la. */
.enllac-adreca { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                 font-size: .78rem; color: var(--muted); word-break: break-all;
                 line-height: 1.5; margin-bottom: .7rem; user-select: all; }

.enllac-accions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.enllac-accions .btn { display: inline-flex; align-items: center; gap: .4rem; }

/* La columna de la dreta: dues dades i una acció, separades i etiquetades. */
.enllac-dades { display: flex; flex-direction: column; gap: .9rem;
                align-items: flex-end; text-align: right; }
.enllac-dada { display: flex; flex-direction: column; gap: .2rem; align-items: flex-end; }
.enllac-dada .xifra { font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Retirar és destructiu i irreversible: es veu, però no crida més que el que
   de debò faràs cada dia, que és copiar l'enllaç. Vermell pàl·lid, i el color
   ple només quan hi passes per sobre. */
.btn.retira { background: color-mix(in srgb, var(--vermell) 10%, var(--surface));
              color: var(--vermell);
              border: 1px solid color-mix(in srgb, var(--vermell) 30%, var(--line)); }
.btn.retira:hover { background: color-mix(in srgb, var(--vermell) 18%, var(--surface));
                    border-color: color-mix(in srgb, var(--vermell) 50%, var(--line)); }

/* Un enllaç mort es queda a la llista --saber que un dia el vas compartir és
   part del que això ha de donar-te-- però apagat. */
.enllac-fila.morta { opacity: .55; }

@media (max-width: 640px) {
    .enllac-fila { grid-template-columns: 1fr; gap: .9rem; }
    .enllac-dades { align-items: flex-start; text-align: left;
                    flex-direction: row; flex-wrap: wrap; gap: 1.2rem; }
    .enllac-dada { align-items: flex-start; }
}

/* --------------------------------------- l'avís legal del compartit (D-96)

   Va en vermell pàl·lid perquè es vegi que no és decoració, però NO és un
   error: no reutilitza .banner.err, que vol dir una altra cosa.

   El títol pren el color; el COS va en tinta normal. És la mateixa regla que
   les marques de sèrie (D-37): un paràgraf sencer en vermell es llegeix pitjor,
   i aquí el que importa és justament que es llegeixi. */
.avis-legal { margin-top: 1.1rem; padding: .85rem 1rem; border-radius: 10px;
              background: color-mix(in srgb, var(--vermell) 7%, var(--surface));
              border: 1px solid color-mix(in srgb, var(--vermell) 25%, var(--line)); }
.avis-legal strong { display: block; margin-bottom: .3rem;
                     color: var(--vermell); font-size: .84rem; }
.avis-legal p { margin: 0; color: var(--ink); font-size: .82rem; line-height: 1.55; }

/* ------------------------------------------------- la Cerca en taula (D-97)

   Els resultats van en TAULA i no a la reixa de miniatures de l'Arxiu, i el
   motiu és que són dues preguntes diferents: a l'Arxiu es fulleja i la foto és
   el que reconeixes; aquí has trobat una cosa entre 4.587 i el que necessites
   saber és QUÈ és -- titular, d'on ve, quan, i si ja és teu o encara no. */
.filtres-cerca { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .9rem; }
.filtres-cerca label { display: flex; flex-direction: column; gap: .25rem; }
.filtres-cerca select,
.filtres-cerca input[type="date"] { background: var(--surface-2); color: var(--ink);
                                    border: 1px solid var(--line); border-radius: 8px;
                                    padding: .5rem .7rem; font: inherit; font-size: .88rem; }

.taula-cerca { width: 100%; border-collapse: collapse; }
.taula-cerca td { padding: .85rem .6rem; border-bottom: 1px solid var(--line);
                  vertical-align: top; }
.taula-cerca tr:last-child td { border-bottom: 0; }

.cerca-foto { width: 84px; }
.cerca-foto img { width: 84px; height: 64px; object-fit: cover;
                  border-radius: 8px; display: block; background: var(--track); }
.cerca-sense-foto { display: block; width: 84px; height: 64px; border-radius: 8px;
                    background: var(--track); }

.cerca-titular { font-weight: 700; font-size: .95rem; line-height: 1.35; }
.cerca-titular a { color: var(--ink); text-decoration: none; }
.cerca-titular a:hover { text-decoration: underline; }

.cerca-meta { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
              margin-top: .3rem; color: var(--muted); font-size: .78rem; }

.cerca-tros { margin: .4rem 0 0; color: var(--muted); font-size: .82rem;
              line-height: 1.5; }

/* Els dos enllaços, un sota l'altre i sense créixer: la columna del mig és la
   que ha de tenir tot l'espai. */
.cerca-anar { width: 1%; white-space: nowrap; }
.cerca-anar a { display: block; text-align: center; text-decoration: none;
                margin-bottom: .35rem; font-size: .8rem; padding: .4rem .7rem; }
.cerca-anar a:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
    .cerca-foto, .cerca-foto img, .cerca-sense-foto { width: 56px; }
    .cerca-foto img, .cerca-sense-foto { height: 44px; }
    .filtres-cerca label { flex: 1 1 45%; }
}

/* ------------------------- la casella de confirmar una entitat (D-104)
   Petita i a l'esquerra de la fila: confirmar és un gest, però el gest
   principal de la fila segueix sent escriure-hi el nom. */
.tria-confirma { display: inline-flex; align-items: center; flex: none; }
.tria-confirma input { width: 16px; height: 16px; cursor: pointer; }