/* ══════════════════════════════════════════════════════════════════
   EXANTE DESIGN SYSTEM v0.5.1 — Tokens inlinados desde
   /Exante Design System/colors_and_type.css (fuente de verdad).
   La declaración local :root abajo alias-mapea sus tokens propios
   a estos var(--color-*).
   ══════════════════════════════════════════════════════════════════ */
:root {
  /* MOTION (handoff v0.6 · fuente de verdad) */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --motion-extra: 480ms;
  --ease-default: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-emphasis: cubic-bezier(0.34, 1.26, 0.58, 1);
  --ease-spring: linear(0, 0.006, 0.026 2.7%, 0.112 5.5%, 0.477 13.5%, 0.654, 0.793, 0.897 26.4%, 0.961, 0.997, 1.014, 1.02 38.6%, 1.018, 1.01, 1.002, 0.997, 0.997 56%, 1.0 70%, 1.0);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: var(--ease-default);
  /* SURFACES — Cool white */
  --color-bg:              #FAFBFC;
  --color-bg-subtle:       #F2F4F6;
  --color-surface:         #FFFFFF;
  --color-bg-inverse:      #0F1419;

  /* Borders */
  --color-border-subtle:   #E5E7EB;
  --color-border-default:  #D1D5DB;
  --color-hairline:        var(--color-border-subtle);

  /* TEXT — Cool ink */
  --fg1: #0F1419;
  --fg2: #4B5563;
  --fg3: #8B92A1;
  --fg4: #B8BDC7; /* S180 · homologado al DS y a backoffice (disabled) */

  /* ACCIÓN */
  --color-action-ink:           #0F1419;
  --color-accent-green:         #1FAE5F;
  --gradient-ai-strong-bold:    linear-gradient(135deg, #1FAE5F 0%, #1A8B82 55%, #0F6860 100%); /* S278 · superficie de IA (asistente). No es CTA. */
  --color-accent-green-deep:    #16904E;
  --color-accent-green-tint:    #D8EEDF;

  /* SEMÁNTICOS — base/deep/tint */
  --color-success:       #1FAE5F;  --color-success-tint:  #D8EEDF;
  --color-info:          #3A6FB5;  --color-info-tint:     #DCE6F1;
  --color-notice:        #6E7378;  --color-notice-tint:   #E8E9EA;
  --color-warning:       #E89B2A;  --color-warning-tint:  #FAE5CC;
  --color-error:         #B83227;  --color-error-tint:    #F4DCD7;

  /* ───── ALIAS LOCALES → DS (legacy bridge) ───── */
  --bg:            var(--color-bg);
  --surface:       var(--color-surface);
  --surface-2:     var(--color-bg-subtle);
  --border:        var(--color-border-subtle);
  --border-strong: var(--color-border-default);
  --ink:           var(--color-action-ink);

  /* Accent legacy --accent-go-* → DS accent-green */
  --accent-go:           var(--color-accent-green);
  --accent-go-deep:      var(--color-accent-green-deep);
  --accent-go-soft:      var(--color-accent-green-tint);
  --accent-go-deep-text: var(--color-accent-green-deep);
  --accent-hover:        #1A9852;  /* hover state CTA verde (intermedio entre base y deep) */

  --neutral-soft:  var(--color-notice-tint);
  --warning:       var(--color-warning);
  --warning-soft:  var(--color-warning-tint);
  --info:          var(--color-info);
  --info-soft:     var(--color-info-tint);
  --error:         var(--color-error);
  --error-soft:    var(--color-error-tint);

  /* Gradients */
  --gradient-green-mint: linear-gradient(90deg, #1FAE5F, #5EE39E);
  /* S243 · Avatares (handoff "Avatares - Exante"): 4 gradientes, asignados por hash estable del CORREO (% 4) */
  --gradient-avatar-1: linear-gradient(135deg, #1A8B82, #5A6CE5); /* Teal → Volt */
  --gradient-avatar-2: linear-gradient(135deg, #7A5BC2, #5A6CE5); /* Púrpura → Volt */
  --gradient-avatar-3: linear-gradient(135deg, #1FAE5F, #1A8B82); /* Verde → Teal */
  --gradient-avatar-4: linear-gradient(135deg, #C42784, #7A5BC2); /* Rosa → Púrpura */

  /* Radii, sombras, layout — sin cambio (no son tokens de color) */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-xl: 20px;
  --r-pill: 999px;
  /* v0.6 — Action button radius. Concentric con cards 16 / inputs 8.
     Pill (--r-pill / 999) reservado para chips, badges, segmented, avatars, dots, progress, FABs y search inline. */
  --radius-button: 10px;
  --shadow-card: 0 1px 2px rgba(15,20,25,0.04), 0 1px 1px rgba(15,20,25,0.02);
  --shadow-pop:  0 8px 24px rgba(15,20,25,0.08), 0 2px 6px rgba(15,20,25,0.04);
  /* FOCUS RING · S53b · neutro ink (decisión Ricardo: sin glow verde global).
     Override del DS para este front. Se mantiene verde solo para estados
     semánticos (success, drag-over, pulse del paso actual, prefilled). */
  --focus-ring:  0 0 0 3px rgba(15,20,25,0.12);
  --h-navbar:    56px;
  --w-sidebar:   232px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body {
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  background: var(--bg);
  color: var(--fg1);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }


/* ========================================================================
   NAVBAR · dark, shared · REPLICA de index.html (tabs + mega-menu + mobile)
   ======================================================================== */
/* ────────────────────────────────────────────────────────────────
   NAVBAR · Reposo opaco → Liquid glass al primer scroll.
   Reposo:  bg ink #0F1419 sólido · sin blur · sin glass.
   Scroll:  bg rgba(15,20,25,0.30) · blur 32px · saturate 140% ·
            inset highlight + sombra externa difusa.
   Transición var(--motion-base) ease-out activada por .is-scrolled.
   ──────────────────────────────────────────────────────────────── */
.navbar {
  flex-shrink: 0;
  position: sticky; top: 0;
  height: var(--h-navbar);
  z-index: 1000;

  /* S3.3f-A9 · liquid-glass-fix · margin negativo para que .app suba
     debajo de la navbar y el contenido de .main pase POR DETRÁS de
     ella al scrollear. Sin esto, backdrop-filter no tiene nada que
     difuminar (solo el bg blanco del body) y se ve gris en lugar
     de glass. .main compensa con padding-top extra. */
  margin-bottom: calc(-1 * var(--h-navbar));

  /* Reposo: fondo sólido sin efecto cristal */
  background: #0F1419;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  transition:
    background var(--motion-base) ease-out,
    backdrop-filter var(--motion-base) ease-out,
    -webkit-backdrop-filter var(--motion-base) ease-out,
    box-shadow var(--motion-base) ease-out,
    border-color var(--motion-base) ease-out;
}

/* Estado scroll · activa liquid glass (spec 2026-05-20).
   Fill dark 30% · blur 32px · saturate +40% · inset highlight + drop shadow. */
.navbar.is-scrolled {
  background: rgba(15, 20, 25, 0.30);
  backdrop-filter: saturate(140%) blur(32px);
  -webkit-backdrop-filter: saturate(140%) blur(32px);
  border-bottom-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

/* Legibilidad del contenido sobre cualquier fondo dinámico cuando se activa el glass */
.navbar.is-scrolled .nav-tab,
.navbar.is-scrolled .nav-link-text,
.navbar.is-scrolled .nav-avatar .name,
.navbar.is-scrolled .nav-logo,
.navbar.is-scrolled .nav-cta {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.navbar.is-scrolled .nav-cta { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18); }
.nav-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 0 24px; height: 100%;
  display: flex; align-items: center; gap: 16px;
  position: relative;
}
@media (min-width: 1024px) {
  .nav-inner { padding: 0 40px; }
}
.nav-logo {
  display: flex; align-items: center;
  flex-shrink: 0; text-decoration: none;
  height: 100%;
}
.nav-logo-img {
  height: 28px;
  width: auto;
  display: block;
  transition: opacity var(--motion-base);
}
.nav-logo:hover .nav-logo-img { opacity: 0.85; }
.nav-right {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
}
.nav-avatar {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.08);
  cursor: pointer;
  border: 0;
}
.nav-avatar:hover { background: rgba(255,255,255,0.14); }
.nav-avatar .circle {
  width: 28px; height: 28px;
  background: white; color: var(--ink);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px;
}
.nav-avatar .name { color: white; font-size: 13px; font-weight: 500; }
.nav-avatar .chev { color: rgba(255,255,255,0.55); font-size: 9px; }
/* En mobile (≤540px): dejar solo el círculo, ocultar nombre y chevron para
   no truncar ni saturar la navbar angosta. */
@media (max-width: 540px) {
  .nav-avatar .name,
  .nav-avatar .chev { display: none; }
  .nav-avatar { padding: 4px; }
}

/* Logo svg wrapper (replica de index.html) — alias del .nav-logo existente */
.logo-svg { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo-svg img { height: 28px; }

/* Tabs centradas (Productos · Recursos · Soporte) */
.nav-tabs {
  display: flex; align-items: center; gap: 2px;
  position: absolute; left: 50%; transform: translateX(-50%);
}
@media (max-width: 767px) { .nav-tabs { display: none; } }
.nav-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 20px; border-radius: 9999px;
  font-size: 14px; font-weight: 500; font-family: inherit;
  color: rgba(255,255,255,0.70);
  background: transparent; border: none; cursor: pointer;
  transition: all var(--motion-slow) var(--ease-default);
  text-decoration: none; white-space: nowrap;
}
.nav-tab:hover,
.nav-tab.active { color: #FFFFFF; background: rgba(255,255,255,0.10); }

.nav-tab-chevron {
  transition: transform var(--motion-slow) var(--ease-default);
  flex-shrink: 0;
}
.nav-tab[aria-expanded="true"] .nav-tab-chevron { transform: rotate(180deg); }
.nav-tab-direct { text-decoration: none; }

/* Right actions slot (link Iniciar sesión + avatar + CTA Solicitar) */
.nav-actions {
  display: flex; align-items: center; gap: 16px;
  margin-left: auto;
}
@media (max-width: 767px) { .nav-actions { display: none; } }
.nav-link-text {
  color: #FFFFFF; font-size: 13px; font-weight: 500;
  text-decoration: none;
  transition: opacity var(--motion-fast);
  white-space: nowrap;
}
.nav-link-text:hover { opacity: 0.75; }
.nav-avatar-slot { display: inline-flex; align-items: center; gap: 8px; }

/* ──────── NOTIFICACIONES · bell + dropdown (S3.5-C) ──────── */
.notif-wrap { position: relative; display: inline-flex; align-items: center; }
.notif-bell {
  position: relative;
  width: 36px; height: 36px;
  border: 0; background: transparent; cursor: pointer;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.85);
  transition: background var(--motion-fast), color var(--motion-fast);
}
.notif-bell:hover { background: rgba(255,255,255,0.14); color: #fff; }
.notif-bell svg { width: 18px; height: 18px; }
/* S52 · dot verde en lugar de tag rojo con número · no tapa el icono campana.
   El número exacto vive dentro del dropdown; el dot solo indica "hay nuevas". */
.notif-bell-badge {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; padding: 0;
  border-radius: 999px;
  background: var(--color-accent-green, #1FAE5F);
  color: transparent;
  font-size: 0; line-height: 0;
  text-indent: -9999px; overflow: hidden;
  border: 2px solid var(--ink, #101418);
  box-sizing: content-box;
  pointer-events: none;
}
.notif-bell-badge[hidden] { display: none !important; }
.navbar.is-scrolled .notif-bell { color: var(--fg2); }
.navbar.is-scrolled .notif-bell:hover { background: var(--surface-2); color: var(--fg1); }
.navbar.is-scrolled .notif-bell-badge { border-color: var(--surface); }

.notif-dropdown {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  width: 380px; max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid var(--border, #ECF0F3);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15,20,25,0.18), 0 2px 6px rgba(15,20,25,0.08);
  z-index: 1000;
  overflow: hidden;
  animation: notif-pop-in var(--motion-fast) var(--ease-default);
}
.notif-dropdown[hidden] { display: none !important; }
@keyframes notif-pop-in { from { opacity: 0; transform: scale(0.92) translateY(-6px); } to { opacity: 1; transform: none; } }
.notif-dropdown-header {
  padding: 16px 18px 12px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border, #ECF0F3);
}
.notif-dropdown-header h3 {
  margin: 0; font-size: 14px; font-weight: 600;
  color: var(--fg1, #101418); letter-spacing: -0.01em;
}
.notif-count {
  font-size: 11px; font-weight: 500; color: var(--fg3, #6B7480);
}
.notif-count.has-unread { color: var(--color-accent-green, #1FAE5F); }
.notif-list { max-height: 420px; overflow-y: auto; }
.notif-list::-webkit-scrollbar { width: 6px; }
.notif-list::-webkit-scrollbar-thumb { background: var(--border-strong, #D6DCE0); border-radius: 999px; }
.notif-item {
  display: grid;
  grid-template-columns: 32px 1fr 10px;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border, #ECF0F3);
  cursor: pointer;
  text-decoration: none; color: inherit;
  transition: background var(--motion-fast);
}
.notif-item:hover { background: var(--surface-2, #F4F6F8); }
.notif-item:last-child { border-bottom: 0; }
.notif-item-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.notif-item-icon svg { width: 16px; height: 16px; }
.notif-item-body { min-width: 0; }
.notif-item-title {
  margin: 0 0 2px;
  font-size: 13px; font-weight: 600; color: var(--fg1, #101418);
  line-height: 1.35;
  /* clamp 2 líneas */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notif-item-msg {
  margin: 0 0 4px;
  font-size: 12px; font-weight: 400; color: var(--fg3, #6B7480);
  line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notif-item-time {
  margin: 0;
  font-size: 11px; color: var(--fg4, #8B95A1);
}
.notif-item-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-accent-green, #1FAE5F);
  align-self: center;
  visibility: hidden;
}
.notif-item.is-unread .notif-item-dot { visibility: visible; }
.notif-item.is-unread .notif-item-title { color: var(--fg1, #101418); }
.notif-item.is-unread { background: transparent; }
/* S186 · íconos semánticos SOLO outline (sin tile/relleno) · regla DS */
.notif-item-icon.tipo-doc_vencido { color: var(--color-error, #B83227); }
.notif-item-icon.tipo-doc_por_vencer { color: var(--color-warning, #E89B2A); }
.notif-item-icon.tipo-decision_aprobada { color: var(--color-accent-green, #1FAE5F); }
.notif-item-icon.tipo-decision_rechazada { color: var(--color-error, #B83227); }
.notif-item-icon.tipo-pago_proximo,
.notif-item-icon.tipo-pago_vencido { color: var(--color-warning, #E89B2A); }
.notif-item-icon.tipo-info_general { color: var(--fg3, #6B7480); }
.notif-empty {
  padding: 36px 24px;
  text-align: center;
  color: var(--fg3, #6B7480);
}
.notif-empty svg {
  width: 32px; height: 32px;
  color: var(--fg4, #8B95A1);
  margin-bottom: 10px;
}
.notif-empty p { margin: 0; font-size: 13px; }
@media (max-width: 480px) {
  .notif-dropdown { width: calc(100vw - 24px); right: -8px; }
}

/* CTA verde "Solicitar" */
.nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 20px; height: 36px; border-radius: var(--radius-button);
  background: var(--color-accent-green); color: #FFFFFF;
  font-size: 14px; font-weight: 500; font-family: inherit;
  text-decoration: none; white-space: nowrap;
  transition: background var(--motion-base);
  border: none; cursor: pointer;
}
.nav-cta:hover { background: var(--color-accent-green-deep); }


/* Hamburger MARKETING · solo mobile, vive a la derecha del navbar.
   Distinto del .menu-toggle izquierdo (sidebar del portal). */
.nav-hamburger {
  display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  background: transparent; border: none; color: #FFFFFF; cursor: pointer;
  margin-left: auto;
}
@media (max-width: 767px) { .nav-hamburger { display: flex; } }

/* Dropdown mega-menu (desktop) */
.nav-dropdown {
  position: absolute; top: var(--h-navbar); left: 0; right: 0;
  background: #FFFFFF;
  border-bottom: 1px solid #EEF1F4;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  transform-origin: top;
  transform: scaleY(0); opacity: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 999;
  transition: transform var(--motion-slow) var(--ease-default), opacity var(--motion-slow) var(--ease-default);
}
.nav-dropdown.open {
  transform: scaleY(1); opacity: 1;
  pointer-events: auto;
  transition: transform var(--motion-slow) var(--ease-default), opacity var(--motion-slow) var(--ease-default);
}
@media (max-width: 767px) { .nav-dropdown { display: none; } }
.nav-dropdown-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 40px 24px;
}
@media (min-width: 1024px) { .nav-dropdown-inner { padding: 40px 40px; } }
.nav-dropdown-panel { display: none; }
.nav-dropdown-panel.active {
  display: block;
  animation: navPanelIn var(--motion-slow) ease-out forwards;
}
@keyframes navPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-dropdown-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px;
}
.nav-col-heading {
  font-size: 14px; font-weight: 600; color: #0F172A;
  margin: 0 0 16px; padding: 0;
}
.nav-link {
  display: block; font-size: 14px; color: #5C6B7A;
  line-height: 1.5; margin-bottom: 12px; text-decoration: none;
  transition: color var(--motion-fast);
}
.nav-link:hover,
.nav-col-heading:hover { color: var(--color-accent-green); }

/* Mobile menu marketing (collapsable, sólo mobile) */
.nav-mobile {
  display: none;
  position: absolute; top: var(--h-navbar); left: 0; right: 0;
  background: #FFFFFF;
  border-top: 1px solid #EEF1F4;
  max-height: 0; overflow: hidden;
  z-index: 999;
  transition: max-height var(--motion-slow) var(--ease-default);
}
.nav-mobile.open { max-height: 80vh; overflow-y: auto; }
@media (max-width: 767px) { .nav-mobile { display: block; } }
.nav-mobile-inner { padding: 16px 24px 24px; }
.nav-mobile-section { border-bottom: 1px solid #EEF1F4; margin-bottom: 4px; }
.nav-mobile-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 14px 0; background: none; border: none;
  font-size: 15px; font-weight: 500; color: #0F1419; cursor: pointer;
  font-family: inherit;
}
.nav-mobile-chevron {
  transition: transform var(--motion-slow) var(--ease-default);
  flex-shrink: 0; color: #5C6B7A;
}
.nav-mobile-toggle[aria-expanded="true"] .nav-mobile-chevron { transform: rotate(180deg); }
.nav-mobile-content { display: none; padding-bottom: 16px; }
.nav-mobile-content.open { display: block; }
.nav-mobile-col { margin-bottom: 16px; }
.nav-mobile-heading {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 600; color: #5C6B7A; margin: 0 0 8px;
}
.nav-mobile-direct {
  display: block; padding: 14px 0;
  font-size: 15px; font-weight: 500; color: #0F1419;
  border-bottom: 1px solid #EEF1F4; margin-bottom: 4px;
  text-decoration: none;
}
.nav-cta-mobile {
  display: inline-flex; margin-top: 16px;
  width: 100%; justify-content: center;
}

/* ========================================================================
   APP LAYOUT
   ======================================================================== */
.app {
  flex: 1;
  display: grid;
  /* Homologación sidebar-nav (handoff actualizado): topbar a ancho completo arriba,
     sidebar + main debajo (patrón grid-areas). La columna del sidebar se controla
     con --sb-col, que el JS de colapso alterna entre 248px (expandido) y 72px. */
  --sb-col: 248px;
  grid-template-columns: var(--sb-col) 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas:
    "topbar topbar"
    "sidebar main";
  overflow: hidden;
  min-height: 0;
  transition: grid-template-columns var(--motion-slow) var(--ease-default);
}
.app.is-sb-collapsed { --sb-col: 72px; }
/* S245 · ícono del toggle según estado: panel-left-close (<) expandido = colapsar · panel-left-open (>) colapsado = expandir */
#sbMenuToggle .pl-open { display: none; }
.app.is-sb-collapsed #sbMenuToggle .pl-close { display: none; }
.app.is-sb-collapsed #sbMenuToggle .pl-open { display: inline; }
.sb-topbar { grid-area: topbar; }
.sb-sidebar { grid-area: sidebar; }
.main { grid-area: main; min-height: 0; overflow: auto; }
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  /* S3.5-D · ya no hay navbar marketing arriba. Padding-top normal. */
  padding: 14px 14px 24px;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
/* S3.5-D · brand del sidebar (reemplaza al logo del navbar viejo) */
.sidebar-brand {
  padding: 4px 12px 18px;
  display: flex; align-items: center;
}
.sidebar-brand img {
  height: 24px; width: auto; display: block;
}
.sidebar-brand a {
  display: inline-flex; align-items: center;
  text-decoration: none;
}
.sidebar-section { margin-bottom: 6px; }
.sidebar-section-label {
  padding: 10px 12px 6px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; color: var(--fg4);
  text-transform: uppercase;
}
.sidebar-item {
  display: flex; align-items: center; gap: 11px;
  /* Padding compensa los 14px de padding lateral del .sidebar para que el icon
     visualmente quede en la misma posición (14 sidebar + 12 original = 26px). */
  padding: 9px 26px;
  /* Margin negativo extiende el item hasta los bordes del sidebar para que el
     fill ocupe el ancho completo. */
  margin: 0 -14px;
  /* Esquinas rectas (era var(--r-md)) — fill flush con los bordes del sidebar. */
  border-radius: 0;
  color: var(--fg2);
  font-weight: 500; font-size: 14px;
  cursor: pointer;
  position: relative;
  background: transparent;
  text-align: left;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.sidebar-item .icon {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg3); flex-shrink: 0;
  transition: color var(--motion-fast);
}
.sidebar-item .icon svg { width: 100%; height: 100%; stroke-width: 1.7; }

/* Hover (cursor encima, NO seleccionado): relleno neutro full-width,
   texto + icono ligeramente más oscuros. SIN stripe vertical. */
.sidebar-item:hover {
  background: #F1F5F9;
  color: var(--fg1);
}
.sidebar-item:hover .icon { color: var(--fg2); }

/* Active (seleccionado): mismo relleno neutro, texto + icono VERDES,
   stripe vertical verde brand con esquinas RECTAS (no redondeadas).
   Prevalece sobre hover por orden de declaración. */
.sidebar-item.active {
  background: #F1F5F9;
  color: var(--fg1);
  font-weight: 600;
}
.sidebar-item.active .icon { color: var(--fg1); }
.sidebar-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ink);
  border-radius: 0;
}
.sidebar-item .badge {
  margin-left: auto;
  background: var(--ink); color: white;
  font-size: 10px; font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  letter-spacing: 0.02em;
}
.sidebar-item .badge.warn { background: var(--warning); }
.sidebar-item .badge.error { background: var(--error); }
.sidebar-footer {
  margin-top: auto;
  padding-top: 16px;
}

/* ════════════════════════════════════════════════════════════════════════
   APP TOPBAR (S3.5-D) · reemplaza al navbar marketing en mi-exante
   ════════════════════════════════════════════════════════════════════════ */
.app-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
  min-height: 64px;
  box-sizing: border-box;
}
.app-topbar-title {
  margin: 0;
  font-size: 13px; font-weight: 500;
  color: var(--fg1);
  letter-spacing: normal;
  line-height: 1.2;
}
.app-topbar-actions {
  display: flex; align-items: center; gap: 16px;
}
.topbar-icon-btn {
  position: relative;
  width: 38px; height: 38px;
  border: 0; background: transparent;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--fg2);
  transition: background var(--motion-fast), color var(--motion-fast);
}
.topbar-icon-btn:hover { background: var(--surface-2, #F4F6F8); color: var(--fg1); }
.topbar-icon-btn svg { width: 18px; height: 18px; }
.topbar-icon-btn .badge-red {
  /* S186 · homologado al DS y al navbar: dot verde de "hay nuevas" (sin número rojo) */
  position: absolute; top: 5px; right: 5px;
  width: 8px; height: 8px; min-width: 0; padding: 0;
  border-radius: 999px;
  background: var(--color-accent-green, #1FAE5F); color: transparent;
  font-size: 0; line-height: 0; text-indent: -9999px; overflow: hidden;
  border: 2px solid var(--surface);
  box-sizing: content-box;
}
.topbar-icon-btn .badge-red[hidden] { display: none !important; }
.topbar-avatar-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 4px 8px 4px 4px;
  border-radius: var(--r-pill);
  border: 0; background: transparent;
  cursor: pointer;
  color: var(--fg1);
  font-family: inherit; font-size: 13px; font-weight: 500;
  transition: background var(--motion-fast);
}
.topbar-avatar-btn:hover { background: var(--surface-2, #F4F6F8); }
.topbar-avatar-btn .avatar-circle {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
/* S194 · homologado al backoffice: avatar gradiente violet->rose + divisor vertical */
.app-topbar #topbarAvatarInitial { background: linear-gradient(135deg,#7A5BC2,#C42784) !important; color: #fff; }
.app-topbar .tb-divider { width: 1px; height: 24px; background: var(--color-border-subtle, #E5E7EB); display: inline-block; flex-shrink: 0; }
.topbar-avatar-btn .avatar-chev { color: var(--fg3); display: inline-block; width: 14px; height: 14px; flex-shrink: 0; transition: transform var(--motion-fast); }
.topbar-avatar-btn[aria-expanded="true"] .avatar-chev { transform: rotate(180deg); color: var(--fg2); }
.topbar-wrap { position: relative; display: inline-flex; align-items: center; }

/* ════════════════════════════════════════════════════════════════════════
   SIDEBAR-NAV · réplica 1:1 del handoff sidebar-nav-mi-exante (S223)
   Desktop = exacto al prototipo (colapso 248↔72 + tooltip).
   Móvil <768px = off-canvas con backdrop (decisión Ricardo).
   Íconos stroke-width 1.5 (estándar DS, no 2 del prototipo).
   ════════════════════════════════════════════════════════════════════════ */
.sb-sidebar {
  width: 248px;
  flex-shrink: 0;
  min-width: 0;                         /* obligatorio: permite colapsar el riel */
  background: var(--color-surface);
  border-right: 1px solid var(--color-border-subtle);
  display: flex; flex-direction: column;
  overflow: hidden;
  height: 100%;
  transition: width var(--motion-slow) var(--ease-default);
}
.sb-sidebar.is-collapsed { width: 72px; }

/* Spacer superior 8px · marca fuera del shell (handoff actualizado) */
.sb-spacer-top { height: 8px; flex-shrink: 0; }

.sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 0; }
.sb-sidebar.is-collapsed .sb-nav { overflow-y: visible; }

.sb-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  border: none; background: transparent; text-align: left; cursor: pointer;
  font-family: inherit;
  padding: 10px 14px 10px 20px;
  color: var(--fg2);
  position: relative; z-index: 0;
  transition: color var(--motion-fast),
              padding var(--motion-slow) var(--ease-default), gap var(--motion-slow) var(--ease-default);
}
/* Píldora = capa de fondo (::before) · el ítem NO cambia de tamaño, solo el fondo
   de la capa hace fade. Expandido inset 8px (margen lateral); radius 10. */
.sb-item::before {
  content: ""; position: absolute; inset: 2px 8px; z-index: -1;
  background: transparent; border-radius: 10px;
  transition: background var(--motion-fast) var(--ease-default);
}
.sb-item:hover { color: var(--fg1); }
.sb-item:hover::before { background: var(--color-bg-subtle); }
.sb-item.is-active { color: var(--fg1); }
.sb-item.is-active::before { background: var(--color-bg-subtle); }
.sb-item__icon { flex-shrink: 0; width: 19px; height: 19px; display: block; color: inherit; }
.sb-item__icon svg { width: 100%; height: 100%; display: block; }
.sb-item__label {
  flex: 1;
  font-size: 13.5px; font-weight: 500; white-space: nowrap; letter-spacing: -0.005em;
  overflow: hidden; max-width: 170px; opacity: 1; transform: translateX(0);
  transition: opacity var(--motion-base), max-width var(--motion-slow) var(--ease-default), transform var(--motion-base);
}
.sb-item.is-active .sb-item__label { font-weight: 600; color: var(--fg1); }
.sb-sidebar.is-collapsed .sb-item { padding: 11px 0 11px 26px; gap: 0; }
/* Colapsado: píldora centrada simétrica en el riel */
.sb-sidebar.is-collapsed .sb-item::before { inset: 2px 14px; }
.sb-sidebar.is-collapsed .sb-item__label { max-width: 0; opacity: 0; transform: translateX(-8px); }

/* Badge (conserva ids existentes: badge-solicitudes/contratos/expediente).
   Pastilla neutra alineada a la derecha; se oculta en colapsado.
   El JS de conteo real alterna display:none↔inline-flex. */
.sb-item .badge {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px;
  background: rgba(28,26,24,.06); color: var(--fg2);
  font: 600 11px/1 var(--font-sans, 'Inter', sans-serif);
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  transition: opacity var(--motion-base);
}
.sb-item .badge.warn { background: var(--warning); color: #fff; }
.sb-item .badge.error { background: var(--error); color: #fff; }
.sb-sidebar.is-collapsed .sb-item .badge { opacity: 0; pointer-events: none; }

.sb-footer { border-top: 1px solid var(--color-border-subtle); padding: 8px; flex-shrink: 0; transition: padding var(--motion-slow) var(--ease-default); }
.sb-sidebar.is-collapsed .sb-footer { padding: 8px 0; }
.sb-footer .sb-item { padding: 10px 12px; border-radius: var(--radius-md, 10px); }
.sb-sidebar.is-collapsed .sb-footer .sb-item { padding: 10px 0 10px 20px; }
.sb-footer .sb-item__icon { width: 18px; height: 18px; }

/* Tooltip del riel colapsado · nodo único reposicionado por JS, vive en .app */
/* S276 · tooltip CLARO (homologado con el backoffice): superficie, tinta fg1, borde subtle */
.sb-tooltip {
  position: absolute; left: 80px; z-index: 120;
  background: var(--color-surface); color: var(--fg1);
  border: 1px solid var(--color-border-subtle);
  font: 500 12.5px/1 var(--font-sans, 'Inter', sans-serif);
  padding: 8px 12px; border-radius: var(--radius-md, 10px); box-shadow: var(--shadow-md, 0 6px 18px -8px rgba(15,20,25,0.18));
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateX(-6px);
  transition: opacity var(--motion-fast) var(--ease-default), transform var(--motion-fast) var(--ease-default);
}
.sb-tooltip.is-visible { opacity: 1; transform: translateX(0); }

/* S276 · clúster de marca del topbar: isotipo estático + divisor a 72px */
.sb-brandcluster { display: flex; align-items: center; gap: 0; min-width: 0; flex-shrink: 0; }
.sb-iconbtn.sb-iso { cursor: pointer; } /* S279 · isotipo clickeable → Inicio */
.sb-iconbtn.sb-iso:hover { background: var(--color-bg-subtle); }
.sb-iconbtn.sb-iso svg { width: 21px; height: 20px; }
.sb-divider-72 { margin: 0 23px 0 15px; } /* S278 · divisor a x=71px, sobre el borde del rail colapsado (72px, border-box → línea 71→72); antes 17px lo dejaba a 73px */
/* Footer = toggle colapsar/expandir: hover SOLO color del ícono (sin píldora), ícono 19px, swap panel-left */
.sb-item.sb-foot-toggle { color: var(--fg2); }
.sb-item.sb-foot-toggle:hover { background: transparent; }
.sb-foot-toggle::before { background: transparent !important; }
.sb-foot-toggle .sb-item__icon { width: 19px; height: 19px; color: var(--fg2); }
/* Hover: el ícono se OSCURECE fg2 → fg1 (handoff §6) */
.sb-foot-toggle:hover .sb-item__icon { color: var(--fg1) !important; }
.sb-foot-toggle .pl-open { display: none; }
.app.is-sb-collapsed .sb-foot-toggle .pl-close { display: none; }
.app.is-sb-collapsed .sb-foot-toggle .pl-open { display: inline; }
/* ============================================================
   S293 · Footer cluster icon-only + brand-zone (handoff_sidebar_navbar, adaptado a mi-exante)
   ============================================================ */
.sb-footer.sb-foot-cluster{ position:relative; height:60px; padding:0; border-top:1px solid var(--color-border-subtle); flex-shrink:0; transition:height var(--motion-slow) var(--ease-default); }
.sb-foot-avatar{ position:absolute; left:14px; top:14px; width:32px; height:32px; padding:0; border:none; background:transparent; cursor:pointer; border-radius:999px; display:flex; align-items:center; justify-content:center; transition:left var(--motion-slow) var(--ease-default),top var(--motion-slow) var(--ease-default),transform var(--motion-fast,120ms) var(--ease-default); }
.sb-foot-avimg{ width:32px; height:32px; border-radius:999px; background:var(--gradient-avatar-1); color:#fff; display:flex; align-items:center; justify-content:center; font:600 11.5px 'Inter',sans-serif; }
.sb-foot-icon{ position:absolute; width:40px; height:40px; padding:0; border:none; background:transparent; cursor:pointer; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; color:var(--fg2); transition:left var(--motion-slow) var(--ease-default),top var(--motion-slow) var(--ease-default),color var(--motion-fast,120ms); }
.sb-foot-icon .sb-item__icon{ position:relative; z-index:1; width:19px; height:19px; display:block; color:inherit; }
.sb-foot-icon .sb-item__icon svg{ width:100%; height:100%; display:block; }
.sb-foot-toggle{ left:152px; top:10px; }
.sb-foot-logout{ left:194px; top:10px; }
/* avatar del topbar reubicado al footer → ocultar (conservar en DOM para la identidad JS) */
#topbarAvatar, #topbarAvatarDropdown{ display:none !important; }
/* S294 · brand-zone: ancho = sidebar −19 → la divisoria cae en la LÍNEA del borde del sidebar (no 1px a la derecha). clip-path recorta SOLO a la derecha: el wordmark expandido ya no se corta a la izquierda. */
.sb-iconbtn.sb-brandzone{ position:relative; width:calc(var(--sb-col) - 19px); height:64px; overflow:visible; clip-path:inset(-100px 0px -100px -200px); flex-shrink:0; padding:0; transition:width var(--motion-slow) var(--ease-default); }
.sb-iconbtn.sb-brandzone:hover{ background:transparent; }
/* S295 · foco por teclado de la marca: outline HACIA ADENTRO (offset negativo) para que el clip-path del brand-zone (recorta a la derecha en la divisoria) no lo corte → contorno cerrado, no caja rota. */
.sb-iconbtn.sb-brandzone:focus-visible{ outline:2px solid var(--color-action-ink); outline-offset:-2px; }
.sb-brandcluster .sb-divider-72{ height:64px; margin:0 22px 0 0; } /* S293 · especificidad para ganar a .sb-divider (24px) */

/* ---------- TOPBAR (handoff) ---------- */
.sb-topbar {
  position: sticky; top: 0; z-index: 50;
  height: 64px; flex-shrink: 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex; align-items: center; gap: 16px;
  padding: 0 18px;
  box-sizing: border-box;
}
.sb-iconbtn {
  position: relative;
  width: 38px; height: 38px;
  border: none; background: transparent; cursor: pointer;
  color: var(--fg2);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md, 10px);
  flex-shrink: 0;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.sb-iconbtn:hover { background: var(--color-bg-subtle); color: var(--fg1); }
.sb-iconbtn:focus-visible { outline: 2px solid var(--color-action-ink); outline-offset: 2px; }
/* S3.6 · trigger del Asistente activo cuando el dock está abierto */
/* Activo (dock abierto): homologado con backoffice — gris sutil, no ink. */
#chatFabTopbar.active { background: var(--color-bg-subtle); color: var(--fg1); }
.sb-iconbtn svg { width: 19px; height: 19px; }
.sb-iconbtn--menu { width: 36px; height: 36px; }
/* S276.1 · dot de la campana IDÉNTICO al backoffice: content-box para que el borde
   sea un ANILLO blanco que separa el rojo de la campana (antes border-box lo pegaba). */
.sb-iconbtn__dot {
  position: absolute; top: 8px; right: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-error);
  border: 1.5px solid var(--color-surface);
  box-sizing: content-box;
  /* Solo el punto: ocultar el número de no-leídas que se metía adentro (= backoffice) */
  font-size: 0; color: transparent; overflow: hidden; line-height: 0;
}
/* Campana a 18px (= backoffice) en vez de los 19px del resto de íconos del topbar */
#topbarBell svg { width: 18px; height: 18px; }
.sb-iconbtn__dot[hidden] { display: none !important; }
.sb-breadcrumb { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }
.sb-breadcrumb__mod { color: var(--fg1); font-weight: 500; }
.sb-search {
  display: flex; align-items: center; gap: 9px;
  background: var(--color-bg-subtle);
  border: 1px solid transparent;
  border-radius: var(--radius-md, 10px);
  padding: 8px 13px;
  width: 340px; max-width: 34vw; flex-shrink: 1;
}
.sb-search svg { flex-shrink: 0; }
.sb-search__ph { font-size: 13.5px; color: var(--fg3); flex: 1; }
.sb-search__kbd {
  font: 500 11px/1 var(--font-mono, ui-monospace, Menlo, monospace); color: var(--fg3);
  background: var(--color-surface); border: 1px solid var(--color-border-subtle);
  border-radius: 4px; padding: 3px 5px;
}
.sb-spacer { flex: 1; }
.sb-divider { width: 1px; height: 24px; background: var(--color-border-subtle); flex-shrink: 0; }
.sb-avatar { display: flex; align-items: center; gap: 9px; padding: 4px 8px 4px 4px; border-radius: var(--r-pill); cursor: pointer; border: 0; background: transparent; font-family: inherit; color: var(--fg1); transition: background var(--motion-fast); }
.sb-avatar:hover { background: var(--color-bg-subtle); }
.sb-avatar__img {
  width: 30px; height: 30px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, #7A5BC2, #C42784); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 500; flex-shrink: 0;
}
.sb-avatar__name { font-size: 13px; font-weight: 500; }
.sb-avatar__chev { color: var(--fg3); flex-shrink: 0; transition: transform var(--motion-fast); }
.sb-avatar[aria-expanded="true"] .sb-avatar__chev { transform: rotate(180deg); color: var(--fg2); }
/* Bloque de acciones del topbar nuevo: íconos pegados (gap 0) + divisor + avatar */
/* S276.1 · espaciado entre íconos del navbar homologado al backoffice (gap 12px) */
.sb-actions { display: flex; align-items: center; gap: 12px; }
.sb-actions[hidden] { display: none !important; }
.sb-actions .sb-divider { margin: 0; }

/* Backdrop del off-canvas móvil (oculto en desktop) */
.sb-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 95;
  background: rgba(15,20,25,0.45);
  opacity: 0; transition: opacity var(--motion-base) var(--ease-default);
}

@media (prefers-reduced-motion: reduce) {
  .sb-sidebar, .sb-item, .sb-item::before, .sb-item__label, .sb-footer, .sb-tooltip, .app { transition-duration: 0.01ms !important; }
}

/* Dropdowns del topbar (bell + avatar) · reutiliza patrón de S3.5-C */
.topbar-dropdown {
  position: absolute;
  top: calc(100% + 6px); right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(15,20,25,0.18), 0 2px 6px rgba(15,20,25,0.08);
  z-index: 1000;
  overflow: hidden;
  animation: topbar-dd-pop var(--motion-fast) var(--ease-default);
}
.topbar-dropdown[hidden] { display: none !important; }
/* S15-fix · Efecto Emerger igual que backoffice (homologado con S57 chatbot) */
@keyframes topbar-dd-pop { from { opacity: 0; transform: scale(0.92) translateY(-6px); } to { opacity: 1; transform: none; } }
body.bell-open #topbarBellDropdown,
body.avatar-open #topbarAvatarDropdown {
  animation: me-topbar-emerge var(--motion-fast) var(--ease-default) both;
  transform-origin: top right;
}
body.bell-closing #topbarBellDropdown,
body.avatar-closing #topbarAvatarDropdown {
  animation: me-topbar-closeout var(--motion-fast) var(--ease-exit) both;
  transform-origin: top right;
}
@keyframes me-topbar-emerge {
  from { opacity: 0; transform: scale(0.92) translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes me-topbar-closeout {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: scale(0.92) translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  body.bell-open #topbarBellDropdown,
  body.bell-closing #topbarBellDropdown,
  body.avatar-open #topbarAvatarDropdown,
  body.avatar-closing #topbarAvatarDropdown { animation-duration: 0.001s; }
}

/* Bell dropdown */
.topbar-dd-bell { width: 430px; max-width: calc(100vw - 32px); }
.topbar-dd-bell-header {
  padding: 18px 22px 16px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.topbar-dd-bell-header h3 {
  margin: 0; font-size: 20px; font-weight: 700; color: var(--fg1);
  letter-spacing: -0.015em;
}
.topbar-dd-bell-count {
  font-size: 11px; font-weight: 500; color: var(--fg3);
}
.topbar-dd-bell-count.has-unread { color: var(--accent-go, var(--color-accent-green, #1FAE5F)); }

/* S191 · segmented Todas/No leídas en el header del mini dropdown (homologado al backoffice/handoff) */
.topbar-dd-bell-header .np-seg { position: relative; display: inline-flex; align-items: center; background: var(--color-bg-subtle, #F2F4F6); padding: 4px; border-radius: 12px; gap: 3px; flex-shrink: 0; }
/* S283 · Pastilla deslizante (magic thumb) · DS Exante · una sola pastilla que se desliza/redimensiona bajo el tab activo. */
.seg-thumb { position: absolute; top: 0; left: 0; width: 0; height: 0; border-radius: 8px; background: var(--surface, #fff); box-shadow: 0 1px 2px rgba(15,20,25,0.06), 0 0 0 1px rgba(15,20,25,0.04); transform: translate(0,0); pointer-events: none; z-index: 0; transition: transform var(--motion-base, 200ms) var(--ease-default), width var(--motion-base, 200ms) var(--ease-default), height var(--motion-base, 200ms) var(--ease-default); }
.np-seg:not([data-ready]) .seg-thumb, .nc-tabs:not([data-ready]) .seg-thumb { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .seg-thumb { transition: none; } }
.topbar-dd-bell-header .np-seg-btn { position: relative; z-index: 1; font: 500 13px 'Inter', sans-serif; color: var(--fg2); padding: 6px 15px; border-radius: 8px; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: color var(--motion-fast); }
.topbar-dd-bell-header .np-seg-btn:hover { color: var(--fg1); }
.topbar-dd-bell-header .np-seg-btn.is-on { color: var(--fg1); font-weight: 600; }
.topbar-dd-bell-header .np-seg-badge { font: 600 11px 'Inter', sans-serif; background: var(--color-accent-green, #1FAE5F); color: #fff; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.topbar-dd-bell-header .np-seg-badge[hidden] { display: none !important; }

/* S282 · alto reservado estable: el panel abre directo a su tamaño final
   (cargando/vacío/lleno comparten alto) → sin el salto en dos tiempos. */
.topbar-dd-bell-list { min-height: min(420px, 56vh); max-height: min(420px, 56vh); overflow-y: auto; }
.topbar-dd-bell-list::-webkit-scrollbar { width: 6px; }
.topbar-dd-bell-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
.topbar-notif-item {
  display: grid;
  grid-template-columns: 32px 1fr 10px;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none; color: inherit;
  transition: background var(--motion-fast);
}
.topbar-notif-item:hover { background: var(--surface-2, #F4F6F8); }
.topbar-notif-item:last-child { border-bottom: 0; }
.topbar-notif-item.is-unread { background: transparent; }
.topbar-notif-item-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.topbar-notif-item-icon svg { width: 16px; height: 16px; }
/* S186 · íconos semánticos SOLO outline (sin tile/relleno) · regla DS */
.topbar-notif-item-icon.t-error { color: var(--error); }
.topbar-notif-item-icon.t-warn { color: var(--color-warning, #E89B2A); }
.topbar-notif-item-icon.t-info { color: var(--fg3); }
.topbar-notif-item-icon.t-success { color: var(--accent-go, #1FAE5F); }
.topbar-notif-item-title {
  margin: 0 0 2px;
  font-size: 13px; font-weight: 600; color: var(--fg1);
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.topbar-notif-item-msg {
  margin: 0 0 4px;
  font-size: 12px; color: var(--fg3); font-weight: 400;
  line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.topbar-notif-item-time {
  margin: 0; font-size: 11px; color: var(--fg4);
}
.topbar-notif-item-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-go, var(--color-accent-green, #1FAE5F));
  align-self: center; visibility: hidden;
}
.topbar-notif-item.is-unread .topbar-notif-item-dot { visibility: visible; }
.topbar-dd-bell-empty {
  min-height: min(420px, 56vh); box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 24px;
  text-align: center;
  color: var(--fg3);
}
.topbar-dd-bell-empty svg {
  width: 32px; height: 32px;
  color: var(--fg4); margin-bottom: 10px;
}
.topbar-dd-bell-empty p { margin: 0; font-size: 13px; }

/* ═══ S181 · Centro de notificaciones · homólogo al backoffice (.nc-* / .np-ic) ═══ */
/* S188 · footer homologado al backoffice (.np-foot): texto plano a todo el ancho, sin píldora */
.topbar-dd-bell-foot { border-top: 1px solid var(--color-border-subtle, #E5E7EB); padding: 0; }
.topbar-dd-bell-all { width: 100%; padding: 14px 20px; border: 0; background: transparent; border-radius: 0 0 12px 12px; font: 500 13px Inter, sans-serif; color: var(--fg2, #4B5563); cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast); }
.topbar-dd-bell-all:hover { background: var(--color-bg-subtle, #F2F4F6); color: var(--fg1, #0F1419); }
/* Icono de notificación */
.np-ic { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--ic, #6E7378); margin-top: 1px; --icsw: 1.7; }
.np-ic svg { width: 20px; height: 20px; stroke-width: var(--icsw, 1.7); }
.np-ic.is-warning { --ic: var(--color-warning, #E89B2A); }
.np-ic.is-success { --ic: var(--color-accent-green, #1FAE5F); }
.np-ic.is-error   { --ic: var(--color-error,   #B83227); }
.np-ic.is-notice  { --ic: #6E7378; }
.np-ic.is-info    { --ic: var(--color-info,    #3A6FB5); }
/* Overlay centrado (mismo efecto que el chat grande) */
.mi-nc-backdrop { position: fixed; inset: 0; background: rgba(15,20,25,.32); z-index: 5000; }
.mi-nc-backdrop[hidden] { display: none; }
.mi-nc-overlay { position: fixed; inset: 0; margin: auto; width: min(1080px, 94vw); height: min(820px, 90vh); z-index: 5001; background: var(--color-bg, #FAFBFC); border: 1px solid var(--color-border-subtle, #E5E7EB); border-radius: 16px; box-shadow: 0 24px 64px -12px rgba(15,20,25,.18); overflow: hidden; padding: 18px 22px; display: flex; flex-direction: column; animation: mi-nc-emerge .4s var(--ease-spring) both; }
.mi-nc-overlay[hidden] { display: none; }
@keyframes mi-nc-emerge { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.mi-nc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mi-nc-title { margin: 0; font: 600 20px Inter, sans-serif; color: var(--fg1); }
.mi-nc-sub { margin: 2px 0 0; font: 400 13px Inter, sans-serif; color: var(--fg3); }
.mi-nc-actions { display: flex; align-items: center; gap: 8px; }
/* S187 · X de cierre limpia (sin caja): ghost icon, no borde/fondo, X 18px gris */
.mi-nc-close { width: 34px; height: 34px; padding: 0; justify-content: center; background: transparent; border: 0; box-shadow: none; border-radius: 8px; }
.mi-nc-close:hover { background: var(--surface-2, #F2F4F6); }
.mi-nc-close svg { width: 18px; height: 18px; color: var(--fg3); }
/* Split list+detail */
.mi-nc-overlay .nc-split { flex: 1; min-height: 0; height: auto; margin-top: 14px; background: var(--surface, #fff); border: 1px solid var(--color-border-subtle, #E5E7EB); border-radius: 14px; overflow: hidden; display: flex; }
.nc-split-list { width: 360px; flex-shrink: 0; border-right: 1px solid var(--color-border-subtle, #E5E7EB); display: flex; flex-direction: column; }
.nc-split-tabs { padding: 14px; border-bottom: 1px solid var(--color-border-subtle, #E5E7EB); }
.nc-tabs { position: relative; display: flex; gap: 4px; background: var(--surface-2, #F2F4F6); border-radius: 10px; padding: 4px; }
.nc-tab { position: relative; z-index: 1; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 10px; border-radius: 8px; background: transparent; border: 0; font: 500 13px Inter, sans-serif; color: var(--fg2); cursor: pointer; transition: color var(--motion-fast); }
.nc-tab:hover { color: var(--fg1); }
.nc-tab.is-on { color: var(--fg1); font-weight: 600; }
.nc-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--color-accent-green, #1FAE5F); color: #fff; font: 600 10px Inter, sans-serif; font-variant-numeric: tabular-nums; }
.nc-split-scroll { flex: 1; overflow-y: auto; }
.nc-group-sm { padding: 10px 16px; font: 500 11px Inter, sans-serif; color: var(--fg3); letter-spacing: .12em; text-transform: uppercase; background: var(--surface-2, #F8F9FA); border-bottom: 1px solid var(--color-border-subtle, #E5E7EB); }
.nc-li { width: 100%; text-align: left; display: flex; align-items: flex-start; gap: 13px; padding: 13px 16px; border: 0; border-bottom: 1px solid var(--color-border-subtle, #E5E7EB); background: var(--surface, #fff); cursor: pointer; position: relative; font-family: inherit; }
.nc-li:hover, .nc-li.is-sel { background: var(--surface-2, #F2F4F6); }
.nc-li .np-ic { margin-top: 1px; } .nc-li .np-ic svg { width: 21px; height: 21px; }
.nc-li.is-read .np-ic { opacity: 1; }
.nc-li-body { flex: 1; min-width: 0; }
.nc-li-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding-right: 16px; }
.nc-li-title { font: 600 14px Inter, sans-serif; color: var(--fg1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.nc-li.is-read .nc-li-title { font-weight: 500; }
.nc-li-time { font: 500 11px Inter, sans-serif; color: var(--fg3); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.nc-li-prev { margin: 4px 0 0; font: 400 12.5px/1.45 Inter, sans-serif; color: var(--fg3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nc-li-dot { position: absolute; top: 18px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent-green, #1FAE5F); }
.nc-detail { flex: 1; overflow-y: auto; padding: 32px 40px; }
.nc-detail-empty { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--fg3); font: 400 14px Inter, sans-serif; }
.nc-detail-head { display: flex; align-items: center; gap: 16px; }
.nc-detail-head .np-ic svg { width: 30px; height: 30px; }
.nc-detail-title { margin: 0; font: 600 22px/1.25 Inter, sans-serif; color: var(--fg1); letter-spacing: -.01em; }
.nc-detail-col { margin-top: 18px; }
.nc-detail-body { margin: 16px 0 24px; font: 400 15px/1.6 Inter, sans-serif; color: var(--fg2); max-width: 60ch; }
.nc-detail-meta { border-top: 1px solid var(--color-border-subtle, #E5E7EB); padding-top: 16px; }
.nc-meta-row { display: flex; gap: 14px; align-items: baseline; padding: 7px 0; }
.nc-meta-k { width: 132px; flex-shrink: 0; font: 500 13px Inter, sans-serif; color: var(--fg3); }
.nc-meta-v { font: 500 13px Inter, sans-serif; color: var(--fg1); }
.nc-detail-acts { display: flex; gap: 10px; align-items: center; margin-top: 28px; }
.nc-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; font: 500 13px Inter, sans-serif; padding: 9px 16px; cursor: pointer; }
.nc-btn-ghost { background: var(--surface, #fff); color: var(--fg1); border: 1px solid var(--color-border-subtle, #E5E7EB); }
.nc-btn-ghost:hover { background: var(--surface-2, #F2F4F6); }
.nc-btn-outline { background: var(--color-action-ink, #0F1419); color: #fff; border: 1px solid var(--color-action-ink, #0F1419); }
.nc-btn-outline:hover { filter: brightness(1.08); }
.nc-btn svg { color: var(--fg3); }
.nc-btn-outline svg { color: #fff; }
.nc-empty { padding: 64px 24px; text-align: center; }
.nc-empty .check { width: 56px; height: 56px; border-radius: 50%; background: var(--color-accent-green-bg, #E6F7EE); color: var(--color-accent-green-deep, #16904E); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.nc-empty .check svg { width: 28px; height: 28px; }
.nc-empty h4 { margin: 0 0 6px; font: 600 16px Inter, sans-serif; color: var(--fg1); }
.nc-empty p { margin: 0; font: 400 14px Inter, sans-serif; color: var(--fg3); }
@media (max-width: 760px) {
  .mi-nc-overlay { padding: 14px; }
  .mi-nc-overlay .nc-split { flex-direction: column; }
  .nc-split-list { width: 100%; border-right: 0; border-bottom: 1px solid var(--color-border-subtle, #E5E7EB); max-height: 45%; }
  .nc-detail { padding: 20px; }
}

/* Avatar dropdown */
/* Homologado con backoffice: menús del topbar de la misma familia (header identidad + divisor borde a borde) */
.topbar-dd-menu { width: 280px; padding: 0 0 6px; }
.topbar-dd-avatar { width: 280px; padding: 0 0 6px; }
.topbar-dd-avatar-header {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  margin: 0 0 6px;
}
.topbar-dd-avatar-header .av { width: 34px; height: 34px; border-radius: 999px; background: linear-gradient(135deg, #7A5BC2, #C42784); color: #fff; display: flex; align-items: center; justify-content: center; font: 600 12px 'Inter', sans-serif; flex-shrink: 0; }
.topbar-dd-avatar-header .who { min-width: 0; }
.topbar-dd-avatar-name { font-size: 15px; font-weight: 600; color: var(--fg1); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-dd-avatar-email { font-size: 13px; color: var(--fg3); margin: 1px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-dd-item {
  /* S292 · hover homologado al sidebar/barra: realce inset redondeado (no a borde completo) */
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px;
  margin: 0 6px;
  width: calc(100% - 12px);
  border-radius: var(--radius-md, 10px);
  cursor: pointer;
  font: 500 13.5px 'Inter', sans-serif; color: var(--fg2);
  text-decoration: none;
  background: transparent; border: 0;
  text-align: left;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.topbar-dd-item:hover { background: var(--color-bg-subtle, #F2F4F6); color: var(--fg1); }
.topbar-dd-item svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--fg3); }
.topbar-dd-item:hover svg { color: var(--fg2); }
.topbar-dd-item .it-meta { margin-left: auto; font: 500 11px 'Inter', sans-serif; color: var(--fg3); }
.topbar-dd-item.is-danger { color: var(--color-error-deep, #8C2018); }
.topbar-dd-item.is-danger svg { color: var(--color-error-deep, #8C2018); }
.topbar-dd-item.is-danger:hover { background: var(--error-tint, #F4DCD7); }
.topbar-dd-divider { height: 1px; background: var(--border); margin: 6px 0; }

@media (max-width: 720px) {
  .app-topbar { padding: 12px 16px; }
  .topbar-dd-bell { right: -8px; width: calc(100vw - 32px); max-width: 430px; }
  .topbar-avatar-btn .avatar-name-text { display: none; }
}
/* Sidebar help card (WhatsApp) · variante neutral que se mezcla con el sidebar.
   El verde brillante anterior competía con la navegación; este patrón es
   "invisible hasta que se necesita". Scope al sidebar-footer para no chocar
   con el .help-card del help-grid en la vista de Ayuda. */
.sidebar-footer .help-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
  margin-bottom: 4px;
  transition: border-color var(--motion-fast), background var(--motion-fast);
}
.sidebar-footer .help-card:hover {
  border-color: var(--fg3);
  background: var(--surface-2);
}
.help-icon-wrap {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--surface-2);
  display: inline-flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--fg2);
}
.help-icon-wrap svg { width: 17px; height: 17px; fill: currentColor; }
.help-text {
  display: flex; flex-direction: column;
  gap: 3px; min-width: 0;
}
.help-title { font: 500 12px/1.3 'Inter', sans-serif; color: var(--fg1); }
.help-link {
  font: 400 11px/1.3 'Inter', sans-serif;
  color: var(--fg2);
  display: inline-flex; align-items: center; gap: 5px;
}
.help-link svg {
  width: 10px; height: 10px;
  stroke: currentColor; stroke-width: 1.7;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
  position: relative;
  top: 0.5px;
}

/* ========================================================================
   MAIN
   ======================================================================== */
.main {
  /* S3.5-D · ya no hay navbar arriba. El topbar app vive dentro del main
     (sticky top:0). Sin padding lateral: cada .view administra el suyo
     (preserva max-width: 1180px definido más abajo). Sin display: flex:
     queda block normal, topbar arriba como sticky y views debajo. */
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
/* Centra el view dentro del área del main · márgenes balanceados izq/der.
   S3.5-D · ahora el view administra SU PROPIO padding (antes lo daba .main).
   max-width centra el contenido cuando hay sobra horizontal. */
.main > .view {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding: 40px 56px 80px;
  box-sizing: border-box;
}
.view { display: none; }
.view.active { display: block; }

/* ========================================================================
   HERO
   ======================================================================== */
.hero { margin-bottom: 36px; max-width: 760px; position: relative; }
.hero .eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg4);
  margin-bottom: 14px;
}
.hero .eyebrow a {
  color: var(--fg1);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  cursor: pointer;
}
/* Hero h1 en Playfair Display para títulos de sección. Los <em> embebidos
   (nombre del usuario) renderean italic + verde para énfasis suave. */
.hero h1 {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-weight: 500;
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--fg1);
}
.hero h1 em {
  font-style: italic;
  font-weight: inherit;
  color: var(--accent-go);
}

/* Greeting personalizado vive directo en h1 del hero · em verde reservado al nombre */
.hero p {
  color: var(--fg2);
  font-size: 15px;
  margin: 0;
  max-width: 600px;
  line-height: 1.55;
}

/* ========================================================================
   STATS ROW
   ======================================================================== */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 22px;
}
.stat-card .label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg4); margin-bottom: 10px;
}
.stat-card .value {
  font-weight: 600; font-size: 26px;
  letter-spacing: -0.02em; color: var(--fg1); line-height: 1;
}
.stat-card .value .unit { font-size: 14px; color: var(--fg3); font-weight: 500; margin-left: 4px; }
.stat-card .foot { font-size: 12px; color: var(--fg3); margin-top: 6px; }
.stat-card .foot.is-ink { color: var(--fg1); font-weight: 600; }
.stat-card .foot.is-warn { color: var(--warning); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.stat-card .foot.is-warn svg { width: 12px; height: 12px; stroke-width: 2; }
.stat-card .foot.is-error { color: var(--error); font-weight: 600; }

/* ========================================================================
   SECTION DIVIDER
   ======================================================================== */
.section-divider {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 16px;
  gap: 12px;
}
.section-divider h2 {
  font-weight: 600; font-size: 18px; margin: 0;
  letter-spacing: -0.01em; color: var(--fg1);
}
.section-divider .link {
  font-size: 13px; color: var(--fg1);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  background: transparent; border: 0;
}
.section-divider .link:hover { text-decoration-color: var(--fg1); }

/* ========================================================================
   PILLS · solo 6 canónicas
   ======================================================================== */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(15,20,25,0.05);
  color: var(--fg2);
}
.pill.green { background: var(--accent-go-soft); color: var(--fg1); }
.pill.warn { background: var(--warning-soft); color: var(--warning); }
.pill.error { background: var(--error-soft); color: var(--error); }
.pill.ink { background: var(--ink); color: white; }
.pill.ink .dot { background: white; opacity: 1; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.date-pill {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--fg2);
  padding: 5px 12px;
  font-weight: 500;
}
.pill.date-pill svg { width: 13px; height: 13px; opacity: 0.7; }

/* ========================================================================
   BUTTONS
   ======================================================================== */
.btn {
  padding: 11px 22px;
  border-radius: var(--radius-button);
  border: 0;
  font-family: inherit;
  font-weight: 500; font-size: 14px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--motion-fast);
}
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--color-action-ink); color: white; }
.btn-primary:hover { background: #1A2026; }
.btn-secondary { background: white; color: var(--fg1); border: 1px solid var(--border-strong); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-dark { background: var(--ink); color: white; }
.btn-dark:hover { background: #000; }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-block { display: flex; width: 100%; justify-content: center; }
.btn-lg { padding: 14px 26px; font-size: 15px; }

/* D37 (2026-05-20): variantes accent + ghost para CTAs en Cotizar/Solicitudes */
.btn-accent { background: var(--accent-go); color: white; }
.btn-accent:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--fg1); border: 1px solid var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--fg3); }

/* Badge para estados de cotización (Cotizar view) */
.cot-badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  line-height: 1.2;
}
.cot-badge--success { background: var(--color-success-tint); color: var(--color-accent-green-deep); }
.cot-badge--info    { background: var(--color-info-tint);    color: var(--color-info); }
.cot-badge--warning { background: var(--color-warning-tint); color: #B07016; }
.cot-badge--muted   { background: var(--color-notice-tint);  color: var(--fg2); }

/* ========================================================================
   FORMS
   ======================================================================== */
/* Inputs homologados al patrón del flujo: placeholder visible, label sr-only.
   Borde subtle, rounded ~10px, padding cómodo. */
.input-wrap { position: relative; }
.input-wrap label {
  /* sr-only: invisible visualmente pero accesible por screen readers */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.input-wrap input,
.input-wrap textarea {
  display: block; width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  font: 400 14px/1 'Inter', sans-serif;
  color: var(--fg1); outline: 0;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.input-wrap input::placeholder,
.input-wrap textarea::placeholder { color: var(--fg4); }
.input-wrap input:focus,
.input-wrap textarea:focus { box-shadow: none; }
.input-wrap input:disabled { background: var(--surface-2); color: var(--fg4); cursor: not-allowed; }
.helper { display: flex; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--fg3); }

/* ========================================================================
   BANNERS
   ======================================================================== */
.banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; border-radius: var(--r-md);
  margin-bottom: 14px;
  font-size: 14px; line-height: 1.45;
}
.banner svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
/* S109 · DS v0.5.2 · info usa slate (NOT action blue). Tinte 8% + icono+enlace en --color-info-deep, cuerpo en --fg2. */
.banner-info { background: color-mix(in srgb, var(--color-info) 8%, transparent); color: var(--fg2); }
.banner-info svg { color: var(--color-info); }
.banner-info a { color: var(--color-info); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.banner-error { background: var(--error-soft); color: #991B1B; }
.banner-success { background: var(--accent-go-soft); color: var(--fg1); }

/* ========================================================================
   AUTH SHELL (login, firstPwd, error) — overlay full-page
   ======================================================================== */
.auth-overlay {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}
.auth-overlay.active { display: flex; }
.auth-card {
  width: 100%; max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 44px 44px 36px;
  box-shadow: 0 4px 24px -8px rgba(15, 20, 25, 0.06);
}
.auth-eyebrow {
  color: var(--fg4); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 600;
  margin-bottom: 12px;
}
/* Logo centrado encima del título. */
.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.auth-logo img,
.auth-logo svg {
  width: 44px; height: 44px;
  display: block;
  object-fit: contain;
}
/* Título Playfair Display 400/34 centered, sin italic. */
.auth-card h2 {
  font-family: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  text-align: center;
  color: var(--fg1);
}
.auth-card h2 em { font-style: italic; font-weight: inherit; color: inherit; }
/* Subtitle del hero: Inter 14/1.55 secundario, centered, max 320px. */
.auth-subtitle {
  font: 400 14px/1.55 'Inter', sans-serif;
  color: var(--fg2);
  margin: 0 auto 32px;
  text-align: center;
  max-width: 320px;
}
.auth-form { display: flex; flex-direction: column; }
.auth-fields { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; }

/* Login screen · 3 secciones homologadas para los 3 user flows.
   Section 1: form (email + password + entrar) — cliente con cuenta.
   Section 2: outlined CTA — primera vez / link consumido.
   Section 3: text-link tertiary — prospecto sin cotización. */
.auth-section {
  display: flex; flex-direction: column;
  gap: 10px;
}
.auth-section + .auth-section { margin-top: 0; }
.auth-section h3 {
  font: 600 14px/1.3 'Inter', sans-serif;
  margin: 0;
  color: var(--fg1);
}
.auth-section > p {
  font: 400 13px/1.5 'Inter', sans-serif;
  color: var(--fg2);
  margin: 0 0 4px;
}
/* "Olvidé mi contraseña" right-aligned dentro de su propia row.
   Vive entre .auth-fields y el CTA; el margin-bottom controla el respiro al
   botón Entrar (28px exactos). */
.auth-inline-link {
  display: flex; justify-content: flex-end;
  margin-bottom: 28px;
}
.auth-inline-link a {
  background: transparent; border: 0; cursor: pointer;
  font: 500 13px 'Inter', sans-serif;
  color: var(--fg1);
  padding: 6px 2px;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}
.auth-inline-link a:hover { text-decoration-color: var(--fg1); }

.auth-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--fg4);
  font: 600 10px/1 'Inter', sans-serif;
  text-transform: uppercase; letter-spacing: 0.12em;
  margin: 20px 0;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1; height: 1px;
  background: var(--border);
}
.auth-divider.plain { gap: 0; margin: 16px 0; }
.auth-divider.plain span { display: none; }

.auth-tertiary {
  font: 500 13px/1 'Inter', sans-serif;
  color: var(--fg1);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  cursor: pointer;
  align-self: flex-start;
  padding: 4px 0;
}
.auth-tertiary:hover { text-decoration-color: var(--fg1); }

.auth-back {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.auth-back a {
  font: 500 13px/1 'Inter', sans-serif;
  color: var(--fg2);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}
.auth-back a:hover { color: var(--fg1); text-decoration-color: var(--fg1); }

/* Signup prompt con hairline divider full-width.
   Patrón "Hero respirado + footer divider" — separación clara CTA → footer. */
.auth-signup-prompt {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  text-align: center;
  font: 400 13px/1.5 'Inter', sans-serif;
  color: var(--fg2);
}
.auth-link-btn {
  background: transparent;
  border: 0;
  padding: 0;
  font: 500 13px/1.5 'Inter', sans-serif;
  color: var(--fg1);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}
.auth-link-btn:hover { text-decoration-color: var(--fg1); }

/* CTA Entrar (login) — padding 14×22 + font 14 según spec. Override de .btn-lg
   solo dentro de auth cards. */
.auth-card .btn-block { padding: 14px 22px; font-size: 14px; }

/* S118 · Espaciado overlay Crear cuenta / Restablecer acceso homologado al
   patrón login. Sin auth-fields wrapper (porque el helper vive entre pwd2 y
   pwd3), aplicamos los respiros directo: lead p con 28px abajo, gap 14px
   entre inputs consecutivos, helper con 18px abajo, CTA con 24px arriba. */
#overlayFirstPwd .auth-eyebrow { text-align: center; }
#overlayFirstPwd .auth-card > p {
  font: 400 14px/1.55 'Inter', sans-serif;
  color: var(--fg2);
  margin: 0 auto 28px;
  text-align: center;
  max-width: 340px;
}
#overlayFirstPwd .auth-form .input-wrap + .input-wrap { margin-top: 14px; }
#overlayFirstPwd .auth-form .helper { margin: 8px 0 18px; }
#overlayFirstPwd .auth-form .btn { margin-top: 24px; }
.spinner-wrap {
  display: grid; place-items: center;
  text-align: center;
}
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
  margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ========================================================================
   SOLIC-LIST ROWS
   ======================================================================== */
.solic-list { display: flex; flex-direction: column; gap: 10px; }
.solic-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1.2fr 1fr 20px;
  gap: 20px;
  align-items: center;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: all var(--motion-fast);
}
.solic-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card); transform: translateY(-1px); }
.solic-row.is-disabled { opacity: 0.65; cursor: default; }
.solic-row.is-disabled:hover { transform: none; box-shadow: none; }
.solic-row .folio-block .label { font-size: 10px; color: var(--fg4); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.solic-row .folio-block .value { font-family: 'SF Mono', Menlo, monospace; font-size: 13px; font-weight: 600; color: var(--fg1); }
.solic-row .veh-info .name { font-weight: 600; margin-bottom: 2px; font-size: 14px; }
.solic-row .veh-info .detail { font-size: 12px; color: var(--fg3); }
.solic-row .pay-info { text-align: right; }
.solic-row .pay-info .mensual { font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.solic-row .pay-info .plazo { font-size: 12px; color: var(--fg3); }
/* Chevron sutil — affordance ligero, color fg4 default, fg1 + shift en hover.
   Comportamiento por DEFAULT (heredado en Contratos). Solicitudes lo override
   abajo con el patrón hover-reveal (Opción B). */
.solic-row .arrow-subtle {
  width: 16px; height: 16px;
  color: var(--fg4);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: color var(--motion-fast), transform var(--motion-fast);
}
.solic-row:hover .arrow-subtle { color: var(--fg1); transform: translateX(2px); }
.solic-row .arrow-subtle svg { width: 100%; height: 100%; }

/* ------------------------------------------------------------------------
   SOLICITUDES + CONTRATOS · row hover-reveal (Opción B · Linear/Notion style)
   El chevron NO se ve en idle; aparece SOLO al hover de la fila. La columna
   del grid mantiene su 20px reservados — cero layout shift. El color queda
   en --fg4 (tertiary) incluso revelado (la sutileza es parte del patrón).
   Scope: #view-solicitudes Y #view-contratos (la lista, no el vigente-detail).
   ------------------------------------------------------------------------ */
#view-solicitudes .solic-row,
#view-contratos .solic-row {
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
#view-solicitudes .solic-row:hover,
#view-contratos .solic-row:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  box-shadow: none;
  transform: none;
}
#view-solicitudes .solic-row .arrow-subtle,
#view-contratos .solic-row .arrow-subtle {
  opacity: 0;
  transform: translateX(-4px);
  color: var(--fg4);
  transition: opacity var(--motion-fast), transform var(--motion-fast);
}
#view-solicitudes .solic-row:hover .arrow-subtle,
#view-contratos .solic-row:hover .arrow-subtle {
  opacity: 1;
  transform: translateX(0);
  color: var(--fg4);
}
#view-solicitudes .solic-row .arrow-subtle svg,
#view-contratos .solic-row .arrow-subtle svg { stroke-width: 2; }

/* Fallback touch (mobile/tablet sin :hover): chevron siempre visible */
@media (hover: none) {
  #view-solicitudes .solic-row .arrow-subtle,
  #view-contratos .solic-row .arrow-subtle {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ========================================================================
   FILTER CHIPS
   ======================================================================== */
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 13px; font-weight: 500;
  color: var(--fg3);
  background: transparent;
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: all var(--motion-fast);
}
.chip:hover { background: var(--surface-2); color: var(--fg1); }
.chip.active { background: var(--ink); color: white; border-color: var(--ink); font-weight: 600; }
.chip .cnt {
  font-size: 11px; font-weight: 600;
  padding: 1px 7px;
  background: rgba(15,20,25,0.08);
  border-radius: var(--r-pill);
  color: var(--fg2);
}
.chip.active .cnt { background: white; color: var(--ink); }

/* ========================================================================
   SOL-CARD (next-action hero)
   ======================================================================== */
.sol-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 4px 16px -4px rgba(15,20,25,0.04);
  overflow: hidden;
  margin-bottom: 16px;
}
/* sol-card COMPACT — diseño homologado para Inicio, Solicitud-detail y
   Vigente-detail. Cabe en first viewport sin scroll global del main.
   Sin dividers internos: las secciones se separan por whitespace generoso
   dentro del wrapper .sol-card-body. */
.sol-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 28px 14px;
  gap: 12px; flex-wrap: wrap;
}
.sol-card-body {
  padding: 8px 28px 22px;
}
.sol-head-left { display: flex; align-items: center; gap: 12px; }
.sol-head-title { font: 500 13px/1 'Inter', sans-serif; color: var(--fg1); }
.sol-code-chip {
  display: inline-block;
  font: 500 11px/1 'SF Mono', ui-monospace, monospace;
  color: var(--fg2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 5px 9px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}
.sol-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2);
  color: var(--fg1);
  font: 600 10px/1 'Inter', sans-serif;
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 5px 10px; border-radius: 999px;
}
.sol-status-pill::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fg1);
  box-shadow: 0 0 0 3px rgba(15,20,25,0.10);
}

/* Stepper PRIMERO (encima del next-action) — orientación visual rápida.
   Sin border-bottom: separado del siguiente bloque por margin-bottom 36px. */
.sol-stepper-block {
  padding: 0;
  margin-bottom: 36px;
}
.sol-stepper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}
.sol-step {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: relative;
}
.sol-step-circle {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 600 11px/1 'Inter', sans-serif;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  color: var(--fg4);
  position: relative; z-index: 2;
}
.sol-step-line {
  position: absolute;
  top: 11px; left: 50%; right: -50%;
  height: 1.5px;
  background: var(--border-strong);
  z-index: 1;
}
.sol-step:last-child .sol-step-line { display: none; }
.sol-step.is-done .sol-step-circle {
  background: var(--ink); border-color: var(--ink); color: white;
}
.sol-step.is-done .sol-step-circle svg { width: 10px; height: 10px; stroke: white; stroke-width: 3; }
.sol-step.is-done .sol-step-line { background: var(--ink); }
.sol-step.is-current .sol-step-circle {
  background: var(--surface);
  border: 2px solid var(--ink);
  color: var(--fg1);
  font-weight: 500;
  width: 26px; height: 26px;
  box-shadow: 0 0 0 3px rgba(15,20,25,0.08), 0 3px 10px -2px rgba(15,20,25,0.14);
}
.sol-step.is-current .sol-step-line { top: 13px; }
.sol-step-name { font: 500 10px/1.2 'Inter', sans-serif; color: var(--fg4); text-align: center; }
.sol-step.is-done .sol-step-name { color: var(--fg2); }
.sol-step.is-current .sol-step-name { color: var(--fg1); font-weight: 600; }

/* Next-action en LAYOUT HORIZONTAL: title+subtitle izq · CTA derecha.
   Sin padding/border: separado del summary por margin-bottom 36px. */
.sol-next-action {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 24px;
  padding: 0;
  margin-bottom: 36px;
  text-align: left;
}
.sol-na-eyebrow { display: none; }
.sol-na-title {
  font: 600 20px/1.25 'Inter', sans-serif;
  margin: 0;
  letter-spacing: -0.015em;
  color: var(--fg1);
  grid-column: 1; grid-row: 1;
}
.sol-na-subtitle {
  font: 400 13px/1.5 'Inter', sans-serif;
  color: var(--fg2);
  margin: 4px 0 0;
  max-width: 560px;
  grid-column: 1; grid-row: 2;
}
.sol-cta-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--radius-button);
  font: 500 13px/1 'Inter', sans-serif; cursor: pointer;
  border: 0; color: white;
  background: var(--accent-go);
  transition: background var(--motion-fast);
  grid-column: 2; grid-row: 1 / 3;
  align-self: center;
  white-space: nowrap;
}
.sol-cta-primary:hover { background: var(--accent-hover); }
.sol-cta-primary svg { width: 15px; height: 15px; stroke-width: 1.7; }

/* Summary compacto: vehículo izq · finanzas der.
   Última sección del body — sin padding/border, el padding-bottom del
   .sol-card-body provee el respiro al foot. */
.sol-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px; align-items: start;
  padding: 0;
}
.sol-veh { display: flex; flex-direction: column; gap: 4px; }
.sol-veh-eyebrow {
  font: 500 10px/1 'Inter', sans-serif;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg4);
}
.sol-veh-name { font: 600 16px/1.2 'Inter', sans-serif; color: var(--fg1); }
.sol-veh-meta { font: 400 12px 'Inter', sans-serif; color: var(--fg2); margin-top: 2px; }
.sol-finance {
  display: flex; flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  min-width: 360px;
}
.sol-stats { display: flex; gap: 22px; align-items: center; }
.sol-stat { text-align: right; }
.sol-stat-label {
  font: 500 10px/1 'Inter', sans-serif;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg4);
  margin-bottom: 3px;
}
.sol-stat-value {
  font: 600 13px/1 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--fg1);
}
.sol-protag {
  display: flex; flex-direction: column;
  align-items: flex-end;
  padding-top: 10px;
  border-top: 1px solid var(--border-strong);
  width: 100%;
}
.sol-protag-label {
  font: 500 10px/1 'Inter', sans-serif;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg4);
  margin-bottom: 4px;
}
.sol-protag-value {
  font: 600 22px/1 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--fg1);
}
.sol-protag-meta {
  font: 400 11px 'Inter', sans-serif;
  color: var(--fg4);
  margin-top: 3px;
}

/* sol-secondary (Editar cotización · + Nueva cotización) eliminado en compact —
   ya no aporta vs. el espacio que ocupa. Editar cotización vive en otro modal. */
.sol-secondary { display: none; }
.sol-text-link {
  background: transparent; border: 0; cursor: pointer;
  font: 500 13px 'Inter', sans-serif; color: var(--fg1);
  padding: 8px 12px;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}
.sol-text-link:hover { text-decoration-color: var(--fg1); }
.sol-dot-sep { color: var(--border-strong); }

/* Foot: padding asimétrico (16 top, 22 bottom) y bg transparente para
   evitar el efecto "isla" — todo el card es bg-surface uniforme. */
.sol-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 28px 22px;
  background: transparent;
  gap: 12px; flex-wrap: wrap;
}
.sol-legal { display: flex; gap: 16px; }
.sol-legal-link {
  font: 400 11px/1 'Inter', sans-serif;
  color: var(--fg4);
  cursor: pointer;
  background: transparent; border: 0; padding: 0;
}
.sol-legal-link:hover { color: var(--fg1); text-decoration: underline; }
.sol-cancel-link {
  font: 500 11px/1 'Inter', sans-serif;
  color: var(--fg4);
  background: transparent; border: 0; cursor: pointer;
  padding: 4px 6px;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 2px;
}
.sol-cancel-link:hover { color: var(--fg1); text-decoration-color: var(--fg1); }

/* ========================================================================
   VIGENTE BLOCKS (próximo pago + resumen + cronograma + docs)
   ======================================================================== */
.next-pay-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.next-pay-card .lbl {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg4); margin-bottom: 8px;
}
.next-pay-card .amount {
  font-weight: 600; font-size: 34px;
  letter-spacing: -0.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.next-pay-card .amount .unit {
  font-size: 14px; color: var(--fg3);
  font-weight: 500; margin-left: 4px;
}
.next-pay-card .due-warn {
  margin-top: 8px;
  font-size: 13px; color: var(--warning);
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
.next-pay-card .due-warn svg { width: 14px; height: 14px; stroke-width: 2; }
.next-pay-card .actions { display: flex; gap: 10px; flex-wrap: wrap; }

.summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 24px;
}
.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 22px;
}
.summary-grid .sg-lbl {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg4); margin-bottom: 6px;
}
.summary-grid .sg-val {
  font-weight: 600; font-size: 20px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.progress-bar {
  background: var(--surface-2);
  border-radius: 8px;
  height: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.progress-bar .fill { background: var(--accent-go); height: 100%; border-radius: 8px; }
.progress-meta {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--fg3); margin-bottom: 6px;
}

.schedule-list { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin-bottom: 24px; }
.schedule-head {
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  display: flex; gap: 8px;
}
.schedule-row {
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}
.schedule-row:last-child { border-bottom: none; }
.schedule-row.warn .schedule-date { color: var(--warning); }
.schedule-row.done { opacity: 0.7; }
.schedule-mes {
  font-weight: 600; font-size: 12px;
  color: var(--fg4);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.schedule-date { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.schedule-detail { font-size: 12px; color: var(--fg3); }
.schedule-amount {
  font-weight: 600; font-size: 16px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* ========================================================================
   COTIZAR VIEW · UI replica del mockup 🟡_MOCKUP_WIZARD_5_PASOS_v1.html
   ======================================================================== */
/* ────────────────────────────────────────────────────────────────
   SOLICITAR · Design Handoff (S3.2k · design_handoff_solicitar)
   2-col grid: config card (1fr) + summary card (292px sticky).
   Solo HTML/CSS/orden visual — sin tocar cálculos ni backend.
   ──────────────────────────────────────────────────────────────── */

/* Page header */
.solpg-head { margin-bottom: 28px; max-width: 760px; }
.solpg-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400; font-size: 32px;
  line-height: 1.15; letter-spacing: -0.01em;
  color: var(--fg1); margin: 0 0 8px;
}
.solpg-sub {
  font: 400 14px/1.65 'Inter', sans-serif;
  color: var(--fg2); max-width: 480px;
  margin: 0;
}

/* Product cards (Arrendamiento / Crédito automotriz) — full width como Solicitudes */
.prod-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 20px;
}
.prod-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  cursor: pointer; text-align: left;
  outline: none; font-family: inherit;
  transition: border-color var(--motion-fast) var(--ease-default), background var(--motion-fast) var(--ease-default);
}
.prod-card:hover { border-color: var(--fg3); }
.prod-card.is-active {
  border: 1.5px solid var(--ink);
  background: var(--surface-2);
  padding: 15.5px 17.5px;
}
.prod-card-head { display: flex; align-items: center; gap: 10px; }
.prod-card-radio {
  width: 18px; height: 18px; border-radius: 50%;
  background: transparent; border: 1.5px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--motion-fast) var(--ease-default), border-color var(--motion-fast) var(--ease-default);
}
.prod-card-radio svg { width: 9px; height: 9px; color: transparent; }
.prod-card.is-active .prod-card-radio { background: var(--ink); border-color: var(--ink); }
.prod-card.is-active .prod-card-radio svg { color: white; }
.prod-card-title { font: 500 14px 'Inter', sans-serif; color: var(--fg1); }
.prod-card-desc {
  /* S3.6-polish · sin padding-left para que el texto largo ocupe todo
     el ancho de la card (antes estaba indentado bajo el título y
     wrappeaba mostrándose hasta la mitad del card). */
  font: 400 12px/1.55 'Inter', sans-serif;
  color: var(--fg3);
}

/* 2-col grid · full width (matches Solicitudes / Expediente)
   align-items default = stretch para que la summary-col alcance el alto de la
   config card → CAT puede pegarse al borde inferior izquierdo vía margin-top auto. */
.sol-grid {
  display: grid;
  grid-template-columns: 1fr 292px;
  gap: 20px;
  padding-bottom: 80px;
}

/* ── Config card ──
   justify-content: space-between distribuye el alto extra entre las 3 secciones
   (Precio · Pago · Plazo) cuando la columna derecha es más alta. El gap 36px
   actúa como gap MÍNIMO; cualquier alto sobrante se reparte equitativamente
   entre las secciones, eliminando el "hueco" inferior. */
.config-card {
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 32px 28px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 36px;
  min-width: 0;
  min-height: 0;
}
.cfg-section { /* spacer */ }
.cfg-eyebrow-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 16px;
}
.cfg-eyebrow {
  font: 500 10px/1 'Inter', sans-serif;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg3);
}
.cfg-iva-hint {
  font: 400 11px 'Inter', sans-serif;
  color: var(--fg4);
}

/* Precio y flota row */
.cfg-precio-row {
  display: grid; grid-template-columns: 2fr 1fr;
  gap: 12px; align-items: end;
}
.cfg-precio-col, .cfg-cantidad-col { display: flex; flex-direction: column; min-width: 0; }
.cfg-mini-label {
  font: 400 10px/1 'Inter', sans-serif;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg3); margin-bottom: 6px;
}
.cfg-helper {
  font: 400 11px 'Inter', sans-serif;
  color: var(--fg3); margin-top: 6px; padding-left: 2px;
  transition: color var(--motion-base) ease;
}
.cfg-helper.is-warn { color: var(--warning, #c2410c); font-weight: 500; }
@keyframes cot-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}
.cfg-prefix-input.shake, .cfg-prefix-input input.shake,
input.shake, .cfg-stepper.shake { animation: cot-shake 0.4s ease; }

/* Precio prefix + input · 41px tall */
.cfg-prefix-input { display: flex; height: 41px; }
.cfg-prefix {
  padding: 0 13px;
  border: 1px solid var(--border-strong);
  border-right: none;
  border-radius: 10px 0 0 10px;
  background: var(--surface-2);
  font: 500 14px 'Inter', sans-serif;
  color: var(--fg3);
  display: flex; align-items: center;
  flex-shrink: 0;
}
.cfg-prefix-input input {
  padding: 9px 12px;
  font: 500 15px 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--fg1);
  border: 1px solid var(--border-strong);
  border-left: none;
  border-radius: 0 10px 10px 0;
  background: var(--surface);
  flex: 1; min-width: 0; outline: none;
  transition: border-color var(--motion-fast) var(--ease-default), box-shadow var(--motion-fast) var(--ease-default);
}
.cfg-prefix-input input:focus {
  box-shadow: none;
}

/* Stepper cantidad · 41px */
.cfg-stepper {
  display: flex; align-items: center; gap: 6px;
  height: 41px; padding: 9px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
}
.cfg-step-btn {
  background: none; border: 0; cursor: pointer;
  padding: 0 6px; display: flex; align-items: center;
  color: var(--fg4); transition: color var(--motion-fast) var(--ease-default);
}
.cfg-step-btn:hover { color: var(--fg1); }
.cfg-step-btn svg { width: 15px; height: 15px; }
.cfg-step-value {
  flex: 1; text-align: center;
  font: 600 16px 'Inter', sans-serif;
  font-variant-numeric: tabular-nums; color: var(--fg1);
}

/* Pago inicial · header solo con eyebrow (monto se editó abajo con input) */
.cfg-pago-head {
  display: flex; justify-content: flex-start; align-items: center;
  margin-bottom: 24px;
}

/* Monto manual editable + hint "= X% del total" (per handoff slider+$ variant) */
.cfg-pago-monto-row {
  display: flex; align-items: center; gap: 12px;
  width: 55%;
  margin-top: 20px;
}
.cfg-pago-monto-input {
  display: flex; flex: 1; min-width: 0;
  height: 41px;
}
.cfg-pago-monto-input .cfg-prefix {
  padding: 0 13px;
  border: 1px solid var(--border-strong);
  border-right: none;
  border-radius: 10px 0 0 10px;
  background: var(--surface-2);
  font: 500 14px 'Inter', sans-serif;
  color: var(--fg3);
  display: flex; align-items: center;
}
.cfg-pago-monto-input input {
  flex: 1; min-width: 0;
  padding: 9px 12px;
  font: 500 15px 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--fg1);
  border: 1px solid var(--border-strong);
  border-left: none;
  border-radius: 0 10px 10px 0;
  background: var(--surface);
  outline: none;
  transition: border-color var(--motion-fast) var(--ease-default), box-shadow var(--motion-fast);
}
.cfg-pago-monto-input input:focus {
  box-shadow: none;
}
.cfg-pago-eq-hint {
  font: 400 11px 'Inter', sans-serif;
  color: var(--fg3);
  white-space: nowrap; flex-shrink: 0;
}
.cfg-pago-eq-hint strong {
  font: 500 13px 'Inter', sans-serif;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
}

/* Slider native con tooltip flotante */
.cfg-slider-wrap { position: relative; padding-top: 26px; margin-bottom: 8px; }
.cfg-slider-tooltip {
  position: absolute; top: 0;
  background: var(--ink); color: white;
  border-radius: 999px; padding: 5px 11px;
  font: 500 12px/1 'Inter', sans-serif;
  pointer-events: none; z-index: 10; white-space: nowrap;
  transform: translateX(-50%);
  font-variant-numeric: tabular-nums;
}
.cfg-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px;
  background: linear-gradient(to right, var(--ink) 22.2%, var(--border-strong) 22.2%);
  border-radius: 999px; outline: none; margin: 0;
  cursor: pointer;
}
.cfg-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px;
  background: var(--ink); border-radius: 50%;
  cursor: grab; border: 0;
  box-shadow: 0 2px 6px rgba(15,20,25,0.20);
}
.cfg-slider::-moz-range-thumb {
  width: 20px; height: 20px;
  background: var(--ink); border-radius: 50%;
  cursor: grab; border: 0;
  box-shadow: 0 2px 6px rgba(15,20,25,0.20);
}
.cfg-slider:active::-webkit-slider-thumb { cursor: grabbing; }
/* Ticks · posicionadas con la MISMA fórmula que el thumb del slider:
   left = ((v − min) / (max − min)) * (100% − 20px) + 10px
   Esto hace que cada label se alinee exactamente con la posición del thumb
   cuando alcanza ese valor (el 20px viene del ancho del thumb). */
.cfg-slider-ticks {
  position: relative;
  height: 14px;
  margin-top: 2px;
}
.cfg-slider-ticks span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font: 400 11px 'Inter', sans-serif;
  color: var(--fg4);
  transition: color var(--motion-fast) var(--ease-default), font-weight var(--motion-fast);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Posiciones derivadas con la fórmula del thumb:
   left = (v − min) / (max − min) × (100% − 20px) + 10px
   con min=5, max=60, range=55. Los ticks son 5/20/35/50/60. */
.cfg-slider-ticks span[data-pct="5"]  { left: calc(0%      + 10px); }
.cfg-slider-ticks span[data-pct="20"] { left: calc(27.273% + 10px - 0.27273 * 20px); }
.cfg-slider-ticks span[data-pct="35"] { left: calc(54.545% + 10px - 0.54545 * 20px); }
.cfg-slider-ticks span[data-pct="50"] { left: calc(81.818% + 10px - 0.81818 * 20px); }
.cfg-slider-ticks span[data-pct="60"] { left: calc(100%    + 10px - 1.00000 * 20px); }
.cfg-slider-ticks span.is-active {
  color: var(--fg1); font-weight: 500;
}

/* Plazo cards (5 mini-cards) */
.cfg-section--plazo .cfg-eyebrow { display: block; margin-bottom: 14px; }
.plazo-cards { display: flex; gap: 8px; }
.plazo-card {
  flex: 1; min-width: 0;
  padding: 13px 14px;
  border-radius: 13px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer; text-align: left;
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 4px;
  font-family: inherit; outline: none;
  transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease, transform var(--motion-fast) ease;
}
.plazo-card:hover {
  border-color: var(--fg4); background: var(--bg);
  transform: translateY(-1px);
}
.plazo-card.is-active {
  /* Active state per handoff: border ink + bg subtle grey (NO verde) */
  border-color: var(--ink);
  background: var(--surface-2);
  transform: none;
}
.plazo-months {
  font: 500 9px 'Inter', sans-serif;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg1); white-space: nowrap;
  margin-bottom: 5px;
}
.plazo-divider {
  width: 100%; height: 1px;
  background: var(--border); margin-bottom: 5px;
}
.plazo-card.is-active .plazo-divider { background: rgba(15,20,25,0.15); }
.plazo-amount {
  font: 600 16px/1 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  color: var(--fg1); white-space: nowrap;
}
.plazo-mes {
  font: 400 9px 'Inter', sans-serif;
  color: var(--fg4); margin-top: 2px;
}

/* ── Summary col + card (handoff: gradient border + shadow + bottom-aligned CAT) ──
   .summary-col es flex column con summary-card al top (sticky) y CAT empujada al
   bottom vía margin-top auto en .cat-disclaimer. La grid usa align-items default
   (stretch) para que la columna derecha alcance el alto de la config card. */
.summary-col {
  display: flex; flex-direction: column;
  align-self: stretch;
}
.summary-card {
  position: sticky; top: 84px;
  /* Gradient border via padding-box / border-box · linear-gradient 135deg */
  border: 3px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #A3E635, #1FAE5F, #5EE39E) border-box;
  border-radius: 16px;
  box-shadow:
    0 12px 40px -6px rgba(15,20,25,0.14),
    0 2px 8px -2px rgba(15,20,25,0.06);
  padding: 22px;
  display: flex; flex-direction: column;
}
/* Summary header · split PLAZO + TASA ANUAL (eyebrow + value pair).
   Per spec del handoff: eyebrow 9-10px, valor 18-20px (no 26). */
.sum-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.sum-header-block { display: flex; flex-direction: column; gap: 6px; }
.sum-header-block--right { text-align: right; align-items: flex-end; }
.sum-header-eye {
  font: 500 10px/1 'Inter', sans-serif;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg3);
}
.sum-header-val {
  font: 600 20px/1 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--fg1);
  display: inline-flex; align-items: baseline; gap: 6px;
}
.sum-header-suffix {
  font: 400 13px 'Inter', sans-serif;
  color: var(--fg3);
  letter-spacing: 0;
}
.sum-pmt-label {
  font: 400 10px 'Inter', sans-serif;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg3); margin-bottom: 6px;
}
.sum-pmt {
  font: 600 46px/1 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em; color: var(--fg1);
  margin-bottom: 3px;
}
.sum-pmt-mes {
  font: 400 11px 'Inter', sans-serif;
  color: var(--fg3);
  margin-bottom: 22px;
}
.sum-rows { display: flex; flex-direction: column; margin-bottom: 18px; }
.sum-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 7px 0;
}
.sum-row-label {
  font: 400 12px 'Inter', sans-serif; color: var(--fg3);
}
.sum-row-value {
  font: 400 12px 'Inter', sans-serif;
  color: var(--fg2);
  font-variant-numeric: tabular-nums;
}
.sum-row.is-strong .sum-row-label { font-weight: 500; color: var(--fg1); }
.sum-row.is-strong .sum-row-value { font-weight: 600; color: var(--fg1); }

/* CTA principal + secondary */
.sum-cta {
  width: 100%; height: 48px;
  border: 0; border-radius: var(--radius-button);
  background: var(--ink); color: white;
  font: 500 14px 'Inter', sans-serif;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 4px;
  transition: background var(--motion-fast) var(--ease-default);
}
.sum-cta:hover { background: #1F262E; }
.sum-cta:focus-visible { outline: none; box-shadow: none; }
.sum-cta svg { width: 14px; height: 14px; }
/* "Ver plan de pagos" · text-only ghost (sin border, sin background).
   Altura compacta para que el aire abajo del link coincida con el aire
   arriba del header (card padding simétrico 22px). */
.sum-secondary {
  width: 100%; height: 26px;
  border: 0; background: transparent;
  font: 500 13px 'Inter', sans-serif;
  color: var(--fg2);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0;
  transition: color var(--motion-fast) var(--ease-default);
}
.sum-secondary:hover { color: var(--fg1); }
.sum-secondary svg { width: 14px; height: 14px; }

/* CAT/VEU disclaimer · alinea su borde inferior con el de la config card
   (izq) gracias a margin-top auto sobre stretch + flex column en .summary-col.
   padding-top: 0 (antes 12px) para recortar ~20% del aire entre el borde
   inferior de la summary-card y el contenido del disclaimer, sin tocar la
   posición de la summary-card ni el alto de la config-card. */
.cat-disclaimer {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 0; padding: 0;
  margin-top: auto;
}
.cat-col {
  padding-right: 14px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
}
.cat-label {
  font: 600 10px 'Inter', sans-serif;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg3); margin-bottom: 5px;
}
.cat-value {
  font: 600 20px/1 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--fg1); margin-bottom: 2px;
}
/* Override para Opción de compra: "$ 75,000" no cabe horizontalmente al
   mismo tamaño que "30.6%" en la columna de 80px. Bajamos el tamaño y
   forzamos una sola línea (sin wrap). */
#cotVeuDiscValue {
  font-size: 14px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.cat-iva {
  font: 500 10px 'Inter', sans-serif;
  color: var(--fg3);
}
.cat-legal {
  padding-left: 14px;
  font: 400 10px/1.55 'Inter', sans-serif;
  color: var(--fg3);
  display: flex; align-items: center;
  text-align: justify;
}

/* ──────── MODAL · Solicitud (floating-label fields) ──────── */
.sol-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15,20,25,0.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: solFadeIn var(--motion-fast) ease;
}
.sol-modal-overlay[hidden] { display: none; }
@keyframes solFadeIn { from { opacity: 0 } to { opacity: 1 } }
.sol-modal {
  background: var(--surface);
  border-radius: 20px;
  width: 100%; max-width: 440px;
  box-shadow: 0 24px 64px -12px rgba(15,20,25,0.18);
  animation: solMIn var(--motion-base) var(--ease-default) both;
  overflow: hidden;
  position: relative;
}
@keyframes solMIn { from { opacity: 0; transform: scale(0.96) } to { opacity: 1; transform: scale(1) } }
.sol-modal-head {
  padding: 24px 28px 8px;
  display: flex; align-items: flex-start; justify-content: space-between;
}
.sol-modal-title {
  font: 500 20px/1.2 'Inter', sans-serif;
  color: var(--fg1); margin-bottom: 4px;
}
.sol-modal-sub {
  font: 400 13px/1.5 'Inter', sans-serif;
  color: var(--fg3);
}
.sol-modal-close {
  /* Absoluta sobre el modal · siempre top-right, sin importar si el header
     tiene copy o no. Esto permite que el body (en estado bloqueado) ocupe
     todo el alto del modal sin un header vacío comiendo espacio. */
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 8px; border: 0;
  background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg3);
  flex-shrink: 0;
  z-index: 2;
  transition: background var(--motion-fast) var(--ease-default), color var(--motion-fast);
}
.sol-modal-close:hover { background: var(--surface-2); color: var(--fg1); }
.sol-modal-body {
  padding: 22px 28px;
  display: flex; flex-direction: column; gap: 22px;
}
.sol-modal-section { /* gap by parent */ }
.sol-modal-eyebrow {
  font: 500 10px/1 'Inter', sans-serif;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg3); margin-bottom: 10px;
}
.sol-modal-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}

/* Floating-label oficial /exante-design v0.5.2 */
.flf-wrap { position: relative; }
.flf-wrap label {
  position: absolute; top: 10px; left: 16px;
  font: 400 10px/1 'Inter', sans-serif;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg3); pointer-events: none; user-select: none; z-index: 1;
}
.flf-wrap input,
.flf-wrap select {
  display: block; width: 100%; box-sizing: border-box;
  padding: 26px 16px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  font: 400 15px/1.4 'Inter', sans-serif;
  color: var(--fg1);
  outline: 0;
  transition: border-color var(--motion-fast) var(--ease-default), box-shadow var(--motion-fast);
}
.flf-wrap input::placeholder { color: var(--fg4); }
.flf-wrap input:focus,
.flf-wrap select:focus {
  box-shadow: none;
}
.flf-wrap.flf-select select {
  padding-right: 40px;
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.flf-wrap.flf-select::after {
  content: '';
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B92A1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ════════════════════════════════════════════════════════════
   Typeable combobox · híbrido input + dropdown filtrable
   Portado de index.html · adaptado a floating label .flf-wrap.
   Estructura HTML:
     .flf-wrap.flf-combobox
       > label                               (floating absolute)
       > .combobox.is-default
           > .combobox-input                 (the typeable input)
           > .combobox-toggle (button)       (caret arrow)
           > .combobox-list   (ul, hidden)   (autocomplete dropdown)
   ════════════════════════════════════════════════════════════ */
.flf-wrap.flf-combobox { position: relative; }
.flf-wrap.flf-combobox .combobox { position: relative; }
.flf-wrap.flf-combobox .combobox-input {
  display: block; width: 100%; box-sizing: border-box;
  padding: 26px 40px 10px 16px;       /* top extra para label flotante; right para toggle */
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  font: 400 15px/1.4 'Inter', sans-serif;
  color: var(--fg1);
  outline: 0;
  transition: border-color var(--motion-fast) var(--ease-default), box-shadow var(--motion-fast);
}
.flf-wrap.flf-combobox .combobox-input::placeholder { color: var(--fg4); }
.flf-wrap.flf-combobox .combobox-input:focus {
  box-shadow: none;
}
.flf-wrap.flf-combobox .combobox-input:disabled {
  background: var(--surface-2);
  color: var(--fg4);
  cursor: not-allowed;
}
.flf-wrap.flf-combobox .combobox-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; padding: 8px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.flf-wrap.flf-combobox .combobox-toggle svg {
  width: 16px; height: 16px;
  color: var(--fg3);
  transition: transform var(--motion-fast) ease;
}
.flf-wrap.flf-combobox .combobox[aria-expanded="true"] .combobox-toggle svg { transform: rotate(180deg); }
.flf-wrap.flf-combobox .combobox.is-freeform .combobox-toggle { display: none; }
.flf-wrap.flf-combobox .combobox.is-catalog-selected .combobox-input { padding-right: 60px; }
.flf-wrap.flf-combobox .combobox.is-catalog-selected::after {
  /* check verde a la izquierda del toggle cuando hay match de catálogo */
  content: '';
  display: inline-block;
  position: absolute; right: 38px; top: 50%;
  width: 14px; height: 14px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231FAE5F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 3;
}
.flf-wrap.flf-combobox .combobox-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  max-height: 240px; overflow-y: auto;
  list-style: none; margin: 0; padding: 4px;
  box-shadow: 0 4px 12px rgba(15,20,25,0.08);
  z-index: 20;
}
.flf-wrap.flf-combobox .combobox-list[hidden] { display: none; }
.flf-wrap.flf-combobox .combobox-option {
  padding: 8px 12px;
  font: 400 14px/1.3 'Inter', sans-serif;
  color: var(--fg1);
  cursor: pointer;
  border-radius: 6px;
  user-select: none;
}
.flf-wrap.flf-combobox .combobox-option:hover,
.flf-wrap.flf-combobox .combobox-option.is-highlighted { background: var(--surface-2); }
.flf-wrap.flf-combobox .combobox-option-separator {
  height: 1px; background: var(--border-strong);
  margin: 4px 8px; list-style: none;
}
.flf-wrap.flf-combobox .combobox-option-other { color: var(--fg3); }
.flf-wrap.flf-combobox .combobox-empty {
  padding: 10px 12px;
  font: 400 13px/1.3 'Inter', sans-serif;
  color: var(--fg4);
  font-style: italic;
}

/* Estado de error para validación cliente-side · S3.3f-A11 */
.flf-wrap.has-error select,
.flf-wrap.has-error .combobox-input {
  border-color: var(--color-error) !important;
  box-shadow: 0 0 0 3px rgba(184,50,39,0.10);
}
.flf-wrap.has-error label { color: var(--color-error); }
.sol-modal-error-banner {
  display: flex; align-items: center; gap: 8px;
  margin: 0 28px 12px;
  padding: 10px 14px;
  background: var(--color-error-tint);
  border: 1px solid rgba(184,50,39,0.30);
  border-radius: 10px;
  font: 500 13px/1.4 'Inter', sans-serif;
  color: #8C2920;
}
.sol-modal-error-banner svg { flex-shrink: 0; color: var(--color-error); }
.sol-modal-error-banner[hidden] { display: none !important; }
.sol-modal-error-banner strong { font-weight: 600; color: #6E1F18; }
.sol-modal-error-banner.shake { animation: cot-shake 0.4s ease; }

.sol-modal-foot { padding: 0 28px 24px; }
.sol-modal-cta {
  width: 100%; height: 48px;
  border: 0; border-radius: var(--radius-button);
  background: var(--ink); color: white;
  font: 500 14px 'Inter', sans-serif;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background var(--motion-base) ease;
}
.sol-modal-cta.is-success { background: var(--accent-go); }

/* Override [hidden] que se pierde por el display: flex explícito de los
   bodies y CTAs del modal · gate UX S3.3a */
.sol-modal-body[hidden],
.sol-modal-cta[hidden] { display: none !important; }

/* ════════════════════════════════════════════════════════════
   Modal · Expediente incompleto (handoff design_handoff_expediente_modal)
   Variante B Playfair editorial vertical. Sólo aplica cuando
   .sol-modal lleva el modificador .sol-modal--blocked.
   ════════════════════════════════════════════════════════════ */
.sol-modal--blocked {
  max-width: 380px !important;          /* override del 440 default */
  padding: 44px 32px 28px;              /* spec exacto */
  text-align: center;
  box-shadow: 0 24px 64px -12px rgba(15,20,25,0.22);
}
/* Backdrop con más opacidad en estado bloqueado (acción bloqueante) */
.sol-modal-overlay.is-blocked {
  background: rgba(15,20,25,0.6) !important;
}
/* En estado bloqueado el modal no usa el padding interno del body/foot · todo
   vive directamente dentro del .sol-modal--blocked. Quitamos padding Y gap
   del wrapper · los márgenes individuales del handoff (icon mb 28, title
   mb 14, body mb 32) ya gobiernan los separadores. Si dejáramos gap: 22 del
   .sol-modal-body original se sumaría a esos márgenes y se vería aireado. */
.sol-modal--blocked .sol-modal-body,
.sol-modal--blocked .sol-modal-foot { padding: 0; }
.sol-modal--blocked .sol-modal-body { gap: 0; }

.sol-modal-blocked {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
}
.sol-modal-blocked-icon {
  width: 64px; height: 64px;
  border-radius: 999px;
  background: var(--color-bg-subtle, #F2F4F6);
  color: var(--fg1);
  display: flex; align-items: center; justify-content: center;
  margin: 4px auto 28px;
}
.sol-modal-blocked-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  color: var(--fg1);
  letter-spacing: -0.012em;
  line-height: 1.2;
  text-wrap: balance;
  margin-bottom: 14px;
  padding: 0 4px;
}
.sol-modal-blocked-text {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--fg2);
  line-height: 1.6;
  text-wrap: pretty;
  margin: 0 0 32px;
  padding: 0 4px;
}
.sol-modal-cta-blocked {
  width: 100%;
  padding: 13px 20px;
  border-radius: var(--radius-button);
  border: 0;
  background: var(--ink, #0F1419);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background var(--motion-fast) var(--ease-default);
}
.sol-modal-cta-blocked:hover { background: #1F262E; }
.sol-modal-cta-blocked:focus-visible {
  outline: none; /* S82b · focus neutro (era verde) */
  outline-offset: 2px;
}

/* ──────── TOAST · notificaciones inline (S3.4-A1) ──────── */
/* Componente reutilizable para mensajes ephemeral o informacionales.
   No bloquea el flujo del usuario. Auto-dismiss después de duration ms
   (default 5000). Cierre manual con el botón ×. Apilan verticalmente
   si hay más de uno activo. */
.exa-toast-stack {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 1200;
  display: flex; flex-direction: column-reverse; gap: 10px;
  pointer-events: none;
  max-width: calc(100vw - 48px);
}
.exa-toast {
  pointer-events: auto;
  min-width: 280px; max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15,20,25,0.18), 0 2px 6px rgba(15,20,25,0.08);
  padding: 14px 16px 14px 14px;
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 12px;
  align-items: start;
  font: 500 13px/1.45 'Inter', sans-serif;
  color: var(--fg1);
  animation: exa-toast-in var(--motion-base) var(--ease-default);
}
.exa-toast.is-leaving { animation: exa-toast-out var(--motion-base) ease forwards; }
.exa-toast-icon { width: 18px; height: 18px; margin-top: 1px; }
.exa-toast-body { min-width: 0; }
.exa-toast-title { font-weight: 600; color: var(--fg1); margin: 0 0 2px; }
.exa-toast-msg { font-weight: 500; color: var(--fg2); margin: 0; }
.exa-toast-close {
  border: 0; background: transparent;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg3); cursor: pointer;
  border-radius: 6px;
  padding: 0;
}
.exa-toast-close:hover { background: var(--surface-2); color: var(--fg1); }
/* S180 · DS: sin border-left para estado (regla dura) → borde completo + color de ícono. Ámbar DS. */
.exa-toast.is-info    { border: 1px solid var(--color-info, #3A6FB5); }
.exa-toast.is-info    .exa-toast-icon { color: var(--color-info, #3A6FB5); }
.exa-toast.is-success { border: 1px solid var(--color-accent-green, #1FAE5F); }
.exa-toast.is-success .exa-toast-icon { color: var(--color-accent-green, #1FAE5F); }
.exa-toast.is-warn    { border: 1px solid var(--color-warning, #E89B2A); }
.exa-toast.is-warn    .exa-toast-icon { color: var(--color-warning, #E89B2A); }
.exa-toast.is-error   { border: 1px solid var(--color-error, #B83227); }
.exa-toast.is-error   .exa-toast-icon { color: var(--color-error, #B83227); }
@keyframes exa-toast-in  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes exa-toast-out { to   { opacity: 0; transform: translateY(8px); } }
@media (max-width: 520px) {
  .exa-toast-stack { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .exa-toast { min-width: 0; max-width: none; }
}

/* ──────── MODAL · Celebración ──────── */
.cel-modal-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(15,20,25,0.32);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: solFadeIn var(--motion-base) ease;
}
.cel-modal-overlay[hidden] { display: none; }
.cel-canvas {
  /* S3.3f-A10 · z-index DEBE ser mayor que .cel-modal (1102) para que el
     confetti se vea ENCIMA de la card, no detrás. El handoff original tenía
     este como 1101 (debajo del modal) — bug visual: el confetti quedaba
     enmascarado por la card blanca y casi no se notaba. Como el canvas
     tiene pointer-events:none, no rompe la interactividad del modal. */
  position: fixed; inset: 0; z-index: 1103;
  pointer-events: none; width: 100%; height: 100%;
}
.cel-modal {
  position: relative; z-index: 1102;
  background: #FAFBFC;
  border-radius: 24px;
  width: 100%; max-width: 480px;
  box-shadow: 0 32px 80px -16px rgba(15,20,25,0.22);
  animation: celMIn var(--motion-base) var(--ease-default) both;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: 44px 36px 36px;
  text-align: center;
}
@keyframes celMIn { from { opacity: 0; transform: scale(0.96) } to { opacity: 1; transform: scale(1) } }
.cel-check-wrap {
  position: relative; width: 136px; height: 136px;
  margin-bottom: 28px; flex-shrink: 0;
}
.cel-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
}
.cel-ring--1 { background: rgba(94,227,158,0.45); animation: cel-ring1 0.7s var(--ease-default) 0.05s both; }
.cel-ring--2 { background: rgba(31,174,95,0.22); animation: cel-ring2 0.9s var(--ease-default) 0.1s both; }
.cel-ring--3 { background: rgba(26,122,114,0.12); animation: cel-ring3 1.1s var(--ease-default) 0.15s both; }
@keyframes cel-ring1 { 0% { transform: scale(1); opacity: 0.45 } 100% { transform: scale(2.4); opacity: 0 } }
@keyframes cel-ring2 { 0% { transform: scale(1); opacity: 0.22 } 100% { transform: scale(3.2); opacity: 0 } }
@keyframes cel-ring3 { 0% { transform: scale(1); opacity: 0.12 } 100% { transform: scale(4.2); opacity: 0 } }
.cel-check {
  position: absolute; inset: 0; width: 100%; height: 100%;
  animation: cel-checkIn 0.55s var(--ease-spring) both;
}
@keyframes cel-checkIn { 0% { transform: scale(0.28) } 100% { transform: scale(1) } }
.cel-check-path {
  stroke-dasharray: 80; stroke-dashoffset: 80;
  animation: cel-dashDraw 0.5s var(--ease-default) 0.38s both;
}
@keyframes cel-dashDraw { from { stroke-dashoffset: 80 } to { stroke-dashoffset: 0 } }
@keyframes cel-fadeUp { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: translateY(0) } }
.cel-eyebrow {
  font: 500 10px/1 'Inter', sans-serif;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--fg3); margin-bottom: 10px;
  animation: cel-fadeUp 0.4s var(--ease-default) 0.55s both;
}
.cel-headline {
  font: 400 32px/1.2 'Playfair Display', Georgia, serif;
  color: var(--fg1); margin-bottom: 14px;
  animation: cel-fadeUp 0.4s var(--ease-default) 0.65s both;
}
.cel-headline em {
  font-style: italic;
  color: var(--accent-go-deep);
}
.cel-lede {
  font: 400 14px/1.55 'Inter', sans-serif;
  color: var(--fg3);
  margin: 0 0 24px;
  max-width: 380px;
  text-wrap: pretty;
  animation: cel-fadeUp 0.4s var(--ease-default) 0.75s both;
}
.cel-ledger {
  width: 100%; margin-bottom: 24px;
  text-align: left;
  animation: cel-fadeUp 0.4s var(--ease-default) 0.85s both;
}
.cel-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.cel-row:last-child { border-bottom: 0; }
.cel-row-label {
  font: 500 10px/1 'Inter', sans-serif;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--fg3);
}
.cel-row-value {
  font: 500 14px/1 'Inter', sans-serif;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.cel-row-value--mono {
  font-family: 'SF Mono', Menlo, monospace;
  font-weight: 500;
}
.cel-mes {
  font: 400 12px 'Inter', sans-serif;
  color: var(--fg3); margin-left: 3px;
}
.cel-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-success-tint, #D8EEDF);
  border: 1px solid rgba(31,174,95,0.40);
  border-radius: 999px;
  padding: 3px 10px 3px 8px;
}
.cel-pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-go);
}
.cel-pill {
  font: 500 12px/1 'Inter', sans-serif;
  color: var(--accent-go-deep);
}
.cel-close {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 22px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-button);
  background: transparent;
  cursor: pointer;
  font: 400 13px 'Inter', sans-serif;
  color: var(--fg3);
  transition: border-color var(--motion-fast), color var(--motion-fast);
  animation: cel-fadeUp 0.4s var(--ease-default) 1.05s both;
}
.cel-close:hover {
  border-color: var(--fg4); color: var(--fg1);
}

/* Responsive: bajo 1024 colapsa a 1-col, summary debajo */
@media (max-width: 1024px) {
  .sol-grid { grid-template-columns: 1fr; gap: 24px; }
  .summary-col { position: static; top: auto; }
}
@media (max-width: 720px) {
  .config-card { padding: 24px 20px; }
  .cfg-precio-row { grid-template-columns: 1fr; }
  .plazo-cards { flex-wrap: wrap; }
  .plazo-card { flex: 0 0 calc(50% - 4px); }
  .sol-modal-grid { grid-template-columns: 1fr; }
}

/* White content card */
.solicitar-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 44px;
}

/* Form sections sin dividers */
.sol-form-section { margin-bottom: 44px; }
.sol-form-section:last-of-type { margin-bottom: 0; }
.sol-eyebrow {
  font: 500 11px/1 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg3);
  margin-bottom: 18px;
}

/* Precio y flota · 3-col floating-label */
.calc-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.calc-item { display: flex; flex-direction: column; }
.calc-value {
  font: 400 15px/1.4 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  color: var(--fg1);
}
.calc-meta {
  font: 400 12px/1.4 'Inter', sans-serif;
  color: var(--fg3);
  margin-top: 6px;
  padding-left: 2px;
  min-height: 16px;
}

/* Floating-label wrap · patrón oficial /exante-design */
.fl-wrap { position: relative; }
.fl-wrap label {
  position: absolute;
  top: 10px; left: 16px;
  font: 400 10px/1 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg3);
  pointer-events: none;
  user-select: none;
}
.fl-wrap input,
.fl-wrap select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 28px 16px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  font: 400 15px/1.4 'Inter', sans-serif;
  color: var(--fg1);
  outline: 0;
  transition: border-color var(--motion-fast) var(--ease-default),
              box-shadow var(--motion-fast) var(--ease-default);
}
.fl-wrap input::placeholder { color: var(--fg3); }
.fl-wrap input:focus,
.fl-wrap select:focus {
  box-shadow: none;
}
/* Select chevron custom */
.fl-wrap.is-select select {
  padding-right: 40px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.fl-wrap.is-select::after {
  content: '';
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B92A1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Price input · floating-label con $ prefix */
.fl-wrap.is-price input { padding-left: 30px; }
.fl-wrap .fl-prefix {
  position: absolute;
  left: 16px;
  bottom: 10px;
  font: 400 15px/1.4 'Inter', sans-serif;
  color: var(--fg3);
  pointer-events: none;
}
/* Static box (counter / readonly value) */
.fl-wrap.is-static {
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  padding: 28px 16px 12px;
  min-height: 60px;
}
.fl-wrap.is-static.is-readonly {
  background: var(--surface-2);
  border-color: var(--border);
}

/* Cantidad counter */
.calc-qty {
  display: inline-flex; align-items: center; gap: 10px;
}
.qty-btn {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  color: var(--fg1);
  font: 500 14px/1 'Inter', sans-serif;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.qty-btn:hover { background: #E8EAEE; border-color: var(--fg3); }
.calc-qty-value {
  font: 500 15px/1 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  min-width: 14px;
  text-align: center;
}
.calc-qty-unit {
  font: 400 13px/1 'Inter', sans-serif;
  color: var(--fg3);
  margin-left: 2px;
}

/* Pago inicial · slider editorial */
.pago-block { /* placeholder · sin estilos especiales */ }
.pago-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 22px;
}
.pago-eyebrow {
  font: 500 11px/1 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg3);
}
.pago-monto {
  font: 600 22px/1 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  color: var(--fg1);
}
.pago-slider-wrap { position: relative; padding: 0 28px; }
.pago-slider {
  position: relative;
  height: 4px;
  background: #E8EAEE;
  border-radius: 999px;
  cursor: pointer;
}
.pago-slider-fill {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  background: var(--ink);
  border-radius: 999px;
  transition: width var(--motion-fast) var(--ease-default);
}
.pago-ticks-marks { position: absolute; inset: 0; pointer-events: none; }
.pago-ticks-marks span {
  position: absolute;
  top: -1px;
  width: 2px; height: 6px;
  background: var(--border-strong);
  border-radius: 1px;
  transform: translateX(-50%);
}
.pago-slider-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 30px;
  min-width: 48px;
  padding: 0 12px;
  background: var(--ink);
  color: white;
  border-radius: 999px;
  font: 600 12px/1 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
  cursor: grab;
  box-shadow: 0 4px 12px -2px rgba(15, 20, 25, 0.22);
  user-select: none;
  transition: left var(--motion-fast) var(--ease-default), box-shadow var(--motion-fast) var(--ease-default);
}
.pago-slider-thumb:hover { box-shadow: 0 6px 16px -2px rgba(15, 20, 25, 0.30); }
.pago-slider-thumb:active { cursor: grabbing; }
.pago-labels {
  display: flex; justify-content: space-between;
  margin-top: 16px;
  font: 500 11px/1 'Inter', sans-serif;
  color: var(--fg3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Plan cards · 5 plazos */
.plans-section {
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--border);
}
.plans-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 32px;
}
.plan-card {
  background: var(--surface-2);
  border: 1.5px solid transparent;
  border-radius: 10px;
  padding: 16px 14px 14px;
  cursor: pointer;
  text-align: left;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px;
  position: relative;
  transition: background var(--motion-fast) var(--ease-default),
              border-color var(--motion-fast) var(--ease-default),
              transform var(--motion-fast) var(--ease-default),
              box-shadow var(--motion-fast) var(--ease-default);
}
.plan-card:hover {
  background: var(--surface);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.plan-card.is-selected {
  background: var(--surface);
  border-color: var(--ink);
  box-shadow: 0 4px 12px -2px rgba(15, 20, 25, 0.06);
}
.plan-plazo {
  font: 500 11px/1 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg3);
  margin-bottom: 8px;
}
.plan-amount-line {
  display: flex; align-items: baseline; gap: 3px;
  margin-bottom: 4px;
  white-space: nowrap;
}
.plan-amount {
  font: 600 18px/1 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  color: var(--fg1);
}
.plan-mes { font: 400 10px/1 'Inter', sans-serif; color: var(--fg3); }
.plan-tasa {
  font: 400 11px/1 'Inter', sans-serif;
  color: var(--fg3);
  margin-bottom: 14px;
}
.plan-tasa strong { color: var(--fg1); font-weight: 600; }
.plan-download {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 10px/1 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg3);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px 0;
  margin-top: auto;
  transition: color var(--motion-fast);
}
.plan-download:hover { color: var(--fg1); }
.plan-download svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.plan-card.is-selected .plan-download { color: var(--fg1); }

/* CTA primary · right-aligned */
.action-row { display: flex; justify-content: flex-end; }
.cta-primary-sol {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px;
  padding: 0 24px;
  border-radius: var(--radius-button);
  font: 500 14px/1 'Inter', sans-serif;
  cursor: pointer;
  border: 0;
  color: white;
  background: var(--ink);
  transition: background var(--motion-fast) var(--ease-default);
}
.cta-primary-sol:hover { background: #1F262E; }
.cta-primary-sol:focus-visible { outline: none; box-shadow: none; }
.cta-primary-sol svg { width: 14px; height: 14px; }

/* Modal · vehículo */
.veh-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 20, 25, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1100;
  padding: 24px;
  animation: veh-modal-fade var(--motion-base) var(--ease-default);
}
.veh-modal-overlay[hidden] { display: none; }
@keyframes veh-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.veh-modal {
  position: relative;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 24px 64px -12px rgba(15, 20, 25, 0.18);
  width: 560px;
  max-width: 100%;
  padding: 32px;
  animation: veh-modal-scale var(--motion-slow) var(--ease-default);
}
@keyframes veh-modal-scale {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.veh-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg3);
  transition: background var(--motion-fast), color var(--motion-fast);
}
.veh-modal-close:hover { background: var(--surface-2); color: var(--fg1); }
.veh-modal-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.veh-modal-head { margin-bottom: 24px; padding-right: 40px; }
.veh-modal-title {
  font: 400 24px/1.25 'Playfair Display', Georgia, serif;
  margin: 0 0 6px;
  letter-spacing: -0.005em;
  color: var(--fg1);
}
.veh-modal-sub {
  font: 400 14px/1.55 'Inter', sans-serif;
  color: var(--fg2);
  margin: 0;
}
.veh-modal-body { margin-bottom: 28px; }
.veh-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.veh-modal-foot {
  display: flex; justify-content: flex-end; gap: 12px;
}

/* Responsive */
@media (max-width: 720px) {
  .solicitar-card { padding: 24px 20px; }
  .calc-row { grid-template-columns: 1fr; }
  .plans-grid { grid-template-columns: repeat(2, 1fr); }
  .veh-modal-grid { grid-template-columns: 1fr; }
}

.cotizar-step { display: block; }
.cotizar-step:not(.is-active) { display: none !important; }

/* Header del step 2 (back link + subtitle dinámico del vehículo) */
.cotizar-step2-head { margin-bottom: 24px; }

/* ────────────────────────────────────────────────────────────────
   PORTAL SWITCH (segmented pill con slider animado).
   Replica del .contract-type-switch de index.html.
   Selected: fondo ink (oscuro), texto + icono BLANCOS.
   Pasivo: gris claro, texto + icono fg2/fg3.
   El slider es un div absoluto que se desplaza con left/width.
   ──────────────────────────────────────────────────────────────── */
.portal-switch-wrap {
  display: flex; justify-content: center;
  margin-bottom: 28px;
}
.portal-switch {
  display: inline-flex; gap: 0;
  background: var(--surface-2);
  border-radius: 999px;
  padding: 4px;
  position: relative;
  border: 1px solid var(--border);
}
.portal-switch-option {
  display: inline-flex; align-items: center;
  gap: 8px; padding: 10px 24px; border: 0;
  background: transparent; border-radius: 999px;
  font-family: inherit; font-size: 14px;
  font-weight: 500; color: var(--fg3);
  cursor: pointer;
  transition: color 0.3s var(--ease-default);
  white-space: nowrap;
  position: relative; z-index: 2;
}
.portal-switch-option:hover { color: var(--fg1); }
.portal-switch-option svg { width: 18px; height: 18px; flex-shrink: 0; }
.portal-switch-option.is-active {
  color: #FFFFFF !important;
  font-weight: 600;
}
.portal-switch-option.is-active svg { color: #FFFFFF; }
.portal-switch-slider {
  position: absolute;
  top: 4px; bottom: 4px;
  background: #0F1419;
  border-radius: 999px;
  transition: left 0.35s var(--ease-default), width 0.35s var(--ease-default);
  z-index: 1;
  pointer-events: none;
  left: 4px; width: 0;
}

/* Aliases para los selectores existentes (contract-tabs y subexp-tabs)
   ahora se comportan como portal-switch. Mantenemos las clases legacy
   por compatibilidad con todo el código existente. */
.contract-tabs-wrap, .exp-tabs-wrap { display: flex; justify-content: center; margin-bottom: 28px; }
.contract-tabs, .subexp-tabs {
  display: inline-flex; gap: 0;
  background: var(--surface-2);
  border-radius: 999px;
  padding: 4px;
  position: relative;
  border: 1px solid var(--border);
  box-shadow: none;
}
.contract-tab, .exp-tab {
  display: inline-flex; align-items: center;
  gap: 8px; padding: 10px 22px; border: 0;
  background: transparent; border-radius: 999px;
  font-family: inherit; font-size: 14px;
  font-weight: 500; color: var(--fg3);
  cursor: pointer;
  transition: color 0.3s var(--ease-default);
  white-space: nowrap;
  position: relative; z-index: 2;
}
.contract-tab:hover, .exp-tab:hover { color: var(--fg1); }
.contract-tab svg, .exp-tab svg { width: 18px; height: 18px; flex-shrink: 0; }
.contract-tab.is-active, .exp-tab.is-active {
  color: #FFFFFF !important;
  font-weight: 600;
  background: transparent;
  box-shadow: none;
}
.contract-tab.is-active svg, .exp-tab.is-active svg { color: #FFFFFF; }
/* Slider compartido — un elemento dentro del wrapper.
   Inicia invisible (opacity 0) hasta que JS lo posiciona correctamente,
   evita el flash del slider en posición 0 antes del primer cálculo. */
.contract-tabs-slider, .subexp-tabs-slider {
  position: absolute;
  top: 4px; bottom: 4px;
  background: #0F1419;
  border-radius: 999px;
  transition: left 0.35s var(--ease-default),
              width 0.35s var(--ease-default),
              opacity 0.18s var(--ease-default);
  z-index: 1;
  pointer-events: none;
  left: 4px; width: 0;
  opacity: 0;
}
.contract-tabs-slider.is-positioned,
.subexp-tabs-slider.is-positioned {
  opacity: 1;
}

/* Price card wrapper (envuelve price-card + pricing-summary deslizable) */
.price-card-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 16px;
  overflow: hidden;
}
.price-card-wrap .price-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
}
/* Price card */
.price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 32px;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px; align-items: center;
}

/* Multi-vehicle pricing summary (slide-down cuando cantidad > 1) */
.pricing-summary {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
  padding: 20px 32px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  align-items: center;
  /* slide-down reveal */
  max-height: 160px;
  opacity: 1;
  overflow: hidden;
  transition: max-height var(--motion-slow) var(--ease-default),
              opacity var(--motion-base) var(--ease-default),
              padding var(--motion-slow) var(--ease-default),
              border-top-color var(--motion-slow) ease;
}
.pricing-summary.is-collapsed {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-color: transparent;
}
.pricing-summary-divider {
  background: var(--border);
  align-self: stretch;
  margin: -20px 0;
}
.pricing-summary-item {
  text-align: center;
}
.pricing-summary-item-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg3);
  margin-bottom: 6px;
}
.pricing-summary-item-value {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
}
.pricing-summary-item-sub {
  font-size: 11px;
  color: var(--fg3);
  margin-top: 3px;
}
.price-card-col { text-align: center; }
.price-card-label {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 500;
  color: var(--fg3); margin-bottom: 8px;
}
.price-card-value {
  font-family: 'Inter', sans-serif;
  font-size: 24px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--fg1);
  background: transparent; border: 0;
  text-align: center; width: 100%; outline: none;
  padding: 0;
}
.price-card-value:focus { color: var(--fg1); }
.price-card-hint {
  font-size: 12px; color: var(--fg3);
  margin-top: 4px;
}
.price-card-divider {
  width: 1px; height: 48px;
  background: var(--border);
}
.counter-field {
  display: inline-flex; align-items: center; gap: 12px;
  justify-content: center;
}
.counter-btn {
  width: 32px; height: 32px; border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--fg2);
  font-size: 16px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.counter-btn:hover { background: var(--surface-2); color: var(--fg1); }
.counter-value {
  font-family: 'Inter', sans-serif;
  font-size: 24px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  width: 40px; text-align: center;
  border: 0; background: transparent;
  outline: none; color: var(--fg1);
}

/* Field cards (vehículo / pago inicial / solicitante / historial) */
.field-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 16px;
}
.field-card-eyebrow {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 500;
  color: var(--fg3); margin-bottom: 16px;
}
.vehicle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field-group {
  display: flex; flex-direction: column;
  gap: 4px; margin-bottom: 0;
}
.field-label {
  font-size: 13px; font-weight: 500;
  color: var(--fg2);
}
.input {
  height: 44px; padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  font-family: 'Inter', sans-serif;
  font-size: 14px; color: var(--fg1);
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
  width: 100%;
}
.input:focus {
  outline: none;
  box-shadow: none;
}
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%238B92A1' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.input-helper {
  font-size: 12px; color: var(--fg3);
  margin-top: 4px; line-height: 1.5;
}

/* Enganche pills */
.enganche-pills {
  display: flex; gap: 6px;
  margin-bottom: 12px;
  flex-wrap: nowrap;
}
.enganche-pill {
  flex: 1; min-width: 0;
  padding: 8px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  font-family: inherit;
  font-size: 13px; font-weight: 500;
  color: var(--fg2); cursor: pointer;
  transition: all var(--motion-fast) var(--ease-default);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.enganche-pill:hover { background: var(--surface-2); }
.enganche-pill.is-active {
  background: var(--ink); color: white;
  border-color: var(--ink);
}
.enganche-custom {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  font-size: 13px; color: var(--fg3);
}
.enganche-custom input {
  border: 0; background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 500;
  color: var(--fg1); outline: none; flex: 1;
  font-variant-numeric: tabular-nums;
}

/* Radio rows (historial) */
.radio-group { display: flex; flex-direction: column; gap: 8px; }
.radio-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  cursor: pointer;
  background: var(--surface);
  font-family: inherit; text-align: left;
  width: 100%;
  transition: all var(--motion-fast) var(--ease-default);
}
.radio-row:hover { background: var(--surface-2); }
.radio-row.is-selected {
  border-color: var(--ink);
  background: var(--surface-2);
}
.radio-circle {
  width: 18px; height: 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  display: inline-block;
}
.radio-row.is-selected .radio-circle { border-color: var(--ink); }
.radio-row.is-selected .radio-circle::after {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 8px; height: 8px;
  background: var(--ink);
  border-radius: 999px;
}

/* CTA row */
.cotizar-cta-row {
  display: flex; justify-content: center;
  margin-top: 24px;
}
.cotizar-cta-row--right { justify-content: flex-end; }
.cotizar-cta-row--right .btn { display: inline-flex; align-items: center; }

/* Plancards */
.plancards-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.plan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  display: flex; flex-direction: column;
  position: relative;
  transition: all var(--motion-fast) var(--ease-default);
}
.plan-card.is-featured {
  border-color: var(--ink);
  box-shadow: 0 4px 12px -2px rgba(15,20,25,0.06);
}
.plan-card.is-ineligible {
  opacity: 0.55;
  background: var(--surface-2);
}
.plan-card-badge {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  background: var(--ink); color: white;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.plan-card-title {
  font-size: 16px; font-weight: 600;
  color: var(--fg1);
  text-align: center; margin-bottom: 8px;
}
.plan-card-price {
  font-family: 'Inter', sans-serif;
  font-size: 24px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--fg1);
  text-align: center; margin-bottom: 2px;
}
.plan-card-price small {
  font-size: 13px; font-weight: 500;
  color: var(--fg3); letter-spacing: 0;
}
.plan-card-cat {
  font-size: 12px; color: var(--fg3);
  text-align: center; margin-bottom: 20px;
  font-variant-numeric: tabular-nums;
}
.plan-card-cat strong { color: var(--fg1); font-weight: 600; }
.plan-card-benefits {
  display: flex; flex-direction: column;
  gap: 8px; margin-bottom: 20px; flex: 1;
}
.plan-card-benefit {
  display: flex; align-items: flex-start;
  gap: 8px; font-size: 13px;
  color: var(--fg2); line-height: 1.4;
}
.plan-card-benefit svg {
  width: 16px; height: 16px;
  color: var(--accent-go);
  flex-shrink: 0; margin-top: 1px;
}
.plan-card.is-ineligible .plan-card-benefit svg { color: var(--fg4); }
.plan-card-cta { margin-top: auto; }
.plan-card-cta-btn {
  width: 100%; background: var(--ink); color: white;
  border: 0; padding: 12px;
  border-radius: var(--radius-button);
  font-family: inherit; font-size: 14px;
  font-weight: 500; cursor: pointer;
  transition: background var(--motion-fast);
}
.plan-card-cta-btn:hover { background: #1F262E; }
.plan-card-cta-btn-disabled {
  width: 100%;
  background: var(--surface-2); color: var(--fg4);
  border: 1px solid var(--border);
  padding: 12px;
  border-radius: var(--radius-button);
  font-family: inherit; font-size: 14px;
  font-weight: 500; cursor: not-allowed;
}
.plan-card-disabled-reason {
  font-size: 12px;
  color: #B07614;
  text-align: center;
  margin-top: 8px; line-height: 1.4;
}

/* Wizard-style back link */
.wizard-back-link {
  display: inline-flex; align-items: center;
  gap: 6px; padding: 6px 12px 6px 8px;
  border-radius: var(--radius-button);
  background: transparent; border: 0;
  font-family: inherit; font-size: 13px;
  font-weight: 500; color: var(--fg2);
  cursor: pointer; margin-bottom: 16px;
  transition: all var(--motion-fast) var(--ease-default);
}
.wizard-back-link:hover {
  background: var(--surface-2);
  color: var(--fg1);
}
.wizard-back-link svg { width: 16px; height: 16px; }

/* Dash section title (cotizaciones guardadas) */
.dash-section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--fg1);
  margin: 32px 0 16px;
}

@media (max-width: 720px) {
  .vehicle-grid { grid-template-columns: 1fr; }
  .price-card { grid-template-columns: 1fr; padding: 20px; }
  .price-card-divider { width: 100%; height: 1px; }
  .plancards-wrap { grid-template-columns: 1fr; }
  .enganche-pills { flex-wrap: wrap; }
  .enganche-pill { flex: 0 0 calc(25% - 5px); }
}

/* ════════════════════════════════════════════════════════════════════
   S54 · Chatbot homologado al back (handoff "04 · Docked Panel")
   IDs originales (botPanel/botBubble/etc) intactos por compatibilidad JS.
   Avatar = isotipo oficial (assets/iso-inverse-accent-green.svg).
   ════════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────
   S3.6 · Asistente · Barra acoplada (dock / split) — espejo del backoffice.
   El panel #botPanel es .dock: fijo bajo el topbar (64px), a la derecha;
   .main se encoge con margin-right. SIN historial, SIN .dk-ctx.
   Tokens del DS mi-exante; donde el backoffice usa un token inexistente aquí,
   se mapea al equivalente que sí existe (ver notas inline).
   ───────────────────────────────────────────────────────────────── */
.dock {
  position: fixed;
  top: 64px;                 /* altura real del topbar de mi-exante (grid-template-rows) */
  right: -460px;
  bottom: 0;
  width: 420px; max-width: 92vw;
  z-index: 900;              /* sobre el contenido, debajo de overlays auth/modales (≥1000) */
  overflow: hidden;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border-subtle);
  box-shadow: -16px 0 40px -20px rgba(15,20,25,.18);
  transition: right var(--motion-slow) var(--ease-default);
  font-family: 'Inter', system-ui, sans-serif;
}
.dock[hidden] { display: none !important; }
.dock.open { right: 0; }
.dock-inner { width: 100%; height: 100%; display: flex; flex-direction: column; min-height: 0; }

/* ════════════════════════════════════════════════════════════════════
   S292 · AJUSTES · Barra acoplada (.st) — handoff_ajustes_dock (mi-exante)
   Gemela del dock del Asistente/Centro. Namespaceada bajo .st. El reflow del
   contenido lo aplica el JS con max-width inline (la reja es grid), igual que el dock.
   ════════════════════════════════════════════════════════════════════ */
.st { position: fixed; top: 64px; right: 0; bottom: 0; width: 420px; max-width: 92%; z-index: 900; display: flex; flex-direction: column;
      background: var(--color-surface); border-left: 1px solid var(--color-border-subtle);
      box-shadow: -16px 0 40px -20px rgba(15,20,25,.18); transform: translateX(100%);
      transition: transform var(--motion-slow) var(--ease-default); }
.st.open { transform: translateX(0) !important; } /* S292-fix · !important: la clase de estado no gana la cascada (igual que dock/ncx2) */
.st[hidden] { display: none !important; }
.st .st-head { display: flex; align-items: center; gap: 11px; padding: 13px 14px; background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border-default); flex-shrink: 0; }
.st .st-tile { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-surface); border: 1px solid var(--color-border-subtle); color: var(--fg1); flex-shrink: 0; }
.st .st-tile svg { width: 17px; height: 17px; }
.st .st-hi { flex: 1; min-width: 0; }
.st .st-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--fg1); }
.st .st-hactions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.st .hbtn { width: 34px; height: 34px; border: none; background: transparent; border-radius: var(--r-md); color: var(--fg2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast); }
.st .hbtn:hover { background: rgba(15,20,25,.06); color: var(--fg1); }
.st .hbtn svg { width: 17px; height: 17px; }
.st .st-screens { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.st .screen { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; background: var(--color-surface); transition: transform var(--motion-base) var(--ease-default), opacity var(--motion-base) var(--ease-default); }
.st .screen.list { transform: translateX(0); }
.st.det .screen.list { transform: translateX(-22%) !important; opacity: 0; pointer-events: none; }
.st .screen.detail { transform: translateX(100%); opacity: 0; pointer-events: none; }
.st.det .screen.detail { transform: translateX(0) !important; opacity: 1; pointer-events: auto; }
.st .sc-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.st .ident { display: flex; align-items: center; gap: 13px; padding: 20px 18px; border-bottom: 1px solid var(--color-border-subtle); }
.st .ident .av { width: 46px; height: 46px; border-radius: 999px; background: var(--gradient-avatar-1, linear-gradient(135deg,#1A8B82,#1FAE5F)); color: #fff; display: flex; align-items: center; justify-content: center; font: 600 16px 'Inter', sans-serif; flex-shrink: 0; }
.st .ident .nm { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg1); }
.st .ident .em { font-size: 12.5px; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.st .sec-list { padding: 8px 8px 4px; }
.st .sec { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; border: none; background: transparent; cursor: pointer; padding: 11px 12px; border-radius: var(--r-md); transition: background var(--motion-fast); }
.st .sec:hover { background: var(--color-bg-subtle); }
.st .sec .ic { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--color-bg-subtle); color: var(--fg1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.st .sec .ic svg { width: 18px; height: 18px; }
.st .sec .tx { flex: 1; min-width: 0; }
.st .sec .t1 { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; color: var(--fg1); }
.st .sec .t2 { display: block; font-size: 12.5px; color: var(--fg3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st .sec .go { width: 16px; height: 16px; color: var(--fg4); flex-shrink: 0; }
.st .sec.is-danger .ic { background: var(--error-tint, #F4DCD7); color: var(--color-error-deep, #8C2018); }
.st .sec.is-danger .t1 { color: var(--color-error-deep, #8C2018); }
.st .det-head { display: flex; align-items: center; gap: 6px; padding: 11px 12px; border-bottom: 1px solid var(--color-border-subtle); flex-shrink: 0; }
.st .det-back { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px 0 8px; border: none; background: transparent; border-radius: var(--r-md); color: var(--fg1); font: 600 14px 'Inter', sans-serif; cursor: pointer; transition: background var(--motion-fast); }
.st .det-back:hover { background: var(--color-bg-subtle); }
.st .det-back svg { width: 18px; height: 18px; color: var(--fg2); }
.st .det-body { padding: 18px; }

/* #view-perfil reubicado dentro de la barra: una tarjeta visible por sección. */
.st #view-perfil { display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
.st #view-perfil .profile-card { display: none; margin: 0; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: none; padding: 0; background: var(--surface); max-width: none; }
.st #view-perfil .profile-card.st-show { display: block; }
/* S292-fix · en la barra (420px) las filas son angostas: la acción ("Cambiar →") no debe
   partirse en 2 líneas y la etiqueta cede ancho para que todo entre en una fila. */
.profile-row .action { white-space: nowrap; flex-shrink: 0; }
.st #view-perfil .profile-row { gap: 12px; }
.st #view-perfil .profile-row .label { flex: 0 0 auto; white-space: nowrap; }
.st #view-perfil .profile-row .value { min-width: 0; }

@media (max-width: 860px) {
  .st { width: 100%; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .st, .st .screen { transition: none; }
}

/* .main se encoge cuando el dock está abierto (solo desktop).
   Nota: .main es grid item con track fijo (1fr) → margin-right no reduce su
   border-box; usamos max-width para empujar el contenido (split real). */
.app > .main { max-width: 100%; transition: max-width var(--motion-slow) var(--ease-default); }
body.dock-open .app > .main { max-width: calc(100% - 420px); }

/* Header del dock */
.dk-head { display: flex; align-items: center; gap: 11px; padding: 14px 16px; background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border-default); flex-shrink: 0; }
.dk-head .ch-logo { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(15,20,25,.07); }
.dk-head .hi { flex: 1; min-width: 0; }
.dk-head .ch-nm { font: 600 15px 'Inter', system-ui, sans-serif; letter-spacing: -0.01em; color: var(--fg1); }
.dk-head .ch-st { font: 400 11.5px/1.3 'Inter', system-ui, sans-serif; color: var(--fg3); margin-top: 2px; }
.dk-head .hbtns { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.dk-head .hbtn { width: 34px; height: 34px; border: none; background: transparent; border-radius: 10px; color: var(--fg2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast); }
.dk-head .hbtn:hover { background: rgba(15,20,25,.06); color: var(--fg1); }
.dk-head .hbtn:focus-visible { outline: 2px solid var(--color-action-ink); outline-offset: 2px; }
.dk-head .hbtn svg { width: 18px; height: 18px; }

/* Scroll de mensajes */
.dk-scroll { flex: 1; overflow-y: auto; min-height: 0; padding: 20px 16px; display: flex; flex-direction: column; gap: 18px; scrollbar-width: none; -ms-overflow-style: none; }
.dk-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Footer / composer del dock */
.dk-foot { border-top: 1px solid var(--color-border-subtle); padding: 12px 16px 14px; flex-shrink: 0; background: var(--color-bg-subtle); }
.dk-foot .composer { display: flex; align-items: flex-end; gap: 8px; border: 1px solid var(--color-border-default); border-radius: 999px; padding: 7px; background: var(--color-surface); box-shadow: 0 1px 2px rgba(15,20,25,.04); transition: border-color var(--motion-fast); margin: 0; }
.dk-foot .composer:focus-within { border-color: var(--fg1); }
.dk-foot .composer textarea { flex: 1; border: none; outline: none; background: none; resize: none; font: 400 14.5px/1.5 'Inter', system-ui, sans-serif; color: var(--fg1); padding: 9px 12px; max-height: 110px; scrollbar-width: none; -ms-overflow-style: none; }
.dk-foot .composer textarea::-webkit-scrollbar { display: none; width: 0; height: 0; }
.dk-foot .composer textarea:focus, .dk-foot .composer textarea:focus-visible { outline: 0 !important; box-shadow: none !important; }
.dk-foot .composer textarea::placeholder { color: var(--fg3); }
.dk-foot .composer .send { width: 40px; height: 40px; border-radius: 999px; flex-shrink: 0; background: var(--color-action-ink); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--motion-fast); }
.dk-foot .composer .send:hover { background: #1F262E; }
.dk-foot .composer .send:disabled { opacity: .4; cursor: not-allowed; }
.dk-foot .composer .send svg { width: 18px; height: 18px; }
.dk-disc { text-align: center; font: 400 11.5px 'Inter', system-ui, sans-serif; color: var(--fg4); padding: 9px 0 0; }

/* Mensajes · homologado con backoffice (.msg-a sin globo + avatar isotipo,
   .msg-u con globo gris + avatar de iniciales, markdown vía mdToHtml). */
.msg-a { display: flex; gap: 11px; }
.msg-a .av { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(15,20,25,.07); }
.msg-a .ab { min-width: 0; flex: 1; }
.msg-a .who { font: 600 12.5px var(--font-sans, 'Inter', system-ui, sans-serif); color: var(--fg2); margin-bottom: 6px; }
.msg-a .ab p { margin: 0 0 11px; font: 400 14.5px/1.6 var(--font-sans, 'Inter', system-ui, sans-serif); color: var(--fg1); }
.msg-a .ab p:last-child { margin-bottom: 0; }
.msg-a .ab strong { font-weight: 600; }
.msg-a .ab em { font-style: italic; }
.msg-a .ab code { background: rgba(15,20,25,.08); padding: 1px 5px; border-radius: 4px; font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 12.5px; }
.msg-a .ab pre { background: rgba(15,20,25,.06); padding: 8px 10px; border-radius: 6px; overflow-x: auto; margin: 6px 0; font-size: 12.5px; }
.msg-a .ab pre code { background: transparent; padding: 0; }
.msg-a .ab h3, .msg-a .ab h4 { margin: 8px 0 4px; font-weight: 600; font-size: 13.5px; color: var(--fg1); }
.msg-a .ab ul, .msg-a .ab ol { margin: 4px 0 8px 18px; padding: 0; }
.msg-a .ab li { margin: 2px 0; font-size: 14.5px; line-height: 1.55; }
.msg-a .ab hr { border: 0; border-top: 1px solid var(--color-border-subtle); margin: 10px 0; }
.msg-a .ab a { color: var(--color-accent-green-deep); text-decoration: underline; }
/* Tablas markdown · estilo handoff: contenedor redondeado, header gris, separadores horizontales (sin rejilla) */
.msg-a .ab table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 8px 0; font-size: 13px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md, 10px); overflow: hidden; }
.msg-a .ab th, .msg-a .ab td { padding: 9px 13px; text-align: left; border-bottom: 1px solid var(--color-border-subtle); vertical-align: top; }
.msg-a .ab th { background: var(--color-bg-subtle); font-weight: 600; color: var(--fg1); font-size: 12.5px; }
.msg-a .ab tr:last-child td { border-bottom: none; }
.msg-u { display: flex; justify-content: flex-end; gap: 11px; }
.msg-u .uav { width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0; background: linear-gradient(135deg,#5A6CE5,#7A5BC2); color: #fff; display: flex; align-items: center; justify-content: center; font: 600 11px var(--font-sans, 'Inter', system-ui, sans-serif); order: 2; }
.msg-u .ub { max-width: 86%; background: var(--color-bg-subtle); color: var(--fg1); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md, 10px); padding: 11px 15px; font: 400 14.5px/1.5 var(--font-sans, 'Inter', system-ui, sans-serif); order: 1; white-space: pre-wrap; word-break: break-word; }

/* Indicador "escribiendo" (3 puntos) · dentro de un .msg-a */
.typing { display: inline-flex; align-items: center; gap: 5px; padding: 4px 2px; }
.typing i { width: 7px; height: 7px; border-radius: 999px; background: var(--fg4); animation: dk-blink 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes dk-blink { 0%,60%,100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

/* Eyebrow + 3 prompts · solo estado inicial */
.bot-eyebrow {
  font: 500 11px 'Inter';
  text-transform: uppercase; letter-spacing: .1em;
  color: #8B92A1;
  margin: 4px 0 8px;
}
.bot-eyebrow[hidden] { display: none !important; }
.bot-prompts { display: flex; flex-direction: column; gap: 8px; }
.bot-prompts[hidden] { display: none !important; }
.bot-prompt {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  cursor: pointer; text-align: left;
  font-family: 'Inter', system-ui, sans-serif;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.bot-prompt:hover { background: #F2F4F6; border-color: #D1D5DB; }
.bot-prompt:focus-visible { outline: none; box-shadow: none; }
.bot-prompt-chip {
  width: 30px; height: 30px;
  background: #F2F4F6;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #4B5563;
  flex-shrink: 0;
  transition: color var(--motion-fast);
}
.bot-prompt:hover .bot-prompt-chip { color: #0F1419; }
.bot-prompt-chip svg { width: 16px; height: 16px; }
.bot-prompt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bot-prompt-title { font: 500 13px/1.3 'Inter'; color: #0F1419; }
.bot-prompt-sub { font: 400 11.5px/1.3 'Inter'; color: #8B92A1; }

/* Indicador "escribiendo" · 3 puntitos */
.bot-typing {
  display: inline-flex; gap: 4px; align-items: center;
  padding: 13px 15px;
}
.bot-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #8B92A1;
  animation: bot-dot 1.4s infinite ease-in-out;
}
.bot-typing span:nth-child(2) { animation-delay: 0.2s; }
.bot-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bot-dot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .bot-typing span { animation: none; opacity: 0.7; }
}

/* (FOOTER/composer del asistente: ahora vive en .dk-foot · ver bloque del dock arriba) */

/* Responsive · <=860px el dock pasa a overlay 100vw y .main no se encoge */
@media (max-width: 860px) {
  .dock { width: 100vw; max-width: 100vw; right: -100vw; }
  body.dock-open .app > .main { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .dock, .app > .main { transition: none; }
}

/* ========================================================================
   EXPEDIENTE — TABS Personal / Empresas (D34 · UI mockup-fiel)
   ======================================================================== */
/* Segmented pill tabs (estilo contract-tabs del mockup) */
.exp-tabs-wrap {
  display: flex; justify-content: center;
  margin-bottom: 32px;
}
.subexp-tabs {
  display: inline-flex; gap: 4px;
  background: var(--surface-2);
  border-radius: 999px; padding: 4px;
  box-shadow: inset 0 0 0 1px var(--border);
}
.exp-tab {
  display: inline-flex; align-items: center;
  gap: 8px; padding: 10px 22px; border: 0;
  background: transparent; border-radius: 999px;
  font-family: inherit; font-size: 14px;
  font-weight: 500; color: var(--fg3);
  cursor: pointer;
  transition: all var(--motion-fast) var(--ease-default);
  white-space: nowrap;
}
.exp-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
.exp-tab.is-active {
  background: var(--surface); color: var(--fg1);
  font-weight: 600; box-shadow: 0 1px 2px rgba(15,20,25,0.04);
}
.exp-tab-icon { display: inline-flex; }
.exp-tab-badge {
  display: none;
  background: var(--accent-go); color: white;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  letter-spacing: 0.02em;
}
.exp-tab-badge:not(:empty) { display: inline-flex; }
.exp-panel { animation: exp-panel-fade var(--motion-base) ease; }
@keyframes exp-panel-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Sub-expediente card — estilo mockup (single white card con status-badge inside) */
.subexp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 16px;
}

/* ════════════════════════════════════════════════════════════
   S3.3f-A · Stepper de expediente con barra de progreso y
   lista de pasos. Se renderiza cuando el expediente está en
   progreso (status != sin_expediente && != completo).
   ════════════════════════════════════════════════════════════ */
.exp-progress {
  margin: 18px 0 22px;
}
.exp-progress-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 400 12px 'Inter', sans-serif;
  color: var(--fg3);
  margin-bottom: 6px;
}
.exp-progress-meta strong {
  color: var(--fg1); font-weight: 500;
}
.exp-progress-bar {
  height: 4px; width: 100%;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.exp-progress-fill {
  height: 100%;
  background: var(--gradient-green-mint);
  border-radius: 999px;
  transition: width var(--motion-slow) var(--ease-default);
}

.exp-steps {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border);
  margin-top: 8px;
  margin-bottom: 24px;
}
.exp-step {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}
.exp-step-dot {
  width: 22px; height: 22px; border-radius: 999px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font: 500 11px 'Inter', sans-serif;
  background: var(--surface-2);
  color: var(--fg3);
  border: 1px solid var(--border);
}
.exp-step-dot svg { width: 12px; height: 12px; }
.exp-step.is-done .exp-step-dot {
  background: var(--accent-go, #1FAE5F);
  color: #fff;
  border-color: transparent;
}
.exp-step.is-current .exp-step-dot {
  background: var(--ink, #0F1419);
  color: #fff;
  border-color: transparent;
}
.exp-step-label {
  flex: 1;
  font: 400 14px 'Inter', sans-serif;
  color: var(--fg2);
}
.exp-step.is-done .exp-step-label { color: var(--fg1); }
.exp-step.is-current .exp-step-label {
  color: var(--fg1); font-weight: 500;
}
.exp-step-meta {
  font: 400 11px 'Inter', sans-serif;
  color: var(--fg3);
  white-space: nowrap;
}

/* Estado completo: check grande verde · sin stepper */
.exp-done-block {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 16px 0 12px;
  gap: 12px;
}
.exp-done-check {
  width: 64px; height: 64px; border-radius: 999px;
  background: linear-gradient(135deg, #5EE39E, #1FAE5F);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.exp-done-check svg { width: 30px; height: 30px; stroke-width: 2.2; }
.exp-done-title {
  font: 500 18px 'Inter', sans-serif;
  color: var(--fg1);
  letter-spacing: -0.005em;
}
.exp-done-meta {
  font: 400 13px 'Inter', sans-serif;
  color: var(--fg3);
}
.subexp-card-header {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 16px;
  margin-bottom: 8px;
}
.subexp-card-title {
  font-size: 18px; font-weight: 600;
  color: var(--fg1); margin: 0;
}
.subexp-card-desc {
  font-size: 14px; color: var(--fg2);
  max-width: 520px; line-height: 1.55;
  margin: 0 0 24px;
}
.subexp-card-desc strong { color: var(--fg1); font-weight: 600; }
.subexp-card-meta {
  font-size: 12px; color: var(--fg3);
  margin-bottom: 16px;
  font-family: 'SF Mono', Menlo, monospace;
  letter-spacing: 0.02em;
}
.subexp-card-cta {
  display: flex; justify-content: flex-end;
}

/* Status badge — replica del mockup con SVG inline (4 variants) */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.status-badge::before {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}
.status-badge.pending {
  background: var(--surface-2);
  color: var(--fg3);
}
.status-badge.pending::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238B92A1' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/></svg>");
}
.status-badge.progress {
  background: var(--neutral-soft);
  color: var(--fg2);
}
.status-badge.progress::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><path d='M14 2v4a2 2 0 0 0 2 2h4'/><path d='M12 12v6'/><path d='m15 15-3-3-3 3'/></svg>");
}
/* En revisión — mismo gris neutro que progress, distinto icono (folder-clock) */
.status-badge.review {
  background: var(--neutral-soft);
  color: var(--fg2);
}
.status-badge.review::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><line x1='10' x2='14' y1='2' y2='2'/><line x1='12' x2='15' y1='14' y2='11'/><circle cx='12' cy='14' r='8'/></svg>");
}
.status-badge.done {
  background: var(--color-success-tint, #D8EEDF);
  color: var(--fg1);
}
.status-badge.done::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2316904E' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M21.801 10A10 10 0 1 1 17 3.335'/><path d='m9 11 3 3L22 4'/></svg>");
}
.status-badge.warning {
  background: var(--warning-soft);
  color: #B07614;
}
.status-badge.warning::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B07614' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
}

/* Preparation box (lista de docs a tener a la mano antes del wizard) */
.prep-box {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 24px;
}
.prep-box-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--fg1);
  margin-bottom: 16px;
  letter-spacing: -0.005em;
}
.prep-box-title svg { width: 16px; height: 16px; color: var(--fg2); }
.prep-list { display: flex; flex-direction: column; gap: 14px; }
.prep-item {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: var(--fg1); line-height: 1.5;
}
.prep-check {
  width: 18px; height: 18px; flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238B92A1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
  background-repeat: no-repeat; background-position: center;
}
.prep-time {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--fg3);
}
.prep-time svg { width: 14px; height: 14px; color: var(--fg3); }
.prep-time strong { color: var(--fg1); font-weight: 600; }

/* Empresa card (estilo mockup) */
.empresas-cards { display: flex; flex-direction: column; gap: 12px; }
.empresa-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 24px;
  display: flex; justify-content: space-between;
  align-items: center; gap: 16px;
  transition: all var(--motion-fast) var(--ease-default);
}
.empresa-card:hover { box-shadow: 0 1px 2px rgba(15,20,25,0.04); }
.empresa-card-main { flex: 1; }
.empresa-card-title {
  font-size: 15px; font-weight: 600;
  color: var(--fg1); margin-bottom: 2px;
}
.empresa-card-meta {
  font-size: 13px; color: var(--fg3);
  margin-bottom: 8px;
  font-family: 'SF Mono', Menlo, monospace;
  letter-spacing: 0.02em;
}
.empresa-card-state {
  display: flex; align-items: center; gap: 8px;
}
.empresa-card-cta {
  display: flex; gap: 8px;
}

.empresa-add-card {
  background: var(--surface);
  border: 1.5px dashed var(--border-strong);
  border-radius: 16px;
  padding: 20px 24px;
  display: flex; align-items: center; gap: 16px;
  cursor: pointer; font-family: inherit;
  text-align: left; width: 100%;
  transition: all var(--motion-fast) var(--ease-default);
}
.empresa-add-card:hover {
  border-color: var(--ink);
  background: var(--surface-2);
}
.empresa-add-card svg { color: var(--fg2); flex-shrink: 0; }
.empresa-add-card .empresa-add-text strong {
  display: block;
  font-size: 14px; font-weight: 600;
  color: var(--fg1); margin-bottom: 2px;
}
.empresa-add-card .empresa-add-text span {
  font-size: 12px; color: var(--fg3);
}

/* ========================================================================
   EXPEDIENTE doc rows
   ======================================================================== */
.exp-section { margin-bottom: 28px; }
.exp-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.exp-section-head h3 { font-weight: 600; font-size: 15px; margin: 0; letter-spacing: -0.01em; }
.exp-section-head .count { font-size: 12px; color: var(--fg4); }

.doc-list { display: flex; flex-direction: column; gap: 8px; }
.doc-row {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.doc-row.warn .doc-icon { background: var(--warning-soft); color: var(--warning); }
.doc-row.is-ink .doc-icon { background: var(--neutral-soft); color: var(--ink); }
.doc-row.error-state .doc-icon { background: var(--error-soft); color: var(--error); }
.doc-row.empty { opacity: 0.7; background: var(--surface-2); }
.doc-row .doc-icon {
  width: 40px; height: 40px;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--fg3);
}
.doc-row .doc-icon svg { width: 18px; height: 18px; stroke-width: 1.7; }
.doc-row .doc-name { font-weight: 500; font-size: 14px; margin-bottom: 2px; }
.doc-row .doc-meta { font-size: 12px; color: var(--fg3); }
.doc-row .action {
  font-size: 13px;
  color: var(--fg1);
  cursor: pointer;
  font-weight: 500;
  background: transparent; border: 0; padding: 0;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}
.doc-row .action:hover { text-decoration-color: var(--fg1); }

/* EXPEDIENTE · hover-reveal chevron para docs con acción "Ver" (validados).
   La fila completa es clickable. "Actualizar" y "Subir" conservan botón visible. */
#view-expediente .doc-row {
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
#view-expediente .doc-row.is-viewable {
  cursor: pointer;
}
#view-expediente .doc-row.is-viewable:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
#view-expediente .doc-row .arrow-subtle {
  width: 16px; height: 16px;
  color: var(--fg4);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--motion-fast), transform var(--motion-fast);
}
#view-expediente .doc-row.is-viewable:hover .arrow-subtle {
  opacity: 1;
  transform: translateX(0);
}
#view-expediente .doc-row .arrow-subtle svg { width: 100%; height: 100%; }

@media (hover: none) {
  #view-expediente .doc-row .arrow-subtle {
    opacity: 1;
    transform: translateX(0);
  }
}

.exp-foot {
  margin-top: 18px;
  padding: 16px 20px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--fg3);
  font-size: 13px;
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════
   MI INFORMACIÓN · REDISEÑO (handoff design_handoff_mi_informacion 8)
   Fase 1 · dashboard + rail + estados/KPIs/docs + deep-link.
   Clases con prefijo .mi8- para no colisionar con el CSS previo del
   expediente. Tokens idénticos a los del handoff (ya viven en :root).
   Eyebrows usan --fg3 (nuestro --fg4 es el gris disabled).
   ════════════════════════════════════════════════════════════════ */

/* Layout maestro-detalle (vault) */
.mi8-vault { display: grid; grid-template-columns: 264px 1fr; gap: 24px; align-items: start; }
.mi8-vault.is-focus { grid-template-columns: 1fr; }
.mi8-main { min-width: 0; }

/* Rail de expedientes */
.mi8-rail {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 12px;
}
.mi8-rail-label {
  font: 600 10px/1 'Inter', sans-serif; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--fg3); padding: 6px 12px 8px;
}
.mi8-rail-label.gap { margin-top: 10px; }
.mi8-rail-empty { padding: 8px 12px 4px; font: 400 12px/1.4 'Inter', sans-serif; color: var(--fg3); font-style: italic; }
.mi8-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border-radius: var(--r-md);
  cursor: pointer; text-align: left; font-family: inherit;
  background: transparent; border: 0; width: 100%;
}
.mi8-item:hover { background: var(--surface-2); }
.mi8-item.is-active { background: var(--surface-2); }
.mi8-vdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--border-strong); }
.mi8-vdot.ok { background: var(--color-accent-green); }
.mi8-vdot.warn { background: var(--color-warning); }
.mi8-vdot.review, .mi8-vdot.progress { background: var(--color-notice); }
.mi8-vdot.idle { background: var(--border-strong); }
.mi8-vbody { min-width: 0; flex: 1; }
.mi8-vname { font: 500 13px/1.3 'Inter', sans-serif; color: var(--fg1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi8-item.is-active .mi8-vname { font-weight: 600; }
.mi8-vmeta { font: 400 11px/1.3 'Inter', sans-serif; color: var(--fg3); margin-top: 2px; }
.mi8-vchev { width: 15px; height: 15px; color: var(--fg3); flex-shrink: 0; }
.mi8-vchev svg { width: 100%; height: 100%; }
.mi8-rail-add {
  margin-top: 4px; display: flex; align-items: center; gap: 9px;
  padding: 11px 12px; border-radius: var(--r-md);
  border: 1.5px dashed var(--border-strong); background: transparent;
  color: var(--fg2); font: 500 13px 'Inter', sans-serif; cursor: pointer; font-family: inherit;
}
.mi8-rail-add:hover { border-color: var(--ink); color: var(--fg1); background: var(--color-bg-subtle); }
.mi8-rail-add svg { width: 16px; height: 16px; }

/* Línea de estado (OpcionC · eyebrow apilado) */
.mi8-estado-line { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.mi8-estado-line.is-stacked { flex-direction: column; align-items: flex-start; gap: 7px; }
.mi8-eyebrow { flex-shrink: 0; font: 600 11px/1 'Inter', sans-serif; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg3); }
.mi8-eyebrow.is-success { color: var(--color-accent-green-deep); }
.mi8-eyebrow.is-warning { color: #B07614; }
.mi8-headline { font: 600 17px/1.3 'Inter', sans-serif; color: var(--fg1); letter-spacing: -0.01em; min-width: 0; }

/* KPIs */
.mi8-kpis { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.mi8-kpi { display: inline-flex; align-items: baseline; gap: 7px; padding: 7px 13px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); }
.mi8-kpi .n { font: 600 14px/1 'Inter', sans-serif; font-variant-numeric: tabular-nums; color: var(--fg1); letter-spacing: -0.01em; }
.mi8-kpi .l { font: 500 11px/1 'Inter', sans-serif; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg3); }
.mi8-kpi.is-ok { background: var(--color-success-tint); border-color: #BDDDC9; }
.mi8-kpi.is-ok .n { color: var(--color-accent-green-deep); }
.mi8-kpi.is-ok .l { color: var(--color-accent-green-deep); opacity: 0.75; }
.mi8-kpi.is-warn { background: var(--color-warning-tint); border-color: #ECCEA0; }
.mi8-kpi.is-warn .n { color: #B07614; }
.mi8-kpi.is-warn .l { color: #B07614; opacity: 0.8; }

/* Grid de accesos rápidos (tiles) */
.mi8-qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 22px; }
.mi8-qa-tile {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  text-decoration: none; font-family: inherit;
  transition: border-color .12s ease, background .12s ease;
}
.mi8-qa-tile:hover { border-color: var(--border-strong); background: var(--surface-2); }
.mi8-qa-ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--fg2); }
.mi8-qa-ic svg { width: 19px; height: 19px; stroke-width: 1.8; }
.mi8-qa-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mi8-qa-title { display: block; font: 600 14px/1.25 'Inter', sans-serif; color: var(--fg1); }
.mi8-qa-cap { display: block; font: 400 12px/1.4 'Inter', sans-serif; color: var(--fg3); }
.mi8-qa-chev { width: 16px; height: 16px; color: var(--fg3); flex-shrink: 0; }
.mi8-qa-chev svg { width: 100%; height: 100%; }
.mi8-qa-tile.is-primary { grid-column: 1 / -1; background: var(--ink); border-color: var(--ink); }
.mi8-qa-tile.is-primary .mi8-qa-title, .mi8-qa-tile.is-primary .mi8-qa-chev { color: #fff; }
.mi8-qa-tile.is-primary .mi8-qa-cap { color: rgba(255,255,255,0.66); }
.mi8-qa-tile.is-primary .mi8-qa-ic { background: rgba(255,255,255,0.12); color: #fff; }
.mi8-qa-tile.is-primary:hover { background: #1A2026; border-color: #1A2026; }

/* Lista de documentos del dashboard */
.mi8-doc-list { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.mi8-doc-head { font: 500 11px/1 'Inter', sans-serif; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg3); margin-bottom: 2px; }
.mi8-doc-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); transition: background 120ms; }
.mi8-doc-row:hover { background: var(--color-bg-subtle); }
.mi8-doc-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--fg2); }
.mi8-doc-ic.st-vencido { background: var(--color-warning-tint); color: #B07614; }
.mi8-doc-ic.st-rechazado, .mi8-doc-ic.st-observado { background: var(--color-error-tint); color: #B83227; }
.mi8-doc-ic svg { width: 19px; height: 19px; stroke-width: 1.8; }
.mi8-doc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mi8-doc-name { font: 600 14px/1.25 'Inter', sans-serif; color: var(--fg1); }
.mi8-doc-meta { font: 500 12px/1.3 'Inter', sans-serif; color: var(--fg3); }
.mi8-doc-meta.st-vencido { color: #B07614; }
.mi8-doc-meta.st-rechazado, .mi8-doc-meta.st-observado { color: #B83227; }
.mi8-doc-row .btn { flex-shrink: 0; font-size: 13px; padding: 8px 16px; }
.mi8-doc-check { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--color-accent-green); }
.mi8-doc-check svg { width: 20px; height: 20px; }

/* Indicador de estado (empresa header) · dot + palabra coloreada */
.mi8-state { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 'Inter', sans-serif; white-space: nowrap; color: var(--fg2); flex-shrink: 0; }
.mi8-state .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fg3); flex-shrink: 0; }
.mi8-state.is-success { color: var(--color-accent-green-deep); }
.mi8-state.is-success .dot { background: var(--color-accent-green); }
.mi8-state.is-warning { color: #B07614; }
.mi8-state.is-warning .dot { background: var(--color-warning); }
.mi8-state.is-neutral { color: var(--fg2); }
.mi8-state.is-neutral .dot { background: var(--fg3); }

/* Status header sobrio (tarjeta neutra) para empresa */
.mi8-status { display: flex; align-items: center; gap: 24px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 22px; }
.mi8-status .body { flex: 1; min-width: 0; }
.mi8-status .eyebrow { font: 500 10px/1 'Inter', sans-serif; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg3); margin-bottom: 7px; }
.mi8-status .headline { font: 600 16px/1.35 'Inter', sans-serif; color: var(--fg1); letter-spacing: -0.01em; }
.mi8-status-aside { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }

/* Prep tiles (no_iniciado) · "Ten a la mano" */
.mi8-prep { margin-bottom: 24px; }
.mi8-prep-title { display: flex; align-items: center; gap: 8px; font: 600 13px 'Inter', sans-serif; color: var(--fg1); margin-bottom: 16px; }
.mi8-prep-title svg { width: 16px; height: 16px; color: var(--fg2); }
.mi8-prep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mi8-prep-tile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.mi8-prep-tile .ic { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); color: var(--fg2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mi8-prep-tile .ic svg { width: 18px; height: 18px; }
.mi8-prep-tile .name { font: 500 13.5px/1.3 'Inter', sans-serif; color: var(--fg1); }
.mi8-prep-tile .hint { font: 400 12px/1.4 'Inter', sans-serif; color: var(--fg3); margin-top: 2px; }
.mi8-prep-time { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--fg3); }
.mi8-prep-time svg { width: 14px; height: 14px; color: var(--fg3); }
.mi8-prep-time strong { color: var(--fg1); font-weight: 600; }

/* Stepper vertical conectado (en_progreso) */
.mi8-stepper { margin-bottom: 24px; }
.mi8-stepper-meta { display: flex; justify-content: space-between; align-items: baseline; font: 400 12px 'Inter', sans-serif; color: var(--fg3); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.mi8-stepper-meta strong { color: var(--fg1); font-weight: 500; }
.mi8-stepper-bar { height: 4px; width: 100%; background: var(--border); border-radius: 999px; overflow: hidden; margin-bottom: 22px; }
.mi8-stepper-fill { height: 100%; background: var(--color-accent-green); border-radius: 999px; transition: width 320ms cubic-bezier(0.2,0,0,1); }
.mi8-stepper-list { position: relative; padding-left: 26px; }
.mi8-stepper-list::before { content: ''; position: absolute; left: 10px; top: 20px; bottom: 11px; width: 2px; background: var(--border-strong); }
.mi8-step { position: relative; padding: 0 0 26px; }
.mi8-step:last-child { padding-bottom: 0; }
.mi8-step .dot { position: absolute; left: -26px; top: 0; width: 22px; height: 22px; border-radius: 999px; z-index: 1; display: flex; align-items: center; justify-content: center; font: 500 11px 'Inter', sans-serif; font-variant-numeric: tabular-nums; background: var(--surface); color: var(--fg3); border: 1.5px solid var(--border-strong); }
.mi8-step .dot svg { width: 12px; height: 12px; stroke-width: 2.5; }
.mi8-step.is-done .dot { background: var(--color-accent-green); color: #fff; border-color: transparent; }
.mi8-step.is-current .dot { background: var(--ink); color: #fff; border-color: var(--ink); }
.mi8-step-content { display: flex; align-items: center; gap: 10px; min-height: 22px; padding-left: 8px; line-height: 1.2; }
.mi8-step-label { font: 400 14px 'Inter', sans-serif; color: var(--fg2); }
.mi8-step.is-done .mi8-step-label { color: var(--fg1); }
.mi8-step.is-current .mi8-step-label { color: var(--fg1); font-weight: 500; }
.mi8-step-tag { font: 600 9px/1 'Inter', sans-serif; text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 8px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--fg2); white-space: nowrap; flex-shrink: 0; }

/* Responsive · colapsa a 1 columna (alineado a nuestro shell) */
@media (max-width: 880px) {
  .mi8-vault { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   REPOSITORIO EDITABLE · Variante D (handoff repositorio.css)
   Portado 1:1; clases repo-/repoD- (sin colisión con el resto). Solo
   var(--font-sans/display) → 'Inter'/'Playfair Display'. Fase 2.
   ════════════════════════════════════════════════════════════════ */
.repo-page { font-family: 'Inter', sans-serif; color: var(--fg1); }
.repo-h-eyebrow { font: 600 11.5px/1 'Inter', sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--fg3); margin: 0 0 8px; }
.repo-h-title { font: 500 27px/1.15 'Playfair Display', serif; letter-spacing: -0.01em; margin: 0 0 6px; }
.repo-h-sub { font: 400 14px/1.5 'Inter', sans-serif; color: var(--fg2); margin: 0; max-width: 56ch; }
.repo-legend { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 0; }
.repo-legend-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.repo-legend-ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.repo-legend-ic svg { width: 16px; height: 16px; stroke-width: 1.75; }
.repo-legend-ic.free { background: var(--surface-2); color: var(--fg2); }
.repo-legend-ic.review { background: var(--color-info-tint); color: #2C5689; }
.repo-legend-txt b { display: block; font: 600 13px/1.3 'Inter', sans-serif; color: var(--fg1); }
.repo-legend-txt span { font: 400 12px/1.3 'Inter', sans-serif; color: var(--fg3); }
.repo-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-md); background: var(--color-info-tint); border: 1px solid #C5D6EA; margin: 18px 0 0; }
.repo-banner-ic { color: #2C5689; display: flex; }
.repo-banner-ic svg { width: 18px; height: 18px; stroke-width: 1.75; }
.repo-banner-txt { font: 400 13px/1.4 'Inter', sans-serif; color: #2C5689; flex: 1; }
.repo-banner-txt b { font-weight: 600; }
.repo-banner-link { font: 600 13px 'Inter', sans-serif; color: #2C5689; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.repo-pill { display: inline-flex; align-items: center; gap: 5px; font: 600 11px/1 'Inter', sans-serif; padding: 5px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.repo-pill svg { width: 12px; height: 12px; stroke-width: 2; }
.repo-pill.warn { background: var(--color-warning-tint); color: #B07614; }
.repo-pill.error { background: var(--color-error-tint); color: var(--color-error-deep, #B83227); }
.repo-pill.neutral { background: var(--surface-2); color: var(--fg2); }

.repoD-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 6px 0; overflow: hidden; }
.repoD-sech { font: 600 11px/1 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--fg3); padding: 18px 22px 6px; }
.repoD-sech.doc { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 18px; }
.repoD-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 14px; padding: 11px 14px; margin: 0 8px; border-radius: 10px; transition: background 120ms; position: relative; }
.repoD-row:hover { background: var(--color-bg-subtle); }
.repoD-row-ic { color: var(--fg3); display: inline-flex; }
.repoD-row-ic svg { width: 18px; height: 18px; stroke-width: 1.75; }
.repoD-k { font: 500 12px/1 'Inter', sans-serif; color: var(--fg3); margin-bottom: 5px; }
.repoD-v { font: 500 15px/1.2 'Inter', sans-serif; color: var(--fg1); width: fit-content; max-width: 100%; }
.repoD-btn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font: 500 13px/1 'Inter', sans-serif; color: var(--color-action-ink); background: var(--surface); border: 1px solid var(--border-strong); cursor: pointer; padding: 9px 14px; border-radius: 9px; transition: background 120ms, border-color 120ms; }
.repoD-btn:hover { background: var(--surface-2); border-color: var(--fg3); }
.repoD-btn svg { width: 15px; height: 15px; stroke-width: 1.85; }
.repoD-btn.req { color: var(--fg2); }
.repoD-btn.req svg { color: var(--fg3); }
.repoD-aff { display: flex; align-items: center; gap: 8px; justify-self: end; }
.repoD-tip { position: absolute; bottom: calc(100% + 8px); right: 10px; width: 248px; z-index: 8; background: var(--fg1); color: #fff; border-radius: 10px; padding: 11px 13px; font: 400 12.5px/1.5 'Inter', sans-serif; opacity: 0; pointer-events: none; transform: translateY(5px); transition: opacity 140ms, transform 140ms; box-shadow: 0 12px 28px -10px rgba(20,28,38,.5); }
.repoD-tip b { font-weight: 600; }
.repoD-tip::after { content: ''; position: absolute; top: 100%; right: 22px; border: 6px solid transparent; border-top-color: var(--fg1); }
.repoD-btn.req:hover + .repoD-tip { opacity: 1; transform: translateY(0); }
/* Afordancia en hover (Variante D): acción oculta que aparece al pasar el cursor */
.repoD-v.is-editable { border-bottom: 1px dashed var(--border-strong); padding-bottom: 2px; }
.repoD-editlink { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px/1 'Inter', sans-serif; color: var(--color-action-ink); background: transparent; border: 0; cursor: pointer; padding: 6px 8px; border-radius: 8px; opacity: 0; transform: translateX(-4px); transition: opacity 130ms, transform 130ms, background 120ms; font-family: inherit; white-space: nowrap; }
.repoD-editlink svg { width: 14px; height: 14px; stroke-width: 1.9; }
.repoD-editlink:hover { background: var(--surface-2); }
.repoD-row:hover .repoD-editlink, .repoD-row:focus-within .repoD-editlink { opacity: 1; transform: translateX(0); }
.repoD-lock { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; color: var(--fg4); cursor: help; transition: color 120ms, background 120ms; }
.repoD-lock svg { width: 15px; height: 15px; stroke-width: 1.85; }
.repoD-row:hover .repoD-lock { color: var(--fg2); background: var(--surface-2); }
.repoD-lock:hover + .repoD-tip, .repoD-editlink:hover + .repoD-tip { opacity: 1; transform: translateY(0); }
.repoD-row.is-editing { background: var(--color-bg-subtle); align-items: flex-start; }
.repoD-row.is-editing .repoD-row-ic { margin-top: 9px; }
.repoD-inline { display: flex; align-items: center; gap: 8px; }
.repoD-inline input { font: 500 14.5px/1 'Inter', sans-serif; color: var(--fg1); padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); min-width: 280px; outline: none; -webkit-appearance: none; appearance: none; transition: border-color 120ms cubic-bezier(.32,.72,0,1); }
.repoD-inline input::placeholder { color: var(--fg4, #B8BDC7); }
.repoD-inline input:focus { border-color: #6E7378; }   /* foco neutro 1px, sin glow (DS v0.6) */
.repoD-inline input.is-invalid, .repoD-inline input.is-invalid:focus { border-color: #B83227; }
/* S253.1 · casilla de teléfono (celular/fijo) con prefijo +52 + divisor · homologada con cotización */
.repoD-phone { display: flex; align-items: stretch; min-width: 280px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); overflow: hidden; transition: border-color 120ms cubic-bezier(.32,.72,0,1); }
.repoD-phone:focus-within { border-color: #6E7378; }
.repoD-phone.is-invalid, .repoD-phone.is-invalid:focus-within { border-color: #B83227; }
.repoD-phone-prefix { display: flex; align-items: center; padding: 0 14px; font: 500 14.5px/1 'Inter', sans-serif; color: var(--fg1); font-variant-numeric: tabular-nums; white-space: nowrap; border-right: 1px solid var(--border-strong); }
.repoD-phone input { flex: 1; min-width: 0; border: 0; outline: none; -webkit-appearance: none; appearance: none; background: transparent; font: 500 14.5px/1 'Inter', sans-serif; color: var(--fg1); padding: 9px 12px; }
.repoD-phone input::placeholder { color: var(--fg4, #B8BDC7); }
/* Avisos del flujo de edición (handoff): icono + texto, sin border-left. */
.repoD-msgslot:empty { display: none; }
.repoD-fielderr { display: flex; align-items: flex-start; gap: 7px; margin-top: 8px; font: 400 12.5px/1.4 'Inter', sans-serif; color: #B83227; animation: repoErrIn 380ms cubic-bezier(0.32,0.72,0,1) both; }
.repoD-fielderr.otp { margin-top: 8px; }
.repoD-okmsg { display: flex; align-items: flex-start; gap: 7px; margin-top: 8px; font: 400 12.5px/1.4 'Inter', sans-serif; color: #16904E; animation: repoStepIn 240ms cubic-bezier(0.32,0.72,0,1) both; }
.repoD-infomsg { display: flex; align-items: flex-start; gap: 7px; margin-top: 8px; font: 400 12.5px/1.4 'Inter', sans-serif; color: #265489; animation: repoStepIn 240ms cubic-bezier(0.32,0.72,0,1) both; }
.repoD-fielderr svg, .repoD-okmsg svg, .repoD-infomsg svg { width: 14px; height: 14px; stroke-width: 1.85; flex-shrink: 0; margin-top: 1px; }
.repoD-suggest { background: none; border: 0; padding: 0; margin-left: 3px; color: #265489; font: 600 12.5px/1.4 'Inter', sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.repoD-suggest:hover { opacity: .8; }
@keyframes repoErrIn { 0% { opacity: 0; transform: translateX(0); } 20% { opacity: 1; transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } 100% { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .repoD-fielderr, .repoD-okmsg, .repoD-infomsg { animation: none; } }
.repoD-mini { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 'Inter', sans-serif; cursor: pointer; border-radius: 8px; padding: 8px 13px; border: 0; font-family: inherit; }
.repoD-mini.primary { background: var(--color-action-ink); color: #fff; }
.repoD-mini.ghost { background: transparent; color: var(--fg3); padding: 8px; }
.repoD-mini svg { width: 14px; height: 14px; stroke-width: 2; }
.repoD-mini:disabled { opacity: .42; cursor: not-allowed; }
.repoD-editactions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.repoD-collapse { display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; align-self: start; flex: none; min-width: 152px; font: 500 13px/1 'Inter', sans-serif; color: var(--fg2); border: 1px solid var(--border-strong); background: var(--surface); border-radius: 9px; padding: 9px 14px; cursor: pointer; font-family: inherit; transition: background 120ms, color 120ms, border-color 120ms; }
.repoD-collapse:hover { background: var(--color-bg-subtle); color: var(--fg1); border-color: var(--fg3); }
.repoD-collapse svg { width: 15px; height: 15px; }
/* CAMBIO jun-2026 · botón ÚNICO persistente Editar/Solicitar ⇄ Cerrar (crossfade, sin swap de DOM) */
.repoD-toggle { position: relative; justify-content: center; }
.repoD-toggle-lbl { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: opacity 150ms ease; }
.repoD-toggle-lbl.tg-close { position: absolute; inset: 0; justify-content: center; opacity: 0; pointer-events: none; }
.repoD-toggle.is-close { color: var(--fg2); }
.repoD-toggle.is-close .repoD-toggle-lbl.tg-edit { opacity: 0; }
.repoD-toggle.is-close .repoD-toggle-lbl.tg-close { opacity: 1; }
.repoD-row.is-editing .repoD-v { margin-bottom: 2px; }
/* Entrada de cada paso del formulario (fade + leve ascenso), misma curva del despliegue */
@keyframes repoStepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.repoD-otp, .repoD-reqform { animation: repoStepIn 320ms cubic-bezier(0.32, 0.72, 0, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .repoD-otp, .repoD-reqform { animation: none; }
  .repoD-expand { transition: none; }
  .repoD-toggle-lbl { transition: none; }
}
.repoD-expand { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 320ms cubic-bezier(0.32, 0.72, 0, 1), opacity 200ms ease; }
.repoD-expand-inner { min-height: 0; display: flow-root; }
.repoD-reqform { margin-top: 6px; max-width: 460px; }
.repoD-req-q { font: 500 13px/1.4 'Inter', sans-serif; color: var(--fg2); margin-bottom: 10px; }
.repoD-req-opts { display: flex; flex-direction: column; gap: 6px; }
.repoD-req-opt { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 11px 13px; border: 1px solid var(--border-strong); border-radius: 10px; font: 500 13.5px/1 'Inter', sans-serif; color: var(--fg1); transition: border-color 120ms, background 120ms; }
.repoD-req-opt:hover { background: var(--color-bg-subtle); }
.repoD-req-opt.is-sel { border-color: var(--color-action-ink); background: var(--color-bg-subtle); }
.repoD-req-opt input { accent-color: var(--color-action-ink); width: 16px; height: 16px; flex: none; }
.repoD-req-text { margin-top: 8px; width: 100%; box-sizing: border-box; min-height: 78px; resize: vertical; border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 12px; font: 400 13.5px/1.5 'Inter', sans-serif; color: var(--fg1); outline: none; background: var(--surface); }
.repoD-row.is-doc { grid-template-columns: 38px 1fr auto; padding: 13px 14px; }
.repoD-docthumb { width: 38px; height: 38px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--fg2); }
.repoD-docthumb svg { width: 19px; height: 19px; stroke-width: 1.75; }
.repoD-row.is-doc.st-validado .repoD-docthumb { background: var(--surface-2); color: var(--fg2); }
.repoD-row.is-doc.st-vencido .repoD-docthumb { background: var(--color-warning-tint); color: #B07614; }
.repoD-row.is-doc.st-rechazado .repoD-docthumb { background: var(--color-error-tint); color: var(--color-error-deep, #B83227); }
.repoD-docmeta { font: 400 12.5px/1 'Inter', sans-serif; color: var(--fg3); margin-top: 5px; }
.repoD-row.is-doc .repoD-aff { gap: 12px; }
.repoD-row.is-flash { animation: repoFlash 2.6s ease-out; }
@keyframes repoFlash { 0% { background: #E7EBEF; } 72% { background: #E7EBEF; } 100% { background: transparent; } }
.repoD-otp { margin-top: 12px; max-width: 380px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.repoD-otp-head { font: 400 13px/1.5 'Inter', sans-serif; color: var(--fg2); display: flex; align-items: flex-start; gap: 9px; }
.repoD-otp-head svg { width: 16px; height: 16px; stroke-width: 1.75; color: var(--fg3); flex-shrink: 0; margin-top: 1px; }
.repoD-otp-head b { color: var(--fg1); font-weight: 600; white-space: nowrap; }
.repoD-otp-boxes { display: flex; gap: 8px; }
.repoD-otp-box { width: 40px; height: 40px; flex: none; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; font: 600 17px/1 'Inter', sans-serif; font-variant-numeric: tabular-nums; color: var(--fg1); text-align: center; padding: 0; outline: none; -webkit-appearance: none; appearance: none; font-family: inherit; transition: border-color 120ms cubic-bezier(.32,.72,0,1); }
.repoD-otp-box.filled { border-color: var(--fg3); }
.repoD-otp-box:focus { border-color: #6E7378; }
.repoD-otp-boxes.is-error .repoD-otp-box { border-color: #B83227; }
.repoD-otp-boxes.is-ok .repoD-otp-box { border-color: #1FAE5F; }
.repoD-otp-resend { display: flex; align-items: center; gap: 6px; font: 400 12.5px/1 'Inter', sans-serif; color: var(--fg3); }
.repoD-otp-resend button { background: transparent; border: 0; padding: 0; cursor: pointer; font: 500 12.5px/1 'Inter', sans-serif; color: var(--color-action-ink); font-family: inherit; }
.repoD-otp-resend button:disabled { color: var(--fg4); cursor: not-allowed; }
.repoD-otp-actions { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.repoD-foot { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.repoD-foot-item { display: flex; align-items: center; gap: 9px; font: 400 12.5px/1.4 'Inter', sans-serif; color: var(--fg3); }
.repoD-foot-item .ic { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; background: var(--surface-2); color: var(--fg3); flex-shrink: 0; }
.repoD-foot-item .ic svg { width: 14px; height: 14px; stroke-width: 1.75; }
.repo-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; background: var(--surface); border: 1px solid var(--border-strong); color: var(--fg1); font: 500 13px 'Inter', sans-serif; padding: 9px 14px; border-radius: 9px; cursor: pointer; font-family: inherit; }
.repo-back:hover { background: var(--surface-2); }
.repo-back svg { width: 16px; height: 16px; }

/* ════════════════════════════════════════════════════════════════
   EXPEDIENTE REDESIGN (S3.3f-C · 2026-05-22)
   Aplicado tras la sesión de exploración:
   · Prep-box  → V4 (document tiles, grid 2×2)
   · Switch    → V1 (prod-card, sin cambios)
   · Stepper   → V3 (vertical connected · línea continua)
   · Completo  → V3 (banner + doc-list inline)
   · Docs      → V2 (thumbnail + status dot)
   · Empresas  → V2 (grid 2-col compact)
   ════════════════════════════════════════════════════════════════ */

/* Prep-box V4 · document tiles */
.prep-v4 { margin-bottom: 24px; }
.prep-v4-title {
  font: 600 13px/1 'Inter', sans-serif;
  color: var(--fg1);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
  letter-spacing: -0.005em;
}
.prep-v4-title svg { width: 15px; height: 15px; color: var(--fg2); stroke-width: 1.75; }
.prep-v4-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.prep-v4-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; align-items: flex-start; gap: 12px;
  transition: border-color var(--motion-fast), background var(--motion-fast);
}
.prep-v4-tile:hover { border-color: var(--fg3); }
.prep-v4-tile .ic {
  width: 32px; height: 32px; flex-shrink: 0;
  background: var(--surface-2);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg2);
}
.prep-v4-tile .ic svg { width: 16px; height: 16px; stroke-width: 1.7; }
.prep-v4-tile .name {
  font: 500 13px/1.4 'Inter', sans-serif;
  color: var(--fg1);
  margin-bottom: 2px;
}
.prep-v4-tile .hint {
  font: 400 12px/1.4 'Inter', sans-serif;
  color: var(--fg3);
}
.prep-v4-time {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-radius: var(--r-md);
  font-size: 12px; color: var(--fg2);
}
.prep-v4-time svg { width: 14px; height: 14px; color: var(--fg3); }
.prep-v4-time strong { color: var(--fg1); font-weight: 600; }

/* Stepper V3 · vertical connected con línea continua */
.step-v3 { padding-left: 4px; margin: 18px 0 24px; }
.step-v3-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 400 12px 'Inter', sans-serif;
  color: var(--fg3);
  margin-bottom: 10px;
}
.step-v3-meta strong { color: var(--fg1); font-weight: 500; }
.step-v3-bar {
  height: 4px; width: 100%;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 22px;
}
.step-v3-bar-fill {
  height: 100%;
  background: var(--gradient-green-mint);
  border-radius: 999px;
  transition: width var(--motion-slow) var(--ease-default);
}
.step-v3-list {
  position: relative;
  padding-left: 26px;
  --step-pad-top: 6px;       /* sincronizado con .step-v3-item padding-top */
  --step-content-h: 22px;    /* min-height de .step-v3-item-content */
}
.step-v3-list::before {
  content: '';
  position: absolute;
  /* Línea centrada con dots: dot left -26 + width 22 = center x 11; línea
     left 10 + width 2 → center x 11. Match exacto. */
  left: 10px;
  /* Top: centro del primer dot = dot.top (= --step-pad-top) + dot.radius (11).
     Bottom: list_bottom − centro_del_último_dot = content_h − dot.radius. */
  top: calc(var(--step-pad-top) + 11px);
  bottom: calc(var(--step-content-h) - 11px);
  width: 2px;
  background: var(--border-strong);  /* homologado con outline de dots no activos */
}
.step-v3-item {
  position: relative;
  padding: 6px 0 18px;
  font: 400 14px 'Inter', sans-serif;
  color: var(--fg2);
}
.step-v3-item:last-child { padding-bottom: 0; }
.step-v3-item .dot {
  position: absolute;
  left: -26px; top: var(--step-pad-top, 6px);
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font: 500 11px 'Inter', sans-serif;
  color: var(--fg3);
}
.step-v3-item.is-done { color: var(--fg1); }
.step-v3-item.is-done .dot {
  background: var(--color-success-tint, #D8EEDF);
  color: var(--color-accent-green-deep, #16904E);
  border-color: transparent;
}
.step-v3-item.is-done .dot svg { width: 12px; height: 12px; stroke-width: 2.5; }
.step-v3-item.is-current { color: var(--fg1); font-weight: 500; }
.step-v3-item.is-current .dot {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.step-v3-item .sub {
  font: 400 12px 'Inter', sans-serif;
  color: var(--fg3);
  font-weight: 400;
  margin-top: 2px;
}

/* ── Inline content row · garantiza altura uniforme entre items.
   El badge "En curso" del paso actual vive en la misma fila que el label,
   no como subline debajo (eso causaba que el espacio entre items 2 y 3
   fuera mayor que el resto). ────────────────────────────────────────── */
.step-v3-item-content {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 22px;
  line-height: 1.2;
  padding-left: 8px;  /* gap visual entre dot y label */
}
.step-v3-item-label { min-width: 0; }
.step-v3-item-tag {
  font: 600 9px/1 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--accent-go-soft);
  color: var(--accent-go-deep-text);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Variantes tweakables del estilo de la lista de pasos */
.step-v3-list[data-list-style="right-pill"] .step-v3-item-content {
  justify-content: space-between;
  width: 100%;
}
.step-v3-list[data-list-style="inline-text"] .step-v3-item-tag {
  background: transparent;
  padding: 0;
  color: var(--fg3);
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}
.step-v3-list[data-list-style="marker-only"] .step-v3-item-tag { display: none; }
.step-v3-list[data-list-style="marker-only"] .step-v3-item.is-current .dot {
  background: var(--accent-go);
  border-color: var(--accent-go);
  box-shadow: 0 0 0 0 rgba(31,174,95,0.5);
  animation: step-v3-pulse 1.8s var(--ease-default) infinite;
}
@keyframes step-v3-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(31,174,95,0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(31,174,95,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,174,95,0); }
}

/* Densidad tweakable — actualiza la var que rige el inicio de la línea
   para mantenerla anclada al centro del primer dot. */
.step-v3-list[data-density="cozy"]        { --step-pad-top: 3px; }
.step-v3-list[data-density="comfortable"] { --step-pad-top: 6px; }
.step-v3-list[data-density="roomy"]       { --step-pad-top: 9px; }
.step-v3-list[data-density="cozy"] .step-v3-item        { padding: 3px 0 11px; }
.step-v3-list[data-density="comfortable"] .step-v3-item { padding: 6px 0 18px; }
.step-v3-list[data-density="roomy"] .step-v3-item       { padding: 9px 0 26px; }
.step-v3-list .step-v3-item:last-child  { padding-bottom: 0; }  /* la línea termina aquí */

/* ─── currentDotStyle variants · solo el circulo "en curso" ───
   solid (default) · outlined · tonal */
.step-v3-list[data-current-dot-style="outlined"] .step-v3-item.is-current .dot {
  background: transparent;
  border: 2px solid var(--ink);
  color: var(--ink);
}
.step-v3-list[data-current-dot-style="tonal"] .step-v3-item.is-current .dot {
  background: var(--surface-2);
  border-color: transparent;
  color: var(--ink);
}

/* ─── stepDotStyle variants ───
   solid (default) · outlined · tonal */

/* OUTLINED · transparente, borde tonal del estado */
.step-v3-list[data-dot-style="outlined"] .step-v3-item.is-done .dot {
  background: transparent;
  border: 2px solid var(--color-accent-green, #1FAE5F);
  color: var(--color-accent-green, #1FAE5F);
}
.step-v3-list[data-dot-style="outlined"] .step-v3-item.is-done .dot svg { stroke: currentColor; }
.step-v3-list[data-dot-style="outlined"] .step-v3-item.is-current .dot {
  background: transparent;
  border: 2px solid var(--ink);
  color: var(--ink);
  box-shadow: none;
}
.step-v3-list[data-dot-style="outlined"] .step-v3-item:not(.is-done):not(.is-current) .dot {
  background: transparent;
  border: 1px solid var(--border-strong);
}

/* TONAL · sin borde, bg tonal por estado, glifo tonal-deep */
.step-v3-list[data-dot-style="tonal"] .step-v3-item.is-done .dot {
  background: var(--color-success-tint, #D8EEDF);
  border-color: transparent;
  color: var(--color-accent-green-deep, #16904E);
}
.step-v3-list[data-dot-style="tonal"] .step-v3-item.is-current .dot {
  background: var(--surface-2);
  border-color: transparent;
  color: var(--ink);
  box-shadow: 0 0 0 3px rgba(15,20,25,0.06);
}
.step-v3-list[data-dot-style="tonal"] .step-v3-item:not(.is-done):not(.is-current) .dot {
  background: var(--surface-2);
  border-color: transparent;
  color: var(--fg3);
}

/* Done V3 banner · banner success + doc-list inline */
.done-v3-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  background: var(--color-success-tint);
  border: 1px solid #BDDDC9;
  border-radius: 12px;
  margin-bottom: 20px;
}
.done-v3-banner .ic {
  width: 32px; height: 32px;
  background: var(--accent-go);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.done-v3-banner .ic svg { width: 16px; height: 16px; stroke-width: 2.5; }
.done-v3-banner .content { flex: 1; }
.done-v3-banner .title { font: 500 14px 'Inter', sans-serif; color: var(--fg1); margin: 0 0 2px; }
.done-v3-banner .meta { font: 400 12px 'Inter', sans-serif; color: var(--fg2); }

/* ─────────────────────────────────────────────────────────────────────
   Completion block · 5 variantes tweakables (.done-v3.v-*)
   Aplican a estados COMPLETO (tone=success) y EXPIRADO (tone=warning).
   ──────────────────────────────────────────────────────────────────── */

.done-v3 {
  margin-bottom: 20px;
  --tone-base: var(--color-success);
  --tone-deep: var(--color-accent-green-deep, #16904E);
  --tone-tint: var(--color-success-tint);
  --tone-stroke: #BDDDC9;
}
.done-v3[data-tone="warning"] {
  --tone-base: var(--color-warning);
  --tone-deep: #B07614;
  --tone-tint: var(--color-warning-tint);
  --tone-stroke: #F1D6A8;
}

/* V1 · BANNER (heredado, refinado) ──────────────────────────────────── */
.done-v3.v-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  background: var(--tone-tint);
  border: 1px solid var(--tone-stroke);
  border-radius: var(--r-md);
}
.done-v3.v-banner .ic {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--tone-base);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.done-v3.v-banner .ic svg { width: 16px; height: 16px; stroke-width: 2.5; }
.done-v3.v-banner .content { flex: 1; min-width: 0; }
.done-v3.v-banner .title { font: 500 14px 'Inter', sans-serif; color: var(--fg1); margin: 0 0 2px; }
.done-v3.v-banner .meta  { font: 400 12px 'Inter', sans-serif; color: var(--fg2); }

/* V2 · HAIRLINE — single line, 1px border, no fill ──────────────────── */
.done-v3.v-hairline {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid var(--tone-stroke);
  border-radius: var(--r-md);
}
.done-v3.v-hairline .ic {
  width: 18px; height: 18px; flex-shrink: 0;
  color: var(--tone-deep);
  display: inline-flex; align-items: center; justify-content: center;
}
.done-v3.v-hairline .ic svg { width: 18px; height: 18px; stroke-width: 1.75; }
.done-v3.v-hairline .content {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font: 400 13px 'Inter', sans-serif;
}
.done-v3.v-hairline .title { color: var(--fg1); font-weight: 500; }
.done-v3.v-hairline .sep   { color: var(--fg4); }
.done-v3.v-hairline .meta  { color: var(--fg2); }

/* V3 · KPI — big number stat ────────────────────────────────────────── */
.done-v3.v-kpi {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 24px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.done-v3.v-kpi .num {
  font: 500 44px/1 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  color: var(--tone-deep);
  min-width: 56px;
}
.done-v3.v-kpi .content { flex: 1; min-width: 0; }
.done-v3.v-kpi .kpi-label {
  font: 500 13px/1.3 'Inter', sans-serif;
  color: var(--fg1);
  margin-bottom: 4px;
}
.done-v3.v-kpi .kpi-date {
  font: 400 12px/1.3 'Inter', sans-serif;
  color: var(--fg3);
}

/* V4 · RECEIPT — monospace key/value rows ───────────────────────────── */
.done-v3.v-receipt {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
.done-v3.v-receipt .row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 11px 16px;
  font: 400 13px/1.3 'Inter', sans-serif;
  border-bottom: 1px solid var(--border);
}
.done-v3.v-receipt .row:last-child { border-bottom: 0; }
.done-v3.v-receipt .row .k {
  font: 500 10px/1 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg3);
}
.done-v3.v-receipt .row .v {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 12.5px;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
}
.done-v3.v-receipt[data-tone="success"] .row:first-child .v { color: var(--tone-deep); }
.done-v3.v-receipt[data-tone="warning"] .row:first-child .v { color: var(--tone-deep); }

/* V5 · INLINE EYEBROW — info en eyebrow arriba del title (no hay block)
   La eyebrow se renderiza al inicio de .subexp-card. El pill del header
   se oculta porque el eyebrow ya comunica el estado. */
.subexp-card-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
  padding: 0;
  font: 600 10px/1 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg3);
}
.subexp-card-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-success);
}
.subexp-card-eyebrow.is-warning .dot { background: var(--color-warning); }

/* Pills adaptados al doneStyle ──────────────────────────────────────── */
.subexp-card[data-done-style="hairline"] .status-badge.done {
  background: transparent;
  border: 1px solid #BDDDC9;
  color: var(--color-accent-green-deep, #16904E);
}
.subexp-card[data-done-style="hairline"] .status-badge.warning {
  background: transparent;
  border: 1px solid #F1D6A8;
  color: #B07614;
}

.subexp-card[data-done-style="kpi"] .status-badge.done,
.subexp-card[data-done-style="kpi"] .status-badge.warning {
  background: var(--surface-2);
  color: var(--fg2);
  font: 600 10px/1 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 6px 12px;
}
.subexp-card[data-done-style="kpi"] .status-badge::before {
  width: 6px; height: 6px;
  background: var(--color-success);
  border-radius: 50%;
}
.subexp-card[data-done-style="kpi"] .status-badge.warning::before {
  background: var(--color-warning);
}

.subexp-card[data-done-style="receipt"] .status-badge.done,
.subexp-card[data-done-style="receipt"] .status-badge.warning {
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--fg2);
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 9px;
}
.subexp-card[data-done-style="receipt"] .status-badge::before {
  display: none;
}

.subexp-card[data-done-style="inline-eyebrow"] .status-badge.done,
.subexp-card[data-done-style="inline-eyebrow"] .status-badge.warning {
  display: none;
}

/* ─────────────────────────────────────────────────────────────────────
   COMPLETO state · 3 variantes compactas (.completo-card.v-*).
   Único objetivo: avisar success. Sin desc, sin meta, sin CTA — los
   docs viven en la lista de abajo.
   ──────────────────────────────────────────────────────────────────── */
.completo-card { margin-bottom: 20px; }

/* V1 · STRIPE — borde tonal verde + check + italic accent en "vigente" */
.completo-card.v-stripe {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--tone-base, var(--color-accent-green, #1FAE5F));
  border-radius: var(--r-md);
  /* Tone vars (default = success) */
  --tone-base: var(--color-accent-green, #1FAE5F);
  --tone-deep: var(--color-accent-green-deep, #16904E);
  --tone-tint: var(--color-success-tint, #D8EEDF);
}
.completo-card.v-stripe.is-warning {
  --tone-base: var(--color-warning, #E89B2A);
  --tone-deep: #B07614;
  --tone-tint: var(--color-warning-tint, #FAE5CC);
}
.completo-card.v-stripe.is-review {
  --tone-base: var(--border-strong);
  --tone-deep: var(--fg2);
  --tone-tint: var(--neutral-soft);
}
.completo-card.v-stripe .ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  color: var(--tone-base);
  flex-shrink: 0;
}
.completo-card.v-stripe .ic svg { width: 20px; height: 20px; stroke-width: 1.75; }

/* vigenteIconFill = filled · círculo verde + glifo blanco */
.completo-card.v-stripe[data-vigente-fill="filled"] .ic {
  width: 26px; height: 26px;
  background: var(--tone-base);
  color: #fff;
  border-radius: 50%;
}
.completo-card.v-stripe[data-vigente-fill="filled"] .ic svg {
  width: 14px; height: 14px; stroke-width: 2;
}
.completo-card.v-stripe .title {
  font: 500 14px/1.3 'Inter', sans-serif;
  color: var(--fg1);
}

/* Aviso style variants — solo aplican al stripe (single-line aviso).
   Mantienen layout 1-línea, solo varían la chrome visual. */
.completo-card.v-stripe[data-aviso-style="outline"] {
  /* default — ya está */
}
.completo-card.v-stripe[data-aviso-style="tonal"] {
  background: var(--tone-tint);
  border-color: transparent;
}
.completo-card.v-stripe[data-aviso-style="tonal"] .ic { color: var(--tone-deep); }

.completo-card.v-stripe[data-aviso-style="underline"] {
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--tone-base);
  border-radius: 0;
  padding: 12px 4px;
}

.completo-card.v-stripe[data-aviso-style="flush"] {
  background: transparent;
  border: 0;
  padding: 4px 0;
}

.completo-card.v-stripe[data-aviso-style="dot"] {
  background: transparent;
  border: 0;
  padding: 4px 0;
  gap: 14px;
}
.completo-card.v-stripe[data-aviso-style="dot"] .ic {
  width: 8px; height: 8px;
  background: var(--tone-base);
  border-radius: 50%;
  color: transparent;
}
.completo-card.v-stripe[data-aviso-style="dot"] .ic svg { display: none; }

/* V2 · TONAL — tinted success card con icon circular */
.completo-card.v-tonal {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: var(--color-success-tint, #D8EEDF);
  border-radius: var(--r-md);
}
.completo-card.v-tonal .ic-circle {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--color-accent-green, #1FAE5F);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.completo-card.v-tonal .ic-circle svg { width: 16px; height: 16px; stroke-width: 2.5; }
.completo-card.v-tonal .text { min-width: 0; }
.completo-card.v-tonal .eyebrow {
  font: 600 9px/1 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-accent-green-deep, #16904E);
  margin-bottom: 4px;
}
.completo-card.v-tonal .title {
  font: 500 14px/1.3 'Inter', sans-serif;
  color: var(--fg1);
}

/* V3 · EYEBROW — minimal section divider, sin card chrome */
.completo-card.v-eyebrow {
  padding: 4px 0 18px;
  border-bottom: 1px solid var(--border);
}
.completo-card.v-eyebrow .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 10px/1 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg2);
}
.completo-card.v-eyebrow .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-accent-green, #1FAE5F);
}

/* WARNING tone · semántica ámbar (estado expirado).
   Las vars --tone-* se definen en .v-stripe.is-warning más arriba;
   estos selectores cubren tonal/eyebrow (no usan vars). */
.completo-card.v-tonal.is-warning {
  background: var(--color-warning-tint, #FAE5CC);
}
.completo-card.v-tonal.is-warning .ic-circle {
  background: var(--color-warning, #E89B2A);
}
.completo-card.v-tonal.is-warning .eyebrow {
  color: #B07614;
}
.completo-card.v-eyebrow.is-warning .dot {
  background: var(--color-warning, #E89B2A);
}

/* REVIEW tone · gris neutro (estado en_revision).
   .v-stripe.is-review usa vars; estos cubren tonal/eyebrow. */
.completo-card.v-tonal.is-review {
  background: var(--neutral-soft);
}
.completo-card.v-tonal.is-review .ic-circle {
  background: var(--fg2);
}
.completo-card.v-tonal.is-review .eyebrow {
  color: var(--fg2);
}
.completo-card.v-eyebrow.is-review .dot {
  background: var(--fg3);
}

/* Doc-rows V2 · icon-pill izquierdo (tonal por estado) + right cell:
   validado → indicador success; otros → CTA. */
.doc-list-v2 { display: flex; flex-direction: column; gap: 8px; }
.doc-v2 {
  display: grid;
  grid-template-columns: 36px 1fr 120px;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.doc-v2 .thumb {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.doc-v2 .thumb svg { width: 18px; height: 18px; stroke-width: 1.75; }
.doc-v2-text { min-width: 0; }
.doc-v2 .name {
  font: 500 14px/1.3 'Inter', sans-serif;
  color: var(--fg1);
  margin-bottom: 3px;
}
.doc-v2 .meta {
  font: 400 12px/1.4 'Inter', sans-serif;
  color: var(--fg3);
}
.doc-v2 .doc-ok,
.doc-v2 .doc-action {
  justify-self: center;
}
.doc-v2 .doc-ok {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  color: var(--color-accent-green, #1FAE5F);
}
.doc-v2 .doc-ok svg { width: 18px; height: 18px; stroke-width: 2; }
.doc-v2 .doc-action {
  background: transparent; border: 0; cursor: pointer;
  font: 500 13px 'Inter', sans-serif;
  color: var(--fg1);
  padding: 6px 0;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}
.doc-v2 .doc-action:hover { text-decoration-color: var(--fg1); }

/* Tone vars por estado · controlan color del icon-pill izquierdo */
.doc-v2.is-validado {
  --state-tint: var(--surface-2);
  --state-deep: var(--fg2);
  --state-base: var(--fg3);
}
.doc-v2.is-por_vencer {
  --state-tint: var(--surface-2);
  --state-deep: var(--fg2);
  --state-base: var(--fg3);
}
.doc-v2.is-vencido {
  --state-tint: var(--color-warning-tint);
  --state-deep: #B07614;
  --state-base: var(--color-warning);
}
.doc-v2.is-observado {
  --state-tint: var(--color-error-tint, #F4DCD7);
  --state-deep: var(--color-error-deep, #8C2920);
  --state-base: var(--color-error, #B83227);
}
.doc-v2.is-pendiente {
  --state-tint: var(--surface-2);
  --state-deep: var(--fg2);
  --state-base: var(--fg3);
}

/* ─── docRowStyle variants ───
   filled-pill · tint bg + tonal-deep glyph (default)
   outlined    · 1.5px tonal border, transparent fill
   solid       · tonal-base bg + white glyph (stamp) */

[data-doc-row-style="filled-pill"] .doc-v2 .thumb,
.doc-list-v2:not([data-doc-row-style]) .doc-v2 .thumb {
  background: var(--state-tint);
  color: var(--state-deep);
}

[data-doc-row-style="outlined"] .doc-v2 .thumb {
  background: transparent;
  border: 1.5px solid var(--state-base);
  color: var(--state-deep);
}
[data-doc-row-style="outlined"] .doc-v2 .doc-action {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-button);
  padding: 6px 14px;
  text-decoration: none;
  font-size: 12.5px;
}
[data-doc-row-style="outlined"] .doc-v2 .doc-action:hover {
  background: var(--surface-2);
  border-color: var(--fg3);
}
[data-doc-row-style="outlined"] .doc-v2 .doc-ok {
  width: auto; height: auto;
  font: 600 11px/1 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 6px 0;
}
[data-doc-row-style="outlined"] .doc-v2 .doc-ok svg { display: none; }
[data-doc-row-style="outlined"] .doc-v2 .doc-ok::after { content: 'Vigente'; }

[data-doc-row-style="solid"] .doc-v2 .thumb {
  background: var(--state-base);
  color: #fff;
}
[data-doc-row-style="solid"] .doc-v2 .thumb svg { stroke-width: 2.25; }
[data-doc-row-style="solid"] .doc-v2 .doc-action {
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-button);
  padding: 7px 16px;
  text-decoration: none;
  font-size: 12.5px;
}
[data-doc-row-style="solid"] .doc-v2 .doc-action:hover {
  background: #1a2026;
}
[data-doc-row-style="solid"] .doc-v2 .doc-ok {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface-2);
  color: var(--fg2);
  border-radius: var(--r-pill);
  padding: 5px 10px 5px 8px;
  width: auto; height: auto;
  font: 600 11px/1 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
[data-doc-row-style="solid"] .doc-v2 .doc-ok::after {
  content: 'Vigente';
}
[data-doc-row-style="solid"] .doc-v2 .doc-ok svg {
  width: 12px; height: 12px;
  stroke-width: 2.5;
}

/* ─── validadoStyle variants · solo el indicador success a la derecha ───
   check (default) · pill · badge · text */
[data-validado-style="pill"] .doc-v2 .doc-ok {
  width: auto; height: auto;
  background: var(--color-success-tint, #D8EEDF);
  color: var(--color-accent-green-deep, #16904E);
  font: 600 10px/1 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 6px 12px;
  border-radius: var(--r-pill);
}
[data-validado-style="pill"] .doc-v2 .doc-ok svg { display: none; }
[data-validado-style="pill"] .doc-v2 .doc-ok::after { content: 'Validado'; }

[data-validado-style="badge"] .doc-v2 .doc-ok {
  width: 24px; height: 24px;
  background: var(--color-accent-green, #1FAE5F);
  color: #fff;
  border-radius: 50%;
}
[data-validado-style="badge"] .doc-v2 .doc-ok svg {
  width: 14px; height: 14px;
  stroke-width: 2.5;
}

[data-validado-style="text"] .doc-v2 .doc-ok {
  width: auto; height: auto;
  font: 500 11px/1 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent-green-deep, #16904E);
}
[data-validado-style="text"] .doc-v2 .doc-ok svg { display: none; }
[data-validado-style="text"] .doc-v2 .doc-ok::after { content: 'Validado'; }

/* CTA inline link · usado por table / stacked / inline-row (legacy CSS, dead) */
.dt-link {
  background: transparent; border: 0; cursor: pointer;
  font: 500 12.5px/1 'Inter', sans-serif;
  color: var(--fg1);
  padding: 6px 0;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  display: inline-flex; align-items: center; gap: 4px;
}
.dt-link:hover { text-decoration-color: var(--fg1); }
.dt-link svg { width: 12px; height: 12px; stroke-width: 1.75; }

/* Pill mini · usado por inline-row para densidad */
.pill.pill-mini {
  font-size: 10px;
  padding: 2px 7px;
}

/* V2 · TABLE — Mercury-style hairline rows */
.doc-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.doc-table thead th {
  font: 600 10px/1 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg3);
  text-align: left;
  padding: 11px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.doc-table thead th:last-child { text-align: right; }
.doc-table .dt-row { border-bottom: 1px solid var(--border); }
.doc-table .dt-row:last-child { border-bottom: 0; }
.doc-table .dt-row:hover { background: var(--surface-2); }
.doc-table .dt-row td {
  padding: 12px 16px;
  font: 400 13px/1.3 'Inter', sans-serif;
  color: var(--fg1);
  vertical-align: middle;
}
.doc-table .dt-name { font-weight: 500; }
.doc-table .dt-venc {
  color: var(--fg2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.doc-table .dt-venc.is-warn { color: var(--color-warning, #B07614); font-weight: 500; }
.doc-table .dt-status { width: 1%; white-space: nowrap; }
.doc-table .dt-act { text-align: right; width: 1%; white-space: nowrap; }

/* V3 · STACKED — 2 líneas por doc, separadas en card */
.doc-stk-list { display: flex; flex-direction: column; gap: 10px; }
.doc-stk {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 18px;
}
.doc-stk-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.doc-stk-head .name {
  font: 500 14px/1.3 'Inter', sans-serif;
  color: var(--fg1);
  min-width: 0;
}
.doc-stk-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.doc-stk-foot .venc {
  font: 400 12px/1 'Inter', sans-serif;
  color: var(--fg2);
  font-variant-numeric: tabular-nums;
}

/* V4 · INLINE-ROW — todo en una línea, máxima densidad */
.doc-inline-list { display: flex; flex-direction: column; }
.doc-inline {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 16px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
  font: 400 13px/1.3 'Inter', sans-serif;
}
.doc-inline:last-child { border-bottom: 0; }
.doc-inline .name {
  font-weight: 500;
  color: var(--fg1);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-inline .venc {
  color: var(--fg2);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  white-space: nowrap;
}

/* Empresas V2 · grid 2-col compact */
.emp-v2-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

/* ─── empresaCardStyle variants ───
   plain (default) · monogram · numbered · striped */
.emp-eyebrow {
  font: 500 10px/1 'SF Mono', Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg3);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.emp-monogram {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--fg1);
  font: 600 13px/1 'Inter', sans-serif;
  letter-spacing: 0.04em;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-right: 4px;
}
.emp-id { min-width: 0; flex: 1; }
[data-emp-style="monogram"] .emp-v2-card .top { align-items: center; }

/* Striped · 3px top border tonal por status */
[data-emp-style="striped"] .emp-v2-card {
  border-top-width: 3px;
}
[data-emp-style="striped"] .emp-v2-card[data-status="completo"]    { border-top-color: var(--color-accent-green, #1FAE5F); }
[data-emp-style="striped"] .emp-v2-card[data-status="en_revision"] { border-top-color: var(--fg3); }
[data-emp-style="striped"] .emp-v2-card[data-status="expirado"]    { border-top-color: var(--color-warning, #E89B2A); }
[data-emp-style="striped"] .emp-v2-card[data-status="en_progreso"] { border-top-color: var(--fg3); }
.emp-v2-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer;
  transition: border-color var(--motion-fast), background var(--motion-fast);
}
.emp-v2-card:hover { border-color: var(--fg3); }
.emp-v2-card .top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
}
.emp-v2-card .name {
  font: 500 15px 'Inter', sans-serif;
  color: var(--fg1);
  margin: 0;
  letter-spacing: -0.005em;
}
.emp-v2-card .rfc {
  font: 400 12px 'SF Mono', Menlo, monospace;
  color: var(--fg3);
  letter-spacing: 0.02em;
  margin-top: 3px;
}
.emp-v2-card .prog-bar {
  height: 4px; background: var(--border);
  border-radius: 999px; overflow: hidden;
}
.emp-v2-card .prog-fill {
  height: 100%;
  background: var(--gradient-green-mint);
  border-radius: 999px;
  transition: width var(--motion-slow) var(--ease-default);
}
.emp-v2-card .bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  font-size: 12px; color: var(--fg3);
}
.emp-v2-card .cta {
  font: 500 13px 'Inter', sans-serif;
  color: var(--fg1);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  background: transparent; border: 0; padding: 0;
  cursor: pointer;
}
.emp-v2-card .cta:hover { text-decoration-color: var(--fg1); }
.emp-v2-add {
  /* aún más compacto que .empresa-add-card original — vive como una card más en el grid */
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1.5px dashed var(--border-strong);
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit; text-align: left;
  transition: border-color var(--motion-fast), background var(--motion-fast);
}
.emp-v2-add:hover { border-color: var(--ink); background: var(--surface-2); }
.emp-v2-add svg { color: var(--fg2); flex-shrink: 0; }
.emp-v2-add strong {
  display: block;
  font: 600 14px 'Inter', sans-serif;
  color: var(--fg1); margin-bottom: 2px;
}
.emp-v2-add span {
  font: 400 12px 'Inter', sans-serif;
  color: var(--fg3);
}

/* S3.3f-A7 · Header del detalle de empresa (drill-in homólogo a Personal) */
.emp-detail-head {
  margin-bottom: 20px;
}
.emp-detail-name {
  font: 600 22px/1.2 'Inter', sans-serif;
  letter-spacing: -0.01em;
  color: var(--fg1);
  margin: 0 0 4px;
}
.emp-detail-rfc {
  font: 500 12px/1 'Inter', sans-serif;
  color: var(--fg3);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════════════
   WIZARD PERSONAL · Onboarding multi-etapa
   S3.3f-B (2026-05-24) · 4 etapas full-screen overlay
   S3.5-E (2026-05-26) · 3 etapas (PLD eliminado) · integrado al portal
                          (sidebar+topbar visibles · no más overlay fijo).
   ════════════════════════════════════════════════════════════════════════ */
.wiz-overlay {
  /* S3.5-E · es una .view del portal · display lo gobierna .view + .view.active */
  /* S3.5-E-polish · ya no tiene background propio · hereda el bg gris claro de
     la página (#FAFBFC). El contenido vive dentro de .wiz-card (blanca). */
  flex-direction: column;
  min-height: calc(100vh - 64px); /* topbar es ~64px */
}
.wiz-overlay.view.active { display: flex; }
/* S3.5-E-polish · card blanca que envuelve stepper + body + footer.
   Homologa al patrón del portal (Expediente, Solicitudes, etc.): view
   transparente + card blanca con border + border-radius + sombra suave. */
.wiz-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  min-height: 0;
}
/* Stepper dentro del body.
   S3.5-E-stepper-spec · el wrapper externo sólo provee márgenes; el
   stepper en sí lo arma _wizRenderStepper() con la estructura del
   spec (selectores .stp-num/.s/.c/.l). */
.wiz-body-stepper {
  padding: 0 0 24px;
  margin-bottom: 24px;
}
.wiz-header {
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  padding: 14px 24px;
  display: flex; align-items: center; gap: 24px;
}
.wiz-header-brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.wiz-header-brand img { height: 22px; display: block; }
.wiz-header-stepper {
  flex: 1;
  display: flex; align-items: center; gap: 4px;
  max-width: 560px;
  margin: 0 auto;
  min-width: 0;
}
.wiz-header-exit {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--fg2);
  padding: 7px 14px;
  border-radius: var(--radius-button);
  font: 500 12px 'Inter', sans-serif;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
}
.wiz-header-exit:hover { background: var(--surface-2); color: var(--fg1); }
/* ============================================================
   Stepper numerado · spec-stepper-numbered.txt v1
   Estados: done (atrás del actual) · active · pending (futuro)
   Done SIEMPRE es ink (--fg1), NUNCA verde · regla dura del spec.
   ============================================================ */
.stp-num {
  display: flex;
  align-items: flex-start;
  position: relative;
  width: 100%;
}
.stp-num .s {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  z-index: 1;
}
/* Conector como ::after del paso (excepto el último) · 1px ancho ·
   homologado a gris muy claro en TODOS los estados (Ricardo · S3.8-polish).
   Antes el conector de done era ink negro; ahora todos hairline. */
.stp-num .s:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 14px;                                   /* mitad del círculo 28/2 */
  left: 50%;
  width: 100%;
  height: 1px;
  background: var(--color-border-subtle, #E5E7EB);
  z-index: 0;
}
/* Círculo · estados según handoff vertical de Ricardo (S3.8-polish):
     pending → blanco + hairline + número fg4
     active  → ink #0F1419 + número blanco
     done    → tint verde #E6F7EE + check verde deep #16904E */
.stp-num .c {
  width: 28px; height: 28px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  background: #fff;
  border: 1px solid var(--color-border-subtle, #E5E7EB);
  color: var(--fg4, #B8BDC7);
  position: relative;
  z-index: 1;
}
.stp-num .s.active .c {
  background: var(--fg1, #0F1419);
  color: #fff;
  border-color: var(--fg1, #0F1419);
}
.stp-num .s.done .c {
  /* IMPORTANTE: tint OPACO (#E6F7EE) en lugar del rgba con 14% alpha,
     para que el conector (que pasa por detrás con z-index 0) no se
     transparente a través del círculo. */
  background: var(--color-accent-green-bg, #E6F7EE);
  color: var(--color-accent-green-deep, #16904E);
  border-color: transparent;
}
/* Check del done · tamaño chico para no llenar el círculo · homologado
   al check del banner sumario "X de N documentos subidos". */
.stp-num .s.done .c svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.4;
}
/* Label */
.stp-num .l {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  margin-top: 8px;
  color: var(--fg3);
  text-align: center;
}
.stp-num .s.active .l {
  color: var(--fg1);
  font-weight: 600;
}
.stp-num .s.done .l {
  color: var(--fg2);
  font-weight: 500;
}
.wiz-body {
  flex: 1; overflow-y: auto;
  display: flex; justify-content: center;
  padding: 48px 24px 32px;
}
/* S3.5-E-docs-wide · 640px era demasiado estrecho para el grid 2×N
   de documentos (cards quedaban "apretadas" con aire sobrante a los
   lados). Subimos el max-width del contenedor a 880px y, para los pasos
   Datos/Firma —que son formularios y se leen mejor en columna estrecha—
   los restringimos a 640px individualmente. */
.wiz-content { width: 100%; max-width: 880px; }
.wiz-content > .wiz-step-panel[data-step="2"],
.wiz-content > .wiz-step-panel[data-step="3"] {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.wiz-content h1 {
  font: 600 28px/1.2 'Inter', sans-serif;
  letter-spacing: -0.015em;
  color: var(--fg1);
  margin: 0 0 8px;
}
.wiz-content > .wiz-step-panel > p {
  font: 400 15px/1.5 'Inter', sans-serif;
  color: var(--fg2);
  margin: 0 0 28px;
}
.wiz-step-panel { display: none; }
.wiz-step-panel.is-active { display: block; }
.wiz-footer {
  /* S3.6-polish · sin border-top (línea divisoria eliminada) */
  flex-shrink: 0;
  background: var(--surface);
  padding: 14px 24px;
  display: flex; align-items: center; gap: 16px;
}
.wiz-footer-meta {
  font: 500 12px 'Inter', sans-serif;
  color: var(--fg3);
  text-align: center;
  flex: 1;
}
.wiz-back, .wiz-next {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 20px;
  border-radius: var(--radius-button);
  font: 500 14px 'Inter', sans-serif;
  font-family: inherit;
  cursor: pointer;
}
.wiz-back {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--fg1);
}
.wiz-back:hover { background: var(--surface-2); }
.wiz-next {
  background: var(--color-action-ink); color: white;
  border: 0;
}
.wiz-next:hover { background: #1A2026; }
.wiz-next:disabled { background: var(--surface-2); color: var(--fg4); cursor: not-allowed; }
.wiz-back svg, .wiz-next svg { width: 14px; height: 14px; }

/* ============================================================
   Etapa 1 · Documentos
   S3.5-E-docs (2026-05-26) · Implementación 1:1 del spec
   "Documentos subidos" v1 (legal/spec-documentos-subidos.txt).
   Variante error (rojo) extrapolada con los mismos cánones.
   ============================================================ */

/* A · Barra resumen superior ────────────────────────────────── */
.wiz-docs-summary {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  background: var(--color-bg-subtle, #F2F4F6);
  border-radius: 12px;
  margin: 0 auto 20px;
  /* Mismo ancho que el grid de cards (2 × 342 + gap 20 = 704) para que
     el banner sumario se alinee visualmente con los recuadros. */
  width: 100%;
  max-width: 704px;
  box-sizing: border-box;
}
.wiz-docs-summary-count {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg1);
}
.wiz-docs-summary-count-nums { font-variant-numeric: tabular-nums; }
.wiz-docs-summary-pip {
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--color-accent-green);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wiz-docs-summary-pip svg { width: 11px; height: 11px; }
.wiz-docs-summary-sep {
  width: 1px; height: 16px;
  background: var(--color-border-default, var(--border));
}
.wiz-docs-summary-size {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--fg2);
}
.wiz-docs-summary-size-nums { font-variant-numeric: tabular-nums; }

/* B · Grid + upload-card ─────────────────────────────────────────
   S3.8-upload-card · implementación 1:1 del handoff
   /Handoffs Design/design_handoff_upload_card.
   El outer (.wiz-doc-card) es el shell blanco (radius 16, 1px border
   subtle) y el inner (.uc-body) es el panel state-bearing que cambia
   background/border/ícono según el estado. La misma pieza con 4
   significados — los hijos directos llevan flex-shrink: 0 para
   alinear la banda de acciones en la misma Y. */
.wiz-docs-grid {
  display: grid;
  /* Cards de tamaño FIJO 342×309 · idéntico en los 4 estados (handoff
     S3.8 · medidas verificadas por Ricardo del estado error). El error
     era el más grande porque su contenido empujaba la min-height; ahora
     forzamos height igual para que el recuadro no cambie nunca de
     tamaño según el estado semántico. justify-content: center alinea el
     grid completo al centro del wiz-content (Ricardo · S3.8-polish). */
  grid-template-columns: repeat(2, minmax(0, 342px));
  justify-content: center;
  gap: 20px;
  margin-bottom: 8px;
}

/* Etapa 1 (Documentos): contenido centrado dentro del wiz-content.
   El título y el subtítulo (.wiz-lede) se centran como bloque pero su
   texto alinea a la izquierda · mismo ancho 704 que el grid + banner
   sumario para que sus bordes izquierdos coincidan visualmente. */
.wiz-step-panel[data-step="1"] { text-align: center; }
.wiz-step-panel[data-step="1"] h1,
.wiz-step-panel[data-step="1"] > .wiz-lede {
  text-align: left;
  width: 100%;
  max-width: 704px;
  margin-left: auto;
  margin-right: auto;
}
/* Subtítulo (lede) bajo el h1 · texto + link a Aviso de Privacidad. */
.wiz-lede {
  font: 400 14px/1.55 'Inter', sans-serif;
  color: var(--fg2);
  margin: 0 auto 24px;
}
.wiz-lede a {
  color: var(--fg1);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wiz-lede a:hover { color: var(--color-action-ink-hover, #1F262E); }

/* OUTER WRAPPER — transparente. El shell blanco con border y radius del
   handoff se omitió por petición explícita de Ricardo (S3.8-polish · sin
   card blanca alrededor). El outer sólo conserva la clase is-${status}
   para que el drag&drop global y los selectores JS sigan funcionando. */
.wiz-doc-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: 'Inter', sans-serif;
  color: var(--fg1);
  box-sizing: border-box;
  display: flex; flex-direction: column;
  position: relative;
  text-align: left;
  /* S3.5-E-docs-fit · necesario para que grid items con contenido largo
     respeten su 1fr en lugar de empujar la columna a desbordarse. */
  min-width: 0;
}

/* INNER PANEL — tamaño FIJO 342×309 idéntico en los 4 estados.
   Specs del handoff: padding 32 24 28, border-radius 12, gap 6,
   flex column con align-items center y text-align center. El height
   fijo garantiza que el recuadro nunca cambie de tamaño según el
   estado semántico (objetivo de Ricardo: 1, 2, 3 homologadas al
   tamaño que naturalmente toma el 4 · error). */
.uc-body {
  width: 100%;
  max-width: 342px;
  height: 309px;
  margin: 0;
  border-radius: 12px;
  padding: 32px 24px 28px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  gap: 6px;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color var(--motion-base) var(--ease-default),
              background var(--motion-base) var(--ease-default);
}
.wiz-doc-card.is-ready .uc-body,
.wiz-doc-card.is-processing .uc-body,
.wiz-doc-card.is-revision_manual .uc-body {
  cursor: default;
}

/* Hijos directos NO se comprimen — garantiza alineación vertical
   de la banda de acciones (link / file-chip / botón) en los 4 estados. */
.uc-body .uc-ic,
.uc-body .uc-spinner,
.uc-body .uc-title,
.uc-body .uc-subtitle,
.uc-body .uc-actions,
.uc-body .uc-file-chip {
  flex-shrink: 0;
}

/* ICON DISC 44×44 — único punto de color. Lucide 20×20 stroke 1.8 */
.uc-ic {
  width: 44px; height: 44px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.uc-ic svg { width: 20px; height: 20px; stroke-width: 1.8; }

.uc-title {
  font-size: 16px; font-weight: 600;
  color: var(--fg1);
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin: 0;
}
.uc-subtitle {
  font-size: 13px; line-height: 1.5;
  color: var(--fg3);
  max-width: 320px;
  margin: 0;
  /* Reserva 2 líneas en TODOS los estados para que el subtítulo de 2
     líneas del estado error no empuje su banda de acciones ~8px abajo
     de los demás (alineación de centros ±3px del handoff). */
  min-height: 40px;
}

/* ACTIONS — stacked vertical (default).
   margin-top 22 vs file-chip margin-top 28: los 6px extra de la chip
   compensan su altura natural (~22) vs altura del botón (34), así
   los centros verticales quedan alineados (±3px). */
.uc-actions {
  display: flex; flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin-top: 22px;
  width: 100%;
  max-width: 320px;
}

/* BUTTONS internos a la card (independientes del DS general) */
.uc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  height: 44px; padding: 0 22px;
  border-radius: var(--radius-button, 10px);
  font: 500 14px/1 'Inter', sans-serif;
  border: 0; cursor: pointer;
  transition: background var(--motion-fast) ease, transform var(--motion-fast) ease;
  white-space: nowrap;
  font-family: inherit;
}
.uc-btn-primary { background: var(--color-action-ink, #0F1419); color: #fff; }
.uc-btn-primary:hover { background: var(--color-action-ink-hover, #1F262E); }
.uc-btn-primary:active { transform: scale(.98); }
.uc-btn-link {
  background: transparent;
  color: var(--fg1);
  height: 44px; padding: 0 12px;
  font-weight: 500;
}
.uc-btn-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.uc-btn .uc-btn-ic { display: inline-flex; }
.uc-btn .uc-btn-ic svg { width: 14px; height: 14px; stroke-width: 2; }

/* ============================================================
   STATE 1 · EMPTY — dashed dropzone over neutral subtle
   CTA es text-link compacto (34px) para alinear con file-chip
   en estados 2/3 y primary compacto del estado 4.
   ============================================================ */
.uc-body.is-empty {
  background: var(--color-bg-subtle, #F2F4F6);
  border: 1.5px dashed var(--color-border-default, #D1D5DB);
}
.uc-body.is-empty .uc-ic {
  background: var(--color-surface, #FFFFFF);
  color: var(--fg2);
}
.uc-body.is-empty .uc-actions .uc-btn-link {
  height: 34px; padding: 0 12px;
}

/* Hover verde · feedback "puedes subir aquí" cuando el cursor pasa
   por encima de una card vacía (homologado al hover del upload Buró
   en backoffice S5.9). Mismo treatment que drag-over para mantener
   consistencia visual. */
.uc-body.is-empty:hover {
  background: var(--color-accent-green-bg, #E6F7EE);
  border-color: var(--color-accent-green, #1FAE5F);
}

/* Drag-over feedback (S3.6-dnd) — se aplica al INNER cuando el outer
   tiene `.is-drag-over`. */
.wiz-doc-card.is-drag-over .uc-body.is-empty,
.wiz-doc-card.is-drag-over .uc-body.is-error {
  border: 1.5px dashed var(--color-accent-green, #1FAE5F);
  background: var(--color-accent-green-bg, #E6F7EE);
}

/* ============================================================
   STATE 2 · UPLOADING — spinner gradient lime, neutral panel
   ============================================================ */
.uc-body.is-uploading {
  background: var(--color-bg-subtle, #F2F4F6);
  border: 1.5px dashed transparent; /* preserve rhythm */
}
.uc-spinner {
  width: 44px; height: 44px;
  margin-bottom: 14px;
  position: relative;
}
.uc-spinner svg {
  width: 100%; height: 100%;
  animation: uc-spin 1.4s linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}
@keyframes uc-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .uc-spinner svg { animation: none; }
}

/* ============================================================
   STATE 3 · SUCCESS — TINT treatment (NEUTRO, no verde)
   El ícono tint es el único punto de color. Texto neutro.
   ============================================================ */
.uc-body.is-success {
  background: var(--color-bg-subtle, #F2F4F6);
  border: 1.5px solid var(--color-border-subtle, #E5E7EB);
}
.uc-body.is-success .uc-ic {
  background: var(--color-accent-green-tint-14, rgba(31,174,95,0.14));
  color: var(--color-accent-green-deep, #16904E);
}
.uc-body.is-success .uc-ic svg { stroke-width: 2.4; }
.uc-body.is-success .uc-title    { color: var(--fg1); }
.uc-body.is-success .uc-subtitle { color: var(--fg3); }

/* ============================================================
   STATE 4 · ERROR — neutral panel, dashed neutral border,
   error-tint icon disc. Actions compactas (34 / 28 px) — específico
   del componente, no generalizar.
   ============================================================ */
.uc-body.is-error {
  background: var(--color-bg-subtle, #F2F4F6);
  border: 1.5px dashed var(--color-border-default, #D1D5DB);
}
.uc-body.is-error .uc-ic {
  background: var(--color-error-tint, #F4DCD7);
  color: var(--color-error, #B83227);
}
.uc-body.is-error .uc-actions { margin-top: 22px; gap: 8px; }
.uc-body.is-error .uc-actions .uc-btn      { height: 34px; padding: 0 16px; font-size: 13px; }
.uc-body.is-error .uc-actions .uc-btn-link { height: 28px; padding: 0 8px; }

/* ============================================================
   STATE 5 (extension) · REVISION_MANUAL — fallback Exante
   El cliente optó (o el sistema escaló) por enviar el archivo a
   revisión manual por el equipo. Tint warning ámbar, ícono check.
   ============================================================ */
.uc-body.is-revision_manual {
  background: var(--color-bg-subtle, #F2F4F6);
  border: 1.5px solid var(--color-border-subtle, #E5E7EB);
}
.uc-body.is-revision_manual .uc-ic {
  background: var(--color-warning-tint, #FAE5CC);
  color: var(--color-warning-deep, #B07614);
}
.uc-body.is-revision_manual .uc-ic svg { stroke-width: 2.4; }

/* ============================================================
   FILE CHIP — bajo title en uploading / success / revision_manual
   margin-top 28 (vs actions 22) para alinear centros verticales
   (chip ~22 vs button 34).
   ============================================================ */
.uc-file-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 28px;
  font: 500 12px 'Inter', sans-serif;
  color: var(--fg2);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border-subtle, #E5E7EB);
  font-variant-numeric: tabular-nums;
  max-width: 100%;
  min-width: 0;
}
.uc-file-chip-icon { display: inline-flex; flex-shrink: 0; color: var(--fg3); }
.uc-file-chip-icon svg { width: 12px; height: 12px; stroke-width: 1.6; }
.uc-file-chip-name {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.uc-file-chip-remove {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  padding: 0 0 0 2px;
  margin: 0;
  cursor: pointer;
  color: var(--fg3);
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.uc-file-chip-remove:hover { color: var(--fg1); }
.uc-file-chip-remove svg { width: 12px; height: 12px; stroke-width: 1.8; }

/* Hint debajo de la chip cuando estamos en error con escalado
   progresivo (2do+ fallo · texto explicativo opt-in). */
.uc-hint {
  margin: 6px 0 0;
  font: 400 12px/1.4 'Inter', sans-serif;
  color: var(--fg3);
  max-width: 320px;
}

/* S3.7-OCR-C · banner de cross-checks entre docs */
.wiz-xcheck-banner {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 18px;
  border-radius: 12px;
  margin-bottom: 20px;
  border: 1px solid;
}
.wiz-xcheck-banner.is-media {
  background: var(--color-warning-tint, #FAE5CC);
  border-color: var(--color-warning, #E89B2A);
  color: var(--color-warning-deep, #B07614);
}
.wiz-xcheck-banner.is-critical {
  background: var(--color-error-tint, #F4DCD7);
  border-color: var(--color-error, #B83227);
  color: var(--color-error-deep, #8C2018);
}
.wiz-xcheck-title {
  font: 600 14px 'Inter', sans-serif;
}
.wiz-xcheck-sub {
  font: 400 13px/1.4 'Inter', sans-serif;
  opacity: 0.9;
  margin-top: 2px;
}
.wiz-xcheck-list {
  margin: 0; padding-left: 18px;
  font: 400 13px/1.5 'Inter', sans-serif;
}
.wiz-xcheck-item {
  margin: 2px 0;
}
.wiz-xcheck-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 4px;
}

.wiz-doc-spinner {
  width: 12px; height: 12px;
  border: 2px solid var(--border);
  border-top-color: var(--fg2);
  border-radius: 50%;
  animation: wiz-spin 0.7s linear infinite;
}
@keyframes wiz-spin { to { transform: rotate(360deg); } }

/* Etapa 2 · PLD */
.wiz-bg-task {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-notice-tint, #E8E9EA);
  color: var(--fg2);
  padding: 8px 14px;
  border-radius: var(--r-md);
  font: 500 12px 'Inter', sans-serif;
  margin-bottom: 24px;
}
.wiz-bg-task.is-done {
  background: var(--color-success-tint);
  color: var(--color-accent-green-deep);
}
.wiz-pld-q {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-bottom: 10px;
  background: var(--surface);
}
.wiz-pld-q-text {
  font: 500 14px/1.5 'Inter', sans-serif;
  color: var(--fg1);
  margin-bottom: 12px;
}
.wiz-pld-options {
  display: inline-flex;
  background: var(--surface-2);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
}
.wiz-pld-options button {
  background: transparent; border: 0;
  padding: 6px 18px;
  border-radius: var(--r-pill);
  font: 500 13px 'Inter', sans-serif;
  font-family: inherit;
  color: var(--fg2);
  cursor: pointer;
}
.wiz-pld-options button.is-active {
  background: var(--surface);
  color: var(--fg1);
  box-shadow: 0 1px 2px rgba(15,20,25,0.08);
}
.wiz-pld-flag {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--color-warning-tint);
  border: 1px solid rgba(232,155,42,0.3);
  border-radius: var(--r-md);
  font: 400 13px/1.5 'Inter', sans-serif;
  color: #6E4810;
}

/* Etapa 3 · forms */
.wiz-form-section { margin-bottom: 28px; }
.wiz-form-section-head {
  font: 600 13px 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg3);
  margin-bottom: 12px;
}
.wiz-field { margin-bottom: 14px; }
.wiz-field label {
  display: block;
  font: 500 12px 'Inter', sans-serif;
  color: var(--fg2);
  margin-bottom: 6px;
}
.wiz-field input,
.wiz-field select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font: 400 14px 'Inter', sans-serif;
  font-family: inherit;
  background: var(--surface);
  color: var(--fg1);
  box-sizing: border-box;
}
/* S3.8-polish · select con chevron custom alineado correctamente dentro
   del campo. Antes el chevron del browser caía fuera del field por la
   suma de padding + ancho del control nativo. Forzamos appearance:none
   y pintamos el chevron como background-image. */
.wiz-field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B92A1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 12px;
}
.wiz-field input:focus,
.wiz-field select:focus {
  outline: none; /* S82b · focus neutro */
  outline-offset: 0;
}
.wiz-field input.is-prefilled {
  background: var(--surface, #FFFFFF); /* S248.6 · sin relleno (input normal) */
}
.wiz-field-hint {
  font: 400 11px 'Inter', sans-serif;
  color: var(--fg3);
  margin-top: 4px;
}
/* S178 · Ubicación en Google Maps (paso 2) */
.wiz-geo { margin-bottom: 14px; }
.wiz-geo-sub { font: 400 11px 'Inter', sans-serif; color: var(--fg3); margin-top: 4px; }
.wiz-map {
  height: 220px; width: 100%; border-radius: 10px;
  border: 1px solid var(--line, #e5e7eb); background: var(--surface-2, #f3f4f6);
  margin-top: 8px; overflow: hidden;
}
.wiz-map.is-hidden { display: none; }
.wiz-geo-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.wiz-geo-actions .btn { padding: 7px 12px; font-size: 13px; }
.wiz-geo-hint { font: 400 11px 'Inter', sans-serif; color: var(--fg3); }
/* Dropdown de autocompletado de Google sobre el modal del wizard */
.pac-container { z-index: 100000 !important; }
.wiz-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wiz-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* Etapa 4 · firmas */
.wiz-firma-block {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: 16px;
  background: var(--surface);
}
.wiz-firma-block.is-done {
  border-color: var(--color-accent-green);
  background: var(--color-success-tint);
}
.wiz-firma-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.wiz-firma-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-action-ink);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font: 600 13px 'Inter', sans-serif;
  flex-shrink: 0;
}
.wiz-firma-block.is-done .wiz-firma-num {
  background: var(--color-accent-green);
}
.wiz-firma-title {
  font: 600 17px 'Inter', sans-serif;
  color: var(--fg1);
}
.wiz-contract-preview {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px;
  background: var(--color-bg);
  max-height: 220px;
  overflow-y: auto;
  font: 400 13px/1.6 'Inter', sans-serif;
  color: var(--fg2);
  margin-bottom: 14px;
}
.wiz-checkbox {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0 4px;
  cursor: pointer;
  user-select: none;
}
.wiz-checkbox input { margin-top: 4px; flex-shrink: 0; }
.wiz-checkbox-label {
  font: 400 13px/1.5 'Inter', sans-serif;
  color: var(--fg1);
}
.wiz-otp-row {
  display: flex; gap: 8px;
  margin: 14px 0;
}
.wiz-otp-row input {
  width: 44px; height: 52px;
  text-align: center;
  font: 600 18px 'Inter', sans-serif;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
}
.wiz-otp-row input:focus {
  outline: 1px solid var(--ink, #0F1419);   /* S82b · focus neutro */
  outline-offset: 0;
}
/* S179 · Consentimientos del onboarding (medios + buró) */
.wiz-consent-lead { font: 400 14px/1.55 'Inter', sans-serif; color: var(--fg2); margin: 0 0 14px; }
.wiz-consent-card {
  border: 1px solid var(--border); border-radius: var(--r-md, 12px);
  background: var(--surface-1, #fff); padding: 18px;
}
.wiz-consent-text { font: 400 14px/1.6 'Inter', sans-serif; color: var(--fg1); margin: 0 0 6px; }
.wiz-buro-solicitud {
  font: 500 12.5px 'Inter', sans-serif; color: var(--fg3);
  background: var(--surface-2, #f3f4f6); border-radius: 8px;
  padding: 8px 12px; margin-bottom: 14px;
}
.wiz-auth-block {
  border: 1px solid var(--border); border-radius: var(--r-md, 12px);
  background: var(--surface-1, #fff); margin-bottom: 14px; overflow: hidden;
}
.wiz-auth-title {
  font: 700 13px 'Inter', sans-serif; color: var(--brand-deep, #0F1419);
  padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2, #fafafa);
}
.wiz-auth-text {
  padding: 16px; max-height: 280px; overflow-y: auto;
  font: 400 13.5px/1.6 'Inter', sans-serif; color: var(--fg1);
}
.wiz-auth-text p { margin: 0 0 12px; }
.wiz-auth-text p:last-child { margin-bottom: 0; }
/* Resultado */
.wiz-result { max-width: 460px; margin: 0 auto; text-align: center; padding: 24px 8px; }
.wiz-result-ic {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-success-tint, #E7F8EF); color: var(--color-success-deep, #1FAE5F);
}
.wiz-result-ic svg { width: 32px; height: 32px; }
.wiz-result-list {
  list-style: none; padding: 0; margin: 18px 0 22px; text-align: left;
  display: inline-block;
}
.wiz-result-list li {
  font: 400 14px/1.5 'Inter', sans-serif; color: var(--fg1);
  padding: 7px 0 7px 26px; position: relative;
}
.wiz-result-list li::before {
  content: '✓'; position: absolute; left: 0; top: 6px;
  color: var(--color-success-deep, #1FAE5F); font-weight: 600;
}
.wiz-password-stack {
  margin-top: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.wiz-password-stack input {
  padding: 11px 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  font: 400 14px 'Inter', sans-serif;
  font-family: inherit;
}

/* Help card (OCR fallback infinito) */
.wiz-help-card {
  background: var(--color-warning-tint);
  border: 1px solid rgba(232,155,42,0.3);
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin-bottom: 20px;
}
.wiz-help-title {
  font: 600 14px 'Inter', sans-serif;
  color: #6E4810;
  margin-bottom: 6px;
}
.wiz-help-desc {
  font: 400 13px/1.5 'Inter', sans-serif;
  color: var(--fg2);
  margin-bottom: 14px;
}
.wiz-help-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wiz-help-btn {
  flex: 1 1 140px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-button);
  font: 500 13px 'Inter', sans-serif;
  font-family: inherit;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--fg1);
}
.wiz-help-btn:hover { background: var(--surface-2); border-color: var(--fg3); }
.wiz-help-btn svg { width: 14px; height: 14px; }

/* S3.6-C / S3.8 · clases legacy retiradas; el estado revision_manual y
   los estilos por estado viven ahora dentro del bloque .uc-body de la
   sección B (upload-card). */

/* Modal de captura manual */
.wiz-manual-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 20, 25, 0.32);
  display: flex; align-items: center; justify-content: center;
  z-index: 5000;
  padding: 24px;
}
.wiz-manual-card {
  background: var(--surface);
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px -12px rgba(15,20,25,0.18);
  overflow: hidden;
}
.wiz-manual-head {
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--border);
}
.wiz-manual-title {
  font: 600 18px 'Inter', sans-serif;
  color: var(--fg1);
  margin: 0 0 6px;
}
.wiz-manual-sub {
  font: 400 13px 'Inter', sans-serif;
  color: var(--fg2);
  margin: 0;
  line-height: 1.5;
}
.wiz-manual-body {
  padding: 24px 28px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
}
.wiz-manual-body label {
  display: flex; flex-direction: column; gap: 4px;
  font: 500 13px 'Inter', sans-serif;
  color: var(--fg2);
}
.wiz-manual-body label .req { color: var(--color-error, #B83227); }
.wiz-manual-body input {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: 400 14px 'Inter', sans-serif;
  color: var(--fg1);
  background: var(--surface);
}
.wiz-manual-body input:focus {
  outline: none;
  box-shadow: none;
}
.wiz-manual-foot {
  padding: 16px 28px 20px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px;
}
.wiz-manual-foot button {
  font: 500 14px 'Inter', sans-serif;
  padding: 10px 18px;
  border-radius: var(--radius-button, 999px);
  cursor: pointer;
}
.wiz-manual-cancel { background: transparent; border: 1px solid var(--border-strong); color: var(--fg1); }
.wiz-manual-cancel:hover { background: var(--surface-2); }
.wiz-manual-submit { background: var(--color-action-ink, #0F1419); color: #fff; border: 0; }
.wiz-manual-submit:hover { background: #1F262E; }
.wiz-manual-submit:disabled { background: var(--surface-2); color: var(--fg4); cursor: not-allowed; }

/* DEV-BAR-BEGIN · QA del wizard (S3.3f-B) · ELIMINAR PRE-DEPLOY */
.wiz-dev-bar {
  /* S3.5-E-polish · ya no vive pegada al fondo del wizard; ahora es una
     card propia ARRIBA del wiz-card, homologada al patrón de .dev-bar
     de /expediente (rounded, margin-bottom, separada del contenido). */
  flex-shrink: 0;
  padding: 10px 12px 10px 16px;
  margin-bottom: 16px;
  background: #1A2026;
  color: rgba(255,255,255,0.92);
  display: flex; align-items: center; gap: 12px;
  font: 500 12px 'Inter', sans-serif;
  border-radius: var(--r-md);
  flex-wrap: wrap;
}
.wiz-dev-bar-label {
  font: 600 9px 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
  display: inline-flex; align-items: center; gap: 6px;
}
.wiz-dev-bar-label::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--accent-go);
  border-radius: 50%;
}
.wiz-dev-bar .group {
  display: inline-flex; gap: 2px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  padding: 2px;
}
.wiz-dev-bar .group button {
  background: transparent; border: 0;
  color: rgba(255,255,255,0.72);
  padding: 5px 10px;
  border-radius: 999px;
  font: 500 11px 'Inter', sans-serif;
  font-family: inherit;
  cursor: pointer;
}
.wiz-dev-bar .group button:hover { color: #fff; }
.wiz-dev-bar .group button.is-active {
  background: rgba(255,255,255,0.14);
  color: #fff;
}
.wiz-dev-bar-action {
  background: rgba(31,174,95,0.18);
  border: 1px solid rgba(31,174,95,0.36);
  color: #5EE39E;
  padding: 5px 10px;
  border-radius: 999px;
  font: 500 11px 'Inter', sans-serif;
  font-family: inherit;
  cursor: pointer;
  margin-left: auto;
}
.wiz-dev-bar-action:hover { background: rgba(31,174,95,0.28); color: #fff; }
/* DEV-BAR-END */

/* Mobile responsive */
@media (max-width: 720px) {
  .wiz-header { padding: 10px 14px; gap: 12px; }
  .wiz-header-brand { display: none; }
  .wiz-header-stepper { gap: 2px; }
  .wiz-header-exit { padding: 6px 10px; font-size: 11px; }
  /* S3.5-E-stepper-spec · selectores actualizados al nuevo stepper */
  .stp-num .l { display: none; }
  .stp-num .c { width: 24px; height: 24px; font-size: 11px; }
  .stp-num .s:not(:last-child)::after { top: 12px; }
  .wiz-body { padding: 28px 16px 20px; }
  .wiz-content h1 { font-size: 22px; }
  .wiz-content > .wiz-step-panel > p { font-size: 14px; margin-bottom: 22px; }
  .wiz-docs-grid { grid-template-columns: 1fr; }
  .wiz-row-2, .wiz-row-3 { grid-template-columns: 1fr; }
  .wiz-footer { padding: 10px 14px; }
  .wiz-back, .wiz-next { padding: 10px 14px; font-size: 13px; }
  .wiz-firma-block { padding: 18px; }
}

/* ════════════════════════════════════════════════════════════════════════
   DEV-BAR-BEGIN · QA navegador de estados (S3.3f-A6 · 2026-05-24)
   Compartido entre /expediente (#expDevBar) y /cotizar (#solDevBar).
   ELIMINAR ANTES DE DEPLOY · ver memoria proj-dev-navegadores
   ════════════════════════════════════════════════════════════════════════ */
.dev-bar {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 20px;
  padding: 10px 12px 10px 16px;
  background: #1A2026;
  color: rgba(255,255,255,0.92);
  border-radius: var(--r-md);
  font: 500 12px 'Inter', sans-serif;
  flex-wrap: wrap;
}
.dev-bar-label {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 10px 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.6);
  padding-right: 4px;
}
.dev-bar-label::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--accent-go);
  border-radius: 50%;
  display: inline-block;
}
.dev-bar .group {
  display: inline-flex;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  flex-wrap: wrap;
}
.dev-bar .group button {
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.72);
  padding: 6px 12px;
  border-radius: 999px;
  font: 500 12px 'Inter', sans-serif;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.dev-bar .group button:hover { color: #fff; }
.dev-bar .group button.is-active {
  background: rgba(255,255,255,0.14);
  color: #fff;
}
.dev-bar .scope {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font: 400 11px 'Inter', sans-serif;
  color: rgba(255,255,255,0.6);
}
.dev-bar .scope select {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  font: 500 12px 'Inter', sans-serif;
  font-family: inherit;
  cursor: pointer;
}
.dev-bar .scope select option { background: #1A2026; color: #fff; }
/* DEV-BAR-END */

/* ========================================================================
   PROFILE
   ======================================================================== */
.profile-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: 16px;
  max-width: 640px;
}
.profile-section-head {
  padding: 14px 22px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg4);
}
.profile-row {
  display: flex; align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  gap: 16px;
}
.profile-row:last-child { border-bottom: none; }
.profile-row .label { font-size: 13px; color: var(--fg3); flex: 0 0 130px; }
.profile-row .value { font-size: 14px; color: var(--fg1); font-weight: 500; flex: 1; }
/* S292 · campos editables del Perfil (nombre/teléfono) */
.profile-row .pf-edit { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--color-border-default, #D1D5DB); border-radius: var(--radius-md, 10px); background: var(--color-surface, #fff); font: 500 14px 'Inter', sans-serif; color: var(--fg1); transition: border-color var(--motion-fast); }
.profile-row .pf-edit:focus { outline: none; border-color: var(--color-border-focus, #6E7378); }
.profile-row .action {
  color: var(--fg1); font-size: 13px; cursor: pointer; font-weight: 500;
  background: transparent; border: 0; padding: 0;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  display: inline-flex; align-items: center; gap: 4px;
}
.profile-row.clickable { cursor: pointer; }
.profile-row.clickable:hover { background: var(--surface-2); }
/* Perfil ON/OFF toggle — animación del knob con cubic-bezier suave
   (mismo timing que el slider de los portal-switch). */
.profile-row .toggle {
  width: 38px; height: 22px;
  background: var(--ink);
  border-radius: 11px;
  position: relative;
  cursor: pointer;
  border: 0; padding: 0;
  transition: background 0.3s var(--ease-default);
}
.profile-row .toggle::after {
  content: '';
  position: absolute;
  left: calc(100% - 20px); top: 2px;
  width: 18px; height: 18px;
  background: white;
  border-radius: 50%;
  transition: left 0.35s var(--ease-default);
  box-shadow: 0 1px 2px rgba(15,20,25,0.18);
}
.profile-row .toggle.off { background: var(--border-strong); }
.profile-row .toggle.off::after { left: 2px; }
.profile-row .desc { font-size: 12px; color: var(--fg3); margin-top: 3px; }

/* ========================================================================
   AYUDA
   ======================================================================== */
.help-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 32px;
  max-width: 720px;
}
.help-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 20px;
  text-align: center;
  cursor: pointer;
  transition: all var(--motion-fast);
}
.help-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card); transform: translateY(-1px); }
.help-card .icon { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; color: var(--fg2); }
.help-card .icon svg { width: 26px; height: 26px; stroke-width: 1.6; }
.help-card .title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.help-card .detail { font-size: 12px; color: var(--fg3); }

.faq-list { max-width: 640px; }
.faq-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.faq-item summary { cursor: pointer; font-weight: 500; font-size: 14px; list-style: none; display: flex; justify-content: space-between; }
.faq-item summary::after { content: '+'; color: var(--fg4); font-weight: 400; font-size: 18px; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { color: var(--fg2); font-size: 13px; margin: 8px 0 0; }

.actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.action-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  cursor: pointer;
  transition: all var(--motion-fast);
}
.action-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card); transform: translateY(-1px); }
.action-card .icon { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; color: var(--fg1); }
.action-card .icon svg { width: 22px; height: 22px; stroke-width: 1.7; }
.action-card .title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.action-card .detail { font-size: 12px; color: var(--fg3); }

.detail-foot {
  display: flex; gap: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  font-size: 13px; color: var(--fg3);
  flex-wrap: wrap;
}
.detail-foot a { cursor: pointer; }
.detail-foot a:hover { color: var(--fg1); }
.detail-foot .right { margin-left: auto; }

/* ========================================================================
   EMPTY STATE
   ======================================================================== */
.empty-card {
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-xl);
  padding: 40px 32px;
  text-align: center;
  margin-bottom: 16px;
}
.empty-card .icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--surface-2);
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg3);
}
.empty-card .icon svg { width: 26px; height: 26px; stroke-width: 1.6; }
.empty-card h3 { margin: 0 0 6px; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.empty-card p { margin: 0 0 20px; color: var(--fg3); font-size: 14px; }

/* ========================================================================
   MODAL
   ======================================================================== */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(15,20,25,0.32);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-backdrop.open { display: flex; }
.modal-box {
  background: var(--surface); border-radius: var(--r-xl);
  max-width: 460px; width: 100%;
  padding: 28px;
  box-shadow: var(--shadow-pop);
}
.modal-box h3 {
  font-weight: 600; font-size: 22px;
  margin: 0 0 10px;
  letter-spacing: -0.015em;
}
.modal-box p { margin: 0 0 18px; color: var(--fg2); font-size: 14px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ========================================================================
   TUTORIAL MINI-CARDS
   ======================================================================== */
.tut-card {
  position: absolute;
  background: var(--ink);
  color: white;
  padding: 14px 18px;
  border-radius: var(--r-md);
  font-size: 13px;
  line-height: 1.4;
  max-width: 280px;
  box-shadow: var(--shadow-pop);
  z-index: 110;
}
.tut-card .step { font-size: 10px; font-weight: 600; opacity: 0.55; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; }
.tut-card .text { margin-bottom: 12px; }
.tut-card .actions { display: flex; justify-content: space-between; align-items: center; }
.tut-card .skip { color: rgba(255,255,255,0.55); font-size: 12px; cursor: pointer; background: transparent; border: 0; padding: 0; }
.tut-card .next { background: white; color: var(--ink); padding: 5px 12px; border-radius: var(--radius-button); font-size: 12px; font-weight: 600; cursor: pointer; border: 0; }
.tut-card::before {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  background: var(--ink);
  transform: rotate(45deg);
}
.tut-card.point-left::before { left: -5px; top: 20px; }
.tut-card.point-top::before { top: -5px; left: 22px; }

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
.menu-toggle {
  display: none;
  background: transparent; border: 0;
  color: white; cursor: pointer;
  width: 36px; height: 36px;
  margin-right: 8px;
  align-items: center; justify-content: center;
  border-radius: var(--r-md);
}
.menu-toggle:hover { background: rgba(255,255,255,0.10); }
.menu-toggle svg { width: 20px; height: 20px; }

@media (max-width: 880px) {
  .stats-row { grid-template-columns: 1fr; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .actions-grid, .help-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 28px; }
  .sol-na-title { font-size: 24px; }
  .sol-summary { grid-template-columns: 1fr; }
  .sol-finance { min-width: 0; align-items: flex-start; }
  .sol-stat { text-align: left; }
  .sol-protag { align-items: flex-start; }
  .solic-row { grid-template-columns: 1fr 20px; gap: 12px; }
  .solic-row .folio-block, .solic-row .pay-info { display: none; }
  .sol-stepper { grid-template-columns: repeat(5, 1fr); gap: 12px 0; }
}

/* ─────────────────────────────────────────────────────────────
   MÓVIL <768px · off-canvas con backdrop (decisión Ricardo).
   El sidebar se oculta fuera de pantalla y entra deslizándose;
   se cierra al elegir módulo o tocar el backdrop. En desktop NO
   aplica (el colapso 248↔72 del handoff manda).
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Móvil: sidebar off-canvas (position:fixed, fuera del grid) → solo topbar + main.
     1 columna; el área "sidebar" queda sin usar (el riel es fixed). */
  .app {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "main";
  }
  .sb-sidebar {
    position: fixed;
    left: 0; top: 0;
    height: 100%;
    width: 248px !important;            /* off-canvas siempre expandido */
    z-index: 100;
    transform: translateX(-100%);
    transition: transform var(--motion-base) var(--ease-default);
    box-shadow: var(--shadow-pop, 0 12px 32px rgba(15,20,25,0.18));
  }
  .sb-sidebar.is-mobile-open { transform: translateX(0); }
  /* En móvil el riel colapsado no aplica: siempre se ve expandido */
  .sb-sidebar.is-collapsed .sb-item { padding: 10px 14px 10px 20px; gap: 12px; }
  .sb-sidebar.is-collapsed .sb-item::before { inset: 2px 8px; }
  .sb-sidebar.is-collapsed .sb-item__label { max-width: 170px; opacity: 1; transform: translateX(0); }
  .sb-sidebar.is-collapsed .sb-item .badge { opacity: 1; }
  .sb-backdrop.is-open { display: block; opacity: 1; }
  .sb-tooltip { display: none !important; }
  .sb-search { display: none; }       /* sin espacio para la búsqueda centrada */
}

/* S293 · dropdown de Ayuda (?) retirado (reemplazado por la barra acoplada en S294) */
#topbarHelpDropdown{ display:none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   S294 · AYUDA · barra lateral acoplada (#helpPanel) — handoff_ayuda_dock.
   Gemela de Ajustes (.st)/Notificaciones (ncx2)/Asistente (.dock). Todo
   namespaceado bajo #helpPanel con prefijo hp- para NO chocar con .st-head/.st-tile
   de Ajustes. Tokens mapeados a los NATIVOS de mi-exante con fallback px
   (--radius-lg/-pill/--shadow-sm/--color-volt/--font-sans NO existen aquí → se evitan).
   ═══════════════════════════════════════════════════════════════════════════ */
#helpPanel{ position:fixed; top:64px; right:0; bottom:0; width:420px; max-width:92%; z-index:50; display:flex; flex-direction:column; background:var(--color-surface); border-left:1px solid var(--color-border-subtle); box-shadow:-16px 0 40px -20px rgba(15,20,25,.18); transform:translateX(100%); transition:transform var(--motion-slow) var(--ease-default); }
#helpPanel.open{ transform:translateX(0); }
@media (prefers-reduced-motion: reduce){ #helpPanel{ transition:none; } }

#helpPanel .hp-head{ display:flex; align-items:center; gap:11px; padding:13px 14px; background:var(--color-bg-subtle); border-bottom:1px solid var(--color-border-default); flex-shrink:0; }
#helpPanel .hp-tile{ width:34px; height:34px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; background:var(--color-surface); border:1px solid var(--color-border-subtle); color:var(--fg1); flex-shrink:0; }
#helpPanel .hp-tile svg{ width:18px; height:18px; }
#helpPanel .hp-hi{ flex:1; min-width:0; }
#helpPanel .hp-title{ font-size:15px; font-weight:700; letter-spacing:-0.01em; line-height:1.2; color:var(--fg1); }
#helpPanel .hp-hactions{ display:flex; align-items:center; gap:4px; flex-shrink:0; }
#helpPanel .hp-close{ width:34px; height:34px; border:none; background:transparent; border-radius:var(--r-md,10px); color:var(--fg2); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background var(--motion-fast), color var(--motion-fast); }
#helpPanel .hp-close:hover{ background:rgba(15,20,25,.06); color:var(--fg1); }
#helpPanel .hp-close:focus-visible{ outline:2px solid var(--color-action-ink); outline-offset:1px; }
#helpPanel .hp-close svg{ width:18px; height:18px; }

#helpPanel .hp-body{ flex:1; min-height:0; overflow-y:auto; }
#helpPanel .hp-pad{ padding:18px 16px 28px; display:flex; flex-direction:column; gap:26px; }
#helpPanel .sec-h{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--fg3); padding:0 4px 10px; }

/* Contacto + Recursos · TARJETAS apiladas (S294-ayuda-fix · disposición única; se eliminó el tweak filas/tarjetas) */
#helpPanel .contact{ display:flex; flex-direction:column; gap:10px; }
#helpPanel .crow{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; text-decoration:none; border:1px solid var(--color-border-subtle); background:var(--color-surface); cursor:pointer; padding:14px; border-radius:var(--r-md,10px); transition:border-color var(--motion-fast), box-shadow var(--motion-fast); color:inherit; }
#helpPanel .crow:hover{ border-color:var(--color-border-default); box-shadow:0 1px 2px rgba(15,20,25,.04); }
#helpPanel .crow:focus-visible{ outline:2px solid var(--color-action-ink); outline-offset:-2px; }
#helpPanel .crow .cic{ width:38px; height:38px; border-radius:var(--r-md,10px); display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--color-bg-subtle); color:var(--fg1); }
#helpPanel .crow .cic svg{ width:19px; height:19px; }
#helpPanel .crow .ctx{ flex:1; min-width:0; }
#helpPanel .crow .c1{ display:block; font-size:14px; font-weight:600; letter-spacing:-0.005em; color:var(--fg1); }
#helpPanel .crow .c2{ display:block; font-size:12.5px; color:var(--fg3); margin-top:2px; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#helpPanel .crow .cgo{ width:16px; height:16px; color:var(--fg4); flex-shrink:0; transition:transform var(--motion-fast), color var(--motion-fast); }
#helpPanel .crow:hover .cgo{ color:var(--fg2); transform:translate(1px,-1px); }

/* Tutorial (recorrido guiado, no video) */
#helpPanel .tour{ border:1px solid var(--color-border-subtle); border-radius:var(--r-lg,16px); background:var(--color-surface); padding:16px; }
#helpPanel .tour-top{ display:flex; align-items:flex-start; gap:13px; }
#helpPanel .tour-ic{ width:40px; height:40px; border-radius:var(--r-md,10px); display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--color-bg-subtle); color:var(--fg1); }
#helpPanel .tour-ic svg{ width:20px; height:20px; }
#helpPanel .tour-tx{ flex:1; min-width:0; }
#helpPanel .tour .t1{ font-size:14px; font-weight:600; letter-spacing:-0.005em; color:var(--fg1); }
#helpPanel .tour .t2{ font-size:12.5px; color:var(--fg2); margin-top:3px; line-height:1.5; }
#helpPanel .tour-btn{ margin-top:14px; width:100%; height:40px; border:none; border-radius:var(--radius-button,10px); background:var(--color-action-ink); color:#fff; font:600 13.5px 'Inter',sans-serif; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:background var(--motion-fast); }
#helpPanel .tour-btn:hover{ background:var(--color-action-ink-hover); }
#helpPanel .tour-btn:focus-visible{ outline:2px solid var(--color-action-ink); outline-offset:2px; }
#helpPanel .tour-btn svg{ width:16px; height:16px; }

/* FAQ · Accordion del DS (variante card, single-open) */
#helpPanel .accordion{ background:var(--color-surface); border:1px solid var(--color-border-subtle); border-radius:var(--r-lg,16px); overflow:hidden; }
#helpPanel .ac-item{ border-bottom:1px solid var(--color-border-subtle); }
#helpPanel .ac-item:last-child{ border-bottom:none; }
#helpPanel .ac-trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background:none; border:none; cursor:pointer; font-family:inherit; text-align:left; gap:12px; transition:background var(--motion-fast); }
#helpPanel .ac-trigger:hover{ background:var(--color-bg-subtle); }
#helpPanel .ac-trigger[aria-expanded="true"]{ background:var(--color-bg-subtle); }
#helpPanel .ac-label{ font-size:14px; font-weight:500; color:var(--fg1); flex:1; }
#helpPanel .ac-chevron{ color:var(--fg3); flex-shrink:0; transition:transform var(--motion-base) var(--ease-default); display:flex; }
#helpPanel .ac-chevron svg{ width:16px; height:16px; }
#helpPanel .ac-trigger[aria-expanded="true"] .ac-chevron{ transform:rotate(180deg); }
#helpPanel .ac-body{ overflow:hidden; max-height:0; transition:max-height var(--motion-base) var(--ease-default); }
#helpPanel .ac-body.open{ max-height:400px; }
#helpPanel .ac-content{ padding:14px 20px 18px; font-size:13px; color:var(--fg2); line-height:1.6; }
#helpPanel .ac-content a{ color:var(--color-action-ink); font-weight:500; text-decoration:underline; text-underline-offset:2px; }
@media (prefers-reduced-motion: reduce){ #helpPanel .ac-body, #helpPanel .ac-chevron{ transition:none; } }

/* Asistente · acción principal (superficie IA, borde-gradiente; sin verde) */
#helpPanel .asist{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; padding:14px 15px; border-radius:var(--r-lg,16px); cursor:pointer; border:1.5px solid transparent; background:linear-gradient(#fff,#fff) padding-box, linear-gradient(120deg,#8E72D6 0%,#6E7EF0 50%,#D24AA0 100%) border-box; transition:box-shadow var(--motion-fast) var(--ease-default); }
#helpPanel .asist:hover{ box-shadow:0 1px 2px rgba(15,20,25,.06), 0 6px 18px -6px rgba(15,20,25,.14); }
#helpPanel .asist:focus-visible{ outline:2px solid var(--color-action-ink); outline-offset:1px; }
#helpPanel .asist .aic{ display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#5A6CE5; }
#helpPanel .asist .aic svg{ width:24px; height:24px; }
#helpPanel .asist .atx{ flex:1; min-width:0; }
#helpPanel .asist .a1{ font-size:14.5px; font-weight:600; letter-spacing:-0.005em; color:var(--fg1); }
#helpPanel .asist .a2{ font-size:12.5px; color:var(--fg2); margin-top:2px; line-height:1.45; }
#helpPanel .asist .ago{ width:18px; height:18px; color:var(--fg3); flex-shrink:0; }

@media (max-width:860px){ #helpPanel{ width:100%; max-width:100%; } }