/* =========================================================================
   PORTAL · Sistema de diseño
   -------------------------------------------------------------------------
   Un solo acento (el color de marca), una sola escala de radios, una sola
   familia de sombras. Los colores de marca llegan como variables inyectadas
   en el <head> desde Ajustes → Identidad, de modo que cambiar de empresa no
   requiere tocar este archivo.
   ========================================================================= */

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  /* Sin ampliación por doble toque: el zoom está bloqueado en toda la app */
  touch-action: manipulation;
}
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg, video, canvas { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
h1, h2, h3, h4, h5 { font-weight: 650; line-height: 1.2; letter-spacing: -0.02em; }
p { line-height: 1.6; }
[hidden] { display: none !important; }

/* ----------------------------------------------------------------- tokens */
:root {
  /* Neutros cálidos, para armonizar con el ámbar de marca */
  --n-0:  #ffffff;
  --n-25: #fbfaf8;
  --n-50: #f6f5f2;
  --n-100:#eeece7;
  --n-150:#e4e1da;
  --n-200:#d8d4cb;
  --n-300:#bdb8ac;
  --n-400:#959084;
  --n-500:#6f6b60;
  --n-600:#54514a;
  --n-700:#3b3934;
  --n-800:#282622;
  --n-900:#1a1917;
  --n-950:#111110;

  /* Semánticos de superficie */
  --bg:            var(--n-50);
  --surface:       var(--n-0);
  --surface-2:     var(--n-25);
  --surface-sunken: var(--n-100);
  --border:        var(--n-150);
  --border-strong: var(--n-200);
  --text:          var(--n-900);
  --text-muted:    var(--n-500);
  --text-subtle:   var(--n-400);
  --text-inverse:  var(--n-0);

  /* Estados */
  --ok:      #157f52;  --ok-soft:      #e4f4ec;  --ok-text:      #0d5c3b;
  --warn:    #b26a00;  --warn-soft:    #fdf0dc;  --warn-text:    #8a5200;
  --danger:  #c0362c;  --danger-soft:  #fce9e7;  --danger-text:  #932720;
  --info:    #1f6feb;  --info-soft:    #e7f0fd;  --info-text:    #14539f;

  /* Marca (valores por defecto; se sobrescriben en línea) */
  --brand: #E9A000;
  --brand-rgb: 233 160 0;
  --brand-strong: #bf8300;
  --brand-soft: #fdf3dd;
  --brand-softer: #fefaf0;
  --brand-contrast: #12100C;
  --secondary: #060605;
  --accent: #FF6835;
  --accent-soft: #ffe8de;

  /* Tipografía */
  --font-heading: "Plus Jakarta Sans";
  --font-body: "DM Sans";
  --font-sans: var(--font-body), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-heading), var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Escala de radios: pill para interactivos pequeños, 10px controles, 14px tarjetas */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Sombras tintadas al fondo, nunca negro puro */
  --shadow-xs: 0 1px 2px rgb(26 25 23 / .06);
  --shadow-sm: 0 1px 3px rgb(26 25 23 / .07), 0 1px 2px rgb(26 25 23 / .04);
  --shadow-md: 0 4px 14px -3px rgb(26 25 23 / .10), 0 2px 5px -2px rgb(26 25 23 / .06);
  --shadow-lg: 0 18px 40px -12px rgb(26 25 23 / .18), 0 4px 12px -4px rgb(26 25 23 / .08);
  --shadow-focus: 0 0 0 3px rgb(var(--brand-rgb) / .28);

  /* Movimiento */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 260ms;

  /* Medidas */
  --sidebar-w: 258px;
  --topbar-h: 62px;
  --content-max: 1360px;
}

/* --------------------------------------------------------------- oscuro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            var(--n-950);
    --surface:       #191816;
    --surface-2:     #1f1e1b;
    --surface-sunken: #131211;
    --border:        #2e2c28;
    --border-strong: #3d3a35;
    --text:          #f2f0ec;
    --text-muted:    #a29c90;
    --text-subtle:   #7d786d;
    --text-inverse:  var(--n-950);

    --ok-soft:     #10281e;  --ok-text:     #6ddba6;
    --warn-soft:   #2c2110;  --warn-text:   #f0b95e;
    --danger-soft: #2d1614;  --danger-text: #f09b93;
    --info-soft:   #131f33;  --info-text:   #8ab6f5;

    --brand-soft:   #2a2113;
    --brand-softer: #201b12;

    --shadow-xs: 0 1px 2px rgb(0 0 0 / .4);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / .45);
    --shadow-md: 0 4px 16px -3px rgb(0 0 0 / .55);
    --shadow-lg: 0 20px 44px -12px rgb(0 0 0 / .65);
  }
}
[data-theme="dark"] {
  --bg:            var(--n-950);
  --surface:       #191816;
  --surface-2:     #1f1e1b;
  --surface-sunken: #131211;
  --border:        #2e2c28;
  --border-strong: #3d3a35;
  --text:          #f2f0ec;
  --text-muted:    #a29c90;
  --text-subtle:   #7d786d;
  --text-inverse:  var(--n-950);
  --ok-soft:     #10281e;  --ok-text:     #6ddba6;
  --warn-soft:   #2c2110;  --warn-text:   #f0b95e;
  --danger-soft: #2d1614;  --danger-text: #f09b93;
  --info-soft:   #131f33;  --info-text:   #8ab6f5;
  --brand-soft:   #2a2113;
  --brand-softer: #201b12;
  --shadow-xs: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / .45);
  --shadow-md: 0 4px 16px -3px rgb(0 0 0 / .55);
  --shadow-lg: 0 20px 44px -12px rgb(0 0 0 / .65);
}

/* --------------------------------------------------- logotipo por tema --
   Se imprimen las dos versiones del logo y aquí se elige la que toca, para
   que no aparezca el logo de fondo claro sobre un fondo oscuro. Se siguen
   los mismos tres estados que los colores: preferencia del sistema, tema
   forzado a claro y tema forzado a oscuro. */
.brand-logo--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo--light { display: none; }
  :root:not([data-theme="light"]) .brand-logo--dark  { display: block; }
}
[data-theme="dark"] .brand-logo--light { display: none; }
[data-theme="dark"] .brand-logo--dark  { display: block; }
[data-theme="light"] .brand-logo--light { display: block; }
[data-theme="light"] .brand-logo--dark  { display: none; }


/* ------------------------------------------------------------------- base */
body {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  min-height: 100dvh;
}
h1, h2, h3, h4 { font-family: var(--font-display); }
::selection { background: rgb(var(--brand-rgb) / .3); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* El reset de arriba pone `svg { display: block }`, que es lo que se quiere
   para una imagen pero no para un icono metido en mitad de una frase: dentro
   de un <p>, un <span> o una celda, el icono se convertia en bloque y tiraba
   el texto al renglon de abajo. Con `inline-block` va donde tiene que ir, y en
   los contenedores flex (.row, .btn, .badge, .alert...) no cambia nada,
   porque a un hijo de un flex se le ignora el display en linea de todos modos.
   El `vertical-align` lo centra con la altura de la x en lugar de dejarlo
   colgando de la linea base. */
.icon {
  width: 18px; height: 18px; flex: 0 0 auto;
  display: inline-block; vertical-align: -0.18em;
}
.icon--xs { width: 13.5px; height: 13.5px; vertical-align: -0.14em; }
.icon--sm { width: 15px; height: 15px; vertical-align: -0.16em; }
.icon--lg { width: 22px; height: 22px; vertical-align: -0.22em; }

/* ------------------------------------------------------------ utilidades */
.stack      { display: flex; flex-direction: column; }
.row        { display: flex; align-items: center; }
.row--wrap  { flex-wrap: wrap; }
.between    { justify-content: space-between; }
.center     { justify-content: center; }
.end        { justify-content: flex-end; }
.items-start{ align-items: flex-start; }
.grow       { flex: 1 1 auto; min-width: 0; }
.gap-1 { gap: 4px; }  .gap-2 { gap: 8px; }  .gap-3 { gap: 12px; }
.gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; } .mt-5 { margin-top: 20px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 20px; } .mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.text-muted  { color: var(--text-muted); }
.text-subtle { color: var(--text-subtle); }
.text-sm     { font-size: 13px; }
.text-xs     { font-size: 12px; }
.text-lg     { font-size: 16px; }
.text-right  { text-align: right; }
/* Bloque del importe en la cabecera de un documento publico. Al estrecharse la
   pantalla, la fila se parte y este bloque baja a su propia linea: sin el
   margen automatico se quedaba pegado a la izquierda con el texto alineado a
   la derecha dentro de su propia caja, que es justo lo que se veia raro. */
.doc-total   { margin-left: auto; text-align: right; }
@media (max-width: 560px) { .doc-total { flex: 1 1 100%; } }
.text-center { text-align: center; }
.strong  { font-weight: 600; }
.mono    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num     { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uppercase-label {
  font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-subtle);
}
.hide-sm { }
.divider { height: 1px; background: var(--border); border: 0; }
.spacer  { flex: 1 1 auto; }

/* ============================== ESTRUCTURA ============================== */

.app { display: flex; min-height: 100dvh; }

/* ------------------------------------------------------------- barra lateral */
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100dvh;
  z-index: 40;
}
.sidebar__brand {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.sidebar__logo { max-height: 30px; width: auto; }
.sidebar__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.02em;
}
.sidebar__mark {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  background: var(--brand); color: var(--brand-contrast);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  flex: 0 0 auto;
}
.sidebar__nav { flex: 1 1 auto; overflow-y: auto; padding: 14px 12px 20px; }
.sidebar__group + .sidebar__group { margin-top: 20px; }
.sidebar__group-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-subtle);
  padding: 0 10px; margin-bottom: 7px;
}
.navlink {
  display: flex; align-items: center; gap: 11px;
  padding: 8.5px 10px;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-weight: 500;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
  position: relative;
}
.navlink + .navlink { margin-top: 2px; }
.navlink .icon { color: var(--text-subtle); transition: color var(--t-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .navlink:hover { background: var(--surface-sunken); color: var(--text); }
  .navlink:hover .icon { color: var(--text-muted); }
}
.navlink--active {
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-weight: 600;
}
.navlink--active .icon { color: var(--brand-strong); }
.navlink__count {
  margin-left: auto;
  font-size: 11.5px; font-weight: 600;
  background: var(--surface-sunken); color: var(--text-muted);
  padding: 1px 7px; border-radius: var(--r-pill);
}
.navlink--active .navlink__count { background: rgb(var(--brand-rgb) / .18); color: var(--brand-strong); }

.sidebar__footer { padding: 12px; border-top: 1px solid var(--border); flex: 0 0 auto; }

/* ------------------------------------------------------------------- main */
.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar-h);
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 0 24px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 30;
}
.topbar__title { font-family: var(--font-display); font-size: 16px; font-weight: 650; }
.topbar__crumb { color: var(--text-subtle); font-size: 13px; }

.page { padding: 26px 24px 60px; width: 100%; max-width: var(--content-max); margin: 0 auto; }
.page--wide { max-width: none; }
.page--narrow { max-width: 780px; }

.page-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head__text { flex: 1 1 320px; min-width: 0; }
.page-head h1 { font-size: 23px; letter-spacing: -.025em; }
.page-head p { color: var(--text-muted); font-size: 13.5px; margin-top: 3px; }
.page-head__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --------------------------------------------------------------- botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 15px;
  border-radius: var(--r-sm);
  font-size: 13.8px; font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn .icon { width: 16px; height: 16px; }

.btn--primary { background: var(--brand); color: var(--brand-contrast); box-shadow: var(--shadow-xs); }
.btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.btn--ghost { background: transparent; color: var(--text-muted); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger-soft { background: var(--danger-soft); color: var(--danger-text); }
.btn--dark { background: var(--secondary); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--brand-strong); }
  .btn--secondary:hover { background: var(--surface-sunken); border-color: var(--n-300); }
  .btn--ghost:hover { background: var(--surface-sunken); color: var(--text); }
  .btn--danger:hover { filter: brightness(.93); }
  .btn--danger-soft:hover { background: color-mix(in srgb, var(--danger-soft) 80%, var(--danger)); }
  .btn--dark:hover { filter: brightness(1.5); }
}
.btn--sm { height: 32px; padding: 0 11px; font-size: 13px; border-radius: var(--r-sm); }
.btn--lg { height: 44px; padding: 0 22px; font-size: 15px; }
.btn--block { width: 100%; }
.btn--icon { width: 34px; height: 34px; padding: 0; }
.btn--icon.btn--sm { width: 30px; height: 30px; }

/* --------------------------------------------------------------- tarjetas */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}
.card__head {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
}
.card__head h2, .card__head h3 { font-size: 15px; font-weight: 650; }
.card__head p { font-size: 12.5px; color: var(--text-muted); margin-top: 1px; }
.card__body { padding: 18px; }
.card__body--flush { padding: 0; }
.card__foot {
  padding: 13px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  display: flex; align-items: center; gap: 10px;
}
.card--sunken { background: var(--surface-2); box-shadow: none; }
.card--flat { box-shadow: none; }

.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--main { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.grid--aside { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }

/* ------------------------------------------------------------ indicadores */
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  a.stat:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
}
.stat__label { font-size: 12.5px; color: var(--text-muted); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.stat__value { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat__meta { font-size: 12px; color: var(--text-subtle); }
.stat__trend { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; }
.stat__trend--up { color: var(--ok-text); }
.stat__trend--down { color: var(--danger-text); }

/* ---------------------------------------------------------------- badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2.5px 9px;
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; line-height: 1.5;
  white-space: nowrap;
}
.badge--neutral { background: var(--surface-sunken); color: var(--text-muted); }
.badge--brand   { background: var(--brand-soft); color: var(--brand-strong); }
.badge--ok      { background: var(--ok-soft); color: var(--ok-text); }
.badge--warn    { background: var(--warn-soft); color: var(--warn-text); }
.badge--danger  { background: var(--danger-soft); color: var(--danger-text); }
.badge--info    { background: var(--info-soft); color: var(--info-text); }
.badge--outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); }

/* --------------------------------------------------------------- avatares */
.avatar {
  width: 34px; height: 34px; border-radius: var(--r-pill);
  background: var(--brand-soft); color: var(--brand-strong);
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  flex: 0 0 auto; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 26px; height: 26px; font-size: 10.5px; }
.avatar--lg { width: 46px; height: 46px; font-size: 16px; }

/* ============================== FORMULARIOS ============================= */

.field { display: flex; flex-direction: column; gap: 6px; }
.field + .field { margin-top: 16px; }
/* Ese margen solo separa campos apilados uno tras otro. Dentro de una
   rejilla o de una pila con «gap» cada campo ocupa su propia celda, y el
   margen desalineaba la columna de la derecha respecto de la izquierda. */
.grid > .field + .field,
.row > .field + .field,
.stack > .field + .field { margin-top: 0; }
.field__label {
  font-size: 13px; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 5px;
}
.field__label .req { color: var(--danger); font-weight: 700; }
.field__help { font-size: 12.5px; color: var(--text-subtle); line-height: 1.45; }
.field__error {
  font-size: 12.5px; color: var(--danger-text); font-weight: 500;
  display: flex; align-items: center; gap: 5px;
}
.field__error .icon { width: 14px; height: 14px; }

.input, .select, .textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 14px;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--n-300); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--shadow-focus);
}
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--surface-sunken); color: var(--text-muted); cursor: not-allowed;
}
.input--invalid, .select--invalid, .textarea--invalid { border-color: var(--danger); }
.input--invalid:focus { box-shadow: 0 0 0 3px rgb(192 54 44 / .22); }
.textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.input--sm { min-height: 32px; padding: 5px 9px; font-size: 13px; }

/* Fechas y horas nativas: sin esto el control no encoge y en iOS se sale de
   su caja por la derecha, sobre todo dentro de rejillas estrechas. */
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
  min-width: 0;
}
input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="month"]::-webkit-datetime-edit { padding: 0; }
input::-webkit-calendar-picker-indicator { flex: 0 0 auto; margin-inline-start: auto; }

.select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6b60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 12 15.5l6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}

.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.input-group__addon {
  display: flex; align-items: center; padding: 0 12px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-strong);
  border-left: 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 13px; color: var(--text-muted); font-weight: 600;
}
.input-group--prefix .input { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.input-group--prefix .input-group__addon {
  border-left: 1px solid var(--border-strong); border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}

.search {
  position: relative; display: flex; align-items: center;
}
.search .icon { position: absolute; left: 11px; color: var(--text-subtle); pointer-events: none; }
.search .input { padding-left: 35px; }

.checkbox, .radio {
  display: flex; align-items: flex-start; gap: 9px;
  cursor: pointer; font-size: 13.8px; line-height: 1.45;
}
.checkbox input, .radio input {
  appearance: none;
  width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.checkbox input { border-radius: 5px; }
.radio input { border-radius: 50%; }
.checkbox input:checked, .radio input:checked { background: var(--brand); border-color: var(--brand); }
.checkbox input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.8 9.8 17.5 19 6.9'/%3E%3C/svg%3E");
  background-size: 12px; background-position: center; background-repeat: no-repeat;
}
.radio input:checked { box-shadow: inset 0 0 0 3.5px var(--surface); }
.checkbox input:focus-visible, .radio input:focus-visible { box-shadow: var(--shadow-focus); outline: none; }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { appearance: none; width: 38px; height: 22px; border-radius: var(--r-pill);
  background: var(--border-strong); position: relative; flex: 0 0 auto;
  transition: background-color var(--t-base) var(--ease-out); }
.switch input::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-base) var(--ease-out);
}
.switch input:checked { background: var(--brand); }
.switch input:checked::after { transform: translateX(16px); }
.switch input:focus-visible { box-shadow: var(--shadow-focus); outline: none; }
.switch__text { font-size: 13.8px; }

/* Selector de color de la identidad corporativa */
.color-field { display: flex; align-items: center; gap: 10px; }
.color-field input[type="color"] {
  appearance: none; width: 42px; height: 38px; padding: 3px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer;
}
.color-field input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 5px; }
.color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-field .input { font-family: var(--font-mono); text-transform: uppercase; }

/* Zona de subida */
.dropzone {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: 22px;
  text-align: center;
  background: var(--surface-2);
  transition: border-color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out);
  cursor: pointer;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--brand); background: var(--brand-softer); }
.dropzone .icon { margin: 0 auto 8px; color: var(--text-subtle); width: 26px; height: 26px; }
.dropzone__hint { font-size: 12.5px; color: var(--text-subtle); margin-top: 3px; }

.file-preview {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface);
}
.file-preview__thumb {
  width: 54px; height: 54px; border-radius: var(--r-sm);
  background: var(--surface-sunken); display: grid; place-items: center; overflow: hidden; flex: 0 0 auto;
}
.file-preview__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ================================ TABLAS =============================== */

.table-wrap { overflow-x: auto; }
.table { font-size: 13.8px; }
.table th {
  text-align: left; font-weight: 600; font-size: 12px;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table th:first-child, .table td:first-child { padding-left: 18px; }
.table th:last-child,  .table td:last-child  { padding-right: 18px; }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr { transition: background-color var(--t-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .table tbody tr:hover { background: var(--surface-2); }
}
.table tbody tr:last-child td { border-bottom: 0; }
.table__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table__actions { width: 1%; white-space: nowrap; text-align: right; }
.table a.table__link { font-weight: 600; color: var(--text); }
.table a.table__link:hover { color: var(--brand-strong); }
.table--compact td { padding: 8px 14px; }
/* Columna de la casilla de marcar: lo justo para la casilla y sin separación
   sobrante con la primera columna de datos. */
.table__check { width: 1%; padding-right: 0 !important; white-space: nowrap; }
.table__check .checkbox { margin: 0; }
/* Importes a la izquierda, para los listados que lo prefieran así. Se conserva
   la cifra tabular y el «nowrap» de .table__num. */
.table--num-left .table__num { text-align: left; }

/* Barra de acciones sobre lo marcado en un listado */
.bulk-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 18px;
  border-top: 1px solid var(--border);
  background: var(--brand-softer);
  font-size: 13.5px;
}
/* Solo el icono suelto de la barra, no los de los botones que lleva dentro:
   el de la papelera va sobre fondo rojo y tiene que salir blanco como su texto. */
.bulk-bar > .icon { color: var(--brand-strong); }
.table th.sortable { cursor: pointer; user-select: none; }
.table th.sortable:hover { color: var(--text); }

.row-sub { font-size: 12.5px; color: var(--text-subtle); }

/* -------------------------------------------------------------- paginación */
.pagination { display: flex; align-items: center; gap: 6px; }
.pagination__info { font-size: 13px; color: var(--text-muted); }
.page-btn {
  min-width: 32px; height: 32px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  background: var(--surface);
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.page-btn:hover { background: var(--surface-sunken); color: var(--text); }
.page-btn--active { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); }
.page-btn--active:hover { background: var(--brand); color: var(--brand-contrast); }
.page-btn:disabled { opacity: .4; pointer-events: none; }

/* ------------------------------------------------------------ estado vacío */
.empty {
  padding: 52px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.empty__icon {
  width: 52px; height: 52px; border-radius: var(--r-lg);
  background: var(--surface-sunken); color: var(--text-subtle);
  display: grid; place-items: center; margin-bottom: 9px;
}
.empty__icon .icon { width: 24px; height: 24px; }
.empty h3 { font-size: 15.5px; }
.empty p { font-size: 13.5px; color: var(--text-muted); max-width: 42ch; }
.empty .btn { margin-top: 12px; }

/* ----------------------------------------------------------- cargando */
.skeleton {
  background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--surface-2) 37%, var(--surface-sunken) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================== SUPERPUESTOS ============================ */

/* Menú desplegable: escala desde su disparador, no desde el centro */
.dropdown { position: relative; }
.dropdown__menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 208px; padding: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  transform-origin: top right;
  opacity: 0; transform: scale(.96) translateY(-4px);
  visibility: hidden;
  transition: opacity var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out),
              visibility 0s linear var(--t-fast);
}
.dropdown__menu--left { right: auto; left: 0; transform-origin: top left; }
.dropdown.is-open .dropdown__menu {
  opacity: 1; transform: scale(1) translateY(0); visibility: visible;
  transition-delay: 0s;
}
.dropdown__item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 8px 10px;
  border-radius: 6px;
  font-size: 13.6px; color: var(--text); text-align: left;
  transition: background-color var(--t-fast) var(--ease-out);
}
.dropdown__item .icon { width: 16px; height: 16px; color: var(--text-subtle); }
.dropdown__item:hover { background: var(--surface-sunken); }
.dropdown__item--danger { color: var(--danger-text); }
.dropdown__item--danger .icon { color: var(--danger-text); }
.dropdown__item--danger:hover { background: var(--danger-soft); }
.dropdown__sep { height: 1px; background: var(--border); margin: 5px 0; }
.dropdown__label { padding: 7px 10px 4px; font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-subtle); }
/* Explica dentro del menú por qué una acción no está disponible */
.dropdown__note { display: flex; gap: 7px; padding: 7px 10px; margin: 0;
  max-width: 260px; font-size: 12px; line-height: 1.45; color: var(--text-subtle); }
.dropdown__note .icon { flex: none; margin-top: 1px; color: var(--text-subtle); }

/* Diálogo modal: se mantiene centrado, escala desde su propio centro */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgb(17 17 16 / .45);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  padding: 20px;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-base) var(--ease-out), visibility 0s linear var(--t-base);
}
.modal-backdrop.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.modal {
  width: 100%; max-width: 520px;
  max-height: calc(100dvh - 40px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  transform: scale(.96);
  transition: transform var(--t-base) var(--ease-out);
}
.modal-backdrop.is-open .modal { transform: scale(1); }
/* Para lo que se lee, no se rellena: la vista previa de un contrato */
.modal--wide { max-width: 820px; }
/* Para lo que se revisa a la vez que se mira: la lectura de facturas con IA
   enseña una ficha con todos los campos del gasto, y en 820 px no caben. */
.modal--xl { max-width: 1060px; }
.modal--lg { max-width: 720px; }
.modal--sm { max-width: 420px; }
/* Casi todos los modales envuelven su contenido en un <form>. Ese envoltorio
   tiene que heredar la caja flexible; si no, el cuerpo no tiene contra qué
   recortarse, `overflow-y` no llega a aplicarse y el contenido que sobra queda
   fuera de alcance (el caso del modal de firma, que es largo). */
.modal > form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.modal__head { padding: 18px 20px 14px; display: flex; align-items: flex-start; gap: 12px; flex: 0 0 auto; }
.modal__head h2 { font-size: 16.5px; }
.modal__head p { font-size: 13.2px; color: var(--text-muted); margin-top: 3px; }
.modal__body {
  padding: 0 20px 4px;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.modal__foot {
  padding: 16px 20px 18px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: flex-end; gap: 9px;
}
.modal__icon {
  width: 38px; height: 38px; border-radius: var(--r-md);
  display: grid; place-items: center; flex: 0 0 auto;
}
.modal__icon--danger { background: var(--danger-soft); color: var(--danger-text); }
.modal__icon--warn { background: var(--warn-soft); color: var(--warn-text); }
.modal__icon--brand { background: var(--brand-soft); color: var(--brand-strong); }

/* Avisos temporales */
.toasts {
  position: fixed; bottom: 20px; right: 20px; z-index: 120;
  display: flex; flex-direction: column-reverse; gap: 9px;
  max-width: min(400px, calc(100vw - 40px));
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-subtle);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  font-size: 13.6px;
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
@starting-style { .toast { opacity: 0; transform: translateY(12px); } }
.toast.is-leaving { opacity: 0; transform: translateX(16px); }
.toast--success { border-left-color: var(--ok); }
.toast--error   { border-left-color: var(--danger); }
.toast--warning { border-left-color: var(--warn); }
.toast--info    { border-left-color: var(--info); }
.toast__icon { flex: 0 0 auto; margin-top: 1px; }
.toast--success .toast__icon { color: var(--ok); }
.toast--error   .toast__icon { color: var(--danger); }
.toast--warning .toast__icon { color: var(--warn); }
.toast--info    .toast__icon { color: var(--info); }
.toast__close { color: var(--text-subtle); margin-left: auto; flex: 0 0 auto; }
.toast__close:hover { color: var(--text); }

/* Avisos permanentes en página */
.alert {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 15px; border-radius: var(--r-md);
  font-size: 13.6px; line-height: 1.5;
}
.alert .icon { flex: 0 0 auto; margin-top: 1px; }
.alert strong { display: block; margin-bottom: 2px; }
.alert--info    { background: var(--info-soft); color: var(--info-text); }
.alert--ok      { background: var(--ok-soft); color: var(--ok-text); }
.alert--warn    { background: var(--warn-soft); color: var(--warn-text); }
.alert--danger  { background: var(--danger-soft); color: var(--danger-text); }
.alert--neutral { background: var(--surface-sunken); color: var(--text-muted); }

/* Ayuda contextual */
.tooltip { position: relative; }
.tooltip__bubble {
  position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%) scale(.97);
  transform-origin: bottom center;
  padding: 5px 9px;
  background: var(--n-900); color: var(--n-50);
  border-radius: 6px; font-size: 12px; white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 70;
  transition: opacity 125ms var(--ease-out), transform 125ms var(--ease-out), visibility 0s linear 125ms;
}
.tooltip:hover .tooltip__bubble, .tooltip:focus-within .tooltip__bubble {
  opacity: 1; visibility: visible; transform: translateX(-50%) scale(1); transition-delay: 0s;
}
/* Hacia abajo: pegado al borde superior de la ventana no cabe por arriba y
   el globo se salía de la pantalla. */
.tooltip--below .tooltip__bubble {
  bottom: auto;
  top: calc(100% + 7px);
  transform-origin: top center;
}
/* Anclado a la derecha, para los iconos que están al final de una barra:
   centrado se salía por el lado derecho de la ventana. */
.tooltip--end .tooltip__bubble {
  left: auto; right: 0;
  transform: translateX(0) scale(.97);
  transform-origin: top right;
}
.tooltip--end:hover .tooltip__bubble,
.tooltip--end:focus-within .tooltip__bubble { transform: translateX(0) scale(1); }

/* Interrogación de ayuda junto a la etiqueta de un campo.

   El globo es más ancho que el de «.tooltip» y su texto parte de línea: aquí
   caben una o dos frases explicando qué se espera en el campo, no dos palabras.

   Se coloca centrado sobre el icono; cuando así se saldría por un lado de la
   ventana, app.js corrige el desvío en «--hint-shift» y le da la vuelta hacia
   abajo con «is-below» si arriba no cabe. Sin JavaScript sigue apareciendo,
   solo que sin esa corrección. */
.hint {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 16px; height: 16px;
  border-radius: 50%;
  color: var(--text-subtle); cursor: help;
  user-select: none; -webkit-tap-highlight-color: transparent;
  transition: color 120ms var(--ease-out);
}
.hint:hover, .hint:focus-visible { color: var(--brand); }
.hint:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hint .icon { width: 14px; height: 14px; vertical-align: 0; }

.hint__bubble {
  position: absolute; bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(calc(-50% + var(--hint-shift, 0px))) scale(.97);
  transform-origin: bottom center;
  width: max-content; max-width: min(280px, calc(100vw - 32px));
  padding: 8px 11px;
  background: var(--n-900); color: var(--n-50);
  border-radius: 8px;
  font-size: 12.5px; font-weight: 400; line-height: 1.45;
  text-align: left; white-space: normal; text-wrap: pretty;
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, .18));
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 90;
  transition: opacity 130ms var(--ease-out), transform 130ms var(--ease-out), visibility 0s linear 130ms;
}
.hint:hover .hint__bubble,
.hint:focus-visible .hint__bubble,
.hint.is-open .hint__bubble {
  opacity: 1; visibility: visible;
  transform: translateX(calc(-50% + var(--hint-shift, 0px))) scale(1);
  transition-delay: 0s;
}
/* Hacia abajo cuando arriba no queda hueco (primeros campos de la pantalla) */
.hint.is-below .hint__bubble {
  bottom: auto; top: calc(100% + 8px);
  transform-origin: top center;
}

/* En el móvil no hay ratón: el globo se abre al tocar la interrogación
   (app.js) y se cierra al tocar fuera. Se ancla al icono y se deja crecer
   hasta casi todo el ancho, que si no una frase queda en una columna. */
@media (max-width: 640px) {
  .hint__bubble { max-width: min(260px, calc(100vw - 24px)); }
}

@media (prefers-reduced-motion: reduce) {
  .hint__bubble { transition-duration: 0s; }
}

/* --------------------------------------- redacción de modelos de contrato */

/* Icono redondo del tipo de contrato. El color lo pone la fila en línea,
   porque cada tipo trae el suyo guardado. */
.type-dot {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%;
}

/* Barra de formato del articulado, pegada sobre el editor */
.doc-toolbar {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.doc-toolbar__btn {
  display: inline-flex; align-items: center; gap: 5px;
  min-width: 30px; height: 28px; padding: 0 8px;
  border: 1px solid transparent; border-radius: var(--r-sm, 6px);
  background: none; color: var(--text-muted);
  font-size: 12.5px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.doc-toolbar__btn:hover { background: var(--surface); color: var(--text); border-color: var(--border); }
.doc-toolbar__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.doc-toolbar__sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }

/* El articulado en modo lectura (la vista previa): mismo aspecto, sin marco */
.doc-editor--read { border: 0; padding: 0; max-height: none; }

/* Lista de marcadores del lateral */
.var-list { display: flex; flex-direction: column; gap: 2px; }
.var {
  display: flex; flex-direction: column; gap: 1px;
  width: 100%; padding: 6px 8px;
  border: 1px solid transparent; border-radius: var(--r-sm, 6px);
  background: none; text-align: left; font-family: inherit;
  cursor: pointer;
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.var:hover { background: var(--brand-soft, var(--surface-2)); border-color: var(--border); }
.var:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.var .mono { font-size: 11.5px; color: var(--brand-strong); }
.var__desc { font-size: 11.5px; color: var(--text-subtle); line-height: 1.35; }

/* ------------------------------------------- guía de impuestos (casillas) */

/* Una fila por casilla del modelo: número, qué es, e importe. Se lee como el
   propio impreso, para poder ir copiando de una a otra sin perderse. */
.casillas { display: flex; flex-direction: column; }
.casilla {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: baseline; gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.casilla:last-child { border-bottom: 0; }
.casilla__num {
  display: inline-grid; place-items: center;
  padding: 2px 0; border-radius: var(--r-sm);
  background: var(--brand-soft); color: var(--brand-strong);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* Las que no tienen casilla fija en el impreso se apagan, para que no parezca
   que el número lo hemos inventado nosotros. */
.casilla--sin .casilla__num { background: var(--surface-sunken); color: var(--text-subtle); }
.casilla__txt { font-size: 13.5px; line-height: 1.45; }
.casilla__txt small { display: block; font-size: 12px; color: var(--text-subtle); line-height: 1.4; }
.casilla__val {
  font-size: 14px; font-weight: 650; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Tabla compacta para los desgloses de apoyo */
.table--sm th, .table--sm td { padding: 7px 10px; font-size: 13px; }

/* ============================== NAVEGACIÓN ============================== */

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab {
  padding: 9px 13px;
  font-size: 13.8px; font-weight: 550; color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.tab:hover { color: var(--text); }
.tab--active { color: var(--brand-strong); border-bottom-color: var(--brand); font-weight: 650; }
.tab .icon { width: 16px; height: 16px; }

.segmented {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-sunken); border-radius: var(--r-sm);
}
.segmented__item {
  padding: 5px 12px; border-radius: 6px;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.segmented__item--active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs); }

.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-subtle); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb .icon { width: 14px; height: 14px; }

/* -------------------------------------------------------------- historial */
.timeline { position: relative; padding-left: 26px; }
.timeline::before {
  content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px;
  width: 1.5px; background: var(--border);
}
.timeline__item { position: relative; padding-bottom: 18px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot {
  position: absolute; left: -26px; top: 1px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--border-strong);
  display: grid; place-items: center; color: var(--text-subtle);
}
.timeline__dot .icon { width: 11px; height: 11px; }
.timeline__dot--ok    { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); }
.timeline__dot--brand { border-color: var(--brand); color: var(--brand-strong); background: var(--brand-soft); }
.timeline__dot--danger{ border-color: var(--danger); color: var(--danger-text); background: var(--danger-soft); }
.timeline__title { font-size: 13.6px; font-weight: 600; }
.timeline__meta { font-size: 12.3px; color: var(--text-subtle); margin-top: 1px; }

/* --------------------------------------------------------------- pasos */
.steps { display: flex; align-items: center; gap: 0; }
.step { display: flex; align-items: center; gap: 9px; }
.step__num {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
  font-size: 12.5px; font-weight: 700;
  background: var(--surface-sunken); color: var(--text-subtle);
  border: 1.5px solid transparent;
}
.step--active .step__num { background: var(--brand); color: var(--brand-contrast); }
.step--done .step__num { background: var(--ok-soft); color: var(--ok-text); }
.step__label { font-size: 13.2px; font-weight: 550; color: var(--text-muted); white-space: nowrap; }
.step--active .step__label { color: var(--text); font-weight: 650; }
.step__line { width: 34px; height: 1.5px; background: var(--border); margin: 0 12px; flex: 0 0 auto; }

/* =========================== EDITOR DE DOCUMENTOS ====================== */

.lines { width: 100%; font-size: 13.6px; table-layout: fixed; }
.lines th {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-subtle); text-align: left; padding: 0 8px 7px;
}
.lines th.n, .lines td.n { text-align: right; }
.lines td { padding: 11px 8px; vertical-align: top; }
.lines tr.line-row { border-bottom: 1px solid var(--border); }
.lines tr.line-row:last-child { border-bottom: 0; }
.lines .input, .lines .select { min-height: 34px; padding: 6px 9px; font-size: 13.4px; }
.lines .input.n { text-align: right; font-variant-numeric: tabular-nums; }
/* El importe se alinea con el primer input de la fila. Va con «td» delante
   porque si no, «.lines td» tiene más peso y el padding no llegaba a aplicarse. */
.lines td.lines__total { padding-top: 17px; }
.lines__total { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lines__drag { color: var(--text-subtle); cursor: grab; padding: 0 2px; }
.lines__drag:active { cursor: grabbing; }
.line-row.is-section td { background: var(--surface-sunken); }
.line-row.is-dragging { opacity: .45; }
.line-row.is-optional .lines__total { color: var(--text-subtle); font-weight: 500; }

/* El editor de líneas se apila en pantallas estrechas */
@media (max-width: 860px) {
  .lines { table-layout: auto; }
  .lines thead { display: none; }
  .lines, .lines tbody, .lines tr.line-row, .lines td { display: block; width: auto; }
  .lines tr.line-row {
    border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 12px; margin-bottom: 10px; background: var(--surface-2);
  }
  .lines td { padding: 0; }
  .lines td[data-cell] { display: inline-block; width: 48%; margin-top: 8px; vertical-align: top; }
  .lines td[data-cell]::before {
    content: attr(data-label); display: block;
    font-size: 11px; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-subtle); margin-bottom: 3px;
  }
  .lines td[data-cell="total"] { width: 100%; text-align: right; padding-top: 10px; }
  .lines td:first-child, .lines td:last-child { display: inline-block; width: auto; }
  .lines td:last-child { float: right; }
}


.totals { margin-left: auto; width: 100%; max-width: 340px; font-size: 13.8px; }
.totals__row { display: flex; justify-content: space-between; gap: 20px; padding: 5px 0; }
.totals__row span:last-child { font-variant-numeric: tabular-nums; font-weight: 550; }
.totals__row--muted { color: var(--text-muted); font-size: 13px; }
.totals__row--grand {
  border-top: 1.5px solid var(--border-strong);
  margin-top: 7px; padding-top: 11px;
  font-family: var(--font-display); font-size: 19px; font-weight: 750;
  letter-spacing: -.02em;
}
.totals__row--grand span:last-child { font-weight: 750; }

/* Editor del cuerpo del contrato */
.doc-editor {
  min-height: 460px;
  padding: 30px 34px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: 14px; line-height: 1.65;
  overflow-y: auto;
}
.doc-editor:focus { outline: none; border-color: var(--brand); box-shadow: var(--shadow-focus); }
.doc-editor h1 { font-size: 20px; text-align: center; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .01em; }
.doc-editor h2 { font-size: 15px; margin: 22px 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.doc-editor h3 { font-size: 14px; margin: 17px 0 5px; }
.doc-editor p { margin-bottom: 9px; text-align: justify; }
.doc-editor ol, .doc-editor ul { margin: 0 0 10px 20px; }
.doc-editor li { margin-bottom: 5px; }
.doc-editor .doc-meta { text-align: center; color: var(--text-muted); font-size: 12.5px; margin-bottom: 20px; }
.doc-editor .clause-box {
  background: var(--surface-2); border-left: 3px solid var(--brand);
  padding: 11px 14px; margin: 9px 0 13px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.doc-editor .signature-intro { margin-top: 22px; font-style: italic; }
.doc-editor table.milestones { width: 100%; border-collapse: collapse; margin: 12px 0 16px; font-size: 13px; }
.doc-editor table.milestones th {
  background: var(--surface-2); color: var(--text-muted);
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  border: 1px solid var(--border); padding: 8px 10px; text-align: left;
}
.doc-editor table.milestones td { border: 1px solid var(--border); padding: 8px 10px; vertical-align: top; }
.doc-editor table.milestones small { color: var(--text-subtle); font-size: 12px; }
.doc-editor .var-chip[data-missing] { background: var(--warn-soft); color: var(--warn-text); }

/* Hueco de relleno del articulado: en la copia del cliente y en el PDF es solo
   una línea de puntos; en el editor se resalta para que no pase inadvertido. */
.doc-blank { color: var(--text-muted); letter-spacing: .5px; }
[contenteditable] .doc-blank {
  background: var(--warn-soft); color: var(--warn-text);
  border-radius: 3px; padding: 0 3px;
}

.var-chip {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 5px;
  background: var(--brand-soft); color: var(--brand-strong);
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  cursor: pointer; user-select: none;
  transition: transform var(--t-fast) var(--ease-out);
}
.var-chip:active { transform: scale(.95); }

/* Anexo del contrato en el portal del cliente.
   Es el detalle al que remite el articulado («conforme al Anexo I»), y el
   cliente lo lee aquí antes de firmar, así que se compone como una tabla de
   documento y no como una tabla de panel. */
.doc-annex h3 { font-size: 15px; margin: 18px 0 6px; }
.doc-annex p  { margin: 0 0 10px; }
.doc-annex small { color: var(--text-muted); font-size: 12.5px; }
.doc-annex .annex-num { text-align: right; white-space: nowrap; }

.doc-annex table.annex-lines,
.doc-annex table.milestones,
.doc-annex table.annex-totals { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.doc-annex table.annex-lines th,
.doc-annex table.milestones th {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 650;
  color: var(--text-muted); border-bottom: 2px solid var(--brand);
  padding: 8px 10px; text-align: left; white-space: nowrap;
}
.doc-annex table.annex-lines td,
.doc-annex table.milestones td {
  padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top;
}
.doc-annex table.annex-lines tr.annex-section td {
  background: var(--surface-sunken); font-weight: 650;
  font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase;
}
.doc-annex table.annex-totals { max-width: 320px; margin-left: auto; }
.doc-annex table.annex-totals td { border: 0; padding: 6px 10px; }
.doc-annex table.annex-totals tr.annex-grand td {
  border-top: 2px solid var(--text); padding-top: 10px;
  font-size: 18px; font-weight: 700;
}
/* En movil la tabla del anexo no cabe: se desplaza sola en vez de romper la pagina */
.doc-annex { overflow-x: auto; }

/* Firma manuscrita */
.signature-pad {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  position: relative;
  touch-action: none;
}
.signature-pad canvas { display: block; width: 100%; height: 190px; border-radius: var(--r-md); cursor: crosshair; }
.signature-pad__hint {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--text-subtle); font-size: 13.5px; pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out);
}
.signature-pad.has-signature .signature-pad__hint { opacity: 0; }
.signature-pad__baseline {
  position: absolute; left: 26px; right: 26px; bottom: 44px;
  height: 1px; background: var(--border); pointer-events: none;
}

/* ============================ ACCESO Y PORTAL ========================== */

.auth {
  min-height: 100dvh;
  display: flex;
  background: var(--bg);
}
.auth__pane { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth__card { width: 100%; max-width: 384px; }
.auth__logo { max-height: 42px; width: auto; margin-bottom: 26px; }
.auth__title { font-size: 25px; letter-spacing: -.03em; }
.auth__subtitle { color: var(--text-muted); font-size: 14px; margin-top: 5px; margin-bottom: 26px; }
.auth__foot { margin-top: 24px; font-size: 12.5px; color: var(--text-subtle); text-align: center; }

/* Portal público del cliente */
.public {
  min-height: 100dvh;
  background: var(--bg);
  display: flex; flex-direction: column;
}
.public__bar {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 13px 22px;
  display: flex; align-items: center; gap: 14px;
  position: sticky; top: 0; z-index: 20;
}
.public__bar img { max-height: 30px; width: auto; }
.public__body { flex: 1 1 auto; width: 100%; max-width: 940px; margin: 0 auto; padding: 26px 20px 70px; }
.public__doc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.public__actionbar {
  position: sticky; bottom: 0; z-index: 25;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  padding: 13px 20px;
}
.public__actionbar-inner {
  max-width: 940px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

/* ======================== LECTURA DE FACTURAS CON IA ==================== */

/* La cola mientras se leen los documentos */
.ia-cola {
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.ia-barra {
  height: 4px; border-radius: var(--r-pill);
  background: var(--surface-sunken); overflow: hidden;
}
.ia-barra span {
  display: block; height: 100%; width: 0;
  background: var(--brand);
  transition: width var(--t-slow) var(--ease-out);
}

/* La ficha de un documento leído */
.ia-doc { border-left: 3px solid var(--warn); }
.ia-doc:has(.badge--ok) { border-left-color: var(--ok); }
.ia-doc:has(.badge--danger) { border-left-color: var(--danger); }
.ia-doc--hecho { border-left-color: var(--brand); opacity: .72; }
/* Mientras se relee con el modelo bueno: la ficha sigue ahi, pero se ve que
   esta en marcha y no se puede tocar lo que va a ser sustituido. */
.ia-doc--releyendo { opacity: .6; pointer-events: none; }
.ia-doc--releyendo [data-ia-releer] { pointer-events: auto; }
.ia-doc .alert { padding: 9px 11px; align-items: flex-start; }

/* Cada gasto dentro de la ficha: una factura con dos tipos de IVA da dos */
.ia-gasto {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.ia-gasto + .ia-gasto { margin-top: 14px; }
.ia-gasto__titulo {
  font-size: 12px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-subtle); margin-bottom: 10px;
}
.ia-gasto__pie {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  padding-top: 13px; margin-top: 13px; border-top: 1px solid var(--border);
}
.ia-gasto__pie > .row { flex: 1 1 260px; }
.ia-gasto--guardado { background: var(--ok-soft); border-color: var(--ok); }
.ia-gasto__hecho {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}

/* Las cuentas de la ficha: lo mismo que se guardará, recalculado al escribir */
.ia-cuentas { flex: 0 1 300px; min-width: 220px; font-size: 13px; }
.ia-cuentas__fila {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 2px 0; color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.ia-cuentas__fila--total {
  margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--border);
  color: var(--text); font-weight: 650;
}

/* Un campo que el agente no ha leído con seguridad. No es un error de
   validación —el valor puede estar bien— sino un «mira esto antes de guardar». */
.input.is-dudoso, .select.is-dudoso {
  border-color: var(--warn);
  background: var(--warn-soft);
}
.input.is-dudoso:focus, .select.is-dudoso:focus { background: var(--surface); }

/* ============================== RESPONSIVE ============================= */

@media (max-width: 1180px) {
  .grid--main, .grid--aside { grid-template-columns: minmax(0, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  :root { --sidebar-w: 268px; }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    transform: translateX(-100%);
    transition: transform var(--t-slow) var(--ease-out);
    box-shadow: var(--shadow-lg);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  .nav-scrim {
    position: fixed; inset: 0; z-index: 35;
    background: rgb(17 17 16 / .4);
    opacity: 0; visibility: hidden;
    transition: opacity var(--t-base) var(--ease-out), visibility 0s linear var(--t-base);
  }
  body.nav-open .nav-scrim { opacity: 1; visibility: visible; transition-delay: 0s; }
  .page { padding: 18px 15px 48px; }
  .topbar { padding: 0 15px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .page-head h1 { font-size: 20px; }
  .page-head__actions { width: 100%; }
  .page-head__actions .btn { flex: 1 1 auto; }
  .hide-sm { display: none !important; }
  .card__body { padding: 15px; }
  .doc-editor { padding: 20px 18px; }
  .modal { max-width: none; }
  .ia-gasto__pie { flex-direction: column; align-items: stretch; }
  .ia-cuentas { flex: 1 1 auto; }
  .toasts { left: 12px; right: 12px; bottom: 12px; max-width: none; }

  /* Los campos van a 16px: por debajo de ese tamaño iOS amplía la página al
     enfocarlos, y con el zoom bloqueado se quedaría descuadrada. */
  .input, .select, .textarea,
  .input--sm, .lines .input, .lines .select { font-size: 16px; }
}
@media (min-width: 769px) {
  .only-sm { display: none !important; }
  .nav-scrim { display: none; }
}

/* ============================== IMPRESIÓN ============================== */
@media print {
  .sidebar, .topbar, .page-head__actions, .btn, .toasts, .public__actionbar { display: none !important; }
  body { background: #fff; }
  .card { border: 0; box-shadow: none; }
  .page { padding: 0; max-width: none; }
}

/* ========================= MOVIMIENTO REDUCIDO ========================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active { transform: none; }
}