/* app.css — aspecte de l'app. La col·locació la fa el motor de blocs (k3.css +
   js/ui.js): aquí colors, vores, tipografia i el que passa DINS de cada peça. */

/* ---------- pantalla d'acces ---------- */

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--soft);
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 26px 22px;
}

.auth-brand {
  font-size: 17px;
  margin-bottom: 6px;
}

.auth-sub {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin: 0 0 20px;
}

.auth-foot {
  color: var(--muted);
  font-size: var(--fs-xs);
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.auth-error {
  color: var(--warn);
  font-size: var(--fs-sm);
  margin: 12px 0 0;
}

/* Els components Hanko exposen custom properties: hi mapem els tokens Halftoner.
   Es fa fora del shadow DOM, per herencia de custom properties. */
hanko-auth, hanko-login, hanko-registration, hanko-profile {
  --color: var(--ink);
  --color-shade-1: var(--muted);
  --color-shade-2: var(--line);
  --brand-color: var(--ink);
  --brand-contrast-color: var(--paper);
  --background-color: var(--paper);
  --error-color: var(--warn);
  --link-color: var(--ink);

  --font-family: "K3plerSans", system-ui, sans-serif;
  --font-size: var(--fs-base);
  --font-weight: 400;
  --headline1-font-size: 17px;
  --headline1-font-weight: 600;

  --border-radius: var(--radius);
  --border-style: solid;
  --border-width: 1px;
  --item-height: 34px;
  --input-min-height: 34px;
  --button-min-height: 34px;
  --container-padding: 0;
  --container-max-width: 100%;
}


/* ---------- marc de l'app ---------- */

/* Files del k-page: top · barres · cos (1fr) · estat. Totes hi són sempre (les
   barres amagades viuen DINS de #barres), així que les pistes no es desquadren
   quan una barra apareix o desapareix. */
.app {
  height: 100vh;
  grid-template-rows: 48px auto minmax(0, 1fr) auto;
}

.top { background: var(--chrome); border-bottom: 1px solid var(--line); }
/* Botó que plega i desplega el llistat de taules */
.boto-lateral { display: grid; justify-items: center; }
.btn-lateral { display: grid; place-items: center; }
.btn-lateral svg { width: 15px; height: 15px; }
.btn-lateral.actiu { color: var(--ink); }
.top .marca { font-size: 19px; white-space: nowrap; }
.marca-boto { padding: 0; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.top .marca-boto { font-size: 19px; }
.marca-boto:hover { opacity: .7; }
.nom-app { padding-left: 10px; margin-left: 10px; border-left: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }
.nom-app:empty { display: none; }

/* ---------- llançador d'apps (docs/trabajos/007), com el dashboard de typst.app ---------- */

.llancador { min-height: 100vh; background: var(--paper); }
.dash-cap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
}
.dash-espai { flex: 1; }
.dash-cerca {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(400px, 100%);
  height: 44px;
  padding: 0 14px;
  background: var(--chrome);
  border-radius: var(--radius-lg);
}
.dash-cerca input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: var(--fs-base);
  color: var(--ink);
  background: none;
  border: 0;
  outline: none;
}
.dash-lupa {
  width: 11px; height: 11px;
  border: 1.6px solid var(--ink);
  border-radius: 50%;
  position: relative;
  flex: none;
}
.dash-lupa::after {
  content: "";
  position: absolute;
  width: 6px; height: 1.6px;
  right: -5px; bottom: -3px;
  background: var(--ink);
  transform: rotate(45deg);
}
.dash-avatar {
  width: 32px; height: 32px;
  border: 0;
  border-radius: 50%;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: #b48ee8;
  cursor: pointer;
}
.dash-cos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 272px;
  gap: 40px;
  padding: 8px 24px 48px;
}
.dash-titol { margin: 22px 0 36px; font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.dash-accions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  max-width: 820px;
}
.dash-accio {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 70px;
  padding: 12px 18px;
  font: inherit;
  font-size: var(--fs-base);
  line-height: 1.45;
  text-align: left;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid #c9c9cf;
  border-radius: var(--radius);
  cursor: pointer;
}
.dash-accio:hover { border-color: var(--ink); }
.dash-accio b { font-weight: 600; }
.dash-accio-icona { width: 18px; text-align: center; font-size: 18px; color: var(--ink); }
.dash-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1160px;
  padding: 30px 0 18px;
}
.dash-recompte { font-size: var(--fs-sm); color: var(--muted); }
.dash-vistes { display: inline-flex; border: 1px solid #c9c9cf; border-radius: var(--radius); overflow: hidden; }
.dash-vista {
  width: 34px; height: 30px;
  font: inherit;
  color: var(--muted);
  background: var(--paper);
  border: 0;
  cursor: pointer;
}
.dash-vista + .dash-vista { border-left: 1px solid #c9c9cf; }
.dash-vista.actiu { color: #2563eb; }
.dash-ordre { display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--ink); }
.dash-ordre select {
  height: 32px;
  padding: 0 8px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid #c9c9cf;
  border-radius: var(--radius);
}
.dash-buit { color: var(--muted); font-size: var(--fs-sm); }

/* les apps en quadrícula: una miniatura de full (com les de Typst) i el nom a sota */
.llista-apps {
  display: grid;
  grid-template-columns: repeat(auto-fill, 160px);
  gap: 22px 36px;
}
.app-targeta {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 0;
  font: inherit;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
}
.app-targeta:focus-visible { outline: 2px solid #2563eb; outline-offset: 4px; border-radius: 4px; }
.app-mini {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  width: 160px;
  height: 228px;
  padding: 14px 12px;
  background: var(--paper);
  border: 1px solid #c9c9cf;
  border-radius: 3px;
  overflow: hidden;
}
.app-targeta:hover .app-mini { border-color: var(--ink); }
.app-mini::after {                    /* el plec de la cantonada */
  content: "";
  position: absolute;
  top: -1px; right: -1px;
  width: 22px; height: 22px;
  background: linear-gradient(225deg, var(--paper) 50%, #c9c9cf 50%);
}
.mini-cap { display: flex; align-items: center; gap: 6px; }
.mini-icona {
  display: grid;
  place-items: center;
  width: 16px; height: 16px;
  border-radius: 4px;
  font-size: 7px;
  font-weight: 700;
  color: #fff;
  background: var(--app-color);
}
.mini-nom { font-size: 8px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-pestanyes { display: flex; gap: 3px; padding: 10px 0 6px; }
.mini-pestanyes i { width: 24px; height: 5px; border-radius: 2px; background: var(--chrome); }
.mini-pestanyes i:first-child { background: var(--app-color); opacity: .55; }
.mini-taula {                         /* una graella de mentida: files i columnes */
  background:
    repeating-linear-gradient(to bottom, transparent 0 9px, #e3e3e8 9px 10px),
    linear-gradient(to right, transparent 0 28%, #e3e3e8 28% calc(28% + 1px), transparent calc(28% + 1px) 64%, #e3e3e8 64% calc(64% + 1px), transparent calc(64% + 1px));
  border-top: 2px solid #e3e3e8;
}
.llista-apps .app-icona, .llista-apps .app-desc, .llista-apps .app-peu { display: none; }
.app-nom { font-size: var(--fs-base); text-align: center; }
.app-quan { color: var(--muted); }

/* les apps en llista: una fila per app */
.llista-apps.en-llista { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 1160px; }
.en-llista .app-targeta {
  grid-template-columns: 36px minmax(0, 220px) minmax(0, 1fr) auto;
  justify-items: start;
  align-items: center;
  gap: 14px;
  padding: 10px 8px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.en-llista .app-targeta:hover { background: var(--soft); }
.en-llista .app-mini { display: none; }
.en-llista .app-icona {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
}
.en-llista .app-nom { font-weight: 600; text-align: left; }
.en-llista .app-desc { display: block; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.en-llista .app-peu { display: flex; gap: 6px; align-items: center; font-size: var(--fs-xs); }
.app-etiqueta { padding: 1px 6px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }

/* a la dreta, les novetats */
.dash-lateral { padding-top: 140px; }
.dash-lateral-titol { margin: 0 0 10px; font-weight: 600; font-size: var(--fs-base); }
.dash-novetats { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dash-novetats li { display: grid; gap: 2px; font-size: var(--fs-sm); }
.novetat-text { font-weight: 600; line-height: 1.35; }
.novetat-data { color: var(--muted); }

@media (max-width: 860px) {
  .dash-cos { grid-template-columns: minmax(0, 1fr); }
  .dash-lateral { padding-top: 24px; }
  .dash-cap, .dash-cos { padding-left: 16px; padding-right: 16px; }
  .llista-apps { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 20px; }
  .app-mini { width: 100%; }
  .en-llista .app-targeta { grid-template-columns: 36px minmax(0, 1fr); }
  .en-llista .app-desc, .en-llista .app-peu { grid-column: 2; }
}
.usuari { color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }

/* Botons de barra: discrets, només vora fina. */
.btn {
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 5px 11px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--soft); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-primari { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.btn-primari:hover { background: #000; }

.btn-icona {
  width: 24px;
  height: 24px;
  padding: 0;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line);
  border-radius: 5px;
  cursor: pointer;
}
.btn-icona:hover { color: var(--ink); background: var(--soft); }

/* Grups de botons en línia (dins d'una k-col). */
.botons { display: flex; align-items: center; gap: 8px; }

/* ---------- lateral de taules ---------- */

.lateral {
  background: var(--chrome);
  border-right: 1px solid var(--line);
  padding: 14px 10px;
  overflow-y: auto;
}
.lateral-titol {
  margin: 0;
  padding: 0 8px 10px;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.taula-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 5px 8px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}
.taula-item:hover { background: rgb(0 0 0 / 0.04); }
.taula-item.activa { border-color: var(--ink); }
.taula-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.taula-files { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- columna central: pestanyes a tocar de les graelles ---------- */

.central { grid-template-rows: auto minmax(0, 1fr); }

/* ---------- pestanyes (una per vista pròpia) ---------- */

.barra-pestanyes {
  background: var(--tabs-fons);
  border-bottom: 1px solid var(--line);
}
.pestanyes {
  min-width: 0;                 /* com a element de graella, si no no s'encongeix i no fa scroll */
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  padding-top: 6px;
  padding-right: 8px;
}
.pestanyes::-webkit-scrollbar { display: none; }
.pestanya {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 240px;
  flex: none;
  padding: 7px 10px 7px 16px;
  font: inherit;
  font-size: var(--fs-base);
  color: #4a4a55;
  background: none;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: pointer;
  margin-bottom: -1px;          /* l'activa tapa la línia de sota i s'uneix a la graella */
}
/* Separador fi entre pestanyes inactives; al costat de l'activa no n'hi ha. */
.pestanya + .pestanya::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 28%;
  height: 44%;
  width: 1px;
  background: var(--tabs-sep);
}
.pestanya.activa::before,
.pestanya.activa + .pestanya::before { display: none; }
.pestanya:hover { color: var(--ink); }
.pestanya.activa {
  color: var(--ink);
  font-weight: 600;
  background: var(--paper);
  border-color: var(--line);
}
.pestanya-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pestanya-marca { font-size: 8px; color: var(--warn); }
.pestanya:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
/* × per esborrar: discret, es veu del tot en passar-hi per sobre */
.pestanya-tanca {
  width: 18px;
  height: 18px;
  padding: 0;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
}
.pestanya:hover .pestanya-tanca,
.pestanya.activa .pestanya-tanca { opacity: 1; }
.pestanya-tanca:hover { color: var(--ink); background: var(--soft); }

/* ---------- barra d'eines ---------- */

.eines { background: var(--chrome); border-bottom: 1px solid var(--line); }

/* Cerca ràpida: filtra la vista activa. Discreta fins que s'hi escriu. */
.cerca {
  width: 240px;
  padding: 5px 9px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: none;
}
.cerca::placeholder { color: var(--muted); }

/* Suggeriments de la cerca: llista sota la caixa mentre s'escriu */
.col-cerca { position: relative; }
.suggeriments {
  position: absolute;
  z-index: 15;
  top: calc(100% + 4px);
  left: 0;
  width: 340px;
  padding: 4px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgb(20 20 26 / 0.10);
}
.suggeriment {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 6px 9px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  text-align: left;
  background: none;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}
.suggeriment:hover, .suggeriment.actiu { background: var(--soft); }
.sug-valor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug-valor b { font-weight: 600; }
.sug-camp { flex: none; color: var(--muted); font-size: var(--fs-xs); }
/* Els de la cel·la en mode Cerca: fixos, just a sota de l'editor */
.sug-cella { position: fixed; width: auto; max-width: 420px; z-index: 30; }
.cerca:focus { border-color: var(--ink); }

.btn-assistent { display: inline-flex; align-items: center; gap: 8px; }
.btn-assistent.actiu, .btn-visor.actiu { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* ---------- mode Cerca ---------- */
/* La graella mostra peticions en comptes de registres. Es marca clarament:
   escriure un criteri creient que s'edita un registre seria un mal ensurt. */
.barra-cerca {
  background: var(--soft);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 3px 0 0 var(--ink);
}
[data-omet] .barra-cerca { box-shadow: inset 3px 0 0 var(--warn); }
.barra-cerca .botons { flex-wrap: wrap; }
.bc-titol {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}
.bc-peticio {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-right: 6px;
}
.bc-omet {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  cursor: pointer;
  user-select: none;
}
[data-mode-cerca] #graella { outline: 2px solid var(--ink); outline-offset: -2px; }

/* ---------- graelles ---------- */

/* Una vista de taula o SQL: una graella que omple l'àrea. Un full: una pila
   vertical, cada graella de l'alçada de les seves files, i l'àrea fa scroll. */
.area { overflow-y: auto; }
.area:has(.graella.ple) { overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr); }
.graelles { display: grid; }
.area:has(.graella.ple) .graelles { grid-template-rows: minmax(0, 1fr); }
.graella.ple { display: grid; grid-template-rows: minmax(0, 1fr); }

.graella:not(.ple) {
  margin: 16px 16px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.graella:not(.ple):focus-within { border-color: var(--ink); }
/* Alçada = capçalera + files × alçada de fila (+ la barra de scroll horitzontal). */
.graella:not(.ple) k-table {
  height: calc(var(--header-height) + var(--files) * var(--row-height) + 14px);
}
.graella-cap {
  background: var(--chrome);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  background: var(--soft);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.graella-taula,
.graella-files input {
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 3px 6px;
}
.graella-files { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.graella-files input { width: 76px; font-variant-numeric: tabular-nums; }
.graella-espai { flex: 1; }
.peu-graelles { padding: 12px 16px 24px; }

.grid-canvas {
  position: absolute;
  inset: 0;
  display: block;
}
/* La capa de scroll va damunt del canvas i és transparent: ens dona barres de
   desplaçament natives i el focus del teclat, mentre el canvas només pinta. */
.grid-scroll {
  position: absolute;
  inset: 0;
  overflow: auto;
  outline: none;
}
.grid-spacer { pointer-events: none; }

/* Editor de cel·la: DOM per damunt de tot, encaixat al rectangle de la cel·la. */
.grid-editor {
  position: absolute;
  z-index: 3;
  margin: 0;
  padding: 0 7px;
  font: inherit;
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 0;
  outline: none;
}

/* ---------- assistent ---------- */

.assistent {
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-left: 1px solid var(--line);
  background: var(--paper);
}
.ast-cap { border-bottom: 1px solid var(--line); }
.ast-titol { font-weight: 600; font-size: var(--fs-sm); }

.ast-missatges {
  overflow-y: auto;
  padding: 14px 16px;
}
.ast-msg { padding: 0 0 14px; }
.ast-msg + .ast-msg { border-top: 1px solid var(--line); padding-top: 14px; }
.ast-msg p { margin: 0; }
.ast-context {
  font-size: var(--fs-xs);
  color: var(--muted);
  padding-bottom: 4px;
}
.ast-text { font-size: var(--fs-sm); line-height: 1.5; white-space: pre-wrap; }
.ast-msg.de-usuari .ast-text { font-weight: 500; }
.ast-msg.es-error .ast-text { color: var(--warn); }
.ast-msg.es-info .ast-text { color: var(--muted); }
.ast-detall { font-size: var(--fs-xs); color: var(--muted); padding-top: 4px; }
.ast-botons { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }

.ast-entrada {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--line);
}
.ast-entrada textarea {
  display: block;
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: none;
  resize: none;
}
.ast-entrada textarea:focus { border-color: var(--ink); }
.ast-peu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
}
.ast-nota { font-size: var(--fs-xs); color: var(--muted); }

/* ---------- visor de dades ---------- */

.visor { grid-template-rows: auto minmax(0, 1fr); }
.visor-cos {
  overflow-y: auto;
  padding: 14px 16px 18px;
}
.visor-codi,
.visor-valor,
.visor-vig-codi {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.visor-codi {
  display: block;
  width: 100%;
  min-height: 120px;
  padding: 8px 10px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: none;
  resize: vertical;
  tab-size: 2;
}
.visor-codi:focus { border-color: var(--ink); }
.visor-firma {
  margin: 0;
  min-height: 18px;
  padding: 4px 2px 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.visor-firma b { color: var(--ink); font-weight: 600; }
.sug-codi { max-width: 440px; }
.sug-codi .sug-valor { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.sug-codi .sug-camp { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor-errors:empty { display: none; }
.visor-errors { padding-top: 8px; }
.visor-error {
  margin: 0;
  padding: 2px 0;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--warn);
}
.visor-error.es-avis { color: var(--muted); }
.visor-res {
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--chrome);
  border-radius: var(--radius);
}
.visor-res.es-error .visor-valor { color: var(--warn); }
.visor-meta {
  display: flex;
  justify-content: space-between;
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.visor-valor {
  margin: 4px 0 0;
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink);
}
.visor-seccio {
  margin: 0;
  padding: 18px 0 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--line);
}
.visor-vig { padding: 10px 0; border-bottom: 1px solid var(--line); }
.visor-vig.es-buida { border-bottom: 0; }
.visor-buit { margin: 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.visor-vig-cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.visor-vig-codi {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink);
  cursor: pointer;
}
.visor-vig-codi:hover { text-decoration: underline; }
.visor-vig .visor-res { margin-top: 6px; }

/* ---------- barra d'estat ---------- */

.barra-estat {
  background: var(--chrome);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.barra-estat span { display: block; overflow: hidden; text-overflow: ellipsis; }
.avis-error { color: var(--warn); }

/* ---------- menú contextual ---------- */

.popup {
  position: fixed;
  z-index: 30;
  min-width: 200px;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  padding: 5px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgb(20 20 26 / 0.10);
}
.popup-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 6px 9px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  text-align: left;
  background: none;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}
.popup-item:hover:not(:disabled) { background: var(--soft); }
.popup-item:disabled { color: var(--muted); cursor: default; }
.popup-detall { color: var(--muted); font-variant-numeric: tabular-nums; }
.popup-titol {
  padding: 6px 9px 3px;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.popup-sep {
  height: 1px;
  margin: 5px 3px;
  background: var(--line);
}

/* ---------- diàleg ---------- */

.dialeg {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgb(20 20 26 / 0.16);
}
.dialeg h2 {
  margin: 0 0 18px;
  font-size: var(--fs-base);
  font-weight: 600;
}
.dialeg-camp { display: block; margin-bottom: 14px; }
.dialeg-camp span {
  display: block;
  margin-bottom: 5px;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.dialeg input,
.dialeg textarea {
  display: block;
  width: 100%;
  padding: 7px 9px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: none;
  resize: vertical;
}
.dialeg input:focus,
.dialeg textarea:focus { border-color: var(--ink); }
.dialeg textarea {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  line-height: 1.55;
}
.dialeg-error {
  margin: 0 0 14px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--fs-xs);
  color: var(--warn);
}
.dialeg-text { margin: -8px 0 18px; font-size: var(--fs-sm); color: var(--muted); }
.btn-perill { background: var(--warn); border-color: var(--warn); }
.btn-perill:hover { background: #8f4c08; }
.dialeg-botons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ---------- arrencada / error ---------- */

k-block.boot { background: var(--paper); }
.boot-cos {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.boot-cos p { margin: 0; }
.boot-msg { color: var(--muted); font-size: var(--fs-sm); }
.boot-err { color: var(--warn); font-size: var(--fs-sm); max-width: 46ch; }
.boot-detall {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--fs-xs);
  color: var(--muted);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  max-width: 60ch;
  overflow-x: auto;
  text-align: left;
  white-space: pre-wrap;
}

/* ---------- panell de camps (cantonada de la graella) ---------- */

/* Capa transparent sobre tota la pàgina: només hi és per tancar en clicar fora. */
k-block.capa-popover { background: none; padding: 0; overflow: hidden; }
.camps-host { display: contents; }
.panell-camps {
  position: fixed;
  z-index: 25;
  width: 300px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgb(20 20 26 / 0.14);
}
.camps-filtre {
  margin: 10px 10px 6px;
  padding: 6px 9px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: none;
}
.camps-filtre:focus { border-color: var(--ink); }
.camps-llista { overflow-y: auto; padding: 2px 6px; }
.camp-fila {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  border-radius: 5px;
  border-top: 2px solid transparent;
}
.camp-fila:hover { background: var(--soft); }
.camp-fila { border-bottom: 2px solid transparent; }
.camp-fila.sobre { border-top-color: var(--ink); }          /* on cauria la columna arrossegada */
.camp-fila.sota { border-bottom-color: var(--ink); }
.camp-fila.arrossegant { opacity: 0.4; }
.camp-nansa { color: var(--muted); cursor: grab; font-size: 11px; letter-spacing: -2px; padding: 0 4px 0 2px; user-select: none; }
.camp-label { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; font-size: var(--fs-sm); cursor: pointer; }
.camp-tipus { width: 14px; text-align: center; color: var(--muted); font-size: 11px; font-weight: 600; }
.camp-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* popover «Format…» */
.panell-format { width: 320px; grid-template-rows: auto auto auto auto; }
.format-titol { margin: 0; padding: 12px 14px 4px; font-size: var(--fs-sm); color: var(--muted); }
.format-titol b { color: var(--ink); font-weight: 600; }
.format-cos { padding: 4px 14px 8px; max-height: 52vh; overflow-y: auto; }
.format-grup { display: grid; }
.format-camp {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  align-items: center;
  padding: 4px 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.format-camp select, .format-camp input {
  min-width: 0;
  padding: 4px 6px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.format-check { display: flex; align-items: center; gap: 6px; padding: 6px 0 2px; font-size: var(--fs-sm); color: var(--ink); }
.format-mostra {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: baseline;
  margin: 0 14px 10px;
  padding: 8px 10px;
  background: var(--chrome);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}
.format-mostra-titol { color: var(--muted); font-size: var(--fs-xs); }
.format-mostra-valor { font-variant-numeric: tabular-nums; color: var(--ink); }
.format-mostra-valor.es-vermell { color: #c0392b; }

.camps-peu {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--line);
}