/* ============================================================================
   Domani AMS — Design System propio
   No Bootstrap, no Hyper. Identidad nueva: sobria, densa, financiera.
   Paleta: tinta pizarra fría + primario índigo profundo + oro de acento.
   Un solo archivo de tokens + componentes. Modo claro y oscuro.
   ============================================================================ */

:root {
  /* — Neutros con sesgo frío (elegidos, no gris puro) — */
  --bg:         #F4F5F8;
  --surface:    #FFFFFF;
  --surface-2:  #EDEFF4;
  --surface-3:  #E4E7EF;
  --ink:        #171A21;
  --ink-2:      #454B58;
  --muted:      #6C7382;
  --line:       #DCDFE8;
  --line-soft:  #E8EAF1;

  /* — Primario: índigo profundo (confianza, no el azul solar de LeoCRM) — */
  /* — El azul de Domani. Fijo en los dos temas: es la marca, no un acento — */
  --brand:        #0043BA;

  --primary:      #0043BA;
  --primary-600:  #003A9F;
  --primary-700:  #002E7D;
  --primary-100:  #E3ECFB;
  --on-primary:   #FFFFFF;

  /* — Oro discreto para realces premium — */
  --gold:      #A9834B;
  --gold-100:  #F3EBDD;

  /* — Semánticos (separados del acento) — */
  --ok:      #1E7A52;   --ok-100:   #DDF1E7;
  --warn:    #9A6714;   --warn-100: #F6ECD8;
  --danger:  #A32E2E;   --danger-100:#F7E3E2;
  --info:    #0B6E80;   --info-100: #DDF0F4;

  --shadow-sm: 0 1px 2px rgba(23,26,33,.06);
  --shadow:    0 1px 3px rgba(23,26,33,.08), 0 4px 12px rgba(23,26,33,.05);
  --shadow-lg: 0 8px 30px rgba(23,26,33,.14);

  --r-sm: 6px; --r: 9px; --r-lg: 14px; --r-pill: 999px;

  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --sidebar-w: 244px;
  --topbar-h: 60px;
}
/* El atributo `hidden` gana siempre.
   Sin esto, un `style="display:flex"` en línea lo anula —la regla del navegador
   tiene menos peso que un estilo en línea— y un panel que debía estar oculto se
   ve desde que carga la página. Pasó con el aviso de «Domani está trabajando». */
[hidden] { display: none !important; }


@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0E1016;
    --surface:   #171A22;
    --surface-2: #1E222C;
    --surface-3: #262B37;
    --ink:       #E9ECF3;
    --ink-2:     #B4BAC8;
    --muted:     #838A9A;
    --line:      #2A2F3B;
    --line-soft: #232833;
    --primary:      #6E9BFF;
    --primary-600:  #5A8AF5;
    --primary-700:  #4778E4;
    --primary-100:  #13203F;
    --on-primary:   #07142E;
    --gold:      #CBA365;
    --gold-100:  #2A2113;
    --ok:      #4FB584; --ok-100:   #12271E;
    --warn:    #D2A24E; --warn-100: #2A2113;
    --danger:  #E0817C; --danger-100:#2E1917;
    --info:    #56BDD1; --info-100: #0C2A31;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow:    0 1px 3px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.35);
    --shadow-lg: 0 10px 34px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --bg:#0E1016; --surface:#171A22; --surface-2:#1E222C; --surface-3:#262B37;
  --ink:#E9ECF3; --ink-2:#B4BAC8; --muted:#838A9A; --line:#2A2F3B; --line-soft:#232833;
  --primary:#6E9BFF; --primary-600:#5A8AF5; --primary-700:#4778E4; --primary-100:#13203F; --on-primary:#07142E;
  --gold:#CBA365; --gold-100:#2A2113;
  --ok:#4FB584; --ok-100:#12271E; --warn:#D2A24E; --warn-100:#2A2113;
  --danger:#E0817C; --danger-100:#2E1917; --info:#56BDD1; --info-100:#0C2A31;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 1px 3px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.35); --shadow-lg:0 10px 34px rgba(0,0,0,.5);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
h1,h2,h3,h4 { line-height: 1.2; letter-spacing: -.01em; font-weight: 600; }
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }

/* ─────────────────────── Shell app: sidebar + topbar ─────────────────────── */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
@media (max-width: 860px) { .shell { grid-template-columns: 1fr; } .sidebar { display:none; } }

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 20px; border-bottom: 1px solid var(--line-soft);
}
.brand .mark {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  background: linear-gradient(140deg, var(--primary), var(--primary-700));
  display: grid; place-items: center; color: #fff;
  font-family: var(--serif); font-weight: 600; font-size: 17px;
}
.brand .name { font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.brand .name small { display:block; font-family: var(--mono); font-size: 9.5px; letter-spacing:.18em; text-transform:uppercase; color: var(--muted); font-weight: 500; }

.nav { padding: 12px 12px; overflow-y: auto; flex: 1; }
.nav-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); padding: 14px 10px 6px;
}
.nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: 13.5px; font-weight: 500;
  margin-bottom: 1px;
}
.nav a:hover { background: var(--surface-2); text-decoration: none; color: var(--ink); }
.nav a.on { background: var(--primary-100); color: var(--primary); font-weight: 600; }
.nav a .ic { width: 17px; height: 17px; flex: 0 0 auto; opacity: .9; }
.nav a .badge { margin-left: auto; }

.sidebar-foot { border-top: 1px solid var(--line-soft); padding: 12px; }
.userchip { display:flex; align-items:center; gap:10px; padding: 6px 8px; border-radius: var(--r-sm); }
.userchip:hover { background: var(--surface-2); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex:0 0 auto;
  background: var(--surface-3); color: var(--ink-2);
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
}
.userchip .who { min-width: 0; }
.userchip .who b { display:block; font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.userchip .who span { display:block; font-size:11px; color: var(--muted); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: var(--topbar-h); flex: 0 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px; background: var(--surface);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 16px; font-weight: 600; }
.topbar .spacer { flex: 1; }
.content { padding: 24px; max-width: 1240px; width: 100%; }

/* ─────────────────────── Tipos de encabezado de página ─────────────────────── */
.page-head { margin-bottom: 22px; }
.page-head h2 { font-size: 22px; letter-spacing: -.02em; }
.page-head p { color: var(--muted); font-size: 13.5px; margin-top: 3px; }
.eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--primary); }

/* ─────────────────────── Botones ─────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  padding: 9px 16px; border-radius: var(--r-sm); border: 1px solid transparent;
  cursor: pointer; line-height: 1; white-space: nowrap; transition: background .12s, border-color .12s;
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-600); text-decoration:none; }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-2); text-decoration:none; }
.btn-subtle { background: var(--surface-2); color: var(--ink-2); }
.btn-subtle:hover { background: var(--surface-3); text-decoration:none; }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-danger { background: var(--danger); color: #fff; }

/* ─────────────────────── Tarjetas ─────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-sm);
}
.card-pad { padding: 20px; }
.card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 20px; border-bottom: 1px solid var(--line-soft);
}
.card-head h3 { font-size: 14.5px; font-weight: 600; }
.card-head .spacer { flex: 1; }

/* ─────────────────────── Rejilla de métricas (KPI) ─────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 14px; margin-bottom: 22px; }
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px 18px; position: relative; overflow: hidden;
}
.stat::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--primary); opacity:.85; }
.stat.gold::before { background: var(--gold); }
.stat.ok::before { background: var(--ok); }
.stat.warn::before { background: var(--warn); }
.stat .k { font-family: var(--mono); font-size: 10.5px; letter-spacing:.1em; text-transform: uppercase; color: var(--muted); }
.stat .v { font-family: var(--serif); font-size: 27px; font-weight: 600; line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; }
.stat .d { font-size: 12px; color: var(--muted); margin-top: 4px; }
.stat .d.up { color: var(--ok); } .stat .d.down { color: var(--danger); }

/* ─────────────────────── Tablas de datos ───────────────────────
   El estilo cuelga del CONTENEDOR, no de una clase en la <table>. Antes solo
   se aplicaba a `table.data`, así que las nueve vistas que se escribieron con
   `<table>` a secas —las cinco de Settings, conciliación, importación,
   documentos y beneficiarios— salían sin relleno ni bordes: el texto pegado
   al borde y las columnas chocando entre sí. Con el selector por contenedor,
   cualquier tabla que se añada en el futuro nace bien puesta.               */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.table-wrap table, table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
.table-wrap thead th, table.data th {
  text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; padding: 11px 16px;
  border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap;
}
.table-wrap td, table.data td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table-wrap tbody tr:last-child td, table.data tr:last-child td { border-bottom: 0; }
.table-wrap tbody tr:hover td, table.data tbody tr:hover td { background: var(--surface-2); }
.table-wrap .strong, table.data .strong { font-weight: 600; color: var(--ink); }
.table-wrap .sub, table.data .sub { font-size: 12px; color: var(--muted); }

/* Los formularios dentro de una celda no deben empujar la fila. */
.table-wrap td form { display: inline-block; margin: 0; }
.table-wrap td .btn { vertical-align: middle; }

/* La columna de acciones se queda pegada a la derecha y no se estira. */
.table-wrap th:last-child:empty { width: 1%; }

/* ─────────────────────── Badges / pills de estado ─────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap;
}
.badge.neutral { background: var(--surface-3); color: var(--ink-2); }
.badge.primary { background: var(--primary-100); color: var(--primary); }
.badge.ok      { background: var(--ok-100); color: var(--ok); }
.badge.warn    { background: var(--warn-100); color: var(--warn); }
.badge.danger  { background: var(--danger-100); color: var(--danger); }
.badge.info    { background: var(--info-100); color: var(--info); }
.badge.gold    { background: var(--gold-100); color: var(--gold); }
.badge .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* Pipeline de póliza: barra de estado por segmentos */
.pipeline { display: flex; gap: 3px; }
.pipeline .seg { flex: 1; height: 5px; border-radius: 2px; background: var(--surface-3); }
.pipeline .seg.done { background: var(--primary); }
.pipeline .seg.current { background: var(--gold); }

/* ─────────────────────── Formularios ─────────────────────── */
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.field .hint { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.input, .select, .textarea {
  width: 100%; padding: 10px 12px; font-family: var(--sans); font-size: 14px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm); outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-100); }
.input::placeholder { color: var(--muted); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px){ .row2 { grid-template-columns: 1fr; } }

/* ─────────────────────── IA: panel de copiloto ─────────────────────── */
.copilot {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--primary-100), var(--surface) 42%);
  padding: 18px; position: relative;
}
.copilot .tag {
  display:inline-flex; align-items:center; gap:6px;
  font-family: var(--mono); font-size: 10px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--primary); font-weight: 600; margin-bottom: 10px;
}
.copilot .tag .spark { width:14px; height:14px; }
.copilot .suggestion { font-size: 14px; line-height: 1.55; color: var(--ink); }
.copilot .cite { font-size: 11.5px; color: var(--muted); margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.copilot .disclaimer { font-size: 11px; color: var(--muted); margin-top: 8px; font-style: italic; }

/* ─────────────────────── Login ─────────────────────── */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
@media (max-width: 820px){ .auth-wrap { grid-template-columns: 1fr; } .auth-aside { display:none; } }
.auth-aside {
  background: linear-gradient(150deg, var(--primary-700), var(--primary));
  color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between;
}
.auth-aside .lead { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 600; line-height: 1.15; letter-spacing:-.02em; max-width: 15ch; }
.auth-aside .foot { font-size: 12.5px; opacity: .8; }
.auth-aside ul { list-style: none; margin-top: 22px; }
.auth-aside ul li { padding: 7px 0; font-size: 14px; opacity: .92; display:flex; gap:10px; align-items:center; }
.auth-main { display: grid; place-items: center; padding: 40px 24px; background: var(--bg); }
.auth-card { width: 100%; max-width: 380px; }
.auth-card h1 { font-family: var(--serif); font-size: 26px; margin-bottom: 4px; }
.auth-card .sub { color: var(--muted); font-size: 13.5px; margin-bottom: 26px; }
.alert { padding: 10px 13px; border-radius: var(--r-sm); font-size: 13px; margin-bottom: 16px; }
.alert.err { background: var(--danger-100); color: var(--danger); }

@media (prefers-reduced-motion: reduce){ * { transition:none !important; animation:none !important; } }

/* ── autoevaluación de la lección ── */
.quiz-op {
  text-align: left; font-size: 13px; line-height: 1.5; padding: 9px 13px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  color: var(--ink); cursor: pointer; transition: border-color .12s;
}
.quiz-op:hover { border-color: var(--primary); }
.quiz-op.quiz-good { border-color: var(--ok); background: var(--ok-100); color: var(--ok); font-weight: 600; }
.quiz-op.quiz-bad  { border-color: var(--danger); color: var(--danger); }
.quiz-op.quiz-off  { opacity: .55; }
[data-quiz][data-answered] .quiz-op { cursor: default; }

/* ── la escuela y la lección: dos columnas que colapsan en móvil ── */
.train-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
.train-grid--lesson { grid-template-columns: 1.5fr 1fr; gap: 20px; }
.train-side { display: grid; gap: 16px; position: sticky; top: 18px; }
@media (max-width: 860px) {
  .train-grid, .train-grid--lesson { grid-template-columns: 1fr; }
  /* pegada, en una columna, taparía la lección al hacer scroll */
  .train-side { position: static; }
}

/* ═══════════════════════ Aurora: el look «tecnológico» ═══════════════════════
   Solo las pantallas que lo piden envuelven su contenido en `.aurora`. Dentro,
   las tarjetas se vuelven de cristal —translúcidas, con desenfoque de lo que
   hay detrás— y el fondo lleva tres focos de luz difusa. Es aditivo: ninguna
   pantalla que no use la clase cambia un píxel.

   Los tokens de cristal viven aquí, en las TRES variantes de tema como el
   resto del fichero. En claro el cristal es blanco con sombra suave; en oscuro
   es la superficie apenas iluminada sobre los focos. Nunca un color definido
   solo en un bloque de tema.                                                 */
:root {
  --glass-bg:   rgba(255,255,255,.62);
  --glass-line: rgba(23,26,33,.09);
  --glass-hi:   rgba(255,255,255,.85);
  --glow-a: rgba(0,67,186,.22);
  --glow-b: rgba(96,165,250,.20);
  --glow-c: rgba(169,131,75,.16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass-bg:   rgba(23,26,34,.55);
    --glass-line: rgba(255,255,255,.09);
    --glass-hi:   rgba(255,255,255,.06);
    --glow-a: rgba(0,67,186,.62);
    --glow-b: rgba(96,165,250,.42);
    --glow-c: rgba(203,163,101,.24);
  }
}
:root[data-theme="dark"] {
  --glass-bg:   rgba(23,26,34,.55);
  --glass-line: rgba(255,255,255,.09);
  --glass-hi:   rgba(255,255,255,.06);
  --glow-a: rgba(0,67,186,.62);
  --glow-b: rgba(96,165,250,.42);
  --glow-c: rgba(203,163,101,.24);
}

body.atmos { position: relative; }
body.atmos::before {
  content: ''; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 42% at 82% 14%, var(--glow-b) 0%, transparent 68%),
    radial-gradient(54% 44% at 12% 10%, var(--glow-a) 0%, transparent 70%),
    radial-gradient(42% 36% at 62% 98%, var(--glow-c) 0%, transparent 70%),
    linear-gradient(112deg, transparent 38%, rgba(255,255,255,.045) 50%, transparent 62%);
  filter: blur(34px) saturate(1.2);
}
/* El lateral y la barra superior también son de cristal: si solo lo fueran las
   tarjetas, la página seguiría leyéndose como la app de siempre. */
body.atmos .sidebar, body.atmos .topbar {
  background: var(--glass-bg); border-color: var(--glass-line);
  backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2);
}
body.atmos .brand, body.atmos .sidebar-foot { border-color: var(--glass-line); }
.aurora { position: relative; }
.aurora .card, .aurora .stat, .aurora .copilot, .aurora .table-wrap {
  background: var(--glass-bg);
  border-color: var(--glass-line);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow);
}
.aurora .card-head { border-bottom-color: var(--glass-line); }
.aurora .table-wrap thead th { background: transparent; }
.aurora .stat::before { width: 0; }         /* el cristal no lleva la banda lateral */

/* Tarjeta grande de dinero: eyebrow + cifra + medidor */
.money { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; min-height: 100%; }
.money .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.money .sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.money .big { font-family: var(--serif); font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.money .big small { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.money .foot { font-size: 11.5px; color: var(--muted); margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--glass-line); line-height: 1.45; }

/* Medidor de progreso */
.meter { display: flex; flex-direction: column; gap: 6px; }
.meter .row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.meter .row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.meter .track { height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.meter .fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--gold)); min-width: 3px; transition: width .6s ease; }
.meter.gold .fill { background: linear-gradient(90deg, var(--gold), var(--warn)); }
.meter.ok .fill { background: linear-gradient(90deg, var(--ok), var(--primary)); }
.meter .hint { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Pestañas píldora (enlaces: sin JS) */
.pills { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--glass-line); backdrop-filter: blur(12px); }
.pills a { padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.pills a:hover { color: var(--ink); background: var(--surface-2); }
.pills a.on { background: var(--primary); color: var(--on-primary); font-weight: 600; }

/* Embudo de pólizas en camino: segmentos proporcionales al dinero */
.funnel { display: flex; gap: 4px; height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-3); }
.funnel span { display: block; height: 100%; min-width: 4px; }
.funnel-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 16px; margin-top: 14px; }
.funnel-legend .it { display: flex; flex-direction: column; gap: 2px; padding-left: 10px; border-left: 3px solid var(--line); }
.funnel-legend .it .n { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.funnel-legend .it .v { font-family: var(--serif); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.funnel-legend .it .c { font-size: 11.5px; color: var(--muted); }

/* Lista clasificada (agencias / productores) */
.rank-list { display: flex; flex-direction: column; }
.rank-row { display: grid; grid-template-columns: 34px 40px minmax(0,1fr) auto auto auto; gap: 16px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--glass-line); }
.rank-row .go { display: flex; }
@media (max-width: 900px) { .rank-row { grid-template-columns: 34px 40px 1fr; } .rank-row .amt { grid-column: 3; text-align: left; } .rank-row .go { grid-column: 3; } }
.rank-row:first-child { border-top: 0; }
.rank-row .n { font-family: var(--mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rank-row .who b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.rank-row .who .desc { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.rank-row .who .badge { vertical-align: middle; }
.rank-row .amt { text-align: right; }
.rank-row .amt b { display: block; font-family: var(--serif); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.rank-row .amt span { display: block; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rank-row .amt.gold b { color: var(--gold); }
.avatar-i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--on-primary); background: linear-gradient(140deg, var(--gold), var(--primary)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }

/* Feed de actividad: tarjetas apiladas tipo notificación */
.feed { display: flex; flex-direction: column; gap: 10px; }
.feed .ev { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r); background: var(--glass-bg); border: 1px solid var(--glass-line); backdrop-filter: blur(14px); }
.feed .ev .avatar-i { width: 34px; height: 34px; font-size: 11.5px; }
.feed .ev .t { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ok); display: flex; align-items: center; gap: 6px; }
.feed .ev .t::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.feed .ev b { display: block; font-size: 13.5px; color: var(--ink); }
.feed .ev small { display: block; font-size: 11.5px; color: var(--muted); }
.feed .ev .amt { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; text-align: right; }
.feed .ev .when { font-size: 11px; color: var(--muted); text-align: right; }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-bottom: 18px; }
.grid-main { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .grid-3 { grid-template-columns: 1fr; } .grid-main { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .meter .fill { transition: none; } }

/* ═══════════════ Aurora, segunda pasada: lo que hace que parezca «de ahora» ═══════════════
   Tres cosas, todas cosméticas y todas acotadas al <body class="atmos">: los números
   grandes dejan la serifa (dice «libro de contabilidad») por la sans geométrica; la luz
   del fondo ocupa un tercio de la pantalla y se ve a través del cristal; y hay vida — un
   punto que late, bordes que captan luz, cifras con halo. Nada de esto toca otra pantalla. */

/* la luz: grande, cálida a la derecha, fría a la izquierda, con un haz diagonal */
body.atmos::before {
  inset: -15%;
  background:
    radial-gradient(70% 62% at 88% 18%, var(--glow-b) 0%, transparent 62%),
    radial-gradient(64% 58% at 6% 4%,   var(--glow-a) 0%, transparent 64%),
    radial-gradient(50% 40% at 58% 104%, var(--glow-c) 0%, transparent 66%),
    linear-gradient(108deg, transparent 34%, rgba(255,255,255,.07) 47%, transparent 58%);
  filter: blur(40px) saturate(1.25);
}
/* un velo oscuro arriba para que la barra superior y los títulos tengan profundidad */
body.atmos::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, transparent 28%, transparent 78%, rgba(0,0,0,.22) 100%);
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) body.atmos::after { background: none; } }
:root[data-theme="light"] body.atmos::after { background: none; }

/* cristal más evidente: degradado de luz, borde que la capta, brillo superior */
body.atmos .aurora .card, body.atmos .aurora .stat, body.atmos .aurora .copilot,
body.atmos .aurora .table-wrap, body.atmos .feed .ev, body.atmos .pills {
  background: linear-gradient(160deg, var(--glass-hi) 0%, var(--glass-bg) 38%, var(--glass-bg) 100%);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 18px 48px -28px rgba(0,0,0,.55);
  backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3);
}
body.atmos .aurora .card { border-radius: 14px; }
body.atmos .aurora .card:hover, body.atmos .feed .ev:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--glass-line)); }

/* los números grandes: sans geométrica, apretada, tabular — y con halo el dinero */
body.atmos .money .big, body.atmos .rank-row .amt b, body.atmos .funnel-legend .it .v,
body.atmos .feed .ev .amt, body.atmos .aurora .stat .v {
  font-family: var(--sans); font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums;
}
body.atmos .money .big { font-size: 36px; }
body.atmos .rank-row .amt b { font-size: 22px; }
body.atmos .money .big[style*="--gold"], body.atmos .rank-row .amt.gold b, body.atmos .feed .ev .amt {
  text-shadow: 0 0 22px color-mix(in srgb, var(--gold) 45%, transparent);
}
body.atmos .page-head h2 { font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
body.atmos .eyebrow, body.atmos .money .k, body.atmos .stat .k, body.atmos .funnel-legend .it .n {
  letter-spacing: .18em; color: color-mix(in srgb, var(--primary) 55%, var(--muted));
}

/* medidores con luz propia */
body.atmos .meter .track { background: rgba(127,127,127,.18); height: 8px; }
body.atmos .meter .fill { box-shadow: 0 0 14px color-mix(in srgb, var(--primary) 55%, transparent); }
body.atmos .meter.gold .fill { box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 55%, transparent); }
body.atmos .meter.ok .fill { box-shadow: 0 0 14px color-mix(in srgb, var(--ok) 50%, transparent); }
body.atmos .funnel { height: 14px; box-shadow: inset 0 1px 0 var(--glass-hi); }
body.atmos .funnel span { box-shadow: 0 0 12px rgba(255,255,255,.08) inset; }

/* píldoras: relieve y halo en la activa */
body.atmos .pills a.on { box-shadow: 0 0 18px color-mix(in srgb, var(--primary) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.18); }

/* avatares con anillo de luz; el número del ranking en acento */
body.atmos .avatar-i { box-shadow: 0 0 0 2px var(--glass-line), 0 0 22px color-mix(in srgb, var(--primary) 40%, transparent); }
body.atmos .rank-row .n { color: var(--primary); font-weight: 600; }
body.atmos .rank-row:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }

/* vida: el punto de «póliza nueva» late, y los puntos de aviso brillan */
@keyframes latido { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); } 60% { box-shadow: 0 0 0 7px transparent; } }
body.atmos .feed .ev .t::before { animation: latido 2.2s ease-out infinite; }
body.atmos .aurora [style*="var(--warn)"] > span:first-child,
body.atmos .aurora [style*="var(--danger)"] > span:first-child { text-shadow: 0 0 10px currentColor; }
@media (prefers-reduced-motion: reduce) { body.atmos .feed .ev .t::before { animation: none; } }

/* el cascarón: marca con halo, elemento activo del menú como píldora iluminada */
body.atmos .brand .mark { box-shadow: 0 0 22px color-mix(in srgb, var(--primary) 70%, transparent); }
body.atmos .nav a.on {
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 26%, transparent), color-mix(in srgb, var(--primary) 8%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: 999px;
}
body.atmos .topbar h1 { letter-spacing: -.02em; }
body.atmos .topbar .btn-primary { box-shadow: 0 0 18px color-mix(in srgb, var(--primary) 55%, transparent); }

/* ═══════════════ La central: héroe, cuidar, red, hitos, muro ═══════════════
   Un solo bloque para todo lo que la primera pantalla necesita y el resto del
   sistema no. Los colores salen de los mismos tokens; aquí solo hay forma. */
.hero {
  position: relative; overflow: hidden; padding: 26px 28px 22px; margin-bottom: 18px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: end;
}
.hero .state { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.hero .state i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); animation: latido 2.4s ease-in-out infinite; }
.hero h1 { font-family: var(--serif); font-size: clamp(24px, 3.2vw, 38px); font-weight: 600; letter-spacing: -.025em;
  line-height: 1.12; margin: 0 0 10px; color: var(--ink); text-wrap: balance; }
.hero h1 b { color: var(--gold); font-weight: 600; white-space: nowrap; }
.hero p { font-size: 13.5px; color: var(--muted); margin: 0; max-width: 58ch; line-height: 1.5; }
.hero .side { display: grid; gap: 10px; }
.hero .side .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; color: var(--muted);
  padding: 8px 0; border-bottom: 1px solid var(--glass-line); }
.hero .side .row:last-child { border-bottom: 0; }
.hero .side .row b { font-family: var(--serif); font-size: 19px; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.hero .side .row b.gold { color: var(--gold); }
.hero .side .row b.ok { color: var(--ok); }
.hero .cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; padding: 20px 18px; } }

.grid-central { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; align-items: start; }
.grid-central > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1020px) { .grid-central { grid-template-columns: 1fr; } }

.kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.kicker .spacer { flex: 1; }
.kicker a { font-family: var(--sans); letter-spacing: 0; text-transform: none; font-size: 12px; }

/* tengo que cuidar: cada aviso es una fila con su dinero y su puerta */
.care { display: grid; gap: 8px; }
.care .it { display: grid; grid-template-columns: 8px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2) 60%, transparent); border: 1px solid var(--glass-line); text-decoration: none; color: inherit; transition: border-color .2s; }
.care .it:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--glass-line)); }
.care .it i { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 10px var(--warn); }
.care .it.danger i { background: var(--danger); box-shadow: 0 0 10px var(--danger); }
.care .it.info i { background: var(--info); box-shadow: 0 0 8px var(--info); }
.care .it span { font-size: 13.5px; color: var(--ink); line-height: 1.4; }
.care .it b { font-family: var(--serif); font-size: 16px; letter-spacing: -.02em; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.care .clear { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--ok); padding: 8px 2px; }

/* puedo ganar: número grande y su desglose */
.could .big { font-family: var(--serif); font-size: 34px; font-weight: 600; letter-spacing: -.03em; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.could .big small { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.could .stages { display: grid; gap: 6px; margin-top: 14px; }
.could .stages .row { display: grid; grid-template-columns: 1fr auto; gap: 10px; font-size: 12.5px; color: var(--muted); align-items: center; }
.could .stages .row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.could .stages .bar { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; grid-column: 1 / -1; }
.could .stages .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--gold)); }

/* tu red: la proyección con pastillas N */
.proj .n-pills { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--glass-line); }
.proj .n-pills a { padding: 4px 11px; border-radius: 999px; font-size: 12.5px; color: var(--muted); text-decoration: none; }
.proj .n-pills a.on { background: var(--primary); color: #fff; }
.proj .range { font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: -.025em; color: var(--gold); margin: 10px 0 2px; font-variant-numeric: tabular-nums; }
.proj .why { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.invite { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; margin-top: 12px; }
.invite input { font-family: var(--mono); font-size: 12px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--glass-line); background: var(--surface-2); color: var(--ink); min-width: 0; }
@media (max-width: 560px) { .invite { grid-template-columns: 1fr; } }
.cands { display: grid; gap: 6px; margin-top: 10px; }
.cands .c { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.cands .c .stage { font-size: 11px; color: var(--muted); }
.cands .c .d { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.cands .c .d.late { color: var(--warn); }

/* hitos: tres puntos y el tramo del rango */
.hitos { display: grid; gap: 8px; }
.hitos .h { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--muted); }
.hitos .h i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line); display: inline-grid; place-items: center; font-size: 11px; font-style: normal; flex: none; }
.hitos .h.done { color: var(--ink); }
.hitos .h.done i { background: var(--ok); border-color: var(--ok); color: #fff; }
.hitos .h.now { color: var(--ink); font-weight: 600; }
.hitos .h.now i { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.hitos .req { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--glass-line); }
.hitos .req .r { font-size: 12.5px; color: var(--muted); display: grid; gap: 4px; }
.hitos .req .r .track { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.hitos .req .r .track i { display: block; height: 100%; background: var(--primary); border-radius: 2px; }
.hitos .req .r .track.ok i { background: var(--ok); }

/* el muro: eventos de la agencia sin clientes */
.wall { display: grid; gap: 0; }
.wall .w { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 9px 2px; border-bottom: 1px solid var(--glass-line); font-size: 13px; color: var(--ink); }
.wall .w:last-child { border-bottom: 0; }
.wall .w .avatar-i { width: 28px; height: 28px; font-size: 11px; }
.wall .w small { display: block; color: var(--muted); font-size: 11.5px; }
.wall .w .hace { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.wall .w .amt { font-family: var(--serif); color: var(--gold); font-size: 15px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* la oficina: a quién llamar y el embudo de reclutas */
.callist { display: grid; gap: 6px; }
.callist .p { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--glass-line); text-decoration: none; color: inherit; }
.callist .p:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--glass-line)); }
.callist .p .sc { font-family: var(--mono); font-size: 12px; padding: 3px 8px; border-radius: 999px; }
.callist .p .sc.risk { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.callist .p .sc.watch { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.callist .p .sc.healthy { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.rfunnel { display: grid; gap: 7px; }
.rfunnel .s { display: grid; grid-template-columns: 110px 1fr 40px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--muted); }
.rfunnel .s .track { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.rfunnel .s .track i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--gold)); border-radius: 4px; }
.rfunnel .s b { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }

/* con atmósfera: cristal también para las filas nuevas */
body.atmos .care .it, body.atmos .callist .p, body.atmos .invite input, body.atmos .proj .n-pills {
  background: var(--glass-bg); border-color: var(--glass-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
body.atmos .hero { border-radius: 16px; }
body.atmos .hero::after { content: ""; position: absolute; inset: auto -10% -40% auto; width: 46%; height: 120%;
  background: radial-gradient(closest-side, var(--glow-b), transparent 70%); opacity: .55; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hero .state i { animation: none; } }

/* ═══════════════ Atmósfera: el cristal en toda tarjeta, en el tema de cada quien ═══════════════
   Antes estas pantallas se forzaban a oscuro aunque el usuario tuviera el tema claro, y
   al pasar de Leads (atmósfera) a Mi día o Licencias (planas) la app «cambiaba de tema»
   sola. Ahora siguen la elección de la persona: los tokens de cristal y de luz ya
   existen en las tres variantes (ver arriba), así que en claro el cristal es blanco y la
   luz de fondo es suave, y en oscuro queda exactamente como estaba. */
body.atmos { background: var(--bg); color: var(--ink); }
/* El velo oscuro de arriba y abajo, solo en oscuro: en claro ensuciaría la página. */
:root[data-theme="dark"] body.atmos::after {
  background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, transparent 28%, transparent 78%, rgba(0,0,0,.22) 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.atmos::after {
    background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, transparent 28%, transparent 78%, rgba(0,0,0,.22) 100%);
  }
}
body.atmos .card, body.atmos .stat, body.atmos .table-wrap, body.atmos .copilot {
  background: linear-gradient(160deg, var(--glass-hi) 0%, transparent 38%), var(--glass-bg);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 var(--glass-hi) inset, var(--shadow);
}
body.atmos .table-wrap thead th { background: transparent; }
body.atmos .input, body.atmos select.input, body.atmos textarea.input { background: color-mix(in srgb, var(--surface) 72%, transparent); border-color: var(--glass-line); color: var(--ink); }

/* ── barra inferior en móvil: las cinco puertas ── */
.mobile-bar { display: none; }
@media (max-width: 860px) {
  .mobile-bar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--surface); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  body.atmos .mobile-bar { background: color-mix(in srgb, var(--surface) 82%, transparent); border-top-color: var(--glass-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .mobile-bar a { display: grid; justify-items: center; gap: 3px; font-size: 10.5px; color: var(--muted); text-decoration: none; padding: 4px 2px; border-radius: 8px; }
  .mobile-bar a.on { color: var(--primary); }
  .mobile-bar a svg { width: 20px; height: 20px; }
  .content { padding-bottom: 76px; }
}
/* iconos del menú: trazo fino, heredan el color */
.nav a .ic svg, .mobile-bar a svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; }
.nav a .ic { display: inline-grid; place-items: center; width: 18px; }

/* chispas: seis meses en 84 px, el último punto marcado; verde si sube, rojo si baja */
.spark-cell { display: grid; place-items: center; color: var(--muted); }
.spark.up { color: var(--ok); } .spark.down { color: var(--danger); }
.rank-list.with-spark .rank-row { grid-template-columns: 34px 40px minmax(0,1fr) auto auto auto auto; }
@media (max-width: 900px) { .spark-cell { display: none; } .rank-list.with-spark .rank-row { grid-template-columns: 34px 40px 1fr; } }

/* ═══════════════ La pirámide: por qué reclutar, dibujado ═══════════════
   Tú arriba y tus líneas debajo, cada una con su gente y su dinero. Es el
   dibujo que todo el mundo reconoce, y por eso funciona; la nota de abajo
   explica en una frase por qué esto no es una pirámide de las otras. */
.piram-head { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 18px; }
.piram-head > div:first-child { flex: 1; min-width: 260px; }
.piram-big { font-family: var(--serif); font-size: clamp(19px, 2.2vw, 27px); font-weight: 600; letter-spacing: -.02em;
  line-height: 1.2; margin: 0; color: var(--ink); text-wrap: balance; }
.piram-big b, .piram .money-hi { color: var(--gold); white-space: nowrap; }
.piram-sub { font-size: 13px; color: var(--muted); margin: 6px 0 0; max-width: 62ch; line-height: 1.5; }

.piram-tree { display: grid; gap: 10px; }
.piram-tree .fila { display: grid; grid-template-columns: minmax(0, 1fr) 190px 150px; gap: 14px; align-items: center;
  padding: 10px 12px; border-radius: 11px; border: 1px solid var(--glass-line);
  background: color-mix(in srgb, var(--surface-2) 45%, transparent); position: relative; }
.piram-tree .fila.yo { background: color-mix(in srgb, var(--primary) 12%, transparent); border-color: color-mix(in srgb, var(--primary) 35%, var(--glass-line)); }
/* el hilo que baja de una línea a la siguiente */
.piram-tree .fila:not(:last-child)::after { content: ""; position: absolute; left: 26px; bottom: -10px; width: 1px; height: 10px; background: var(--glass-line); }

.piram-tree .quienes { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-width: 0; }
.piram-tree .p { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--primary) 26%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent); }
.piram-tree .p.tu { width: 28px; height: 28px; background: var(--primary); border-color: var(--primary);
  color: #fff; font-size: 12px; font-weight: 600; font-family: var(--sans); }
.piram-tree .mas { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-left: 3px; }

.piram-tree .etiqueta b { display: block; font-size: 13px; color: var(--ink); }
.piram-tree .etiqueta span { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.piram-tree .plata { text-align: right; }
.piram-tree .plata b { display: block; font-family: var(--serif); font-size: 16px; letter-spacing: -.02em;
  color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.piram-tree .plata b.nada { color: var(--muted); }
.piram-tree .plata span { display: block; font-size: 11px; color: var(--muted); }

.piram-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--glass-line); }
.piram-foot p { font-size: 12.5px; color: var(--muted); margin: 0 0 6px; line-height: 1.55; max-width: 86ch; }
.piram-foot p strong { color: var(--ink); }
.piram-foot .fuente { font-size: 11.5px; }

@media (max-width: 760px) {
  .piram-tree .fila { grid-template-columns: 1fr auto; }
  .piram-tree .quienes { grid-column: 1 / -1; }
  .piram-tree .plata { text-align: left; }
  .piram-tree .fila:not(:last-child)::after { display: none; }
}

/* ═══════════════ La marca: Domani ═══════════════
   El logotipo va en línea y pintado con `currentColor`, así que hereda el
   color de donde esté: tinta en claro, blanco sobre el azul del acceso. Una
   sola copia del vector para los dos temas. */
.brand .mark svg { width: 62%; height: auto; display: block; color: #fff; }
.brand .name { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.brand .name > svg { height: 17px; width: auto; display: block; color: var(--ink); }
.brand .name small { margin: 0; }
.brand-word { display: inline-flex; align-items: center; }
.brand-word svg { height: 100%; width: auto; display: block; color: inherit; }
.auth-aside .mark { display: grid; place-items: center; border-radius: 9px; }
.auth-aside .mark svg { width: 60%; height: auto; color: #fff; }
/* En la atmósfera la marca se pinta clara, como el resto de la barra. */
body.atmos .brand .name > svg { color: var(--ink); }

/* ═══════════════ El tablero de leads: arrastrar ═══════════════
   Solo las tarjetas que esta persona podría mover con el desplegable llevan
   la clase `.drag`; el resto ni se levanta. */
.lead-card.drag { cursor: grab; transition: box-shadow .15s, transform .15s, opacity .15s; }
.lead-card.drag:active { cursor: grabbing; }
.lead-card.drag:hover { box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); }
.lead-card.drag:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.lead-card.dragging { opacity: .45; }
.lead-card.moviendo { opacity: .6; }              /* mientras el servidor contesta */
.lead-card.llego { animation: llego .9s ease-out; }
@keyframes llego {
  0%   { box-shadow: 0 0 0 2px var(--primary); }
  100% { box-shadow: 0 0 0 2px transparent; }
}
/* La columna bajo el cursor: un hueco evidente, no un borde tímido. */
[data-drop].sobre {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  outline: 2px dashed color-mix(in srgb, var(--primary) 55%, transparent);
  outline-offset: -4px; border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .lead-card.drag, .lead-card.llego { transition: none; animation: none; }
}

/* ═══════════════ Cotizar: el cotizador de InsuranceToolkits incrustado ═══════════════
   Es de otro dominio: ni nuestro CSS entra dentro ni podemos leer su alto (no lo
   publican). Dos trucos, y solo esos:

   · El COLOR se consigue con un filtro sobre el iframe entero: invertir la
     luminosidad y devolver el tono a su sitio. El blanco pasa a casi negro, el
     texto oscuro a claro, y los colores de marca (el dorado del botón, el morado
     del selector) conservan su tono. Es una aproximación, no un tema de verdad;
     pero deja de verse una caja blanca pegada en una página oscura.
   · El ALTO no se puede medir, así que se le da de sobra: el formulario más una
     tabla de resultados larga caben, y como el fondo ya no es blanco el espacio
     que sobre es página oscura, invisible. Una sola barra de desplazamiento, la
     de la página. Si algún día publican su alto, esto se cambia por un mensaje. */
.quote-frame { padding: 0; overflow: hidden; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; }
/* La cabecera con el logo de la IMO (NBG) mide 84 px y no se puede ocultar
   desde fuera —es de otro dominio—, pero sí RECORTAR: el iframe se desplaza
   hacia arriba esos píxeles dentro de una caja que oculta lo que sobra. El
   título del cotizador empieza a 108 px, así que 88 px de recorte lo dejan
   entero. Si su cabecera cambia de tamaño, se toca solo esta variable. */
/* Por abajo se recorta también: su botón de chat va fijo en la esquina inferior
   derecha de SU ventana, así que quitar los últimos 96 px del iframe lo deja
   fuera de la vista, esté donde esté el scroll interno.

   El alto no puede ser automático —no publican su tamaño y desde fuera no se
   puede medir—, así que se hace manual y cómodo: un alto por defecto que
   cubre el formulario y las primeras filas, el marco se estira arrastrando su
   esquina (resize) y hay botones ＋/− que recuerdan la preferencia. */
.quote-frame { --recorte: 88px; --recorte-abajo: 96px; height: 1120px; min-height: 640px; max-height: 3200px; resize: vertical; }
.quote-frame iframe {
  display: block; width: 100%; border: 0;
  height: calc(100% + var(--recorte) + var(--recorte-abajo));
  margin-top: calc(-1 * var(--recorte));
  background: transparent; color-scheme: dark;
  filter: invert(.93) hue-rotate(180deg) contrast(.95) saturate(1.05);
  border-radius: 12px;
}
.quote-tools { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.quote-tools .btn { padding: 3px 10px; font-size: 12px; }

/* mientras la app de InsuranceToolkits arranca dentro del iframe, un pulso; se quita al cargar */
.quote-frame { position: relative; }
.quote-loading { position: absolute; inset: 0 0 auto 0; padding: 60px 0; text-align: center; font-size: 13px; color: var(--muted);
  animation: latido 1.6s ease-in-out infinite; pointer-events: none; }
.quote-loading .spark { color: var(--primary); margin-right: 6px; }
.quote-frame.cargado .quote-loading { display: none; }

/* ═══════════════ el asistente ✦ de todas las páginas ═══════════════ */
.asst-fab { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 13.5px;
  background: var(--primary); color: var(--on-primary, #fff); box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--primary) 60%, transparent); }
.asst-fab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.asst-panel { position: fixed; right: 20px; bottom: 20px; z-index: 61; width: min(420px, calc(100vw - 32px)); height: min(620px, calc(100vh - 40px));
  display: flex; flex-direction: column; background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-lg, 0 10px 34px rgba(0,0,0,.35)); overflow: hidden; }
.asst-panel[hidden] { display: none; }
.asst-head { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.asst-head .btn { padding: 3px 8px; }
.asst-msgs { flex: 1; overflow-y: auto; padding: 12px; display: grid; gap: 10px; align-content: start; }
.asst-msg { font-size: 13.5px; line-height: 1.5; padding: 9px 11px; border-radius: 10px; max-width: 92%; word-break: break-word; }
.asst-msg.user { justify-self: end; background: var(--primary); color: var(--on-primary, #fff); }
.asst-msg.assistant { justify-self: start; background: var(--surface-2); }
.asst-msg.assistant a:not(.btn) { color: var(--primary); font-weight: 500; }
.asst-msg .btn { margin-top: 6px; display: inline-flex; }
.asst-msg.wait { color: var(--muted); font-style: italic; }
.asst-list { flex: 1; overflow-y: auto; padding: 8px; }
.asst-list[hidden] { display: none; }
.asst-list button { display: block; width: 100%; text-align: left; font: inherit; font-size: 13px; background: none; border: 0;
  border-bottom: 1px solid var(--line); padding: 9px 6px; color: var(--ink); cursor: pointer; }
.asst-list button small { display: block; color: var(--muted); font-size: 11px; }
.asst-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px; border-top: 1px solid var(--line); }
.asst-form textarea { flex: 1; resize: none; font-size: 13.5px; }
@media (max-width: 860px) { .asst-fab { bottom: 84px; right: 14px; } .asst-fab span { display: none; }
  .asst-panel { right: 8px; left: 8px; width: auto; bottom: 8px; height: calc(100vh - 16px); } }

/* ── estado de la llamada en vivo ── */
.call-live { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 11px 14px; border-radius: 10px;
  background: var(--primary-100); color: var(--ink); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); font-size: 13.5px; }
.call-live .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); animation: latido 1.4s ease-in-out infinite; flex: none; }
.call-live.ok { background: var(--ok-100); border-color: color-mix(in srgb, var(--ok) 35%, transparent); } .call-live.ok .dot { background: var(--ok); animation: none; }
.call-live.bad { background: var(--warn-100); border-color: color-mix(in srgb, var(--warn) 35%, transparent); } .call-live.bad .dot { background: var(--warn); animation: none; }
.call-live .spacer { flex: 1; }
/* marcador en cadena: la fila que está sonando, resaltada */
[data-pd-item][data-status="calling"] { background: var(--primary-100); }
[data-pd-item][data-status="answered"] [data-pd-label] { background: var(--ok-100); color: var(--ok); }

/* ── Underwriting ── */
.uw-grid { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .uw-grid { grid-template-columns: 1fr; } }
.uw-h { font-size: 14px; margin: 0 0 10px; color: var(--ink); }
.uw-sub { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.uw-check { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.uw-list { max-height: 420px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.uw-row { padding: 6px 8px; border-radius: 8px; }
.uw-row.on { background: var(--primary-100); }
.uw-row[hidden] { display: none; }
.uw-cond { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink); cursor: pointer; line-height: 1.35; }
.uw-cond input { margin-top: 2px; }
.uw-yrs { display: none; gap: 10px; align-items: center; margin: 6px 0 2px 24px; }
.uw-row.on .uw-yrs, .uw-row:has(input[name$="[on]"]:checked) .uw-yrs { display: flex; }
.uw-yrs .input { width: 110px; padding: 5px 8px; font-size: 12.5px; }
.uw-summary { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.uw-gh { font-size: 14.5px; margin: 16px 0 6px; }
.uw-gh-ok { color: var(--ok); } .uw-gh-review { color: var(--warn); } .uw-gh-unknown { color: var(--muted); }
.uw-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.uw-card { padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; border-left: 3px solid var(--line); }
.uw-card.uw-ok { border-left-color: var(--ok); } .uw-card.uw-review { border-left-color: var(--warn); }
.uw-card-top { display: flex; gap: 8px; align-items: flex-start; }
.uw-carrier { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.uw-prod { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3; overflow-wrap: anywhere; }
.uw-cls { white-space: nowrap; }
.uw-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: var(--muted); }
.uw-note { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; background: var(--surface-2); border-radius: 8px; padding: 6px 8px; }
.uw-note.warn { color: var(--warn); background: var(--warn-100); }
.uw-why { font-size: 12px; color: var(--ink-2); } .uw-why summary { cursor: pointer; color: var(--primary); }
.uw-why div { margin-top: 5px; line-height: 1.45; }
.uw-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.uw-nofit { margin-top: 16px; } .uw-nofit summary { cursor: pointer; font-size: 13.5px; color: var(--ink); }
.uw-nofit ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); line-height: 1.7; }
.uw-recent { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink); text-decoration: none; }
.uw-recent:first-of-type { border-top: 0; }
.uw-recent:hover { color: var(--primary); }
.uw-cell { border-top: 1px solid var(--line); padding: 10px 0; }
.uw-cell:first-child { border-top: 0; }
.uw-cell-raw { font-size: 12.5px; color: var(--ink); white-space: pre-wrap; }
.uw-cell textarea { width: 100%; min-height: 54px; font-size: 12.5px; }
.uw-tag { font-size: 10.5px; padding: 1px 6px; border-radius: 6px; background: var(--warn-100); color: var(--warn); }

/* ── Ficha única de la persona ── */
.pf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .pf-grid { grid-template-columns: 1fr; } }
.pf-bar { position: sticky; top: 8px; z-index: 5; display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  padding: 8px; margin: 0 0 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.pf-act { display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; }
.pf-act:hover { border-color: var(--primary); color: var(--primary); }
.pf-act:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pf-act.pf-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.pf-act.pf-primary:hover { color: var(--on-primary); filter: brightness(1.08); }
.pf-act.pf-accent { border-color: var(--primary); color: var(--primary); }
.pf-act.pf-off { opacity: .45; cursor: not-allowed; }
.pf-act.on { border-color: var(--primary); color: var(--primary); background: var(--primary-100); }
@media (max-width: 640px) { .pf-act span { display: none; } .pf-act { padding: 8px 11px; font-size: 15px; } }
.pf-panels { display: grid; gap: 10px; }
.pf-panel:not([open]) { display: none; }
.pf-panel { margin-bottom: 12px; border-left: 3px solid var(--primary); }
.pf-panel > summary { cursor: pointer; font-size: 14px; font-weight: 600; margin-bottom: 10px; color: var(--ink); list-style: none; }
.pf-panel > summary::after { content: '×'; float: right; color: var(--muted); font-weight: 400; }
.pf-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 760px) { .pf-steps { grid-template-columns: 1fr 1fr; } }
.pf-step { display: flex; gap: 9px; align-items: flex-start; padding: 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid transparent; min-width: 0; }
.pf-step.now { border-color: var(--primary); background: var(--primary-100); }
.pf-dot { flex: 0 0 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600;
  background: var(--surface-3); color: var(--ink-2); }
.pf-step.done .pf-dot { background: var(--ok); color: #fff; }
.pf-step.now .pf-dot { background: var(--primary); color: var(--on-primary); }
.pf-step-body { min-width: 0; display: grid; gap: 4px; }
.pf-step-t { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.pf-step-x { font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
.pf-ev { display: flex; gap: 10px; align-items: flex-start; }
.pf-ev[hidden] { display: none; }
.pf-ev-i { color: var(--muted); font-size: 13px; width: 16px; flex: 0 0 16px; text-align: center; }
.pf-filter a { font-size: 12px; padding: 4px 10px; }

/* ── Espacios: separador del menú y pestañas del espacio ── */
.nav-sep { height: 1px; background: var(--line-soft); margin: 10px 10px; }
.space-tabs { display: flex; gap: 2px; overflow-x: auto; margin: -4px 0 18px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.space-tabs::-webkit-scrollbar { display: none; }
.space-tabs a { padding: 9px 13px; font-size: 13px; font-weight: 500; color: var(--ink-2); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 6px; align-items: center; }
.space-tabs a:hover { color: var(--ink); }
.space-tabs a.on { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.space-tabs a:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 6px; }

/* ── Ctrl+K ── */
.cmdk-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; min-width: 200px; }
.cmdk-trigger:hover { border-color: var(--primary); color: var(--ink); }
.cmdk-trigger kbd, .cmdk-foot kbd { margin-left: auto; font-family: var(--mono); font-size: 10.5px; padding: 1px 6px; border-radius: 5px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
@media (max-width: 860px) { .cmdk-trigger { min-width: 0; } .cmdk-trigger-t, .cmdk-trigger kbd { display: none; } }
.cmdk { position: fixed; inset: 0; z-index: 90; background: rgba(10, 14, 22, .45); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.cmdk[hidden] { display: none; }
.cmdk-box { width: min(620px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.28); overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; }
.cmdk-in { border: 0; border-bottom: 1px solid var(--line); padding: 16px 18px; font: inherit; font-size: 16px; background: transparent; color: var(--ink); outline: none; }
.cmdk-res { overflow-y: auto; padding: 6px; }
.cmdk-g { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 4px; }
.cmdk-it { display: flex; gap: 11px; align-items: center; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.cmdk-it.sel { background: var(--primary-100); }
.cmdk-it:hover { text-decoration: none; }
.cmdk-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); font-size: 13px; flex: 0 0 26px; }
.cmdk-it.sel .cmdk-ic { background: var(--primary); color: var(--on-primary); }
.cmdk-tx { display: grid; min-width: 0; }
.cmdk-tx b { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-tx small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-empty { padding: 22px; text-align: center; color: var(--muted); font-size: 13px; }
.cmdk-foot { border-top: 1px solid var(--line); padding: 8px 14px; font-size: 11.5px; color: var(--muted); }
body.cmdk-on { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { .cmdk-box { animation: cmdk-in .14s ease-out; } }
@keyframes cmdk-in { from { transform: translateY(-6px); opacity: .6; } to { transform: none; opacity: 1; } }

/* ── Asistente: tarjetas de acción (Confirmar / Cancelar) ── */
.asst-act { margin: 8px 0 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--primary); background: var(--surface); display: grid; gap: 6px; }
.asst-act[data-status="done"] { border-color: var(--ok); }
.asst-act[data-status="failed"] { border-color: var(--danger); }
.asst-act[data-status="canceled"], .asst-act[data-status="expired"] { border-color: var(--line); opacity: .75; }
.asst-act-t { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; color: var(--ink); }
.asst-act-ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--primary-100); color: var(--primary); flex: 0 0 24px; }
.asst-act-d { font-size: 12.5px; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.asst-act-b { display: flex; gap: 6px; }
.asst-act-r { font-size: 12px; color: var(--muted); }
.asst-act[data-status="done"] .asst-act-r { color: var(--ok); }
.asst-act[data-status="failed"] .asst-act-r { color: var(--danger); }

/* ── Asistente a pantalla completa (antes, el Copiloto) ── */
.asst-panel.asst-embedded { position: static; width: 100%; height: min(72vh, 760px); box-shadow: none; z-index: auto; }
.asst-panel.asst-embedded [data-asst-close] { display: none; }
.asst-starters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.asst-starters button { display: inline-flex; gap: 7px; align-items: center; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.asst-starters button:hover { border-color: var(--primary); color: var(--primary); }

/* ── Barra lateral por espacios: grupos con sus pantallas, plegables ── */
.nav-grp { margin-bottom: 4px; }
.nav-grp-h { display: flex; align-items: center; width: 100%; gap: 6px; padding: 12px 10px 5px; border: 0; background: none; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: left; }
.nav-grp-h:hover { color: var(--ink); }
.nav-grp-h:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 6px; }
.nav-grp.activo .nav-grp-h { color: var(--primary); }
.nav-grp-chev { margin-left: auto; transition: transform .15s; font-size: 11px; }
.nav-grp.plegado .nav-grp-chev { transform: rotate(-90deg); }
.nav-grp.plegado .nav-grp-b { display: none; }
.nav-grp-solo { margin-top: 8px; }
/* Con barra lateral, las pestañas del espacio sobran: quedan para el móvil. */
@media (min-width: 861px) { .space-tabs { display: none; } }

/* La venta por pasos: el botón cabe en su paso */
.pf-step-body .btn { white-space: normal; text-align: left; line-height: 1.25; padding: 5px 9px; font-size: 11.5px; max-width: 100%; }
/* El asistente a pantalla completa cabe en la pantalla, con la caja de escribir a la vista */
.asst-panel.asst-embedded { height: max(420px, calc(100vh - 300px)); }

/* ── Underwriting: preguntas, «puedes venderla» y fecha de mejora ── */
.uw-q { display: grid; gap: 6px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; background: var(--warn-100); border-radius: 8px; padding: 7px 9px; }
.uw-q-b { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.uw-sell { font-size: 11.5px; font-weight: 600; }
.uw-sell-ok { color: var(--ok); }
.uw-sell-no_appt, .uw-sell-no_license { color: var(--warn); }
.uw-better { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--primary); background: var(--primary-100); border-radius: 8px; padding: 6px 9px; }
.uw-better-i { color: var(--primary); font-size: 12px; }
.uw-meds { margin-bottom: 12px; }
.uw-med { font-size: 13px; padding: 6px 0; border-top: 1px solid var(--line); }
.uw-med:first-of-type { border-top: 0; }
.uw-inv { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.uw-inv > summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.uw-inv-b { display: grid; gap: 5px; font-size: 12.5px; color: var(--ink-2); margin-top: 8px; }

/* ── Base interna: enlaces editables de cada producto ── */
.uw-links-edit { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.uw-link-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0 0 6px; }