/* ═══════════════════════════════════════════════════════════════════════════════════════════
   Identidad «Azul y papel» · docs/72-identidad-visual-azul-y-papel.md
   Aprobada por la dirección el 14 de septiembre de 2026.

   styles/app.css y statistics/workspace.css conservan la estructura histórica del sistema, con
   sus valores traducidos a la paleta nueva y envueltas en la capa CSS `sigplan`. Esta hoja se
   carga después de ambas y tiene dos partes:

   - La pintura —color, borde, tipografía, íconos— y las reglas propias de cada ventana viven
     fuera de la capa. Ganan siempre sobre las reglas heredadas, cualquiera sea su especificidad,
     y solo en lo que declaran.
   - Las medidas genéricas —anchos, rellenos, altos de campo— van al final, dentro de la capa.
     Reemplazan la regla base y ceden ante las variantes que ya declaraban su propia medida.

   Solo cambia la apariencia. Ninguna regla agrega, quita ni reescribe texto: un `content` solo
   puede dibujar vacío.

   Índice
     1. Tipografías autoalojadas
     2. Piezas comunes (lámina 1): tokens, tipografía, botones, estados, barra, modal, íconos
     3. Ventanas
     4. Medidas dentro de la capa
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Tipografías autoalojadas (Inter ya estaba en el servidor) ─────────────────────────────── */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-latin-ext-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── 01 · Tokens ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* Superficies (docs/72 §2) */
  --surface-institutional: #0B2545;
  --surface-context: #13315C;
  --surface-context-raised: #1B4A7E;
  --surface-desk: #EEF1F5;
  --surface-paper: #FFFFFF;

  /* Azul (§3.1) */
  --blue-900: #0A1C33;
  --blue-800: #0B2545;
  --blue-700: #13315C;
  --blue-600: #1B4A7E;
  --blue-500: #2E5F9C;
  --blue-400: #3C5A85;
  --blue-300: #8FA9C9;
  --blue-200: #A8BDD9;
  --blue-100: #C3D3E6;
  --blue-050: #EEF1F5;

  /* Papel y tinta (§3.2) */
  --paper: #FFFFFF;
  --line: #E1E5EB;
  --line-strong: #C9D3DF;
  /* El borde de un campo dice dónde se escribe: tiene que verse (WCAG 1.4.11, 3:1). El filete
     fino de 0,5 px en --line-strong daba 1,51:1. Este da 3,43:1 sobre papel y 3,02:1 sobre la
     mesa. Tarjetas y divisores siguen finos: no son controles. */
  --line-field: #7D8CA0;
  --ink-title: #13315C;
  --ink-body: #1E2A38;
  --ink-muted: #5C6B7E;

  /* Cálido (§3.3) */
  --clay-tint: #F7E8E1;
  --clay: #D97757;
  /* Al pasar el cursor el clay se aclara en vez de oscurecerse: #C2603C dejaba la tinta en
     3,61:1; este tono la deja en 5,75:1 y el cambio sigue viéndose. */
  --clay-hover: #E08A6C;
  --clay-ink: #9E4726;
  --on-clay: #46180B;

  /* Semánticos (§3.4) */
  --success: #1F7A5C;
  --success-tint: #E4F1EC;
  --success-ink: #14543F;
  --warning: #8A6100;
  --warning-tint: #F5EEDC;
  --warning-ink: #6B4B00;
  --danger: #9B2C2C;
  --danger-tint: #F7E5E5;
  --danger-ink: #7A1F1F;

  /* Tipografía (§4) */
  --font-system: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-doc: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-tech: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* Geometría y movimiento (§5, §8) */
  --radius-control: 8px;
  --radius-card: 10px;
  --radius-window: 12px;
  --border-hairline: 0.5px;
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 240ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --focus-halo: 0 0 0 2px #2E5F9C, 0 0 0 4px rgb(46 95 156 / 15%);

  /* Los nombres de la hoja heredada, apuntados a la paleta nueva. Son los que usan las reglas
     que esta hoja no reescribe. */
  --sans: var(--font-system);
  --display: var(--font-system);
  --document: var(--font-doc);
  --brand-primary: #13315C;
  --brand-primary-deep: #0B2545;
  --brand-primary-pressed: #0A1C33;
  --brand-secondary: #2E5F9C;
  --brand-accent: #D97757;
  --brand-accent-ui: #D97757;
  --action: #1B4A7E;
  --action-hover: #2E5F9C;
  --action-pressed: #13315C;
  --action-secondary: #2E5F9C;
  --action-secondary-hover: #1B4A7E;
  --success-strong: #1F7A5C;
  --success-hover: #14543F;
  --success-on-white: #1F7A5C;
  --success-on-white-hover: #14543F;
  --danger-strong: #9B2C2C;
  --danger-hover: #7A1F1F;
  --danger-bg: #F7E5E5;
  --info: #2E5F9C;
  --surface-default: #FFFFFF;
  --surface-subtle: #EEF1F5;
  --surface-input: #FFFFFF;
  --surface-hover: #F7F9FB;
  --surface-selected: #EEF1F5;
  --surface-disabled: #F7F9FB;
  --surface: #EEF1F5;
  --modal: #FFFFFF;
  --tint-success: #E4F1EC;
  --tint-warning: #F5EEDC;
  --tint-danger: #F7E5E5;
  --tint-info: #EEF1F5;
  --methodology-canvas: #EEF1F5;
  --document-canvas: #EEF1F5;
  --border: #E1E5EB;
  --border-input: #C9D3DF;
  --border-card: #E1E5EB;
  --border-row: #EEF1F5;
  --border-width: 0.5px;
  --text: #13315C;
  --text-body: #1E2A38;
  --text-secondary: #5C6B7E;
  --text-muted: #5C6B7E;
  --text-icon-muted: #5C6B7E;
  --text-inverse: #FFFFFF;
  --text-inverse-soft: #C3D3E6;
  --ink: #1E2A38;
  --muted: #5C6B7E;
  --forest: #1B4A7E;
  --forest-dark: #13315C;
  --accent: #2E5F9C;
  --positive: #1F7A5C;
  --radius-sm: 6px;
  --radius-input: 8px;
  --radius: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-pill: 8px;
  --shadow-sm: none;
  --shadow: none;
  --shadow-modal: none;
  --shadow-table: none;
  --focus-ring: var(--focus-halo);
  --focus-border: #2E5F9C;
  --gradient-brand: #0B2545;
  --gradient-brand-admin: #0B2545;

  /* 09 · Colores de los asistentes: los mismos dieciséis nombres, en tonos sobrios. Los cinco
     claros siguen claros —letra oscura— y los once restantes siguen oscuros —letra blanca—,
     de modo que la tinta que cada asistente guardó sigue leyéndose. */
  --accent-institutional: #13315C;
  --accent-institutional-ink: #FFFFFF;
  --accent-navy: #0B2545;
  --accent-navy-ink: #FFFFFF;
  --accent-azure: #2E5F9C;
  --accent-azure-ink: #FFFFFF;
  --accent-cyan: #A8BDD9;
  --accent-cyan-ink: #0B2545;
  --accent-aqua: #2C6E7A;
  --accent-aqua-ink: #FFFFFF;
  --accent-teal: #1F5B50;
  --accent-teal-ink: #FFFFFF;
  --accent-mint: #A7CFC2;
  --accent-mint-ink: #0B2545;
  --accent-green: #B7CC9C;
  --accent-green-ink: #0B2545;
  --accent-olive: #5A6B32;
  --accent-olive-ink: #FFFFFF;
  --accent-amber: #E0CF9A;
  --accent-amber-ink: #0B2545;
  --accent-bronze: #7D5A36;
  --accent-bronze-ink: #FFFFFF;
  --accent-clay: #E2B9A9;
  --accent-clay-ink: #0B2545;
  --accent-brick: #8A3F2E;
  --accent-brick-ink: #FFFFFF;
  --accent-berry: #7B3656;
  --accent-berry-ink: #FFFFFF;
  --accent-plum: #574A80;
  --accent-plum-ink: #FFFFFF;
  --accent-slate: #4A5568;
  --accent-slate-ink: #FFFFFF;

  color: var(--ink-body);
  background: var(--surface-desk);
  font-family: var(--font-system);
}

body {
  color: var(--ink-body);
  background: var(--surface-desk);
}

[data-ink="black"] { --card-ink: #0B2545; }
.ink-option[data-ink="black"] { color: #0B2545; }

/* ── 02 · Tipografía de la interfaz ─────────────────────────────────────────────────────────── */

td,
th,
.status-badge,
.summary-grid strong,
.quota-grid strong {
  font-variant-numeric: tabular-nums;
}

code,
kbd,
samp {
  font-family: var(--font-tech);
}

/* Los controles son siempre sistema (§4.1), también cuando viven dentro de la hoja serif. */
button,
input,
select,
textarea {
  font-family: var(--font-system);
}

/* ── Foco visible en todo control (§9) ─────────────────────────────────────────────────────── */

/* El foco es un `outline`, no una sombra, y tiene especificidad propia. La regla anterior iba
   envuelta en `:where()` —especificidad cero— y pintaba un halo con `box-shadow`: cualquier
   botón que declarara `box-shadow: none`, que son casi todos, lo borraba sin que nadie lo
   notara. La auditoría WCAG del 25-09-2026 midió 16 pantallas donde el teclado no mostraba
   dónde estaba. Un `outline` no compite con las sombras de nadie y sobrevive al modo de alto
   contraste de Windows, que borra las sombras. */
:root {
  --focus-color: var(--blue-500);
}

:is(a[href], button, summary, [role="button"], [role="tab"], [role="radio"],
  [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
}

/* Sobre azul, el anillo azul no se ve (1,99:1 sobre la franja): pasa a blanco, 12,95:1. */
.site-header,
.workspace-header,
.governance-header,
.statistics-band,
.project-context-navigation,
.builder-step-navigation,
.navigation-menu,
.mode-switch-menu,
.form-dialog .dialog-heading,
.step-modal-bar {
  --focus-color: #FFFFFF;
}

/* Los destinos de la barra y las pestañas de la franja ocupan todo su alto: un anillo por
   fuera lo corta el borde de la ventana o de la franja. Va por dentro. */
.site-header .global-navigation :is(a[href], button):focus-visible,
.project-context-navigation :is(button, a[href]):focus-visible,
.builder-step-navigation :is(button, a[href]):focus-visible {
  outline-offset: -4px;
}

/* Lo que la aplicación enfoca por su cuenta para orientar —un título al cambiar de pantalla,
   un aviso de error, la sección que recibió una propuesta— no es un control. Los títulos no
   llevan anillo; los avisos y secciones conservan el halo que ya tenían. */
:is(h1, h2, h3, main)[tabindex="-1"]:focus {
  outline: none;
}

[tabindex="-1"]:not(h1, h2, h3, main, a, button, [role]):focus-visible {
  outline: none;
  box-shadow: var(--focus-halo);
}

/* En colores forzados las sombras desaparecen: los campos y los contenedores que marcan su
   foco con halo reciben un contorno del color de resaltado del sistema. */
@media (forced-colors: active) {
  :is(input, select, textarea):focus-visible,
  :is(.org-search, .org-stepper, .statistics-ask):focus-within,
  [tabindex="-1"]:not(h1, h2, h3, main, a, button, [role]):focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}

/* ── 03 · Botones (§6.1) ───────────────────────────────────────────────────────────────────── */

.primary-button,
.secondary-button,
.tertiary-button,
.danger-button:not(.text-button),
.mini-button,
.inline-button {
  min-height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-control);
  font-family: var(--font-system);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  box-shadow: none;
  transition:
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.primary-button:hover,
.secondary-button:hover,
.tertiary-button:hover,
.danger-button:hover,
.mini-button:hover,
.inline-button:hover {
  box-shadow: none;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .primary-button:active:not(:disabled),
  .secondary-button:active:not(:disabled),
  .tertiary-button:active:not(:disabled),
  .danger-button:active:not(:disabled),
  .mini-button:active:not(:disabled),
  .inline-button:active:not(:disabled) {
    box-shadow: none;
    transform: scale(0.98);
  }
}

/* Sistema, en azul: el botón principal fuera de un modal. */
.primary-button {
  color: #FFFFFF;
  background: var(--blue-600);
  border: 0.5px solid var(--blue-600);
}

.primary-button:hover {
  color: #FFFFFF;
  background: var(--blue-500);
  border-color: var(--blue-500);
}

/* Secundaria sobre papel. */
.secondary-button {
  color: var(--blue-700);
  background: var(--paper);
  border: 0.5px solid var(--line-strong);
}

.secondary-button:hover {
  color: var(--blue-700);
  background: var(--blue-050);
  border-color: var(--line-strong);
}

/* El terciario pasa a botón de texto. */
.tertiary-button,
.text-button,
.row-button,
.back-button {
  color: var(--blue-600);
  background: transparent;
  border-color: transparent;
  font-weight: 500;
  text-underline-offset: 3px;
}

.tertiary-button:hover,
.text-button:hover,
.row-button:hover,
.back-button:hover {
  color: var(--blue-600);
  background: transparent;
  text-decoration: underline;
}

/* Destructiva: borde y letra roja. Solo se rellena dentro de una confirmación. */
.danger-button,
.danger-button.inline-button,
.danger-button.mini-button {
  color: var(--danger);
  background: var(--paper);
  border: 0.5px solid var(--danger);
}

.danger-button:hover,
.danger-button.inline-button:hover,
.danger-button.mini-button:hover {
  color: var(--danger);
  background: var(--danger-tint);
  border-color: var(--danger);
}

.danger-button.text-button {
  color: var(--danger);
  background: transparent;
  border-color: transparent;
}

.danger-button.text-button:hover {
  background: transparent;
}

.confirmation-dialog .danger-button,
.confirmation-dialog .danger-button:hover {
  color: #FFFFFF;
  background: var(--danger);
  border-color: var(--danger);
}

.confirmation-dialog .danger-button:hover {
  background: var(--danger-ink);
  border-color: var(--danger-ink);
}

/* Tamaño pequeño, 30 px. */
.mini-button,
.compact-button.mini-button {
  min-height: 30px;
  padding: 0 12px;
  font-size: 12px;
}

.mini-button:not(.danger-button) {
  color: var(--blue-700);
  background: var(--paper);
  border: 0.5px solid var(--line-strong);
}

.mini-button:not(.danger-button):hover {
  background: var(--blue-050);
}

/* Deshabilitados: cada variante con su propio par de colores, sin transparencia. */
.primary-button:disabled,
.secondary-button:disabled,
.tertiary-button:disabled,
.text-button:disabled,
.danger-button:disabled,
.mini-button:disabled,
.inline-button:disabled {
  opacity: 1;
  cursor: not-allowed;
}

.primary-button:disabled,
.primary-button:disabled:hover {
  color: #9AA6B4;
  background: #DDE3EA;
  border-color: #DDE3EA;
}

.secondary-button:disabled,
.secondary-button:disabled:hover,
.mini-button:not(.danger-button):disabled {
  color: #9AA6B4;
  background: var(--paper);
  border-color: var(--line);
}

.tertiary-button:disabled,
.text-button:disabled {
  color: #9AA6B4;
  text-decoration: none;
}

.danger-button:disabled,
.danger-button:disabled:hover {
  color: #C08A8A;
  background: var(--paper);
  border-color: #E5C9C9;
}

/* Avance, en clay: la acción principal de cada modal y de cada paso del asistente. Un solo
   botón por pantalla; en las ventanas se marca en su ronda de revisión. */
.form-dialog .dialog-actions .primary-button,
.step-surface .step-actions .primary-button,
.step-surface .guided-result-actions .primary-button,
.step-surface .guided-edit-area .dialog-actions .primary-button {
  color: var(--on-clay);
  background: var(--clay);
  border-color: var(--clay);
}

.form-dialog .dialog-actions .primary-button:hover,
.step-surface .step-actions .primary-button:hover,
.step-surface .guided-result-actions .primary-button:hover,
.step-surface .guided-edit-area .dialog-actions .primary-button:hover {
  color: var(--on-clay);
  background: var(--clay-hover);
  border-color: var(--clay-hover);
}

.form-dialog .dialog-actions .primary-button:disabled,
.step-surface .step-actions .primary-button:disabled,
.step-surface .guided-result-actions .primary-button:disabled,
.step-surface .guided-edit-area .dialog-actions .primary-button:disabled {
  color: #A79086;
  background: #EADFD9;
  border-color: #EADFD9;
}

.form-dialog .dialog-actions .secondary-button,
.form-dialog .dialog-actions .tertiary-button,
.step-surface .step-actions .secondary-button,
.step-surface .step-actions .tertiary-button,
.step-surface .guided-result-actions .secondary-button,
.step-surface .guided-edit-area .dialog-actions .secondary-button,
.step-surface .guided-edit-area .dialog-actions .tertiary-button {
  min-width: 0;
  color: var(--blue-700);
  background: var(--paper);
  border: 0.5px solid var(--line-strong);
}

.form-dialog .dialog-actions .secondary-button:hover,
.form-dialog .dialog-actions .tertiary-button:hover,
.step-surface .step-actions .secondary-button:hover,
.step-surface .step-actions .tertiary-button:hover,
.step-surface .guided-result-actions .secondary-button:hover,
.step-surface .guided-edit-area .dialog-actions .secondary-button:hover,
.step-surface .guided-edit-area .dialog-actions .tertiary-button:hover {
  color: var(--blue-700);
  background: var(--blue-050);
  border-color: var(--line-strong);
  text-decoration: none;
}

.form-dialog .dialog-actions .primary-button,
.form-dialog .dialog-actions .secondary-button,
.form-dialog .dialog-actions .danger-button,
.step-surface .step-actions .primary-button,
.step-surface .step-actions .secondary-button,
.step-surface .step-actions .tertiary-button,
.step-surface .guided-result-actions .inline-button,
.step-surface .guided-edit-area .dialog-actions .primary-button,
.step-surface .guided-edit-area .dialog-actions .secondary-button,
.step-surface .guided-edit-area .dialog-actions .tertiary-button {
  min-width: 0;
  min-height: 36px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 500;
}

/* Botones sobre la barra azul. */
.topbar-return,
.context-banner .secondary-button {
  min-height: 30px;
  padding: 0 12px;
  color: var(--blue-100);
  background: transparent;
  border: 0.5px solid var(--blue-400);
  border-radius: var(--radius-control);
  font-size: 12px;
  font-weight: 500;
}

.topbar-return:hover,
.context-banner .secondary-button:hover {
  color: #FFFFFF;
  background: var(--blue-600);
  border-color: var(--blue-400);
}

/* ── 05 · Estados, avisos, vacío y carga (§6.3, §6.10) ─────────────────────────────────────── */

.status-badge {
  min-height: 22px;
  padding: 0 8px;
  color: var(--success-ink);
  background: var(--success-tint);
  border-radius: var(--radius-control);
  font-size: 11px;
  font-weight: 500;
  line-height: 22px;
}

.status-badge[data-status="suspended"],
.status-badge[data-status="expired"] {
  color: var(--warning-ink);
  background: var(--warning-tint);
}

.status-badge[data-status="cancelled"] {
  color: var(--danger-ink);
  background: var(--danger-tint);
}

.status-badge[data-status="inactive"] {
  color: var(--blue-700);
  background: var(--blue-050);
}

.test-mode-badge {
  color: var(--warning-ink);
  background: var(--warning-tint);
  border-radius: var(--radius-control);
  font-size: 11px;
  font-weight: 500;
}

/* Todo aviso lleva ícono: el color nunca es lo único que dice qué pasa. El ícono se ubica en el
   margen izquierdo para no alterar cómo se ordena lo que el aviso ya contiene. */
.message {
  position: relative;
  padding: 10px 12px 10px 36px;
  border: 0;
  border-radius: var(--radius-control);
  font-size: 13px;
  line-height: 20px;
}

.message::before {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  content: "";
  -webkit-mask: url("/assets/icons/info-circle.svg") center / contain no-repeat;
  mask: url("/assets/icons/info-circle.svg") center / contain no-repeat;
}

.message-error {
  color: var(--danger-ink);
  background: var(--danger-tint);
  border: 0;
}

.message-error::before {
  -webkit-mask-image: url("/assets/icons/alert-circle.svg");
  mask-image: url("/assets/icons/alert-circle.svg");
}

.message-warning {
  color: var(--ink-body);
  background: var(--paper);
  border: 0.5px solid var(--line-strong);
}

.message-warning::before {
  color: var(--warning);
  -webkit-mask-image: url("/assets/icons/alert-triangle.svg");
  mask-image: url("/assets/icons/alert-triangle.svg");
}

.message-success {
  color: var(--success-ink);
  background: var(--success-tint);
  border: 0;
}

.message-success::before {
  -webkit-mask-image: url("/assets/icons/circle-check.svg");
  mask-image: url("/assets/icons/circle-check.svg");
}

.empty-state strong {
  color: var(--ink-title);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

.empty-state p {
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 20px;
}

/* La rueda de carga pasa a barra azul de 3 px, sin brillo. */
.spinner {
  position: relative;
  display: block;
  width: 120px;
  height: 3px;
  overflow: hidden;
  background: var(--blue-050);
  border: 0;
  border-radius: 0;
  animation: none;
}

.spinner::after {
  position: absolute;
  inset: 0 60% 0 0;
  background: var(--blue-600);
  content: "";
}

@media (prefers-reduced-motion: no-preference) {
  .spinner::after {
    animation: azul-papel-progress 1.6s var(--ease) infinite;
  }
}

@keyframes azul-papel-progress {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}

/* ── 06 · Tablas, filas y tarjetas (§6.4, §6.5) ────────────────────────────────────────────── */

/* ── 07 · Barra superior y navegación (§6.6) ───────────────────────────────────────────────── */

.site-header,
body.user-mode .site-header {
  min-height: 40px;
  color: #FFFFFF;
  background: var(--surface-institutional);
  border-bottom: 0.5px solid var(--blue-900);
}

.brand,
.brand strong {
  color: #FFFFFF;
}

/* La marca en versalitas de 11 px, seguida del punto clay (decisión 4 de la lámina). */
.site-header .brand strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.site-header .brand strong::after {
  width: 5px;
  height: 5px;
  background: var(--clay);
  border-radius: 50%;
  content: "";
}

.global-navigation a,
.global-navigation button,
body.user-mode .global-navigation a,
body.user-mode .global-navigation button {
  min-height: 40px;
  padding: 0 10px;
  color: var(--blue-300);
  background: transparent;
  border: 0;
  border-bottom: 0;
  box-shadow: inset 0 -2px 0 transparent;
  font-size: 12px;
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.global-navigation a:hover,
.global-navigation button:hover,
body.user-mode .global-navigation a:hover,
body.user-mode .global-navigation button:hover {
  color: #FFFFFF;
  background: transparent;
  box-shadow: inset 0 -2px 0 transparent;
}

/* El destino activo: blanco con subrayado blanco de 2 px. El clay no marca navegación. */
.global-navigation a.is-active,
.global-navigation button.is-active,
body.user-mode .global-navigation a.is-active,
body.user-mode .global-navigation button.is-active {
  color: #FFFFFF;
  background: transparent;
  box-shadow: inset 0 -2px 0 #FFFFFF;
}

.global-navigation .navigation-group-toggle::after {
  opacity: 0.8;
}

.navigation-menu {
  padding: 4px;
  background: var(--surface-context);
  border: 0.5px solid var(--blue-400);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  box-shadow: none;
}

.global-navigation .navigation-menu a,
body.user-mode .global-navigation .navigation-menu a {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 6px;
  box-shadow: none;
}

.global-navigation .navigation-menu a:hover,
.global-navigation .navigation-menu a.is-active,
body.user-mode .global-navigation .navigation-menu a:hover,
body.user-mode .global-navigation .navigation-menu a.is-active {
  color: #FFFFFF;
  background: var(--blue-600);
  box-shadow: none;
}

/* El modo es un botón que abre dos opciones, no un `<select>`: elegir exige un clic o Enter
   sobre la opción, y ninguna flecha cambia la interfaz por accidente (WCAG 3.2.2). Se ve igual
   que el selector que reemplaza: figura, nombre del modo y triángulo. */
.mode-switch {
  position: relative;
  min-height: 26px;
  padding: 0;
  color: var(--blue-100);
  border: 0.5px solid var(--blue-400);
  border-radius: 6px;
}

.mode-switch::before {
  display: none;
  content: none;
}

.mode-switch:hover,
.mode-switch:has(.mode-switch-toggle:focus-visible, .mode-switch-toggle[aria-expanded="true"]) {
  color: #FFFFFF;
  background: var(--blue-600);
}

.mode-switch-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 22px 0 8px;
  color: inherit;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23C3D3E6' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 6px;
  border: 0;
  border-radius: 6px;
  font-family: var(--font-system);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.mode-switch-toggle::before {
  width: 14px;
  height: 14px;
  background-color: currentColor;
  content: "";
  -webkit-mask: url("/assets/icons/route.svg") center / contain no-repeat;
  mask: url("/assets/icons/route.svg") center / contain no-repeat;
}

/* El área de toque llega a 44 px de alto sin cambiar lo que se ve (WCAG 2.5.5). */
.mode-switch-toggle::after,
.account-button::after {
  position: absolute;
  inset: -9px 0;
  content: "";
}

.account-button::after {
  inset: -10px;
}

.mode-switch-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-width: 168px;
  padding: 4px;
  background: var(--surface-context);
  border: 0.5px solid var(--blue-400);
  border-radius: var(--radius-card);
}

.mode-switch-menu[hidden] {
  display: none;
}

.mode-switch-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  color: var(--blue-100);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-family: var(--font-system);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.mode-switch-menu button:hover {
  color: #FFFFFF;
  background: var(--blue-600);
}

/* El modo vigente se marca con un visto, además del color. */
.mode-switch-menu button::before {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  content: "";
}

.mode-switch-menu button[aria-current="true"] {
  color: #FFFFFF;
}

.mode-switch-menu button[aria-current="true"]::before {
  background-color: currentColor;
  -webkit-mask: url("/assets/icons/check.svg") center / contain no-repeat;
  mask: url("/assets/icons/check.svg") center / contain no-repeat;
}

.account-button {
  position: relative;
  width: 24px;
  height: 24px;
  min-height: 24px;
  color: var(--blue-100);
  background: var(--blue-600);
  border: 0;
  border-radius: 4px;
  font-size: 16px;
}

.account-button:hover {
  color: #FFFFFF;
  background: var(--blue-500);
  border: 0;
}

.environment-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  color: var(--blue-100);
  background: var(--blue-800);
  border: 0.5px solid var(--blue-400);
  border-radius: var(--radius-control);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
}

/* ── 08 · Modal base (§6.8) ────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .form-dialog[open] {
    animation: azul-papel-modal-in var(--dur-slow) var(--ease);
  }
}

@keyframes azul-papel-modal-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* El velo es azul, no negro. */
.form-dialog::backdrop,
.step-surface {
  background: rgb(11 37 69 / 55%);
  backdrop-filter: none;
}

/* Cabecera azul con rótulo y título: se lee como decisión del sistema aunque el cuerpo sea
   papel. Desaparece la matriz de puntos. Sus medidas viven en la capa, al final de la hoja. */
.form-dialog .dialog-heading {
  color: #FFFFFF;
  background: var(--surface-context);
}

.form-dialog .dialog-heading > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}

.form-dialog .dialog-heading > div::before {
  display: none;
  content: none;
}

/* Decisión 2 de la lámina: el rótulo que cada modal ya tiene escrito se muestra. */
.form-dialog .dialog-heading .eyebrow {
  display: block;
  margin: 0;
  color: var(--blue-300);
}

.form-dialog .dialog-heading h2 {
  grid-column: auto;
  color: #FFFFFF;
  font-family: var(--font-system);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.1px;
}

/* La equis se dibuja con el ícono lineal; el carácter sigue en el botón para quien no ve. */
.form-dialog .dialog-close {
  position: relative;
  width: 28px;
  height: 28px;
  margin: -2px -6px 0 0;
  color: var(--blue-100);
  border-radius: 6px;
  font-size: 0;
}

.form-dialog .dialog-close::before {
  position: absolute;
  inset: 5px;
  background-color: currentColor;
  content: "";
  -webkit-mask: url("/assets/icons/x.svg") center / contain no-repeat;
  mask: url("/assets/icons/x.svg") center / contain no-repeat;
}

.form-dialog .dialog-close:hover {
  color: #FFFFFF;
  background: var(--blue-600);
}

.form-dialog .dialog-copy {
  color: var(--ink-body);
  font-size: 13px;
  line-height: 20px;
}

/* El paso del asistente es el mismo modal: cabecera azul 700, cuerpo papel. */
.step-modal-bar {
  min-height: 0;
  padding: 16px 20px;
  color: #FFFFFF;
  background: var(--surface-context);
}

.step-modal-bar strong {
  font-family: var(--font-system);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

.step-modal-bar .step-progress-chip {
  min-height: 22px;
  align-items: center;
  padding: 0 8px;
  color: var(--blue-100);
  background: var(--blue-800);
  border-radius: var(--radius-control);
  font-size: 11px;
  font-weight: 500;
}

/* ── Íconos lineales (§7): Tabler Icons con trazo 1,5 en lugar de la tipografía iconsMind ─── */

[class^="imind-"]::before,
[class*=" imind-"]::before {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  content: "";
  -webkit-mask: var(--azul-papel-icon) center / contain no-repeat;
  mask: var(--azul-papel-icon) center / contain no-repeat;
}

.imind-proyecto { --azul-papel-icon: url("/assets/icons/clipboard-text.svg"); }
.imind-documento { --azul-papel-icon: url("/assets/icons/file-text.svg"); }
.imind-informe { --azul-papel-icon: url("/assets/icons/report.svg"); }
.imind-manual { --azul-papel-icon: url("/assets/icons/book.svg"); }
.imind-carpeta { --azul-papel-icon: url("/assets/icons/folder.svg"); }
.imind-lista { --azul-papel-icon: url("/assets/icons/list-check.svg"); }
.imind-calendario { --azul-papel-icon: url("/assets/icons/calendar.svg"); }
.imind-barras { --azul-papel-icon: url("/assets/icons/chart-bar.svg"); }
.imind-tendencia { --azul-papel-icon: url("/assets/icons/trending-up.svg"); }
.imind-calculo { --azul-papel-icon: url("/assets/icons/calculator.svg"); }
.imind-indicadores { --azul-papel-icon: url("/assets/icons/gauge.svg"); }
.imind-datos { --azul-papel-icon: url("/assets/icons/database.svg"); }
.imind-mapa { --azul-papel-icon: url("/assets/icons/map.svg"); }
.imind-ubicacion { --azul-papel-icon: url("/assets/icons/map-pin.svg"); }
.imind-territorio { --azul-papel-icon: url("/assets/icons/map-2.svg"); }
.imind-ambiente { --azul-papel-icon: url("/assets/icons/leaf.svg"); }
.imind-vivienda { --azul-papel-icon: url("/assets/icons/home.svg"); }
.imind-institucion { --azul-papel-icon: url("/assets/icons/building.svg"); }
.imind-patrimonio { --azul-papel-icon: url("/assets/icons/building-monument.svg"); }
.imind-normativa { --azul-papel-icon: url("/assets/icons/scale.svg"); }
.imind-seguridad { --azul-papel-icon: url("/assets/icons/shield-check.svg"); }
.imind-personas { --azul-papel-icon: url("/assets/icons/users.svg"); }
.imind-proceso { --azul-papel-icon: url("/assets/icons/route.svg"); }
.imind-objetivo { --azul-papel-icon: url("/assets/icons/target.svg"); }
.imind-idea { --azul-papel-icon: url("/assets/icons/bulb.svg"); }
.imind-analisis { --azul-papel-icon: url("/assets/icons/report-analytics.svg"); }
.imind-ciencia { --azul-papel-icon: url("/assets/icons/flask.svg"); }
.imind-impulso { --azul-papel-icon: url("/assets/icons/rocket.svg"); }
.imind-destacado { --azul-papel-icon: url("/assets/icons/star.svg"); }
.imind-redaccion { --azul-papel-icon: url("/assets/icons/writing.svg"); }

/* La cuenta es una persona, no un grupo. */
.account-button .imind-personas { --azul-papel-icon: url("/assets/icons/user.svg"); }

.accent-swatch {
  border-radius: var(--radius-control);
  box-shadow: inset 0 0 0 0.5px rgb(10 28 51 / 18%);
}

.accent-swatch:hover {
  transform: none;
}

.accent-swatch[aria-checked="true"] {
  border-color: var(--blue-600);
  box-shadow: inset 0 0 0 2px #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
  .form-dialog[open],
  .spinner::after {
    animation: none;
  }

  .primary-button,
  .secondary-button,
  .tertiary-button,
  .danger-button,
  .mini-button,
  .inline-button,
  input,
  select,
  textarea,
  .global-navigation a,
  .global-navigation button {
    transition: none;
  }
}

/* ── 09 · Movimiento (§8) ──────────────────────────────────────────────────────────────────────
   Solo lo que responde a una acción de la persona, con los tokens de §8 y nada fuera de
   `no-preference`. Todo mueve `opacity` y `transform`, que no recalculan la página. Lo que entra
   usa `@starting-style`: en un navegador sin soporte aparece como antes, sin transición.

   Una salida se hace más rápida que su entrada: quien cierra ya decidió y no debe esperar. */

@media (prefers-reduced-motion: no-preference) {
  /* Tarjeta del paso. La tarjeta ya entraba, pero con la animación heredada (`ease-out` y
     escala), y el velo aparecía y desaparecía de golpe. Ahora la tarjeta entra igual que un
     modal de la identidad —es el mismo modal— y el velo la acompaña en los dos sentidos. La
     salida dura --dur-base y cabe dentro de la espera de 220 ms de `playAdvance`, que oculta la
     superficie al terminar. */
  .step-surface {
    transition: opacity var(--dur-base) var(--ease);
  }

  .step-surface .step-surface-inner {
    animation: azul-papel-modal-in var(--dur-slow) var(--ease);
    transition:
      opacity var(--dur-slow) var(--ease),
      transform var(--dur-slow) var(--ease);
  }

  .step-surface.is-leaving {
    opacity: 0;
  }

  .step-surface.is-leaving .step-surface-inner {
    transition-duration: var(--dur-base);
  }

  @starting-style {
    .step-surface {
      opacity: 0;
    }
  }

  /* Modales: el velo se funde al abrir en lugar de caer de golpe. */
  .form-dialog[open]::backdrop {
    transition: opacity var(--dur-base) var(--ease);
  }

  @starting-style {
    .form-dialog[open]::backdrop {
      opacity: 0;
    }
  }

  /* Y se cierran por donde entraron. Sin `overlay` el diálogo abandona la capa superior en el
     mismo instante en que se cierra y la salida se pintaría fuera de lugar; esos navegadores
     conservan el cierre instantáneo. Al ser solo CSS, cubre `close()`, Esc y `method="dialog"`. */
  @supports (overlay: auto) {
    .form-dialog,
    .form-dialog::backdrop {
      transition:
        opacity var(--dur-fast) var(--ease),
        transform var(--dur-fast) var(--ease),
        overlay var(--dur-fast) allow-discrete,
        display var(--dur-fast) allow-discrete;
    }

    /* La hoja heredada anima `.form-dialog` abierto o cerrado. Antes no se notaba porque un
       diálogo cerrado desaparecía en el acto; ahora sigue pintado mientras sale, y esa
       entrada volvería a correr encima de la salida. */
    .form-dialog:not([open]) {
      opacity: 0;
      transform: translateY(4px);
      animation: none;
    }

    .form-dialog:not([open])::backdrop {
      opacity: 0;
    }
  }

  /* Pasos de los asistentes dentro de un modal: el panel nuevo llega desde el lado hacia el que
     se avanza. `data-step-entry` lo pone el JavaScript solo con el modal ya abierto, porque al
     abrir la ventana ya tiene su propia entrada. El formulario recorta el eje horizontal para
     que el desplazamiento no asome una barra por un instante. */
  .project-wizard-dialog > form,
  .org-wizard > form {
    overflow-x: hidden;
  }

  [data-step-entry] {
    transition:
      opacity var(--dur-base) var(--ease),
      transform var(--dur-base) var(--ease);
  }

  @starting-style {
    [data-step-entry="forward"] {
      opacity: 0;
      transform: translateX(12px);
    }

    [data-step-entry="back"] {
      opacity: 0;
      transform: translateX(-12px);
    }
  }

  /* Acoplado de trabajo al pie de la hoja: aparece subiendo y su marca cambia de tono sin salto.
     Dentro de la barra del paso (`is-step-compact`) no entra: ahí solo se reubica, y cada
     traslado en el DOM dispararía la entrada otra vez. Al volver al pie sí entra, porque para
     el ojo es un lugar nuevo. */
  .project-dock:not(.is-step-compact) {
    transition:
      opacity var(--dur-base) var(--ease),
      transform var(--dur-base) var(--ease);
  }

  @starting-style {
    .project-dock:not(.is-step-compact) {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .dock-mark {
    transition:
      background-color var(--dur-base) var(--ease),
      border-color var(--dur-base) var(--ease);
  }

  /* Cierre del asistente. Pasa una vez por proyecto: es el único lugar con un tiempo de más.
     La clase la pone el JavaScript solo cuando el proyecto termina a la vista, no al abrir uno
     que ya estaba terminado. */
  .completion-actions.is-arriving {
    animation: azul-papel-arrive var(--dur-slow) var(--ease) both;
  }

  .completion-actions.is-arriving .download-actions {
    animation: azul-papel-arrive var(--dur-slow) var(--ease) 60ms both;
  }

  /* La excepción de §8: la cifra que el motor estadístico recalculó pasa de clay tint a su fondo
     en 180 ms. Muestra qué cambió sin pedir atención. */
  .is-recalculated {
    animation: azul-papel-recalculated var(--dur-base) var(--ease);
  }
}

@keyframes azul-papel-arrive {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes azul-papel-recalculated {
  from {
    background-color: var(--clay-tint);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   3. Ventanas
   Reglas propias de cada pantalla, en el orden en que se revisaron.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Regla general · Cabecera de sección ──────────────────────────────────────────────────────
   Decisión de la dirección (ventana 3): toda sección abre con una franja azul 700 de borde a
   borde, con rótulo, título y bajada, y su acción principal en clay. El área de trabajo se apoya
   en la mesa. */

.admin-shell,
.admin-workspace {
  background: var(--surface-desk);
}

.workspace-header {
  position: relative;
  align-items: flex-end;
  margin: 0 0 24px;
  padding: 24px 0;
  color: #FFFFFF;
  background: var(--surface-context);
  box-shadow: 0 0 0 100vmax var(--surface-context);
  clip-path: inset(0 -100vmax);
}

/* Cuando la sección es lo primero del área de trabajo, la franja queda pegada a la barra. */
.admin-workspace:has(> section:not([hidden]) > .workspace-header:first-child):not(:has(> .admin-message:not([hidden]))) {
  padding-top: 0;
}

.workspace-header .eyebrow {
  margin: 0 0 6px;
  color: var(--blue-300);
}

.workspace-header h1 {
  max-width: none;
  color: #FFFFFF;
  font-family: var(--font-system);
  font-size: 28px;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: -0.4px;
}

.workspace-header > div > p:last-child,
.workspace-header > div > p:not(.eyebrow) {
  margin: 4px 0 0;
  color: var(--blue-100);
  font-size: 14px;
  line-height: 22px;
}

.workspace-header .primary-button {
  min-height: 36px;
  margin: 0;
  padding: 0 16px;
  gap: 8px;
  color: var(--on-clay);
  background: var(--clay);
  border-color: var(--clay);
}

.workspace-header .primary-button:hover {
  color: var(--on-clay);
  background: var(--clay-hover);
  border-color: var(--clay-hover);
}

.workspace-header .primary-button:disabled {
  color: #7089A6;
  background: var(--blue-400);
  border-color: var(--blue-400);
}

/* Sobre azul, lo secundario es borde fino y letra azul 100; el texto es blanco suave. */
.workspace-header .secondary-button,
.workspace-header .tertiary-button {
  min-height: 36px;
  color: var(--blue-100);
  background: transparent;
  border: 0.5px solid var(--blue-400);
}

.workspace-header .secondary-button:hover,
.workspace-header .tertiary-button:hover {
  color: #FFFFFF;
  background: var(--blue-600);
  border-color: var(--blue-400);
}

.workspace-header .text-button,
.workspace-header .back-button {
  color: var(--blue-100);
}

.workspace-header .text-button:hover,
.workspace-header .back-button:hover {
  color: #FFFFFF;
}

.workspace-header .status-badge {
  color: var(--blue-100);
  background: var(--blue-800);
  box-shadow: inset 0 0 0 0.5px var(--blue-400);
}

@media (width <= 900px) {
  .workspace-header {
    align-items: flex-start;
  }
}

/* ── Ventana 1 · Ingreso ───────────────────────────────────────────────────────────────────────
   El azul envuelve y el papel contiene: barra y pie en azul 800, la franja de ingreso en azul 700
   y la tarjeta de acceso como única hoja blanca. Sin degradado. */

.page-shell {
  min-height: calc(100vh - 84px);
  padding: 64px max(24px, calc((100vw - 1120px) / 2));
  background: var(--surface-context);
}

.intro-panel .eyebrow {
  margin: 0 0 12px;
  color: var(--blue-300);
}

.intro-panel h1 {
  max-width: 20ch;
  color: #FFFFFF;
  font-family: var(--font-system);
  font-size: 28px;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: -0.4px;
}

.intro-panel .intro-copy {
  max-width: 44ch;
  margin: 16px 0 0;
  color: var(--blue-100);
  font-size: 14px;
  line-height: 22px;
}

.trust-list {
  gap: 10px;
  margin: 28px 0 0;
  font-size: 13px;
  line-height: 20px;
}

.intro-panel .trust-list li {
  gap: 10px;
  color: var(--blue-100);
}

.trust-list span {
  width: 20px;
  height: 20px;
  color: var(--blue-300);
  background: transparent;
  border: 0.5px solid var(--blue-400);
  border-radius: 4px;
  font-size: 11px;
}

.access-card {
  min-height: 0;
  padding: 32px;
  background: var(--paper);
  border: 0;
  border-radius: var(--radius-window);
  box-shadow: none;
}

#loading-view {
  min-height: 320px;
  gap: 12px;
  color: var(--ink-muted);
  font-size: 13px;
}

.card-heading .eyebrow {
  margin: 0 0 8px;
}

.card-heading h2 {
  color: var(--ink-title);
  font-family: var(--font-system);
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.3px;
}

.card-heading > p:last-child {
  margin: 6px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 20px;
}

.access-card form {
  gap: 16px;
  margin-top: 24px;
}

/* «Ingresar» y «Guardar y continuar» son la única acción de la pantalla y hacen avanzar:
   van en clay, a 44 px, a lo ancho de la tarjeta. */
#login-button,
#password-change-button {
  justify-content: space-between;
  min-height: 44px;
  margin-top: 4px;
  padding: 0 20px;
  color: var(--on-clay);
  background: var(--clay);
  border: 0.5px solid var(--clay);
  font-size: 14px;
}

#login-button:hover,
#password-change-button:hover {
  color: var(--on-clay);
  background: var(--clay-hover);
  border-color: var(--clay-hover);
}

#login-button:disabled,
#password-change-button:disabled {
  color: #A79086;
  background: #EADFD9;
  border-color: #EADFD9;
}

.password-expiry {
  position: relative;
  margin: 16px 0 0;
  padding: 10px 12px 10px 36px;
  color: var(--ink-body);
  background: var(--blue-050);
  border: 0;
  border-radius: var(--radius-control);
  font-size: 13px;
  line-height: 20px;
}

.password-expiry::before {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 16px;
  height: 16px;
  background-color: var(--blue-600);
  content: "";
  -webkit-mask: url("/assets/icons/info-circle.svg") center / contain no-repeat;
  mask: url("/assets/icons/info-circle.svg") center / contain no-repeat;
}

.password-expiry:empty {
  display: none;
}

.password-change-logout {
  font-size: 13px;
}

.session-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  color: var(--success-ink);
  background: var(--success-tint);
  border-radius: var(--radius-control);
  font-size: 16px;
}

.identity-card {
  margin: 24px 0 0;
  background: #F7F9FB;
  border: 0.5px solid var(--line);
  border-radius: var(--radius-card);
}

.identity-card div {
  padding: 10px 14px;
}

.identity-card div + div {
  border-top: 0.5px solid var(--line);
}

.identity-card dt {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 400;
}

.identity-card dd {
  color: var(--ink-body);
  font-size: 13px;
}

.support-reference {
  margin: 16px 0 0;
  color: var(--ink-muted);
  font-family: var(--font-tech);
  font-size: 11px;
  line-height: 16px;
}

/* Pie institucional, nivel 0: 44 px, texto en azul 300. */
#site-footer {
  width: 100%;
  min-height: 44px;
  align-items: center;
  margin: 0;
  padding: 0 max(24px, calc((100vw - 1120px) / 2));
  color: var(--blue-300);
  background: var(--surface-institutional);
  border-top: 0.5px solid var(--blue-900);
  font-size: 12px;
}

@media (max-width: 900px) {
  .page-shell {
    padding: 32px 16px;
  }

  .access-card {
    padding: 24px 20px;
  }
}

/* ── Ventana 2 · Inicio de la administración del sistema ─────────────────────────────────────
   El estado general es contexto del sistema: cabecera y cifras viven en una franja azul 700 que
   llega de borde a borde. Debajo, sobre la mesa, las tres hojas de trabajo. */

/* Las cifras continúan la franja de la cabecera. */
#system-home-view > .home-metrics {
  position: relative;
  gap: 12px;
  margin: 0;
  padding: 0 0 28px;
  background: var(--surface-context);
  box-shadow: 0 0 0 100vmax var(--surface-context);
  clip-path: inset(0 -100vmax);
}

#system-home-view > .workspace-header:has(+ .home-metrics) {
  margin-bottom: 0;
  padding-bottom: 20px;
}

/* Tarjeta de métrica sobre azul (§6.4): superficie elevada, sin borde, cifra de 22 px. */
.home-metric {
  padding: 14px 16px;
  background: var(--surface-context-raised);
  border: 0;
  border-radius: var(--radius-card);
}

.home-metric .metric-number {
  color: #FFFFFF;
  font-family: var(--font-system);
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.3px;
}

.home-metric .metric-label {
  margin: 2px 0 0;
  color: var(--blue-200);
  font-size: 12px;
  line-height: 18px;
}

.home-metric .metric-detail {
  margin: 10px 0 0;
  padding-top: 8px;
  color: var(--blue-200);
  border-top: 0.5px solid var(--blue-400);
  font-size: 12px;
  line-height: 18px;
}

/* Una cifra que exige acción se distingue por su filete y su texto, no solo por el color. */
.home-metric.is-alert {
  background: var(--surface-context-raised);
  box-shadow: inset 0 0 0 0.5px #E5C9C9;
}

.home-metric.is-alert .metric-number,
.home-metric.is-alert .metric-detail {
  color: #F2CFCF;
}

.home-columns {
  gap: 16px;
  margin-top: 24px;
}

#system-home-view > .data-panel {
  margin-top: 16px;
}

.panel-heading {
  align-items: center;
  padding: 16px 20px;
}

.panel-heading h2 {
  color: var(--ink-title);
  font-size: 16px;
  line-height: 22px;
}

.panel-heading p {
  margin: 2px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 18px;
}

#home-attention-count {
  color: var(--blue-700);
  background: var(--blue-050);
}

/* Filas de atención: filete de severidad de 2 px y radio 0, acción secundaria pequeña. */
.home-attention-item {
  grid-template-columns: 2px minmax(0, 1fr) 4.5rem 5.75rem;
  gap: 14px;
  min-height: 56px;
  padding: 10px 20px 10px 0;
  border-bottom: 0.5px solid var(--line);
}

.home-attention-item:hover {
  background: #F7F9FB;
}

.severity-bar {
  width: 2px;
  height: 36px;
  border-radius: 0;
}

.severity-bar[data-severity="error"] { background: var(--danger); }
.severity-bar[data-severity="warning"] { background: var(--warning); }
.severity-bar[data-severity="info"] { background: var(--blue-500); }

.home-attention-item .copy strong {
  color: var(--ink-title);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.home-attention-item .copy small {
  margin-top: 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 18px;
}

.home-attention-item .when {
  color: var(--ink-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.home-attention-item .inline-button,
.home-attention-item .primary-button.inline-button {
  min-height: 30px;
  padding: 0 12px;
  color: var(--blue-700);
  background: var(--paper);
  border: 0.5px solid var(--line-strong);
  font-size: 12px;
}

.home-attention-item .inline-button:hover,
.home-attention-item .primary-button.inline-button:hover {
  color: var(--blue-700);
  background: var(--blue-050);
  border-color: var(--line-strong);
}

.home-activity-item {
  gap: 12px;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 0.5px solid var(--line);
}

/* Iniciales como avatar de la guía: 24 px, radio 4. */
.home-activity-item .who {
  width: 24px;
  height: 24px;
  color: var(--blue-700);
  background: var(--blue-050);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
}

.home-activity-item p {
  color: var(--ink-body);
  font-size: 13px;
  line-height: 20px;
}

.home-activity-item small {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 18px;
}

.home-adoption th {
  padding: 10px 20px;
  color: var(--ink-muted);
  background: transparent;
  border-bottom: 0.5px solid var(--line);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.home-adoption td {
  height: 48px;
  padding: 6px 20px;
  color: var(--ink-body);
  border-bottom: 0.5px solid var(--line);
  font-size: 13px;
}

.home-adoption td:first-child {
  color: var(--ink-title);
}

.home-adoption td:last-child,
.home-adoption th:last-child {
  text-align: right;
}

/* Las versiones son identificadores: van en la letra técnica. */
.version-chip {
  padding: 0 6px;
  color: var(--blue-700);
  background: var(--blue-050);
  border: 0;
  border-radius: 6px;
  font-family: var(--font-tech);
  font-size: 11px;
  font-weight: 400;
  line-height: 20px;
}

/* ── Inicio administrativo · ciclo de vida de asistentes ─────────────────────────────────────
   Reutiliza la composición de Inicio de Trabajos: una franja de contexto, cifras discretas y
   tarjetas de dos planos. Aquí las tarjetas no representan asistentes individuales, sino las
   cuatro puertas de entrada que necesita quien los administra. */
#system-home-view {
  width: 100%;
}

.system-home-hero {
  padding: 34px max(24px, calc((100vw - 1120px) / 2)) 31px;
  color: #FFFFFF;
  background: var(--surface-context);
}

.system-home-hero-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: end;
  max-width: 1120px;
  margin: 0 auto;
}

.system-home-hero .eyebrow {
  margin: 0 0 5px;
  color: var(--blue-200);
}

.system-home-hero h1 {
  margin: 0;
  color: #FFFFFF;
  font-family: var(--font-system);
  font-size: 28px;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: -0.4px;
}

.system-home-hero > .system-home-hero-content > div > p:last-child {
  max-width: 620px;
  margin: 8px 0 0;
  color: #E7EFF8;
  font-size: 15px;
  line-height: 22px;
}

.system-home-direct-note {
  display: grid;
  gap: 2px;
  max-width: 240px;
  padding: 12px 14px;
  color: #E7EFF8;
  background: rgb(11 37 69 / 28%);
  border-left: 2px solid var(--clay);
  font-size: 12px;
  line-height: 18px;
}

.system-home-direct-note strong {
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
}

.system-home-figures {
  display: flex;
  gap: 28px;
}

.system-home-figures p {
  min-width: 84px;
  margin: 0;
  padding-left: 13px;
  border-left: 0.5px solid rgb(255 255 255 / 25%);
}

.system-home-figures strong {
  display: block;
  color: #FFFFFF;
  font-family: var(--font-doc);
  font-size: 29px;
  font-weight: 500;
  line-height: 29px;
}

.system-home-figures span {
  display: block;
  margin-top: 5px;
  color: var(--blue-200);
  font-size: 11px;
  line-height: 14px;
}

.system-home-content {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 30px 0 46px;
}

.system-home-heading {
  display: flex;
  gap: 16px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 15px;
}

.system-home-heading h2 {
  margin: 0;
  color: var(--ink-title);
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
}

.system-home-heading p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 20px;
}

.system-home-count {
  color: var(--ink-muted);
  font-family: var(--font-tech);
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
}

.assistant-home-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.assistant-home-direct-card {
  display: flex;
  flex-direction: column;
  min-height: 237px;
  overflow: hidden;
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-card);
}

.assistant-home-direct-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 75px;
  padding: 14px 15px;
  color: var(--card-ink);
  background: var(--card-tone);
}

.assistant-home-direct-icon {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  background: rgb(255 255 255 / 42%);
  border: 0.5px solid rgb(19 49 92 / 16%);
  border-radius: 50%;
  font-size: 16px;
}

.assistant-home-direct-version,
.assistant-home-direct-meta {
  color: var(--ink-muted);
  font-family: var(--font-tech);
  font-size: 11px;
  line-height: 18px;
}

.assistant-home-direct-head .assistant-home-direct-version {
  color: inherit;
}

.assistant-home-direct-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 14px 15px 0;
}

.assistant-home-direct-kind {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.assistant-home-direct-body h3 {
  margin: 5px 0 4px;
  color: var(--ink-title);
  font-size: 17px;
  font-weight: 500;
  line-height: 22px;
}

.assistant-home-direct-body p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 19px;
}

.assistant-home-direct-meta {
  margin-top: auto;
  padding-top: 9px;
}

.assistant-home-direct-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 15px;
}

.assistant-home-direct-actions .inline-button {
  justify-content: center;
  min-height: 36px;
  margin: 0;
  padding: 0 9px;
  font-size: 13px;
}

.assistant-home-direct-actions .secondary-button {
  color: var(--blue-600);
  background: var(--paper);
  border: 0.5px solid var(--line-strong);
}

.assistant-home-direct-actions .secondary-button:hover {
  color: var(--blue-700);
  background: var(--blue-050);
}

.assistant-home-drafts {
  margin-top: 31px;
  padding-top: 24px;
  border-top: 0.5px solid var(--line);
}

.assistant-home-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.assistant-home-card {
  display: flex;
  flex-direction: column;
  min-height: 294px;
  padding: 0;
  overflow: hidden;
  color: var(--ink-body);
  text-align: left;
  background: var(--paper);
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: 0 0 0 0.5px var(--line);
  font-family: var(--font-system);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}

.assistant-home-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgb(11 37 69 / 14%);
}


.assistant-home-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 93px;
  padding: 17px 17px 14px;
  color: var(--assistant-home-ink);
  background: var(--assistant-home-tone);
  font-family: var(--font-tech);
  font-size: 12px;
  line-height: 20px;
}

.assistant-home-card-symbol {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: rgb(255 255 255 / 42%);
  border: 0.5px solid rgb(19 49 92 / 16%);
  border-radius: 50%;
  font-family: var(--font-system);
  font-size: 19px;
}

.assistant-home-card.is-live {
  --assistant-home-tone: var(--blue-100);
  --assistant-home-ink: var(--blue-700);
}

.assistant-home-card.is-draft {
  --assistant-home-tone: var(--clay-tint);
  --assistant-home-ink: var(--clay-ink);
}

.assistant-home-card.is-test-live {
  --assistant-home-tone: var(--blue-200);
  --assistant-home-ink: var(--blue-700);
}

.assistant-home-card.is-test-draft {
  --assistant-home-tone: var(--success-tint);
  --assistant-home-ink: var(--success-ink);
}

.assistant-home-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 17px;
}

.assistant-home-card-kind {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.assistant-home-card-body > strong {
  margin: 7px 0 6px;
  color: var(--ink-title);
  font-size: 17px;
  font-weight: 500;
  line-height: 22px;
}

.assistant-home-card-body > span:not(.assistant-home-card-kind) {
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 19px;
}

.assistant-home-card-body em {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 16px;
  color: var(--assistant-home-ink);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.assistant-home-card-body em b {
  font-size: 18px;
  font-weight: 400;
}

.assistant-home-create {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 15px;
  align-items: center;
  margin-top: 30px;
  padding: 17px 19px;
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-card);
}

.assistant-home-create > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--blue-700);
  background: var(--blue-100);
  border-radius: 50%;
  font-size: 19px;
}

.assistant-home-create strong {
  color: var(--ink-title);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.assistant-home-create p {
  margin: 2px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 20px;
}

@media (max-width: 1000px) {
  .assistant-home-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assistant-home-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .system-home-hero { padding: 28px 16px; }
  .system-home-hero-content { grid-template-columns: 1fr; gap: 20px; }
  .system-home-content { padding: 24px 16px 36px; }
  .system-home-heading { display: block; }
  .system-home-heading p { margin-top: 4px; }
  .assistant-home-actions { grid-template-columns: 1fr; }
  .assistant-home-list { grid-template-columns: 1fr; }
  .assistant-home-create { grid-template-columns: 42px minmax(0, 1fr); }
  .assistant-home-create .primary-button { grid-column: 1 / -1; width: 100%; justify-content: center; }
}


/* ── Ventana 3 · Crear institución y reparto por asistente ────────────────────────────────────
   Lo que sobrevive de «Organizaciones» y «Frases guiadas» (reemplazadas por la «Mesa de control»
   el 08-10-2026, docs/112): el asistente de tres pasos para crear una institución, el reparto
   por asistente que se abre desde «⋯» y piezas comunes de la administración (tarjetas de cupo,
   filas de registro). */


/* Conmutador Organizaciones / Personas: control secundario sobre azul. */

.console {
  gap: 16px;
}

/* Resumen: medidores de cupo. */

.quota-grid article {
  padding: 14px 16px;
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-card);
}

.quota-grid span {
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 18px;
}

.quota-grid strong {
  margin-top: 2px;
  color: var(--ink-title);
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
}

.quota-grid small[data-tone="exhausted"] {
  color: var(--danger-ink);
  font-weight: 500;
}

/* Filas de contratos y asistentes. */
.record-item {
  min-height: 56px;
  padding: 10px 20px;
  border-bottom: 0.5px solid var(--line);
}

.record-item strong {
  color: var(--ink-title);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

.record-item small {
  margin-top: 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 18px;
}

.member-actions {
  gap: 8px;
}

.member-actions select {
  min-height: 30px;
  padding: 0 28px 0 10px;
  font-size: 12px;
}

.status-badge[data-status="current"] {
  color: var(--success-ink);
  background: var(--success-tint);
}

/* Créditos: el fondo común es un bloque de explicación sobre la mesa, con dos hojas de medida. */
.credit-fund {
  margin-bottom: 16px;
  padding: 20px;
  background: #F7F9FB;
  border: 0.5px solid var(--line);
  border-radius: var(--radius-card);
}

.credit-fund-head h3 {
  color: var(--ink-title);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

.credit-fund-head p {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 20px;
}

.credit-meters {
  gap: 12px;
  margin: 16px 0;
}

.credit-meters article {
  padding: 14px 16px;
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-card);
}

.credit-meter-title {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0;
  text-transform: none;
}

.credit-meters strong {
  margin-top: 2px;
  color: var(--ink-title);
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.3px;
}

.credit-meters article > small {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 18px;
}

/* Tres tramos rectos: usado, reservado y libre, en tres tonos de azul. */
.credit-track {
  height: 6px;
  margin: 12px 0 10px;
  gap: 2px;
  background: transparent;
  border-radius: 0;
}

.credit-seg-used { background: var(--blue-600); }
.credit-seg-held { background: var(--blue-300); }
.credit-seg-free { background: var(--line); }

.credit-legend {
  gap: 14px;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 18px;
}

.credit-legend b {
  color: var(--ink-title);
  font-weight: 500;
}

.credit-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.credit-fund-actions {
  gap: 8px;
}

.credit-source {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 18px;
}

.credit-reserves {
  margin-bottom: 16px;
}

.credit-amount-cell strong {
  color: var(--ink-title);
  font-weight: 500;
}

.credit-amount-cell small {
  margin-top: 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 18px;
}

.credit-advanced {
  padding: 14px 20px;
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-card);
}

.credit-advanced > summary {
  color: var(--blue-600);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.credit-advanced-copy {
  margin: 8px 0 12px;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 20px;
}

/* ── Ventana 3 · Organizaciones · «Frases guiadas» (aprobada el 25-09-2026) ─────────────────────
   Un solo código visual en el directorio, la organización abierta y sus diálogos. Cada color y
   cada forma significan una sola cosa:
   - cuadrado azul = proyecto; círculo violeta = evaluación;
   - lleno = usado; claro = entregado a una persona; vacío = libre para repartir;
   - verde con visto = vigente; ámbar con reloj = vence pronto; gris con candado = detenida;
   - barras de señal = cuánto puede hacer una persona (1 mira … 4 maneja el contrato).
   El violeta es propio de esta ventana: es la segunda moneda y tenía que distinguirse del azul
   también por claridad, no solo por matiz. */

:root {
  --org-projects-tint: #E8EEF6;
}

/* Plazo: verde vigente, ámbar aviso, gris detenida. Siempre con ícono y palabra. */
.org-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px;
  color: var(--blue-700);
  background: var(--blue-050);
  border-radius: var(--radius-control);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
}

.org-chip[data-tone="ok"] { color: var(--success-ink); background: var(--success-tint); }
.org-chip[data-tone="soon"] { color: var(--warning-ink); background: var(--warning-tint); }
.org-chip[data-tone="off"] { color: var(--ink-muted); background: var(--blue-050); }

.org-muted {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 18px;
}

/* ── Diálogos de frase ── */
.form-dialog.org-dialog-wide,
.form-dialog.org-wizard {
  width: min(760px, 96vw);
}

.org-stepper {
  display: inline-flex;
  align-items: stretch;
  height: 48px;
  overflow: hidden;
  background: #F4F7FB;
  border: 1.5px solid var(--blue-600);
  border-radius: var(--radius-card);
}

.org-stepper:focus-within { box-shadow: var(--focus-halo); }

.org-stepper button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  padding: 0;
  color: var(--ink-title);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.org-stepper button:hover { background: var(--blue-050); }

.org-stepper input,
.org-stepper input:focus {
  width: 80px;
  min-height: 0;
  padding: 0;
  color: var(--ink-title);
  text-align: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  -moz-appearance: textfield;
}

.org-stepper input::-webkit-inner-spin-button,
.org-stepper input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* ── Crear organización en tres pasos ── */
.org-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.org-steps li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-muted);
  font-size: 13px;
}

.org-steps li + li::before {
  width: 28px;
  height: 1px;
  background: var(--line-strong);
  content: "";
}

.org-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0.5px solid var(--line-strong);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 500;
}

.org-steps li[data-state="current"] {
  color: var(--ink-title);
  font-weight: 500;
}

.org-steps li[data-state="current"] .org-step-number {
  color: #FFFFFF;
  background: var(--blue-600);
  border-color: var(--blue-600);
}

.org-steps li[data-state="done"] .org-step-number {
  color: #FFFFFF;
  background: var(--success);
  border-color: var(--success);
}

.org-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 0.5px solid var(--line);
}

.org-block-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--ink-title);
  font-size: 15px;
  font-weight: 500;
}

.org-dates,
.org-amount-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.org-dates { align-items: flex-end; }
.org-dates .field-group { margin: 0; }
.org-amount-line .org-muted { flex: 1; min-width: 200px; margin: 0; }

.org-summary {
  margin: 4px 0 0;
  padding: 14px 18px;
  color: var(--ink-title);
  background: var(--org-projects-tint);
  border-radius: var(--radius-window);
  font-size: 15px;
  line-height: 24px;
}

.org-summary:empty { display: none; }

.org-more > summary {
  color: var(--blue-600);
  font-size: 13px;
  cursor: pointer;
}

.org-wizard [data-wizard-step] {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.org-wizard-actions { align-items: center; }
#org-wizard-progress { margin-right: auto; }

/* ── Ventana 3 · Instituciones · Mesa de control (docs/72 §6.3, docs/112) ───────────────────────
   Instituciones, Usuarios de una institución y Administradores del sistema: tablas sobre papel
   con cabecera azul 700 —excepción aprobada a §6.5, solo para estas tablas— y un panel de
   íconos por fila, como en Sigplan. Cada cifra se dice una sola vez: «23 de 35». */

.adm-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--adm-icon) center / contain no-repeat;
  mask: var(--adm-icon) center / contain no-repeat;
}

.adm-icon[data-icon="adjustments-horizontal"] { --adm-icon: url("/assets/icons/adjustments-horizontal.svg"); }
.adm-icon[data-icon="alert-triangle"] { --adm-icon: url("/assets/icons/alert-triangle.svg"); }
.adm-icon[data-icon="apps"] { --adm-icon: url("/assets/icons/apps.svg"); }
.adm-icon[data-icon="arrow-back-up"] { --adm-icon: url("/assets/icons/arrow-back-up.svg"); }
.adm-icon[data-icon="arrow-left"] { --adm-icon: url("/assets/icons/arrow-left.svg"); }
.adm-icon[data-icon="arrow-right"] { --adm-icon: url("/assets/icons/arrow-right.svg"); }
.adm-icon[data-icon="ban"] { --adm-icon: url("/assets/icons/ban.svg"); }
.adm-icon[data-icon="braces"] { --adm-icon: url("/assets/icons/braces.svg"); }
.adm-icon[data-icon="calendar"] { --adm-icon: url("/assets/icons/calendar.svg"); }
.adm-icon[data-icon="check"] { --adm-icon: url("/assets/icons/check.svg"); }
.adm-icon[data-icon="circle-check"] { --adm-icon: url("/assets/icons/circle-check.svg"); }
.adm-icon[data-icon="circle-plus"] { --adm-icon: url("/assets/icons/circle-plus.svg"); }
.adm-icon[data-icon="clipboard-text"] { --adm-icon: url("/assets/icons/clipboard-text.svg"); }
.adm-icon[data-icon="clock"] { --adm-icon: url("/assets/icons/clock.svg"); }
.adm-icon[data-icon="dots"] { --adm-icon: url("/assets/icons/dots.svg"); }
.adm-icon[data-icon="eye"] { --adm-icon: url("/assets/icons/eye.svg"); }
.adm-icon[data-icon="file-text"] { --adm-icon: url("/assets/icons/file-text.svg"); }
.adm-icon[data-icon="info-circle"] { --adm-icon: url("/assets/icons/info-circle.svg"); }
.adm-icon[data-icon="key"] { --adm-icon: url("/assets/icons/key.svg"); }
.adm-icon[data-icon="list-check"] { --adm-icon: url("/assets/icons/list-check.svg"); }
.adm-icon[data-icon="lock"] { --adm-icon: url("/assets/icons/lock.svg"); }
.adm-icon[data-icon="lock-open"] { --adm-icon: url("/assets/icons/lock-open.svg"); }
.adm-icon[data-icon="markdown"] { --adm-icon: url("/assets/icons/markdown.svg"); }
.adm-icon[data-icon="minus"] { --adm-icon: url("/assets/icons/minus.svg"); }
.adm-icon[data-icon="pencil"] { --adm-icon: url("/assets/icons/pencil.svg"); }
.adm-icon[data-icon="plus"] { --adm-icon: url("/assets/icons/plus.svg"); }
.adm-icon[data-icon="refresh"] { --adm-icon: url("/assets/icons/refresh.svg"); }
.adm-icon[data-icon="search"] { --adm-icon: url("/assets/icons/search.svg"); }
.adm-icon[data-icon="shield"] { --adm-icon: url("/assets/icons/shield.svg"); }
.adm-icon[data-icon="shield-check"] { --adm-icon: url("/assets/icons/shield-check.svg"); }
.adm-icon[data-icon="user-check"] { --adm-icon: url("/assets/icons/user-check.svg"); }
.adm-icon[data-icon="user-plus"] { --adm-icon: url("/assets/icons/user-plus.svg"); }
.adm-icon[data-icon="user-x"] { --adm-icon: url("/assets/icons/user-x.svg"); }
.adm-icon[data-icon="users"] { --adm-icon: url("/assets/icons/users.svg"); }

.adm-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 28px;
}

.adm-page:empty {
  min-height: 120px;
}

/* Volver a Instituciones, en el lugar del rótulo de la franja. */
.adm-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  color: var(--blue-300);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
}

.adm-back:hover,
.adm-back:focus-visible {
  color: #FFFFFF;
}

/* Barra: buscador, filtro y la única nota que explica cómo leer las cifras. */
.adm-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.adm-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: min(300px, 100%);
  height: 36px;
  padding: 0 12px;
  color: var(--ink-muted);
  background: var(--paper);
  border: 0.5px solid var(--line-strong);
  border-radius: var(--radius-control);
}

.adm-search:focus-within {
  box-shadow: var(--focus-halo);
}

.adm-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  color: var(--ink-body);
  font: inherit;
  font-size: 13px;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
}

.adm-filter {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--paper);
  border: 0.5px solid var(--line-strong);
  border-radius: var(--radius-control);
}

.adm-filter-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  color: var(--ink-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.adm-filter-option:hover {
  color: var(--ink-title);
  background: var(--blue-050);
}

.adm-filter-option[aria-pressed="true"] {
  color: #FFFFFF;
  background: var(--blue-700);
}

.adm-filter-count {
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

.adm-tools-note {
  margin-left: auto;
  color: var(--ink-muted);
  font-size: 12px;
}

.adm-status {
  margin: 0;
  color: var(--success-ink);
  font-size: 13px;
}

.adm-status:empty {
  display: none;
}

/* Tabla: el contenedor tiene el borde; las filas se separan con filete fino. */
.adm-table-wrap {
  overflow-x: auto;
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-card);
}

.adm-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

.adm-table thead th {
  padding: 12px 14px;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  background: var(--blue-700);
  border: 0;
}

.adm-table thead th:first-child {
  border-top-left-radius: var(--radius-card);
}

.adm-table thead th:last-child {
  border-top-right-radius: var(--radius-card);
}

.adm-table tbody td {
  padding: 12px 14px;
  color: var(--ink-body);
  font-size: 13px;
  vertical-align: middle;
  background: var(--paper);
  border: 0;
  border-top: 0.5px solid var(--line);
}

.adm-table tbody tr:hover td {
  background: var(--surface-hover);
}

.adm-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--radius-card);
}

.adm-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--radius-card);
}

.adm-table .adm-num {
  text-align: right;
}

.adm-name {
  display: block;
  color: var(--ink-title);
  font-size: 14px;
  font-weight: 500;
}

.adm-sub {
  display: block;
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: 12px;
}

.adm-pending {
  color: var(--warning-ink);
}

.adm-muted {
  color: var(--ink-muted);
  font-size: 12px;
}

.adm-table .adm-muted {
  white-space: nowrap;
}

/* La acción de la franja no se parte en dos líneas cuando el título es largo. */
.workspace-header .primary-button {
  flex-shrink: 0;
  white-space: nowrap;
}

/* «23 de 35»: el número en tinta de título, lo contratado en tinta apagada. */
.adm-qty {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.adm-qty b {
  color: var(--ink-title);
  font-size: 14px;
  font-weight: 500;
}

.adm-of {
  color: var(--ink-muted);
  font-size: 12px;
}

.adm-qty[data-tone="low"] b {
  color: var(--warning-ink);
}

.adm-qty[data-tone="out"] b {
  color: var(--danger-ink);
}

.adm-qty .adm-icon {
  align-self: center;
  width: 14px;
  height: 14px;
  color: var(--danger);
}

/* Chips de estado y tipo: el color nunca va solo, siempre con ícono o palabra. */
.adm-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: var(--radius-control);
}

.adm-chip .adm-icon {
  width: 13px;
  height: 13px;
}

.adm-chip[data-tone="ok"] {
  color: var(--success-ink);
  background: var(--success-tint);
}

.adm-chip[data-tone="soon"] {
  color: var(--warning-ink);
  background: var(--warning-tint);
}

.adm-chip[data-tone="out"] {
  color: var(--danger-ink);
  background: var(--danger-tint);
}

.adm-chip[data-tone="off"] {
  color: #3F4B5B;
  background: #E8ECF1;
}

.adm-chip[data-tone="role"] {
  color: var(--ink-title);
  background: var(--blue-050);
}

.adm-chip[data-tone="admin"] {
  color: var(--blue-600);
  background: #E3ECF7;
}

/* Panel de acciones de la fila: íconos de 18 px en botones de 34 px sin borde. */
.adm-actions {
  position: relative;
  display: inline-flex;
  justify-content: flex-end;
  gap: 2px;
}

.adm-action {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--blue-600);
  background: transparent;
  border: 0;
  border-radius: var(--radius-control);
  cursor: pointer;
}

.adm-action > .adm-icon {
  width: 18px;
  height: 18px;
}

.adm-action:hover,
.adm-action[aria-expanded="true"] {
  color: var(--blue-700);
  background: var(--blue-050);
}

.adm-action[data-tone="danger"]:hover {
  color: var(--danger);
  background: var(--danger-tint);
}

.adm-action[aria-disabled="true"],
.adm-action[aria-disabled="true"]:hover {
  color: var(--line-strong);
  background: transparent;
  cursor: not-allowed;
}

.adm-action:focus-visible {
  outline: none;
  box-shadow: var(--focus-halo);
}

/* Rótulo flotante real (role="tooltip"): aparece al pasar o al enfocar. */
.adm-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  z-index: 20;
  padding: 5px 9px;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-align: left;
  white-space: nowrap;
  background: var(--blue-800);
  border-radius: 6px;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
}

.adm-action:last-child .adm-tip {
  right: 0;
  left: auto;
  transform: none;
}

.adm-action:hover .adm-tip,
.adm-action:focus-visible .adm-tip {
  opacity: 1;
}

.adm-action[aria-expanded="true"] .adm-tip {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .adm-tip {
    transition: opacity var(--dur-fast) var(--ease);
  }
}

/* Menú «⋯»: lo infrecuente de la fila. */
.adm-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  display: flex;
  min-width: 240px;
  flex-direction: column;
  padding: 6px;
  text-align: left;
  background: var(--paper);
  border: 0.5px solid var(--line-strong);
  border-radius: var(--radius-card);
}

.adm-menu[data-placement="up"] {
  top: auto;
  bottom: calc(100% + 4px);
}

.adm-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 10px;
  color: var(--ink-title);
  font: inherit;
  font-size: 13px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.adm-menu-item:hover,
.adm-menu-item:focus-visible {
  outline: none;
  background: var(--blue-050);
}

/* Totales del sistema, al pie de Instituciones. */
.adm-totals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.adm-total {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-card);
}

.adm-total-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  color: var(--ink-muted);
  font-size: 12px;
}

.adm-total-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}

.adm-total-row b {
  color: var(--ink-title);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Modal de acción (§6.8): cuerpo con «Así quedará» y el botón que dice cantidad y objeto. */
.adm-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.adm-dialog-body .field-group {
  margin: 0;
}

.adm-field-label {
  color: var(--ink-muted);
  font-size: 12px;
}

.adm-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  width: max-content;
  max-width: 100%;
  padding: 2px;
  background: var(--paper);
  border: 0.5px solid var(--line-strong);
  border-radius: var(--radius-control);
}

.adm-segmented button {
  min-height: 30px;
  padding: 0 12px;
  color: var(--ink-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.adm-segmented button:hover:not(:disabled) {
  color: var(--ink-title);
  background: var(--blue-050);
}

.adm-segmented button[aria-checked="true"] {
  color: #FFFFFF;
  background: var(--blue-700);
}

.adm-segmented button:disabled {
  color: #9AA6B4;
  cursor: not-allowed;
}

.adm-amount-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.adm-stepper {
  display: inline-flex;
  height: 36px;
  overflow: hidden;
  border: 0.5px solid var(--line-strong);
  border-radius: var(--radius-control);
}

.adm-stepper input {
  width: 88px;
  height: 100%;
  padding: 0 8px;
  color: var(--ink-title);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -moz-appearance: textfield;
}

.adm-stepper input::-webkit-outer-spin-button,
.adm-stepper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.adm-step {
  width: 36px;
  height: 100%;
  padding: 0;
  color: var(--ink-title);
  font-size: 16px;
  background: var(--blue-050);
  border: 0;
  cursor: pointer;
}

.adm-step:hover {
  background: var(--line);
}

.adm-limit {
  color: var(--ink-muted);
  font-size: 12px;
}

.adm-after {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--surface-desk);
  border-radius: var(--radius-card);
}

.adm-after-title {
  margin: 0 0 2px;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.adm-after-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 14px auto;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.adm-after-label {
  min-width: 0;
  color: var(--ink-muted);
}

.adm-after-row .adm-icon {
  width: 14px;
  height: 14px;
  color: var(--ink-muted);
}

.adm-after-to {
  color: var(--ink-title);
  font-weight: 500;
}

.adm-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 18px;
}

.adm-note .adm-icon {
  margin-top: 1px;
}

.adm-note[data-tone="warning"] {
  color: var(--warning-ink);
}

/* Tipos de usuario: una línea por tipo, con lo que puede hacer. */
.adm-options {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 0.5px solid var(--line);
  border-radius: var(--radius-card);
}

.adm-options legend {
  margin-bottom: 6px;
  padding: 0;
  color: var(--ink-muted);
  font-size: 12px;
}

.adm-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 14px;
  border-top: 0.5px solid var(--line);
  cursor: pointer;
}

.adm-option:first-of-type {
  border-top: 0;
}

.adm-option:hover {
  background: var(--surface-hover);
}

.adm-option input {
  margin: 2px 0 0;
  accent-color: var(--blue-600);
}

.adm-option b {
  display: block;
  color: var(--ink-title);
  font-weight: 500;
}

.adm-option span span {
  color: var(--ink-muted);
  font-size: 12px;
}

/* Asistentes habilitados: un interruptor por asistente. */
.adm-switches {
  display: flex;
  flex-direction: column;
  border: 0.5px solid var(--line);
  border-radius: var(--radius-card);
}

.adm-switch-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-top: 0.5px solid var(--line);
}

.adm-switch-row:first-child {
  border-top: 0;
}

.adm-switch-row label {
  cursor: pointer;
}

.adm-switch-row b {
  display: block;
  color: var(--ink-title);
  font-weight: 500;
}

.adm-switch-row label span {
  color: var(--ink-muted);
  font-size: 12px;
}

.adm-switch,
.adm-switch:hover,
.adm-switch:focus {
  position: relative;
  flex: none;
  width: 34px;
  min-width: 34px;
  height: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: var(--line-strong);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.adm-switch::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #FFFFFF;
  border-radius: 50%;
  content: "";
}

.adm-switch:checked {
  background: var(--blue-600);
}

.adm-switch:checked::after {
  transform: translateX(14px);
}

.adm-switch:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.adm-switch:focus-visible {
  outline: none;
  box-shadow: var(--focus-halo);
}

@media (prefers-reduced-motion: no-preference) {
  .adm-switch,
  .adm-switch::after {
    transition: background-color var(--dur-fast) var(--ease), transform var(--dur-base) var(--ease);
  }
}

/* Destructiva rellena solo dentro de la confirmación (§3.4). */
.adm-dialog .dialog-actions .danger-button,
.adm-dialog .dialog-actions .danger-button:hover {
  color: #FFFFFF;
  background: var(--danger);
  border-color: var(--danger);
}

.adm-dialog .dialog-actions .danger-button:hover {
  background: var(--danger-ink);
  border-color: var(--danger-ink);
}

.form-dialog.credit-distribution-dialog {
  width: min(720px, 98vw);
}

@media (width <= 900px) {
  .adm-tools-note {
    margin-left: 0;
  }

  .adm-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 560px) {
  .adm-search {
    width: 100%;
  }

  .adm-totals {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Ventana · Diagnóstico debug · Mesa de control (docs/72 §6.3) ─────────────────────────────
   Las mismas piezas que Instituciones: tabla con cabecera azul 700, chips de estado y panel de
   íconos por fila. La captura se resume en la franja y la evidencia se lee en un modal ancho. */

#debug-view .workspace-header {
  flex-wrap: wrap;
}

.dbg-capture {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  max-width: 100%;
}

.workspace-header .dbg-capture .dbg-capture-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 4px 0 0;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

/* Punto de estado: Verde menta activa, Amarillo con brechas; el color va siempre con palabra. */
.dbg-capture-summary::before,
.dbg-cap::before {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  background: #A7CFC2;
  border-radius: 50%;
  content: "";
}

.dbg-capture-summary[data-tone="warn"]::before,
.dbg-cap[data-tone="warn"]::before {
  background: #E0CF9A;
}

.dbg-capture-summary[data-tone="off"]::before,
.dbg-cap[data-tone="partial"]::before {
  background: var(--blue-300);
}

.dbg-coverage {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dbg-cap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  margin: 0;
  padding: 0 9px;
  color: var(--blue-100);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
  border: 0.5px solid var(--blue-400);
  border-radius: var(--radius-control);
}

.dbg-cap:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #FFFFFF;
}

/* La franja recorta lo que sale de ella: el rótulo se abre hacia arriba y hacia la izquierda. */
.dbg-cap .adm-tip {
  right: 0;
  left: auto;
  width: max-content;
  max-width: 300px;
  white-space: normal;
  transform: none;
  box-shadow: inset 0 0 0 0.5px var(--blue-400);
}

.dbg-cap:hover .adm-tip,
.dbg-cap:focus-visible .adm-tip {
  opacity: 1;
}

.workspace-header .adm-action {
  color: var(--blue-100);
}

.workspace-header .adm-action:hover {
  color: #FFFFFF;
  background: var(--blue-600);
}

/* Barra: buscador, estado, origen, fechas y los dos íconos de filtro. */
.dbg-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.dbg-tools .adm-search {
  flex: 1 1 280px;
  width: auto;
  max-width: 520px;
}

#debug-state-filter {
  flex-wrap: wrap;
  max-width: 100%;
}

.dbg-tools-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.dbg-select,
.dbg-date input {
  width: auto;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0 10px;
  color: var(--ink-body);
  font: inherit;
  font-size: 12px;
  background: var(--paper);
  border: 0.5px solid var(--line-field);
  border-radius: var(--radius-control);
}

.dbg-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 500;
}

.dbg-advanced {
  display: grid;
  flex-basis: 100%;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  padding: 14px 16px;
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-card);
}

.dbg-advanced[hidden] {
  display: none;
}

.dbg-advanced label {
  display: grid;
  gap: 6px;
  margin: 0;
  color: var(--ink-title);
  font-size: 12px;
  font-weight: 500;
}

/* Estados del panel de íconos: lo vigente que la acción deshace, y el punto de «ya escrito». */
.adm-action[data-on="true"] {
  color: var(--success);
  background: var(--success-tint);
}

.adm-action[data-on="true"]:has([data-icon="ban"]) {
  color: #3F4B5B;
  background: #E8ECF1;
}

.adm-action[data-filled="true"]::after {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  background: var(--clay);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--paper);
  content: "";
}

.adm-action:disabled,
.adm-action:disabled:hover {
  color: var(--line-strong);
  background: transparent;
  cursor: not-allowed;
}

.adm-status[data-tone="error"] {
  color: var(--danger-ink);
}

/* Tabla de incidentes. */
.dbg-table {
  min-width: 1040px;
}

/* La fecha se parte entre día y hora; el código del fallo nunca se corta. */
#debug-view .dbg-table th:first-child,
#debug-view .dbg-table td:first-child {
  width: 120px;
  min-width: 120px;
  white-space: normal;
}

/* Ocho columnas y siete acciones caben a 1366 px con un relleno algo más corto. */
#debug-view .dbg-table th,
#debug-view .dbg-table td {
  padding-inline: 12px;
}

#debug-view .dbg-table td:last-child {
  padding-inline: 6px;
}

#debug-view .dbg-table td:nth-child(2) {
  min-width: 240px;
}

.dbg-when {
  font-family: var(--font-tech);
  font-size: 12px;
}

.dbg-code {
  display: block;
  color: var(--ink-title);
  font-family: var(--font-tech);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.dbg-summary {
  display: block;
  max-width: 360px;
  margin-top: 2px;
}

.dbg-person {
  display: block;
}

.adm-table .dbg-count {
  color: var(--ink-title);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Lo resuelto y lo descartado queda atenuado; sus acciones, no. */
.dbg-table tbody tr[data-state="resolved"] td:not(:last-child),
.dbg-table tbody tr[data-state="ignored"] td:not(:last-child) {
  opacity: 0.7;
}

.dbg-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.dbg-foot p,
#debug-view .adm-page > .adm-muted {
  margin: 0;
}

.dbg-pager {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Evidencia del incidente: modal ancho con el mismo panel de íconos sobre su ficha. */
.form-dialog.dbg-detail-dialog {
  width: min(720px, 98vw);
}

.dbg-detail-summary {
  margin: 0;
  color: var(--ink-title);
  font-size: 14px;
  line-height: 22px;
}

.dbg-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 10px;
  border: 0.5px solid var(--line);
  border-radius: var(--radius-card);
}

.dbg-detail-actions .adm-actions {
  margin-left: auto;
}

.dbg-tracking {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.dbg-tracking > div {
  min-width: 0;
  padding: 12px 14px;
  border: 0.5px solid var(--line);
  border-radius: var(--radius-card);
}

.dbg-tracking dt {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.dbg-tracking dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.dbg-tracking .dbg-empty-value {
  color: var(--ink-muted);
}

.dbg-detail-form h3 {
  margin: 8px 0 0;
  color: var(--ink-title);
  font-size: 14px;
  font-weight: 500;
}

.dbg-detail-dialog .debug-events {
  margin-inline: 0;
}

.dbg-events-pager {
  display: flex;
  justify-content: space-between;
}

@media (width <= 900px) {
  .dbg-tools-end {
    margin-left: 0;
  }

  .dbg-capture {
    justify-content: flex-start;
  }
}

@media (width <= 700px) {
  .dbg-tracking {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Ventana · Asistentes (listado de la administración) ────────────────────────────────────── */

/* Una acción de avance por pantalla: la acción destacada de cada fila deja el relleno y se
   distingue por su trazo azul, como las acciones de fila de Inicio. */
.row-action {
  width: 32px;
  height: 32px;
  color: var(--ink-muted);
  background: var(--paper);
  border: 0.5px solid var(--line-strong);
  border-radius: var(--radius-control);
}

.row-action:hover {
  color: var(--blue-700);
  background: var(--blue-050);
  border-color: var(--line-strong);
}

.row-action.is-primary {
  color: var(--blue-600);
  background: var(--paper);
  border-color: var(--blue-500);
}

.row-action.is-primary:hover {
  color: var(--blue-700);
  background: var(--blue-050);
  border-color: var(--blue-500);
}

.row-action[aria-expanded="true"] {
  color: var(--blue-700);
  background: var(--blue-050);
  border-color: var(--blue-500);
}

.row-action[disabled] {
  opacity: 1;
  color: #9AA6B4;
  border-color: var(--line);
}

.workbench-row {
  min-height: 64px;
  padding: 12px 20px;
  border-bottom: 0.5px solid var(--line);
}

.workbench-row:hover {
  background: #F7F9FB;
}

.workbench-tile {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-control);
  font-size: 16px;
}

.workbench-name {
  color: var(--ink-title);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.workbench-name:hover {
  color: var(--blue-600);
  text-underline-offset: 3px;
}

.workbench-meta,
.workbench-step-label,
.workbench-result {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 18px;
}

.workbench-step-label strong,
.workbench-result strong {
  color: var(--ink-title);
  font-weight: 500;
}

/* Avance del constructor: tramos rectos de 3 px. */
.workbench-steps {
  gap: 2px;
}

.workbench-step {
  height: 3px;
  background: var(--blue-050);
  border-radius: 0;
}

.workbench-step.is-done { background: var(--blue-300); }
.workbench-step.is-current { background: var(--blue-600); }

/* Controles discretos de orden y filtro: 30 px, borde fino, activos en azul. */
.sort-btn,
.quiet-btn {
  min-height: 30px;
  padding: 0 10px;
  color: var(--ink-muted);
  background: var(--paper);
  border: 0.5px solid var(--line-strong);
  border-radius: var(--radius-control);
  font-size: 12px;
  font-weight: 500;
}

.sort-btn:hover,
.quiet-btn:hover {
  color: var(--ink-title);
  background: var(--blue-050);
}

.sort-btn.active,
.quiet-btn[aria-expanded="true"],
.quiet-btn.is-active {
  color: var(--blue-700);
  background: var(--blue-050);
  border-color: var(--blue-500);
}

.quiet-count {
  color: #FFFFFF;
  background: var(--blue-600);
  border-radius: 6px;
  font-size: 11px;
}

.quiet-menu {
  padding: 8px;
  background: var(--paper);
  border: 0.5px solid var(--line-strong);
  border-radius: var(--radius-card);
  box-shadow: none;
}

.quiet-menu-title {
  color: var(--ink-muted);
  font-size: 11px;
  letter-spacing: 0.5px;
}

.quiet-check {
  font-size: 13px;
  border-radius: 6px;
}

.quiet-check:hover {
  background: #F7F9FB;
}

.workbench-search input {
  min-height: 36px;
}


/* ── Ventana · Ficha del asistente ──────────────────────────────────────────────────────────────
   Las secciones del asistente son pestañas de nivel 1: continúan la franja azul bajo la
   cabecera, en 12 px, con la activa en blanco y subrayado blanco. */

.workspace-header:has(+ .project-context-navigation) {
  margin-bottom: 0;
  padding-bottom: 8px;
}

.project-context-navigation {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: 0 0 24px;
  padding: 0;
  background: var(--surface-context);
  box-shadow: 0 0 0 100vmax var(--surface-context);
  clip-path: inset(0 -100vmax);
}

.project-context-navigation button {
  min-height: 34px;
  margin: 0;
  padding: 0;
  color: var(--blue-300);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 -2px 0 transparent;
  font-family: var(--font-system);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.project-context-navigation button:hover {
  color: #FFFFFF;
}

.project-context-navigation button.is-active,
.project-context-navigation button[aria-current="page"] {
  color: #FFFFFF;
  box-shadow: inset 0 -2px 0 #FFFFFF;
}

.assistant-summary strong {
  color: var(--ink-title);
  font-weight: 500;
}

/* ── Ventana · Constructor de asistentes ────────────────────────────────────────────────────────
   Los seis pasos son pestañas de nivel 1 sobre la franja azul, con su número en un recuadro
   fino. El paso activo va en blanco con subrayado blanco. */

.workspace-header:has(+ .builder-step-navigation) {
  margin-bottom: 0;
  padding-bottom: 8px;
}

.builder-step-navigation {
  position: relative;
  display: flex;
  gap: 4px 28px;
  margin: 0 0 24px;
  padding: 0;
  overflow-x: auto;
  background: var(--surface-context);
  box-shadow: 0 0 0 100vmax var(--surface-context);
  clip-path: inset(0 -100vmax);
}

.builder-step-navigation button {
  gap: 8px;
  min-height: 40px;
  padding: 0;
  color: var(--blue-300);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 -2px 0 transparent;
  font-size: 12px;
  font-weight: 500;
}

.builder-step-navigation button:hover {
  color: #FFFFFF;
  background: transparent;
}

.builder-step-navigation button span {
  width: 20px;
  height: 20px;
  color: inherit;
  border: 0.5px solid var(--blue-400);
  border-radius: 4px;
  font-family: var(--font-tech);
  font-size: 11px;
}

.builder-step-navigation button.is-active {
  color: #FFFFFF;
  background: transparent;
  box-shadow: inset 0 -2px 0 #FFFFFF;
}

.builder-step-navigation button.is-active span {
  color: var(--blue-800);
  background: #FFFFFF;
  border-color: #FFFFFF;
}

/* «Guardar borrador» es secundario: deja de ser verde. */
#save-definition {
  color: var(--blue-100);
  background: transparent;
  border: 0.5px solid var(--blue-400);
}

#save-definition:hover {
  color: #FFFFFF;
  background: var(--blue-600);
  border-color: var(--blue-400);
}

.definition-save-state {
  color: var(--blue-200);
  font-size: 12px;
}

.step-kicker {
  color: var(--ink-muted);
}

.builder-icon,
.action-initial > span {
  color: var(--blue-600);
  background: var(--blue-050);
  border-radius: var(--radius-card);
}

.builder-icon[data-accent] {
  color: var(--card-ink);
  background: var(--card-tone);
}

.panel-next {
  padding: 16px 20px;
  border-top: 0.5px solid var(--line);
}

.progressive-options {
  margin: 16px;
  border: 0.5px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.progressive-options > summary {
  padding: 12px 16px;
  color: var(--blue-600);
  background: #F7F9FB;
  font-size: 13px;
  font-weight: 500;
}

.icon-swatch {
  border-radius: var(--radius-control);
}

/* Estado de guardado sobre la franja: chip neutro sobre azul; los cambios pendientes con filete
   ámbar claro. */
.workspace-header .definition-save-state {
  min-height: 22px;
  padding: 0 8px;
  color: var(--blue-100);
  background: var(--blue-800);
  border: 0.5px solid var(--blue-400);
  border-radius: var(--radius-control);
  font-size: 11px;
  font-weight: 500;
}

.workspace-header .definition-save-state[data-state="dirty"] {
  color: #F5EEDC;
  border-color: #E2D2A8;
}

/* ── Ventana · Gobernanza ──────────────────────────────────────────────────────────────────────
   La cabecera del registro sigue la regla general de sección. */

.governance-header {
  position: relative;
  margin: 0 0 24px;
  padding: 24px 0;
  background: var(--surface-context);
  border-bottom: 0;
  box-shadow: 0 0 0 100vmax var(--surface-context);
  clip-path: inset(0 -100vmax);
}

.admin-workspace:has(> #governance-view:not([hidden]) > #governance-search-panel:not([hidden]) > .governance-header:first-child):not(:has(> .admin-message:not([hidden]))) {
  padding-top: 0;
}

.governance-header .eyebrow {
  margin: 0 0 6px;
  color: var(--blue-300);
}

.governance-header h1 {
  color: #FFFFFF;
  font-size: 28px;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: -0.4px;
}

.governance-header-note {
  color: var(--blue-100);
  font-size: 13px;
  line-height: 20px;
}

/* Marca de proyecto de prueba: chip neutro. */
.governance-test {
  padding: 0 6px;
  color: var(--ink-muted);
  background: var(--blue-050);
  border: 0;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

/* ── Ventana · Documento (proyecto y hoja estadística) ─────────────────────────────────────────
   La hoja (§5.4): 816 px que no se estiran, márgenes de 72 / 48 / 32 px según el ancho, papel
   con borde fino y radio 10 sobre la mesa. El contenido es documento: Source Serif 4 a 15/26,
   títulos en semibold serif. Los controles de la aplicación que viven en la hoja siguen en Inter. */

.document-sheet {
  --sheet-pad: 72px;
  width: min(100%, 816px);
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: none;
  color: var(--ink-body);
  font-family: var(--font-doc);
  font-size: 15px;
  line-height: 26px;
}

@media (max-width: 1279px) {
  .document-sheet {
    --sheet-pad: 48px;
  }
}

@media (max-width: 1023px) {
  .document-sheet {
    --sheet-pad: 32px;
  }
}

@media (max-width: 640px) {
  .document-sheet {
    --sheet-pad: 20px;
  }
}

.document-sheet > header {
  margin-bottom: 40px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--blue-700);
  border-radius: 0;
}

.document-sheet > header .eyebrow {
  font-family: var(--font-system);
}

.document-sheet h1 {
  color: var(--ink-title);
  font-family: var(--font-doc);
  font-size: 28px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0;
}

.document-sheet > header > p:not(.eyebrow) {
  color: var(--ink-muted);
  font-family: var(--font-doc);
  font-size: 16px;
  font-style: italic;
  line-height: 26px;
}

.document-section {
  color: var(--ink-body);
  font-family: var(--font-doc);
  font-size: 15px;
  line-height: 26px;
}

.document-section h2,
.document-section h3,
.document-section h4 {
  color: var(--ink-title);
  font-family: var(--font-doc);
  font-weight: 600;
  letter-spacing: 0;
}

.document-section h2 { font-size: 21px; line-height: 28px; }
.document-section h3 { font-size: 17px; line-height: 24px; }
.document-section h4 { font-size: 15px; line-height: 24px; }

.document-section strong,
.document-section b {
  font-weight: 600;
}

.document-section.is-pending > :is(h2, h3, h4),
.document-section.is-pending .document-section-heading > :is(h2, h3, h4) {
  color: var(--ink-muted);
  font-weight: 600;
}

/* La sección en curso se marca con filete de 2 px y radio 0 sobre papel apenas gris. */
.document-section.is-target {
  background: #F7F9FB;
  border-left: 2px solid var(--blue-600);
  border-radius: 0;
}

.document-section.is-target .document-placeholder {
  color: var(--blue-600);
  font-family: var(--font-system);
  font-size: 13px;
}

.document-placeholder {
  font-family: var(--font-system);
  font-size: 13px;
}

.document-section blockquote {
  color: var(--ink-muted);
  background: transparent;
  border-left: 2px solid var(--line-strong);
  border-radius: 0;
  font-style: italic;
}

.document-section pre,
.document-section code {
  font-family: var(--font-tech);
}

/* Tablas del documento (§12): sin líneas verticales, cabecera con filete inferior, filas alternas
   apenas grises. Las cifras se alinean con dígitos del mismo ancho. */
.document-section table {
  font-family: var(--font-doc);
  font-size: 13px;
  line-height: 22px;
  font-variant-numeric: lining-nums tabular-nums;
}

.document-section th,
.document-section td {
  border: 0;
  border-bottom: 0.5px solid var(--line);
}

.document-section th {
  color: var(--ink-title);
  background: transparent;
  border-bottom: 1px solid var(--ink-title);
  font-family: var(--font-system);
  font-size: 12px;
  font-weight: 500;
}

.document-section tbody tr:nth-child(even) {
  background: #F7F9FB;
}

/* «Ver fuentes» y demás desplegables son controles de la aplicación. */
.document-section details {
  color: var(--ink-body);
  font-family: var(--font-system);
  font-size: 13px;
}

.document-section summary {
  color: var(--blue-600);
  font-size: 12px;
  font-weight: 500;
}

/* Editar sección: botón pequeño de borde fino con el ícono lineal, sin disco relleno. */
.section-edit-button {
  width: 28px;
  height: 28px;
  color: var(--blue-600);
  background: var(--paper);
  border: 0.5px solid var(--line-strong);
  border-radius: var(--radius-control);
  font-size: 14px;
}

.section-edit-button:hover {
  color: var(--blue-700);
  background: var(--blue-050);
}


/* Destacador de texto normativo: interruptor de sistema dentro de la hoja. */
.fixed-mark-control,
.fixed-mark-toggle,
.fixed-mark-note {
  font-family: var(--font-system);
}

.fixed-mark-toggle {
  color: var(--ink-body);
  background: var(--blue-050);
  border: 0;
  border-radius: var(--radius-control);
  font-size: 12px;
  font-weight: 500;
}

.fixed-mark-note {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 18px;
}

.document-sheet.is-marking-fixed .fixed-mark {
  background: var(--blue-050);
}

/* El botón flotante de salida del proyecto: secundaria sobre la mesa. */
.runner-topbar .back-button {
  min-height: 30px;
  padding: 0 12px;
  color: var(--blue-700);
  background: var(--paper);
  border: 0.5px solid var(--line-strong);
  border-radius: var(--radius-control);
  font-family: var(--font-system);
  font-size: 12px;
}

.runner-topbar .back-button:hover {
  color: var(--blue-700);
  background: var(--blue-050);
  border-color: var(--line-strong);
}

/* Hoja estadística. */
.statistics-table table {
  font-family: var(--font-doc);
  font-size: 13px;
  font-variant-numeric: lining-nums tabular-nums;
}

.statistics-table th {
  color: var(--ink-title);
  background: transparent;
  border-bottom: 1px solid var(--ink-title);
  font-family: var(--font-system);
  font-size: 12px;
  font-weight: 500;
}

.statistics-table td {
  border-bottom: 0.5px solid var(--line);
}

.statistics-warning {
  background: var(--warning-tint);
  border-left: 2px solid var(--warning);
  border-radius: 0;
}

.statistics-gaps {
  background: #F7F9FB;
  border: 0.5px solid var(--line);
  border-left: 2px solid var(--blue-600);
  border-radius: 0;
}

.statistics-hash,
.statistics-request {
  font-family: var(--font-tech);
  font-size: 12px;
}

/* ── Ventana · Mis trabajos ─────────────────────────────────────────────────────────────────── */

.work-folders-section > h2,
.work-list-heading h2 {
  color: var(--ink-title);
  font-family: var(--font-system);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
}

.work-folder {
  min-height: 72px;
  padding: 12px 14px;
  color: var(--ink-body);
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: none;
}

.work-folder:hover {
  background: #F7F9FB;
  border-color: var(--line-strong);
  box-shadow: none;
}

/* Carpeta abierta: filete izquierdo azul 600, como la fila seleccionada. */
.work-folder.is-active {
  background: #F7F9FB;
  border-color: var(--line);
  outline: 0;
  box-shadow: inset 2px 0 0 var(--blue-600);
}

.work-folder-icon {
  width: 36px;
  height: 36px;
  color: var(--blue-600);
  background: var(--blue-050);
  border-radius: var(--radius-control);
  font-size: 18px;
}

.work-folder-icon.is-evaluation {
  color: var(--blue-700);
  background: var(--blue-100);
}

/* Acciones de fila: «Continuar» y compañía son secundarias pequeñas; archivar queda como texto. */
.work-main-action,
.work-secondary-action,
.work-download-action {
  min-height: 30px;
  padding: 0 12px;
  color: var(--blue-700);
  background: var(--paper);
  border: 0.5px solid var(--line-strong);
  border-radius: var(--radius-control);
  font-size: 12px;
  font-weight: 500;
}

.work-main-action:hover,
.work-secondary-action:hover,
.work-download-action:hover {
  color: var(--blue-700);
  background: var(--blue-050);
  border-color: var(--line-strong);
}

.work-archive-action {
  min-height: 30px;
  padding: 0 8px;
  color: var(--ink-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-control);
  font-size: 12px;
  font-weight: 500;
}

.work-archive-action:hover {
  color: var(--ink-title);
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.work-name-button {
  color: var(--ink-title);
  font-size: 13px;
  font-weight: 500;
}

.work-name-button:hover {
  color: var(--blue-600);
}

/* ── Ventana · Inicio de la persona usuaria ─────────────────────────────────────────────────────
   El lienzo azul de pantalla completa pasa a la regla general: franja de sección arriba y mesa
   gris debajo. Los títulos que estaban escritos en blanco sobre el degradado pasan a tinta. */

.workspace-header .eyebrow {
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.5px;
}

body.user-mode .admin-workspace:has(> #project-list-view:not([hidden])),
body.user-mode .admin-workspace:has(> #project-works-view:not([hidden])),
body.user-mode .admin-workspace:has(> #project-support-view:not([hidden])),
body.user-mode .admin-workspace:has(> #project-funding-view:not([hidden])) {
  background: var(--surface-desk);
}

body.user-mode .home-section-heading h2,
.home-section-heading h2 {
  color: var(--ink-title);
  font-family: var(--font-system);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
}

body.user-mode .home-section-heading p,
.home-section-heading p {
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 20px;
}

body.user-mode .home-section-heading .eyebrow,
.home-section-heading .eyebrow {
  color: var(--ink-muted);
}

body.user-mode .home-evaluator-section,
body.user-mode .evaluator-archive,
.home-evaluator-section,
.evaluator-archive {
  border-top-color: var(--line);
}

body.user-mode .evaluator-archive > summary,
.evaluator-archive > summary {
  color: var(--blue-600);
  font-size: 13px;
  font-weight: 500;
}

/* Tarjeta de asistente: conserva el tono elegido en administración, con radio de tarjeta. */
body.user-mode .assistant-card,
.assistant-card {
  border-radius: var(--radius-card);
  box-shadow: none;
}

body.user-mode .assistant-card h3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

body.user-mode .assistant-card p {
  font-size: 13px;
  line-height: 20px;
}

body.user-mode .assistant-card small,
body.user-mode .assistant-card-footer {
  font-size: 11px;
  letter-spacing: 0.5px;
}

/* Sobre los cinco tonos claros la letra blanca no se lee: ahí la tinta es siempre azul 800,
   aunque el asistente guarde tinta blanca. */
[data-accent="cyan"],
[data-accent="mint"],
[data-accent="green"],
[data-accent="amber"],
[data-accent="clay"] {
  --card-ink: #0B2545;
}

body.user-mode .support-help-panel h2 {
  color: var(--ink-title);
}

/* ── Ventana · Inicio · página de inicio «Plano» (docs/72 §6.4 y §7) ─────────────────────────
   Aprobada el 24-09-2026. La franja se parte en dos: a la izquierda el título grande y las
   cifras; a la derecha la trama de plano con el buscador de Inicio al centro, que el 25-09-2026
   reemplazó a la ficha «Retoma donde quedaste». La franja no usa la sombra extendida de la
   regla general porque su recorte cortaría la lista del buscador, que cae sobre la mesa: el
   azul es un ::before. */

body.user-mode #project-list-view {
  max-width: 1280px;
  margin: 0 auto;
}

.home-hero-header,
body.user-mode .home-hero-header {
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  align-items: start;
  min-height: 340px;
  box-sizing: border-box;
  margin: 0 0 40px;
  padding: 64px 0 48px;
  text-align: left;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  /* La lista del buscador cae sobre la mesa: la cabecera tiene que pintarse encima de ella. */
  z-index: 2;
}

.home-hero-header::before {
  position: absolute;
  z-index: -2;
  inset: 0 -100vmax;
  background: var(--surface-context);
  content: "";
}

/* Trama de plano: 24 px de cuadrícula fina y 120 px de cuadrícula mayor, en dos azules
   intermedios entre el 700 y el 600. Es fondo, no dibujo: nunca lleva texto encima salvo la
   ficha, que es papel. */
.home-hero-plano {
  position: absolute;
  z-index: -1;
  top: 0;
  right: -100vmax;
  bottom: 0;
  left: min(620px, 48%);
  background: url("/assets/styles/plano-trama.svg") 0 0 / 120px 120px repeat;
  border-left: 0.5px solid var(--blue-400);
}

.home-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.home-hero-header .eyebrow {
  margin: 0;
}

.home-hero-header h1,
body.user-mode .home-hero-header h1 {
  margin: 0;
  color: #FFFFFF;
  font-size: 44px;
  font-weight: 400;
  line-height: 50px;
  letter-spacing: -1px;
  text-wrap: balance;
}

.home-hero-header .home-hero-copy > p:not(.eyebrow) {
  max-width: 460px;
  margin: 0;
  color: var(--blue-100);
  font-size: 16px;
  line-height: 26px;
}

/* Cifras de la cabecera: conteos sobre azul, número arriba y palabra abajo (§6.4). */
.home-hero-figures {
  display: flex;
  width: min(460px, 100%);
  gap: 32px;
  margin: 8px 0 0;
  padding-top: 20px;
  border-top: 0.5px solid var(--blue-400);
}

.home-hero-figures[hidden] {
  display: none;
}

.home-hero-figures > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
}

.home-hero-figures dd {
  margin: 0;
  color: #FFFFFF;
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
  font-variant-numeric: tabular-nums;
}

.home-hero-figures dt {
  color: var(--blue-200);
  font-size: 12px;
  line-height: 18px;
}

/* Buscador de Inicio (docs/72 §7.6). Una hoja de papel centrada sobre la trama que se ve, que
   llega hasta el borde de la ventana: el escenario se extiende hasta ese borde, con un tope de
   160 px para que en una pantalla muy ancha la hoja no se aleje del contenido. Las cuatro marcas de las esquinas son las marcas de registro de un plano:
   encuadran la hoja y, al recibir el foco, se abren 4 px y pasan a blanco. Es el único movimiento
   de la franja; la trama nunca se mueve. */
.home-search-stage {
  position: absolute;
  z-index: 1;
  top: 0;
  right: max(calc(50% - 50vw), -160px);
  bottom: 0;
  left: min(620px, 48%);
  display: grid;
  place-items: center;
  padding: 0 40px;
}

.home-search {
  position: relative;
  width: min(100%, 520px);
  /* La hoja y la lista son papel: el anillo vuelve al azul. El del campo va sobre la franja y
     se declara aparte, en blanco. */
  --focus-color: var(--blue-500);
}

.home-search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 10px 0 18px;
  background: var(--paper);
  border-radius: var(--radius-window);
  cursor: text;
}

.home-search-field:focus-within {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}

.home-search-mark {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid var(--blue-300);
  pointer-events: none;
  transition:
    transform var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    opacity var(--dur-fast) var(--ease);
}

.home-search-mark[data-corner="top-left"] {
  top: -12px;
  left: -12px;
  border-top-width: 1px;
  border-left-width: 1px;
}

.home-search-mark[data-corner="top-right"] {
  top: -12px;
  right: -12px;
  border-top-width: 1px;
  border-right-width: 1px;
}

.home-search-mark[data-corner="bottom-left"] {
  bottom: -12px;
  left: -12px;
  border-bottom-width: 1px;
  border-left-width: 1px;
}

.home-search-mark[data-corner="bottom-right"] {
  right: -12px;
  bottom: -12px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

@media (hover: hover) and (pointer: fine) {
  .home-search-field:hover .home-search-mark {
    border-color: var(--blue-100);
  }
}

.home-search-field:focus-within .home-search-mark {
  border-color: #FFFFFF;
}

.home-search-field:focus-within .home-search-mark[data-corner="top-left"] {
  transform: translate(-4px, -4px);
}

.home-search-field:focus-within .home-search-mark[data-corner="top-right"] {
  transform: translate(4px, -4px);
}

.home-search-field:focus-within .home-search-mark[data-corner="bottom-left"] {
  transform: translate(-4px, 4px);
}

.home-search-field:focus-within .home-search-mark[data-corner="bottom-right"] {
  transform: translate(4px, 4px);
}

/* Con la lista abierta, las marcas de abajo quedarían bajo la hoja: se retiran todas y la lista
   toma el relevo. */
.home-search[data-open="true"] .home-search-mark {
  opacity: 0;
}

.home-search-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  background-color: var(--blue-500);
  -webkit-mask: url("/assets/icons/search.svg") center / contain no-repeat;
  mask: url("/assets/icons/search.svg") center / contain no-repeat;
}

/* 16 px: por debajo, Safari en el teléfono agranda la página al enfocar el campo. */
.home-search-field input,
.home-search-field input:focus {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
  color: var(--ink-body);
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
  font-size: 16px;
  line-height: 24px;
}

.home-search-field input::placeholder {
  color: var(--ink-muted);
}

.home-search-clear {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  color: var(--ink-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.home-search-clear[hidden] {
  display: none;
}

.home-search-clear::before {
  width: 16px;
  height: 16px;
  background-color: currentColor;
  content: "";
  -webkit-mask: url("/assets/icons/x.svg") center / contain no-repeat;
  mask: url("/assets/icons/x.svg") center / contain no-repeat;
}

@media (hover: hover) and (pointer: fine) {
  .home-search-clear:hover {
    color: var(--blue-600);
    background: var(--blue-050);
  }
}

.home-search-key,
.home-search-footer kbd {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  box-sizing: border-box;
  place-items: center;
  padding: 0 6px;
  color: var(--ink-muted);
  background: var(--blue-050);
  border: 0.5px solid var(--line-strong);
  border-radius: 6px;
  font-family: var(--font-tech);
  font-size: 11px;
  line-height: 1;
}

.home-search-key {
  flex: 0 0 auto;
  margin-right: 6px;
}

/* La tecla se ofrece mientras el campo está vacío y solo donde hay teclado. */
.home-search[data-filled="true"] .home-search-key {
  display: none;
}

/* Lista de resultados: una segunda hoja que nace del borde inferior del campo. Entra en
   --dur-base con la curva de la identidad, crece desde arriba —donde está el campo que la
   abre— y sale en --dur-fast. Se anima con transición y no con fotogramas, así que abrir y
   cerrar rápido retoma el movimiento donde iba en vez de empezarlo de nuevo. */
.home-search-panel {
  position: absolute;
  z-index: 3;
  top: calc(100% + 10px);
  right: 0;
  left: 0;
  display: flex;
  max-height: min(460px, 62vh);
  flex-direction: column;
  overflow: hidden;
  color: var(--ink-body);
  background: var(--paper);
  border: 0.5px solid var(--line-strong);
  border-radius: var(--radius-window);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px) scale(0.97);
  transform-origin: top center;
  transition:
    opacity var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease),
    visibility 0s linear var(--dur-fast);
}

.home-search[data-open="true"] .home-search-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition:
    opacity var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease),
    visibility 0s;
}

/* Abierta o cerrada con el teclado: sin espera. */
.home-search[data-instant="true"] .home-search-panel {
  transition: none;
}

.home-search-results {
  overflow-y: auto;
  padding: 6px;
  overscroll-behavior: contain;
}

.home-search-results[hidden] {
  display: none;
}

.home-search-group + .home-search-group {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 0.5px solid var(--line);
}

.home-search-group-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 4px;
  color: var(--ink-muted);
  font-family: var(--font-tech);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.3px;
}

/* Una fila por resultado: figura en el tono, nombre y detalle, y la flecha que aparece en la
   fila activa. La fila activa cambia al instante: se recorre con las flechas, decenas de veces
   seguidas, y un fundido la haría ir detrás del teclado. */
.home-search-option {
  display: grid;
  min-height: 52px;
  box-sizing: border-box;
  grid-template-columns: 32px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  color: var(--ink-body);
  text-decoration: none;
  border-radius: var(--radius-control);
  cursor: pointer;
}

.home-search-option[aria-selected="true"] {
  background: var(--blue-050);
  box-shadow: inset 2px 0 0 var(--blue-600);
}

.home-search-figure {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: var(--card-ink, var(--blue-600));
  background: var(--card-tone, var(--blue-050));
  border-radius: var(--radius-control);
  font-size: 16px;
  font-style: normal;
}

.home-search-figure i {
  display: grid;
  place-items: center;
  font-style: normal;
}

.home-search-figure i[data-glyph]::before {
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  content: "";
  -webkit-mask: var(--home-search-glyph) center / contain no-repeat;
  mask: var(--home-search-glyph) center / contain no-repeat;
}

.home-search-figure i[data-glyph="home"] { --home-search-glyph: url("/assets/icons/home.svg"); }
.home-search-figure i[data-glyph="folder"] { --home-search-glyph: url("/assets/icons/folder.svg"); }
.home-search-figure i[data-glyph="plus"] { --home-search-glyph: url("/assets/icons/plus.svg"); }
.home-search-figure i[data-glyph="user"] { --home-search-glyph: url("/assets/icons/user.svg"); }
.home-search-figure i[data-glyph="users"] { --home-search-glyph: url("/assets/icons/users.svg"); }
.home-search-figure i[data-glyph="info-circle"] { --home-search-glyph: url("/assets/icons/info-circle.svg"); }
.home-search-figure i[data-glyph="chart-bar"] { --home-search-glyph: url("/assets/icons/chart-bar.svg"); }
.home-search-figure i[data-glyph="building"] { --home-search-glyph: url("/assets/icons/building.svg"); }
.home-search-figure i[data-glyph="writing"] { --home-search-glyph: url("/assets/icons/writing.svg"); }
.home-search-figure i[data-glyph="shield-check"] { --home-search-glyph: url("/assets/icons/shield-check.svg"); }
.home-search-figure i[data-glyph="list-check"] { --home-search-glyph: url("/assets/icons/list-check.svg"); }
.home-search-figure i[data-glyph="mail"] { --home-search-glyph: url("/assets/icons/mail.svg"); }
.home-search-figure i[data-glyph="gauge"] { --home-search-glyph: url("/assets/icons/gauge.svg"); }
.home-search-figure i[data-glyph="scale"] { --home-search-glyph: url("/assets/icons/scale.svg"); }
.home-search-figure i[data-glyph="calendar"] { --home-search-glyph: url("/assets/icons/calendar.svg"); }

.home-search-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.home-search-copy strong,
.home-search-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-search-copy strong {
  color: var(--ink-title);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.home-search-copy small {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 18px;
}

/* La coincidencia se subraya como una cota: ni fondo ni peso nuevo. */
.home-search-copy mark {
  color: inherit;
  background: none;
  text-decoration: underline;
  text-decoration-color: var(--blue-300);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.home-search-option .ui-icon {
  color: var(--blue-600);
  opacity: 0;
}

.home-search-option[aria-selected="true"] .ui-icon {
  opacity: 1;
}

.home-search-empty {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 28px 24px;
  text-align: center;
}

.home-search-empty[hidden] {
  display: none;
}

.home-search-empty strong {
  color: var(--ink-title);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.home-search-empty span {
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 20px;
}

.home-search-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 10px 16px;
  color: var(--ink-muted);
  background: var(--surface-desk);
  border-top: 0.5px solid var(--line);
  font-family: var(--font-tech);
  font-size: 11px;
  line-height: 22px;
}

.home-search-footer span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* En una pantalla táctil no hay teclas que enseñar. */
@media (hover: none) {
  .home-search-key,
  .home-search-footer {
    display: none;
  }
}

/* Movimiento reducido: la lista y las marcas solo cambian de opacidad y color; nada se
   desplaza ni cambia de tamaño. */
@media (prefers-reduced-motion: reduce) {
  .home-search-panel,
  .home-search[data-open="true"] .home-search-panel {
    transform: none;
  }

  .home-search-field:focus-within .home-search-mark[data-corner] {
    transform: none;
  }
}

/* Encabezado del catálogo: título de sección y cuenta en monoespaciada. */
.home-catalog-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 20px;
}

.home-catalog-heading h2 {
  margin: 0;
  color: var(--ink-title);
  font-family: var(--font-system);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
}

.home-catalog-count {
  color: var(--ink-muted);
  font-family: var(--font-tech);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Tarjeta de inicio (§6.4): cabeza en el tono del asistente, cuerpo de papel. El tono ya no
   cubre la tarjeta entera: identifica sin gritar y deja que el nombre se lea en tinta. */
body.user-mode .assistant-catalog {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 20px;
}

body.user-mode .assistant-card {
  min-height: 0;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  overflow: hidden;
  color: var(--ink-body);
  text-align: left;
  background: var(--paper);
  border: 0.5px solid var(--line);
  transition: border-color var(--dur-fast) var(--ease);
}

body.user-mode .assistant-card:hover {
  border-color: var(--line-strong);
  transform: none;
}

body.user-mode .assistant-card:active {
  transform: scale(0.98);
}

.assistant-card-head {
  display: flex;
  height: 132px;
  box-sizing: border-box;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px;
  color: var(--card-ink);
  background: var(--card-tone);
}

body.user-mode .assistant-card-icon {
  margin: 0;
  font-size: 24px;
  opacity: 1;
}

.assistant-card-index {
  font-family: var(--font-tech);
  font-size: 12px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}

.assistant-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  padding: 20px 20px 12px;
}

body.user-mode .assistant-card h3 {
  color: var(--ink-title);
}

body.user-mode .assistant-card p {
  color: var(--ink-muted);
  opacity: 1;
}

.assistant-card-foot {
  display: flex;
  min-height: 22px;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 20px 20px;
  color: var(--blue-600);
}

.assistant-card-foot .assistant-kind-tag {
  margin-right: auto;
}

.assistant-card-foot .ui-icon {
  width: 20px;
  height: 20px;
}

@media (prefers-reduced-motion: no-preference) {
  .assistant-card-foot .ui-icon {
    transition: transform var(--dur-fast) var(--ease);
  }

  body.user-mode .assistant-card:hover .assistant-card-foot .ui-icon {
    transform: translateX(2px);
  }
}

/* Sobre papel, el distintivo Evaluador es chip neutro: sin versalitas ni tono propio. */
.assistant-card .assistant-kind-tag {
  height: 22px;
  padding: 0 8px;
  color: var(--ink-title);
  background: var(--blue-050);
  border: 0;
  border-radius: var(--radius-control);
  font-size: 11px;
  letter-spacing: 0;
  line-height: 22px;
  text-transform: none;
}

/* Mis evaluadores: filas agrupadas en un solo contenedor (§6.5), con el tono del asistente en
   el recuadro de la figura y el estado en chip con texto. */
.home-evaluator-section,
body.user-mode .home-evaluator-section {
  margin-top: 56px;
  padding-top: 0;
  border-top: 0;
}

.home-evaluator-section .home-section-heading {
  margin-bottom: 16px;
}

.evaluator-home-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-card);
}

.evaluator-home-grid:empty,
.evaluator-home-grid[hidden] {
  display: none;
}

.evaluator-home-card {
  min-height: 64px;
  box-sizing: border-box;
  padding: 12px 16px 12px 20px;
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid var(--line);
  border-radius: 0;
}

.evaluator-home-card:last-child {
  border-bottom: 0;
}

.evaluator-home-heading {
  flex: 1 1 auto;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 16px;
}

.evaluator-home-icon {
  width: 32px;
  height: 32px;
  color: var(--card-ink);
  background: var(--card-tone);
  font-size: 16px;
}

.evaluator-home-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.evaluator-home-copy h3 {
  color: var(--ink-title);
  font-size: 14px;
  line-height: 22px;
}

.evaluator-home-copy .evaluator-home-state {
  height: 22px;
  flex: 0 0 auto;
  gap: 4px;
  margin: 0;
  padding: 0 8px;
  color: var(--ink-title);
  background: var(--blue-050);
  border-radius: var(--radius-control);
  font-size: 11px;
  font-weight: 400;
}

.evaluator-home-state::before {
  display: none;
}

.evaluator-home-card[data-state="ready"] .evaluator-home-state {
  color: var(--success-ink);
  background: var(--success-tint);
}

.evaluator-home-card[data-state="ready"] .evaluator-home-state::before {
  display: block;
  width: 12px;
  height: 12px;
  background: currentColor;
  border-radius: 0;
  -webkit-mask: url("/assets/icons/check.svg") center / contain no-repeat;
  mask: url("/assets/icons/check.svg") center / contain no-repeat;
}

.evaluator-home-actions {
  margin-left: 16px;
}

.evaluator-menu-trigger {
  width: 30px;
  height: 30px;
  color: var(--ink-title);
  background: var(--paper);
  border: 0.5px solid var(--line-strong);
  border-radius: var(--radius-control);
  font-size: 14px;
}

.evaluator-menu-trigger:hover,
.evaluator-menu-trigger[aria-expanded="true"] {
  color: var(--ink-title);
  background: var(--blue-050);
  border-color: var(--line-strong);
}

/* El cajón de archivados es un enlace de texto, no un panel: sin borde ni fondo, y sin recorte
   para que el menú de cada fila archivada pueda desplegarse. */
.evaluator-archive,
body.user-mode .evaluator-archive {
  margin: 12px 0 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
}

.evaluator-archive > summary,
body.user-mode .evaluator-archive > summary {
  padding: 8px 0;
  color: var(--blue-600);
  background: transparent;
  font-size: 13px;
}

.evaluator-archive .evaluator-home-grid {
  margin-top: 8px;
  padding: 0;
}

/* Bajo 1024 px la franja pasa a una columna: la trama queda como banda de 136 px al pie de la
   franja y el buscador se centra sobre ella. */
@media (max-width: 1023px) {
  .home-hero-header,
  body.user-mode .home-hero-header {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    min-height: 0;
    padding: 40px 0 0;
  }

  .home-hero-plano {
    top: auto;
    left: -100vmax;
    bottom: 0;
    height: 136px;
    border-top: 0.5px solid var(--blue-400);
    border-left: 0;
  }

  .home-search-stage {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    height: 136px;
    padding: 0 16px;
  }
}

@media (max-width: 640px) {
  .home-hero-header h1,
  body.user-mode .home-hero-header h1 {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.6px;
  }

  .home-hero-header .home-hero-copy > p:not(.eyebrow) {
    font-size: 14px;
    line-height: 22px;
  }

  .home-hero-figures {
    gap: 20px;
  }

  .assistant-card-head {
    height: 96px;
  }

  .evaluator-home-copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* ── Modales · pintura y anchos (§6.8) ───────────────────────────────────────────────────────────
   Contenedor blanco de radio 12, sin borde ni sombra. Ancho estándar de 560 px; los modales
   que comparan, editan contenido largo o muestran tablas usan 720 px, y la edición de una
   rejilla ancha conserva su ancho propio. */

.form-dialog {
  color: var(--ink-body);
  background: var(--paper);
  border: 0;
  border-radius: var(--radius-window);
  box-shadow: none;
}

.form-dialog.transfer-dialog,
.form-dialog.assistant-preview-dialog,
.form-dialog.comparison-dialog,
.form-dialog.evaluation-dialog,
.form-dialog.project-wizard-dialog,
.form-dialog.section-edit-dialog,
#action-model-dialog,
#action-test-dialog,
#prompt-information-dialog,
#builder-information-dialog,
#project-research-dialog,
#project-document-dialog,
#project-review-dialog,
#assistant-dialog,
#assistant-surface-dialog {
  width: min(720px, 98vw);
}

.form-dialog.section-edit-dialog.is-wide {
  width: min(77.5rem, calc(100vw - 2rem));
}

.quota-card {
  border-radius: var(--radius-card);
}

/* Vista previa del asistente: la presentación es la cabecera azul del modal y su única acción,
   «Comenzar», va centrada y en clay. */
.assistant-preview-dialog .dialog-actions {
  justify-content: center;
  margin-top: 8px;
  padding: 0;
  border-top: 0;
}

.assistant-preview-hero {
  background: var(--surface-context);
}

.assistant-preview-hero h2 {
  font-family: var(--font-system);
  font-weight: 500;
  letter-spacing: -0.3px;
}

.assistant-preview-hero .assistant-preview-copy {
  color: var(--blue-100);
  font-size: 14px;
  line-height: 22px;
}

.assistant-preview-dialog .dialog-actions button[value="start"] {
  min-height: 44px;
  padding: 0 28px;
  font-size: 14px;
}

.assistant-preview-dialog .dialog-actions button[value="start"]:disabled {
  color: #7089A6;
  background: var(--blue-400);
  border-color: var(--blue-400);
}

/* `.form-dialog .dialog-close` la vuelve `relative` y la centraba sobre el título: aquí se
   recupera la esquina superior derecha del modal. */
.assistant-preview-hero .dialog-close {
  position: absolute;
  top: 12px;
  right: 12px;
  margin: 0;
  color: var(--blue-100);
}

.assistant-preview-quota {
  color: var(--blue-200);
  font-size: 12px;
}

/* ── Avisos de contexto ─────────────────────────────────────────────────────────────────────────
   Intervenir como otra organización es un estado del sistema: barra azul 700 con ícono ámbar.
   Los comunicados se leen sobre papel con filete azul inferior. */

.context-banner {
  min-height: 44px;
  padding: 8px clamp(16px, 4vw, 48px);
  color: #FFFFFF;
  background: var(--surface-context);
  border-bottom: 0.5px solid var(--blue-900);
}

.context-banner > div {
  position: relative;
  padding-left: 26px;
  color: var(--blue-100);
  font-size: 13px;
  line-height: 20px;
}

.context-banner > div::before {
  position: absolute;
  top: 2px;
  left: 0;
  width: 16px;
  height: 16px;
  background-color: #E2D2A8;
  content: "";
  -webkit-mask: url("/assets/icons/alert-triangle.svg") center / contain no-repeat;
  mask: url("/assets/icons/alert-triangle.svg") center / contain no-repeat;
}

.context-banner strong {
  color: #FFFFFF;
  font-weight: 500;
}

.communication-banner {
  min-height: 44px;
  padding: 8px clamp(16px, 4vw, 48px);
  color: var(--ink-title);
  background: var(--paper);
  border-bottom: 1px solid var(--blue-600);
}

.communication-banner strong {
  font-weight: 500;
}

.communication-banner p {
  color: var(--ink-body);
  font-size: 13px;
}

/* Ventana de búsqueda web: mismas superficies, tarjetas de radio 10 dentro de la ventana. */
#web-search-sim .side,
#web-search-sim .preview-card {
  border-radius: var(--radius-card);
}

/* ── Propuesta del asistente dentro de la hoja (§6.3, §6.7) ─────────────────────────────────────
   Donde intervino la IA: superficie cálida, filete clay de 2 px con radio 0 y la marca con el
   punto clay de 6 px. La decisión que hace avanzar va en clay; la alternativa, secundaria. */

.document-section.has-proposal {
  background: var(--clay-tint);
  border-left: 2px solid var(--clay);
  border-radius: 0;
}

.proposal-mark {
  gap: 6px;
  min-height: 22px;
  padding: 0 8px;
  color: #7A3A1E;
  background: var(--clay-tint);
  border-radius: var(--radius-control);
  font-family: var(--font-system);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.proposal-mark::before {
  width: 6px;
  height: 6px;
  background: var(--clay);
}

.document-section.has-proposal .proposal-mark {
  background: var(--paper);
}

.section-decision {
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 0.5px solid var(--line);
  font-family: var(--font-system);
}

/* La instrucción de la metodología es voz del sistema: nota neutra con ícono de información. */
.section-decision-guide {
  position: relative;
  display: block;
  padding: 10px 12px 10px 36px;
  color: var(--ink-body);
  background: var(--blue-050);
  border: 0;
  border-radius: var(--radius-control);
  font-family: var(--font-system);
  font-size: 13px;
  font-style: normal;
  line-height: 20px;
}

.section-decision-guide::before {
  position: absolute;
  top: 12px;
  left: 12px;
  display: block;
  width: 16px;
  height: 16px;
  margin: 0;
  background-color: var(--blue-600);
  border-radius: 0;
  content: "";
  font-size: 0;
  -webkit-mask: url("/assets/icons/info-circle.svg") center / contain no-repeat;
  mask: url("/assets/icons/info-circle.svg") center / contain no-repeat;
}

.section-decision-actions {
  gap: 8px;
}

.section-decision-actions .primary-button,
.section-decision-actions .tertiary-button,
.section-decision .guided-review-options .secondary-button {
  min-width: 0;
  min-height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-control);
  font-size: 13px;
  font-weight: 500;
}

.section-decision-actions .primary-button {
  color: var(--on-clay);
  background: var(--clay);
  border-color: var(--clay);
}

.section-decision-actions .primary-button:hover {
  color: var(--on-clay);
  background: var(--clay-hover);
  border-color: var(--clay-hover);
}

.section-decision-actions .primary-button:disabled {
  color: #A79086;
  background: #EADFD9;
  border-color: #EADFD9;
}

.section-decision-actions .tertiary-button {
  color: var(--blue-700);
  background: var(--paper);
  border: 0.5px solid var(--line-strong);
  text-decoration: none;
}

.section-decision-actions .tertiary-button:hover {
  color: var(--blue-700);
  background: var(--blue-050);
  text-decoration: none;
}

/* ── Paso del asistente sobre la hoja ───────────────────────────────────────────────────────────
   Es el mismo modal: radio 12, sin sombra, cabecera azul 700 y botones de 36 px. */

.step-surface-inner {
  border: 0;
  border-radius: var(--radius-window);
  box-shadow: none;
  overflow: hidden;
}

.step-surface .secondary-button.inline-button,
.step-surface .dock-download-menu > summary {
  min-height: 36px;
}

.step-modal-close {
  color: var(--blue-100);
  border-radius: 6px;
}

.step-modal-close:hover {
  color: #FFFFFF;
  background: var(--blue-600);
}

.step-modal-bar .dock-title {
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
}

.step-modal-bar .dock-detail {
  color: var(--blue-200);
  font-size: 12px;
}

.field-disclaimer {
  color: var(--ink-body);
  background: var(--blue-050);
  border: 0;
  border-radius: var(--radius-control);
  font-size: 13px;
  line-height: 20px;
}

.field-disclaimer-icon {
  color: var(--blue-600);
  background: var(--paper);
  border-radius: 50%;
  font-family: var(--font-system);
  font-size: 11px;
  font-weight: 500;
}

/* ── Bandas de categoría ────────────────────────────────────────────────────────────────────────
   El tono distingue por posición, no por significado: tres azules, nunca el verde de «conforme».
   Filete de 2 px con radio 0. */

.category-band-header,
.category-band-header[data-tone="1"],
.category-band-header[data-tone="2"],
.category-band-header[data-tone="3"] {
  border-left-width: 2px;
  border-radius: 0;
}

.category-band-header[data-tone="1"] { border-left-color: var(--blue-600); background: #F7F9FB; }
.category-band-header[data-tone="2"] { border-left-color: var(--blue-400); background: var(--blue-050); }
.category-band-header[data-tone="3"] { border-left-color: var(--blue-300); background: #F7F9FB; }

.category-band-name,
.category-band-header[data-tone="1"] .category-band-name,
.category-band-header[data-tone="2"] .category-band-name,
.category-band-header[data-tone="3"] .category-band-name {
  color: var(--ink-title);
  font-size: 11px;
  letter-spacing: 0.5px;
}

.category-band-count {
  color: var(--blue-700);
  background: var(--blue-050);
  border-radius: 6px;
  font-size: 11px;
}

/* ── Ventana · Estadísticas asistidas ───────────────────────────────────────────────────────────
   Franja de sección con la pregunta encima, entrada única sobre la mesa, hoja de papel con la
   propuesta y panel lateral con el resumen y el único avance en clay (docs/74). Lo propuesto por
   la asistencia lleva tinte y filete clay; lo confirmado, filete verde; lo descartado, apagado. */

.statistics-workspace {
  padding: 0 clamp(16px, 4vw, 48px) 48px;
  background: var(--surface-desk);
}

.statistics-band,
.statistics-desk {
  max-width: 1180px;
  margin-inline: auto;
}

.statistics-band {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 24px;
  padding: 24px 0;
  color: #FFFFFF;
  background: var(--surface-context);
  box-shadow: 0 0 0 100vmax var(--surface-context);
  clip-path: inset(0 -100vmax);
}

.statistics-workspace:has(.statistics-entry:not([hidden])) .statistics-band {
  padding-bottom: 80px;
}

.statistics-band-text {
  display: grid;
  gap: 4px;
  min-width: 0;
  max-width: 760px;
}

.statistics-band .eyebrow {
  margin: 0;
  color: var(--blue-300);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.5px;
}

.statistics-band h1 {
  margin: 0;
  color: #FFFFFF;
  font-family: var(--font-system);
  font-size: 28px;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: -0.4px;
  text-wrap: balance;
}

.statistics-band-text > p:last-child {
  margin: 0;
  color: var(--blue-100);
  font-size: 14px;
  line-height: 22px;
  overflow-wrap: anywhere;
}

.statistics-band-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
}

.statistics-band-actions .statistics-field {
  margin: 0;
}

.statistics-band-actions .statistics-field > span {
  color: var(--blue-100);
}

.statistics-band .statistics-band-button {
  color: #FFFFFF;
  background: var(--blue-600);
  border-color: var(--blue-400);
}

.statistics-band .statistics-band-button:hover {
  color: #FFFFFF;
  background: var(--blue-500);
  border-color: var(--blue-400);
}

/* Avance en clay: preparar, iniciar y redactar. Un solo avance a la vista por pantalla. */
.statistics-advance {
  color: var(--on-clay);
  background: var(--clay);
  border-color: var(--clay);
}

.statistics-advance:hover {
  color: var(--on-clay);
  background: var(--clay-hover);
  border-color: var(--clay-hover);
}

.statistics-small-button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.statistics-text-button {
  min-height: 30px;
  padding: 0 4px;
  font-size: 12px;
}

.statistics-status {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 20px;
}

.statistics-status:empty {
  display: none;
}

.statistics-status[role="alert"] {
  color: var(--warning-ink);
}

/* Entrada: la caja sube sobre la franja. */
.statistics-entry {
  display: grid;
  gap: 16px;
  max-width: 960px;
  margin-inline: auto;
}

.statistics-ask {
  position: relative;
  display: grid;
  gap: 6px;
  margin-top: -80px;
  padding: 16px 20px;
  background: var(--paper);
  border: 1px solid var(--line-field);
  border-radius: var(--radius-window);
}

.statistics-ask:focus-within {
  border-color: var(--blue-500);
  box-shadow: var(--focus-halo);
}

.statistics-ask > label {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.statistics-ask textarea {
  width: 100%;
  min-height: 56px;
  padding: 0;
  color: var(--ink-body);
  background: transparent;
  border: 0;
  font-family: var(--font-system);
  font-size: 18px;
  line-height: 28px;
  resize: vertical;
}

.statistics-ask textarea:focus,
.statistics-ask textarea:focus-visible {
  outline: 0;
  box-shadow: none;
}

.statistics-ask-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 0.5px solid var(--line);
}

.statistics-ask-foot p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 18px;
}

.statistics-try,
.statistics-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.statistics-try > span,
.statistics-filters > span {
  margin-right: 4px;
  color: var(--ink-muted);
  font-family: var(--font-system);
  font-size: 12px;
}

.statistics-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  color: var(--blue-700);
  background: var(--paper);
  border: 0.5px solid var(--line-strong);
  border-radius: var(--radius-control);
  font-family: var(--font-system);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-align: left;
  cursor: pointer;
}

.statistics-chip:hover {
  background: var(--blue-050);
}

.statistics-chip[aria-pressed="true"] {
  color: #FFFFFF;
  background: var(--blue-700);
  border-color: var(--blue-700);
}

.statistics-more {
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-card);
}

.statistics-more > h2 {
  margin: 0;
  padding: 14px 20px;
  color: var(--ink-title);
  border-bottom: 0.5px solid var(--line);
  font-family: var(--font-system);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}

.statistics-more .statistics-option {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid var(--line);
  border-radius: 0;
}

.statistics-more .statistics-option > summary {
  padding: 14px 20px;
  color: var(--ink-title);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.statistics-more .statistics-option > summary:hover {
  background: var(--blue-050);
}

.statistics-more .statistics-option[open] {
  padding-bottom: 16px;
}

.statistics-more .statistics-option[open] > :not(summary) {
  margin-inline: 20px;
}

.statistics-option-lede {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 18px;
}

.statistics-more-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 12px 20px;
}

.statistics-sources {
  flex: 1 1 320px;
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 18px;
}

/* Trabajo: lo entendido, la hoja y el panel. */
.statistics-work {
  display: grid;
  gap: 16px;
}

.statistics-understood {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.statistics-understood-label {
  margin-right: 4px;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 500;
}

.statistics-token {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  color: var(--ink-title);
  background: var(--paper);
  border: 0.5px solid var(--line-strong);
  border-radius: var(--radius-control);
  font-family: var(--font-system);
  font-size: 13px;
  line-height: 20px;
  text-align: left;
}

button.statistics-token:not(:disabled) {
  cursor: pointer;
}

button.statistics-token:not(:disabled):hover {
  background: var(--blue-050);
}

button.statistics-token:disabled {
  color: var(--ink-title);
  opacity: 1;
}

.statistics-token small {
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 16px;
}

.statistics-token strong {
  color: var(--ink-title);
  font-weight: 500;
}

.statistics-token[aria-expanded="true"] {
  border-color: var(--blue-500);
  box-shadow: var(--focus-halo);
}

.statistics-token-editor {
  display: grid;
  gap: 10px;
  max-width: 640px;
  margin-top: 8px;
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--line-field);
  border-radius: var(--radius-card);
}

.statistics-token-editor p {
  margin: 0;
  color: var(--ink-body);
  font-size: 13px;
}

.statistics-layout {
  display: grid;
  grid-template-columns: minmax(0, 816px) 300px;
  align-items: start;
  justify-content: center;
  gap: 24px;
}

.statistics-layout:not(:has(.statistics-rail > *)) {
  grid-template-columns: minmax(0, 816px);
}

.statistics-sheet-slot > div > .document-sheet {
  margin: 0;
}

.statistics-rail {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 16px;
}

.statistics-rail:empty {
  display: none;
}

.statistics-rail-card {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 16px;
  color: var(--ink-body);
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-card);
  font-family: var(--font-system);
  font-size: 13px;
}

.statistics-rail-card h2,
.statistics-rail-card > summary {
  margin: 0;
  color: var(--ink-title);
  font-family: var(--font-system);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}

.statistics-rail-card > summary {
  cursor: pointer;
}

.statistics-rail-card > .inline-button {
  justify-self: start;
}

.statistics-rail .statistics-advance {
  justify-self: stretch;
  justify-content: center;
  min-height: 40px;
}

.statistics-summary dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.statistics-summary dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  line-height: 20px;
}

.statistics-summary dt {
  color: var(--ink-muted);
}

.statistics-summary dd {
  margin: 0;
  color: var(--ink-title);
  font-family: var(--font-tech);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.statistics-summary dd.is-warning,
.statistics-rail-note.is-warning {
  color: var(--warning-ink);
}

.statistics-summary dd.is-ready {
  color: var(--success-ink);
}

.statistics-rail-note {
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 18px;
}

/* La hoja: grupos, partes y sus tres estados. */
.statistics-note {
  margin: 20px 0 0;
  padding: 12px 16px;
  color: var(--ink-body);
  background: var(--blue-050);
  border-radius: var(--radius-control);
  font-family: var(--font-system);
  font-size: 13px;
  line-height: 20px;
}

.statistics-group {
  margin-top: 40px;
}

.statistics-group-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-bottom: 10px;
  border-bottom: 0.5px solid var(--line-strong);
}

.statistics-group-heading h2 {
  margin: 0 auto 0 0;
  color: var(--ink-title);
  font-family: var(--font-doc);
  font-size: 21px;
  font-weight: 500;
  line-height: 30px;
}

.statistics-count,
.statistics-part-count {
  color: var(--ink-muted);
  font-family: var(--font-tech);
  font-size: 12px;
  white-space: nowrap;
}

.statistics-group-lede {
  margin: 12px 0 0;
  color: var(--ink-body);
  font-family: var(--font-system);
  font-size: 13px;
  line-height: 20px;
}

.statistics-group > .statistics-filters {
  margin-top: 12px;
}

.statistics-group > .statistics-text-button {
  margin-top: 12px;
}

.statistics-theme-label {
  margin: 20px 0 0;
  color: var(--ink-muted);
  font-family: var(--font-system);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.statistics-part {
  margin-top: 12px;
  padding: 16px 20px 14px;
  background: var(--clay-tint);
  border: 0.5px solid var(--clay-tint);
  border-left: 2px solid var(--clay);
  border-radius: 0;
}

.statistics-part.is-confirmed {
  background: var(--paper);
  border-color: var(--line);
  border-left-color: var(--success);
}

.statistics-part.is-discarded {
  background: var(--paper);
  border-color: var(--line);
  border-left-color: var(--line-strong);
}

.statistics-part-top,
.statistics-part-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  font-family: var(--font-system);
}

.statistics-part-foot {
  gap: 8px 16px;
  margin-top: 12px;
}

.statistics-part .proposal-mark {
  background: var(--paper);
}

.statistics-part.is-confirmed .proposal-mark {
  color: var(--success-ink);
  background: var(--success-tint);
}

.statistics-part.is-confirmed .proposal-mark::before {
  background: var(--success);
}

.statistics-part.is-discarded .proposal-mark {
  color: var(--ink-muted);
  background: var(--blue-050);
}

.statistics-part.is-discarded .proposal-mark::before {
  background: var(--line-strong);
}

.statistics-part h3 {
  margin: 8px 0 2px;
  color: var(--ink-title);
  font-family: var(--font-doc);
  font-size: 17px;
  font-weight: 500;
  line-height: 26px;
}

.statistics-part p {
  margin: 2px 0 0;
}

.statistics-part.is-discarded h3,
.statistics-part.is-discarded p {
  color: var(--ink-muted);
}

.statistics-part .statistics-field {
  max-width: 240px;
  margin: 10px 0 0;
}

.statistics-part-note {
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 22px;
}

.statistics-part-source {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 18px;
}

.statistics-part-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.statistics-limits {
  margin-top: 36px;
}

.statistics-limits h2 {
  margin: 0;
  color: var(--ink-title);
  font-family: var(--font-doc);
  font-size: 17px;
  font-weight: 500;
  line-height: 26px;
}

.statistics-limits ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

/* Estadísticas · Grupos desplegables aprobados el 01-10-2026. Los controles siguen en
   Inter dentro de la hoja; selección nativa por teclado y sin estilos en línea (CSP).
   Ajuste visual aprobado: fuentes en azul profundo y selección cálida como el chat de actividad.
   Se redondea la cabecera sin recortar el grupo, para conservar el anillo de foco exterior. */
.statistics-indicator-picker {
  margin: 20px 0;
  color: var(--ink-body);
  font-family: var(--font-system);
  font-size: 13px;
  line-height: 20px;
}
.statistics-indicator-picker[hidden] { display: none; }
.statistics-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}
.statistics-source-group {
  min-width: 0;
  margin: 0;
  border: 0.5px solid #C5CFDA;
  border-radius: 10px;
  background: var(--paper);
}
/* Al desplegar, los botones aprovechan todo el ancho sin dejar una columna vacía. */
.statistics-source-group[open] { grid-column: 1 / -1; }
.statistics-source-group > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 12px 14px;
  color: #FFFFFF;
  background: var(--surface-context);
  border-radius: 9px;
  list-style: none;
  cursor: pointer;
}
.statistics-source-group > summary::-webkit-details-marker { display: none; }
.statistics-source-group[open] > summary { background: var(--surface-institutional); border-radius: 9px 9px 0 0; }
.statistics-source-toggle { position: relative; flex: 0 0 16px; width: 16px; height: 16px; color: var(--clay); }
.statistics-source-toggle::before,
.statistics-source-toggle::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 8px;
  border-top: 1.5px solid currentColor;
}
.statistics-source-toggle::after { transform: rotate(90deg); }
.statistics-source-group[open] > summary .statistics-source-toggle::after { transform: rotate(0deg); }
.statistics-source-name { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.statistics-source-count,
.statistics-category-count { flex-shrink: 0; color: var(--ink-muted); font-size: 11px; font-weight: 400; }
.statistics-source-count { padding: 3px 9px; border-radius: 20px; background: #FFFFFF16; color: #E0E8F1; }
.statistics-source-body { padding: 8px 14px 14px; }
.statistics-indicator-category { margin: 6px 0 0; }
.statistics-indicator-category > summary {
  min-height: 36px;
  padding: 8px 0;
  color: var(--ink-title);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  overflow-wrap: anywhere;
  list-style: none;
}
.statistics-indicator-category > summary::-webkit-details-marker { display: none; }
.statistics-category-toggle { display: inline-block; width: 5px; height: 5px; margin: 0 9px 1px 1px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(-45deg); color: #AC5637; }
.statistics-indicator-category[open] > summary .statistics-category-toggle { transform: rotate(45deg); }
.statistics-category-count { margin-left: 6px; color: #637589; }
.statistics-indicator-choices { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 6px; }
.statistics-indicator-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 0.5px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink-title);
  font-size: 13px;
  line-height: 20px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.statistics-indicator-choice:hover { background: #F2EDE6; }
.statistics-indicator-choice:has(input:checked) { background: var(--clay-tint); border-color: #C77151; color: var(--on-clay); }
.statistics-indicator-choice > input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
}
.statistics-indicator-choice:has(input:focus-visible),
.statistics-source-group > summary:focus-visible,
.statistics-indicator-category > summary:focus-visible,
.statistics-indicator-information > summary:focus-visible,
.statistics-selected-remove:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }
.statistics-indicator-mark {
  display: grid;
  place-items: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 0.5px solid var(--line-strong);
  border-radius: 4px;
  color: var(--blue-600);
  font-size: 12px;
  line-height: 16px;
  transform: scale(0.9);
}
.statistics-indicator-choice:has(input:checked) .statistics-indicator-mark {
  background: var(--clay);
  border-color: #B35B3E;
  color: var(--on-clay);
  transform: scale(1);
}
.statistics-indicator-information { margin-top: 12px; font-size: 12px; }
.statistics-indicator-information > summary { color: var(--blue-600); cursor: pointer; }
.statistics-indicator-information > div { padding: 12px 0; border-top: 0.5px solid var(--line); }
.statistics-indicator-information p { margin: 4px 0; font: inherit; overflow-wrap: anywhere; }
.statistics-indicator-information .statistics-indicator-definition-name { font-weight: 500; }
.statistics-indicator-metadata { color: var(--ink-muted); }
.statistics-selection-tray { margin-top: 16px; padding: 14px; border: 0.5px solid #E6C5B7; border-left: 3px solid var(--clay); border-radius: 10px; background: #FBF1EB; }
.statistics-selection-tray .statistics-selection-title { margin: 0 0 10px; font: 500 13px/20px var(--font-system); color: #73351F; }
.statistics-selected-indicators { display: flex; flex-wrap: wrap; gap: 8px; }
.statistics-selected-indicators > p { margin: 0; font: inherit; color: var(--ink-muted); }
.statistics-selected-indicator { display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 6px 6px 10px; border: 1px solid #E6C5B7; border-radius: 8px; background: #FFFDFA; }
.statistics-selected-indicator > span { min-width: 0; overflow-wrap: anywhere; }
.statistics-selected-name { display: block; color: var(--ink-title); }
.statistics-selected-source { display: block; font-size: 11px; color: var(--ink-muted); }
.statistics-selected-remove { flex-shrink: 0; margin: 0; padding: 0; width: 30px; min-height: 30px; border: 0; border-radius: 6px; background: transparent; color: #8A452D; font: 400 20px/30px var(--font-system); cursor: pointer; }
.statistics-selected-remove:hover { background: var(--paper); }
.statistics-plan-editor { padding: 20px 0 0; border: 0; border-top: 0.5px solid var(--line); background: transparent; font-family: var(--font-system); }
.statistics-plan-editor .statistics-selected-remove { margin: 0; }
@media (max-width: 600px) { .statistics-source-grid { grid-template-columns: minmax(0, 1fr); } }
@media (pointer: coarse) {
  .statistics-indicator-choice,
  .statistics-selected-remove,
  .statistics-indicator-category > summary,
  .statistics-indicator-information > summary { min-height: 44px; }
  .statistics-selected-remove { min-width: 44px; }
}

/* Movimiento solicitado el 01-10-2026: solo la acción afectada; los datos cambian de inmediato.
   No se anima la altura ni la distribución de la hoja y no se agregan estilos en línea. */
@media (prefers-reduced-motion: no-preference) {
  .statistics-indicator-choice { transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
  .statistics-indicator-mark { transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
  .statistics-source-toggle::after,
  .statistics-category-toggle { transition: transform var(--dur-base) var(--ease); }
  .statistics-content-entering,
  .statistics-sheet-entering { animation: statistics-content-enter var(--dur-slow) var(--ease) both; }
  .statistics-chip-entering { animation: statistics-chip-enter var(--dur-base) var(--ease) both; }
  .statistics-chip-leaving { animation: statistics-chip-leave var(--dur-fast) var(--ease) both; pointer-events: none; }
  .statistics-count-changed { animation: statistics-count-change var(--dur-base) var(--ease); }
}
@keyframes statistics-content-enter { from { opacity: 0; transform: translateY(4px); } }
@keyframes statistics-chip-enter { from { opacity: 0; } }
@keyframes statistics-chip-leave { to { opacity: 0; } }
@keyframes statistics-count-change { from { background-color: var(--clay-tint); } }

/* Notas y referencias documentales: subordinan la trazabilidad sin ocultarla. */
.document-note {
  margin: 6px 0 0;
  color: var(--ink-muted);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 12px;
  font-style: italic;
  line-height: 1.45;
}

.document-references p {
  margin: 0 0 10px 24px;
  color: var(--ink-body);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 13px;
  line-height: 1.55;
  text-indent: -24px;
  overflow-wrap: anywhere;
}

/* Proceso visible y subetapas breves; el estado actual domina sin parecer un carrusel. */
.statistics-process-steps {
  max-width: 1140px;
  margin: 0 auto 20px;
  border-bottom: 0.5px solid var(--line-strong);
}

.statistics-process-step,
.statistics-choice-step {
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--font-system);
  font-size: 13px;
  text-align: left;
}

.statistics-process-step[aria-current="step"],
.statistics-choice-step[aria-current="step"] {
  border-bottom-color: var(--blue-500);
  color: var(--ink-title);
  font-weight: 600;
}

.statistics-process-step:not(:disabled),
.statistics-choice-step:not(:disabled) { cursor: pointer; }

.statistics-process-step:focus-visible,
.statistics-choice-step:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }

.statistics-process-step:disabled,
.statistics-choice-step:disabled { opacity: 1; }

.statistics-choice-steps {
  margin: 24px 0 0;
  border-bottom: 0.5px solid var(--line);
}

.statistics-draft-note { margin: 6px 0 0; color: var(--ink-muted); font-size: 11px; }

.statistics-choice-steps + .statistics-draft-note + .statistics-note {
  margin-top: 14px;
  padding: 0;
  background: transparent;
}

.statistics-review-card {
  margin-top: 24px;
  border-color: var(--line-strong);
}

.statistics-review-details {
  padding: 10px 0;
  border-top: 0.5px solid var(--line);
  color: var(--ink-body);
  font-family: var(--font-system);
  font-size: 13px;
}

.statistics-review-details > summary { cursor: pointer; color: var(--ink-title); }

.statistics-result-limits { margin-top: 20px; color: var(--ink-body); }
.statistics-result-limits h3 { margin: 0; font-family: var(--font-doc); font-size: 16px; }
.statistics-result-limits ul { margin: 8px 0 0; padding-left: 20px; font-size: 13px; }
.statistics-scope-limit { color: var(--ink-muted); font-size: 12px; line-height: 1.5; }

@media (max-width: 700px) {
  .statistics-process-step,
  .statistics-choice-step { width: 100%; padding-inline: 4px; font-size: 12px; }
}

.statistics-question {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  font-family: var(--font-system);
}

.statistics-question > .inline-button {
  justify-self: start;
}

.statistics-question-title {
  margin: 0;
  color: var(--ink-title);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.statistics-chooser {
  display: grid;
  gap: 8px;
}

.statistics-chooser > .inline-button {
  justify-self: start;
}

.statistics-matches,
.statistics-selected-communes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.statistics-selected-communes > p {
  flex-basis: 100%;
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
}

/* Avance del diagnóstico: tramos rectos separados por 2 px, como las barras de créditos. */
.statistics-segments {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 2px;
  margin-top: 20px;
}

.statistics-segments > span {
  height: 6px;
  background: var(--line);
}

.statistics-segments > span.is-done {
  background: var(--blue-600);
}

.statistics-segments > span.is-running {
  background: var(--blue-300);
}

.statistics-run-status {
  margin: 8px 0 0;
  color: var(--ink-muted);
  font-family: var(--font-system);
  font-size: 12px;
  line-height: 18px;
}

.statistics-task-list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  border-top: 0.5px solid var(--line);
  font-family: var(--font-system);
}

.statistics-task-list > li {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  color: var(--ink-title);
  border-bottom: 0.5px solid var(--line);
  font-size: 13px;
  line-height: 20px;
}

.statistics-task-state {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  height: 22px;
  padding: 0 8px;
  color: var(--ink-muted);
  background: var(--blue-050);
  border-radius: var(--radius-control);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.statistics-task-state.is-done {
  color: var(--success-ink);
  background: var(--success-tint);
}

.statistics-field {
  gap: 6px;
  color: var(--ink-muted);
  font-size: 12px;
}

.statistics-field input:not([type="checkbox"]):not([type="radio"]),
.statistics-field select,
.statistics-field textarea {
  min-height: 36px;
  padding: 0 12px;
  color: var(--ink-body);
  background-color: var(--paper);
  border: 1px solid var(--line-field);
  border-radius: var(--radius-control);
  font-size: 13px;
}

.statistics-field textarea {
  padding: 8px 12px;
}

@media (max-width: 1100px) {
  .statistics-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .statistics-rail {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

@media (max-width: 640px) {
  .statistics-band h1 {
    font-size: 22px;
    line-height: 28px;
  }

  .statistics-workspace:has(.statistics-entry:not([hidden])) .statistics-band {
    padding-bottom: 72px;
  }

  .statistics-ask {
    margin-top: -72px;
    padding: 14px 16px;
  }

  .statistics-ask textarea {
    font-size: 16px;
    line-height: 24px;
  }

  .statistics-ask-foot .statistics-advance {
    width: 100%;
    justify-content: center;
  }

  .statistics-task-list > li {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .statistics-sheet-slot .document-sheet {
    --sheet-pad: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   Medidas dentro de la capa `sigplan`
   Estas reglas se agregan al final de la misma capa que la hoja heredada. Ganan a la regla base
   que reemplazan —misma especificidad, posición posterior— pero ceden ante las variantes más
   específicas que ya existen: un modal ancho sigue ancho, una celda de planilla sigue compacta.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

@layer sigplan {
  /* Texto de interfaz por omisión (§4.2): 13 px. Los encabezados sin tamaño propio siguen la
     escala de sistema. Las reglas con clase conservan su tamaño. */
  body {
    font-size: 13px;
    line-height: 1.5;
  }

  h1 { font-size: 28px; line-height: 1.2; }
  h2 { font-size: 18px; line-height: 1.35; }
  h3 { font-size: 16px; line-height: 1.4; }
  h4 { font-size: 14px; line-height: 1.45; }

  /* 02 · Dos pesos en la interfaz: 400 y 500 (§4.2). */
  strong,
  b,
  h1,
  h2,
  h3,
  h4,
  th {
    font-weight: 500;
  }

  /* Rótulo en versalitas (§4.4): 11 px, tracking +0,5, tinta secundaria sobre papel. */
  .eyebrow,
  .step-kicker {
    color: var(--ink-muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  /* 04 · Campos (§6.2): 36 px, radio 8, borde de 1 px en --line-field (WCAG 1.4.11). */
  input:not([type="checkbox"], [type="radio"], [type="color"], [type="range"], [type="file"], [type="hidden"]),
  select,
  textarea {
    color: var(--ink-body);
    background-color: var(--paper);
    border: 1px solid var(--line-field);
    border-radius: var(--radius-control);
    font-family: var(--font-system);
    font-size: 13px;
    line-height: 20px;
    box-shadow: none;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  }

  input:not([type="checkbox"], [type="radio"], [type="color"], [type="range"], [type="file"], [type="hidden"]),
  select {
    min-height: 36px;
    padding: 0 12px;
  }

  textarea {
    padding: 8px 12px;
  }

  .form-dialog input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  .form-dialog select {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line-field);
    border-radius: var(--radius-control);
  }

  .form-dialog textarea {
    min-height: 76px;
    padding: 8px 12px;
    border: 1px solid var(--line-field);
    border-radius: var(--radius-control);
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--ink-muted);
    opacity: 1;
  }

  input:not([type="checkbox"], [type="radio"], [type="color"], [type="range"], [type="file"], [type="hidden"]):focus,
  select:focus,
  textarea:focus,
  .form-dialog input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):focus,
  .form-dialog select:focus,
  .form-dialog textarea:focus {
    border-color: var(--blue-500);
    outline: none;
    box-shadow: var(--focus-halo);
  }

  input:disabled,
  select:disabled,
  textarea:disabled {
    color: #9AA6B4;
    background-color: #F7F9FB;
    border-color: var(--line);
  }

  input[aria-invalid="true"],
  select[aria-invalid="true"],
  textarea[aria-invalid="true"],
  .field-group.is-invalid input,
  .field-group.is-invalid select,
  .field-group.is-invalid textarea {
    border-color: var(--danger);
    box-shadow: inset 0 0 0 0.5px var(--danger);
  }

  input[type="checkbox"],
  input[type="radio"] {
    accent-color: var(--blue-600);
  }

  /* La etiqueta va encima del campo, 12 px en tinta secundaria y sin negrita. */
  .field-group > label,
  .field-group > legend,
  .form-dialog .field-group > label,
  .form-dialog legend {
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
  }

  .field-group.is-invalid > span,
  .field-group.is-invalid > label {
    color: var(--danger-ink);
  }

  .field-group small,
  .form-dialog .field-group small,
  .form-dialog .checkbox-field small {
    color: var(--ink-muted);
    font-size: 12px;
    line-height: 18px;
  }

  .field-group {
    gap: 6px;
  }

  /* 06 · Tarjetas y tablas (§6.4, §6.5). */
  .data-panel,
  .summary-grid article,
  .quota-grid article,
  .project-card,
  .builder-row,
  .identity-card {
    background: var(--paper);
    border: 0.5px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: none;
  }

  th {
    color: var(--ink-title);
    background: transparent;
    border-bottom: 0.5px solid var(--line);
    font-weight: 500;
  }

  .data-panel th,
  .table-scroll th {
    color: var(--ink-muted);
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  .data-panel td {
    height: 48px;
    border-bottom: 0.5px solid var(--line);
    color: var(--ink-body);
    font-size: 13px;
    line-height: 20px;
  }

  .data-panel td strong {
    color: var(--ink-title);
    font-weight: 500;
  }

  .data-panel td small {
    color: var(--ink-muted);
    font-size: 12px;
    line-height: 18px;
  }

  tbody tr:hover,
  tbody tr:focus-within {
    background: #F7F9FB;
  }

  tbody tr.is-selected td:first-child,
  tbody tr[aria-selected="true"] td:first-child {
    box-shadow: inset 2px 0 0 var(--blue-600);
  }

  .panel-heading {
    background: var(--paper);
    border-bottom: 0.5px solid var(--line);
  }

  .panel-heading h2,
  .card-heading h2 {
    color: var(--ink-title);
    font-family: var(--font-system);
    font-weight: 500;
  }

  .project-card strong {
    color: var(--ink-title);
    font-weight: 500;
  }

  /* 08 · Modal base (§6.8): 560 px de ancho estándar. Los modales que declaran su propio ancho
     con una regla más específica lo conservan. */
  .form-dialog {
    width: min(560px, 98vw);
  }

  .form-dialog > form {
    gap: 16px;
    padding: 0 20px;
  }

  .form-dialog .dialog-heading {
    min-height: 0;
    align-items: flex-start;
    margin: 0 0 4px;
    padding: 16px 20px;
  }

  .form-dialog > form > .dialog-heading {
    margin-right: -20px;
    margin-left: -20px;
  }

  /* Pie separado por un borde fino; Cancelar a la izquierda de la acción principal. */
  .form-dialog .dialog-actions {
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
  }

  .form-dialog > form > .dialog-actions {
    margin: 4px -20px 0;
    padding: 16px 20px;
    border-top: 0.5px solid var(--line);
  }

  .form-dialog > .identity-card,
  .form-dialog > .dialog-copy,
  .form-dialog > .comparison-warning,
  .form-dialog > .table-scroll,
  .form-dialog > .empty-state {
    margin-right: 20px;
    margin-left: 20px;
  }

  .form-dialog > .dialog-actions {
    margin: 16px 0 0;
    padding: 16px 20px;
    border-top: 0.5px solid var(--line);
  }

  @media (max-width: 700px) {
    .form-dialog > form {
      padding: 0 16px;
    }

    .form-dialog .dialog-heading {
      padding: 14px 16px;
    }

    .form-dialog > form > .dialog-heading {
      margin-right: -16px;
      margin-left: -16px;
    }

    .form-dialog > form > .dialog-actions {
      margin: 4px -16px 0;
      padding: 12px 16px;
    }
  }
}
/* «Te voy contando» · espera conversada aprobada el 01-10-2026 (docs/72 §8.1).
   El clay identifica la voz del asistente. Los controles conservan el azul institucional. */
html:has(.assistant-work-dialog[open]) { overflow: hidden; }
.assistant-work-dialog {
  width: min(560px, calc(100% - 24px));
  max-width: none;
  max-height: min(780px, calc(100dvh - 32px));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--surface-paper);
  color: var(--ink-body);
  font-family: var(--font-system);
  box-shadow: none;
  overflow: hidden;
}

.assistant-work-dialog[open] { display: flex; flex-direction: column; }
.assistant-work-dialog::backdrop { background: rgb(11 37 69 / 58%); }
.assistant-work-brandbar,
.assistant-work-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  background: var(--surface-institutional);
  color: var(--blue-100);
  padding: 12px 20px;
}
.assistant-work-brandbar { min-height: 60px; padding-block: 8px; }
.assistant-work-wordmark {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--surface-paper);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
}
.assistant-work-brand-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--clay); }
.assistant-work-close,
.assistant-work-hide {
  flex-shrink: 0;
  min-height: 44px;
  min-width: 44px;
  padding: 9px 14px;
  background: transparent;
  color: var(--blue-100);
  border: 1px solid var(--blue-400);
  border-radius: 8px;
  font: 400 13px/1.5 var(--font-system);
  cursor: pointer;
}
.assistant-work-close { border: 0; padding: 0; font-size: 26px; }
.assistant-work-close:hover,
.assistant-work-hide:hover { background: var(--surface-context-raised); }
.assistant-work-close:focus-visible,
.assistant-work-hide:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.assistant-work-hero { padding: 22px 24px 24px; background: var(--surface-context); flex-shrink: 0; }
.assistant-work-context { margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: var(--blue-100); }
.assistant-work-hero h2 {
  margin: 0;
  font: 400 28px/1.2 var(--font-system);
  letter-spacing: -0.8px;
  color: var(--paper);
}
.assistant-work-live { display: flex; align-items: center; gap: 9px; margin-top: 16px; color: var(--blue-100); font-size: 12px; }
.assistant-work-wave { display: flex; gap: 3px; align-items: center; height: 18px; width: 26px; flex-shrink: 0; }
.assistant-work-wave span { height: 7px; width: 3px; border-radius: 2px; background: var(--clay); }
.assistant-work-wave span:nth-child(2),
.assistant-work-wave span:nth-child(4) { height: 13px; }
.assistant-work-wave span:nth-child(3) { height: 18px; }
.assistant-work-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px; }
.assistant-work-body:focus-visible { outline: 2px solid var(--blue-500); outline-offset: -2px; }
.assistant-work-user-label { text-align: right; margin: 0 4px 6px; color: var(--ink-muted); font-size: 11px; }
.assistant-work-request {
  margin-left: auto;
  max-width: 280px;
  padding: 12px 16px;
  border-radius: 10px 10px 0 10px;
  background: var(--surface-desk);
  color: var(--ink-title);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.assistant-work-speaker { display: flex; align-items: center; gap: 10px; margin: 20px 0 12px; color: var(--ink-title); font-size: 12px; font-weight: 500; }
.assistant-work-avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--clay);
  display: grid;
  grid-template-columns: repeat(3, 4px);
  grid-template-rows: repeat(3, 4px);
  gap: 3px;
  place-content: center;
}
.assistant-work-avatar i { width: 4px; height: 4px; border-radius: 1px; background: var(--on-clay); }
.assistant-work-message {
  padding: 15px 18px;
  margin: 0 0 10px;
  border-radius: 0 10px 10px 10px;
  background: var(--clay-tint);
  color: var(--on-clay);
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.assistant-work-message > p { margin: 0; }
.assistant-work-message > p + p { margin-top: 8px; }
.assistant-work-current { padding: 20px; margin-bottom: 0; background: var(--clay); }
/* La voz actual hereda la tipografía de los mensajes anteriores para mantener consistencia. */
.assistant-work-current .assistant-work-voice { font-size: inherit; line-height: inherit; }
.assistant-work-typing { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 11px; }
.assistant-work-dots { display: flex; gap: 4px; flex-shrink: 0; }
.assistant-work-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.assistant-work-footer small { flex: 1; min-width: 0; font-size: 12px; line-height: 1.5; max-width: 300px; }

/* Solo los mensajes recién confirmados entran. Las ondas expresan presencia, no porcentaje
   ni hitos de razonamiento. Ocultar o perder contacto con la API detiene todos los bucles. */
@media (prefers-reduced-motion: no-preference) {
  .assistant-work-dialog[open] { animation: assistant-work-arrive var(--dur-slow) var(--ease) both; }
  .assistant-work-dialog[open] .assistant-work-message { animation: assistant-work-arrive var(--dur-slow) var(--ease) both; }
  .assistant-work-dialog[open] .assistant-work-message:nth-child(2) { animation-delay: 180ms; }
  .assistant-work-dialog[open] .assistant-work-message:nth-child(3) { animation-delay: 360ms; }
  .assistant-work-dialog[open][data-working="true"] .assistant-work-wave span { animation: assistant-work-wave 1.3s ease-in-out infinite; }
  .assistant-work-dialog[open][data-working="true"] .assistant-work-wave span:nth-child(2) { animation-delay: 150ms; }
  .assistant-work-dialog[open][data-working="true"] .assistant-work-wave span:nth-child(3) { animation-delay: 300ms; }
  .assistant-work-dialog[open][data-working="true"] .assistant-work-wave span:nth-child(4) { animation-delay: 450ms; }
  .assistant-work-dialog[open][data-working="true"] .assistant-work-wave span:nth-child(5) { animation-delay: 600ms; }
  .assistant-work-dialog[open][data-working="true"] .assistant-work-dots i { animation: assistant-work-dot 1.2s ease-in-out infinite; }
  .assistant-work-dialog[open][data-working="true"] .assistant-work-dots i:nth-child(2) { animation-delay: 160ms; }
  .assistant-work-dialog[open][data-working="true"] .assistant-work-dots i:nth-child(3) { animation-delay: 320ms; }
  .assistant-work-dialog[open][data-working="true"] .assistant-work-avatar i { animation: assistant-work-presence 2.4s ease-in-out infinite alternate; }
  .assistant-work-dialog[open][data-working="true"] .assistant-work-avatar i:nth-child(3n) { animation-delay: 400ms; }
}
@keyframes assistant-work-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes assistant-work-wave { 0%, 100% { opacity: 0.6; transform: scaleY(0.55); } 50% { opacity: 1; transform: scaleY(1); } }
@keyframes assistant-work-dot { 0%, 70%, 100% { opacity: 0.5; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }
@keyframes assistant-work-presence { from { opacity: 0.45; } to { opacity: 1; } }
@media (min-width: 520px) {
  .assistant-work-body { padding: 24px 28px; }
  .assistant-work-hero { padding-inline: 28px; }
}
@media (max-height: 600px) {
  .assistant-work-hero { padding-block: 14px; }
  .assistant-work-hero h2 { font-size: 24px; }
  .assistant-work-context { margin-bottom: 6px; }
  .assistant-work-live { margin-top: 10px; }
}

/* ── Ventana · Fondos disponibles hoy (docs/72 §6.5, docs/101) ───────────────────────────────
   Aprobada el 03-10-2026. En Inicio, una columna de hasta 400 px junto al catálogo, con filas
   agrupadas; bajo 1024 px pasa debajo. La página «Fondos» es una portada: franja de contexto
   con los filtros escritos como frase, el fondo que cierra antes en una hoja grande y la grilla
   de tarjetas. Los títulos de los fondos van en Source Serif 4 600: excepción aprobada solo
   para esta página. Sin clay en ninguna de las dos: abrir unas bases no hace avanzar un
   trabajo. */

.home-desk-row:has(> .funding-column:not([hidden])) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  align-items: start;
  gap: 32px;
}

.funding-column {
  min-width: 0;
}

.funding-column .home-catalog-heading {
  margin-bottom: 20px;
}

.funding-rows {
  overflow: hidden;
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-card);
}

.funding-rows-note,
.funding-rows-empty {
  margin: 0;
  padding: 12px 16px;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 18px;
}

.funding-rows-empty {
  border-top: 0.5px solid var(--line);
  font-size: 13px;
  line-height: 20px;
}

.funding-row {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
  border-top: 0.5px solid var(--line);
  transition: background var(--dur-fast) var(--ease);
}

.funding-row:hover {
  background: var(--surface-hover);
}

.funding-row-head,
.funding-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.funding-row-organismo,
.funding-row-region,
.funding-card-organismo {
  min-width: 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 18px;
}

.funding-row-title {
  color: var(--ink-title);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.funding-rows-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  color: var(--blue-600);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border-top: 0.5px solid var(--line);
}

.funding-rows-more:hover {
  color: var(--blue-700);
  background: var(--surface-hover);
}

.funding-footnote {
  margin: 12px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 18px;
}

/* Chip de cierre: neutro, y advertencia con ícono a siete días o menos (texto, nunca solo color). */
.funding-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 0 8px;
  color: var(--ink-title);
  background: var(--blue-050);
  border-radius: var(--radius-control);
  font-size: 11px;
  line-height: 22px;
  white-space: nowrap;
}

.funding-chip[data-tone="warning"] {
  color: var(--warning-ink);
  background: var(--warning-tint);
}

.funding-chip .ui-icon {
  width: 12px;
  height: 12px;
}

/* Página «Fondos». */
.funding-view {
  padding-bottom: 64px;
}

.funding-back {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  color: var(--blue-200);
  font-size: 12px;
  text-decoration: none;
}

.funding-back:hover {
  color: #FFFFFF;
}

.funding-header {
  padding: 24px 0 32px;
}

.funding-header h1 {
  font-size: 32px;
  font-weight: 400;
  line-height: 38px;
  letter-spacing: -0.6px;
}

.funding-profile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 20px;
  color: var(--blue-100);
  font-size: 14px;
}

.funding-profile label {
  color: #FFFFFF;
  font-weight: 500;
}

.funding-profile select {
  min-height: 36px;
  padding: 0 10px;
  color: #FFFFFF;
  background: var(--blue-600);
  border: 0.5px solid var(--blue-400);
  border-radius: var(--radius-control);
  font: 500 13px/1 var(--font-system);
}

.funding-profile select:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

.funding-profile .secondary-button {
  width: auto;
  flex: none;
  min-height: 36px;
  margin: 0;
}

.funding-profile-status {
  color: var(--blue-100);
  font-size: 13px;
}

.funding-profile-status[data-tone="success"] {
  color: #FFFFFF;
}

.funding-profile-status[data-tone="error"] {
  color: #FFD9D9;
}

.funding-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 24px;
  color: var(--blue-100);
  font-size: 14px;
}

.funding-filters label {
  display: inline-flex;
}

.funding-filters select {
  min-height: 36px;
  padding: 0 10px;
  color: #FFFFFF;
  background: var(--blue-600);
  border: 0.5px solid var(--blue-400);
  border-radius: var(--radius-control);
  font: 500 13px/1 var(--font-system);
}

.funding-filters select:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

.funding-filters .funding-clear {
  min-height: 36px;
  color: var(--blue-100);
  text-decoration: underline;
}

.funding-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  color: var(--ink-muted);
  font-size: 14px;
}

.funding-status[data-tone="error"] {
  padding: 12px 16px;
  color: var(--danger-ink);
  background: var(--danger-tint);
  border-radius: var(--radius-card);
}

.funding-cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  align-items: start;
  gap: 24px;
  margin: 0 0 48px;
}

.funding-cover:not(:has(.funding-soon:not([hidden]))) {
  grid-template-columns: minmax(0, 1fr);
}

.funding-featured {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px;
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-card);
}

.funding-featured-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.funding-featured-label {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.funding-featured-organismo {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
}

.funding-featured-title,
.funding-card-title,
.funding-soon-title {
  margin: 0;
  color: var(--ink-title);
  font-family: var(--font-doc);
  font-weight: 600;
}

.funding-featured-title {
  font-size: 32px;
  line-height: 38px;
}

.funding-featured-summary {
  max-width: 640px;
  margin: 0;
  color: var(--ink-body);
  font-size: 15px;
  line-height: 24px;
}

.funding-featured-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin: 8px 0 0;
}

.funding-featured-facts dt {
  color: var(--ink-muted);
  font-size: 12px;
}

.funding-featured-facts dd {
  margin: 2px 0 0;
  color: var(--ink-title);
  font-size: 14px;
  font-weight: 500;
}

.funding-featured-action {
  margin-top: 8px;
}

.funding-official-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  color: #FFFFFF;
  background: var(--blue-600);
  border-radius: var(--radius-control);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.funding-official-button:hover {
  color: #FFFFFF;
  background: var(--blue-500);
}

.funding-soon {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.funding-soon h2 {
  margin: 0;
  color: var(--ink-title);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

.funding-soon-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.funding-soon-item {
  padding: 16px 20px;
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-card);
}

.funding-soon-organismo,
.funding-soon-meta {
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
}

.funding-soon-title {
  margin: 4px 0 8px;
  font-size: 18px;
  line-height: 24px;
}

.funding-soon-link {
  color: inherit;
  text-decoration: none;
}

.funding-soon-link:hover {
  text-decoration: underline;
}

.funding-soon-link .ui-icon {
  width: 12px;
  height: 12px;
  margin-left: 4px;
  color: var(--blue-500);
}

.funding-soon-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.funding-soon-closing {
  color: var(--ink-title);
  font-weight: 500;
}

.funding-note {
  max-width: 720px;
  margin: 0 0 32px;
  color: var(--ink-body);
  font-size: 14px;
  line-height: 22px;
}

.funding-group {
  margin: 0 0 48px;
}

.funding-group .home-catalog-heading {
  margin-bottom: 16px;
}

.funding-heading-note,
.funding-group-lead {
  color: var(--ink-muted);
  font-size: 12px;
}

.funding-group-lead {
  margin: -8px 0 16px;
  font-size: 13px;
  line-height: 20px;
}

.funding-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 20px;
}

.funding-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-card);
}

.funding-card-title {
  font-size: 19px;
  line-height: 26px;
}

.funding-card-summary {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 20px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.funding-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 0.5px solid var(--line);
}

.funding-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.funding-tag {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 0 8px;
  color: var(--ink-title);
  background: var(--blue-050);
  border-radius: var(--radius-control);
  font-size: 11px;
}

.funding-card-link {
  display: inline-flex;
  flex: none;
  min-height: 44px;
  align-items: center;
  gap: 4px;
  color: var(--blue-600);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.funding-card-link:hover {
  color: var(--blue-700);
  text-decoration: underline;
}

.funding-card-link .ui-icon,
.funding-official-button .ui-icon {
  width: 14px;
  height: 14px;
}

.funding-view .is-unavailable {
  color: var(--ink-muted);
  font-size: 12px;
}

.funding-load-more {
  display: flex;
  margin: 0 auto 32px;
}

.funding-footer {
  padding-top: 16px;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 18px;
  border-top: 0.5px solid var(--line-strong);
}

@media (width < 1024px) {
  .home-desk-row:has(> .funding-column:not([hidden])) {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .funding-cover {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (width < 640px) {
  .funding-header h1 {
    font-size: 26px;
    line-height: 32px;
  }

  .funding-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .funding-filters > span {
    display: none;
  }

  /* Sin la frase, cada selector necesita su rótulo a la vista, como en el diseño del teléfono. */
  .funding-filters label {
    flex-direction: column;
    gap: 4px;
  }

  .funding-filters label > .sr-only {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    color: var(--blue-200);
    font-size: 12px;
    white-space: normal;
  }

  .funding-filters select {
    width: 100%;
    min-height: 44px;
    font-size: 14px;
  }

  .funding-profile select,
  .funding-profile .secondary-button {
    width: 100%;
    min-height: 44px;
  }

  .funding-profile select {
    font-size: 14px;
  }

  .funding-featured {
    padding: 20px;
  }

  .funding-featured-title {
    font-size: 24px;
    line-height: 30px;
  }

  .funding-card-title {
    font-size: 18px;
    line-height: 24px;
  }

  .funding-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .funding-row {
    transition: none;
  }
}

/* Tercera categoría: conserva los estados y la lectura de los créditos existentes. */
.assistant-category-heading { grid-column: 1 / -1; margin: 20px 0 0; font-size: 18px; }