/*
 * Synlicit / Harvey — Sistema de Diseño Base (Etapa A)
 * Manual Maestro de Producto, Parte VI, Sección 15.1.
 *
 * Única librería de estilo compartida: toda pantalla que adopte el sistema
 * de diseño carga este archivo y usa estas variables/clases -- ningún valor
 * de color, tipografía o espaciado se redefine dentro de un template
 * individual. Los componentes reutilizables (templates/components/*.html)
 * usan exclusivamente las clases definidas aquí.
 *
 * Fuentes: cargar en el <head> del template que use este sistema --
 *   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap" rel="stylesheet">
 * Ambas familias tienen stack de respaldo real (ver --font-body/--font-display)
 * para que el texto siga siendo legible si la fuente no carga.
 *
 * Punto de quiebre único del sistema: 768px (ver Sección "Adaptativo" más
 * abajo) -- por debajo, tableta/móvil; por encima, escritorio. Un solo
 * breakpoint para toda la librería, documentado una vez aquí, no repetido
 * con valores distintos en cada componente.
 */

:root {
  /* ── Paleta de 6 colores con propósito funcional (Manual 15.1.2) ────── */
  /* Cada color tiene UN rol. El ámbar es el único acento vivo del sistema
     -- reservado para alertas y la acción principal; no se usa como color
     decorativo genérico. */
  --color-navy: #0F2A43;        /* azul marino -- estructura, texto principal, marca */
  --color-slate: #3D4852;       /* gris pizarra -- texto secundario, bordes, superficies neutras */
  --color-bone: #FAFAF8;        /* blanco hueso -- fondo base */
  --color-amber: #C17817;       /* ámbar técnico -- ÚNICO acento vivo: alertas + acción principal */
  --color-sage: #4A7862;        /* verde salvia -- éxito / cumplimiento */
  --color-terracotta: #A6432E;  /* rojo terracota -- errores / bloqueos */

  /* Tintes derivados para fondos suaves (pills, tarjetas de estado) --
     mismos 6 colores, solo con opacidad reducida; ningún color nuevo. */
  --color-amber-tint: rgba(193, 120, 23, 0.12);
  --color-sage-tint: rgba(74, 120, 98, 0.12);
  --color-terracotta-tint: rgba(166, 67, 46, 0.12);
  --color-slate-tint: rgba(61, 72, 82, 0.10);
  --color-navy-tint: rgba(15, 42, 67, 0.06);

  /* Superficies y bordes derivados de la paleta (sin colores ajenos) */
  --surface-base: var(--color-bone);
  --surface-raised: #FFFFFF;
  --border-subtle: rgba(61, 72, 82, 0.18);
  --border-strong: var(--color-slate);
  --text-primary: var(--color-navy);
  --text-secondary: var(--color-slate);
  --text-on-dark: var(--color-bone);

  /* Derivados para "chrome" oscuro (navbar/sidebar/footer/modal) -- bandas
     navy dentro de un sistema mayormente claro, mismo patrón que Manual
     15.1.5 usa para .ds-nav. Solo opacidades de bone/navy ya existentes,
     ningún tono nuevo (sesión de conexión de base.html, 2026-08-27). */
  --text-on-dark-muted: rgba(250, 250, 248, 0.65);
  --surface-on-dark-subtle: rgba(250, 250, 248, 0.05);
  --border-on-dark: rgba(250, 250, 248, 0.12);

  /* ── Tipografía (Manual 15.1.3) ──────────────────────────────────────
     Sans-serif técnica para cuerpo e interfaz. Serif con carácter SOLO
     para títulos de pantallas de mayor peso (panel operativo, reporte
     final) -- no para toda la interfaz. */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Source Serif 4', 'Georgia', 'Times New Roman', serif;

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.5rem;     /* 24px */
  --text-2xl: 2rem;      /* 32px */
  --text-3xl: 2.5rem;    /* 40px -- reservado para títulos display (panel operativo, reporte final) */

  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* ── Espaciado (escala base 4px) ─────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ── Radios, sombras, transición ─────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --shadow-card: 0 1px 3px rgba(15, 42, 67, 0.08), 0 1px 2px rgba(15, 42, 67, 0.06);
  --shadow-raised: 0 4px 12px rgba(15, 42, 67, 0.12);

  --transition-base: 150ms ease;
}

/* ── Reset mínimo y tipografía base ──────────────────────────────────────── */

.ds-root {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-base);
}

.ds-root *, .ds-root *::before, .ds-root *::after {
  box-sizing: border-box;
}

.ds-root h1, .ds-root h2, .ds-root h3.ds-title-display {
  /* Títulos display (panel operativo, reporte final) -- serif con carácter.
     El resto de encabezados (h4, h5...) se queda en la sans-serif técnica
     por defecto: el serif es la excepción reservada, no la norma. */
  font-family: var(--font-display);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-3);
}

.ds-root h1 { font-size: var(--text-3xl); }
.ds-root h2 { font-size: var(--text-2xl); }
.ds-root h3.ds-title-display { font-size: var(--text-xl); }

.ds-root p {
  margin: 0 0 var(--space-3);
  color: var(--text-secondary);
}

/* ── Botones (Manual 15.1.6: vocabulario por acción, no por término técnico) */
/* El texto del botón lo define quien lo usa (ej. "Aprobar y continuar");
   estas clases solo resuelven forma y color. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base), transform var(--transition-base);
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 2px solid var(--color-amber);
  outline-offset: 2px;
}

.btn[disabled], .btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primario: la ÚNICA aplicación de ámbar sólido como fondo de botón --
   reservado para la acción principal de la pantalla. */
.btn-primary {
  background: var(--color-amber);
  color: var(--color-bone);
}
.btn-primary:hover { background: #a8690f; }
.btn-primary:active { transform: translateY(1px); }

/* Secundario: estructural, navy sólido -- para la segunda acción de la
   pantalla, nunca compite visualmente con el ámbar. */
.btn-secondary {
  background: var(--color-navy);
  color: var(--color-bone);
}
.btn-secondary:hover { background: #0a1e30; }
.btn-secondary:active { transform: translateY(1px); }

/* Outline: acción terciaria / de bajo compromiso (ej. "Cancelar", "Ver detalle"). */
.btn-outline {
  background: transparent;
  color: var(--color-navy);
  border-color: var(--border-strong);
}
.btn-outline:hover {
  background: var(--color-navy-tint);
  border-color: var(--color-navy);
}

/* ── Tarjeta ──────────────────────────────────────────────────────────── */

.card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}

.card-title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}

.card-body {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.card-footer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ── Pill de estado (verde/ámbar/gris = cumple/alerta/pendiente) ────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  line-height: 1.6;
}

.pill::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.pill-cumple {
  background: var(--color-sage-tint);
  color: var(--color-sage);
}
.pill-alerta {
  background: var(--color-amber-tint);
  color: var(--color-amber);
}
.pill-pendiente {
  background: var(--color-slate-tint);
  color: var(--color-slate);
}

/* ── Semáforo de evidencia (Manual 15.1.4) ───────────────────────────────
   Círculo con porcentaje de confianza + color según semáforo real
   (verde/ámbar/rojo) del contrato técnico de agente. Vocabulario de color
   idéntico al de StudyAgentRun.traffic_light ('green'|'yellow'|'red'). */

.evidence-semaphore {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
}

.evidence-semaphore-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-bone);
  border: 3px solid transparent;
  flex-shrink: 0;
}

.evidence-semaphore-circle.is-green { background: var(--color-sage); }
.evidence-semaphore-circle.is-yellow { background: var(--color-amber); }
.evidence-semaphore-circle.is-red { background: var(--color-terracotta); }

.evidence-semaphore-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* ── Navegación adaptativa (Manual 15.1.5) ───────────────────────────────
   Mismo contenido, distinta organización espacial -- nunca oculta enlaces
   detrás de un menú colapsado. En escritorio: barra horizontal superior.
   Por debajo del breakpoint: barra horizontal inferior con icono+etiqueta,
   siempre visible (todos los enlaces siguen presentes, solo cambian de
   posición y densidad). */

.ds-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--color-navy);
  color: var(--color-bone);
}

.ds-nav-brand {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-bone);
  text-decoration: none;
}

.ds-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ds-nav-links a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-on-dark);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  opacity: 0.85;
}

.ds-nav-links a:hover, .ds-nav-links a.is-active { opacity: 1; color: var(--color-amber); }

/* ── Tabla responsiva ─────────────────────────────────────────────────────
   Escritorio: tabla real (<table>). Bajo el breakpoint: cada <tr> se
   transforma en una tarjeta apilada; cada celda conserva su etiqueta de
   columna (via atributo data-label), así ninguna información se oculta,
   solo cambia de disposición (fila horizontal -> tarjeta vertical). */

.table-responsive-wrapper {
  width: 100%;
  overflow-x: auto;
}

.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  background: var(--surface-raised);
}

.ds-table caption {
  text-align: left;
  font-weight: 700;
  padding-bottom: var(--space-3);
  color: var(--text-primary);
}

.ds-table thead th {
  text-align: left;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-subtle);
  padding: var(--space-3) var(--space-4);
}

.ds-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

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

/* ══════════════════════════════════════════════════════════════════════
   PUNTO DE QUIEBRE ÚNICO DEL SISTEMA: 768px.
   Por debajo de este ancho: móvil/tableta -- reorganiza, nunca oculta.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Navegación: de barra horizontal superior a barra horizontal inferior
     fija, con icono+etiqueta apilados -- mismo contenido, otra posición. */
  .ds-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    flex-direction: row;
    justify-content: space-around;
    padding: var(--space-2) var(--space-3);
    z-index: 20;
  }

  .ds-nav-brand { display: none; } /* la marca vive en el header de contenido, no en la barra inferior */

  .ds-nav-links {
    width: 100%;
    justify-content: space-around;
    gap: var(--space-2);
  }

  .ds-nav-links a {
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--text-xs);
    text-align: center;
  }

  /* Tabla -> tarjetas apiladas. Cada <tr> pasa a comportarse como bloque;
     cada <td> se rotula con su encabezado real via data-label (Manual
     15.1.5: reorganizar, no ocultar -- la etiqueta de columna sigue
     visible junto al valor). */
  .ds-table thead { display: none; }

  .ds-table, .ds-table tbody, .ds-table tr, .ds-table td {
    display: block;
    width: 100%;
  }

  .ds-table tr {
    margin-bottom: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .ds-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    text-align: right;
    border-bottom: 1px solid var(--border-subtle);
  }

  .ds-table td:last-child { border-bottom: none; }

  .ds-table td::before {
    content: attr(data-label);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: left;
  }
}

/* ── Grilla adaptativa de tarjetas (Panel operativo, Manual 18) ──────────
   Utilidad genérica reutilizable -- auto-fit hace que el número de
   columnas se ajuste solo según el ancho disponible (2, 3, 4... tarjetas),
   sin necesidad de una media query nueva por cada pantalla que la use.
   Pensada también para las tarjetas de candidata de la Sección 19 (Búsqueda
   y selección de oportunidades) si esa pantalla necesita el mismo patrón
   de reorganización adaptativa -- mismo componente, no uno paralelo. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.experience-decision-actions {
  display: grid;
  grid-template-columns: minmax(180px, auto) minmax(280px, 1fr);
  gap: var(--space-5);
  align-items: end;
}

.experience-alternative-form .field-group { margin-bottom: var(--space-3); }

.technical-progress {
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.technical-progress-heading {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}

.technical-progress-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; height: 6px; border-radius: var(--radius-pill); overflow: hidden; }
.technical-progress-track > span { background: var(--surface-muted); }
.technical-progress-track > span.is-complete { background: var(--color-sage); }
.technical-progress-modules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.technical-progress-modules a { display: flex; flex-direction: column; gap: var(--space-2); color: var(--text-primary); text-decoration: none; }
.technical-progress-modules a.is-active { color: var(--color-amber); }

@media (max-width: 768px) {
  .experience-decision-actions { grid-template-columns: 1fr; }
  .technical-progress-heading { flex-direction: column; }
  .technical-progress-modules { grid-template-columns: 1fr 1fr; }
}

/* ── Recorrido público y onboarding (Manual 16–17) ───────────────────── */
.public-flow, .onboarding-shell { min-height: 100vh; background: var(--surface-base); }
.public-section, .onboarding-main { width: min(1120px, calc(100% - var(--space-6))); margin: 0 auto; padding: var(--space-7) 0; }
.onboarding-header { display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); padding:var(--space-4) max(var(--space-5), calc((100% - 1120px)/2)); background:var(--color-navy); color:var(--text-on-dark); }
/* Correo del usuario sin límite de longitud (Manual: sin restricción de
   caracteres) dentro de un flex sin min-width forzaba overflow horizontal
   en viewports angostos -- min-width:auto es el valor inicial de un hijo
   flex, no 0; medido con Playwright en la auditoría Gate G G-01
   2026-09-12 (scrollWidth 462px en 375px de viewport). */
.onboarding-user-email { min-width:0; overflow-wrap:anywhere; font-size:var(--text-sm); }
.onboarding-brand { color:var(--text-on-dark); font-family:var(--font-display); font-weight:700; text-decoration:none; font-size:var(--text-xl); }
.onboarding-steps { display:flex; justify-content:center; gap:var(--space-5); padding:var(--space-3); border-bottom:1px solid var(--border-subtle); color:var(--text-secondary); font-size:var(--text-sm); }
.onboarding-footer { text-align:center; padding:var(--space-4); color:var(--text-secondary); border-top:1px solid var(--border-subtle); }
.flow-card { max-width:720px; margin:0 auto; }
.flow-card-wide { max-width:920px; }
.flow-actions { display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-5); }
.flow-actions .btn { flex:1; }
.field-group { margin-bottom:var(--space-4); }
.field-group label { display:block; color:var(--text-primary); font-weight:600; font-size:var(--text-sm); margin-bottom:var(--space-2); }
.field-group input:not([type=checkbox]), .field-group select { width:100%; padding:var(--space-3); border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-raised); color:var(--text-primary); font:inherit; }
.field-group input:focus, .field-group select:focus { outline:2px solid var(--color-amber); outline-offset:1px; }
.field-error, .errorlist { color:var(--color-terracotta); font-size:var(--text-sm); }
.notice { padding:var(--space-4); border-radius:var(--radius-md); margin-bottom:var(--space-4); background:var(--color-navy-tint); border:1px solid var(--border-subtle); }
.notice-success { background:var(--color-sage-tint); color:var(--color-sage); }
.notice-error { background:var(--color-terracotta-tint); color:var(--color-terracotta); }
.notice-warning { background:var(--color-amber-tint); color:var(--color-amber); } /* alertas que requieren atención sin bloquear (Panel operativo, Manual 18) */
.plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4); align-items:stretch; }
.plan-grid .card { display:flex; flex-direction:column; }
.plan-grid .card-body { flex:1; }
.plan-price { font-size:var(--text-xl); font-weight:700; color:var(--color-navy); }
.auth-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,480px); gap:var(--space-6); align-items:start; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 var(--space-4); }
.form-grid .field-full { grid-column:1/-1; }
/* Grid genérico de 2 columnas -- mismo colapso a 1fr que .plan-grid/.auth-grid/
   .form-grid, para reemplazar grid-template-columns:1fr 1fr puesto inline en
   templates que no adoptan el sistema (ej. subscriber_profile.html), donde
   ninguna columna se achicaba bajo su ancho de contenido y desbordaba en
   viewports angostos (medido con Playwright, auditoría Gate G G-01 2026-09-12). */
.two-col-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
@media (max-width:768px) {
  .public-section, .onboarding-main { width:min(100% - var(--space-4), 600px); padding:var(--space-5) 0; }
  .plan-grid, .auth-grid, .form-grid, .two-col-grid { grid-template-columns:1fr; }
  .form-grid .field-full { grid-column:auto; }
  .onboarding-steps { justify-content:flex-start; overflow-x:auto; white-space:nowrap; }
  .flow-actions { flex-direction:column; }
  .flow-actions .btn { width:100%; }
}

/* ── Búsqueda y selección de oportunidades (Manual 19) ─────────────── */
.discovery-search, .candidate-results { max-width:1120px; margin:0 auto; padding:var(--space-6); }
.page-heading { margin-bottom:var(--space-5); }
.page-heading > p { max-width:720px; }
.eyebrow { margin:0 0 var(--space-2); color:var(--color-amber); font-size:var(--text-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.form-field { margin-bottom:var(--space-4); }
.form-field label, .form-field legend { display:block; margin-bottom:var(--space-2); color:var(--text-primary); font-size:var(--text-sm); font-weight:600; }
.form-field input:not([type=checkbox]), .form-field select { width:100%; padding:var(--space-3); border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-raised); color:var(--text-primary); font:inherit; }
.form-field input:focus, .form-field select:focus { outline:2px solid var(--color-amber); outline-offset:1px; }
.form-field small { display:block; margin-top:var(--space-1); color:var(--text-secondary); }
.tender-types { border:0; padding:0; }
.checkbox-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-2); }
.checkbox-option { display:flex !important; align-items:flex-start; gap:var(--space-2); padding:var(--space-2); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); font-weight:400 !important; }
.search-actions { justify-content:flex-end; }
.message-stack { margin-bottom:var(--space-4); }
.alert { padding:var(--space-3) var(--space-4); border:1px solid var(--border-subtle); border-radius:var(--radius-md); color:var(--text-secondary); background:var(--color-navy-tint); }
.alert-error { color:var(--color-terracotta); background:var(--color-terracotta-tint); }
.results-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-5); }
.results-heading-actions, .bucket-tabs, .candidate-actions { display:flex; gap:var(--space-3); flex-wrap:wrap; }
.bucket-tabs { margin:var(--space-5) 0; }
.bucket-tabs [aria-pressed=true] { background:var(--color-navy); color:var(--color-bone); }
.candidate-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); margin-top:var(--space-5); }
.candidate-card { display:flex; flex-direction:column; }
.candidate-card .card-body { flex:1; }

/* Mesa de Trabajo: navegación y revisiones trazables (Manual 20.1–20.9). */
.workspace-review-page { max-width:1180px; margin:0 auto; padding:var(--space-5); }
.workspace-section-nav { display:flex; gap:var(--space-2); overflow-x:auto; margin-bottom:var(--space-5); padding:var(--space-2); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); background:var(--surface-raised); }
.workspace-section-nav a,
.workspace-section-nav span { flex:0 0 auto; padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); color:var(--text-secondary); text-decoration:none; font-size:var(--text-sm); font-weight:600; }
.workspace-section-nav a:hover,
.workspace-section-nav a.is-active { color:var(--surface-raised); background:var(--color-navy); }
.workspace-section-nav .is-disabled { opacity:.48; cursor:not-allowed; }
.workspace-review-eyebrow { margin:0 0 var(--space-1); color:var(--color-amber); font-size:var(--text-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.workspace-review-summary { margin-bottom:var(--space-4); }
.workspace-review-summary .card-body,
.review-result-heading { display:flex; align-items:center; gap:var(--space-4); }
.workspace-review-list { display:grid; gap:var(--space-4); }
.review-result-card h2 { margin:0; font-size:var(--text-lg); }
.evidence-disclosure { margin-top:var(--space-4); }
.evidence-disclosure > summary { display:inline-flex; list-style:none; cursor:pointer; }
.evidence-disclosure > summary::-webkit-details-marker { display:none; }
.evidence-fragment { margin-top:var(--space-3); padding:var(--space-4); border-left:4px solid var(--color-amber); border-radius:var(--radius-md); background:var(--color-navy-tint); }
.evidence-fragment blockquote { margin:var(--space-2) 0; color:var(--text-primary); white-space:pre-wrap; }
.risk-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); margin:var(--space-4) 0; }
.risk-detail-grid > div { padding:var(--space-3); border:1px solid var(--border-subtle); border-radius:var(--radius-md); }
.risk-detail-grid dt { margin-bottom:var(--space-1); font-weight:700; }
.risk-detail-grid dd { margin:0; color:var(--text-secondary); }

@media (max-width: 768px) {
  .workspace-review-page { padding:var(--space-3); }
  .workspace-section-nav { margin-inline:calc(var(--space-3) * -1); border-radius:0; }
  .workspace-review-summary .card-body,
  .review-result-heading { align-items:flex-start; flex-direction:column; }
  .risk-detail-grid { grid-template-columns:1fr; }
}
.candidate-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); }
.status-pill { display:inline-flex; padding:var(--space-1) var(--space-3); border-radius:var(--radius-full); background:var(--color-slate-tint); color:var(--color-slate); font-size:var(--text-xs); font-weight:700; white-space:nowrap; }
.candidate-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); margin:var(--space-4) 0; }
.candidate-facts div { padding:var(--space-3); border-radius:var(--radius-sm); background:var(--color-navy-tint); }
.candidate-facts dt { color:var(--text-secondary); font-size:var(--text-xs); text-transform:uppercase; }
.candidate-facts dd { margin:var(--space-1) 0 0; color:var(--text-primary); font-weight:600; }
.institutional-signals { padding:var(--space-3); border-left:3px solid var(--color-sage); background:var(--color-sage-tint); }
.institutional-signals h3 { margin:0 0 var(--space-2); font-size:var(--text-sm); }
.institutional-signals ul { margin:0; padding-left:var(--space-5); }
.duplicate-notice { display:flex; align-items:flex-start; gap:var(--space-2); width:100%; padding:var(--space-3); border-radius:var(--radius-md); background:var(--color-amber-tint); color:var(--color-navy); font-size:var(--text-sm); }
.action-feedback { width:100%; margin:0; color:var(--color-terracotta); font-size:var(--text-sm); }
.empty-results { grid-column:1/-1; text-align:center; }
@media (max-width:768px) {
  .discovery-search, .candidate-results { padding:var(--space-4); }
  .checkbox-grid, .candidate-grid, .candidate-facts { grid-template-columns:1fr; }
  .results-heading { align-items:stretch; flex-direction:column; }
  .results-heading-actions, .candidate-actions { flex-direction:column; }
  .results-heading-actions .btn, .candidate-actions .btn { width:100%; }
  .candidate-title-row { flex-direction:column; }
}

/* ══════════════════════════════════════════════════════════════
   Layout dividido de acceso (recuperación de contraseña) -- Gate G / G-01.
   Antes: CSS idéntico duplicado en 4 templates de accounts/ (password_reset,
   _done, _confirm, _complete), sin colapso responsive -- .auth-form-side
   fijaba min-width:420px dentro de un contenedor flex sin media query,
   rompiendo el viewport de 375px (scrollWidth 722px medido con Playwright/
   getBoundingClientRect, auditoría Gate G G-01 2026-09-12). Consolidado
   aquí una sola vez, con las variables del sistema en vez de hex sueltos;
   el panel de marca se oculta bajo el punto de quiebre único (768px) y el
   formulario pasa a ocupar el 100% del ancho, igual que el resto de la
   librería. */
.auth-split { display:flex; min-height:calc(100vh - 70px); width:100%; }
.auth-split-branding { flex:1; background:linear-gradient(135deg, var(--color-navy) 0%, #1e1b4b 50%, #312e81 100%); display:flex; align-items:center; justify-content:center; padding:var(--space-8); }
.auth-split-brand-content { text-align:center; color:var(--text-on-dark); }
.auth-split-brand-logo { width:80px; height:80px; border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:900; color:var(--text-on-dark); margin:0 auto var(--space-5); background:linear-gradient(135deg, var(--color-amber), #a8690f); box-shadow:0 10px 40px rgba(193,120,23,0.4); }
.auth-split-brand-content h1 { font-family:var(--font-display); font-size:2.5rem; margin-bottom:var(--space-2); }
.auth-split-brand-tagline { color:var(--text-on-dark-muted); font-size:var(--text-base); margin-bottom:var(--space-7); }
.auth-split-brand-features { display:flex; flex-direction:column; gap:var(--space-3); }
.auth-split-feature { display:flex; align-items:center; gap:var(--space-3); color:var(--text-on-dark-muted); font-size:var(--text-sm); background:var(--surface-on-dark-subtle); padding:var(--space-3) var(--space-5); border-radius:var(--radius-md); border:1px solid var(--border-on-dark); }
.auth-split-feature i { color:var(--color-amber); font-size:1.1rem; width:20px; }
.auth-split-form-side { width:500px; min-width:420px; background:var(--surface-base); display:flex; align-items:center; justify-content:center; padding:var(--space-6); }
.auth-split-form-card { width:100%; max-width:400px; }
.auth-split-form-card h2 { font-size:var(--text-xl); font-family:var(--font-display); color:var(--text-primary); margin-bottom:var(--space-2); }
.auth-split-subtitle { color:var(--text-secondary); margin-bottom:var(--space-6); font-size:var(--text-sm); }
.auth-split-form-card .form-group { margin-bottom:var(--space-5); }
.auth-split-form-card label { display:block; margin-bottom:var(--space-2); font-size:var(--text-sm); color:var(--text-secondary); font-weight:600; }
.auth-split-form-card input { width:100%; padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); background:var(--surface-raised); border:1.5px solid var(--border-subtle); color:var(--text-primary); font-size:var(--text-base); box-sizing:border-box; transition:border-color var(--transition-base), box-shadow var(--transition-base); }
.auth-split-form-card input:focus { outline:none; border-color:var(--color-amber); box-shadow:0 0 0 3px var(--color-amber-tint); }
.auth-split-form-card .btn-primary { width:100%; padding:var(--space-4); background:var(--color-amber); color:var(--text-on-dark); border:none; border-radius:var(--radius-md); font-weight:700; font-size:var(--text-base); cursor:pointer; transition:background-color var(--transition-base), transform var(--transition-base); margin-top:var(--space-3); }
.auth-split-form-card .btn-primary:hover { background:#a8690f; transform:translateY(-1px); }
.auth-split-form-card .auth-links { margin-top:var(--space-6); text-align:center; }
.auth-split-form-card .auth-links p { color:var(--text-secondary); font-size:var(--text-sm); margin:var(--space-2) 0; }
.auth-split-form-card .auth-links a { color:var(--color-amber); text-decoration:none; font-weight:600; }
@media (max-width:768px) {
  .auth-split-branding { display:none; }
  .auth-split-form-side { width:100%; min-width:0; padding:var(--space-6) var(--space-4); }
}