/* Identidad visual «Azul y papel» (docs/72). Esta hoja conserva la estructura histórica del
   sistema con sus valores ya llevados a la paleta nueva, y vive entera dentro de la capa CSS
   `sigplan`. Las piezas de la identidad están en styles/identidad.css, fuera de la capa: por eso
   ganan sobre estas reglas sin tener que igualar su especificidad.

   Toda regla nueva de esta hoja va DENTRO de la capa, antes de la llave final. */
@layer sigplan {
/* DM Sans se sirve desde el propio servidor: una dependencia de CDN rompería el
   funcionamiento sin red y enviaría una petición a un tercero en cada carga.
   Es una fuente variable, así que un archivo por subconjunto cubre 400 a 700. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-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: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-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;
}

/* Inter y Poppins son la tipografia de SIGPLAN: Inter para interfaz, Poppins para
   los titulos de display. Se sirven desde el propio servidor por la misma razon que
   DM Sans. Mientras los archivos no esten presentes la pila cae en DM Sans, que ya
   esta local, y la interfaz sigue siendo legible. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-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: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-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: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/poppins-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: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-latin-600.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: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-latin-700.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;
}

/* Iconos del diseño original (iconsMind), servidos desde el propio servidor. */
@font-face {
  font-family: "iconsMind";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("/assets/fonts/icons-mind.woff") format("woff");
}

[class^="imind-"], [class*=" imind-"] {
  font-family: "iconsMind" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Catálogo de iconos del asistente. Los puntos de código salen de la propia tipografía
   —se enumeró su tabla cmap y se revisó cada figura— y el nombre de la clase dice qué se
   ve, no cómo se llama el glifo en iconsMind. El espejo en JavaScript es
   frontend/src/navigation/icons.js. */
.imind-proyecto:before { content: "\ebab"; }
.imind-documento:before { content: "\e8b7"; }
.imind-informe:before { content: "\ed10"; }
.imind-manual:before { content: "\e6d4"; }
.imind-carpeta:before { content: "\e90d"; }
.imind-lista:before { content: "\e73e"; }
.imind-calendario:before { content: "\e70a"; }
.imind-barras:before { content: "\e68d"; }
.imind-tendencia:before { content: "\ea45"; }
.imind-calculo:before { content: "\e708"; }
.imind-indicadores:before { content: "\e940"; }
.imind-datos:before { content: "\e7f9"; }
.imind-mapa:before { content: "\ea9c"; }
.imind-ubicacion:before { content: "\ea98"; }
.imind-territorio:before { content: "\e96c"; }
.imind-ambiente:before { content: "\ed70"; }
.imind-vivienda:before { content: "\e9b8"; }
.imind-institucion:before { content: "\eda3"; }
.imind-patrimonio:before { content: "\e7a0"; }
.imind-normativa:before { content: "\ec26"; }
.imind-seguridad:before { content: "\ec4f"; }
.imind-personas:before { content: "\e7b0"; }
.imind-proceso:before { content: "\e944"; }
.imind-objetivo:before { content: "\ed1b"; }
.imind-idea:before { content: "\e9d6"; }
.imind-analisis:before { content: "\e6ee"; }
.imind-ciencia:before { content: "\ed30"; }
.imind-impulso:before { content: "\ec03"; }
.imind-destacado:before { content: "\ecce"; }
.imind-redaccion:before { content: "\eb4f"; }

/* ---------------------------------------------------------------------------
   Tokens. Desde el 14 de septiembre de 2026 rige la identidad «Azul y papel»
   (docs/72-identidad-visual-azul-y-papel.md), que reemplazó a la identidad SIGPLAN
   de docs/06. Los nombres se conservan porque el resto de la hoja los usa; sus
   valores son los de la guía nueva y coinciden con styles/identidad.css:
     - azul para el sistema, blanco para el contenido, clay para avanzar;
     - Inter para la interfaz, Source Serif 4 para el documento, IBM Plex Mono
       para códigos y versiones;
     - sin sombras ni degradados; anillo de foco azul 500;
     - solo modo claro.
   --------------------------------------------------------------------------- */
:root {
  color-scheme: light;
  color: #1E2A38;
  background: #EEF1F5;

  --sans: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --display: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --document: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-family: var(--sans);
  font-synthesis: none;

  /* Marca */
  --brand-primary: #13315C;
  --brand-primary-deep: #0B2545;
  --brand-primary-pressed: #0A1C33;
  --brand-secondary: #2E5F9C;
  --brand-accent: #D97757;
  --brand-accent-ui: #D97757;

  /* Accion */
  --action: #1B4A7E;
  --action-hover: #2E5F9C;
  --action-pressed: #13315C;
  --action-secondary: #2E5F9C;
  --action-secondary-hover: #1B4A7E;

  /* Semantica */
  --success: #1F7A5C;
  --success-strong: #1F7A5C;
  --success-hover: #14543F;
  --success-on-white: #1F7A5C;
  --success-on-white-hover: #14543F;
  --danger: #9B2C2C;
  --danger-strong: #9B2C2C;
  --danger-hover: #7A1F1F;
  --warning: #8A6100;
  --info: #2E5F9C;

  /* Superficies */
  --surface-default: #FFFFFF;
  --surface-subtle: #EEF1F5;
  --surface-input: #FFFFFF;
  --surface-hover: #F7F9FB;
  --surface-selected: #EEF1F5;
  --surface-disabled: #F7F9FB;
  --tint-success: #E4F1EC;
  --tint-warning: #F5EEDC;
  --tint-danger: #F7E5E5;
  --tint-info: #EEF1F5;
  --methodology-canvas: #EEF1F5;
  --methodology-sheet-max: 46rem;
  /* El documento usa el mismo lienzo institucional de Mis trabajos. La hoja conserva su fondo
     blanco; solo cambia la superficie exterior donde se apoya. */
  --document-canvas: #EEF1F5;

  /* Bordes */
  --border: #E1E5EB;
  --border-input: #C9D3DF;
  --border-card: #E1E5EB;
  --border-row: #EEF1F5;
  --border-width: 0.5px;

  /* Texto */
  --text: #13315C;
  --text-body: #1E2A38;
  --text-secondary: #5C6B7E;
  --text-muted: #5C6B7E;
  --text-icon-muted: #5C6B7E;
  --text-inverse: #FFFFFF;
  --text-inverse-soft: #C3D3E6;

  /* Forma */
  --radius-sm: 6px;
  --radius-input: 8px;
  --radius: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-pill: 8px;

  /* Elevacion: siempre de matiz azulado y opacidad baja. */
  --shadow-sm: none;
  --shadow: none;
  --shadow-modal: none;
  --shadow-table: none;

  /* Anillo de foco: halo celeste difuso. */
  --focus-ring: 0 0 0 2px #2E5F9C, 0 0 0 4px rgb(46 95 156 / 15%);
  --focus-border: #2E5F9C;

  /* Fondo firma de las pantallas de entrada. */
  --gradient-brand: #0B2545;
  --gradient-brand-admin: #0B2545;

  /* Alias heredados: el resto de la hoja los sigue usando por nombre. */
  --ink: #1E2A38;
  --muted: #5C6B7E;
  --paper: #FFFFFF;
  --forest: #1B4A7E;
  --forest-dark: #13315C;
  --line: #E1E5EB;
  --accent: #2E5F9C;
  --danger-bg: #F7E5E5;
}

/* Catalogo de acentos por categoria. Se conserva la estructura anterior, un tono
   con su propio color de texto, retenida a la paleta SIGPLAN. */
:root {
  --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;
}

* {
  box-sizing: border-box;
}

/* El estado semántico siempre prevalece sobre el display de cada componente. */
[hidden] {
  display: none !important;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: var(--surface-subtle);
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.skip-link {
  position: fixed;
  z-index: 10;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.65rem 0.9rem;
  color: #FFFFFF;
  background: var(--forest-dark);
  border-radius: 8px;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header,
footer {
  width: min(1180px, calc(100% - 3rem));
  margin: 0 auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 6.5rem;
  /* La cabecera manda sobre el área de trabajo: lo que se despliegue desde ella tiene que
     dibujarse encima, sin depender de en qué orden aparezcan las secciones de abajo. */
  position: relative;
  z-index: 60;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--ink);
  text-decoration: none;
}

.brand strong {
  display: block;
  font-size: 16px;
}

.environment-badge {
  padding: 0.45rem 0.7rem;
  color: var(--forest-dark);
  background: rgb(27 74 126 / 6%);
  border: 0.5px solid rgb(27 74 126 / 16%);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.page-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.75fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
  width: min(1120px, calc(100% - 3rem));
  min-height: calc(100vh - 12rem);
  margin: 0 auto;
  padding: 3rem 0 5rem;
}

.page-shell[hidden],
#site-footer[hidden] {
  display: none;
}

.intro-panel {
  max-width: 42rem;
}

.eyebrow {
  margin: 0 0 0.7rem;
  color: var(--forest);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

h1,
h2,
p {
  text-wrap: pretty;
}

h1 {
  max-width: 13ch;
  margin: 0;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.intro-copy {
  max-width: 37rem;
  margin: 1.7rem 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.75;
}

.trust-list {
  display: grid;
  gap: 0.7rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  color: #1E2A38;
  font-size: 14px;
}

.trust-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.trust-list span {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  color: #FFFFFF;
  background: var(--forest);
  border-radius: 50%;
  font-size: 12px;
}

/* `left: 0` lo ancla al borde de su bloque contenedor. Sin él quedaba en su posición natural:
   dentro de una tabla con desplazamiento propio, cuyo contenedor no está posicionado, el texto
   oculto escapaba del recorte y la página entera se corría hacia el lado (398 px en
   Gobernanza a 755 px de ancho, WCAG 1.4.10). */
.sr-only {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Migas. La barra superior dice en qué sección se está; estas dicen cómo se llegó y dan el
   camino de vuelta sin obligar a buscarlo en el menú. Solo aparecen cuando hay ancestros. */
/* Conmutador entre los dos directorios de la sección Organizaciones. No es navegación de
   primer nivel: son dos vistas del mismo lugar, y por eso vive dentro de la pantalla. */
.console-scope {
  display: inline-flex;
  padding: 0.2rem;
  background: rgb(27 74 126 / 8%);
  border-radius: 8px;
}

.console-scope-option {
  padding: 0.4rem 0.9rem;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
}

.console-scope-option:hover {
  color: var(--ink);
}

.console-scope-option.is-active {
  color: var(--forest-dark);
  background: #FFFFFF;
  box-shadow: none;
}

.admin-shell {
  display: grid;
  /* Una sola columna: la barra lateral desapareció y con ella la segunda navegación. */
  grid-template-columns: minmax(0, 1fr);
  width: min(1440px, calc(100% - 2rem));
  min-height: calc(100vh - 8rem);
  margin: 0 auto 2rem;
  overflow: hidden;
  background: #F7F9FB;
  border: 0.5px solid rgb(27 74 126 / 10%);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.admin-shell[hidden] {
  display: none;
}

.admin-workspace {
  min-width: 0;
  padding: clamp(1.5rem, 4vw, 3.2rem);
}

.admin-message {
  margin-bottom: 1rem;
}

.admin-message > strong,
.admin-message > span,
.admin-message > small {
  display: block;
}

.admin-message > span,
.admin-message > ul {
  margin-top: 0.35rem;
}

.admin-message > ul {
  margin-bottom: 0;
  padding-left: 1.25rem;
}

.admin-message > small {
  margin-top: 0.55rem;
  color: var(--text-secondary);
}

.workspace-header {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.8rem;
}

.workspace-header h1 {
  max-width: none;
  font-size: 28px;
}

.workspace-header > div > p:last-child {
  margin: 0.6rem 0 0;
  color: var(--muted);
}

.definition-save-state {
  display: inline-flex;
  align-items: center;
  align-self: center;
  min-height: 1.75rem;
  padding: 0.25rem 0.55rem;
  color: #14543F;
  background: var(--tint-success);
  border: 0.5px solid #B9D8CA;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.definition-save-state[data-state="dirty"] {
  color: #6B4B00;
  background: var(--tint-warning);
  border-color: #8A6100;
}

.ui-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.compact-button {
  width: auto;
  min-width: 10rem;
  gap: 1rem;
  margin: 0;
}

.summary-grid,
.quota-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}

.summary-grid article,
.quota-grid article {
  padding: 1.15rem 1.25rem;
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: 10px;
}

.summary-grid strong,
.summary-grid span,
.quota-grid strong,
.quota-grid span,
.quota-grid small {
  display: block;
}

.summary-grid strong {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 500;
}

.summary-grid span,
.quota-grid span {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 12px;
}

.quota-grid strong {
  margin-top: 0.5rem;
  font-size: 18px;
}

.quota-grid small {
  margin-top: 0.4rem;
  color: var(--muted);
  line-height: 1.4;
}

.progress-track {
  height: 0.34rem;
  margin-top: 0.8rem;
  overflow: hidden;
  background: #EEF1F5;
  border-radius: 8px;
}

.progress-track span {
  width: 0;
  height: 100%;
  margin: 0;
  background: var(--forest);
  border-radius: inherit;
  transition: width 180ms ease;
}

.data-panel {
  overflow: hidden;
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: 10px;
}

.panel-heading {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 1.25rem;
  border-bottom: 0.5px solid var(--line);
}

.panel-heading h2 {
  margin: 0;
  font-size: 16px;
}

.panel-heading p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 12px;
}

.search-field input {
  min-height: 2.4rem;
  width: min(16rem, 30vw);
  font-size: 12px;
}

.table-scroll {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

th,
td {
  padding: 0.9rem 1.25rem;
  border-bottom: 0.5px solid #E1E5EB;
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--muted);
  background: #FFFFFF;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

tbody tr:last-child td {
  border-bottom: 0;
}

td strong,
td small {
  display: block;
}

td small {
  margin-top: 0.2rem;
  color: var(--muted);
}

.row-button,
.text-button,
.back-button {
  color: var(--forest);
  background: transparent;
  border: 0;
  font-weight: 500;
}

.row-button:hover,
.text-button:hover,
.back-button:hover {
  text-decoration: underline;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.35rem 0.58rem;
  color: #14543F;
  background: #E4F1EC;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
}

.status-stack {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.test-mode-badge {
  padding: 0.38rem 0.6rem;
  color: #6B4B00;
  background: var(--tint-warning);
  border-radius: 0.2rem;
  font-size: 12px;
  font-weight: 500;
}

.document-placeholder {
  padding: 1rem;
  color: var(--text-muted);
  background: var(--border-row);
  border-left: 0.25rem solid #2E5F9C;
}

.document-data {
  display: grid;
  gap: 0;
  border: 0.5px solid var(--line);
}

.document-data > div {
  display: grid;
  grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr);
}

.document-data dt,
.document-data dd {
  margin: 0;
  padding: 0.7rem;
  border-bottom: 0.5px solid var(--line);
}

.document-data dt {
  color: #1B4A7E;
  background: #EEF1F5;
  font-weight: 500;
  text-transform: capitalize;
}

.document-diagram {
  display: grid;
  gap: 0.45rem;
  justify-items: center;
  margin: 1rem 0;
}

.document-diagram figcaption {
  color: #1B4A7E;
  font-weight: 500;
}

.diagram-node {
  width: min(100%, 30rem);
  padding: 0.8rem;
  color: #1B4A7E;
  text-align: center;
  background: #EEF1F5;
  border: 2px solid #2E5F9C;
}

.status-badge[data-status="suspended"],
.status-badge[data-status="expired"],
.status-badge[data-status="cancelled"] {
  color: #6B4B00;
  background: #F5EEDC;
}

.status-badge[data-status="inactive"] {
  color: var(--text-secondary);
  background: var(--border-row);
}

.empty-state {
  padding: 3rem 1.5rem;
  color: var(--muted);
  text-align: center;
}

.empty-state strong {
  color: var(--ink);
}

.empty-state p {
  margin: 0.4rem 0 0;
  font-size: 13px;
}

.back-button {
  margin: 0 0 1.5rem;
  padding: 0;
  font-size: 12px;
}

.detail-header {
  align-items: center;
}

.detail-columns {
  display: grid;
  grid-template-columns: minmax(16rem, 0.75fr) minmax(20rem, 1.25fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.compact-form {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 1.2rem;
}

select {
  min-height: 2.75rem;
  padding: 0.65rem 0.8rem;
  color: var(--ink);
  background: #FFFFFF;
  border: 0.5px solid #C9D3DF;
  border-radius: 8px;
}

.inline-button {
  width: auto;
  min-width: 8rem;
  min-height: 2.7rem;
  margin: 0;
}

.record-list {
  display: grid;
  max-height: 18rem;
  overflow-y: auto;
}

.record-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.9rem 1.2rem;
  border-bottom: 0.5px solid #E1E5EB;
}

.record-item:last-child {
  border-bottom: 0;
}

.record-item strong,
.record-item small {
  display: block;
}

.record-item small {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 11px;
}

.review-decision-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.members-panel {
  margin-top: 1rem;
}

.member-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.member-actions select {
  min-height: 2rem;
  padding: 0.3rem 0.45rem;
  font-size: 11px;
}

.mini-button {
  padding: 0.4rem 0.55rem;
  color: var(--forest);
  background: #E4F1EC;
  border: 0.5px solid #E1E5EB;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
}

.form-dialog {
  width: min(34rem, calc(100% - 2rem));
  padding: 0;
  color: var(--ink);
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: 12px;
  box-shadow: none;
}

.form-dialog::backdrop {
  background: rgb(31 122 92 / 58%);
  backdrop-filter: none;
}

.form-dialog form {
  margin: 0;
  padding: 1.5rem;
}

.dialog-heading {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

.dialog-heading h2 {
  margin: 0;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 500;
}

.dialog-close {
  width: 2rem;
  height: 2rem;
  color: var(--muted);
  background: transparent;
  border: 0;
  font-size: 22px;
}

.field-group label span,
.field-group small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.two-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.dialog-actions {
  display: flex;
  gap: 0.7rem;
  justify-content: flex-end;
  margin-top: 0.7rem;
}

.access-card {
  min-height: 31rem;
  padding: clamp(1.7rem, 4vw, 3rem);
  background: var(--surface-default);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  backdrop-filter: none;
}

.state-view {
  animation: enter 220ms ease-out;
}

.state-view[hidden],
#loading-view[hidden] {
  display: none;
}

#loading-view {
  display: grid;
  min-height: 23rem;
  place-content: center;
  justify-items: center;
  color: var(--muted);
}

.spinner {
  width: 2.25rem;
  height: 2.25rem;
  border: 3px solid var(--line);
  border-top-color: var(--forest);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

.card-heading h2 {
  margin: 0;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.035em;
}

.card-heading > p:last-child {
  margin: 0.65rem 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.password-expiry {
  margin: 1.2rem 0 0;
  padding: 0.8rem 0.9rem;
  color: var(--text-body);
  background: var(--tint-info);
  border: 0.5px solid var(--border-input);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.45;
}

.password-change-logout {
  justify-self: center;
}

form {
  display: grid;
  gap: 1.15rem;
  margin-top: 2rem;
}

.field-group {
  display: grid;
  gap: 0.45rem;
}

/* Un dato rechazado se ve donde se escribió: el aviso de arriba dice qué corregir y el
   control queda en rojo hasta que se toca. */
.field-group.is-invalid > span,
.field-group.is-invalid > label {
  color: var(--danger);
}

.field-group.is-invalid input,
.field-group.is-invalid select,
.field-group.is-invalid textarea {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px #2E5F9C, 0 0 0 4px rgb(46 95 156 / 15%);
}

.validation-note {
  color: var(--danger);
  font-weight: 500;
}

.message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.message ul {
  display: grid;
  gap: 0.35rem;
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}

.message .text-button {
  padding: 0;
  font-size: 13px;
}

label,
dt {
  color: #1E2A38;
  font-size: 12px;
  font-weight: 500;
}

input {
  width: 100%;
  min-height: 3.15rem;
  padding: 0.78rem 0.9rem;
  color: var(--ink);
  background: #FFFFFF;
  border: 0.5px solid #C9D3DF;
  border-radius: 8px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

textarea {
  width: 100%;
  padding: 0.78rem 0.9rem;
  color: var(--ink);
  resize: vertical;
  background: #FFFFFF;
  border: 0.5px solid #C9D3DF;
  border-radius: 8px;
}

textarea:focus {
  border-color: var(--forest);
  outline: none;
  box-shadow: 0 0 0 2px #2E5F9C, 0 0 0 4px rgb(46 95 156 / 15%);
}

.button-row,
.token-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.builder-grid {
  display: grid;
  gap: 1rem;
}

.builder-panel {
  overflow: visible;
}

.builder-rows {
  display: grid;
  gap: 0.75rem;
  padding: 0 1.2rem 1.2rem;
}

.builder-row {
  display: grid;
  gap: 0.75rem;
  align-items: end;
  padding: 0.9rem;
  background: #F7F9FB;
  border: 0.5px solid #E1E5EB;
  border-radius: 8px;
}

.two-columns,
.three-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.three-columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.builder-row > .mini-button {
  justify-self: end;
}

.variable-token {
  padding: 0.35rem 0.55rem;
  color: var(--forest-dark);
  background: #E4F1EC;
  border: 0.5px solid #B9D8CA;
  border-radius: 8px;
  font-size: 11px;
}

.contextual-variable-selector {
  display: grid;
  gap: 0.4rem;
}

.contextual-variable-selector small,
#prompt-information-help {
  color: #1E2A38;
  font-size: 13px;
  line-height: 1.4;
}

.contextual-variable-selector .contextual-edit {
  justify-self: start;
  padding-left: 0;
  color: #2E5F9C;
  background: transparent;
  border: 0;
}

/* El tipo de resultado deja de vivir en un modal: se lee junto al prompt que lo produce. */
/* Cada formulario es su propio panel: el inicial y los que pide una etapa intermedia. */
/* Revisión de la metodología: verde cuando está sana, ámbar cuando falta algo. */
.methodology-review {
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
  border-left: 0.25rem solid #1F7A5C;
  background: #E4F1EC;
}

.methodology-review[data-state="pending"] {
  border-left-color: #8A6100;
  background: #F5EEDC;
}

/* Mientras se recalcula, el color no afirma ni que está limpia ni que hay observaciones:
   las de la pantalla son las de antes del último cambio. */
.methodology-review[data-state="checking"] {
  border-left-color: #C9D3DF;
  background: #EEF1F5;
}

.methodology-review[data-state="checking"] strong {
  color: #5C6B7E;
}

.methodology-review strong {
  color: #14543F;
  font-size: 14px;
}

.methodology-review[data-state="pending"] strong {
  color: #6B4B00;
}

.methodology-review small {
  display: block;
  margin-top: 0.15rem;
  color: #1E2A38;
  font-size: 13px;
}

.methodology-review ul {
  margin: 0.6rem 0 0;
  padding-left: 1.1rem;
  color: #1E2A38;
  font-size: 14px;
}

.methodology-review li {
  margin-bottom: 0.3rem;
}

.form-builder {
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  background: #FFFFFF;
  border: 0.5px solid #E1E5EB;
  border-radius: 8px;
}

.form-builder > .panel-heading small {
  display: block;
  margin-top: 0.15rem;
  color: #1E2A38;
  font-size: 13px;
}

.form-builder > .builder-rows {
  margin-top: 0.75rem;
}

.stage-ordering,
.action-ordering {
  justify-content: flex-end;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.confirmation-dialog .danger-button {
  background: #9B2C2C;
  border-color: #9B2C2C;
}

.spreadsheet-column-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  align-items: end;
  gap: 0.5rem;
  padding: 0.6rem;
  background: #F7F9FB;
  border: 0.5px solid #E1E5EB;
}

.spreadsheet-column-row .mini-button {
  align-self: center;
}

/* La fórmula de una columna calculada ocupa el ancho de su fila: es una frase que se lee
   entera, no un campo más de la grilla de atributos. */
.formula-editor {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.6rem;
  margin-top: 0.4rem;
  padding: 0.75rem;
  background: var(--surface-default);
  border: var(--border-width) solid var(--border-card);
  border-radius: var(--radius-sm);
}

.formula-recipe-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.5rem;
}

.formula-recipe {
  display: grid;
  gap: 0.15rem;
  padding: 0.6rem 0.7rem;
  text-align: left;
  background: var(--surface-subtle);
  border: var(--border-width) solid var(--border-card);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: inherit;
  color: var(--text-body);
}

.formula-recipe:hover,
.formula-recipe:focus-visible {
  background: var(--surface-hover);
  border-color: var(--action-secondary);
}

.formula-recipe strong {
  font-size: 14px;
  color: var(--text);
}

.formula-recipe small {
  color: var(--text-muted);
  font-size: 13px;
}

.formula-recipe.is-manual {
  background: var(--surface-default);
  border-style: dashed;
}

.formula-recipe-title {
  margin: 0;
  font-weight: 500;
  color: var(--text);
}

.formula-recipe-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.5rem;
  align-items: end;
}

/* La línea de fichas es la fórmula. No hay cursor de texto sobre ella: cada elemento se
   agrega desde la paleta y se quita con su propia aspa. */
.formula-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  min-height: 2.4rem;
  padding: 0.4rem;
  background: var(--surface-input);
  border: var(--border-width) solid var(--border-input);
  border-radius: var(--radius-sm);
}

.formula-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.4rem 0.25rem 0.55rem;
  background: var(--tint-info);
  border: var(--border-width) solid var(--border-input);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  line-height: 1.3;
}

.formula-chip.is-operator,
.formula-chip.is-open,
.formula-chip.is-close {
  background: var(--surface-selected);
  font-weight: 500;
}

.formula-chip.is-number {
  background: var(--tint-success);
}

.formula-chip-number {
  width: 5rem;
  padding: 0.1rem 0.25rem;
  background: var(--surface-default);
  border: var(--border-width) solid var(--border-input);
  border-radius: var(--radius-sm);
  font: inherit;
  color: inherit;
}

.formula-chip-remove {
  padding: 0 0.2rem;
  background: none;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.formula-chip-remove:hover,
.formula-chip-remove:focus-visible {
  color: var(--danger);
}

.formula-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.formula-palette select {
  max-width: 18rem;
}

.formula-number-input {
  max-width: 8rem;
}

/* La frase y el número con datos de ejemplo son la revisión: se reconoce el resultado en vez
   de auditar la expresión. */
.formula-readback {
  display: grid;
  gap: 0.2rem;
  padding: 0.5rem 0.6rem;
  background: var(--surface-subtle);
  border-left: 3px solid var(--action-secondary);
  border-radius: var(--radius-sm);
}

.formula-sentence,
.formula-sample,
.formula-warning,
.constraint-proposal-sentence,
.constraint-proposal-message,
.constraint-proposal-source {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-body);
}

.formula-sample {
  color: var(--text-muted);
}

.formula-warning {
  color: var(--danger-hover);
}

.formula-sample-editor {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding: 0.6rem 0.7rem;
  background: var(--surface-subtle);
  border: var(--border-width) solid var(--border-card);
  border-radius: var(--radius-sm);
}

.formula-sample-editor small {
  display: block;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.4;
}

.formula-sample-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.5rem;
}

/* La ayuda del modelo entra por la misma puerta que el resto y su propuesta se revisa antes
   de reemplazar nada: nunca escribe directamente sobre la fórmula. */
.formula-assistant,
.constraint-assistant {
  display: grid;
  gap: 0.5rem;
}

.formula-assistant-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.formula-assistant-row input {
  flex: 1 1 16rem;
}

.formula-proposal,
.constraint-proposal {
  display: grid;
  gap: 0.5rem;
  padding: 0.7rem;
  background: var(--tint-warning);
  border: var(--border-width) solid var(--warning);
  border-radius: var(--radius-sm);
}

.formula-proposal-kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.formula-proposal-copy {
  margin: 0;
  font-size: 14px;
  color: var(--text-body);
}

.constraint-proposal-source {
  font-style: italic;
  color: var(--text-muted);
}

/* Una regla de cuadratura se lee de corrido. Antes era una fila de siete cajas que obligaba a
   reconstruir la frase mentalmente. */
.constraint-row {
  display: grid;
  gap: 0.5rem;
  padding: 0.7rem;
  background: var(--surface-input);
  border: var(--border-width) solid var(--border-card);
  border-radius: var(--radius-sm);
}

.constraint-sentence {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.constraint-sentence select {
  width: auto;
  min-width: 8rem;
}

.constraint-sentence .sentence-text {
  color: var(--text-body);
  font-size: 14px;
}

.constraint-percentage {
  max-width: 5.5rem;
}

.constraint-row .mini-button {
  justify-self: start;
}

.action-document-source {
  display: grid;
  gap: 0.4rem;
}

.action-document-source > small {
  color: #1E2A38;
  font-size: 13px;
  line-height: 1.4;
}

.action-result-type {
  display: grid;
  gap: 0.4rem;
}

.action-result-type > small {
  color: #1E2A38;
  font-size: 13px;
  line-height: 1.4;
}

.action-result-naming {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  color: #1E2A38;
  font-size: 14px;
}

/* Proveedor, modelo y razonamiento ocupaban un tercio del panel para algo que casi no cambia. */
.action-model-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  padding: 0.5rem 0.7rem;
  color: #1E2A38;
  background: #EEF1F5;
  border: 0.5px solid #E1E5EB;
  border-radius: 8px;
  font-size: 14px;
}

.action-result-naming .contextual-edit,
.action-model-summary .contextual-edit {
  padding: 0;
  color: #2E5F9C;
  background: transparent;
  border: 0;
}

/* Resaltado del prompt: el textarea queda intacto y la capa de atrás pinta los marcadores.
   Ambas cajas deben compartir métricas exactas o el resaltado se desalinea al escribir. */
.prompt-group {
  display: grid;
  gap: 0.4rem;
}

.prompt-field {
  position: relative;
}

.prompt-highlights,
.prompt-field .action-prompt {
  margin: 0;
  padding: 0.5rem 0.6rem;
  border: 0.5px solid #C9D3DF;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: normal;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

.prompt-highlights {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: transparent;
  background: #FFFFFF;
  pointer-events: none;
}

.prompt-field .action-prompt {
  /* En línea, el textarea arrastra el hueco de la línea base y estira el contenedor unos
     píxeles: la capa de atrás quedaba más alta y el resaltado se desfasaba al desplazar. */
  display: block;
  position: relative;
  width: 100%;
  background: transparent;
}

/* Aspecto de pastilla sin tocar las métricas del texto. El relleno se finge con
   box-shadow, porque padding o margin correrían los caracteres y desalinearían la capa de
   resaltado respecto del textarea que va encima. */
.prompt-token {
  color: transparent;
  border-radius: 8px;
}

.prompt-token.is-ok {
  background: #EEF1F5;
  box-shadow: 0 0 0 2px #2E5F9C, 0 0 0 4px rgb(46 95 156 / 15%);
}

/* El origen se distingue por color: respuesta de formulario contra resultado de una acción
   anterior. Elegir la información equivocada era la otra fuente de inconsistencias. */
.prompt-token.is-ok[data-origin="form"] {
  background: #C3D3E6;
  box-shadow: 0 0 0 2px #2E5F9C, 0 0 0 4px rgb(46 95 156 / 15%);
}

.prompt-token.is-ok[data-origin="result"] {
  background: #E4F1EC;
  box-shadow: 0 0 0 2px #2E5F9C, 0 0 0 4px rgb(46 95 156 / 15%);
}

.prompt-token.is-warning {
  background: #F5EEDC;
  box-shadow: 0 0 0 2px #2E5F9C, 0 0 0 4px rgb(46 95 156 / 15%);
}

/* El subrayado ondulado no depende del color del texto, que aquí es transparente. */
.prompt-token.is-error {
  background: #F7E5E5;
  box-shadow: 0 0 0 2px #2E5F9C, 0 0 0 4px rgb(46 95 156 / 15%);
  text-decoration: underline wavy;
  text-decoration-color: #7A1F1F;
  text-decoration-thickness: 2px;
}

/* Cada observación puede traer su propia acción de resolución al costado. */
#methodology-review-list li {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  justify-content: space-between;
}

#methodology-review-list .mini-button {
  flex: 0 0 auto;
}

.prompt-issues {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 13px;
  line-height: 1.4;
}

.prompt-issues li.is-error {
  color: #7A1F1F;
}

.prompt-issues li.is-warning {
  color: #6B4B00;
}

.action-prompt {
  min-height: 12rem;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}

.action-advanced {
  margin-top: 0.5rem;
  border-top: 0.5px solid #E1E5EB;
  padding-top: 0.6rem;
}

.action-advanced > summary {
  color: #2E5F9C;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.action-advanced-body {
  padding-top: 0.6rem;
}

.secondary-button.information-insert-button {
  display: inline-flex;
  width: auto;
  min-width: 0;
  min-height: 2.4rem;
  margin-top: 0;
  padding: 0.55rem 0.8rem;
  justify-self: start;
}

.action-context-help {
  margin-top: 0.25rem;
}

.web-search-toggle,
.document-visibility-toggle {
  align-items: flex-start;
  margin: 0.25rem 0 0;
  padding: 0.8rem;
  background: #F7F9FB;
  border: 0.5px solid #E1E5EB;
  border-radius: 8px;
}

.web-search-toggle span,
.document-visibility-toggle span {
  display: grid;
  gap: 0.2rem;
}

.web-search-toggle small,
.document-visibility-toggle small {
  color: #1E2A38;
  font-weight: 400;
  line-height: 1.4;
}

.context-choice-list {
  display: grid;
  gap: 0.65rem;
}

.action-builder-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.test-result {
  padding: 1rem;
  border-left: 4px solid var(--sky, #2E5F9C);
  background: #FFFFFF;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.test-result + .test-result {
  margin-top: 0.75rem;
}

.ai-connection-panel,
.platform-audit-heading {
  margin-bottom: 1rem;
}

.danger-button {
  color: var(--danger);
}

.project-card-list {
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
}

.project-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.1rem;
  background: #FFFFFF;
  border: 0.5px solid #E1E5EB;
  border-radius: 10px;
}

.project-card small,
.project-card strong {
  display: block;
}

.project-card small {
  color: var(--muted);
  font-size: 11px;
}

.project-card strong {
  margin-top: 0.25rem;
  font-size: 16px;
}

.project-card p {
  margin: 0.4rem 0 0;
  color: var(--forest);
  font-size: 12px;
  font-weight: 500;
}

.project-detail-grid {
  display: grid;
  grid-template-columns: minmax(22rem, 1.2fr) minmax(18rem, 0.8fr);
  gap: 1rem;
}

.project-action-panel,
.project-form {
  display: grid;
  gap: 1rem;
}

.project-action-panel {
  padding: 1.2rem;
}

.project-form {
  margin: 0;
}

.project-form h3 {
  margin: 0;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 500;
}

.project-form small,
#project-option-help {
  color: var(--muted);
  font-size: 11px;
}

.project-archive {
  margin-top: 1.2rem;
}

#publication-issues {
  margin-bottom: 1rem;
  white-space: pre-line;
}

input:focus {
  border-color: var(--forest);
  box-shadow: 0 0 0 2px #2E5F9C, 0 0 0 4px rgb(46 95 156 / 15%);
}

.primary-button,
.secondary-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.2rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-weight: 500;
  transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.primary-button {
  justify-content: space-between;
  margin-top: 0.3rem;
  color: #FFFFFF;
  background: var(--forest);
  border: 0.5px solid var(--forest);
}

.primary-button {
  box-shadow: none;
}

.primary-button:hover {
  background: var(--forest-dark);
  transform: translateY(-1px);
  box-shadow: none;
}

/* El botón se hunde al presionarlo: es la única confirmación táctil que existe antes de
   que la respuesta llegue, y la maqueta la usa en todos sus controles. */
.primary-button:active,
.secondary-button:active,
.inline-button:active {
  transform: translateY(1px);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .primary-button,
  .secondary-button,
  .inline-button {
    transition: background 120ms ease;
  }

  .primary-button:hover,
  .primary-button:active,
  .secondary-button:active,
  .inline-button:active {
    transform: none;
  }
}

.secondary-button {
  width: 100%;
  margin-top: 1.4rem;
  color: var(--forest-dark);
  background: transparent;
  border: 0.5px solid #C9D3DF;
}

.secondary-button:hover {
  background: #EEF1F5;
  box-shadow: none;
}

button:disabled {
  cursor: wait;
  opacity: 0.65;
  transform: none;
  box-shadow: none;
}

.message {
  padding: 0.8rem 0.9rem;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.45;
}

.message-error {
  color: var(--danger);
  background: var(--danger-bg);
  border: 0.5px solid rgb(155 44 44 / 18%);
}

.session-icon {
  display: grid;
  width: 3.2rem;
  height: 3.2rem;
  margin-bottom: 1.4rem;
  place-items: center;
  color: #FFFFFF;
  background: var(--forest);
  border-radius: 50%;
  font-size: 22px;
}

.identity-card {
  display: grid;
  gap: 0;
  margin: 1.7rem 0 0;
  background: #EEF1F5;
  border: 0.5px solid var(--line);
  border-radius: 10px;
}

.identity-card div {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
}

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

.identity-card dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
}

.support-reference {
  min-height: 1.1rem;
  margin: 1.2rem 0 0;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0 2rem;
  color: var(--muted);
  border-top: 0.5px solid rgb(27 74 126 / 10%);
  font-size: 12px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes enter {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 820px) {
  .page-shell {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-top: 1.5rem;
  }

  h1 {
    max-width: 15ch;
  }

  .intro-copy {
    max-width: 48rem;
  }

  .admin-shell {
    grid-template-columns: 1fr;
  }

  .summary-grid,
  .quota-grid,
  .detail-columns,
  .project-detail-grid,
  .two-columns,
  .three-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .site-header,
  footer,
  .page-shell {
    width: min(100% - 2rem, 1120px);
  }

  .site-header {
    min-height: 5.5rem;
  }

  .environment-badge {
    display: none;
  }

  .access-card {
    min-height: 0;
    padding: 1.4rem;
    border-radius: 12px;
  }

  footer {
    flex-direction: column;
  }

  .admin-shell {
    width: calc(100% - 1rem);
    border-radius: 10px;
  }

  .admin-workspace {
    padding: 1.2rem 0.8rem;
  }

  .workspace-header,
  .panel-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .compact-button,
  .search-field input {
    width: 100%;
  }

  .summary-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .summary-grid article {
    padding: 0.8rem;
  }

  .two-field-row {
    grid-template-columns: 1fr;
  }

  .project-card {
    grid-template-columns: 1fr;
  }

  th,
  td {
    padding: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Capa de sistema visual. Ya no redefine la identidad: solo nombra los alias que el
   resto de la hoja consume y los apunta a los tokens SIGPLAN declarados arriba. Antes
   este bloque invertia el significado de --forest, que pasaba a ser el celeste; con la
   identidad SIGPLAN el alias vuelve a designar el azul de marca. */
:root {
  color: var(--text-body);
  background: var(--surface-subtle);
  font-family: var(--sans);
  --ink: #1E2A38;
  --muted: #5C6B7E;
  --paper: #FFFFFF;
  --forest: #1B4A7E;
  --forest-dark: #13315C;
  --line: #E1E5EB;
  --accent: #2E5F9C;
  --positive: #1F7A5C;
  --danger: #9B2C2C;
  --danger-bg: #F7E5E5;
  --surface: #EEF1F5;
  --modal: #FFFFFF;
}

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

h1,
h2,
h3,
.workspace-header h1,
.card-heading h2,
.dialog-heading h2,
.project-form h3,
.summary-grid strong {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.02em;
}

h1 {
  max-width: none;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
}

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.5rem;
  width: 100%;
  min-height: 4rem;
  padding: 0 1.5rem;
  color: #FFFFFF;
  background: #1B4A7E;
}

.brand {
  color: #FFFFFF;
}

.site-header /* Vuelta al lugar desde donde se entró: presente pero por debajo de la cuenta y del modo,
   porque no es el destino habitual sino la salida de quien está de paso. */
.topbar-return {
  min-height: 2.4rem;
  padding: 0.45rem 0.7rem;
  color: #C3D3E6;
  background: transparent;
  border: 0.5px solid rgb(255 255 255 / 28%);
  border-radius: 0.2rem;
  font-size: 13px;
  font-weight: 500;
}

.topbar-return:hover {
  color: #FFFFFF;
  background: rgb(255 255 255 / 10%);
  border-color: #2E5F9C;
}

.topbar-return[hidden] {
  display: none;
}

.environment-badge {
  color: #FFFFFF;
}

.global-navigation {
  display: flex;
  min-width: 0;
  align-items: stretch;
  justify-content: center;
  /* Sin contenedor de overflow. Uno recortaba el desplegable de «Administración» —que se ve
     entonces tapado por el área de trabajo— y además sumaba su alto al área desplazable, con lo
     que aparecía una barra de desplazamiento dentro de la cabecera. Cuando los destinos no
     caben, se acomodan en otra línea en vez de esconderse detrás de un arrastre. */
  flex-wrap: wrap;
}

.global-navigation[hidden] {
  display: none;
}

.global-navigation a,
.global-navigation button {
  display: flex;
  align-items: center;
  min-height: 4rem;
  text-decoration: none;
  padding: 0 1rem;
  color: #FFFFFF;
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-bottom: 0.25rem solid transparent;
}

.global-navigation a:hover,
.global-navigation a.is-active,
.global-navigation button:hover,
.global-navigation button.is-active {
  color: #FFFFFF;
  background: rgb(46 95 156 / 18%);
  border-bottom-color: #2E5F9C;
}

/* Grupo de la barra superior. El desplegable se ancla al botón y no desplaza la barra: si
   empujara el contenido, abrirlo movería de sitio los destinos vecinos justo cuando la persona
   va a elegir uno. Por eso el grupo es el contexto de posicionamiento y el menú flota. */
.navigation-group {
  position: relative;
  display: flex;
  align-items: stretch;
}

.global-navigation .navigation-group-toggle::after {
  margin-left: 0.4rem;
  content: "▾";
  font-size: 0.7em;
}

.navigation-menu {
  position: absolute;
  top: 100%;
  /* Se ancla por la derecha y crece hacia adentro. «Administración» es el último destino de la
     barra: abriendo hacia la derecha, el menú se saldría por el borde de la ventana. */
  right: 0;
  z-index: 40;
  display: flex;
  min-width: 14rem;
  flex-direction: column;
  padding: 0.35rem;
  background: #13315C;
  border: 0.5px solid rgb(255 255 255 / 16%);
  border-radius: 0 0 8px 8px;
  box-shadow: none;
}

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

.global-navigation .navigation-menu a {
  min-height: 2.6rem;
  justify-content: flex-start;
  padding: 0 0.8rem;
  text-align: left;
  border-bottom: 0;
  border-radius: 8px;
}

.topbar-actions {
  display: flex;
  gap: 0.65rem;
  align-items: center;
}

/* Modo y cuenta son dos salidas del mismo rincón de la barra, no dos formularios. Los dos
   recuadros rellenos competían con la navegación por la misma atención: quedan sin fondo,
   y solo el cursor encima los levanta. */
.mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.4rem;
  padding: 0 0.35rem 0 0.7rem;
  color: #FFFFFF;
  border-radius: 8px;
  transition: background 0.18s, color 0.18s;
}

.mode-switch::before {
  content: "\e944";
  font-family: "iconsMind", sans-serif;
  font-size: 18px;
  line-height: 1;
}

.mode-switch:hover,
.mode-switch:focus-within {
  color: #FFFFFF;
  background: rgb(255 255 255 / 14%);
}

/* El triángulo del desplegable nativo viene con el recuadro del sistema; se dibuja aquí
   como fondo del propio control para que el clic siga abriendo la lista en toda su área. */
.mode-switch select {
  min-height: 2.4rem;
  padding: 0 1.25rem 0 0;
  color: inherit;
  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='%23FFFFFF' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 0.6rem;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  font-size: 14px;
  font-weight: 500;
  appearance: none;
}

.mode-switch select:focus {
  border: 0;
  box-shadow: none;
}

/* Las opciones se dibujan con el menú del sistema, que no hereda el azul de la barra. */
.mode-switch select option {
  color: var(--ink);
  background: #FFFFFF;
}

/* La cuenta es un destino, no un rótulo: el nombre completo ocupaba la barra sin decir nada
   que la persona no sepa de sí misma. Queda la figura, redonda para no confundirse con el
   modo, que es texto. */
.account-button {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  min-height: 2.4rem;
  padding: 0;
  place-items: center;
  color: #FFFFFF;
  background: transparent;
  border: 1.5px solid rgb(255 255 255 / 45%);
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.account-button:hover {
  color: #FFFFFF;
  background: rgb(255 255 255 / 16%);
  border-color: #FFFFFF;
}

.environment-badge {
  color: #FFFFFF;
  background: transparent;
  border: 0.5px solid #2E5F9C;
  border-radius: 0.2rem;
}

/* La pantalla de acceso es la unica que vive sobre el degradado de marca. Ocupa todo el
   ancho para que el relleno calculado deje 1120px reales al contenido, y reserva encabezado
   y pie para caber completa cuando la altura lo permite. */
.page-shell {
  width: 100%;
  min-height: calc(100vh - 8.25rem);
  margin: 0;
  padding: 4rem max(1.5rem, calc((100vw - 1120px) / 2));
  background: var(--gradient-brand);
}

.intro-panel h1 {
  max-width: 18ch;
  color: var(--text-inverse);
  font-family: var(--display);
  font-size: 28px;
  font-weight: 500;
}

.intro-panel .intro-copy {
  color: var(--text-inverse-soft);
}

.intro-panel .eyebrow {
  color: var(--text-inverse-soft);
}

.intro-panel .trust-list li {
  color: var(--text-inverse-soft);
}

.data-panel,
.summary-grid article,
.quota-grid article,
.project-card,
.builder-row,
.identity-card {
  background: var(--surface-default);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-table);
}

.access-card {
  backdrop-filter: none;
}

.eyebrow,
.step-kicker {
  color: #2E5F9C;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.trust-list span,
.session-icon {
  color: var(--text-inverse);
  background: var(--success-on-white);
  border-radius: 0.2rem;
}

.admin-shell {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-height: calc(100vh - 4rem);
  margin: 0;
  background: #EEF1F5;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* El trabajo destacado pertenece al listado de Mis trabajos y antecede al resto de la lista. */
.continue-disclaimer {
  margin-bottom: 1rem;
}

.continue-disclaimer-heading h2 {
  margin: 0;
  color: #1E2A38;
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.continue-disclaimer-heading p {
  margin: 0.25rem 0 0.85rem;
  color: #1E2A38;
  font-size: 14px;
}

.continue-disclaimer .project-card {
  border-left: 0.35rem solid #2E5F9C;
}

.admin-workspace {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: #EEF1F5;
}

/* Mientras el documento esta a la vista la mesa ocupa la pagina entera. Un marco claro
   alrededor del gris devolvia la hoja al interior de un panel de la aplicacion, que es
   exactamente lo que la metafora no quiere: no hay borde donde termine el escritorio y empiece
   el programa, porque no hay programa a la vista, hay una hoja sobre una mesa. */
#projects-view:has(#project-detail-view:not([hidden])),
#projects-view:has(#project-detail-view:not([hidden])) .admin-workspace {
  background: var(--document-canvas);
}

#projects-view:has(#project-detail-view:not([hidden])) .admin-workspace {
  padding: 0;
}

/* El área de trabajo llega hasta el borde —el fondo y la franja lateral son parte de la
   identidad—, pero su contenido se acota al ancho de contenedor que documenta el sistema de
   diseño: 1200px. Sin ese tope, en un monitor ancho una fila separa su texto de su botón por
   media pantalla, una tarjeta de cifra deja el número perdido en una caja de 440px y la tabla
   de adopción reparte cinco columnas en 1750px. */
.admin-workspace > * {
  width: min(1200px, 100%);
  margin-inline: auto;
}

.workspace-header {
  margin-bottom: 1.5rem;
}

.workspace-header h1 {
  color: #1B4A7E;
  font-size: 28px;
}

.panel-heading {
  background: #FFFFFF;
}

.panel-heading h2 {
  color: #1B4A7E;
  font-size: 18px;
}

th {
  color: #FFFFFF;
  background: #1B4A7E;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

tbody tr:hover,
tbody tr:focus-within {
  background: #F7F9FB;
}

.primary-button,
.secondary-button,
.mini-button,
.message,
.status-badge {
  border-radius: var(--radius);
}

input,
textarea,
select {
  border-radius: var(--radius-input);
}

.primary-button {
  color: var(--text-inverse);
  background: var(--success-on-white);
  border-color: var(--success-on-white);
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}

.primary-button:hover {
  color: var(--text-inverse);
  background: var(--success-on-white-hover);
  border-color: var(--success-on-white-hover);
  box-shadow: var(--shadow-sm);
  transform: none;
}

.secondary-button,
.mini-button {
  color: #1B4A7E;
  background: #FFFFFF;
  border-color: #2E5F9C;
}

.secondary-button:hover,
.mini-button:hover {
  background: #F7F9FB;
}

.row-button,
.text-button,
.back-button {
  color: #2E5F9C;
}

.danger-button {
  color: #7A1F1F;
}

button:disabled {
  background-color: #C3D3E6;
  border-color: #C9D3DF;
  cursor: wait;
}

input:focus,
textarea:focus,
select:focus,
button:focus-visible,
summary:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: var(--focus-ring);
}

.form-dialog {
  color: #13315C;
  background: #FFFFFF;
  border: 0;
  border-radius: 8px;
}

.form-dialog::backdrop {
  background: rgb(10 28 51 / 65%);
  backdrop-filter: none;
}

.form-dialog form {
  gap: 1rem;
  margin: 0;
  padding: 0 0 1.5rem;
}

.form-dialog .dialog-heading {
  margin: 0 0 0.5rem;
  padding: 1rem 1.5rem;
  color: #FFFFFF;
  background: #1B4A7E;
}

.dialog-heading .eyebrow,
.dialog-heading p {
  color: #C3D3E6;
}

.dialog-heading h2,
.dialog-close {
  color: #FFFFFF;
}

.form-dialog .field-group,
.form-dialog .two-field-row,
.form-dialog .dialog-actions,
.form-dialog > form > input[type="hidden"] + input[type="hidden"] {
  margin-right: 1.5rem;
  margin-left: 1.5rem;
}

.transfer-dialog {
  width: min(44rem, calc(100vw - 2rem));
  max-width: 44rem;
}

.transfer-dialog .transfer-progress,
.transfer-dialog .transfer-preview,
.transfer-dialog .admin-message {
  margin-right: 1.5rem;
  margin-left: 1.5rem;
}

.transfer-progress {
  padding: 0.8rem 1rem;
  color: #1B4A7E;
  background: #EEF1F5;
  border-left: 0.25rem solid #2E5F9C;
}

.transfer-preview {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  background: #F7F9FB;
  border: 0.5px solid #C9D3DF;
}

.transfer-preview-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.transfer-preview-heading h3,
.transfer-preview-heading p {
  margin: 0;
}

.transfer-counts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0;
  border-top: 0.5px solid #C9D3DF;
  border-left: 0.5px solid #C9D3DF;
}

.transfer-counts dt,
.transfer-counts dd {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-right: 0.5px solid #C9D3DF;
  border-bottom: 0.5px solid #C9D3DF;
}

.transfer-counts dt {
  color: var(--text-secondary);
}

.transfer-counts dd {
  font-weight: 500;
  text-align: right;
}

.transfer-observations {
  padding: 0.8rem 1rem;
  background: #F5EEDC;
  border-left: 0.25rem solid #E2D2A8;
}

.transfer-observations ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.transfer-choice {
  display: grid;
  gap: 0.55rem;
  padding: 0;
  border: 0;
}

.transfer-choice label {
  display: flex;
  gap: 0.65rem;
  padding: 0.7rem;
  background: #FFFFFF;
  border: 0.5px solid #C9D3DF;
}

.transfer-choice label:has(input:checked) {
  border-color: #2E5F9C;
  box-shadow: inset 0 0 0 1px #2E5F9C;
}

.transfer-choice span,
.transfer-choice small,
.transfer-safety span {
  display: block;
}

.transfer-choice small,
.transfer-safety span {
  color: var(--text-secondary);
}

.transfer-safety {
  margin: 0;
  padding: 0.75rem 1rem;
  color: #1E2A38;
  background: #EEF1F5;
  border-left: 0.25rem solid #2E5F9C;
}

@media (max-width: 42rem) {
  .transfer-preview-heading {
    display: grid;
  }

}

.builder-step-navigation {
  display: grid;
  grid-template-columns: repeat(6, minmax(7rem, 1fr));
  margin-bottom: 1rem;
  overflow-x: auto;
  background: #1B4A7E;
}

.builder-step-navigation button {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  min-height: 3.5rem;
  padding: 0.7rem 0.8rem;
  color: #FFFFFF;
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-right: 0.5px solid rgb(255 255 255 / 15%);
}

.builder-step-navigation button span {
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  border: 0.5px solid currentcolor;
  border-radius: 50%;
}

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

#save-definition {
  color: #FFFFFF;
  background: var(--success-on-white);
  border-color: var(--success-on-white);
}

#save-definition:hover {
  background: var(--success-on-white-hover);
  border-color: var(--success-on-white-hover);
}

.builder-introduction,
.action-initial {
  display: grid;
  justify-items: center;
  padding: 3rem 1.5rem;
  text-align: center;
}

.builder-introduction {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  justify-items: start;
  text-align: left;
}

/* Cuando el icono declara el tono del asistente, lo toma; si no, se queda con el celeste
   del constructor. */
.builder-icon[data-accent] {
  color: var(--card-ink);
  background: var(--card-tone);
}

.builder-icon,
.action-initial > span {
  display: grid;
  width: 4rem;
  height: 4rem;
  place-items: center;
  color: #1B4A7E;
  background: #EEF1F5;
  font-size: 28px;
}

.panel-next {
  display: flex;
  justify-content: flex-end;
  padding: 1rem 1.25rem;
  border-top: 0.5px solid var(--line);
}

.progressive-options {
  margin: 1rem;
  border: 0.5px solid var(--line);
}

.progressive-options > summary {
  padding: 0.85rem 1rem;
  color: #1B4A7E;
  cursor: pointer;
  background: #F7F9FB;
  font-weight: 500;
}

.publication-checklist {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 1.5rem;
  list-style: none;
}

.publication-checklist li {
  padding: 0.75rem 1rem;
  background: #F7F9FB;
  border-left: 0.25rem solid #1F7A5C;
}

.publication-checklist li.is-pending {
  border-left-color: #8A6100;
}

.publication-audience {
  display: grid;
  gap: 0.75rem;
  margin: 0 1.5rem 1.5rem;
  padding: 1rem;
  background: #F7F9FB;
  border: 0.5px solid var(--line);
  border-radius: 8px;
}

.publication-audience h3,
.publication-audience p {
  margin: 0;
}

.publication-institution-list {
  display: grid;
  gap: 0.55rem;
}

.publication-institution-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.2rem 0.65rem;
  align-items: start;
  padding: 0.7rem;
  background: #FFFFFF;
  border: 0.5px solid #E1E5EB;
  border-radius: 8px;
}

.publication-institution-option input {
  grid-row: 1 / span 2;
  width: 1.1rem;
  min-height: 1.1rem;
  margin: 0.15rem 0 0;
}

.publication-institution-option small,
.publication-audience-summary {
  color: #1E2A38;
}

/* El contexto deja de vivir en un modal: se lee junto al prompt que lo consume. */
.action-context-summary {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.85rem 1rem;
  background: #F7F9FB;
  border: 0.5px solid var(--line);
  border-left: 0.25rem solid #2E5F9C;
}

.action-context-summary > strong {
  color: #1B4A7E;
  font-size: 14px;
}

.action-context-summary > small {
  color: #1E2A38;
  line-height: 1.5;
}

.context-source-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.context-source-list li {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  background: #FFFFFF;
  border: 0.5px solid var(--line);
}

.context-source-list strong {
  display: block;
  color: #1B4A7E;
  font-size: 14px;
}

.context-source-list small {
  color: #1E2A38;
  font-size: 13px;
  line-height: 1.45;
}

/* --- Recorrido lineal: la hoja es el escenario y la tarjeta va acoplada --- */

/* Sobre el escritorio no va una barra de aplicacion. La franja azul con el nombre, el avance y
   los distintivos competia con la hoja justo donde queriamos que no hubiera nada: encima del
   documento. De la barra queda lo unico que sigue siendo una decision —salir—, y el resto se
   retira sin salir del arbol, porque el proyecto los sigue escribiendo. La franja no se pinta:
   el boton flota sobre el gris y sobre la hoja al desplazarse, y deja pasar el cursor en toda
   la banda que no ocupa, o un carril invisible se comeria los clics del documento. */
.runner-topbar {
  position: sticky;
  z-index: 4;
  top: 0;
  display: flex;
  align-items: center;
  padding: 1.25rem 1.5rem 0;
  background: transparent;
  border-bottom: 0;
  pointer-events: none;
}

.runner-topbar > *:not(.back-button) {
  display: none;
}

.runner-topbar .back-button {
  pointer-events: auto;
  margin: 0;
  padding: 0.42rem 0.85rem;
  color: var(--text-body);
  background: #FFFFFF;
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
}

.runner-topbar .back-button:hover {
  color: var(--brand-primary);
  background: #FFFFFF;
  border-color: var(--border-input);
  text-decoration: none;
}

.runner-identity {
  min-width: 0;
}

.runner-identity h1 {
  margin: 0;
  overflow: hidden;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.runner-identity .eyebrow {
  margin: 0 0 0.2rem;
  color: #A8BDD9;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* La etapa se lee arriba y se confirma abajo en tramos: avance evidente sin barra continua. */
.runner-progress {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

.runner-progress-label {
  margin: 0;
  color: #C3D3E6;
  font-size: 12px;
  font-weight: 500;
}

.runner-progress-track {
  width: 116px;
  height: 3px;
  overflow: hidden;
  background: rgb(255 255 255 / 22%);
  border-radius: 0;
  mask: repeating-linear-gradient(90deg, black 0 16px, transparent 16px 20px);
  -webkit-mask: repeating-linear-gradient(90deg, black 0 16px, transparent 16px 20px);
}

.runner-progress-track i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--brand-secondary);
  border-radius: 0;
  transition: width 320ms ease;
}

.runner-topbar .status-badge {
  gap: 0.4rem;
  padding: 0.28rem 0.62rem;
  color: var(--text-inverse-soft);
  background: rgb(255 255 255 / 12%);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
}

.runner-topbar .status-badge::before {
  width: 6px;
  height: 6px;
  background: #1F7A5C;
  border-radius: 50%;
  content: "";
}

.runner-topbar .test-mode-badge {
  padding: 0.28rem 0.62rem;
  color: var(--brand-primary-deep);
  border-radius: var(--radius-pill);
  font-size: 11px;
}

.runner-topbar .origin-badge {
  padding: 0.24rem 0.6rem;
  color: #C3D3E6;
  border-color: rgb(255 255 255 / 28%);
  border-radius: var(--radius-pill);
  font-size: 11px;
}

/* El escenario nunca se oscurece: la hoja se lee entera junto al asistente. Y el escenario es
   el escritorio: la hoja se apoya sobre el gris del procesador de textos, no sobre el fondo de
   la aplicacion, porque de eso vive la metafora —esto es un documento imprimiendose, no una
   pantalla con contenido. El gris arranca pegado a la barra de la etapa, sin una franja clara
   entremedio que delatara que son dos superficies distintas. */
.project-stage {
  padding: 1.5rem 1rem calc(2rem + var(--step-dock-space, 0px));
  /* El lienzo ya lo pinta el contenedor del proyecto. Repetir el degradado aquí lo reiniciaba
     y dejaba visible el rectángulo de la etapa sobre el fondo general. */
  background: transparent;
}

.project-extras {
  width: min(100%, 52rem);
  margin: 1rem auto 0;
}

.project-extras-body {
  display: grid;
  gap: 1.5rem;
  padding: 1rem;
  background: #FFFFFF;
  border: 0.5px solid var(--line);
}

.background-note {
  margin: 0.5rem 0 0;
  color: #1E2A38;
  font-size: 14px;
  line-height: 1.5;
}

/* Asistente y documento son dos objetos distintos: cada uno ocupa su propia columna. */
/* La hoja ocupa todo el ancho y el asistente se sobrepone. En una columna del 34% no cabía
   una banda de categorías legible, y menos la grilla de un presupuesto. */
#project-detail-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

.runner-topbar,
.project-stage {
  grid-column: 1 / -1;
}

/* El asistente flota sobre la hoja atenuada: se conserva el contexto sin competir por el
   ancho. La barra superior queda fuera para no perder la referencia de la etapa. Velo,
   tarjeta y encabezado se visten más abajo, junto con el formulario guiado: los dos son el
   mismo modal. */
.step-surface {
  position: fixed;
  z-index: 6;
  inset: 4.25rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-surface-inner {
  width: min(100%, 62rem);
  transition: transform 220ms ease, opacity 220ms ease;
}

/* Una rejilla se lee a lo ancho: comparar dos columnas o recorrer doce meses necesita
   espacio. Una pregunta suelta no, porque una línea de 77rem se lee peor que una de 62. */
.step-surface.is-wide .step-surface-inner {
  width: min(100%, 77.5rem);
}

/* Mientras el asistente trabaja no hay nada que decidir: el panel se reduce a un aviso. */
.step-surface.is-waiting .step-surface-inner {
  width: min(100%, 30rem);
  text-align: center;
}

.step-surface.is-leaving .step-surface-inner {
  opacity: 0;
  transform: translateY(1.5rem);
}

.step-heading {
  display: grid;
  gap: 0.25rem;
}

.step-heading h2 {
  margin: 0;
  color: #1B4A7E;
  font-size: 18px;
}

.step-copy {
  margin: 0;
  color: #1E2A38;
  font-size: 16px;
  line-height: 1.55;
}

.step-actions {
  display: flex;
  gap: 0.65rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.step-actions .inline-button {
  min-height: 3rem;
}

/* ---------------------------------------------------------------------------
   Panel de revisión, tratamiento «Hoja». El panel se lee como el documento que
   va a quedar: nada es editable hasta pedirlo, y las categorías dejan de ser
   bloques de color para volverse títulos con filete, que es el patrón de
   documento de SIGPLAN.
   --------------------------------------------------------------------------- */
.step-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
}

.step-heading-actions {
  flex: none;
  padding-top: 0.15rem;
}

.step-heading-actions[hidden] {
  display: none;
}

/* Entrar a editar es una acción secundaria: se ve, no compite. */
.review-edit-button {
  padding: 0.5rem 1.05rem;
  color: var(--action);
  background: transparent;
  border: var(--border-width) solid var(--border-input);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
}

.review-edit-button:hover {
  background: var(--tint-info);
  border-color: var(--action-secondary);
}

.review-edit-button[hidden] {
  display: none;
}

/* La nota solo aparece cuando hay una excepción que explicar. */
.review-note {
  margin: 0 0 1.1rem;
  padding-left: 0.8rem;
  border-left: 3px solid var(--brand-secondary);
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.review-doc {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.review-doc[hidden] {
  display: none;
}

.review-doc-section > h3 {
  margin: 0 0 0.7rem;
  padding-bottom: 0.4rem;
  border-bottom: var(--border-width) solid var(--border);
  color: var(--brand-primary);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Se componía con la serif del documento porque el panel mostraba la propuesta que iba a
   quedar escrita en la hoja. Desde que la propuesta se lee en su propia sección, aquí solo
   quedan alternativas por elegir, listas por marcar y resultados intermedios que nunca serán
   documento: la serif ya no representaba nada y hacía que un mismo modal tuviera dos
   tipografías, la del texto y la del campo que lo edita. */
.review-doc p,
.review-doc li {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-body);
}

.review-doc p {
  margin: 0 0 0.6rem;
}

.review-doc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.review-doc li {
  position: relative;
  padding-left: 1rem;
}

.review-doc li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-secondary);
}

/* Las bandas de categoría pierden el color dentro del panel: quedan como títulos
   con filete. La hoja del documento conserva su propio tratamiento. */
.step-surface .category-band {
  margin: 0 0 1.4rem;
}

.step-surface .category-band:last-child {
  margin-bottom: 0;
}

.step-surface .category-band-header,
.step-surface .category-band-header[data-tone="1"],
.step-surface .category-band-header[data-tone="2"],
.step-surface .category-band-header[data-tone="3"] {
  padding: 0 0 0.4rem;
  background: transparent;
  border-left: 0;
  border-bottom: var(--border-width) solid var(--border);
}

.step-surface .category-band-name,
.step-surface .category-band-header[data-tone="1"] .category-band-name,
.step-surface .category-band-header[data-tone="2"] .category-band-name,
.step-surface .category-band-header[data-tone="3"] .category-band-name {
  color: var(--brand-primary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
}

/* En lectura el recuento no aporta: la lista está completa a la vista. Al editar
   sí importa, porque dice cuántos elementos se conservan de cuántos. */
.step-surface .review-doc .category-band-count {
  display: none;
}

.step-surface .category-band-count {
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  font-size: 12px;
}

.step-surface .review-doc .category-band-row {
  position: relative;
  padding: 0.3rem 0 0.3rem 1rem;
  border-bottom: 0;
}

.step-surface .review-doc .category-band-row::before {
  content: "";
  position: absolute;
  top: 0.95em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-secondary);
}

.step-surface .review-doc .category-band-row > p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
}

/* El pie deja de repartirse en dos columnas iguales: solo queda Continuar. */
.guided-review-panel .guided-result-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.7rem;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: var(--border-width) solid var(--border);
}

.guided-review-panel .guided-result-actions .inline-button {
  width: auto;
  min-width: 9rem;
}

.guided-review-panel .guided-result-actions[hidden],
.guided-review-panel .guided-review-options[hidden] {
  display: none;
}

/* ---------------------------------------------------------------------------
   La sección que se está escribiendo. Sustituye a la franja de aviso: en vez de
   anunciar arriba que el asistente trabaja, se ve avanzar el documento donde
   corresponde. El cursor imita la escritura sin fingir texto que todavía no
   existe, que sería inventar contenido.
   --------------------------------------------------------------------------- */
.document-section.is-writing {
  padding: 0.75rem 1rem;
  background: var(--surface-hover);
  border-left: 0.25rem solid var(--brand-secondary);
}

.document-section.is-writing .document-placeholder {
  color: var(--action);
  font-style: normal;
}

.document-section.is-writing .document-placeholder::after,
.document-section.is-writing.is-pending::after {
  content: "Pensando…";
  display: inline;
  width: auto;
  height: auto;
  margin-left: 0.35ch;
  background: none;
  vertical-align: baseline;
  color: var(--brand-secondary);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.02em;
  animation: thinking-pulse 1.8s ease-in-out infinite;
}

@keyframes thinking-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .document-section.is-writing .document-placeholder::after,
  .document-section.is-writing.is-pending::after {
    animation: none;
    opacity: 0.7;
  }
}

/* ---------------------------------------------------------------------------
   El esqueleto de lo que falta. La hoja muestra desde el principio la forma del
   documento —es un formato oficial, no una conversación—, pero una sección sin
   escribir no necesita decirlo con palabras: basta con verse apagada. La que se
   está escribiendo recupera su color, aunque siga vacía.
   --------------------------------------------------------------------------- */
.document-section.is-pending {
  opacity: 0.5;
}

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

.document-section.is-writing.is-pending,
.document-section.is-target.is-pending {
  opacity: 1;
}

.document-section.is-writing.is-pending > :is(h2, h3, h4),
.document-section.is-target.is-pending > :is(h2, h3, h4) {
  color: inherit;
}

/* ---------------------------------------------------------------------------
   Edición manual en la hoja. La acción vive junto al título de cada sección y
   abre un modal: la persona conserva el contexto sin arriesgar modificaciones
   accidentales sobre el resto del documento.
   --------------------------------------------------------------------------- */
.document-section-heading {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
}

.document-section-heading > :is(h2, h3, h4) {
  flex: 1;
}

.document-section-heading.is-untitled {
  justify-content: flex-end;
}

/* Un disco azul en la esquina del bloque editable. La palabra "Editar" repetida sección tras
   sección competía con el texto del documento, y atenuarla al 35% para que dejara de competir
   escondía la capacidad de quien no pasa el cursor por encima. El disco resuelve las dos cosas:
   se lee de inmediato como control de la aplicación —no como parte de la hoja— y no necesita
   esconderse para no estorbar. El rótulo sigue ahí, en el aria-label y el title. */
.section-edit-button {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  color: #FFFFFF;
  background: var(--action);
  border: 0;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  transition: background-color 0.15s;
}

.section-edit-button:hover {
  color: #FFFFFF;
  background: var(--action-hover);
}

.section-edit-button:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 2px;
}

.manual-mark {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  color: var(--text-icon-muted);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.manual-mark::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand-secondary);
}

.section-edit-dialog {
  width: min(48rem, calc(100vw - 2rem));
}

/* Corregir una rejilla pide el mismo espacio que decidirla. */
.section-edit-dialog.is-wide {
  width: min(77.5rem, calc(100vw - 2rem));
}

.section-edit-content {
  max-height: min(56vh, 38rem);
  padding: 0.25rem;
  overflow: auto;
}

.section-edit-content .structured-editor {
  display: grid;
  gap: 1rem;
}

.section-edit-content textarea {
  min-height: 9rem;
  font-family: var(--sans);
  line-height: 1.6;
}

.section-edit-notice {
  margin: 0;
  padding-left: 0.8rem;
  border-left: 3px solid var(--warning);
  color: var(--text-secondary);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Acoplado de trabajo. Reemplaza la ventana de espera y el velo de revisión: el
   estado del asistente vive al pie de la hoja, que queda legible y desplazable
   mientras tanto. Un solo componente con estados, para que no compita con la
   sección de cierre.
   --------------------------------------------------------------------------- */
.project-dock {
  position: fixed;
  /* Debe seguir operativo incluso cuando una etapa guiada ocupa el escenario. */
  z-index: 7;
  right: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  gap: 1.25rem;
  align-items: center;
  width: auto;
  max-width: min(34rem, calc(100vw - 2.5rem));
  padding: 0.8rem 1rem;
  background: rgb(255 255 255 / 96%);
  border: var(--border-width) solid var(--border-input);
  border-radius: var(--radius-lg);
  box-shadow: none;
  backdrop-filter: none;
}

.project-dock[hidden] {
  display: none;
}

.dock-state {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  min-width: 0;
}

.dock-copy {
  min-width: 0;
}

.dock-title {
  margin: 0;
  color: var(--brand-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.dock-detail {
  margin: 0.1rem 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.4;
}

.dock-detail[hidden] {
  display: none;
}

.dock-actions {
  display: flex;
  flex: none;
  gap: 0.5rem;
  align-items: center;
}

.dock-download-menu {
  position: relative;
}

.dock-download-menu > summary {
  cursor: pointer;
  list-style: none;
}

.dock-download-menu > summary::-webkit-details-marker {
  display: none;
}

.dock-download-menu > summary::after {
  content: "⌄";
  margin-left: 0.45rem;
}

.dock-download-icon {
  display: none;
}

.dock-download-options {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.55rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  width: 16rem;
  padding: 0.7rem;
  background: var(--surface-default);
  border: var(--border-width) solid var(--border-input);
  border-radius: var(--radius-lg);
  box-shadow: none;
}

.dock-download-options small {
  grid-column: 1 / -1;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Cuando el paso ocupa el escenario, la descarga vive en su barra en vez de flotar sobre
   las acciones. Sigue disponible con teclado y despliega sus formatos dentro del modal. */
.step-modal-bar .project-dock.is-step-compact {
  position: static;
  z-index: auto;
  right: auto;
  bottom: auto;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  margin: 0 0 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  backdrop-filter: none;
}

.project-dock.is-step-compact .dock-state,
.project-dock.is-step-compact .dock-actions > :not(.dock-download-menu),
.project-dock.is-step-compact .dock-download-label {
  display: none;
}

.step-modal-bar .project-dock.is-step-compact .dock-actions,
.step-modal-bar .project-dock.is-step-compact .dock-download-menu {
  width: 2.75rem;
  height: 2.75rem;
}

.step-modal-bar #project-dock.is-step-compact .dock-download-menu > summary {
  display: inline-flex;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--text-inverse);
  background: rgb(255 255 255 / 12%);
  border: 0.5px solid rgb(255 255 255 / 65%);
  border-radius: 50%;
}

.step-modal-bar #project-dock.is-step-compact .dock-download-menu > summary:hover,
.step-modal-bar #project-dock.is-step-compact .dock-download-menu[open] > summary {
  background: rgb(255 255 255 / 24%);
}

.step-modal-bar #project-dock.is-step-compact .dock-download-menu > summary::after {
  content: none;
}

.step-modal-bar .project-dock.is-step-compact .dock-download-icon {
  display: inline-flex;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}

.step-modal-bar .project-dock.is-step-compact .dock-download-options {
  z-index: 2;
  top: calc(100% + 0.55rem);
  right: 0;
  bottom: auto;
  color: var(--text-body);
}

#project-dock .dock-download-options .inline-button {
  min-width: 0;
  width: 100%;
}

/* Ambos botones comparten caja. Sin esto el primario tomaba el relleno y el borde de
   2px de la vista de usuario y el secundario los suyos, y quedaban de distinto alto. */
#project-dock .dock-actions .inline-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 7.5rem;
  min-height: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0 1.1rem;
  border-width: 0.5px;
  border-style: solid;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transform: none;
  box-shadow: none;
}

#project-dock .dock-actions .inline-button:active {
  transform: translateY(1px);
}

/* La marca dice el estado antes de leer: gira como aro mientras el asistente
   trabaja y queda quieta, como punto sólido, cuando hay algo que decidir. */
.dock-mark {
  flex: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid var(--text-icon-muted);
  background: transparent;
}

.project-dock[data-tone="working"] .dock-mark {
  border-color: var(--brand-secondary);
  border-top-color: transparent;
  animation: dock-spin 0.85s linear infinite;
}

.project-dock[data-tone="proposal"] .dock-mark {
  border-color: var(--action);
  background: var(--action);
}

.project-dock[data-tone="ready"] .dock-mark {
  border-color: var(--success-on-white);
  background: var(--success-on-white);
}

.project-dock[data-tone="failed"] .dock-mark {
  border-color: var(--danger);
  background: var(--danger);
}

@keyframes dock-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .project-dock[data-tone="working"] .dock-mark {
    animation: none;
    border-top-color: var(--brand-secondary);
  }
}

/* En pantallas angostas el acoplado ocupa el ancho y apila su contenido, para no
   comerse la hoja. */
@media (max-width: 640px) {
  .project-dock {
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
    max-width: none;
    flex-direction: column;
    gap: 0.7rem;
    align-items: stretch;
  }

  .dock-actions .inline-button {
    flex: 1;
  }

  .dock-download-options {
    right: auto;
    left: 0;
  }
}

/* Las acciones del encabezado del panel: redactar y volver a la hoja. */
.step-heading-bar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.review-back-button {
  padding: 0.5rem 1.05rem;
  color: var(--text-secondary);
  background: transparent;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
}

.review-back-button:hover {
  background: var(--surface-subtle);
  border-color: var(--border-input);
}

/* Elegir una alternativa es la pantalla entera, no un modo escondido tras «Editar». La fila
   toma el lenguaje de tarjeta de opción de SIGPLAN para que se lea como algo que se pulsa:
   borde completo, y al quedar elegida cambia borde y fondo. */
.step-surface .single-selection-row {
  padding: 0.85rem 0.95rem;
  background: var(--surface-default);
  border: 2px solid var(--border-card);
  border-radius: var(--radius);
  transition: border-color 0.2s, background 0.2s;
}

.step-surface .single-selection-row:hover {
  border-color: var(--border-input);
  background: var(--surface-input);
}

.step-surface .single-selection-row:not(.structured-list-row-excluded) {
  background: var(--surface-selected);
  border-color: var(--action);
  box-shadow: none;
}

.step-surface .single-selection-row.structured-list-row-excluded {
  opacity: 1;
}

.step-surface .structured-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* La sección que recibirá la respuesta se marca en la hoja, sobre la tarjeta. */
/* La tarjeta acoplada ocupa el pie de la ventana: el destino se detiene justo encima de ella. */
.document-section.is-target {
  padding: 0.75rem 1rem;
  background: #F7F9FB;
  border-left: 0.25rem solid #2E5F9C;
  scroll-margin-top: 6rem;
  scroll-margin-bottom: calc(var(--step-dock-space, 0px) + 2rem);
}

.document-section.is-target .document-placeholder {
  color: #2E5F9C;
  font-weight: 500;
}

.document-section.is-just-written {
  animation: section-written 900ms ease;
  scroll-margin-top: 6rem;
  scroll-margin-bottom: calc(var(--step-dock-space, 0px) + 2rem);
}

@keyframes section-written {
  0% {
    background: #F7E8E1;
  }

  100% {
    background: transparent;
  }
}

/* Una tabla no se teclea celda por celda: espera a que termine la prosa y entra entera. */
.document-section .is-revealing {
  opacity: 0;
}

.document-section .is-revealed {
  animation: block-revealed 380ms ease;
}

@keyframes block-revealed {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .document-section .is-revealed {
    animation: none;
  }
}

.document-workspace {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.stage-rail,
.stage-action-surface {
  background: #FFFFFF;
  border: 0.5px solid var(--line);
}

.stage-rail {
  position: sticky;
  top: 5rem;
}

.stage-rail > div:first-child {
  padding: 1rem;
  color: #FFFFFF;
  background: #1B4A7E;
}

.stage-rail h2,
.stage-rail p {
  margin: 0;
}

.stage-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stage-item {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.65rem;
  padding: 0.8rem 1rem;
  color: #1E2A38;
  border-bottom: 0.5px solid var(--line);
}

.stage-item.is-current {
  color: #1B4A7E;
  background: #F7F9FB;
  font-weight: 500;
}

.stage-state {
  color: #2E5F9C;
  font-weight: 500;
}

.document-main-column {
  min-width: 0;
}

/* La hoja estadistica es el mismo documento que la de un proyecto. Solo se diferencia en que
   no tiene el interruptor de articulado fijo que obliga a reservar la esquina del encabezado:
   sin ese control, reservarla dejaria el titulo corrido sin motivo. */
.statistics-sheet > header {
  padding-right: 0;
}

.document-sheet {
  /* El margen de la hoja viaja como variable porque la lamina apaisada necesita saber cuanto
     mide para cubrir el papel de borde a borde cuando lo interrumpe. */
  --sheet-pad: clamp(2rem, 6vw, 4.5rem);
  width: min(100%, 52rem);
  min-height: 67rem;
  margin: 0 auto 1rem;
  padding: var(--sheet-pad);
  background: #FFFFFF;
  border: 0.5px solid #E1E5EB;
  box-shadow: none;
}

.document-sheet > header {
  position: relative;
  margin-bottom: 3rem;
  padding-bottom: 1rem;
  padding-right: 13rem;
  border-bottom: 0.2rem solid #1B4A7E;
}

/* ---------------------------------------------------------------------------
   Texto normativo. El destacador imita el marcador sobre papel: sigue el borde
   irregular del texto en vez de pintar una caja al ancho de la hoja, que se
   leeria como un aviso del sistema y no como parte del documento. Sin el
   interruptor encendido la marca desaparece por completo: el articulado tiene
   que poder leerse como texto corriente, que es como sale impreso.
   --------------------------------------------------------------------------- */
.fixed-mark {
  padding: 0.06em 0;
  background: transparent;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-color 0.18s ease;
}

.document-sheet.is-marking-fixed .fixed-mark {
  padding: 0.06em 0.18em;
  background: #E4F1EC;
}

/* Destacar celda por celda convertiria la tabla en un tablero: la marca la lleva el bloque. */
.document-sheet.is-marking-fixed .document-fixed .is-fixed-table table {
  background: #E4F1EC;
}

@media (prefers-reduced-motion: reduce) {
  .fixed-mark { transition: none; }
}

.fixed-mark-control {
  position: absolute;
  top: 0;
  right: 0;
  width: 12rem;
  font-family: var(--sans);
  text-align: right;
}

.fixed-mark-toggle {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.35rem 0.7rem;
  color: var(--text-body);
  background: var(--surface-subtle);
  border: var(--border-width) solid var(--border-card);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
}

.fixed-mark-toggle:hover {
  border-color: var(--border-input);
}

.fixed-mark-track {
  flex: 0 0 auto;
  position: relative;
  width: 1.7rem;
  height: 0.95rem;
  background: var(--text-icon-muted);
  border-radius: var(--radius-pill);
  transition: background-color 0.18s ease;
}

.fixed-mark-track > i {
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 0.65rem;
  height: 0.65rem;
  background: #FFFFFF;
  border-radius: 50%;
  transition: transform 0.18s ease;
}

.fixed-mark-toggle[aria-pressed="true"] .fixed-mark-track {
  background: var(--brand-primary);
}

.fixed-mark-toggle[aria-pressed="true"] .fixed-mark-track > i {
  transform: translateX(0.75rem);
}

@media (prefers-reduced-motion: reduce) {
  .fixed-mark-track,
  .fixed-mark-track > i { transition: none; }
}

.fixed-mark-note {
  margin: 0.45rem 0 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
}

.fixed-mark-note[hidden] { display: none; }

/* En pantallas angostas la cabecera no tiene ancho para reservar una columna al control. */
@media (max-width: 52rem) {
  .document-sheet > header { padding-right: 0; }

  .fixed-mark-control {
    position: static;
    width: auto;
    margin-top: 0.9rem;
    text-align: left;
  }
}

.document-sheet h1 {
  color: #1B4A7E;
  font-size: 32px;
}

.document-section {
  margin-bottom: 2rem;
  color: #1E2A38;
  font-size: 16px;
  line-height: 1.65;
}

.document-section h2,
.document-section h3,
.document-section h4 {
  color: #1B4A7E;
  margin: 1.4rem 0 0.55rem;
  line-height: 1.25;
}

.document-section p,
.document-section ul,
.document-section ol,
.document-section blockquote,
.document-section pre {
  margin: 0.6rem 0;
}

.document-section ul,
.document-section ol {
  padding-left: 1.5rem;
}

.document-section li + li {
  margin-top: 0.3rem;
}

.document-section blockquote {
  padding: 0.7rem 1rem;
  color: #5C6B7E;
  background: #F7F9FB;
  border-left: 0.25rem solid #2E5F9C;
}

.document-section pre {
  padding: 0.9rem;
  overflow-x: auto;
  background: #EEF1F5;
  border-radius: 8px;
  white-space: pre-wrap;
}

.document-section code {
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  font-size: 0.9em;
}

/* Lista con categorías: cada una es una banda. El encabezado agrupa y muestra cuántos
   elementos se conservan, pero nunca es un elemento seleccionable.
   El tono distingue por posición, no por significado: el rojo sigue reservado a errores. */
.category-band {
  margin: 0 0 1.1rem;
}

.category-band-list {
  display: grid;
  gap: 0.2rem;
}

.category-band-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.75rem;
  border-left: 0.25rem solid #1B4A7E;
  background: #F7F9FB;
}

.category-band-header[data-tone="1"] {
  border-left-color: #1B4A7E;
  background: #F7F9FB;
}

.category-band-header[data-tone="2"] {
  border-left-color: #1B4A7E;
  background: #EEF1F5;
}

.category-band-header[data-tone="3"] {
  border-left-color: #1F7A5C;
  background: #E4F1EC;
}

.category-band-name {
  color: #1B4A7E;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.category-band-header[data-tone="1"] .category-band-name { color: #13315C; }
.category-band-header[data-tone="2"] .category-band-name { color: #1E2A38; }
.category-band-header[data-tone="3"] .category-band-name { color: #14543F; }

.category-band-count {
  flex: none;
  padding: 0.1rem 0.5rem;
  color: #5C6B7E;
  background: #EEF1F5;
  border-radius: 8px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.category-band-row {
  padding: 0.45rem 0.75rem 0.45rem 1rem;
  border-bottom: 0.5px solid #E1E5EB;
}

.category-band-row:last-of-type {
  border-bottom: 0;
}

.category-band-row > p {
  margin: 0;
}

.category-band-row.is-editable {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.7rem;
  padding: 0.6rem 0.75rem 0.6rem 1rem;
}

/* El alto lo fija el contenido: sin esto cada elemento queda con su propia barra. */
.category-band-row textarea,
.structured-list-row textarea,
.single-selection-copy textarea {
  min-height: 0;
  padding: 0.35rem 0.5rem;
  overflow-y: hidden;
  resize: none;
  line-height: 1.45;
}

.category-band-row.structured-list-row-excluded {
  opacity: 0.5;
}

.category-band-row.structured-list-row-excluded textarea {
  text-decoration: line-through;
}

.category-band-add {
  margin: 0.4rem 0 0 1rem;
}

/* Planilla de cálculo: la columna calculada se distingue de la editable, y el total cierra. */
.spreadsheet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.spreadsheet-table th,
.spreadsheet-table td {
  padding: 0.4rem 0.6rem;
  border: 0.5px solid #C9D3DF;
  text-align: left;
  vertical-align: middle;
}

.spreadsheet-table th {
  color: #FFFFFF;
  background: #1B4A7E;
  font-weight: 500;
}

.spreadsheet-table .is-numeric {
  text-align: right;
  white-space: nowrap;
}

.spreadsheet-table td.is-computed {
  color: #1E2A38;
  background: #EEF1F5;
}

.spreadsheet-table tr.is-subtotal td {
  background: #EEF1F5;
  font-weight: 500;
}

.spreadsheet-table tr.is-total td {
  background: #EEF1F5;
  font-weight: 500;
}

.spreadsheet-table.is-editable input,
.spreadsheet-table.is-editable select {
  width: 100%;
  min-height: 2rem;
  padding: 0.25rem 0.35rem;
  font-size: 14px;
}

.spreadsheet-table.is-editable input[type="number"] {
  text-align: right;
}

.spreadsheet-issue {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.7rem;
  color: #7A1F1F;
  background: #F7E5E5;
  border-left: 0.25rem solid #9B2C2C;
  font-size: 14px;
}

.document-table-scroll {
  margin: 1rem 0;
  max-width: 100%;
}

.document-section table {
  width: 100%;
  margin: 0.8rem 0;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.4;
}

.document-section th,
.document-section td {
  padding: 0.65rem 0.7rem;
  vertical-align: top;
  border: 0.5px solid #C9D3DF;
}

/* Las tablas textuales habituales deben leerse completas en la hoja. La distribución se fija
   al crear la tabla y el texto continúa dentro de su celda; la barra lateral queda disponible
   para las tablas verdaderamente anchas (seis o más columnas, Gantt o planillas). */
.document-section .document-table-fit {
  table-layout: fixed;
}

/* El reparto de anchos vive aquí y no como estilo escrito en el documento: la política de
   contenido del servidor declara style-src 'self' sin unsafe-inline, así que un ancho escrito en
   el marcado quedaría descartado. El renderizador compartido añade la clase con la cantidad de
   columnas y el reparto se aplica desde esta hoja, una sola vez para las dos hojas. */
.document-section .document-table-cols-3 col:nth-child(1) { width: 28%; }
.document-section .document-table-cols-3 col:nth-child(2) { width: 35%; }
.document-section .document-table-cols-3 col:nth-child(3) { width: 37%; }
.document-section .document-table-cols-4 col:nth-child(1) { width: 23%; }
.document-section .document-table-cols-4 col:nth-child(2) { width: 24%; }
.document-section .document-table-cols-4 col:nth-child(3) { width: 26%; }
.document-section .document-table-cols-4 col:nth-child(4) { width: 27%; }
.document-section .document-table-cols-5 col:nth-child(1) { width: 22%; }
.document-section .document-table-cols-5 col:nth-child(2) { width: 16%; }
.document-section .document-table-cols-5 col:nth-child(3) { width: 20%; }
.document-section .document-table-cols-5 col:nth-child(4) { width: 20%; }
.document-section .document-table-cols-5 col:nth-child(5) { width: 22%; }

.document-section .document-table-fit th,
.document-section .document-table-fit td {
  min-width: 0;
  padding: 0.5rem 0.55rem;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.document-section th {
  color: #FFFFFF;
  background: #1B4A7E;
  font-weight: 500;
  text-align: left;
}

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

.document-section td > p {
  margin: 0;
}

.document-section details {
  margin-top: 0.75rem;
  color: #1E2A38;
  font-size: 13px;
}

.document-loading {
  display: grid;
  min-height: 20rem;
  place-items: center;
  place-content: center;
  color: var(--muted);
}

.message-warning {
  color: #6B4B00;
  background: #F5EEDC;
  border: 0.5px solid #8A6100;
}

.download-actions {
  display: flex;
  gap: 0.75rem;
  padding: 1.25rem;
}

.institution-summary {
  padding: 1.5rem;
}

.institution-summary dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.status-badge {
  color: #14543F;
  background: #E4F1EC;
}

.status-badge[data-status="requires_review"],
.status-badge[data-status="waiting_information"],
.status-badge[data-status="pending"] {
  color: #6B4B00;
  background: #F5EEDC;
}

.tertiary-button {
  min-height: 2.7rem;
  padding: 0.7rem 0.9rem;
  color: #5C6B7E;
  background: transparent;
  border: 0.5px solid transparent;
  font-weight: 500;
}

.danger-button.inline-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.7rem;
  padding: 0.7rem 1rem;
  color: #FFFFFF;
  background: #9B2C2C;
  border: 0.5px solid #9B2C2C;
  font-weight: 500;
}

.builder-information-form {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.5rem;
}

.assistant-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1.5rem;
}

.assistant-summary strong,
.assistant-summary p {
  display: block;
  margin: 0 0 0.5rem;
}

.assistant-project-guide {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin: 0 1.5rem 1.5rem;
  padding: 1rem;
  background: #F7F9FB;
  border-left: 4px solid #2E5F9C;
}

.assistant-project-guide strong,
.assistant-project-guide p {
  display: block;
  margin: 0;
}

.assistant-project-guide p {
  max-width: 48rem;
  margin-top: 0.3rem;
  color: #1E2A38;
  font-size: 13px;
  line-height: 1.5;
}

.builder-disclosure {
  background: #FFFFFF;
  border: 0.5px solid #E1E5EB;
}

.builder-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  cursor: pointer;
  list-style: none;
}

.builder-disclosure > summary::-webkit-details-marker {
  display: none;
}

.builder-disclosure > summary strong,
.builder-disclosure > summary small {
  display: block;
}

.builder-disclosure > summary small {
  margin-top: 0.2rem;
  color: #1E2A38;
}

.builder-disclosure[open] > summary {
  background: #F7F9FB;
  border-bottom: 0.5px solid #2E5F9C;
}

.disclosure-action {
  color: #2E5F9C;
  font-weight: 500;
}

.builder-disclosure > .builder-row {
  border: 0;
}

.form-field-builder {
  align-items: stretch;
  gap: 1rem;
  padding: 1.1rem;
}

.form-question-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(13rem, 0.7fr);
  gap: 0.9rem;
}

.choice-editor,
.table-column-editor {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  background: #F7F9FB;
  border-left: 4px solid #2E5F9C;
}

.table-column-editor {
  margin-right: 1.5rem;
  margin-left: 1.5rem;
}

.choice-editor-heading strong,
.choice-editor-heading small,
.table-column-editor strong,
.table-column-editor small {
  display: block;
}

.choice-editor-heading small,
.table-column-editor small {
  margin-top: 0.25rem;
  color: #1E2A38;
  font-size: 12px;
  line-height: 1.45;
}

.choice-list {
  display: grid;
  gap: 0.55rem;
}

.choice-row {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
}

.choice-row input {
  min-height: 2.65rem;
}

.choice-marker {
  color: #2E5F9C;
  text-align: center;
  font-weight: 500;
}

.builder-field-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.9rem;
  border-top: 0.5px solid #E1E5EB;
}

.builder-required-toggle {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  color: #13315C;
}

.builder-required-toggle input {
  width: 1.1rem;
  min-height: 1.1rem;
  margin: 0;
}

.stage-action-builder {
  overflow: hidden;
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: var(--radius-sm);
}

.stage-action-surface {
  scroll-margin-top: 1rem;
}

.structured-editor,
.structured-object,
.structured-list {
  display: grid;
  gap: 0.8rem;
}

.structured-editor {
  padding: 1rem;
  background: #F7F9FB;
  border: 0.5px solid #E1E5EB;
}

.structured-field {
  display: grid;
  gap: 0.45rem;
}

.structured-field > strong {
  color: var(--brand-primary);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
}

.structured-list-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
  padding: 0.75rem;
  background: #FFFFFF;
  border-left: 3px solid #2E5F9C;
}

.structured-list-choice {
  display: flex;
  align-items: center;
  min-height: 2.2rem;
  margin: 0;
}

.structured-list-choice input {
  width: 1.2rem;
  min-height: 1.2rem;
  margin: 0;
}

.structured-list-row-excluded {
  border-left-color: #C9D3DF;
  background: #EEF1F5;
  opacity: 0.6;
}

.single-selection-row {
  align-items: start;
  border-left-color: #C9D3DF;
  cursor: pointer;
}

.single-selection-row:not(.structured-list-row-excluded) {
  border-left-color: #2E5F9C;
  background: #F7F9FB;
}

.single-selection-copy p {
  margin: 0;
  color: #1E2A38;
  font-size: 16px;
  line-height: 1.55;
}

.single-selection-copy textarea {
  width: 100%;
}

.structured-list-hint {
  margin: 0;
  color: #1E2A38;
  font-size: 14px;
  line-height: 1.5;
}

.compact-heading {
  padding: 0;
}

.compact-heading h4,
.background-section h3 {
  margin: 0;
  color: #1B4A7E;
  font-size: 16px;
}

.inline-note,
.dialog-copy {
  margin: 0;
  color: #1E2A38;
  line-height: 1.55;
}

.checkbox-field {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  margin: 0 1.5rem;
  color: #13315C;
}

.checkbox-field input {
  width: 1.1rem;
  min-height: 1.1rem;
  margin: 0;
}

.dialog-copy {
  padding: 0 1.5rem;
}

.project-wizard-dialog {
  width: min(52rem, calc(100vw - 2rem));
}

.assistant-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  padding: 0.5rem 1.5rem;
}

.assistant-option-card {
  display: grid;
  gap: 0.65rem;
  min-height: 11rem;
  padding: 1.25rem;
  color: #13315C;
  text-align: left;
  background: #FFFFFF;
  border: 2px solid #E1E5EB;
}

.assistant-option-card:hover,
.assistant-option-card.is-selected {
  background: #F7F9FB;
  border-color: #2E5F9C;
}

.assistant-option-card strong {
  color: #1B4A7E;
  font-size: 18px;
}

.assistant-option-card p,
.assistant-option-card small {
  margin: 0;
}

.assistant-option-card small {
  color: #1E2A38;
}

.project-option-empty {
  display: grid;
  grid-column: 1 / -1;
  justify-items: center;
  gap: 0.75rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: #FFFFFF;
  border: 0.5px solid #E1E5EB;
}

.project-option-empty strong {
  color: #1B4A7E;
  font-size: 18px;
}

.project-option-empty p {
  max-width: 38rem;
  margin: 0;
  color: #1E2A38;
}

.wizard-success {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.wizard-success > span {
  display: grid;
  width: 4rem;
  height: 4rem;
  place-items: center;
  color: var(--text-inverse);
  background: var(--success-on-white);
  font-size: 28px;
}

.wizard-success h3,
.wizard-success p {
  margin: 0;
}

.compact-action {
  padding: 1.75rem 1rem;
}

.background-section {
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem;
  border-top: 0.5px solid #E1E5EB;
}

.background-record {
  gap: 1rem;
}

.record-actions {
  justify-content: flex-end;
}

select[multiple] {
  min-height: 9rem;
}

.catalog-section {
  margin-bottom: 1.5rem;
}

.assistant-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.1rem;
}

/* La tarjeta completa es el control, no una ficha con un boton adentro: el usuario elige un
   asistente. El tono trae su propio color de texto porque el contraste sobre un fondo
   saturado no se resuelve solo. */
.assistant-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 11.5rem;
  padding: 1.35rem;
  color: var(--card-ink);
  text-align: left;
  background: var(--card-tone);
  border: none;
  border-radius: 12px;
  box-shadow: none;
  transition: transform 130ms ease, box-shadow 130ms ease;
}

.assistant-card:hover {
  transform: translateY(-3px);
  box-shadow: none;
}

.assistant-card:active {
  transform: translateY(1px);
  box-shadow: none;
}

.assistant-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  outline-offset: 3px;
}

.assistant-card small,
.assistant-card h3,
.assistant-card p {
  margin: 0;
  color: inherit;
}

.assistant-card small {
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.82;
}

.assistant-card h3 {
  font-size: 18px;
  line-height: 1.25;
  text-wrap: balance;
}

.assistant-card p {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.9;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.assistant-card-footer {
  margin-top: auto;
  padding-top: 0.7rem;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

/* --- Tabla de asistentes (vista administrador) --- */

.assistant-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}

.assistant-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.65rem 1rem;
  background: #FFFFFF;
  color: #5C6B7E;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  border-bottom: 0.5px solid var(--line);
}

.assistant-table tbody tr {
  border-bottom: 0.5px solid #E1E5EB;
  transition: background 120ms ease;
}

.assistant-table tbody tr:last-child {
  border-bottom: none;
}

.assistant-table tbody tr:hover {
  background: #F7F9FB;
}

.assistant-table td {
  padding: 0.85rem 1rem;
  vertical-align: middle;
}

.assistant-cell {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 16rem;
}

.assistant-cell-icon {
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 16px;
  color: #FFFFFF;
  background: var(--card-tone);
}

.assistant-cell-text {
  min-width: 0;
}

.assistant-cell-name {
  margin: 0;
  font-weight: 500;
  color: #13315C;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assistant-cell-desc {
  margin: 0.15rem 0 0;
  font-size: 12px;
  color: #5C6B7E;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 22rem;
}

.version-cell {
  font-weight: 500;
  color: #5C6B7E;
  white-space: nowrap;
}

.version-cell .unpublished {
  color: #8FA9C9;
  font-weight: 500;
  font-style: italic;
}

.action-group {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.action-btn {
  padding: 0.3rem 0.6rem;
  color: #5C6B7E;
  background: #F7F9FB;
  border: 0.5px solid #E1E5EB;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}

.action-btn:hover {
  color: #1E2A38;
  background: #EEF1F5;
  border-color: #C9D3DF;
}

.action-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.action-btn[disabled]:hover {
  color: #5C6B7E;
  background: #F7F9FB;
  border-color: #E1E5EB;
}

.action-date {
  display: block;
  margin-top: 0.35rem;
  color: #8FA9C9;
  font-size: 11px;
}

.sort-controls {
  display: flex;
  gap: 0.35rem;
}

.sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.6rem;
  color: #5C6B7E;
  background: #F7F9FB;
  border: 0.5px solid #E1E5EB;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}

.sort-btn:hover {
  color: #5C6B7E;
  background: #EEF1F5;
}

.sort-btn.active {
  color: var(--brand-primary);
  background: #F7F9FB;
  border-color: var(--brand-primary);
}

.sort-btn .arrow {
  font-size: 11px;
  line-height: 1;
}

/* El tono se resuelve una sola vez, por atributo, y de ahi lo heredan la tarjeta del catalogo,
   el encabezado de la vista previa y la muestra del constructor. */
[data-accent="institutional"] { --card-tone: var(--accent-institutional); --card-ink: var(--accent-institutional-ink); }
[data-accent="navy"] { --card-tone: var(--accent-navy); --card-ink: var(--accent-navy-ink); }
[data-accent="azure"] { --card-tone: var(--accent-azure); --card-ink: var(--accent-azure-ink); }
[data-accent="cyan"] { --card-tone: var(--accent-cyan); --card-ink: var(--accent-cyan-ink); }
[data-accent="aqua"] { --card-tone: var(--accent-aqua); --card-ink: var(--accent-aqua-ink); }
[data-accent="teal"] { --card-tone: var(--accent-teal); --card-ink: var(--accent-teal-ink); }
[data-accent="mint"] { --card-tone: var(--accent-mint); --card-ink: var(--accent-mint-ink); }
[data-accent="green"] { --card-tone: var(--accent-green); --card-ink: var(--accent-green-ink); }
[data-accent="olive"] { --card-tone: var(--accent-olive); --card-ink: var(--accent-olive-ink); }
[data-accent="amber"] { --card-tone: var(--accent-amber); --card-ink: var(--accent-amber-ink); }
[data-accent="bronze"] { --card-tone: var(--accent-bronze); --card-ink: var(--accent-bronze-ink); }
[data-accent="clay"] { --card-tone: var(--accent-clay); --card-ink: var(--accent-clay-ink); }
[data-accent="brick"] { --card-tone: var(--accent-brick); --card-ink: var(--accent-brick-ink); }
[data-accent="berry"] { --card-tone: var(--accent-berry); --card-ink: var(--accent-berry-ink); }
[data-accent="plum"] { --card-tone: var(--accent-plum); --card-ink: var(--accent-plum-ink); }
[data-accent="slate"] { --card-tone: var(--accent-slate); --card-ink: var(--accent-slate-ink); }

/* El tono traía su tinta y no había cómo corregirla. Estas dos reglas van después de la
   tabla para que la elección de quien construyó el asistente sea la que manda. */
[data-ink="white"] { --card-ink: #FFFFFF; }
[data-ink="black"] { --card-ink: #0B2545; }

/* --- Cupos del convenio: reemplazan la idea de creditos. --- */
.quota-section {
  margin-bottom: 1.5rem;
}

.quota-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.quota-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.15rem 1.25rem;
  background: #FFFFFF;
  border: 0.5px solid #E1E5EB;
  border-radius: 12px;
  box-shadow: none;
}

.quota-card small {
  color: #1E2A38;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.quota-card strong {
  color: #1B4A7E;
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.quota-card p {
  margin: 0;
  color: #1E2A38;
  font-size: 14px;
}

.quota-track {
  height: 0.4rem;
  margin-top: 0.5rem;
  overflow: hidden;
  background: #EEF1F5;
  border-radius: 8px;
}

.quota-track i {
  display: block;
  height: 100%;
  background: #2E5F9C;
}

/* Sin cupos no es un error del usuario, pero si algo que debe notarse. El rojo esta
   reservado para errores, por eso el aviso es ambar. */
.quota-track[data-state="exhausted"] i {
  background: #F5EEDC;
}

.quota-validity {
  margin-top: 0.3rem;
  letter-spacing: normal;
  text-transform: none;
}

/* --- Vista previa del asistente, antes de crear el trabajo. --- */
/* Portada del asistente. Es la puerta de entrada a construir algo, y por eso dice tres cosas y
   ninguna más: qué se va a construir, cómo, y el botón para empezar. El costo en cupos va al
   pie, en voz baja, porque informa una decisión que ya se está tomando y no la encabeza.

   Se nombran las dos clases en los selectores del diálogo: `.form-dialog` se declara más abajo
   en este archivo y, con la misma especificidad, ganaba por orden. Así reaparecían su ancho, su
   fondo blanco y el relleno del formulario, que era el marco blanco alrededor del degradado. */
.assistant-preview-dialog.form-dialog {
  padding: 0;
  overflow: hidden;
  background: var(--brand-primary-deep);
}

.assistant-preview-dialog.form-dialog > form {
  gap: 0;
  max-height: 90vh;
  padding: 0;
  overflow: hidden auto;
}

.assistant-preview-hero {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 4rem 3rem 3rem;
  color: var(--text-inverse);
  background: #1B4A7E;
  text-align: center;
}

.assistant-preview-hero h2 {
  max-width: 30rem;
  margin: 0 0 0.9rem;
  color: inherit;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.25;
}

.assistant-preview-copy {
  max-width: 28rem;
  min-height: 3.2rem;
  margin: 0 0 2rem;
  color: rgb(255 255 255 / 85%);
  font-size: 16px;
  line-height: 1.6;
}

.assistant-preview-copy .typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 1px;
  background: currentcolor;
  vertical-align: text-bottom;
  animation: tw-cursor-blink 0.6s steps(1) infinite;
}

@keyframes tw-cursor-blink {
  0%, 45% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .assistant-preview-copy .typewriter-cursor {
    animation: none;
    opacity: 0.5;
  }
}

.assistant-preview-hero .dialog-close {
  position: absolute;
  top: 0.9rem;
  right: 1.1rem;
  color: rgb(255 255 255 / 75%);
  background: transparent;
  border: 0;
}

.assistant-preview-hero .dialog-close:hover {
  color: var(--text-inverse);
}

.assistant-preview-dialog .dialog-actions {
  display: flex;
  justify-content: center;
  padding: 0;
  border-top: none;
}

.assistant-preview-dialog .dialog-actions button[value="start"] {
  padding: 0.85rem 2.6rem;
  color: var(--text-inverse);
  background: var(--success-strong);
  border: 0;
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 500;
  box-shadow: none;
}

.assistant-preview-dialog .dialog-actions button[value="start"]:hover {
  background: var(--success-hover);
}

.assistant-preview-dialog .dialog-actions button[value="start"]:disabled {
  color: rgb(255 255 255 / 70%);
  background: rgb(255 255 255 / 18%);
  box-shadow: none;
  cursor: not-allowed;
}

.assistant-preview-quota {
  margin: 1.1rem 0 0;
  color: rgb(255 255 255 / 72%);
  font-size: 12px;
}

/* Sin cupos el aviso deja de ser una nota al pie: es el motivo por el que no se puede empezar. */
.assistant-preview-quota[data-state="exhausted"] {
  max-width: 26rem;
  color: var(--warning);
  font-weight: 500;
}

@media (max-width: 700px) {
  .assistant-preview-hero {
    padding: 3rem 1.5rem 2.25rem;
  }

  .assistant-preview-hero h2 {
    font-size: 22px;
  }
}

/* En la lista de administración el tono va como barra lateral: identifica el asistente sin
   competir con el texto. */
/* --- Muestras de color del constructor. --- */
/* Selector de icono: una rejilla de figuras, no una lista de palabras. El icono es lo
   primero que la persona usuaria reconoce en su catálogo, así que se elige viéndolo. */
.icon-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr));
  gap: 0.4rem;
  max-width: 26rem;
  padding: 0.5rem;
  background: var(--surface-input);
  border: var(--border-width) solid var(--border-input);
  border-radius: var(--radius-input);
}

.icon-swatch {
  display: grid;
  height: 2.4rem;
  place-items: center;
  color: var(--text-secondary);
  background: var(--surface-default);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-input);
  font-size: 18px;
  transition: color 120ms ease, background 120ms ease, transform 120ms ease;
}

.icon-swatch:hover {
  color: var(--brand-primary);
  background: var(--surface-hover);
  transform: translateY(-1px);
}

.icon-swatch[aria-checked="true"] {
  color: var(--text-inverse);
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

.icon-swatch:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.accent-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.accent-swatch {
  width: 2.2rem;
  height: 2.2rem;
  background: var(--card-tone);
  border: 2px solid transparent;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgb(27 74 126 / 12%);
  transition: transform 120ms ease;
}

.accent-swatch:hover {
  transform: translateY(-2px);
}

.accent-swatch[aria-checked="true"] {
  border-color: #1B4A7E;
  box-shadow: inset 0 0 0 2px #FFFFFF;
}

.accent-swatch:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  outline-offset: 2px;
}

.ink-choices {
  display: flex;
  gap: 0.55rem;
}

.ink-option {
  width: 3.4rem;
  height: 2.2rem;
  background: var(--card-tone);
  border: 2px solid transparent;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgb(27 74 126 / 12%);
  font-family: var(--display);
  font-size: 16px;
  font-weight: 500;
  transition: transform 120ms ease;
}

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

.ink-option:hover {
  transform: translateY(-2px);
}

.ink-option[aria-checked="true"] {
  border-color: #1B4A7E;
  box-shadow: inset 0 0 0 2px #FFFFFF;
}

.ink-option:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  outline-offset: 2px;
}

.guided-form-dialog {
  width: min(44rem, calc(100vw - 2rem));
}

.guided-form-carousel {
  min-height: 15rem;
  padding: 1.25rem 1.5rem;
}

.guided-form-step {
  min-height: 11rem;
  align-content: start;
}

.guided-form-step label {
  color: #1B4A7E;
  font-size: 18px;
  font-weight: 500;
}

.guided-result-actions {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 1fr);
  gap: 0.75rem;
  margin-top: 1rem;
}

.guided-result-actions .inline-button {
  width: 100%;
  min-height: 3rem;
}

.guided-edit-area {
  margin-top: 1rem;
}

.list-selection-limits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.transfer-selector,
.grouped-selection {
  display: grid;
  gap: 0.9rem;
}

/* Selector de ideas: banco a la izquierda, selección a la derecha y las flechas al medio.
   Cada panel lleva su encabezado con el recuento; el banco se agrupa por categoría con la
   misma banda que usa el resto del sistema, y las filas van dentro de una tarjeta separadas
   por línea en vez de como cajas sueltas. */
.transfer-search {
  width: 100%;
}

.transfer-selector {
  container-type: inline-size;
}

.transfer-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: stretch;
}

@container (max-width: 46rem) {
  .transfer-panels {
    grid-template-columns: 1fr;
  }

  .transfer-controls {
    flex-direction: row;
    justify-content: center;
  }

  .transfer-move-glyph {
    display: block;
    transform: rotate(90deg);
  }
}

.transfer-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  background: var(--surface-subtle);
  border: var(--border-width) solid var(--border);
}

.transfer-panel-head {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  background: var(--brand-primary);
  color: #FFFFFF;
}

.transfer-panel-head h3 {
  margin: 0;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
}

.transfer-count {
  min-width: 1.5rem;
  padding: 0.1rem 0.55rem;
  border-radius: 8px;
  background: rgb(255 255 255 / 22%);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

.transfer-panel-search {
  padding: 0.6rem 0.7rem;
  background: #FFFFFF;
  border-bottom: var(--border-width) solid var(--border-row);
}

/* El alto lo pone el modal, no un número fijo: en una pantalla alta se aprovecha, y en una
   baja el panel no empuja los botones fuera de la vista. */
.transfer-panel-body {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 0.7rem;
  min-height: 12rem;
  max-height: clamp(14rem, 46vh, 34rem);
  overflow-y: auto;
}

.transfer-group {
  display: grid;
  gap: 0.4rem;
}

/* La banda de categoría vive fuera de la tarjeta, como el encabezado de un bloque. */
.transfer-group > summary {
  cursor: pointer;
  list-style: none;
}

.transfer-group > summary::-webkit-details-marker {
  display: none;
}

.transfer-group > summary .category-band-header {
  margin: 0;
  padding: 0.15rem 0.2rem 0.35rem;
  background: transparent;
  border-left: 0;
  border-bottom: var(--border-width) solid var(--border);
}

.transfer-group > summary::after {
  content: "▾";
  display: block;
  margin-top: -1.15rem;
  padding-right: 0.1rem;
  color: var(--text-muted);
  font-size: 11px;
  text-align: right;
}

.transfer-group:not([open]) > summary::after {
  content: "▸";
}

.transfer-card {
  display: grid;
  background: #FFFFFF;
  border: var(--border-width) solid var(--border-row);
}

.transfer-card > .transfer-item + .transfer-item {
  border-top: var(--border-width) solid var(--border-row);
}

.transfer-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
  padding: 0.6rem 0.7rem;
  cursor: pointer;
}

.transfer-item.is-selected {
  grid-template-columns: auto minmax(0, 1fr) auto;
  cursor: default;
}

.transfer-item:hover:not(.is-selected) {
  background: var(--surface-subtle);
}

.transfer-item:has(input:checked) {
  background: var(--tint-info);
}

/* La fila del banco es un <label> para que se pueda clicar entera, y `label` lleva negrita
   en toda la aplicación. El contenido de una idea es texto corriente: se fija aquí. */
.transfer-item-copy {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  color: var(--text-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}

.transfer-item-copy textarea {
  width: 100%;
  resize: vertical;
  font-size: 13px;
  font-weight: 400;
}

/* Siempre visible, no al pasar el mouse: un control que aparece con hover no existe para
   quien navega con teclado ni para quien usa el sistema en un teléfono. */
.transfer-item-drop {
  align-self: start;
  padding: 0.15rem 0.5rem;
  background: none;
  border: var(--border-width) solid var(--border);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.transfer-item-drop:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.transfer-controls {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-self: center;
}

.transfer-move {
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  background: var(--surface-subtle);
  border: var(--border-width) solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
}

.transfer-move.is-primary {
  background: var(--action);
  border-color: var(--action);
  color: #FFFFFF;
}

.transfer-move:hover {
  border-color: var(--action);
}

.transfer-move-glyph {
  font-size: 16px;
  line-height: 1;
}

.transfer-empty {
  margin: 0;
  padding: 1rem 0.5rem;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

.grouped-selection-progress {
  margin: 0;
  color: var(--action);
  font-size: 13px;
  font-weight: 500;
}

.grouped-selection-list {
  display: grid;
  gap: 1rem;
}

.grouped-selection-card {
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
  background: var(--surface-subtle);
  border: var(--border-width) solid var(--border);
  border-left: 0.25rem solid var(--warning);
}

.grouped-selection-card.is-confirmed {
  background: var(--tint-success);
  border-left-color: var(--success);
}

.grouped-selection-header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.grouped-selection-header h3 {
  margin: 0;
  color: var(--brand-primary);
  font-size: 16px;
}

.grouped-selection-options {
  display: grid;
  gap: 0.45rem;
}

.grouped-selection-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
  padding: 0.65rem 0.75rem;
  background: #FFFFFF;
  border: var(--border-width) solid var(--border-row);
  color: var(--text-body);
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}

.grouped-selection-option:has(input:checked) {
  background: var(--tint-info);
  border-color: var(--action-secondary);
}

.grouped-selection-edit label {
  display: grid;
  gap: 0.35rem;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
}

.grouped-selection-edit textarea {
  width: 100%;
  resize: vertical;
}

.budget-builder {
  gap: 1rem;
}

.budget-builder > div:first-child {
  display: grid;
  gap: 0.25rem;
}

.budget-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.55rem;
}

.budget-preview {
  padding: 0.75rem 0.9rem;
  border: 0.5px solid var(--border, #C9D3DF);
  border-radius: 8px;
  background: var(--surface-subtle, #F7F9FB);
  color: var(--text-muted, #5C6B7E);
  font-size: 14px;
  line-height: 1.45;
}

.budget-summary {
  display: grid;
  gap: 0.75rem;
  margin-block: 0.75rem;
}

.budget-summary dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.65rem;
  margin: 0;
}

.budget-summary dl > div {
  display: grid;
  gap: 0.2rem;
  padding: 0.7rem 0.8rem;
  border: 0.5px solid var(--border, #C9D3DF);
  border-radius: 8px;
}

.budget-summary dt {
  color: var(--text-muted, #5C6B7E);
  font-size: 12px;
}

.budget-summary dd {
  margin: 0;
  font-weight: 500;
}

.budget-validation-status {
  width: fit-content;
  margin: 0;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  background: #E4F1EC;
  color: #14543F;
  font-size: 13px;
  font-weight: 500;
}

.budget-validation-status.is-valid_with_observations {
  background: #F5EEDC;
  color: #6B4B00;
}

.budget-validation-status.is-requires_corrections {
  background: #F7E5E5;
  color: #7A1F1F;
}

.budget-validation-issue {
  display: grid;
  gap: 0.2rem;
  margin-top: 0.55rem;
  padding: 0.7rem 0.8rem;
  border-left: 3px solid #8A6100;
  background: #F5EEDC;
}

.budget-validation-issue.is-error {
  border-left-color: #9B2C2C;
  background: #F7E5E5;
}

/* Toma de decisiones: el modelo propone; la plataforma agrega siempre la respuesta abierta.
   Cada pregunta es un único grupo de radios y la confirmación ocurre una vez, al pie del paso. */
.decision-questionnaire {
  display: grid;
  gap: 0.85rem;
  min-height: 0;
}

/* El diseño de decisiones es una lectura vertical, no una matriz comparativa. Mantenerlo
   cerca de 900 px evita líneas excesivas y reproduce la proporción del diseño acordado. */
.step-surface:has(.decision-questionnaire) .step-surface-inner {
  width: min(100%, 56.25rem);
}

.decision-questionnaire-title {
  color: var(--brand-primary);
  font-size: 16px;
}

.decision-questionnaire-progress {
  width: fit-content;
  margin: 0;
  padding: 0.35rem 0.65rem;
  color: var(--action);
  background: var(--tint-info);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
}

.decision-questionnaire-list {
  display: grid;
  gap: 1.35rem;
}

.decision-questionnaire-card {
  min-width: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  background: var(--surface-default);
  border: var(--border-width) solid var(--border);
  border-left: 0.25rem solid var(--warning);
  border-radius: var(--radius-sm);
}

.decision-questionnaire-card.is-answered {
  border-left-color: var(--success);
}

.decision-questionnaire-heading {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.45rem 0.75rem;
  align-items: center;
  width: 100%;
  padding: 1rem 1rem 0;
}

.decision-questionnaire-meta {
  width: fit-content;
  padding: 0.25rem 0.5rem;
  color: var(--brand-primary);
  background: var(--surface-subtle);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.decision-questionnaire-heading .status-badge {
  justify-self: end;
}

.decision-questionnaire-question {
  grid-column: 1 / -1;
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
}

.decision-questionnaire-options {
  display: grid;
  gap: 0.5rem;
  clear: both;
  padding: 1rem;
}

.decision-questionnaire-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  padding: 0.75rem 0.85rem;
  color: var(--text-body);
  background: var(--surface-default);
  border: var(--border-width) solid var(--border-row);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  cursor: pointer;
}

.decision-questionnaire-option:hover,
.decision-questionnaire-option:focus-within {
  background: var(--surface-hover);
  border-color: var(--action-secondary);
}

.decision-questionnaire-option:has(input:checked) {
  color: var(--brand-primary);
  background: var(--tint-info);
  border-color: var(--action-secondary);
}

.decision-questionnaire-option input {
  margin-top: 0;
  accent-color: var(--action);
}

.decision-questionnaire-custom {
  display: grid;
  gap: 0.55rem;
}

.decision-questionnaire-custom-label {
  display: grid;
  gap: 0.35rem;
  padding: 0 0.85rem 0.35rem 2.45rem;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
}

.decision-questionnaire-custom-label textarea {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  color: var(--text-body);
  background: var(--surface-default);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}

.step-surface:has(.decision-questionnaire) .guided-edit-area > .dialog-actions {
  position: sticky;
  z-index: 3;
  bottom: -24px;
  margin: 1rem -32px -24px;
  padding: 12px 32px;
  background: var(--surface-subtle);
  border-top: var(--border-width) solid var(--border);
}

@media (max-width: 720px) {
  .decision-questionnaire-heading {
    padding: 0.85rem 0.85rem 0;
  }

  .decision-questionnaire-options {
    padding: 0.85rem;
  }

  .decision-questionnaire-custom-label {
    padding-right: 0;
    padding-left: 0;
  }

  .step-surface:has(.decision-questionnaire) .guided-edit-area > .dialog-actions {
    bottom: -18px;
    margin: 1rem -18px -18px;
    padding: 12px 18px;
  }
}

/* Carta Gantt. La columna de actividades queda fija mientras los períodos se deslizan: con
   cuarenta y ocho semanas, perder de vista de qué actividad es la fila la vuelve inútil. El
   desplazamiento vive dentro del contenedor y nunca en el cuerpo de la página. */
.gantt {
  display: grid;
  gap: 0.9rem;
}

.gantt-progress {
  margin: 0;
  color: var(--action);
  font-size: 13px;
  font-weight: 500;
}

.gantt-notice {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
  padding: 0.75rem 0.9rem;
  background: var(--tint-warning);
  border-left: 0.25rem solid var(--warning);
}

.gantt-notice p {
  margin: 0;
  color: var(--text-body);
  font-size: 13px;
}

.gantt-scroll {
  overflow-x: auto;
  border: var(--border-width) solid var(--border);
}

.gantt-table {
  border-collapse: collapse;
  font-size: 13px;
}

.gantt-table th,
.gantt-table td {
  border-right: var(--border-width) solid var(--border-row);
  border-bottom: var(--border-width) solid var(--border-row);
  text-align: center;
  padding: 0;
}

.gantt-table thead th {
  padding: 0.5rem 0.35rem;
  color: #FFFFFF;
  background: var(--brand-primary);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.gantt-table th.gantt-activity-head,
.gantt-table th.gantt-activity {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 14rem;
  max-width: 22rem;
  text-align: left;
  padding: 0.5rem 0.75rem;
}

.gantt-table th.gantt-activity {
  background: #FFFFFF;
  color: var(--text-body);
  font-weight: 500;
  line-height: 1.4;
  border-right: var(--border-width) solid var(--border);
}

/* La sangría es lo único que distingue una sub-actividad: sigue siendo una fila más. */
.gantt-table th.gantt-activity[data-level="1"] { padding-left: 1.9rem; }
.gantt-table th.gantt-activity[data-level="2"] { padding-left: 3.1rem; }
.gantt-table th.gantt-activity[data-level="3"] { padding-left: 4.3rem; }

/* Las actividades se editan en la misma columna que las nombra: cambiarles el texto, quitarlas
   y moverlas de lugar. Esa columna es la que va fija mientras los periodos se deslizan, de modo
   que el campo y sus controles siguen a la vista aunque la rejilla este por el mes cuarenta.
   Solo en el editor —`.gantt`—: en el documento la carta ya esta decidida y una fila con un
   campo de texto invitaria a escribir sobre algo que ahi no se toca. */
.gantt .gantt-table th.gantt-activity {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  min-width: 18rem;
}

.gantt-activity-name {
  flex: 1;
  min-width: 0;
  padding: 0.25rem 0.4rem;
  color: var(--text-body);
  background: transparent;
  border: 0.5px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
}

.gantt-activity-name:hover {
  border-color: var(--border-input);
}

.gantt-activity-name:focus {
  background: #FFFFFF;
  border-color: var(--action);
  outline: none;
}

.gantt-row-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 0.15rem;
}

.gantt-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  color: var(--text-icon-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1;
}

.gantt-row-action:hover:not(:disabled) {
  color: var(--action);
  background: var(--surface-subtle);
}

.gantt-row-action[data-action="remove"]:hover:not(:disabled) {
  color: var(--danger);
}

/* Atenuado, no ausente: la fila de arriba no puede subir mas y la ultima actividad no se puede
   quitar, y un boton que desaparece deja a la persona buscando donde estaba. */
.gantt-row-action:disabled {
  opacity: 0.3;
}

.gantt-row-action:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 1px;
}

/* Agregar no pertenece a ninguna fila, asi que vive bajo la rejilla. `.inline-button` pierde el
   desempate con `.secondary-button` —se declara antes en la hoja— y el boton salia al ancho del
   editor con un margen apilado; aqui esta mas abajo todavia y recupera lo suyo. */
.gantt-add {
  justify-self: start;
  width: auto;
  margin-top: 0;
}

.gantt-cell {
  min-width: 2.6rem;
}

.gantt-mark {
  display: block;
  width: 100%;
  min-height: 2.1rem;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 2.1rem;
  cursor: pointer;
}

.gantt-mark:hover {
  background: var(--surface-subtle);
}

.gantt-cell.is-marked .gantt-mark,
.gantt-cell.is-marked .gantt-mark:hover {
  background: var(--action-secondary);
}

.gantt-mark:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: -3px;
}

/* La misma rejilla, ya leída dentro del documento. La marca deja de ser un boton: aqui no se
   decide nada, y un cursor de mano sobre algo inerte promete una accion que no existe. */
.gantt-read-mark {
  display: block;
  min-height: 2.1rem;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
  line-height: 2.1rem;
  text-align: center;
}

.gantt-cell.is-marked .gantt-read-mark {
  background: var(--action-secondary);
}

/* Una hoja apaisada intercalada entre las verticales, igual que cuando en un documento se
   inserta una pagina horizontal: la hoja vertical termina, se ve el fondo, aparece el papel
   girado y despues la vertical continua. Antes la lamina flotaba sobre una hoja que nunca se
   interrumpia y se leia como un panel pegado encima del documento, no como una pagina mas de
   el. Lo que corta el papel es esta banda de fondo, y por eso mide lo que mida la lamina pero
   nunca menos que la hoja entera —bordes incluidos—, o quedarian astillas de papel blanco a
   los costados del corte. Es el mismo papel girado: 52rem de alto se vuelven 67 de ancho, y
   ahi esta el espacio que a la rejilla le faltaba, porque doce columnas de periodo dentro de
   la columna de texto no son legibles en ningun tamaño de letra. Nunca supera el ancho de la
   ventana, de modo que el documento no se desplaza de lado, y lo que aun no quepa se recorre
   dentro de la propia rejilla con la columna de actividades fija. */
.document-gantt {
  width: max(
    calc(100% + var(--sheet-pad, 0rem) * 2 + 2px),
    min(67rem, calc(100vw - 3rem))
  );
  margin: 2.5rem 0 2.5rem 50%;
  padding: 2.5rem 0;
  background: var(--document-canvas);
  transform: translateX(-50%);
}

/* El papel girado lleva los mismos bordes y la misma sombra que la hoja vertical: salio de la
   misma resma y tiene que reconocerse como hoja, no como tarjeta. */
.document-gantt-sheet {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: #FFFFFF;
  border: 0.5px solid #E1E5EB;
  box-shadow: none;
}

/* El titulo de la seccion entra a la lamina y abre la pagina: sin el margen superior que
   traia de la hoja vertical, donde separaba una seccion de la anterior. */
.document-gantt-sheet > .document-section-heading {
  margin-bottom: 0.9rem;
}

.document-gantt-sheet > .document-section-heading > :is(h2, h3, h4) {
  margin-top: 0;
}

.document-gantt-issue {
  margin: 0.9rem 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

/* ── Árbol de causalidades ────────────────────────────────────────────────────────────────
   La lámina se lee a lo ancho, igual que la carta Gantt y por lo mismo: un árbol que se abre
   hacia los lados no cabe en la columna de texto por más que se reduzca la letra. Sale de la
   misma resma que la hoja vertical, así que lleva su mismo borde y su mismo papel. */
.document-causal-tree {
  width: max(
    calc(100% + var(--sheet-pad, 0rem) * 2 + 2px),
    min(67rem, calc(100vw - 3rem))
  );
  margin: 2.5rem 0 2.5rem 50%;
  padding: 2.5rem 0;
  background: var(--document-canvas);
  transform: translateX(-50%);
}

.document-causal-tree-sheet {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: #FFFFFF;
  border: 0.5px solid #E1E5EB;
  box-shadow: none;
}

.document-causal-tree-sheet > .document-section-heading {
  margin-bottom: 0.9rem;
}

.document-causal-tree-sheet > .document-section-heading > :is(h2, h3, h4) {
  margin-top: 0;
}

/* El fondo es siempre transparente: la lámina se inserta en la hoja carta y no trae papel
   propio. Lo que se ve detrás de las cajas es la hoja, no un lienzo del dibujo. */
/* Cada columna del árbol se abre en cuatro: un margen, dos de caja y otro margen. Los márgenes
   son lo que impide que una caja quede pegada a la de al lado —así se leen como una sola— y las
   dos del medio hacen que el centro de cualquier caja caiga sobre un borde de columna, que es
   donde se puede dibujar una línea vertical. Las proporciones son las mismas que usan Word y el
   PDF, declaradas en el plano del servidor. */
.causal-tree-lamina {
  display: grid;
  grid-template-columns:
    2.1rem repeat(var(--tree-columns, 1), 0.045fr 0.455fr 0.455fr 0.045fr);
  background: transparent;
  font-size: var(--tree-font, 12px);
  line-height: 1.22;
}

.causal-tree-lamina[data-palette="paper"] {
  --tree-ink: #1E2A38;
  --tree-line: #1E2A38;
  --tree-soft: #5C6B7E;
  --tree-band: #1E2A38;
  --tree-band-text: #FFFFFF;
  --tree-problem-fill: #FFFFFF;
  --tree-problem-text: #1E2A38;
  --tree-branch-fill: #FFFFFF;
  --tree-child-fill: #FFFFFF;
}

.causal-tree-lamina[data-palette="blue"] {
  --tree-ink: #1E2A38;
  --tree-line: #1B4A7E;
  --tree-soft: #8FA9C9;
  --tree-band: #0B2545;
  --tree-band-text: #FFFFFF;
  --tree-problem-fill: #0B2545;
  --tree-problem-text: #FFFFFF;
  --tree-branch-fill: #FFFFFF;
  --tree-child-fill: #EEF1F5;
}

.causal-tree-band {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.4rem;
  padding: 0.35rem 0;
  background: var(--tree-band);
  color: var(--tree-band-text);
  font-size: calc(var(--tree-font, 12px) + 1px);
  font-weight: 500;
  letter-spacing: 0.04em;
  /* Girado, como se lee la banda de una lámina CEPAL. La misma vuelta que da el rótulo en
     Word, para que los dos documentos se reconozcan como el mismo dibujo. */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.causal-tree-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.35rem;
  border: 0.75px solid var(--tree-line);
  color: var(--tree-ink);
  text-align: center;
  overflow-wrap: anywhere;
}

.causal-tree-box[data-level="0"] {
  background: var(--tree-problem-fill);
  color: var(--tree-problem-text);
}

.causal-tree-box[data-level="1"] {
  background: var(--tree-branch-fill);
}

.causal-tree-box[data-level="2"] {
  border-color: var(--tree-soft);
  background: var(--tree-child-fill);
}

.causal-tree-caption {
  margin-bottom: 0.15rem;
  font-size: calc(var(--tree-font, 12px) - 1px);
  font-weight: 500;
  opacity: 0.8;
}

.causal-tree-box[data-level="0"] .causal-tree-text {
  font-size: calc(var(--tree-font, 12px) + 2px);
  font-weight: 500;
}

/* Una bajada es el borde derecho de una celda vacía y un riel es el borde inferior de una fila
   delgada. El plano ya dijo dónde va cada una: aquí solo se pintan. El alto de la fila lo fija
   la propia línea, que es lo único que vive en ella. */
.causal-tree-drop,
.causal-tree-rail {
  height: var(--tree-link, 13px);
}

/* La punta que corona la línea al llegar a su caja. El árbol se lee de abajo hacia arriba y
   esto es lo que hace visible esa dirección. Es un triángulo de bordes, no un carácter: ningún
   tipo de letra tiene que traerlo y se pinta del mismo color que la línea. */
.causal-tree-arrow {
  width: 0;
  height: 0;
  justify-self: center;
  align-self: start;
  border-right: 0.32em solid transparent;
  border-bottom: 0.42em solid var(--tree-line);
  border-left: 0.32em solid transparent;
}

.causal-tree-drop {
  border-right: 0.75px solid var(--tree-line);
}

.causal-tree-rail {
  border-bottom: 0.75px solid var(--tree-line);
}

/* ── Modal de causalidades ───────────────────────────────────────────────────────────────
   La IA propone el árbol y la persona lo deja como debe quedar. Aquí el árbol es una lista
   con sangrías, que es la forma en que se corrige; la lámina viene después. */
.causal-tree-progress {
  margin: 0 0 0.75rem;
  color: var(--text-muted);
  font-size: 13px;
}

.causal-tree-trunk {
  display: block;
  margin-bottom: 1.1rem;
}

.causal-tree-trunk > span {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 500;
}

.causal-tree-trunk textarea {
  width: 100%;
  resize: none;
}

.causal-tree-sides {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
}

.causal-tree-side {
  padding: 0.85rem 1rem 1rem;
  border: var(--border-width) solid var(--border-card);
  border-radius: var(--radius-lg);
  background: var(--surface-default);
}

.causal-tree-side-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.causal-tree-side-header h3 {
  margin: 0;
  font-size: 15px;
}

/* El botón mide lo que dice. Sin fijarlo, se estira hasta el borde del bloque y compite con
   el título de la banda por ser lo primero que se lee. */
.causal-tree-add {
  flex: none;
  width: auto;
  min-width: 0;
  min-height: 2.2rem;
  padding: 0 0.85rem;
}

.causal-tree-branches,
.causal-tree-children {
  margin: 0;
  padding: 0;
  list-style: none;
}

.causal-tree-branch + .causal-tree-branch {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: var(--border-width) solid var(--border-row);
}

/* Una sub-rama y una sub-sub-rama se distinguen por la sangría de su lista, que ya la da
   `.causal-tree-children`. La línea divisoria entre hermanas, en cambio, solo ayuda a separar
   ramas de primer nivel: repetida en cada anidación convierte el árbol en una reja. */
.causal-tree-branch-nested + .causal-tree-branch-nested {
  padding-top: 0;
  border-top: none;
}

.causal-tree-children {
  margin-left: 1.4rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--border-row);
}

.causal-tree-row {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.2rem 0;
}

.causal-tree-row textarea {
  flex: 1;
  min-width: 0;
  resize: none;
}

.causal-tree-code {
  flex: none;
  padding-top: 0.45rem;
  color: var(--text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.causal-tree-toggle {
  flex: none;
  width: 1.5rem;
  padding: 0.35rem 0 0;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
}

.causal-tree-toggle:disabled {
  opacity: 0.35;
  cursor: default;
}

.causal-tree-actions {
  display: flex;
  flex: none;
  gap: 0.2rem;
}

.causal-tree-action {
  min-width: 1.9rem;
  padding: 0.25rem 0.4rem;
  line-height: 1;
}

.causal-tree-empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

/* El árbol en texto: la misma estructura que se está editando, escrita de corrido. Sirve para
   leer de un vistazo lo que las cajas solo muestran una por una. */
.causal-tree-ascii {
  margin: 1.1rem 0 0;
  padding: 0.9rem 1rem;
  border: var(--border-width) solid var(--border-card);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
  color: var(--text-body);
  font-family: var(--font-tech, ui-monospace, monospace);
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-x: auto;
}

.causal-tree-palette {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin: 1.1rem 0 0;
  padding: 0.7rem 1rem;
  border: var(--border-width) solid var(--border-card);
  border-radius: var(--radius-lg);
}

.causal-tree-palette legend {
  padding: 0 0.4rem;
  color: var(--text-secondary);
  font-size: 13px;
}

.causal-tree-palette-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 14px;
}

/* Matriz validada: columnas de solo lectura arrastradas desde la etapa anterior, una columna
   editable y el visto bueno fila por fila. La tabla lleva su propio desplazamiento horizontal
   para que el panel nunca empuje la página hacia el costado. */
.validated-matrix {
  display: grid;
  gap: 0.85rem;
  min-height: 0;
}

.validated-matrix-summary {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.validated-matrix-summary h3 {
  margin: 0 0 0.2rem;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
}

.validated-matrix-summary p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.45;
}

.validated-matrix-progress {
  flex: none;
  margin: 0;
  padding: 0.35rem 0.65rem;
  color: var(--action);
  background: var(--tint-info);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.validated-matrix-scroll {
  max-height: min(55vh, 38rem);
  overflow: auto;
  border: var(--border-width) solid var(--border);
  border-radius: 8px;
  background: var(--surface-default);
  scrollbar-gutter: stable;
}

.validated-matrix-table {
  width: 100%;
  min-width: 62rem;
  border-collapse: collapse;
  font-size: 14px;
}

.validated-matrix-table th,
.validated-matrix-table td {
  padding: 0.65rem 0.75rem;
  border-bottom: var(--border-width) solid var(--border-row);
  text-align: left;
  vertical-align: top;
}

.validated-matrix-table thead th {
  position: sticky;
  z-index: 2;
  top: 0;
  color: #FFFFFF;
  background: var(--brand-primary);
  font-size: 12px;
  font-weight: 500;
  vertical-align: middle;
}

.validated-matrix-row {
  background: #FFFFFF;
}

.validated-matrix-row > :first-child {
  border-left: 0.25rem solid var(--warning);
}

.validated-matrix-row.is-confirmed > :first-child {
  border-left-color: var(--success);
}

/* La fila descartada sigue a la vista: el descarte se deshace en la misma celda y esconderla
   dejaría a la persona sin saber qué retiró. Se apaga, no desaparece. */
.validated-matrix-row.is-discarded > :first-child {
  border-left-color: var(--border);
}

.validated-matrix-row.is-discarded :is(.validated-matrix-subject, .validated-matrix-context) {
  color: var(--text-secondary);
}

.validated-matrix-row.is-discarded .validated-matrix-decision {
  opacity: 0.55;
}

.validated-matrix-row.is-discarded .validated-matrix-decision textarea {
  text-decoration: line-through;
}

.validated-matrix-table tbody .validated-matrix-subject {
  min-width: 11rem;
  color: var(--brand-primary);
  background: var(--surface-default);
  font-weight: 500;
  line-height: 1.4;
}

.validated-matrix-context {
  min-width: 12rem;
  max-width: 22rem;
  color: var(--text-secondary);
  background: var(--surface-default);
  font-weight: 400;
  line-height: 1.45;
}

.validated-matrix-decision {
  min-width: 20rem;
  background: var(--surface-default);
}

.validated-matrix-options,
.validated-matrix-choice-edits {
  display: grid;
  gap: 0.5rem;
}

.validated-matrix-choice-edits {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: var(--border-width) solid var(--border-row);
}

.validated-matrix-option {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  border: var(--border-width) solid var(--border-input);
  border-radius: 6px;
  background: var(--surface-default);
  cursor: pointer;
  line-height: 1.4;
}

.validated-matrix-option:has(input:checked) {
  border-color: var(--action);
  background: var(--tint-info);
}

.validated-matrix-option input {
  /* El reset general de campos los hace ocupar todo el ancho. Aquí son controles de elección:
     conservan su tamaño nativo para que el texto tenga el espacio de lectura de la celda. */
  flex: 0 0 1.125rem;
  width: 1.125rem;
  min-width: 1.125rem;
  height: 1.125rem;
  min-height: 1.125rem;
  margin: 0.15rem 0 0;
  padding: 0;
  accent-color: var(--action);
}

.validated-matrix-option span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.validated-matrix-option span,
.validated-matrix-context {
  white-space: pre-line;
}

.validated-matrix-preview {
  display: block;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.45rem;
  background: var(--surface-subtle);
  border: var(--border-width) solid var(--border-row);
  font-size: 16px;
  overflow-x: auto;
}

.validated-matrix-edit {
  display: grid;
  gap: 0;
  color: var(--text-body);
  font-weight: 400;
}

.validated-matrix-edit textarea {
  width: 100%;
  min-height: 5.25rem;
  overflow-y: hidden;
  resize: none;
  color: var(--text-body);
  background: var(--surface-default);
  border-color: var(--border-input);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}

.validated-matrix-edit textarea[readonly] {
  background: var(--surface-subtle);
}

.validated-matrix-action {
  display: grid;
  gap: 0.45rem;
  justify-items: start;
  align-content: start;
  background: var(--surface-default);
  white-space: nowrap;
}

.validated-matrix-action .status-badge {
  font-weight: 500;
}

.validated-matrix-action .inline-button {
  min-width: 7rem;
  padding-inline: 0.75rem;
}

.validated-matrix-discard {
  color: #7A1F1F;
}

.validated-matrix-discard:hover {
  background: #F7E5E5;
}

.validated-matrix-row:hover > :is(th, td),
.validated-matrix-row:focus-within > :is(th, td) {
  background: var(--surface-hover);
}

/* La matriz es el contenido principal de este modal: el contexto se conserva arriba, la tabla
   desplaza sus propias filas y las acciones permanecen en un pie editorial estable. */
.step-surface:has(.validated-matrix) .step-modal-body {
  padding: 28px 32px 24px;
}

.step-surface:has(.validated-matrix) .guided-edit-area {
  margin-top: 0;
}

.step-surface:has(.validated-matrix) .structured-editor {
  padding: 0;
  background: transparent;
  border: 0;
}

.step-surface:has(.validated-matrix) .review-guidance {
  color: var(--text-secondary);
  background: var(--surface-subtle);
  border: 0;
  border-left: 0.2rem solid var(--action-secondary);
  border-radius: var(--radius-sm);
  box-shadow: none;
  font-style: normal;
}

.step-surface:has(.validated-matrix) .review-guidance::before {
  color: var(--text-inverse);
  background: var(--action-secondary);
}

.step-surface:has(.validated-matrix) .guided-edit-area > .dialog-actions {
  position: sticky;
  z-index: 3;
  bottom: -24px;
  margin: 1rem -32px -24px;
  padding: 12px 32px;
  background: var(--surface-subtle);
  border-top: var(--border-width) solid var(--border);
}

/* Una fórmula que el dibujante no reconoce se muestra tal como fue escrita. Es una
   degradación legible: la persona igual puede leerla, corregirla y validarla. */
.formula-source {
  display: inline-block;
  padding: 0.15rem 0.35rem;
  background: var(--surface-subtle);
  color: var(--text-body);
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  font-size: 13px;
  word-break: break-word;
}

/* Recorrido guiado: la etapa se lee como una secuencia con encabezado cuando la metodología
   declaró sus pasos. Es presentación; cada acción se ejecuta y se aprueba por separado. */
.stage-wizard {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.stage-wizard-step {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  padding: 0.3rem 0.7rem;
  background: var(--surface-subtle);
  border: var(--border-width) solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
}

.stage-wizard-number {
  display: inline-flex;
  width: 1.35rem;
  height: 1.35rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--border-row);
  color: var(--text-secondary);
  font-size: 12px;
}

.stage-wizard-step.is-current {
  background: #FFFFFF;
  border-color: var(--action);
  color: var(--brand-primary);
}

.stage-wizard-step.is-current .stage-wizard-number {
  background: var(--action);
  color: #FFFFFF;
}

.stage-wizard-step.is-done {
  background: var(--tint-success);
  border-color: var(--success);
  color: var(--brand-primary);
}

.stage-wizard-step.is-done .stage-wizard-number {
  background: var(--success);
  color: #FFFFFF;
}

/* Un paso omitido está cerrado, pero no cumplido: la marca lo dice sin reclamar el verde de lo
   que sí se hizo. */
.stage-wizard-omitted {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .validated-matrix-summary {
    display: grid;
  }

  .validated-matrix-progress {
    width: fit-content;
  }

  .validated-matrix-scroll {
    max-height: none;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .validated-matrix-table {
    display: block;
    min-width: 0;
  }

  .validated-matrix-table thead {
    display: none;
  }

  .validated-matrix-table tbody {
    display: grid;
    gap: 0.85rem;
  }

  .validated-matrix-row {
    display: grid;
    overflow: hidden;
    border: var(--border-width) solid var(--border);
    border-left: 0.25rem solid var(--warning);
    border-radius: var(--radius-sm);
    background: var(--surface-default);
  }

  .validated-matrix-row.is-confirmed {
    border-left-color: var(--success);
  }

  .validated-matrix-row.is-discarded {
    border-left-color: var(--border);
  }

  .validated-matrix-row > :first-child,
  .validated-matrix-row.is-confirmed > :first-child,
  .validated-matrix-row.is-discarded > :first-child {
    border-left: 0;
  }

  .validated-matrix-table tbody :is(th, td) {
    display: grid;
    grid-template-columns: minmax(7.5rem, 0.65fr) minmax(0, 1.35fr);
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 0.75rem;
    border-bottom: var(--border-width) solid var(--border-row);
  }

  .validated-matrix-table tbody :is(th, td)::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
  }

  .validated-matrix-table .validated-matrix-decision,
  .validated-matrix-table .validated-matrix-action {
    align-items: start;
  }

  .validated-matrix-table .validated-matrix-action {
    grid-template-columns: minmax(7.5rem, 0.65fr) minmax(0, 1.35fr);
  }

  .validated-matrix-action .status-badge,
  .validated-matrix-action .inline-button {
    grid-column: 2;
  }

  .step-surface:has(.validated-matrix) .step-modal-body {
    padding: 20px 18px 18px;
  }

  .step-surface:has(.validated-matrix) .guided-edit-area > .dialog-actions {
    bottom: -18px;
    margin: 1rem -18px -18px;
    padding: 12px 18px;
  }
}

/* Las fórmulas arrastran dos columnas de contexto extensas. En esta revisión cada fila se
   lee como una ficha de la misma matriz: evita que una expresión ancha ensanche toda la tabla
   y deja el cálculo, su texto editable y el visto bueno juntos. Las etapas de elección
   conservan su tabla habitual. */
.step-surface .validated-matrix:has(.validated-matrix-preview) .validated-matrix-scroll {
  max-height: min(58vh, 42rem);
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.step-surface .validated-matrix:has(.validated-matrix-preview) .validated-matrix-table,
.step-surface .validated-matrix:has(.validated-matrix-preview) .validated-matrix-table tbody {
  display: block;
  width: 100%;
  min-width: 0;
}

.step-surface .validated-matrix:has(.validated-matrix-preview) .validated-matrix-table thead {
  /* Sigue disponible para lectores de pantalla aunque cada ficha muestre sus rótulos. */
  position: absolute;
  display: table-header-group;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.step-surface .validated-matrix:has(.validated-matrix-preview) .validated-matrix-table tbody {
  display: grid;
  gap: 1rem;
}

.step-surface .validated-matrix:has(.validated-matrix-preview) .validated-matrix-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: var(--border-width) solid var(--border);
  border-left: 2px solid var(--warning);
  border-radius: 8px;
  background: var(--surface-default);
}

.step-surface .validated-matrix:has(.validated-matrix-preview) .validated-matrix-row.is-confirmed {
  border-left-color: var(--success);
}

.step-surface .validated-matrix:has(.validated-matrix-preview) .validated-matrix-row.is-discarded {
  border-left-color: var(--border);
}

.step-surface .validated-matrix:has(.validated-matrix-preview) .validated-matrix-table tbody :is(th, td) {
  display: block;
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 0.8rem 1rem;
  border: 0;
  border-bottom: var(--border-width) solid var(--border-row);
  background: var(--surface-default);
  white-space: normal;
  overflow-wrap: anywhere;
}

.step-surface .validated-matrix:has(.validated-matrix-preview) .validated-matrix-table tbody :is(th, td)::before {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--text-muted);
  content: attr(data-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.step-surface .validated-matrix:has(.validated-matrix-preview) .validated-matrix-subject,
.step-surface .validated-matrix:has(.validated-matrix-preview) .validated-matrix-decision,
.step-surface .validated-matrix:has(.validated-matrix-preview) .validated-matrix-action {
  grid-column: 1 / -1;
}

.step-surface .validated-matrix:has(.validated-matrix-preview) .validated-matrix-table tbody .validated-matrix-subject {
  background: var(--surface-subtle);
  border-left: 0;
}

.step-surface .validated-matrix:has(.validated-matrix-preview) .validated-matrix-table tbody .validated-matrix-action {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
  border-bottom: 0;
  background: var(--surface-subtle);
}

.step-surface .validated-matrix:has(.validated-matrix-preview) .validated-matrix-action .status-badge {
  margin-right: auto;
}

.step-surface .validated-matrix:has(.validated-matrix-preview) .validated-matrix-preview {
  max-width: 100%;
  overflow-x: auto;
  color: var(--text-body);
  background: var(--surface-subtle);
}

/* Una operación descrita en español se compone con numerador y denominador legibles. El
   texto largo puede quebrar dentro de la fracción sin forzar desplazamiento horizontal. */
.formula-fraction-layout {
  display: flex;
  gap: 1rem;
  align-items: center;
  max-width: 100%;
  font-size: 14px;
  line-height: 1.45;
}

.formula-fraction {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

.formula-numerator,
.formula-denominator {
  display: block;
  padding: 0.45rem 0.65rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.formula-numerator {
  border-bottom: 1px solid currentcolor;
}

.formula-multiplier {
  flex: none;
  color: var(--brand-primary);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}

.formula-statement {
  display: block;
  font-family: var(--sans);
  font-size: 14px;
  font-style: normal;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .step-surface .validated-matrix:has(.validated-matrix-preview) .validated-matrix-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .list-selection-limits {
    grid-template-columns: 1fr;
  }
}

.guided-review-options {
  margin-top: 1rem;
}

.guided-review-options > button,
.guided-review-options > .record-list {
  margin: 0.75rem 1rem;
}

.document-sheet.has-active-proposal,
.document-sheet.is-complete {
  min-height: 0;
}

/* ---------------------------------------------------------------------------
   La propuesta dentro de su sección. Antes vivía en una tarjeta al final de la
   hoja: se leía fuera de lugar y obligaba a abrir un panel para volver a leer lo
   mismo. Ahora la sección se muestra escrita pero sin confirmar —el filete la
   distingue de lo publicado— y la decisión va debajo, junto al texto que decide.
   --------------------------------------------------------------------------- */
.document-section.has-proposal {
  padding: 0.75rem 1rem;
  background: var(--surface-hover);
  border-left: 0.25rem solid var(--brand-secondary);
}

.proposal-mark,
.outdated-mark {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  flex: none;
  color: var(--action);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.proposal-mark::before,
.outdated-mark::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--action);
}

/* Una sección desactualizada conserva su texto aprobado y se lee igual que cualquier otra. La
   marca no la descalifica —lo que dice sigue siendo lo último que se acordó— pero avisa de que
   su insumo cambió, así que toma el color de advertencia y no el de una propuesta nueva. */
.outdated-mark {
  color: var(--warning);
}

.outdated-mark::before {
  background: var(--warning);
}

.section-decision {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: var(--border-width) solid var(--border);
}

/* La instrucción de la metodología, con el mismo aviso que la ayuda de un campo en el
   formulario: es la misma voz —quien configuró el paso— diciendo qué mirar. */
.section-decision-guide {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: 0.85rem 0.95rem;
  color: #6B4B00;
  background: #F5EEDC;
  border: 1.5px solid #E2D2A8;
  border-radius: 8px;
  box-shadow: none;
  font-family: var(--sans);
  font-size: 14px;
  font-style: italic;
  line-height: 1.45;
}

.section-decision-guide::before {
  display: grid;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  place-items: center;
  color: #6B4B00;
  background: #F5EEDC;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  line-height: 1;
  content: "i";
}

.section-decision-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: flex-end;
}

/* Pedir otra propuesta o mirar el historial no es lo que hay que decidir: queda plegado bajo
   la línea de la decisión, con la sangría que ya usa el resto de la hoja. */
.section-decision .guided-review-options {
  margin-top: 0;
  font-family: var(--sans);
  font-size: 14px;
}

.section-decision .guided-review-options > button,
.section-decision .guided-review-options > .record-list {
  margin: 0.75rem 0 0;
}

.section-decision .guided-review-options .secondary-button {
  width: fit-content;
  min-height: 2.6rem;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 14px;
}

.section-decision-actions .primary-button,
.section-decision-actions .tertiary-button {
  width: auto;
  min-width: 9.25rem;
  min-height: 49px;
  margin: 0;
  padding: 12px 24px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}

.section-decision-actions .primary-button {
  justify-content: center;
  color: var(--text-inverse);
  background: var(--success-strong);
  border-color: var(--success-strong);
  box-shadow: none;
}

.section-decision-actions .primary-button:hover {
  background: var(--success-hover);
  border-color: var(--success-hover);
}

/* Continuar puede estar deshabilitado —falta guardar, falta elegir—: el verde no puede
   sobrevivir a eso o el botón mentiría sobre lo que se puede hacer. */
.section-decision-actions .primary-button:disabled {
  color: var(--text-muted);
  background: var(--surface-disabled);
  border-color: var(--surface-disabled);
}

.section-decision-actions .tertiary-button {
  justify-content: center;
  color: var(--action);
  background: var(--tint-info);
  border-color: transparent;
  box-shadow: none;
}

.section-decision-actions .tertiary-button:hover {
  color: var(--action-hover);
  background: var(--surface-hover);
}

@media (max-width: 700px) {
  .section-decision-actions {
    flex-direction: column-reverse;
    gap: 12px;
    align-items: stretch;
  }

  .section-decision-actions .primary-button,
  .section-decision-actions .tertiary-button {
    width: 100%;
  }
}

/* Con la hoja a pantalla completa las acciones se fijan y dejan de perseguirse al final del
   documento. La hoja reserva el espacio para que no tapen su última línea. */
#project-detail-view:has(#step-surface[hidden]) .completion-actions {
  position: fixed;
  z-index: 4;
  right: 1.25rem;
  bottom: 1.25rem;
  width: auto;
  margin: 0;
  padding: 0.7rem 0.9rem;
  background: rgb(255 255 255 / 94%);
  border: 0.5px solid #C9D3DF;
  border-radius: 8px;
  box-shadow: none;
  backdrop-filter: none;
}

#project-detail-view:has(#step-surface[hidden]) .project-stage {
  padding-bottom: 6rem;
}

@media print {
  .completion-actions,
  .step-surface {
    display: none;
  }
}

.completion-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 52rem);
  margin: 0 auto 1rem;
  padding: 1.25rem;
  background: #E4F1EC;
  border: 0.5px solid #1F7A5C;
  border-left: 0.35rem solid #1F7A5C;
}

.completion-actions h2,
.completion-actions p {
  margin: 0;
}

.completion-actions h2 {
  color: #1B4A7E;
}

.completion-actions .download-actions {
  flex: 0 0 auto;
  align-items: center;
  padding: 0;
}

/* `.inline-button` anula el margen apilado de `.secondary-button`, pero se declara antes en la
   hoja y pierde el desempate: "Descargar PDF" bajaba 1,4rem y quedaba desalineado de su
   compañero. Aqui los dos botones son una fila, no una pila. */
.completion-actions .download-actions > button {
  margin-top: 0;
}

/* Descargar el Word es a lo que llega el trabajo entero, y se viste como tal: pastilla azul
   con degradado y la marca del formato al frente, tal como llego el diseno. Lo unico que se
   agrega es lo que el diseno no tenia que resolver y aqui si: el boton se deshabilita mientras
   el documento no esta listo o la exportacion esta en curso, y en pantalla angosta la fila de
   descargas se vuelve columna y los botones se estiran. */
.word-download-btn {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 0.8em 1.6em;
  color: #FFFFFF;
  background: #2E5F9C;
  border: none;
  border-radius: 12px;
  outline: none;
  box-shadow: none;
  font-family: "Segoe UI", "Inter", system-ui, Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background 0.3s, box-shadow 0.3s, color 0.3s;
}

.word-download-btn:hover {
  color: #FFFFFF;
  background: #2E5F9C;
  box-shadow: none;
  text-decoration: none;
}

.word-download-btn:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 3px;
}

.word-download-btn:disabled {
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.5;
}

.word-download-btn .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.word-download-btn .text {
  font-size: 1.09em;
  font-weight: 500;
  letter-spacing: 0.02em;
  /* En la fila de descargas el titulo de la tarjeta se lleva el ancho sobrante y el boton se
     encogia hasta partir el rotulo en dos lineas. Es una pastilla: se lee de corrido o no se
     lee. */
  white-space: nowrap;
}

@media (max-width: 960px) {
  .site-header {
    grid-template-columns: auto 1fr;
  }

  .global-navigation {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }

  /* En pantalla angosta el botón queda a la izquierda de su línea y un menú anclado a él se
     saldría por el borde. El ancla pasa a ser la cabecera completa: el desplegable ocupa todo
     el ancho disponible y no puede escaparse por ningún lado. */
  .navigation-group {
    position: static;
  }

  .navigation-menu {
    right: auto;
    left: 0;
    width: 100%;
    min-width: 0;
  }

  .admin-shell,
  .document-workspace {
    grid-template-columns: 1fr;
  }

  .stage-rail {
    position: static;
  }

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

  .runner-topbar {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 0.6rem;
  }

  .runner-progress {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .status-stack {
    justify-self: end;
  }

  /* En pantalla angosta el panel sigue sobrepuesto, pero a sangre y anclado arriba: centrarlo
     dejaría la mitad del contenido fuera de vista al abrir el teclado. */
  .step-surface {
    inset: 3.5rem 0 0;
    align-items: flex-start;
    padding: 0.75rem;
  }

  .step-surface-inner {
    width: 100%;
    max-height: calc(100vh - 5rem);
    padding: 1rem;
  }

  .step-surface.is-waiting .step-surface-inner {
    width: 100%;
  }

  #project-detail-view:has(#step-surface[hidden]) .completion-actions {
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
  }

  .step-actions .inline-button {
    flex: 1 1 auto;
  }
}

@media (max-width: 640px) {
  .site-header {
    gap: 0.5rem;
    padding: 0 0.75rem;
  }

  .environment-badge,
  #topbar-user-name {
    display: none;
  }

  .global-navigation a,
  .global-navigation button {
    min-height: 3rem;
    padding: 0 0.7rem;
  }

  .page-shell {
    grid-template-columns: 1fr;
    padding: 2rem 1rem;
  }

  .intro-panel {
    display: none;
  }

  .builder-step-navigation {
    grid-template-columns: repeat(6, auto);
  }

    .builder-step-navigation button {
    min-width: 8rem;
  }

  .form-question-grid {
    grid-template-columns: 1fr;
  }

  .choice-row {
    grid-template-columns: 1.25rem minmax(0, 1fr);
  }

  .choice-row .mini-button {
    grid-column: 2;
    justify-self: start;
  }

  .document-sheet {
    --sheet-pad: 1.4rem;
    min-height: 0;
    box-shadow: none;
  }

  .stage-list {
    grid-template-columns: 1fr;
  }

  .download-actions,
  .project-context-navigation {
    align-items: stretch;
  }

  .download-actions {
    flex-direction: column;
  }

  .institution-summary dl {
    grid-template-columns: 1fr;
  }

  .assistant-option-grid,
  .assistant-catalog,
  .quota-list,
  .two-field-row {
    grid-template-columns: 1fr;
  }

  .completion-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .background-record {
    align-items: start;
  }

  .record-actions {
    justify-content: flex-start;
  }
}

/* =========================================================================
   Vista de usuario — estilos de adecuación estética (body.user-mode)
   Se aplican solo cuando el usuario está en la vista de usuario, sin tocar
   la administración ni el creador de asistentes.
   ========================================================================= */

/* --- Navbar estilo maqueta --- */
body.user-mode .site-header {
  background: #1B4A7E;
}

body.user-mode .global-navigation a,
.global-navigation button {
  display: flex;
  align-items: center;
  min-height: 4rem;
  text-decoration: none;
  padding: 0 1rem;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 500;
  border: 0;
  border-bottom: 2px solid transparent;
  transition: color 0.3s, border-bottom-color 0.3s;
}

body.user-mode .global-navigation a:hover,
body.user-mode .global-navigation button:hover {
  color: #FFFFFF;
  background: transparent;
  border-bottom-color: #8A6100;
}

body.user-mode .global-navigation a.is-active,
body.user-mode .global-navigation button.is-active {
  color: #FFFFFF;
  background: transparent;
  border-bottom-color: #8A6100;
}

/* --- Botones primarios estilo maqueta (solo vista usuario) --- */
body.user-mode .primary-button {
  background: var(--success-on-white);
  border-color: var(--success-on-white);
  color: #FFFFFF;
  border-radius: 4px;
  border-width: 2px;
  padding: 0.6rem 1.2rem;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}

body.user-mode .primary-button:hover {
  color: var(--text-inverse);
  background: var(--success-on-white-hover);
  border-color: var(--success-on-white-hover);
}

body.user-mode .primary-button:active {
  transform: translateY(1px);
}

/* --- Hero de Inicio --- */
body.user-mode .home-hero-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 1.5rem 2rem;
}

body.user-mode .home-hero-header .eyebrow {
  color: rgb(255 255 255 / 78%);
}

/* Sobre el degradado el azul profundo dejaba de leerse. Título y bajada van en blanco y
   un 10% más grandes: 2.4rem y 1.05rem eran las medidas del fondo blanco. */
body.user-mode .home-hero-header h1 {
  color: var(--text-inverse);
  font-size: 28px;
  line-height: 1.15;
}

body.user-mode .home-hero-header p {
  color: var(--text-inverse);
  font-size: 18px;
  margin-top: 0.5rem;
}

/* --- Tarjetas de asistente estilo maqueta --- */
body.user-mode .assistant-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
  justify-content: center;
  min-height: 11.5rem;
  padding: 2rem 1.5rem;
  color: var(--card-ink);
  text-align: center;
  background: var(--card-tone);
  border: none;
  border-radius: 4px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.user-mode .assistant-card:hover {
  transform: translateY(-8px);
  box-shadow: none;
}

body.user-mode .assistant-card:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
}

body.user-mode .assistant-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  outline-offset: 3px;
}

body.user-mode .assistant-card small {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.82;
}

body.user-mode .assistant-card h3 {
  font-size: 18px;
  line-height: 1.25;
  text-wrap: balance;
}

body.user-mode .assistant-card p {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.9;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

body.user-mode .assistant-card-footer {
  padding-top: 0.7rem;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

/* --- Catálogo de asistentes --- */
body.user-mode .assistant-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.5rem;
}

body.user-mode .home-section-heading h2 {
  color: var(--text-inverse);
}

body.user-mode .home-section-heading p {
  color: rgb(255 255 255 / 85%);
}

body.user-mode .home-evaluator-section {
  border-top-color: rgb(255 255 255 / 25%);
}

body.user-mode .evaluator-archive {
  border-top-color: rgb(255 255 255 / 25%);
}

body.user-mode .evaluator-archive > summary {
  color: rgb(255 255 255 / 80%);
}

/* Soporte no tiene tarjeta blanca detrás del encabezado: sin esto el título quedaba en
   azul profundo sobre el degradado. */
body.user-mode #project-support-view .workspace-header h1 {
  color: var(--text-inverse);
}

body.user-mode #project-support-view .workspace-header .eyebrow,
body.user-mode #project-support-view .workspace-header > div > p:last-child {
  color: rgb(255 255 255 / 85%);
}

/* --- Panel de soporte --- */
body.user-mode .support-help-panel {
  max-width: 40rem;
}

body.user-mode .support-help-panel h2 {
  color: #13315C;
}

/* --- Sección de cupos --- */
body.user-mode .quota-section {
  margin-bottom: 1.5rem;
}

/* --- Ocultar barra lateral --- */
body.user-mode #projects-view > aside {
  display: none !important;
}

/* --- Workspace a pantalla completa (sin sidebar) --- */
body.user-mode #projects-view {
  grid-template-columns: 1fr;
}

/* --- Fondo del diseño --- */
/* El degradado institucional era exclusivo de Mis trabajos, de modo que moverse entre las
   tres pestañas del menú cambiaba el fondo bajo los pies. Ahora Inicio, Mis trabajos y
   Soporte comparten lienzo; el blanco queda para el proyecto abierto, donde el documento
   es lo que se mira. La condición se lee del DOM y no de una clase en el cuerpo porque el
   detalle del proyecto se abre desde varios puntos y una clase se desincroniza. */
body.user-mode .admin-workspace {
  background: #FFFFFF;
}

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])) {
  min-height: calc(100vh - 4rem);
  background: var(--gradient-brand);
}

/* --- Tarjetas con colores del diseño --- */
/* El tono de la tarjeta del catálogo es el que eligió quien construyó el asistente. Antes
   había ocho reglas que lo reasignaban aquí —«institucional» se veía coral y «verde» casi
   blanco—, de modo que el color elegido en administración no era el que veía la persona
   usuaria. Con dieciséis tonos ese desvío dejaba media paleta diciendo otra cosa. */
/* --- Icono en tarjetas (estilo diseño) --- */
body.user-mode .assistant-card-icon {
  display: block;
  font-family: "iconsMind", sans-serif;
  font-size: 28px;
  line-height: 1;
  color: var(--card-ink);
  margin-bottom: 1rem;
  opacity: 0.85;
}

/* ---------------------------------------------------------------------------
   Bandeja de trabajo. La lista de asistentes es la pantalla de inicio: cada fila
   trae su versión, el paso donde quedó su borrador y sus propias acciones, para
   que probar o seguir construyendo no exija recorrer cuatro pantallas.
   Los controles de búsqueda, filtro y orden se mantienen en gris: el relleno de
   color pertenece a la acción principal de la fila.
   --------------------------------------------------------------------------- */
.workbench-toolbar {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.workbench-search input {
  width: 17.5rem;
  max-width: 100%;
  min-height: 2.3rem;
  padding: 0.5rem 0.7rem;
  color: var(--text-body);
  background: var(--surface-input);
  border: var(--border-width) solid var(--border-input);
  border-radius: var(--radius-input);
  font-size: 12px;
}

.workbench-search input:focus-visible {
  border-color: var(--focus-border);
  box-shadow: var(--focus-ring);
  outline: none;
}

.workbench-filter {
  position: relative;
  margin-left: auto;
}

.quiet-btn {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  padding: 0.3rem 0.6rem;
  color: #5C6B7E;
  background: #F7F9FB;
  border: 0.5px solid #E1E5EB;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}

.quiet-btn:hover {
  color: #5C6B7E;
  background: #EEF1F5;
}

.quiet-btn[aria-expanded="true"],
.quiet-btn.is-active {
  color: var(--brand-primary);
  background: var(--tint-info);
  border-color: var(--brand-primary);
}

.quiet-caret {
  font-size: 11px;
  opacity: 0.75;
}

.quiet-count {
  padding: 0 0.3rem;
  color: #FFFFFF;
  background: var(--brand-primary);
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.5;
}

.quiet-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.35rem);
  right: 0;
  width: 15rem;
  padding: 0.5rem;
  background: var(--surface-default);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: none;
}

.quiet-menu-title {
  margin: 0.35rem 0 0.2rem;
  padding: 0 0.6rem;
  color: var(--text-icon-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.quiet-menu-group {
  display: flex;
  flex-direction: column;
}

.quiet-check {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-input);
  font-size: 12px;
  cursor: pointer;
}

.quiet-check:hover {
  background: var(--surface-hover);
}

.quiet-check input {
  accent-color: var(--action);
  margin: 0;
}

.quiet-menu-foot {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.4rem;
  padding: 0.5rem 0.6rem 0;
  border-top: 0.5px solid var(--border-row);
  color: var(--muted);
  font-size: 11px;
}

.workbench-result {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin: 0 0 0.9rem;
  color: var(--muted);
  font-size: 12px;
}

.workbench-result strong {
  color: var(--text);
}

.workbench-panel {
  margin-bottom: 1rem;
}

.panel-heading-tools {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.workbench-rows:empty {
  display: none;
}

.workbench-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 1.25rem;
  border-bottom: 0.5px solid var(--border-row);
  transition: background 90ms ease;
}

.workbench-row:last-child {
  border-bottom: 0;
}

.workbench-row:hover {
  background: var(--surface-hover);
}

.workbench-id {
  display: flex;
  gap: 0.7rem;
  flex: 1.4 1 18rem;
  align-items: center;
  min-width: 0;
}

.workbench-tile {
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  color: var(--card-ink, #FFFFFF);
  background: var(--card-tone, var(--brand-primary));
  border-radius: 8px;
  font-size: 16px;
}

.workbench-name {
  display: block;
  padding: 0;
  color: var(--text);
  background: none;
  border: 0;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.workbench-name:hover {
  color: var(--action-secondary);
  text-decoration: underline;
}

.workbench-meta {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 11px;
}

.workbench-mid {
  flex: 1.5 1 14rem;
  min-width: 0;
}

.workbench-mid.is-compact {
  flex: 0.8 1 9rem;
}

.workbench-steps {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  margin-bottom: 0.3rem;
}

.workbench-step {
  flex: 1;
  height: 0.3rem;
  background: #EEF1F5;
  border-radius: 3px;
}

.workbench-step.is-done {
  background: var(--brand-secondary);
}

.workbench-step.is-current {
  background: var(--action);
}

.workbench-step-label {
  margin: 0;
  color: var(--text-secondary);
  font-size: 11px;
}

.workbench-step-label strong {
  color: var(--text);
  font-weight: 500;
}

.version-chip {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  color: var(--text);
  background: #EEF1F5;
  border: var(--border-width) solid var(--border);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.version-chip + .workbench-meta {
  display: inline;
  margin-left: 0.4rem;
}

/* Rejilla de ranuras fijas, no una fila que se acomoda. Con botones de texto cada fila medía
   distinto —`.inline-button` impone `min-width: 8rem`, pensado para diálogos— y al mezclarlos
   con un botón de icono los bordes quedaban dentados de fila en fila. Aquí las cuatro
   posiciones son siempre las mismas y la que no aplica queda vacía en vez de correr a las
   demás: así las filas se leen como columnas. */
.workbench-actions {
  display: grid;
  grid-template-columns: repeat(4, 2.1rem);
  gap: 0.3rem;
  align-items: center;
  margin-left: auto;
}

.row-action {
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  padding: 0;
  color: var(--text-secondary);
  background: var(--surface-default);
  border: var(--border-width) solid var(--border-input);
  border-radius: var(--radius-input);
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}

.row-action:hover {
  color: var(--brand-primary);
  background: var(--surface-hover);
  border-color: var(--focus-border);
}

/* Una sola acción por fila lleva peso: la que mueve al asistente desde donde está. El resto
   comparte caja y se distingue por el trazo, no por el tamaño. */
.row-action.is-primary {
  color: var(--text-inverse);
  background: var(--action);
  border-color: var(--action);
}

.row-action.is-primary:hover {
  color: var(--text-inverse);
  background: var(--action-hover);
  border-color: var(--action-hover);
}

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

.row-action[aria-expanded="true"] {
  color: var(--brand-primary);
  background: var(--tint-info);
  border-color: var(--brand-primary);
}

.row-action[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* La ranura vacía ocupa su lugar sin dibujar nada: es lo que mantiene las columnas. */
.row-action-slot {
  width: 2.1rem;
  height: 2.1rem;
}

/* Misma caja que el menú de filtros: es el mismo objeto, tiene que verse igual. Vive en el
   cuerpo del documento y se posiciona sobre el botón, así ningún recorte lo alcanza. */
.row-menu {
  position: fixed;
  z-index: 60;
  width: 12.5rem;
  padding: 0.35rem;
  background: var(--surface-default);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: none;
}

.row-menu button {
  display: block;
  width: 100%;
  padding: 0.45rem 0.6rem;
  color: var(--text-body);
  background: none;
  border: 0;
  border-radius: var(--radius-input);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.row-menu button:hover {
  background: var(--surface-hover);
}

.row-menu hr {
  height: 1px;
  margin: 0.3rem 0.2rem;
  background: var(--border-row);
  border: 0;
}

.workbench-foot {
  margin: 0.2rem 0 0;
  text-align: center;
}

/* La fila de un asistente dado de baja explica por qué lo está: sin el motivo a la vista,
   meses después nadie recuerda si se retiró por un error o por fin de convenio. */
.workbench-row.is-retired .workbench-tile {
  filter: grayscale(0.85);
  opacity: 0.7;
}

.retire-note {
  display: block;
  margin-top: 0.2rem;
  color: var(--text-secondary);
  font-size: 11px;
  font-style: italic;
}

.status-badge[data-status="draft"] {
  color: #1B4A7E;
  background: var(--tint-info);
}

@media (width <= 900px) {
  .workbench-row {
    flex-wrap: wrap;
  }

  .workbench-actions {
    margin-left: 0;
  }

  .workbench-filter {
    margin-left: 0;
  }
}

/* Fases 3 y 4: el contrato se administra como capacidad legible, no como estructura técnica. */

/* Fase 6: el contexto delegado nunca puede confundirse con la sesión Smartpaper real. */
.context-banner,
.communication-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem clamp(1rem, 4vw, 3rem);
  background: #F5EEDC;
  border-bottom: 2px solid #8A6100;
  color: #6B4B00;
}

.context-banner[hidden],
.communication-banner[hidden] {
  display: none;
}

.context-banner div,
.communication-banner div {
  display: grid;
  gap: 0.15rem;
}

.communication-banner {
  background: #F7F9FB;
  border-bottom-color: #2E5F9C;
  color: #13315C;
}

.communication-banner.is-important {
  background: #F7E8E1;
  border-bottom-color: #8A6100;
  color: #6B4B00;
}

.communication-banner p {
  margin: 0;
  white-space: pre-line;
}

@media (max-width: 720px) {
  .context-banner,
  .communication-banner {
    align-items: stretch;
    flex-direction: column;
  }
}
/* Barra de evaluadores. Son herramientas, no trabajos: se muestran como aplicaciones que se
   abren para usarlas, y van arriba porque lo que se reutiliza tiene que estar más a la mano
   que lo que se termina. */
.instrument-bar {
  padding: 1rem 0 1.2rem;
}

.instrument-launcher {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  padding: 0.2rem 0 0.6rem;
}

.instrument-tile {
  display: flex;
  width: 7.5rem;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.7rem 0.4rem;
  border: 0.5px solid transparent;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  text-align: center;
}

.instrument-tile:hover:not(:disabled) {
  border-color: var(--line);
  background: var(--paper);
}

.instrument-tile:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.instrument-tile-icon {
  display: flex;
  width: 3.5rem;
  height: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--paper-muted, var(--paper));
  border: 0.5px solid var(--line);
  font-size: 22px;
}

.instrument-tile strong {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}

.instrument-tile small {
  color: var(--ink-soft, inherit);
  font-size: 12px;
}

.instrument-tile.is-new .instrument-tile-icon {
  border-style: dashed;
  background: none;
}

/* Dos tramos del mismo trabajo. Las cifras van en las propias pestañas: lo terminado no
   desaparece por estar en la otra, solo su detalle queda a un clic. */
.works-tabs {
  display: flex;
  gap: 0.3rem;
  border-bottom: 0.5px solid var(--line);
  margin-bottom: 1rem;
}

.works-tab {
  padding: 0.6rem 0.9rem;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  cursor: pointer;
  color: var(--ink-soft, inherit);
}

.works-tab.is-active {
  border-bottom-color: var(--brand-accent, currentColor);
  color: inherit;
  font-weight: 500;
}

/* Mis evaluadores. Un instrumento no es un trabajo que se termina, es una herramienta que el
   usuario construyó: por eso tiene su propia sección y sus evaluaciones viven dentro de él. */
.instrument-list {
  display: grid;
  gap: 0.9rem;
}

.instrument-card {
  padding: 1rem 1.15rem;
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: 10px;
}

/* Un evaluador aprobado y uno a medio construir se veían idénticos. La tarjeta lo dice antes
   del primer clic: el borde punteado es el mismo lenguaje que ya usa el distintivo de
   procedencia para un instrumento que todavía no está congelado. */
.instrument-card[data-ready="no"] {
  border-style: dashed;
  background: var(--surface-subtle);
}

.instrument-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: flex-start;
  justify-content: space-between;
}

/* Cuatro datos apilados, no una frase corrida: el estado, de qué asistente nace, cómo se llama
   y qué le falta. Sin esto el nombre del asistente y el del evaluador se leían como una sola
   línea, porque «small» y «strong» son elementos en línea. */
.instrument-copy > small,
.instrument-copy > strong,
.instrument-copy > p {
  display: block;
}

.instrument-copy > strong {
  margin-top: 0.1rem;
  font-size: 16px;
}

.instrument-copy > p {
  margin: 0.3rem 0 0;
}

.instrument-state {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.instrument-card[data-ready="yes"] .instrument-state {
  color: var(--action);
}

.instrument-balance {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 12px;
}

/* Un evaluador construye una herramienta reutilizable, no un documento que se termina. La
   etiqueta lo dice en el catálogo, antes de que la persona escriba el nombre. */
/* Sobre la tarjeta del catálogo, que va en el tono elegido por quien construyó el asistente,
   el pill toma el color del propio fondo en vez de imponer el azul de la interfaz. */
.assistant-card .assistant-kind-tag {
  color: var(--text-inverse);
  background: rgb(255 255 255 / 18%);
  border-color: rgb(255 255 255 / 35%);
}

.assistant-kind-tag {
  justify-self: start;
  align-self: start;
  padding: 0.15rem 0.5rem;
  color: var(--action);
  background: var(--surface-selected);
  border: var(--border-width) solid var(--border-input);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Ordenar por puntaje un lote que mezcla revisiones del instrumento produce un ranking que
   parece válido y no lo es. El aviso va sobre la tabla, no escondido en una celda. */
.comparison-warning {
  margin: 0 0 0.8rem;
  padding: 0.6rem 0.8rem;
  color: var(--text-body);
  background: #F5EEDC;
  border-left: 3px solid #8A6100;
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.numeric-cell[data-stale="yes"] {
  color: #6B4B00;
  font-weight: 500;
}

/* Dos capacidades contractuales en la misma ficha, una debajo de la otra. Nunca sumadas y
   nunca en la misma columna: un proyecto y una evaluación no son unidades comparables. */
.quota-currency + .quota-currency {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 0.5px solid var(--border-row);
}

.quota-currency p {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.quota-currency strong {
  display: block;
  font-size: 22px;
}

.instrument-actions {
  display: flex;
  gap: 0.5rem;
}

.instrument-evaluations {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

/* Cada evaluación se abre desde su nombre. Es un botón por accesibilidad —no navega a otra
   página— pero se lee como el enlace que el usuario espera. */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.instrument-evaluations li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-top: 0.5px solid var(--line);
}

/* El hito del instrumento. Aprobarlo es el acto que lo congela, así que se separa del resto
   del panel en vez de leerse como una propuesta más. */
.instrument-milestone {
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-left: 4px solid var(--brand-accent, var(--line));
  border-radius: 0;
}

.instrument-milestone strong {
  display: block;
  margin: 0.5rem 0 0.25rem;
  font-size: 16px;
}

.instrument-milestone p {
  margin: 0;
  color: var(--ink-soft, inherit);
}

/* Procedencia de una evaluación. Va siempre visible porque la pregunta «¿con qué rúbrica se
   juzgó esto?» tiene que responderse sin abrir nada. */
.origin-badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border: 0.5px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.origin-badge[data-kind="instrument"] {
  border-style: dashed;
}

/* ---------------------------------------------------------------------------
   Inicio: los evaluadores son herramientas reutilizables. Conservan el mismo
   lenguaje cromático que los asistentes, con aproximadamente la mitad de su
   altura y acciones breves que no esconden aplicación ni comparación.
   --------------------------------------------------------------------------- */
.home-section-heading {
  display: block;
  margin-bottom: 1.25rem;
}

.home-section-heading h2 {
  margin: 0;
  color: var(--brand-primary-deep);
  font-family: var(--display);
  font-size: 22px;
}

.home-section-heading p {
  margin: 0.35rem 0 0;
  color: var(--text-secondary);
}

.home-evaluator-section {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 0.5px solid var(--border);
}

.evaluator-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.25rem;
}

/* Cajón de los evaluadores guardados: cerrado por omisión y sin borde de tarjeta, para que
   pese menos que los que sí están en uso. */
.evaluator-archive {
  margin: 1.5rem 0 0;
  border: 0;
  border-top: 0.5px solid var(--line);
}

.evaluator-archive > summary {
  padding: 0.85rem 0;
  color: var(--text-muted);
  background: transparent;
  font-size: 14px;
  font-weight: 500;
}

.evaluator-archive > summary:hover {
  color: var(--action);
}

.evaluator-archive .evaluator-home-grid {
  padding: 0 0 1.25rem;
}

.evaluator-archive .evaluator-home-card {
  opacity: 0.72;
}

.evaluator-archive .evaluator-home-card:hover,
.evaluator-archive .evaluator-home-card:focus-within {
  opacity: 1;
}

.evaluator-home-card {
  --evaluator-tone: var(--brand-primary-deep);
  --evaluator-tone-ink: var(--text-inverse);
  display: flex;
  min-height: 5.55rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 1rem;
  color: var(--text-body);
  background: var(--surface-default);
  border: var(--border-width) solid var(--border);
  border-radius: 8px;
  box-shadow: none;
}

.evaluator-home-card[data-accent="cyan"],
.evaluator-home-card[data-accent="mint"] {
  --evaluator-tone: var(--brand-secondary);
  --evaluator-tone-ink: var(--brand-primary-deep);
}

.evaluator-home-card[data-accent="azure"],
.evaluator-home-card[data-accent="aqua"],
.evaluator-home-card[data-accent="teal"],
.evaluator-home-card[data-accent="green"],
.evaluator-home-card[data-accent="olive"],
.evaluator-home-card[data-accent="amber"],
.evaluator-home-card[data-accent="bronze"],
.evaluator-home-card[data-accent="clay"],
.evaluator-home-card[data-accent="brick"],
.evaluator-home-card[data-accent="berry"],
.evaluator-home-card[data-accent="plum"] {
  --evaluator-tone: var(--action);
  --evaluator-tone-ink: var(--text-inverse);
}

.evaluator-home-heading {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  min-width: 0;
}

.evaluator-home-icon {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  color: var(--evaluator-tone-ink);
  background: var(--evaluator-tone);
  border-radius: 8px;
  font-family: "iconsMind", sans-serif;
  font-size: 18px;
  line-height: 1;
}

.evaluator-home-copy {
  min-width: 0;
}

.evaluator-home-copy h3,
.evaluator-home-copy small {
  margin: 0;
}

.evaluator-home-copy h3 {
  display: -webkit-box;
  overflow: hidden;
  color: var(--brand-primary-deep);
  font-family: var(--display, var(--sans));
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.evaluator-home-copy .evaluator-home-state {
  display: inline-flex;
  margin-top: 0.32rem;
  align-items: center;
  gap: 0.38rem;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
}

.evaluator-home-state::before {
  width: 0.42rem;
  height: 0.42rem;
  flex: 0 0 auto;
  background: var(--success);
  border-radius: 50%;
  content: "";
}

.evaluator-home-card[data-state="editing"] .evaluator-home-state::before {
  background: var(--warning);
}

.evaluator-home-card[data-state="archived"] .evaluator-home-state::before {
  background: var(--text-icon-muted);
}

.evaluator-home-actions {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.evaluator-menu-trigger {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  place-items: center;
  color: var(--action);
  background: var(--tint-info);
  border: var(--border-width) solid var(--border-input);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 18px;
  line-height: 1;
}

.evaluator-menu-trigger:hover,
.evaluator-menu-trigger[aria-expanded="true"] {
  color: var(--text-inverse);
  background: var(--action);
  border-color: var(--action);
}

.evaluator-menu-trigger span {
  transform: translateY(-0.12rem);
  transition: transform 150ms ease;
}

.evaluator-menu-trigger[aria-expanded="true"] span {
  transform: translateY(0.1rem) rotate(180deg);
}

.evaluator-action-menu {
  position: absolute;
  z-index: 6;
  top: calc(100% + 0.45rem);
  right: 0;
  display: grid;
  min-width: 12.6rem;
  padding: 0.38rem;
  background: var(--surface-default);
  border: var(--border-width) solid var(--border);
  border-radius: 8px;
  box-shadow: none;
}

.evaluator-menu-action {
  display: flex;
  width: 100%;
  min-height: 2.35rem;
  padding: 0.55rem 0.65rem;
  align-items: center;
  color: var(--text-body);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  text-align: left;
}

.evaluator-menu-action:hover:not(:disabled) {
  background: var(--surface-hover);
}

.evaluator-menu-action[data-positive="true"] {
  color: var(--success-on-white);
  font-weight: 500;
}

.evaluator-menu-action:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.evaluator-menu-trigger:focus-visible,
.evaluator-menu-action:focus-visible {
  outline: 3px solid rgb(46 95 156 / 32%);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Mis trabajos: una sola superficie, cuatro carpetas y una tabla. La selección
   cambia el contenido sin abrir paneles acumulativos.
   --------------------------------------------------------------------------- */
.works-page-surface {
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--surface-default);
  border: var(--border-width) solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.works-header {
  align-items: flex-end;
}

.works-header h1 {
  color: var(--brand-primary-deep);
  font-family: var(--display);
}

.works-header-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.work-search {
  display: grid;
  grid-template-columns: auto minmax(10rem, 1fr);
  gap: 0.5rem;
  align-items: center;
  min-width: min(19rem, 40vw);
  min-height: 2.8rem;
  padding: 0 0.8rem;
  color: var(--text-secondary);
  background: var(--surface-subtle);
  border: var(--border-width) solid var(--border-input);
  border-radius: var(--radius-md);
}

.work-search:focus-within {
  border-color: var(--action);
  box-shadow: var(--focus-ring);
}

.work-search input {
  min-height: 2.6rem;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.work-search input:focus {
  border: 0;
  box-shadow: none;
}

.work-folders-section {
  margin-bottom: 2.25rem;
}

.work-folders-section > h2,
.work-list-heading h2 {
  margin: 0;
  color: var(--brand-primary-deep);
  font-family: var(--display);
  font-size: 22px;
}

.work-folder-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 1rem;
}

.work-folder {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  min-height: 4.7rem;
  padding: 0.85rem;
  color: var(--text-body);
  text-align: left;
  background: var(--surface-default);
  border: var(--border-width) solid var(--border-input);
  border-radius: var(--radius-md);
  transition: border-color 130ms ease, background 130ms ease, box-shadow 130ms ease;
}

.work-folder:hover,
.work-folder.is-active {
  background: var(--surface-hover);
  border-color: var(--action-secondary);
  box-shadow: var(--shadow-sm);
}

.work-folder.is-active {
  outline: 2px solid rgb(46 95 156 / 24%);
  outline-offset: 1px;
}

.work-folder-icon {
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  color: var(--brand-primary-deep);
  background: var(--tint-info);
  border-radius: 8px;
  font-size: 22px;
}

.work-folder-icon.is-evaluation {
  background: #C3D3E6;
}

.work-folder-icon.is-muted {
  color: var(--text-secondary);
  background: var(--surface-disabled);
}

.work-folder-icon.is-test {
  color: #6B4B00;
  background: #F5EEDC;
}

/* La marca de prueba acompaña al nombre sin competir con él: dice de qué versión es la
   prueba, que es lo único que distingue una de otra cuando todas se llaman igual. */
.work-test-mark {
  display: inline-block;
  margin-top: 0.2rem;
  padding: 0.1rem 0.4rem;
  color: #6B4B00;
  background: #F5EEDC;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.work-folder strong,
.work-folder small {
  display: block;
}

.work-folder strong {
  color: var(--brand-primary-deep);
  font-size: 13px;
}

.work-folder small {
  margin-top: 0.2rem;
  color: var(--text-secondary);
  font-size: 12px;
}

.work-list-heading {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}

.work-list-heading .eyebrow {
  margin: 0 0 0.2rem;
}

#work-list-summary {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.work-table-wrap {
  overflow: hidden;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
}

.work-table {
  table-layout: fixed;
  font-size: 13px;
}

.work-table th {
  padding: 0.8rem 0.9rem;
  color: var(--text-inverse);
  background: var(--brand-primary-deep);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.055em;
  text-align: left;
  text-transform: uppercase;
}

.work-table th:nth-child(1) { width: 29%; }
.work-table th:nth-child(2) { width: 11%; }
.work-table th:nth-child(3) { width: 17%; }
.work-table th:nth-child(4) { width: 13%; }
.work-table th:nth-child(5) { width: 30%; }

.work-table td {
  padding: 0.85rem 0.9rem;
  vertical-align: middle;
  border-bottom: 0.5px solid var(--border-row);
}

.work-table tbody tr:last-child td {
  border-bottom: 0;
}

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

.work-name-button {
  display: block;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  color: var(--brand-primary-deep);
  background: transparent;
  border: 0;
  font-weight: 500;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-name-button:hover {
  color: var(--action);
  text-decoration: underline;
}

.work-table td:first-child small {
  display: block;
  overflow: hidden;
  margin-top: 0.25rem;
  color: var(--text-secondary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-actions-heading {
  text-align: right !important;
}

.work-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  justify-content: flex-end;
}

.work-main-action,
.work-secondary-action,
.work-download-action,
.work-archive-action {
  min-height: 2rem;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
}

.work-main-action {
  color: var(--text-inverse);
  background: var(--success-on-white);
  border: 0.5px solid var(--success-on-white);
}

.work-main-action:hover {
  background: var(--success-on-white-hover);
}

.work-secondary-action,
.work-download-action {
  color: var(--action);
  background: var(--surface-default);
  border: 0.5px solid var(--border-input);
}

.work-secondary-action:hover,
.work-download-action:hover {
  background: var(--surface-hover);
  border-color: var(--action-secondary);
}

.work-archive-action {
  color: var(--danger);
  background: transparent;
  border: 0.5px solid transparent;
}

.work-archive-action:hover {
  background: var(--tint-danger);
  border-color: var(--danger);
}

.work-table-wrap > .empty-state {
  border: 0;
  border-radius: 0;
}

.comparison-dialog {
  width: min(70rem, calc(100vw - 2rem));
}

.comparison-dialog .table-scroll {
  max-height: min(60vh, 38rem);
}

@media (width <= 980px) {
  .work-folder-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .works-header {
    align-items: stretch;
    flex-direction: column;
  }

  .works-header-actions {
    align-items: stretch;
  }

  .work-search {
    min-width: 0;
    flex: 1;
  }

  .work-table {
    min-width: 62rem;
  }

  .work-table-wrap {
    overflow-x: auto;
  }
}

@media (width <= 620px) {
  .works-page-surface {
    padding: 1rem;
    border-radius: 8px;
  }

  .works-header-actions,
  .work-list-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .works-header-actions .compact-button {
    width: 100%;
  }

  .work-folder-grid,
  .evaluator-home-grid {
    grid-template-columns: 1fr;
  }
}

/* Tipo de asistente. Es la primera decisión y no se puede deshacer, así que cada opción
   explica en una línea qué implica en vez de confiar en que su nombre lo diga.

   El campo hereda .field-group, que es un grid: dentro de un fieldset eso descoloca el legend,
   porque el legend no participa del grid y queda montado sobre el borde. Por eso aquí el
   fieldset vuelve a ser un bloque, el legend se declara un bloque normal —y así se alinea con
   el resto de las etiquetas del diálogo— y las dos opciones se separan entre sí, no con el gap
   heredado. Cada opción es una tarjeta seleccionable: sin el estado marcado, dos radios sueltos
   con texto de dos alturas distintas se leían como una lista desalineada. */
.kind-choices {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.kind-choices legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
}

.kind-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  padding: 0.7rem 0.85rem;
  color: var(--ink);
  background: var(--paper);
  border: var(--border-width) solid var(--border-input);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.kind-option + .kind-option {
  margin-top: 0.5rem;
}

.kind-option:hover {
  background: var(--surface-hover);
  border-color: var(--focus-border);
}

.kind-option:focus-within {
  border-color: var(--focus-border);
  box-shadow: var(--focus-ring);
}

.kind-option:has(input:checked) {
  background: var(--surface-selected);
  border-color: var(--focus-border);
  box-shadow: inset 0 0 0 1px var(--focus-border);
}

.kind-option input {
  width: 1rem;
  height: 1rem;
  /* Alineado con la primera línea del título, no con el centro del bloque de texto: las dos
     opciones tienen descripciones de alto distinto y si no se fija, cada radio queda a una
     altura diferente. */
  margin: 0.15rem 0 0;
  accent-color: var(--action);
}

.kind-option span {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.kind-option strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

.kind-option small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
}

/* La advertencia de irreversibilidad cierra el campo y no pertenece a ninguna de las dos
   opciones: va debajo de ambas y en el tono secundario. */
.kind-choices > small {
  display: block;
  margin-top: 0.55rem;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

/* Fila de filtros de un reporte: los controles se alinean por su base para que el botón quede
   a la altura de los campos y no del texto de sus etiquetas. */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.8rem;
  padding: 0 1rem 1rem;
}

.filter-row .field-group {
  margin-bottom: 0;
}

/* Las cifras se leen comparándolas hacia abajo, así que se alinean a la derecha y usan cifras
   de ancho fijo: sin esto las columnas bailan de fila en fila. */
.numeric-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Dos monedas, dos filas. Los proyectos ocupan la primera y las evaluaciones la segunda: nunca
   se suman y nunca comparten una misma cifra. */
.contract-capacity-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.contract-capacity-metrics article {
  min-height: 7rem;
}

.contract-capacity-metrics article[data-currency="evaluations"] {
  background: var(--paper-muted, var(--paper));
  border-style: dashed;
}

@media (max-width: 820px) {
  .contract-capacity-metrics {
    grid-template-columns: 1fr;
  }
}

.capacity-card-list {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
}

.capacity-card {
  padding: 1rem;
  border: 0.5px solid var(--border-row);
  border-radius: var(--radius-medium);
  background: var(--surface);
}

.capacity-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.capacity-card-heading h3,
.capacity-card-heading p {
  margin: 0;
}

.capacity-card-heading p {
  margin-top: 0.2rem;
  color: var(--text-secondary);
  font-size: 13px;
}

.capacity-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(8rem, 1fr)) auto;
  gap: 0.8rem;
  align-items: end;
}

.capacity-form label {
  display: grid;
  gap: 0.35rem;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
}

.capacity-form input,
.capacity-form select {
  width: 100%;
}

.capacity-form .primary-button {
  margin: 0;
  white-space: nowrap;
}

@media (width <= 900px) {
  .capacity-form {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   Inicio: estado de la plataforma. Cifras arriba, lo pendiente y lo ocurrido
   debajo, y la adopción por institución, que la política de versionamiento
   vuelve obligatorio poder vigilar de un vistazo.
   --------------------------------------------------------------------------- */
.home-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.home-metric {
  padding: 0.9rem 1rem;
  background: var(--surface-default);
  border: var(--border-width) solid var(--border);
  border-radius: 10px;
}

.home-metric .metric-number {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--text);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}

.home-metric .metric-label {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 12px;
}

.home-metric .metric-detail {
  margin: 0.45rem 0 0;
  padding-top: 0.45rem;
  border-top: 0.5px solid var(--border-row);
  color: var(--text-secondary);
  font-size: 12px;
}

/* Una cifra que exige acción no puede verse igual que una que solo informa. */
.home-metric.is-alert {
  background: #F7F9FB;
  border-color: #E5C9C9;
}

.home-metric.is-alert .metric-number {
  color: #7A1F1F;
}

.home-columns {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0.9rem;
  align-items: start;
  margin-top: 0.9rem;
}

.home-columns > .data-panel {
  margin: 0;
}

/* Rejilla, no flex. Con flex, la fecha de cada aviso mide distinto —«recién» contra
   «hace 6 días»— y el botón terminaba en una posición diferente en cada fila: 347px de texto
   en una y 329px en la siguiente. Con columnas fijas, la acción cae siempre en el mismo sitio
   y el texto se queda con todo lo que sobra. Es el mismo arreglo que la fila de la bandeja. */
.home-attention-item {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr) 4.5rem 5.75rem;
  gap: 0.8rem;
  align-items: center;
  padding: 0.8rem 1.25rem;
  border-bottom: 0.5px solid var(--border-row);
}

.home-attention-item:last-child {
  border-bottom: 0;
}

.home-attention-item:hover {
  background: var(--surface-hover);
}

/* El filete de severidad es lo que se lee antes que el texto. */
.severity-bar {
  flex: none;
  width: 6px;
  height: 2.1rem;
  border-radius: 3px;
}

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

.home-attention-item .copy {
  min-width: 0;
}

/* «(PLADECO)» y compañía no pueden empujar la columna: si no caben, se parten. */
.home-attention-item .copy strong {
  overflow-wrap: anywhere;
}

.home-attention-item .copy strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}

.home-attention-item .copy small {
  display: block;
  margin-top: 0.1rem;
  color: var(--muted);
  font-size: 12px;
}

.home-attention-item .when {
  justify-self: end;
  color: var(--text-icon-muted);
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}

.home-attention-item .inline-button {
  width: 100%;
  min-width: 0;
  min-height: 0;
  /* `.primary-button` trae `margin-top: 0.3rem` y `justify-content: space-between`, pensados
     para un botón de formulario con flecha al final. Dentro de una fila, lo primero lo baja
     casi 5px respecto de sus vecinos y lo segundo separa su contenido a los extremos. */
  margin-top: 0;
  padding: 0.42rem 0.5rem;
  justify-content: center;
  font-size: 12px;
}

.home-activity-item {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.65rem 1.25rem;
  border-bottom: 0.5px solid var(--border-row);
}

.home-activity-item:last-child {
  border-bottom: 0;
}

.home-activity-item .who {
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  color: var(--brand-primary);
  background: #EEF1F5;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 500;
}

.home-activity-item p {
  margin: 0;
  color: var(--text-body);
  font-size: 13px;
}

.home-activity-item small {
  color: var(--text-icon-muted);
  font-size: 11px;
}

.home-adoption {
  font-size: 13px;
}

.home-adoption th {
  padding: 0.55rem 1.25rem;
  color: var(--text-secondary);
  background: var(--surface-input);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  border-bottom: 0.5px solid var(--border-row);
}

.home-adoption td {
  padding: 0.6rem 1.25rem;
  color: var(--text-body);
  border-bottom: 0.5px solid var(--surface-subtle);
}

.home-adoption tr:last-child td {
  border-bottom: 0;
}

@media (width <= 900px) {
  .home-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-columns {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================================
   Paso 3 · Metodología: índice de etapas y ficha de la etapa seleccionada.

   Antes cada etapa se abría en su lugar dentro de una sola columna: el paso crecía con la
   metodología, saltar de la segunda etapa a la última obligaba a recorrer todo lo que había
   en medio, y cada acción se dibujaba sobre gris dentro de una fila gris dentro de una
   tarjeta blanca. Aquí el índice queda quieto a la izquierda, la ficha de la derecha muestra
   una etapa, y la jerarquía la da el espacio y no un encuadre de color.
   =========================================================================== */
.methodology-workspace {
  display: grid;
  grid-template-columns: minmax(15rem, 17rem) minmax(0, 1fr);
  align-items: stretch;
}

/* Cinco roles bastan para recorrer una ficha larga con la vista. Las clases viven en los
   helpers compartidos, pero se activan solo en Metodología para no cambiar otras pantallas.
   El rótulo de sección usa 12 px —no 11— porque la aceptación prohíbe texto menor a 12 px. */
[data-builder-panel="methodology"] .methodology-role-stage {
  color: var(--text);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

[data-builder-panel="methodology"] .methodology-role-question {
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

[data-builder-panel="methodology"] .methodology-role-value {
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

[data-builder-panel="methodology"] .methodology-role-section {
  color: var(--text-muted);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.09em;
  line-height: 1.4;
  text-transform: uppercase;
}

[data-builder-panel="methodology"] .methodology-role-help,
[data-builder-panel="methodology"] :is(.inline-note, small) {
  max-width: 58ch;
  color: var(--text-muted);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

.field-caption-line {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  justify-self: start;
}

.hint {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.2rem;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0;
  color: var(--brand-primary);
  background: var(--surface-default);
  border: 0.5px solid var(--border-input);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.hint-popover {
  position: absolute;
  z-index: 12;
  top: calc(100% + 0.4rem);
  left: 0;
  width: min(19rem, calc(100vw - 2rem));
  padding: 0.65rem 0.75rem;
  color: var(--text-inverse);
  text-align: left;
  background: var(--brand-primary-deep);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.2rem);
  visibility: hidden;
}

.hint[aria-expanded="true"] .hint-popover {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.document-origin-chip {
  display: inline-flex;
  justify-self: start;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

.document-origin-chip.is-success {
  color: #14543F;
  background: var(--tint-success);
  border: 0.5px solid #B9D8CA;
}

.document-origin-chip.is-warning {
  color: #6B4B00;
  background: var(--tint-warning);
  border: 0.5px solid #8A6100;
}

.document-origin-warning {
  margin: 0;
}

.instrument-output-copy {
  display: grid;
  gap: 0.2rem;
}

.instrument-output-title {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  justify-self: start;
}

.result-type-consequence {
  margin-top: 0.1rem;
}

.stage-index {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 26rem;
  background: var(--surface-default);
  border-right: 0.5px solid var(--line);
}

.stage-index-head {
  display: grid;
  gap: 0.6rem;
  padding: 0.9rem 0.9rem 0.7rem;
}

.stage-index-title {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
}

.stage-index-title strong {
  color: var(--text);
  font-size: 14px;
}

.stage-index-title small {
  color: var(--muted);
  font-size: 13px;
}

.stage-index-list {
  display: grid;
  gap: 0.15rem;
  align-content: start;
  padding: 0 0.55rem;
  overflow-y: auto;
}

.stage-index-item {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0.55rem;
  color: var(--ink);
  text-align: left;
  background: transparent;
  border: 0.5px solid transparent;
  border-radius: var(--radius-sm);
}

.stage-index-item:hover {
  background: var(--paper);
}

/* La etapa seleccionada es la única que cambia de superficie: un acento, no cinco. */
.stage-index-item[aria-current="true"] {
  background: var(--paper);
  border-color: var(--border-input);
  box-shadow: inset 0.16rem 0 0 var(--brand-secondary);
}

.stage-index-number {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.stage-index-item[aria-current="true"] .stage-index-number {
  color: var(--brand-primary);
}

.stage-index-copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.stage-index-copy strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-index-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ámbar solo significa una cosa en todo el paso: hay algo que revisar. */
.stage-index-observed {
  min-width: 1.35rem;
  padding: 0.12rem 0.35rem;
  color: #6B4B00;
  background: var(--tint-warning);
  border: 0.5px solid #8A6100;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
}

.stage-index-foot {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem 0.9rem;
}

.stage-index-foot .inline-button {
  width: 100%;
  min-width: 0;
}

.stage-index-foot .stage-ordering {
  margin-top: 0;
  justify-content: flex-start;
}

/* La revisión acompaña el siguiente paso en la barra superior; el riel queda dedicado a
   navegar etapas. `display: contents` permite que su lista baje a una segunda fila sin
   separar el chip de su estado semántico. */
.methodology-main {
  min-width: 0;
  background: var(--methodology-canvas);
}

.methodology-toolbar {
  position: sticky;
  z-index: 4;
  top: 0;
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto auto auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.75rem 1rem;
  background: rgb(238 241 245 / 96%);
  border-bottom: 0.5px solid var(--border);
  backdrop-filter: none;
}

.methodology-review {
  display: contents;
}

.methodology-review-bar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}

.methodology-review-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.25rem 0.55rem;
  color: #14543F;
  background: var(--tint-success);
  border: 0.5px solid #B9D8CA;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.methodology-review[data-state="pending"] .methodology-review-chip {
  color: #6B4B00;
  background: var(--tint-warning);
  border-color: #8A6100;
}

.methodology-review[data-state="checking"] .methodology-review-chip {
  color: var(--text-muted);
  background: var(--surface-default);
  border-color: var(--border-input);
}

.methodology-review-details {
  grid-column: 1 / -1;
  padding: 0.65rem 0.8rem;
  background: var(--surface-default);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.methodology-review-details ul {
  margin: 0.45rem 0 0;
  padding-left: 0;
  font-size: 13px;
}

.methodology-review-details ul[hidden] {
  display: none;
}

.methodology-review .mini-button {
  padding: 0.25rem 0.35rem;
  font-size: 14px;
}

#methodology-review-list li {
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Ficha de la etapa seleccionada. */
.stage-detail {
  width: min(100%, var(--methodology-sheet-max));
  margin: 0 auto;
  padding: 1.5rem;
}

.stage-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 0.9rem;
  align-items: end;
  padding: 1rem;
  background: var(--surface-default);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.stage-detail-body {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.stage-detail-body .stage-action-builder {
  background: var(--surface-default);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.stage-detail-body .stage-action-builder.validator-step {
  border-left: 3px solid var(--action);
}

.validator-controls,
.validator-result {
  display: grid;
  gap: 0.7rem;
}

/* Agrupar campos con una versalita y un filete cuesta menos ruido que otra tarjeta. */
.stage-section-label {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin: 0.2rem 0 0.1rem;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.stage-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.stage-detail-body > .secondary-button {
  justify-self: start;
  width: auto;
  margin-top: 0.35rem;
}

/* Solo una acción abierta a la vez: las demás quedan en una línea con lo que entregan. */
.stage-action-summary {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  width: 100%;
  padding: 0.55rem 0.7rem;
  color: var(--ink);
  text-align: left;
  background: transparent;
  border: 0;
}

.stage-action-summary:hover {
  background: var(--surface-subtle);
}

.stage-action-summary[aria-expanded="true"] {
  background: var(--surface-subtle);
  border-bottom: 0.5px solid var(--line);
}

/* La relación entrada → trabajo → salida se puede comprobar sin recorrer el formulario. */
.stage-action-flow {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.55rem 0.8rem;
  background: var(--surface-subtle);
  border-bottom: 0.5px solid var(--border);
}

.stage-action-flow-label {
  margin-right: 0.2rem;
}

.stage-action-flow-chip {
  max-width: 15rem;
  padding: 0.2rem 0.45rem;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--surface-default);
  border: 0.5px solid var(--border-input);
  border-radius: var(--radius-pill);
}

.stage-action-flow-arrow {
  color: var(--text-muted);
  font-size: 14px;
}

.stage-action-order {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.stage-action-copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.stage-action-copy strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-action-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-action-caret {
  display: inline-flex;
  color: var(--muted);
}

.stage-action-body {
  display: grid;
  gap: 0.6rem;
  padding: 0.85rem 0.8rem 0.75rem;
}

.stage-action-body[hidden] {
  display: none;
}

.stage-action-section {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  margin: 0;
  padding: 1rem 0 0;
  border: 0;
  border-top: 0.5px solid var(--border);
}

.stage-action-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.stage-action-section > legend {
  padding: 0 0.4rem 0 0;
}

.stage-action-footer,
.stage-action-footer-primary,
.stage-action-footer-ordering {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.stage-action-footer {
  justify-content: space-between;
  padding-top: 0.8rem;
  border-top: 0.5px solid var(--border);
}

.stage-action-footer-ordering .action-ordering {
  margin-top: 0;
}

.stage-action-footer-primary .action-advanced {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Dentro de la ficha el color describe significado, no la familia histórica del botón. */
[data-builder-panel="methodology"] .secondary-button {
  gap: 0.3rem;
  width: auto;
  min-height: 2.25rem;
  margin-top: 0;
  padding: 0.45rem 0.7rem;
  color: var(--text);
  background: var(--surface-default);
  border-color: var(--border-input);
  box-shadow: none;
}

[data-builder-panel="methodology"] .mini-button {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.25rem 0.35rem;
  color: var(--brand-primary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
}

[data-builder-panel="methodology"] .mini-button:hover,
[data-builder-panel="methodology"] .action-advanced > summary:hover {
  background: var(--tint-primary);
}

[data-builder-panel="methodology"] .mini-button.danger-button {
  color: var(--danger);
  background: transparent;
}

[data-builder-panel="methodology"] .action-advanced > summary {
  padding: 0.3rem 0.35rem;
  color: var(--brand-primary);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

[data-builder-panel="methodology"] .primary-button {
  width: auto;
  min-height: 2.25rem;
  margin-top: 0;
  padding: 0.45rem 0.8rem;
  color: #FFFFFF;
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* Publicar sigue disponible en la cabecera, pero no compite con el único avance del paso. */
#assistant-builder-view[data-builder-step="methodology"] #publish-version {
  width: auto;
  min-height: 2.25rem;
  margin-top: 0;
  padding: 0.35rem 0.45rem;
  color: var(--brand-primary);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

[data-builder-panel="methodology"] button:focus-visible,
[data-builder-panel="methodology"] input:focus-visible,
[data-builder-panel="methodology"] select:focus-visible,
[data-builder-panel="methodology"] textarea:focus-visible,
[data-builder-panel="methodology"] summary:focus-visible {
  outline: 3px solid rgb(27 74 126 / 32%);
  outline-offset: 2px;
}

/* Alternativas visibles en vez de un desplegable de 44 px para elegir entre dos. */
.choice-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  justify-self: start;
  padding: 0.15rem;
  background: var(--surface-input);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
}

.choice-option {
  padding: 0.32rem 0.62rem;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}

.choice-option:hover {
  color: var(--text);
}

.choice-option[aria-checked="true"] {
  color: #FFFFFF;
  background: var(--brand-primary);
  box-shadow: var(--shadow-sm);
}

.field-caption {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
}

/* Escala compacta del paso: un selector de dos opciones no necesita el alto de un campo de
   texto libre. Los prompts conservan su medida, que sí es contenido. */
[data-builder-panel="methodology"] label,
[data-builder-panel="methodology"] .field-caption {
  font-size: 14px;
}

[data-builder-panel="methodology"] select,
[data-builder-panel="methodology"] input[type="text"],
[data-builder-panel="methodology"] input[type="number"] {
  min-height: 2.2rem;
  padding: 0.4rem 0.55rem;
  font-size: 14px;
  font-weight: 500;
}

[data-builder-panel="methodology"] .stage-detail-head input[type="text"] {
  min-height: 2.4rem;
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 960px) {
  .methodology-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .stage-index {
    min-height: 0;
    border-right: 0;
    border-bottom: 0.5px solid var(--line);
  }

  .methodology-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .methodology-review,
  .methodology-review-bar {
    grid-column: 1 / -1;
  }

  .stage-detail-head {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------------
   Trazabilidad y Gobernanza. El reporte reutiliza la hoja del documento del
   proyecto (`.document-sheet`): quien lo lee reconoce el mismo formato oficio
   con que se entrega un resultado, y no aprende un segundo lenguaje visual
   para lo mismo. Lo propio de esta vista es la tabla de hechos: marca de tipo,
   momento, persona y qué hizo, en ese orden de lectura.
   --------------------------------------------------------------------------- */
/* La búsqueda es una consola: una barra de filtros de una línea y una tabla. La caja de
   filtros anterior ocupaba un tercio del alto antes del primer resultado, y las tarjetas
   apiladas no permitían comparar fechas entre proyectos porque nada quedaba alineado. */
.governance-header {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 26rem);
  gap: 2.5rem;
  align-items: end;
  justify-content: space-between;
  padding-bottom: 1.1rem;
  margin-bottom: 1.4rem;
  border-bottom: var(--border-width) solid var(--border);
}

.governance-header .eyebrow { margin-bottom: 0.4rem; }

.governance-header h1 {
  max-width: none;
  font-size: 28px;
  letter-spacing: -0.015em;
}

.governance-header-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.governance-bar {
  display: grid;
  grid-template-columns: minmax(15rem, 1.6fr) repeat(4, minmax(8rem, 1fr)) minmax(9rem, 1fr);
  gap: 0.5rem;
  align-items: center;
  padding: 0.55rem;
  background: var(--surface-default);
  border: var(--border-width) solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.governance-search-field {
  position: relative;
  display: flex;
  align-items: center;
}

/* La lupa se dibuja con el propio borde del elemento: un icono más que cargar por una
   figura de doce píxeles no se justifica. */
.governance-search-icon {
  position: absolute;
  left: 0.7rem;
  width: 0.72rem;
  height: 0.72rem;
  border: 1.6px solid var(--text-icon-muted);
  border-radius: 50%;
}

.governance-search-icon::after {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: 0.5rem;
  width: 0.42rem;
  height: 1.6px;
  background: var(--text-icon-muted);
  transform: rotate(45deg);
}

.governance-search-field input {
  width: 100%;
  min-height: 2.35rem;
  padding: 0 0.7rem 0 2rem;
  font-size: 13px;
}

.governance-bar select {
  min-height: 2.35rem;
  max-width: 100%;
  padding: 0 0.55rem;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
}

/* El orden no acota nada: se distingue del resto para no leerse como un filtro más. */
.governance-bar select.governance-sort {
  color: var(--brand-primary);
  background: var(--surface-default);
  border-style: dashed;
}

.governance-applied {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 0.9rem 0 0.65rem;
}

.governance-result-count {
  margin-right: 0.35rem;
  color: var(--text);
  font-size: 13px;
}

.governance-chips {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  align-items: center;
}

.governance-chip {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  padding: 0.22rem 0.3rem 0.22rem 0.6rem;
  color: var(--brand-primary);
  background: var(--surface-selected);
  border: var(--border-width) solid #C9D3DF;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
}

.governance-chip button {
  padding: 0 0.22rem;
  color: inherit;
  background: transparent;
  border: 0;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.governance-clear {
  margin-left: auto;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}

.governance-table {
  overflow: hidden;
  background: var(--surface-default);
  border: var(--border-width) solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.governance-table[hidden] { display: none; }

/* Reparto fijo de columnas: con el reparto automatico el nombre del proyecto —lo unico
   que no se puede abreviar— quedaba mas angosto que las columnas de cotejo. Aqui las de
   la derecha declaran su ancho y el proyecto se queda con todo lo que sobra. */
.governance-table table {
  table-layout: fixed;
  font-size: 13px;
}

.governance-table thead th {
  padding: 0.6rem 1rem;
  color: var(--text-muted);
  background: var(--surface-subtle);
  border-bottom: var(--border-width) solid var(--border);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
}

.governance-table tbody td {
  padding: 0.62rem 1rem;
  border-bottom: var(--border-width) solid var(--border-row);
}

.governance-table tbody tr { cursor: pointer; }

.governance-table tbody tr:hover td,
.governance-table tbody tr:focus-within td {
  background: var(--surface-hover);
}

/* El tipo de registro se marca con una barra al inicio de la fila en vez de una columna:
   distingue proyecto, instrumento y evaluación sin restar ancho a lo que se lee. */
.governance-table tbody td:first-child {
  padding-left: 0.9rem;
  border-left: 3px solid var(--accent-azure);
}

.governance-table tbody tr[data-kind="instrument"] td:first-child {
  border-left-color: var(--accent-teal);
}

.governance-table tbody tr[data-kind="application"] td:first-child {
  border-left-color: var(--accent-bronze);
}

.governance-table tbody tr.is-test td:first-child {
  border-left-color: var(--text-icon-muted);
}

.governance-project strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}

.governance-project small {
  display: block;
  margin-top: 0.15rem;
  color: var(--text-muted);
  font-size: 12px;
}

/* Tipo e institución son datos de cotejo, no titulares: mismo cuerpo pequeño y color
   secundario para que la vista siga cayendo primero en el nombre del proyecto. */
.governance-kind,
.governance-institution {
  color: var(--text-secondary);
  font-size: 12px;
}

.governance-kind { white-space: nowrap; }

.governance-test {
  display: inline-block;
  padding: 0.06rem 0.36rem;
  color: var(--text-secondary);
  background: var(--border-row);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.1em;
}

.governance-person {
  color: var(--text-body);
  font-weight: 500;
}

.governance-intervened {
  display: block;
  margin-top: 0.1rem;
  color: var(--accent-brick);
  font-size: 11px;
  font-weight: 500;
}

.governance-date {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.governance-date-empty { color: var(--text-icon-muted); }

/* Las columnas de la derecha llevan ancho propio: son el dato que se compara entre filas
   y no pueden encogerse porque el nombre de un proyecto sea largo. */
.governance-col-kind { width: 10rem; }
.governance-col-institution { width: 11.5rem; }
.governance-col-person { width: 10.5rem; }
.governance-col-date { width: 8rem; }
.governance-col-status { width: 7.5rem; }
.governance-col-open { width: 2.5rem; }

.governance-state {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.2rem 0.5rem 0.2rem 0.42rem;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.governance-state::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  background: currentcolor;
  border-radius: 50%;
}

.governance-state[data-state="closed"] {
  color: var(--success-on-white);
  background: var(--tint-success);
}

.governance-state[data-state="running"] { color: #1B4A7E; background: var(--tint-info); }
.governance-state[data-state="draft"] { color: var(--text-muted); background: var(--border-row); }

.governance-go {
  color: var(--text-icon-muted);
  font-size: 18px;
  text-align: center;
}

/* La flecha es el control que el teclado alcanza; la fila sigue abriendo con el puntero. */
.governance-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
}

.governance-table tbody tr:hover .governance-go { color: var(--brand-primary); }

.governance-foot {
  margin: 0.8rem 0 0;
  color: var(--text-icon-muted);
  font-size: 12px;
}

.trace-report-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 52rem);
  margin: 0 auto 1rem;
}

.trace-sheet {
  color: var(--text-body);
  font-size: 14px;
}

.trace-sheet .eyebrow {
  color: var(--text-muted);
}

.trace-subject {
  margin: 0.35rem 0 0;
  color: var(--text-body);
  font-size: 18px;
  font-weight: 500;
}

.trace-folio {
  margin: 0.5rem 0 0;
  color: var(--text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.trace-block {
  margin-bottom: 2.2rem;
}

.trace-block h2 {
  margin: 0 0 0.9rem;
  padding-bottom: 0.35rem;
  color: var(--brand-primary);
  border-bottom: 0.5px solid var(--border);
  font-size: 16px;
}

.trace-block h3 {
  margin: 1.4rem 0 0.5rem;
  color: var(--brand-primary);
  font-size: 14px;
}

.trace-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.9rem 1.5rem;
  margin: 0;
}

.trace-facts dt {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.trace-facts dd {
  margin: 0.15rem 0 0;
  color: var(--text);
  font-weight: 500;
}

.trace-facts small {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 400;
}

.trace-team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trace-team li {
  padding: 0.4rem 0.6rem;
  background: var(--surface-subtle);
  border-left: 0.2rem solid var(--brand-secondary);
}

.trace-team small {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
}

.trace-stage {
  margin-bottom: 1.6rem;
}

.trace-stage-head {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.3rem;
  border-bottom: 0.5px solid var(--border-row);
}

.trace-stage-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
}

/* La tabla es ancha por naturaleza: se desplaza dentro de la hoja en vez de
   empujar la página entera. */
.trace-entries {
  overflow-x: auto;
  margin-top: 0.6rem;
}

.trace-entries table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.trace-entries thead th {
  padding: 0.4rem 0.6rem;
  color: var(--text-inverse);
  text-align: left;
  background: var(--brand-primary-deep);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.trace-entries tbody td {
  padding: 0.45rem 0.6rem;
  vertical-align: top;
  border-bottom: 0.5px solid var(--border-row);
}

.trace-entries tbody tr:last-child td {
  border-bottom: 0;
}

.trace-entries small {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
}

.trace-when {
  width: 11rem;
  color: var(--text-secondary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Marca de tipo: distingue de un vistazo una aprobación de una corrección a mano
   sin agregar una columna de texto que nadie leería entera. */
.trace-kind {
  width: 0.35rem;
  padding: 0 !important;
  background: var(--border-card);
}

.trace-kind[data-kind="approval"],
.trace-kind[data-kind="review"] {
  background: var(--success);
}

.trace-kind[data-kind="manual_edit"] {
  background: var(--warning);
}

.trace-kind[data-kind="execution"] {
  background: var(--brand-secondary);
}

.trace-kind[data-kind="lifecycle"],
.trace-kind[data-kind="start"] {
  background: var(--brand-primary);
}

.trace-intervened {
  color: #6B4B00 !important;
  font-weight: 500;
}

.trace-closures {
  margin: 0;
  padding: 0;
  list-style: none;
}

.trace-closures li {
  padding: 0.4rem 0.7rem;
  border-left: 0.2rem solid var(--brand-primary);
  background: var(--surface-subtle);
}

.trace-closures li + li {
  margin-top: 0.35rem;
}

.trace-closures small {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
}

.trace-warning {
  margin: 0 0 1.2rem;
  padding: 0.7rem 0.9rem;
  background: var(--tint-warning);
  border-left: 0.25rem solid var(--warning);
  font-size: 14px;
}

.trace-none {
  margin: 0.4rem 0 0;
  color: var(--text-muted);
  font-size: 14px;
}

.trace-note {
  margin: 1rem 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
}

/* El constructor de evaluadores muestra dos trabajos humanos, no el valor técnico de phase. */
.stage-phase-group {
  margin-bottom: 1rem;
  background: var(--surface-default);
}

.stage-phase-heading {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.55rem;
  color: var(--brand-primary);
  background: var(--surface-default);
  border-bottom: 0.5px solid var(--border);
}

.stage-phase-heading strong,
.stage-phase-heading small {
  display: block;
}

.stage-phase-heading small {
  margin-top: 0.2rem;
  color: var(--text-muted);
  font-size: 13px;
}

.stage-phase-heading strong {
  color: var(--brand-primary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.stage-phase-add {
  display: inline-grid;
  place-items: center;
  width: 22px;
  min-width: 22px;
  height: 22px;
  padding: 0;
  color: var(--brand-primary);
  background: var(--surface-default);
  border: 0.5px solid var(--border-input);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
}

.stage-phase-items .stage-index-item {
  border-left: 0;
  border-right: 0;
}

.stage-phase-empty {
  margin: 0;
  padding: 0.8rem;
  color: var(--text-muted);
  font-size: 14px;
}

.instrument-output-choice,
.instrument-application-note {
  margin-top: 0.8rem;
}

/* Un lote se entiende como una lista breve de casos. Cada tarjeta agrupa los anexos que
   terminarán en una única evaluación, sin mostrar los proyectos internos que la sostienen. */
.evaluation-dialog {
  width: min(46rem, calc(100vw - 2rem));
}

.evaluation-case-list {
  display: grid;
  gap: 0.65rem;
  max-height: min(24rem, 48vh);
  margin: 0.8rem 0;
  overflow-y: auto;
}

.evaluation-case-card {
  padding: 0.8rem;
  border: 0.5px solid var(--border);
  background: var(--surface-subtle);
}

.evaluation-case-card[data-status="error"] {
  border-left: 0.25rem solid var(--danger);
}

.evaluation-case-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}

.evaluation-case-heading input {
  min-width: 0;
  font-weight: 500;
}

.evaluation-case-card ul {
  margin: 0.55rem 0 0;
  padding-left: 1.25rem;
  color: var(--text-secondary);
  font-size: 14px;
}

.evaluation-case-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2rem;
}

.evaluation-case-file > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.evaluation-case-file .text-button {
  flex: 0 0 auto;
}

.evaluation-case-actions {
  margin-top: 0.55rem;
}

.evaluation-case-error {
  margin: 0.55rem 0 0;
  color: var(--danger);
  font-size: 14px;
}

.evaluation-summary {
  margin: 0.8rem 0 0;
  padding: 0.7rem 0.8rem;
  border-left: 0.25rem solid var(--brand-secondary);
  background: var(--surface-subtle);
  font-weight: 500;
}

/* Imprimir el reporte entrega el mismo documento que se ve en pantalla: la hoja
   sola, sin armazón de administración ni controles que no existen en papel. */
@media print {
  #governance-view .trace-report-actions,
  #governance-search-panel {
    display: none;
  }

  body:has(#governance-report-panel:not([hidden])) #app-topbar,
  body:has(#governance-report-panel:not([hidden])) #impersonation-banner,
  body:has(#governance-report-panel:not([hidden])) #communication-banner {
    display: none;
  }

  .trace-sheet {
    width: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
  }

  .trace-entries {
    overflow-x: visible;
  }

  .trace-stage {
    break-inside: avoid;
  }
}

@media (max-width: 960px) {
  .governance-header {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.7rem;
  }

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

  /* La tabla no se reordena en columnas estrechas: los datos son fechas y estados que
     solo sirven alineados. Se desplaza en horizontal dentro de su propio marco. */
  .governance-table { overflow-x: auto; }
  .governance-table table { min-width: 72rem; }

  .trace-report-actions {
    flex-wrap: wrap;
  }

  .stage-phase-heading,
  .evaluation-case-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .stage-phase-heading {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .governance-bar { grid-template-columns: minmax(0, 1fr); }
  .governance-clear { margin-left: 0; }
}

/* ── Consola de instituciones ────────────────────────────────────────────────
   El directorio y la ficha de la institución comparten pantalla: el riel de la
   izquierda es la lista, el panel de la derecha es la institución abierta y su
   detalle se reparte en pestañas. Superficies planas, sin degradado ni tarjeta
   flotante: el énfasis lo llevan el borde y el color de selección. */
.console {
  display: grid;
  grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.console-rail {
  display: flex;
  position: sticky;
  top: 1rem;
  flex-direction: column;
  max-height: calc(100vh - 2rem);
  overflow: hidden;
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: 10px;
}

.console-rail-head {
  display: grid;
  gap: 0.55rem;
  padding: 1rem 1.1rem;
  border-bottom: 0.5px solid var(--line);
}

.console-rail-head .search-field input {
  width: 100%;
}

.console-rail-counts {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.console-rail-counts strong {
  color: var(--text);
}

.console-rail-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

.console-rail-item {
  display: grid;
  gap: 0.25rem;
  width: 100%;
  margin: 0;
  padding: 0.8rem 1.1rem;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid var(--border-row);
  border-radius: 0;
  cursor: pointer;
}

.console-rail-item:last-child {
  border-bottom: 0;
}

.console-rail-item:hover {
  background: var(--surface-hover);
}

/* La institución abierta se marca con la franja celeste de selección que el sistema
   usa en toda la plataforma, no con una sombra ni un borde completo. */
.console-rail-item.is-selected {
  background: var(--surface-hover);
  box-shadow: inset 3px 0 0 var(--action);
}

.console-rail-item strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.console-rail-item small {
  color: var(--muted);
  font-size: 11px;
}

.console-rail-item-foot {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.15rem;
}

.console-rail-item-foot small {
  font-variant-numeric: tabular-nums;
}

.console-rail .empty-state {
  padding: 1.5rem 1.1rem;
}

.console-detail {
  min-width: 0;
  overflow: hidden;
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: 10px;
}

.console-placeholder {
  padding: 4rem 2rem;
  color: var(--muted);
  text-align: center;
}

.console-placeholder strong {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--text);
  font-size: 16px;
}

.console-placeholder p {
  max-width: 32rem;
  margin: 0 auto;
  font-size: 13px;
}

.console-detail-head {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 1.25rem 1.35rem;
  border-bottom: 0.5px solid var(--line);
}

.console-detail-head h2 {
  margin: 0.15rem 0 0;
  color: var(--brand-primary);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.console-detail-head > div > p:last-child {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 12px;
}

.console-detail-head .button-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.console-tabs {
  display: flex;
  gap: 1.6rem;
  overflow-x: auto;
  padding: 0 1.35rem;
  border-bottom: 0.5px solid var(--line);
}

.console-tab {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0.85rem 0;
  color: var(--muted);
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-bottom: 2.6px solid transparent;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.console-tab:hover {
  color: var(--text);
  background: transparent;
}

.console-tab[aria-selected="true"] {
  color: var(--action);
  border-bottom-color: var(--action);
}

.console-tab-count {
  padding: 0.05rem 0.4rem;
  color: var(--text-secondary);
  background: var(--surface-disabled);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.console-tab[aria-selected="true"] .console-tab-count {
  color: var(--text-inverse);
  background: var(--action);
}

.console-panel {
  padding: 1.35rem;
}

.console-panel > .data-panel:last-child,
.console-panel > section:last-child {
  margin-bottom: 0;
}

.console-panel .quota-grid {
  /* Cuatro medidores —usuarios, proyectos, evaluaciones y vigencia— caben en una fila en
     escritorio y se reparten en dos filas antes que encogerse hasta ser ilegibles. */
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.console-panel .quota-grid small {
  display: block;
  margin-top: 0.45rem;
}

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

.console-quick {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}

.quick-action {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0.5rem 0.85rem;
  color: var(--action);
  background: var(--paper);
  border: 0.5px solid var(--border-input);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
}

.quick-action:hover {
  background: var(--surface-hover);
}

/* Bajo 1100px el riel deja de ser una columna y pasa a ser una lista corta sobre la
   ficha: en ese ancho, dos columnas dejarían la tabla de usuarios sin espacio. */
@media (max-width: 1100px) {
  .console {
    grid-template-columns: minmax(0, 1fr);
  }

  .console-rail {
    position: static;
    max-height: 24rem;
  }
}

@media (max-width: 640px) {
  .console-detail-head,
  .console-panel {
    padding: 1rem;
  }

  .console-tabs {
    gap: 1.1rem;
    padding: 0 1rem;
  }
}

/* ── Reparto de créditos ─────────────────────────────────────────────────────
   Tres segmentos y un solo orden en toda la pantalla: usado · reservado · libre.
   El número grande es siempre lo libre, que es la cifra con la que se decide. */
.credit-fund {
  padding: 1.2rem 1.3rem;
  margin-bottom: 1.2rem;
  background: var(--surface-subtle);
  border: 0.5px solid var(--line);
  border-radius: 10px;
}

.credit-fund-head h3 {
  margin: 0;
  color: var(--brand-primary);
  font-size: 16px;
  font-weight: 500;
}

.credit-fund-head p {
  max-width: 58ch;
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 12px;
}

.credit-meters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1.1rem 0;
}

.credit-meters article {
  padding: 0.9rem 1rem;
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: 8px;
}

.credit-meter-title {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.credit-meters strong {
  display: block;
  margin-top: 0.2rem;
  color: var(--text);
  font-size: 28px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.credit-meters article > small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.credit-track {
  display: flex;
  height: 0.55rem;
  margin: 0.7rem 0 0.6rem;
  overflow: hidden;
  background: #EEF1F5;
  border-radius: 8px;
}

.credit-seg {
  display: block;
  height: 100%;
  width: 0;
}

.credit-seg-used { background: var(--action); }
.credit-seg-held { background: #C3D3E6; }
.credit-seg-free { background: #C3D3E6; }

.credit-legend {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  list-style: none;
}

.credit-legend li {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}

.credit-legend b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.credit-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  flex: none;
}

.credit-fund-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

.credit-source {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.credit-reserves {
  margin-bottom: 1.2rem;
}

.credit-amount-cell strong {
  display: block;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.credit-amount-cell small {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.credit-advanced {
  padding: 0.9rem 1.1rem;
  background: var(--paper);
  border: 0.5px solid var(--line);
  border-radius: 10px;
}

.credit-advanced > summary {
  color: var(--action);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.credit-advanced-copy {
  max-width: 62ch;
  margin: 0.6rem 0 0.9rem;
  color: var(--muted);
  font-size: 12px;
}

/* ── Diálogo de movimiento ──────────────────────────────────────────────── */
.credit-dialog {
  width: min(36rem, calc(100% - 2rem));
}

.credit-route {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  color: var(--text-body);
  background: var(--tint-info);
  border-radius: var(--radius);
  font-size: 14px;
}

.credit-amounts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.credit-amount {
  padding: 0.9rem;
  border: 0.5px solid var(--border-input);
  border-radius: var(--radius);
}

.credit-amount[data-state="empty"] {
  background: var(--surface-disabled);
  border-style: dashed;
}

.credit-amount > label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}

.credit-stepper {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.credit-stepper input {
  min-height: 2.6rem;
  width: 100%;
  min-width: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.credit-step {
  width: 2.6rem;
  min-width: 2.6rem;
  height: 2.6rem;
  margin: 0;
  padding: 0;
  color: var(--action);
  background: var(--paper);
  border: 0.5px solid var(--border-input);
  border-radius: var(--radius);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  flex: none;
}

.credit-step:hover {
  background: var(--surface-hover);
}

.credit-max {
  margin-top: 0.5rem;
  padding: 0;
  font-size: 12px;
}

.credit-preview {
  margin: 0.55rem 0 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}

.credit-preview[data-tone="muted"] {
  color: var(--muted);
}

/* Cuando hay una cantidad escrita, la resta deja de ser texto de apoyo y pasa a ser la
   confirmación de lo que va a ocurrir. */
.credit-preview[data-tone="active"] {
  color: var(--action);
  font-weight: 500;
}

.credit-note {
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.85rem;
  color: #6B4B00;
  background: var(--tint-warning);
  border-radius: var(--radius);
  font-size: 12px;
}

@media (max-width: 640px) {
  .credit-fund {
    padding: 1rem;
  }

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

/* ── Formularios modales SIGPLAN ────────────────────────────────────────────
   Capa visual común para todos los formularios. La estructura HTML y los
   eventos permanecen intactos: este bloque normaliza únicamente geometría,
   jerarquía, campos y acciones según el componente canónico de docs/06. */
.form-dialog {
  width: min(43.75rem, 98vw);
  max-width: 98vw;
  max-height: 90vh;
  padding: 0;
  overflow: hidden;
  color: var(--text-body);
  background: var(--surface-default);
  border: 0;
  border-radius: 8px;
  box-shadow: var(--shadow-modal);
  font-family: var(--sans);
  animation: sigplan-modal-in 230ms ease-out;
}

.form-dialog::backdrop {
  background: rgb(10 28 51 / 72%);
  backdrop-filter: none;
}

.form-dialog > form {
  display: flex;
  flex-direction: column;
  gap: 13px;
  width: 100%;
  max-height: 90vh;
  margin: 0;
  padding: 0 48px 32px;
  overflow-y: auto;
}

.form-dialog .dialog-heading {
  position: sticky;
  z-index: 2;
  top: 0;
  flex: none;
  align-items: center;
  min-height: 50px;
  margin: 0 0 27px;
  padding: 12px 24px;
  color: var(--text-inverse);
  background: var(--action);
}

.form-dialog > form > .dialog-heading {
  margin-right: -48px;
  margin-left: -48px;
}

.form-dialog .dialog-heading > div {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

/* La matriz de nueve puntos replica el identificador visual de la cabecera de
   los formularios de referencia sin introducir un recurso externo. */
.form-dialog .dialog-heading > div::before {
  width: 3px;
  height: 3px;
  color: currentcolor;
  background: currentcolor;
  box-shadow: 5px 0 currentcolor, 10px 0 currentcolor, 0 5px currentcolor, 5px 5px currentcolor, 10px 5px currentcolor, 0 10px currentcolor, 5px 10px currentcolor, 10px 10px currentcolor;
  content: "";
}

.form-dialog .dialog-heading .eyebrow {
  display: none;
}

.form-dialog .dialog-heading h2 {
  grid-column: 2;
  overflow: hidden;
  margin: 0;
  color: var(--text-inverse);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-dialog .dialog-close {
  display: grid;
  flex: none;
  width: 36px;
  height: 36px;
  min-height: 0;
  padding: 0;
  place-items: center;
  color: #FFFFFF;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
}

.form-dialog .dialog-close:hover {
  color: var(--text-inverse);
  background: rgb(11 37 69 / 8%);
}

.form-dialog .field-group,
.form-dialog .two-field-row,
.form-dialog .checkbox-field,
.form-dialog .dialog-actions {
  margin-right: 0;
  margin-left: 0;
}

.form-dialog .dialog-copy {
  margin: 0;
  padding: 0;
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.6;
}

.form-dialog label,
.form-dialog legend {
  color: var(--text-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
}

/* La escala de pesos del modal. Adentro conviven piezas que vienen de pantallas distintas y
   cada una traía el suyo —600, 700, 750, 900—, de modo que el mismo diálogo mostraba cuatro
   grados de negrita sin que ninguno significara algo distinto. Se unifica: 600 para lo que
   titula o acciona, normal para lo que se lee. Fuera del modal cada pantalla conserva su
   escala; esto no sale de `.form-dialog`. */
.form-dialog strong,
.form-dialog h3,
.form-dialog h4,
.form-dialog dt,
.form-dialog .eyebrow,
.form-dialog .text-button,
.form-dialog .tertiary-button,
.form-dialog .secondary-button,
.form-dialog .credit-step {
  font-weight: 500;
}

/* El encabezado del modal ya renuncia a la tipografía de display: un subtítulo dentro del
   mismo diálogo no puede volver a ella. */
.form-dialog h3,
.form-dialog h4 {
  font-family: var(--sans);
}

/* Un párrafo dentro de un modal es contenido: se lee, no se destaca. El rótulo superior es la
   excepción y además va oculto en estos diálogos. */
.form-dialog p:not(.eyebrow) {
  font-weight: 400;
}

/* Un <label> no siempre rotula un campo: a veces envuelve una fila entera —una alternativa,
   un elemento marcable— y entonces su peso baja al texto que contiene y lo deja en negrita.
   Dentro de un modal el contenido va en peso normal; la negrita queda para lo que se declaró
   título, que es lo único que sigue siendo <strong>. */
.form-dialog label div,
.form-dialog label p,
.form-dialog label small,
.form-dialog label li,
.form-dialog label textarea,
.form-dialog label input,
.form-dialog label select {
  font-weight: 400;
}

.form-dialog input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.form-dialog textarea,
.form-dialog select {
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  color: var(--text-body);
  background: var(--surface-default);
  border: var(--border-width) solid var(--border-input);
  border-radius: 8px;
}

.form-dialog textarea {
  line-height: 1.5;
}

.form-dialog .field-group small,
.form-dialog .checkbox-field small {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.form-dialog .dialog-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-top: 27px;
  padding: 0;
}

.form-dialog .dialog-actions .primary-button,
.form-dialog .dialog-actions .secondary-button,
.form-dialog .dialog-actions .danger-button {
  width: auto;
  min-width: 9.25rem;
  min-height: 49px;
  margin: 0;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}

.form-dialog .dialog-actions .primary-button {
  justify-content: center;
  color: var(--text-inverse);
  background: var(--success-strong);
  border-color: var(--success-strong);
  box-shadow: none;
}

.form-dialog .dialog-actions .primary-button:hover {
  color: var(--text-inverse);
  background: var(--success-hover);
  border-color: var(--success-hover);
  box-shadow: none;
}

.form-dialog .dialog-actions .secondary-button {
  color: var(--action);
  background: var(--tint-info);
  border-color: transparent;
  box-shadow: none;
}

.form-dialog .dialog-actions .secondary-button:hover {
  color: var(--action-hover);
  background: var(--surface-hover);
  border-color: transparent;
  box-shadow: none;
}

/* Las variantes sin <form> conservan el mismo ritmo interno. */
.form-dialog > .identity-card,
.form-dialog > .dialog-copy,
.form-dialog > .comparison-warning,
.form-dialog > .table-scroll,
.form-dialog > .empty-state,
.form-dialog > .dialog-actions {
  margin-right: 48px;
  margin-left: 48px;
}

.form-dialog > .dialog-actions {
  margin-bottom: 32px;
}

.account-dialog .dialog-actions {
  justify-content: flex-end;
}

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

@media (max-width: 700px) {
  .form-dialog {
    width: 98vw;
    max-height: 96vh;
  }

  .form-dialog > form {
    max-height: 96vh;
    padding-right: 18px;
    padding-bottom: 18px;
    padding-left: 18px;
  }

  .form-dialog > form > .dialog-heading {
    margin-right: -18px;
    margin-left: -18px;
  }

  .form-dialog .dialog-heading {
    margin-bottom: 5px;
    padding: 12px 18px;
  }

  .form-dialog .two-field-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-dialog .dialog-actions {
    flex-direction: column-reverse;
    gap: 12px;
    align-items: stretch;
    margin-top: 5px;
  }

  .form-dialog .dialog-actions .primary-button,
  .form-dialog .dialog-actions .secondary-button,
  .form-dialog .dialog-actions .danger-button {
    width: 100%;
  }

  .form-dialog > .identity-card,
  .form-dialog > .dialog-copy,
  .form-dialog > .comparison-warning,
  .form-dialog > .table-scroll,
  .form-dialog > .empty-state,
  .form-dialog > .dialog-actions {
    margin-right: 18px;
    margin-left: 18px;
  }
}

/* ── Formulario guiado del proyecto y modales del asistente ─────────────────
   #step-surface no es un <dialog>: tiene su propio flujo y por eso necesita la
   misma identidad de formulario sin heredar reglas que alteren sus estados de
   revisión o espera. Todo lo que un paso comparte con los formularios modales
   —velo, tarjeta, barra azul con el rótulo de la etapa, cuerpo blanco, campos,
   avisos y acciones— se declara para toda la superficie: revisar una propuesta
   y responder una pregunta son el mismo objeto de la interfaz y ya no pueden
   verse como dos productos distintos. Tras el selector del formulario queda
   solo lo propio de la pregunta guiada. Eventos, validación y carrusel
   permanecen sin cambios. */
.step-surface {
  padding: 1.5rem;
  background: rgb(10 28 51 / 72%);
  backdrop-filter: none;
}

.step-surface .step-surface-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: min(90vh, calc(100vh - 7.25rem));
  padding: 0;
  overflow: hidden;
  color: var(--text-body);
  background: var(--surface-default);
  border: 0;
  border-radius: 8px;
  box-shadow: var(--shadow-modal);
  font-family: var(--sans);
  animation: sigplan-modal-in 230ms ease-out;
}

/* Revisar una propuesta necesita ancho —hay listas, tablas y texto largo—; una pregunta
   no: pasada cierta medida la línea deja de leerse de un tirón. */
.step-surface:has(#project-stage-form:not([hidden])) .step-surface-inner {
  width: min(43.75rem, 98vw);
}

/* La barra encabeza todos los pasos, no solo el formulario: lleva el rótulo de la etapa
   —o el título, si no hubiera uno distinto— y la salida. Una barra sin texto se leería
   como un error, así que nunca se abre vacía. */
.step-modal-bar {
  display: flex;
  flex: none;
  gap: 12px;
  align-items: center;
  min-height: 50px;
  padding: 12px 24px;
  color: var(--text-inverse);
  background: var(--action);
}

.step-modal-bar strong {
  overflow: hidden;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El nombre manda en la barra, y el avance lo acompaña al otro extremo de la misma línea:
   el cuerpo blanco queda entero para la pregunta. */
.step-modal-bar .step-progress-chip {
  display: inline-flex;
  margin: 0 0 0 auto;
  padding: 0.2rem 0.6rem;
  color: var(--text-inverse);
  background: rgb(255 255 255 / 18%);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.step-modal-bar .step-progress-chip[hidden] {
  display: none;
}

/* Salir es una decisión de la persona, no un accidente: en el formulario la equis pregunta
   antes qué hacer con lo escrito, y en los demás pasos devuelve la hoja. Cuando el paso no
   tiene vuelta —falta el documento que la etapa necesita— no se muestra. */
.step-modal-close {
  display: flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--text-inverse);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.step-modal-close:hover {
  background: rgb(255 255 255 / 18%);
}

.step-modal-close[hidden] {
  display: none;
}

.step-modal-bar .step-progress-chip[hidden] + .step-modal-close {
  margin-left: auto;
}

/* Matriz visual de nueve puntos, la misma que encabeza los formularios modales. */
.step-modal-mark {
  width: 3px;
  height: 3px;
  color: currentcolor;
  background: currentcolor;
  box-shadow: 5px 0 currentcolor, 10px 0 currentcolor, 0 5px currentcolor, 5px 5px currentcolor, 10px 5px currentcolor, 0 10px currentcolor, 5px 10px currentcolor, 10px 10px currentcolor;
}

.step-surface .step-modal-body {
  min-height: 0;
  padding: 40px 48px 32px;
  overflow-y: auto;
}

/* El cuerpo ya trae el margen del modal: el panel que se le entrega no vuelve a acolcharse. */
.step-surface .project-action-panel {
  padding: 0;
}

.step-surface .step-topline {
  margin-bottom: 1.25rem;
}

.step-surface .step-heading {
  gap: 0.55rem;
}

/* El título del cuerpo nombra lo que hay abierto —la acción que se revisa, el documento que
   se pide—. Solo aparece cuando dice algo que la barra no dice: dentro del formulario, nunca,
   porque ahí el nombre configurado ya encabeza el modal. */
.step-surface .step-heading h2 {
  color: var(--text);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
}

.step-surface .step-copy {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.55;
}

.step-surface:has(#project-stage-form:not([hidden])) .step-heading h2,
.step-surface:has(#project-stage-form:not([hidden])) .step-copy {
  display: none;
}

#project-stage-form {
  gap: 13px;
  margin: 0;
}

.step-surface:has(#project-stage-form:not([hidden])) .guided-form-carousel {
  min-height: 11rem;
  padding: 0;
}

.step-surface:has(#project-stage-form:not([hidden])) .guided-form-step {
  min-height: 9rem;
}

/* Campos: mismos altos, bordes y ayudas en todo el asistente. La pregunta guiada es la única
   que agranda su etiqueta, porque ahí la etiqueta es la pregunta. */
.step-surface .field-group > label {
  color: var(--text-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
}

.step-surface:has(#project-stage-form:not([hidden])) .guided-form-step label {
  color: var(--text-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
}

.step-surface .field-group > input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.step-surface .field-group > textarea,
.step-surface .field-group > select {
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  color: var(--text-body);
  background: var(--surface-default);
  border: var(--border-width) solid var(--border-input);
  border-radius: 8px;
}

.step-surface .field-group > small {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.step-surface .territory-picker {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.75rem;
}

.step-surface .territory-picker > label {
  color: var(--text-body);
  font-size: 14px;
  font-weight: 500;
}

.step-surface .territory-picker > input {
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  color: var(--text-body);
  background: var(--surface-default);
  border: var(--border-width) solid var(--border-input);
  border-radius: 8px;
}

.step-surface .territory-picker-results,
.step-surface .territory-picker-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.step-surface .territory-picker-selected > p,
.step-surface .territory-picker-status {
  flex-basis: 100%;
  margin: 0;
  color: var(--text-muted);
}

.step-surface .territory-picker-value[readonly] {
  color: var(--text-muted);
  background: var(--surface-muted);
}

.step-surface .local-evidence-collection {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
}

.step-surface .local-evidence-intro,
.step-surface .local-evidence-empty {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.55;
}

.step-surface .local-evidence-error {
  margin: 0.7rem 0 0;
  color: var(--danger);
  font-weight: 500;
}

.step-surface .local-evidence-card {
  padding: 0.8rem 0.95rem;
  background: var(--surface-subtle);
  border: var(--border-width) solid var(--border-card);
  border-radius: var(--radius-lg);
}

.step-surface .local-evidence-card > summary {
  cursor: pointer;
  font-weight: 500;
  line-height: 1.4;
}

.step-surface .local-evidence-meta,
.step-surface .local-evidence-purpose,
.step-surface .local-evidence-closing {
  margin: 0.65rem 0 0;
  line-height: 1.5;
}

.step-surface .local-evidence-meta {
  color: var(--text-secondary);
  font-size: 14px;
}

.step-surface .local-evidence-closing {
  padding-left: 0.7rem;
  border-left: 3px solid var(--brand-accent);
}

.step-surface .local-evidence-fields {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.8rem;
}

.step-surface .local-evidence-input {
  display: grid;
  gap: 0.35rem;
  color: var(--text-body);
  font-weight: 500;
}

.step-surface .local-evidence-input input:not([type="checkbox"]),
.step-surface .local-evidence-input select,
.step-surface .local-evidence-input textarea {
  width: 100%;
  font: inherit;
  font-weight: 400;
}

.step-surface .local-evidence-toggle {
  grid-template-columns: auto 1fr;
  align-items: center;
  margin-top: 0.75rem;
}

.step-surface .local-evidence-toggle > span {
  grid-row: 1;
  grid-column: 2;
}

.step-surface .local-evidence-toggle > input {
  grid-row: 1;
  grid-column: 1;
}

/* Aviso de instrucción. Lo escribió quien configuró el paso —la ayuda de un campo en el
   formulario, la guía de la metodología en la revisión— y por eso se ve igual en los dos:
   es la misma voz hablando desde el mismo lugar. La ayuda del campo sigue asociada a su
   control por aria-describedby. */
.step-surface .field-disclaimer,
.step-surface .review-guidance {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 0.85rem 0.95rem;
  color: #6B4B00;
  background: #F5EEDC;
  border: 1.5px solid #E2D2A8;
  border-radius: 8px;
  box-shadow: none;
  font-size: 14px;
  font-style: italic;
  line-height: 1.45;
}

.step-surface .field-disclaimer {
  margin-top: 0.8rem;
}

.step-surface .review-guidance {
  margin: 0 0 1.2rem;
}

.step-surface .field-disclaimer-icon,
.step-surface .review-guidance::before {
  display: grid;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  place-items: center;
  color: #6B4B00;
  background: #F5EEDC;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  line-height: 1;
}

.step-surface .review-guidance::before {
  content: "i";
}

.step-surface .field-disclaimer-copy {
  min-width: 0;
  color: inherit;
  font-size: 14px;
  font-style: italic;
  line-height: 1.45;
  white-space: pre-line;
}

/* Pie de acciones. Da igual si el paso pregunta, pide un archivo o presenta una propuesta:
   el botón que hace avanzar es el mismo objeto verde de los formularios, y el que ofrece la
   alternativa el mismo azul plano. */
.step-surface .step-actions,
.step-surface .guided-review-panel .guided-result-actions,
.step-surface .guided-edit-area .dialog-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 1.2rem;
}

.step-surface:has(#project-stage-form:not([hidden])) .step-actions {
  justify-content: space-between;
}

.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 {
  width: auto;
  min-width: 9.25rem;
  min-height: 49px;
  margin: 0;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}

.step-surface .step-actions .primary-button,
.step-surface .guided-result-actions .primary-button,
.step-surface .guided-edit-area .dialog-actions .primary-button {
  justify-content: center;
  color: var(--text-inverse);
  background: var(--success-strong);
  border-color: var(--success-strong);
  box-shadow: none;
}

.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(--text-inverse);
  background: var(--success-hover);
  border-color: var(--success-hover);
  box-shadow: none;
}

.step-surface .step-actions .secondary-button,
.step-surface .step-actions .tertiary-button,
.step-surface .guided-result-actions .secondary-button,
.step-surface .guided-result-actions .tertiary-button,
.step-surface .guided-edit-area .dialog-actions .secondary-button,
.step-surface .guided-edit-area .dialog-actions .tertiary-button {
  justify-content: center;
  color: var(--action);
  background: var(--tint-info);
  border-color: transparent;
  box-shadow: none;
}

.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-result-actions .tertiary-button:hover,
.step-surface .guided-edit-area .dialog-actions .secondary-button:hover,
.step-surface .guided-edit-area .dialog-actions .tertiary-button:hover {
  color: var(--action-hover);
  background: var(--surface-hover);
  border-color: transparent;
  box-shadow: none;
}

/* Continuar puede estar deshabilitado —falta guardar, falta elegir—: el verde no puede
   sobrevivir a eso o el botón mentiría sobre lo que se puede hacer. */
.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: var(--text-muted);
  background: var(--surface-disabled);
  border-color: var(--surface-disabled);
}

/* La misma escala de pesos que los formularios modales: el paso del asistente es un modal y no
   puede tener su propia idea de la negrita. 600 para lo que titula o acciona, normal para lo
   que se lee. El texto de la propuesta conserva aparte la serif del documento, porque ahí sí
   está mostrando documento. */
.step-surface strong,
.step-surface h3,
.step-surface h4,
.step-surface dt,
.step-surface summary,
.step-surface .text-button,
.step-surface .secondary-button,
.step-surface .tertiary-button {
  font-weight: 500;
}

.step-surface p {
  font-weight: 400;
}

/* Entrar a editar sigue siendo una acción secundaria del encabezado: se ve, no compite con
   el pie, y toma la misma forma que los demás controles del modal. */
.step-surface .review-edit-button {
  min-height: 40px;
  padding: 0.5rem 1.05rem;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
}

/* ── Revisión de fuentes ────────────────────────────────────────────────────
   Las evidencias se comparan en una tabla ancha, como en el diseño de referencia. El modal
   conserva la barra azul compartida, pero reparte el resto en tres zonas estables: contexto,
   contenido desplazable y decisiones. El desplazamiento horizontal pertenece a la tabla, no
   a toda la ventana; así el encabezado, la salida y las acciones nunca desaparecen. */
.step-surface.is-source-review .step-surface-inner {
  width: min(87.5rem, calc(100vw - 3rem));
  max-height: min(90vh, calc(100vh - 6rem));
  border: var(--border-width) solid var(--border-input);
  border-radius: 12px;
  box-shadow: none;
}

.step-surface.is-source-review .step-modal-bar {
  min-height: 58px;
  padding: 14px 24px;
}

.step-surface.is-source-review .step-modal-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

.step-surface.is-source-review .step-topline {
  flex: none;
  gap: 1rem;
  align-items: center;
  margin: 0;
  padding: 16px 24px;
  background: var(--surface-subtle);
  border-bottom: var(--border-width) solid var(--border-input);
}

.step-surface.is-source-review .step-heading h2 {
  font-size: 16px;
}

.step-surface.is-source-review .step-heading-actions {
  padding: 0;
}

.step-surface.is-source-review .project-action-panel {
  display: flex;
  min-width: 0;
  min-height: 0;
}

.step-surface .source-review-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.step-surface .source-review-panel > .review-guidance,
.step-surface .source-review-panel > .review-note:not(.review-guidance) {
  flex: none;
  margin: 18px 24px 0;
}

.step-surface .source-review-panel > .review-doc {
  flex: 0 1 auto;
  min-width: 0;
  margin: 18px 24px;
}

.step-surface .source-review-panel .review-doc-section {
  min-width: 0;
}

.step-surface .source-review-panel .review-doc-section > h3 {
  margin-bottom: 0.65rem;
}

.step-surface .source-review-panel .review-doc .table-scroll {
  max-height: min(46vh, 32rem);
  overflow: auto;
  border: var(--border-width) solid var(--border-card);
  border-radius: 8px;
}

.step-surface .source-review-panel .review-doc table {
  min-width: 42rem;
  table-layout: fixed;
  font-size: 13px;
}

.step-surface .source-review-panel .review-doc th {
  position: sticky;
  z-index: 1;
  top: 0;
  padding: 12px 14px;
  color: var(--text-inverse);
  background: var(--brand-primary-deep);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.step-surface .source-review-panel .review-doc td {
  padding: 12px 14px;
  overflow-wrap: anywhere;
  vertical-align: top;
}

.step-surface .source-review-panel .review-doc tbody tr:hover {
  background: var(--surface-hover);
}

/* Una búsqueda sin hallazgos sigue siendo un resultado comprensible. La caja ocupa solo el
   espacio que necesita y evita el gran vacío que hacía parecer que el modal no había cargado. */
.step-surface .source-review-panel .review-empty-state {
  display: grid;
  gap: 0.35rem;
  min-height: 10rem;
  padding: 2.25rem 1.5rem;
  place-content: center;
  text-align: center;
  background: var(--surface-subtle);
  border: var(--border-width) dashed var(--border-input);
  border-radius: 8px;
}

.step-surface .source-review-panel .review-empty-state::before {
  content: "i";
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0 auto 0.25rem;
  place-items: center;
  color: var(--brand-primary);
  background: var(--secondary-fixed, #C3D3E6);
  border-radius: 50%;
  font-weight: 500;
}

.step-surface .source-review-panel .review-empty-state strong {
  color: var(--text);
  font-size: 16px;
}

.step-surface .source-review-panel .review-empty-state p {
  max-width: 34rem;
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* En edición cada evidencia conserva sus controles reales, pero se organiza como una fila
   clara y adaptable. No se cambia ningún dato ni evento del editor. */
.step-surface .source-review-panel .guided-edit-area {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

.step-surface .source-review-panel .guided-edit-area[hidden] {
  display: none;
}

.step-surface .source-review-panel .guided-edit-area > .review-note {
  margin: 18px 24px 0;
}

.step-surface .source-review-panel .structured-editor {
  max-height: min(48vh, 34rem);
  padding: 18px 24px;
  overflow: auto;
  background: var(--surface-default);
  border: 0;
}

.step-surface .source-review-panel .structured-list {
  gap: 12px;
}

.step-surface .source-review-panel .structured-list-row {
  padding: 12px;
  background: var(--surface-default);
  border: var(--border-width) solid var(--border-card);
  border-left: 3px solid var(--action-secondary);
  border-radius: 8px;
}

.step-surface .source-review-panel .structured-list-row:hover {
  background: var(--surface-hover);
}

.step-surface .source-review-panel .structured-object {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 12px;
}

.step-surface .source-review-panel .guided-review-options {
  order: 2;
  margin: 0 24px 16px;
}

.step-surface .source-review-panel .guided-result-actions,
.step-surface .source-review-panel .guided-edit-area .dialog-actions {
  order: 3;
  flex: none;
  margin: 0;
  padding: 16px 24px;
  background: var(--surface-default);
  border-top: var(--border-width) solid var(--border-input);
}

@media (max-width: 700px) {
  .step-surface {
    inset: 3.5rem 0 0;
    padding: 0.5rem;
  }

  .step-surface .step-surface-inner {
    width: 100%;
    max-height: calc(100vh - 4.5rem);
    padding: 0;
  }

  .step-modal-bar {
    padding: 12px 18px;
  }

  .step-surface .step-modal-body {
    padding: 18px;
  }

  .step-surface.is-source-review .step-surface-inner {
    max-height: calc(100vh - 4.5rem);
    border-radius: 8px;
  }

  .step-surface.is-source-review .step-modal-body {
    padding: 0;
  }

  .step-surface.is-source-review .step-topline {
    padding: 14px 16px;
  }

  .step-surface .source-review-panel > .review-guidance,
  .step-surface .source-review-panel > .review-note:not(.review-guidance),
  .step-surface .source-review-panel > .review-doc,
  .step-surface .source-review-panel .guided-edit-area > .review-note {
    margin-right: 16px;
    margin-left: 16px;
  }

  .step-surface .source-review-panel .structured-editor,
  .step-surface .source-review-panel .guided-result-actions,
  .step-surface .source-review-panel .guided-edit-area .dialog-actions {
    padding-right: 16px;
    padding-left: 16px;
  }

  .step-surface .source-review-panel .guided-review-options {
    margin-right: 16px;
    margin-left: 16px;
  }

  /* En pantalla angosta el título y sus acciones dejan de disputarse la línea: el nombre de
     lo que está abierto se lee entero y los botones bajan debajo. */
  .step-surface .step-topline {
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  .step-surface .step-heading-actions {
    padding-top: 0;
  }

  .step-surface:has(#project-stage-form:not([hidden])) .guided-form-carousel,
  .step-surface:has(#project-stage-form:not([hidden])) .guided-form-step {
    min-height: 0;
  }

  .step-surface .step-actions,
  .step-surface .guided-review-panel .guided-result-actions,
  .step-surface .guided-edit-area .dialog-actions {
    flex-direction: column-reverse;
    gap: 12px;
    align-items: stretch;
  }

  .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 {
    width: 100%;
  }
}

/* Ventana de búsqueda web
   ---------------------------------------------------------------------------------------
   El diseño entregado, portado tal cual: las mismas medidas, colores, sombras y tiempos del
   archivo original. Lo único que se tocó fue el alcance —todo cuelga de #web-search-sim para
   no mezclarse con la hoja de la plataforma— y el nombre de las animaciones, porque `spin` ya
   existía aquí y habría chocado. La página de demostración que envolvía al modal no se portó:
   en la plataforma el fondo es la pantalla real.
   =======================================================================================*/
#web-search-sim{
      --bg: #F7F9FB;
      --panel: #FFFFFF;
      --ink: #1E2A38;
      --muted: #5C6B7E;
      --line: #E1E5EB;
      --blue: #2E5F9C;
      --blue2: #2E5F9C;
      --green: #1F7A5C;
      --shadow: none;
      --soft-shadow: none;
      --radius: 8px;
    }
#web-search-sim *{box-sizing: border-box}
#web-search-sim{
      position: fixed;
      inset: 0;
      z-index: 80;
      font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
      color: var(--ink);
    }
#web-search-sim button,
#web-search-sim input{font: inherit}
#web-search-sim .modal{
      position: fixed;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 16px;
      background: rgb(11 37 69 / 38%);
      backdrop-filter: none;
      z-index: 50;
      opacity: 0;
      pointer-events: none;
      transition: .25s ease;
    }
#web-search-sim .modal.open{opacity: 1;pointer-events: auto}
#web-search-sim .window{
      width: min(1180px,96vw);
      height: min(760px,94vh);
      min-height: 590px;
      background: var(--panel);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      border: 0.5px solid rgb(201 211 223 / 90%);
      position: relative;
      display: grid;
      grid-template-rows: auto auto 1fr auto;
    }
#web-search-sim .modal-head{
      height: 48px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 16px;
      border-bottom: 0.5px solid var(--line);
      background: #F7F9FB;
    }
#web-search-sim .dots{display: flex;gap: 7px}
#web-search-sim .dot{width: 11px;height: 11px;border-radius: 50%;background: #C3D3E6}
#web-search-sim .dot:nth-child(1){background: #9B2C2C}
#web-search-sim .dot:nth-child(2){background: #F5EEDC}
#web-search-sim .dot:nth-child(3){background: #1F7A5C}
#web-search-sim .head-title{
      flex: 1;
      font-size: 13px;
      color: #5C6B7E;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      user-select: none;
    }
#web-search-sim .sim-pill{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 9px;
      background: #EEF1F5;
      color: #1B4A7E;
      border-radius: 8px;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .02em;
    }
#web-search-sim .sim-dot{
      width: 7px;height: 7px;border-radius: 50%;background: #2E5F9C;
      box-shadow: 0 0 0 2px #2E5F9C, 0 0 0 4px rgb(46 95 156 / 15%);
    }
#web-search-sim .browser-toolbar{
      padding: 12px 18px;
      background: #FFFFFF;
      border-bottom: 0.5px solid #E1E5EB;
      display: flex;
      align-items: center;
      gap: 12px;
    }
#web-search-sim .nav{
      display: flex;gap: 6px;align-items: center;color: #5C6B7E;
      flex: 0 0 auto;
    }
#web-search-sim .nav .ico{
      width: 32px;height: 32px;border-radius: 50%;display: grid;place-items: center;
      font-size: 18px;user-select: none;
    }
#web-search-sim .nav .ico.active{color: #1E2A38}
#web-search-sim .address{
      flex: 1;
      border: 0.5px solid #C9D3DF;
      height: 38px;border-radius: 12px;
      background: #F7F9FB;
      display: flex;align-items: center;
      padding: 0 14px;gap: 10px;
      font-size: 13px;color: #5C6B7E;
    }
#web-search-sim .lock{font-size: 12px}
#web-search-sim .address .fake-domain{white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
#web-search-sim .menu-dots{letter-spacing: 2px;color: #5C6B7E}
#web-search-sim .viewport{
      position: relative;
      overflow: hidden;
      background: #FFFFFF;
    }
#web-search-sim .screen{
      position: absolute;inset: 0;
      opacity: 0;transform: translateY(5px);
      pointer-events: none;
      transition: opacity .32s ease,transform .32s ease;
      overflow: auto;
      scrollbar-width: thin;
    }
#web-search-sim .screen.active{opacity: 1;transform: none;pointer-events: auto}
#web-search-sim /* Home */ .home{
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 10vh;
      background: #FFFFFF;
    }
#web-search-sim .mark{
      display: flex;align-items: center;gap: 12px;margin-bottom: 26px;
      user-select: none;
    }
#web-search-sim .mark-badge{
      width: 54px;height: 54px;border-radius: 12px;
      display: grid;place-items: center;
      background: #2E5F9C;
      color: #FFFFFF;font-weight: 500;font-size: 28px;
      box-shadow: none;
    }
#web-search-sim .mark strong{font-size: 28px;letter-spacing: -.04em;color: #1E2A38}
#web-search-sim .home-search{
      width: min(690px,82%);
      height: 54px;
      border-radius: 12px;
      border: 0.5px solid #E1E5EB;
      box-shadow: var(--soft-shadow);
      display: flex;align-items: center;
      padding: 0 16px;
      gap: 12px;
      transition: .18s ease;
      background: #FFFFFF;
    }
#web-search-sim .home-search.focused{
      border-color: transparent;
      box-shadow: none;
    }
#web-search-sim .plus{font-size: 22px;color: #1E2A38}
#web-search-sim .typed-wrap{
      flex: 1;min-width: 0;
      display: flex;align-items: center;
      font-size: 16px;
      color: #1E2A38;
      height: 100%;
    }
#web-search-sim .typed-text{
      white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
    }
#web-search-sim .caret{
      width: 1.5px;height: 24px;background: #0B2545;margin-left: 2px;
      animation: ws-blink .75s step-end infinite;
    }
@keyframes ws-blink{50%{opacity: 0}}
#web-search-sim .home-icons{display: flex;gap: 14px;color: #1E2A38;font-size: 18px;align-items: center}
#web-search-sim .ai-pill{
      padding: 8px 10px;background: #EEF1F5;border-radius: 12px;font-size: 12px;color: #1E2A38;
      white-space: nowrap;
    }
#web-search-sim .home-actions{display: flex;gap: 12px;margin-top: 28px}
#web-search-sim .soft-btn{
      border: 0.5px solid transparent;background: #F7F9FB;color: #1E2A38;
      border-radius: 8px;padding: 10px 18px;font-size: 14px;
    }
#web-search-sim .soft-btn.click-flash{animation: ws-press .28s ease}
@keyframes ws-press{50%{transform: scale(.97);background: #EEF1F5}}
#web-search-sim .home-sub{
      margin-top: 36px;color: #5C6B7E;font-size: 12px;
      display: flex;gap: 8px;align-items: center;
    }
#web-search-sim /* Loading */ .loading-screen{
      display: grid;place-items: center;background: #FFFFFF;
    }
#web-search-sim .loading-box{text-align: center;color: #5C6B7E}
#web-search-sim .spinner{
      width: 46px;height: 46px;border-radius: 50%;
      border: 4px solid #E1E5EB;
      border-top-color: #2E5F9C;
      margin: 0 auto 16px;
      animation: ws-spin .8s linear infinite;
    }
@keyframes ws-spin{to{transform: rotate(360deg)}}
#web-search-sim .loading-title{font-weight: 500;color: #1E2A38;margin-bottom: 6px}
#web-search-sim .loading-query{font-size: 13px;max-width: 520px;line-height: 1.45;color: #5C6B7E}
#web-search-sim /* Results */ .results{
      background: #FFFFFF;
      color: #1E2A38;
      padding-bottom: 40px;
    }
#web-search-sim .results-top{
      position: sticky;top: 0;z-index: 4;background: #FFFFFF;
      border-bottom: 0.5px solid #E1E5EB;
    }
#web-search-sim .results-search-row{
      display: flex;align-items: center;
      padding: 14px 42px 10px;
      gap: 20px;
    }
#web-search-sim .mini-mark{
      width: 38px;height: 38px;border-radius: 10px;background: #EEF1F5;
      display: grid;place-items: center;color: #2E5F9C;font-weight: 500;flex: 0 0 auto;
    }
#web-search-sim .results-search{
      width: min(760px,75vw);height: 48px;border: 0.5px solid #E1E5EB;
      border-radius: 12px;box-shadow: none;
      display: flex;align-items: center;padding: 0 17px;gap: 10px;
      background: #FFFFFF;
    }
#web-search-sim .results-search .q{
      flex: 1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 14px;
    }
#web-search-sim .search-x{color: #5C6B7E;font-size: 22px}
#web-search-sim .search-tools{display: flex;gap: 14px;color: #1E2A38}
#web-search-sim .tabs{
      display: flex;gap: 26px;padding: 0 42px 0 102px;height: 42px;align-items: flex-end;
      color: #5C6B7E;font-size: 13px;
    }
#web-search-sim .tab{padding-bottom: 12px;position: relative;white-space: nowrap}
#web-search-sim .tab.active{color: #2E5F9C;font-weight: 500}
#web-search-sim .tab.active:after{
      content: "";position: absolute;left: 0;right: 0;bottom: 0;height: 3px;
      background: #2E5F9C;border-radius: 2px 2px 0 0;
    }
#web-search-sim .results-body{
      display: grid;grid-template-columns: minmax(0,680px) minmax(260px,1fr);
      gap: 54px;padding: 24px 48px 50px 102px;
    }
#web-search-sim .count{font-size: 12px;color: #5C6B7E;margin-bottom: 22px}
#web-search-sim .result-card{
      margin-bottom: 27px;
      border-radius: 12px;
      padding: 0;
      position: relative;
    }
#web-search-sim .result-card.click-target{transition: .18s ease}
#web-search-sim .result-card.click-target.hovered{
      background: #F7F9FB;
      box-shadow: 0 0 0 8px #E1E5EB;
    }
#web-search-sim .source{
      display: flex;align-items: center;gap: 9px;color: #1E2A38;font-size: 13px;margin-bottom: 5px;
    }
#web-search-sim .favicon{
      width: 28px;height: 28px;border-radius: 50%;background: #EEF1F5;
      display: grid;place-items: center;color: #5C6B7E;font-weight: 500;font-size: 11px;
    }
#web-search-sim .source small{display: block;color: #5C6B7E;font-size: 11px;margin-top: 1px}
#web-search-sim .result-title{
      font-size: 18px;line-height: 1.25;color: #13315C;margin: 0 0 5px;
      text-decoration: none;
    }
#web-search-sim .result-title:hover{text-decoration: underline}
#web-search-sim .snippet{font-size: 13px;line-height: 1.5;color: #1E2A38;margin: 0;max-width: 640px}
#web-search-sim .snippet em{font-style: normal;font-weight: 500;color: #1E2A38}
#web-search-sim .sitelinks{display: flex;gap: 8px;flex-wrap: wrap;margin-top: 9px}
#web-search-sim .chip{
      padding: 5px 9px;border: 0.5px solid #E1E5EB;border-radius: 8px;color: #5C6B7E;font-size: 11px;
      background: #FFFFFF;
    }
#web-search-sim .side{
      align-self: start;border: 0.5px solid #E1E5EB;border-radius: 12px;padding: 18px;
      box-shadow: none;background: #FFFFFF;
    }
#web-search-sim .side-kicker{font-size: 12px;color: #5C6B7E;margin-bottom: 8px}
#web-search-sim .side h3{margin: 0 0 10px;font-size: 18px}
#web-search-sim .side p{font-size: 12px;line-height: 1.5;color: #5C6B7E;margin: 0}
#web-search-sim .side-grid{display: grid;grid-template-columns: 1fr 1fr;gap: 9px;margin-top: 14px}
#web-search-sim .metric{padding: 10px;background: #F7F9FB;border-radius: 8px}
#web-search-sim .metric b{display: block;font-size: 14px}
#web-search-sim .metric span{font-size: 11px;color: #5C6B7E}
#web-search-sim /* preview */ .preview{
      background: #F7F9FB;
      padding: 28px 46px;
    }
#web-search-sim .preview-card{
      max-width: 880px;margin: 0 auto;
      background: #FFFFFF;border: 0.5px solid #E1E5EB;border-radius: 12px;
      overflow: hidden;box-shadow: none;
    }
#web-search-sim .preview-head{
      display: flex;align-items: center;gap: 12px;padding: 16px 18px;border-bottom: 0.5px solid #E1E5EB;
    }
#web-search-sim .preview-logo{
      width: 36px;height: 36px;border-radius: 8px;background: #EEF1F5;color: #2E5F9C;
      display: grid;place-items: center;font-weight: 500;
    }
#web-search-sim .preview-url{font-size: 12px;color: #5C6B7E}
#web-search-sim .preview-body{padding: 22px 24px 30px}
#web-search-sim .preview-body h2{margin: 0 0 10px;font-size: 22px}
#web-search-sim .preview-body p{margin: 0 0 16px;line-height: 1.6;color: #1E2A38;font-size: 14px}
#web-search-sim .fake-table{border: 0.5px solid #E1E5EB;border-radius: 10px;overflow: hidden}
#web-search-sim .fake-row{
      display: grid;grid-template-columns: 1.3fr .7fr .5fr;
      border-bottom: 0.5px solid #E1E5EB;font-size: 12px;
    }
#web-search-sim .fake-row:last-child{border-bottom: 0}
#web-search-sim .fake-row > div{padding: 10px 12px}
#web-search-sim .fake-row.header{background: #F7F9FB;font-weight: 500;color: #5C6B7E}
#web-search-sim .statusbar{
      height: 40px;border-top: 0.5px solid #E1E5EB;background: #F7F9FB;
      display: flex;align-items: center;gap: 14px;padding: 0 16px;font-size: 12px;color: #5C6B7E;
    }
#web-search-sim .progress{
      height: 6px;flex: 1;border-radius: 8px;background: #EEF1F5;overflow: hidden;
    }
#web-search-sim .progress > i{
      display: block;height: 100%;width: 0;background: #2E5F9C;
      border-radius: inherit;transition: width .2s linear;
    }
#web-search-sim .timer{font-variant-numeric: tabular-nums;min-width: 92px;text-align: right}
#web-search-sim .phase-label{min-width: 210px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
#web-search-sim /* mouse */ .cursor{
      position: fixed;
      width: 22px;height: 28px;
      z-index: 9999;
      pointer-events: none;
      opacity: 0;
      transform: translate3d(0,0,0);
      transition: left 1.15s cubic-bezier(.2,.78,.2,1),
        top 1.15s cubic-bezier(.2,.78,.2,1),
        opacity .2s ease;
      filter: drop-shadow(0 2px 2px rgba(0,0,0,.24));
    }
#web-search-sim .cursor.show{opacity: 1}
#web-search-sim .cursor svg{display: block;width: 100%;height: 100%}
#web-search-sim .click-ring{
      position: fixed;width: 20px;height: 20px;border: 2px solid rgb(46 95 156 / 55%);
      border-radius: 50%;z-index: 9998;pointer-events: none;
      opacity: 0;transform: translate(-50%,-50%) scale(.4);
    }
#web-search-sim .click-ring.fire{animation: ws-ring .42s ease-out}
@keyframes ws-ring{
      0%{opacity: 1;transform: translate(-50%,-50%) scale(.35)}
      100%{opacity: 0;transform: translate(-50%,-50%) scale(1.7)}
    }
#web-search-sim .toast{
      position: absolute;left: 50%;top: 18px;transform: translateX(-50%) translateY(-10px);
      background: #1E2A38;color: #FFFFFF;padding: 9px 13px;border-radius: 8px;
      font-size: 12px;opacity: 0;transition: .25s ease;z-index: 20;
      box-shadow: none;pointer-events: none;
    }
#web-search-sim .toast.show{opacity: 1;transform: translateX(-50%) translateY(0)}
@media (max-width: 850px){
  #web-search-sim .results-body{grid-template-columns: 1fr;padding-left: 44px;padding-right: 28px}
  #web-search-sim .side{display: none}
  #web-search-sim .tabs{padding-left: 44px;overflow: hidden}
  #web-search-sim .results-search-row{padding-left: 24px;padding-right: 24px}
  #web-search-sim .mini-mark{display: none}
  #web-search-sim .results-search{width: 100%}
  #web-search-sim .browser-toolbar .nav{display: none}
  #web-search-sim .phase-label{display: none}
}
@media (prefers-reduced-motion: reduce){
  #web-search-sim .cursor{transition: left .15s linear,top .15s linear,opacity .1s}
}

/* Integración, no diseño: el punto rojo del semáforo ahora es el botón de cierre y un botón
   trae bordes, color y alineación propios del navegador. Esto se los quita para que se vea
   idéntico al punto que ya estaba dibujado. */
#web-search-sim button.dot {
  appearance: none;
  border: 0;
  padding: 0;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

/* El diseño no le declara tipografía a sus títulos: da por hecho que la heredan del contenedor,
   como ocurría en su archivo suelto. Aquí no basta, porque la hoja de la plataforma sí viste
   h1–h6 y esa regla se colaba dentro de la ventana cambiándole la fuente al resumen lateral y
   al título de la fuente abierta. Esto devuelve la herencia; lo que el diseño sí declara sigue
   mandando, porque sus reglas son más específicas que estas. */
#web-search-sim h1,
#web-search-sim h2,
#web-search-sim h3,
#web-search-sim h4 {
  font-family: inherit;
  letter-spacing: inherit;
}

/* Debug reutiliza las superficies de administración y reserva el detalle para demanda. */
#debug-view > .data-panel { margin-block: 1rem; }
.debug-filters, .debug-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  align-items: end;
}
.debug-filters label, .debug-resolution label { display: grid; gap: .4rem; }
.debug-advanced { grid-column: 1 / -1; }
.debug-filter-grid { margin-top: 1rem; }
.debug-resolution { display: grid; gap: 1rem; margin-block: 1rem 2rem; }
.debug-events > details { padding-block: 1rem; border-bottom: 1px solid var(--border); }
#debug-view summary { cursor: pointer; }
#debug-view pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
#debug-view td p { margin-block: .4rem; }
#debug-view table { min-width: 900px; }
#debug-view th:first-child, #debug-view td:first-child { min-width: 150px; }
#debug-filters, #debug-view > .data-panel > details { padding: 1rem; }
#debug-view .panel-heading > button, #debug-refresh { width: auto; flex: 0 0 auto; }
#debug-page { white-space: nowrap; }
.debug-resolution, .debug-events { margin-inline: 1rem; }
}