/* Estilos de la aplicación. Los valores salen de css/tokens.css (ver css/TOKENS.md). */

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: var(--w-regular) var(--text-md)/var(--lh-body) var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-head); margin: 0; letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); }
h1 { font-size: var(--text-xl); font-weight: var(--w-bold); }
h2 { font-size: var(--text-lg); font-weight: var(--w-semibold); }
h3 { font-size: var(--text-md); font-weight: var(--w-semibold); }
p { margin: 0; }
a { color: var(--brand-ink); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: var(--text-xs); }
.num { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Foco visible (teclado) ---------- */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--brand-mark); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }
[contenteditable]:focus-visible { outline-offset: 4px; border-radius: var(--r-sm); }
/* Controles reales ocultos dentro de etiquetas: el anillo se dibuja en la etiqueta */
label.btn:has(input:focus-visible), .chip:has(input:focus-visible), .choice label:has(input:focus-visible) { outline: 2px solid var(--brand-mark); outline-offset: 2px; }
.skip { position: fixed; top: var(--sp-2); left: var(--sp-2); z-index: var(--z-toast); transform: translateY(-200%); }
.skip:focus-visible { transform: none; }

/* ---------- Layout ---------- */
.shell { --side-w: 256px; display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns var(--dur-base) var(--ease); }
.side {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: var(--sp-4) var(--sp-3) var(--sp-3);
}
.side-nav { flex: 1; min-height: 0; overflow-y: auto; margin: 0 calc(-1 * var(--sp-1)); padding: 0 var(--sp-1); scrollbar-width: thin; }
.side-scrim { display: none; }
.brandmark { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) var(--sp-2); margin-bottom: var(--sp-3); text-decoration: none; color: inherit; border-radius: var(--r-md); min-width: 0; }
.search-btn {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%; height: var(--h-control); padding: 0 var(--sp-2) 0 var(--sp-3); margin-bottom: var(--sp-2);
  border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); color: var(--muted);
  font: var(--w-medium) var(--text-sm) var(--font); cursor: pointer; text-align: left;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.search-btn:hover { border-color: var(--border-control); color: var(--text); }
.search-btn svg { width: var(--icon); height: var(--icon); flex: none; }
.search-btn .nl:first-of-type { flex: 1; }
kbd {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 var(--sp-1);
  font: var(--w-medium) var(--text-xs)/1 var(--font); color: var(--muted); white-space: nowrap;
  background: var(--surface); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--r-xs);
}
.logo {
  width: 40px; height: 40px; border-radius: var(--r-lg); flex: none; overflow: hidden;
  display: grid; place-items: center; background: var(--brand-solid); color: var(--on-brand);
  font: var(--w-bold) var(--text-lg) var(--font-head); letter-spacing: .02em;
}
.logo img { width: 100%; height: 100%; object-fit: cover; }
.brandmark .bn { font: var(--w-bold) var(--text-md)/var(--lh-tight) var(--font-head); }
.brandmark .bt { font-size: var(--text-xs); color: var(--muted); line-height: var(--lh-snug); }
.nav-group { margin-top: var(--sp-3); }
.nav-label { font-size: var(--text-xs); font-weight: var(--w-semibold); color: var(--faint); padding: var(--sp-1) var(--sp-3); }
.nav a {
  display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  color: var(--muted); text-decoration: none; font-weight: var(--w-medium);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.active { background: var(--brand-soft); color: var(--brand-ink); }
.nav a .nl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav a .count { margin-left: auto; font-size: var(--text-xs); background: var(--surface-2); color: var(--muted); border-radius: var(--r-full); padding: 0 var(--sp-2); font-variant-numeric: tabular-nums; }
.nav a.active .count { background: var(--surface); }
.nav svg { width: var(--icon-nav); height: var(--icon-nav); flex: none; }
.side-foot { padding: var(--sp-3) var(--sp-1) 0; margin-top: var(--sp-2); border-top: 1px solid var(--border); display: grid; gap: var(--sp-2); }
.foot-actions { display: grid; gap: var(--sp-2); }
.foot-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.collapse-btn { color: var(--faint); flex: none; }
.saved { font-size: var(--text-xs); color: var(--faint); display: flex; align-items: center; gap: var(--sp-2); min-height: 20px; }
.saved::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.saved[data-state="error"] { color: var(--warn); }
.saved[data-state="error"]::before { background: var(--warn); }

/* Barra contraída (escritorio): solo íconos; los nombres quedan para lectores de pantalla y en el globo */
@media (min-width: 861px) {
  .shell.is-collapsed { --side-w: 64px; }
  .is-collapsed .side { padding: var(--sp-4) var(--sp-2) var(--sp-3); }
  .is-collapsed .nl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .is-collapsed .brandmark { justify-content: center; padding: var(--sp-1) 0; }
  .is-collapsed .brandmark .logo { width: 36px; height: 36px; font-size: var(--text-sm); }
  .is-collapsed .search-btn { justify-content: center; padding: 0; }
  .is-collapsed .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .is-collapsed .nav-group + .nav-group { border-top: 1px solid var(--border); padding-top: var(--sp-2); margin-top: var(--sp-2); }
  .is-collapsed .nav a { justify-content: center; padding: var(--sp-2) 0; position: relative; }
  .is-collapsed .nav a .count { position: absolute; top: 4px; right: 8px; width: 8px; height: 8px; padding: 0; background: var(--brand-mark); }
  .is-collapsed .nav a .count > [aria-hidden] { display: none; }
  .is-collapsed .side-foot { padding: var(--sp-3) 0 0; justify-items: center; }
  .is-collapsed .foot-actions { display: none; }
  .is-collapsed .me { justify-content: center; }
  .is-collapsed .saved { justify-content: center; }
  .is-collapsed .foot-bar { flex-direction: column; }
  .is-collapsed .collapse-btn svg { transform: scaleX(-1); }
}

.main { min-width: 0; }
.top {
  position: sticky; top: 0; z-index: var(--z-sticky); background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--sp-4); min-height: 64px; padding: var(--sp-3) var(--sp-7);
}
.top .titles { min-width: 0; flex: 1; }
.top .sub { color: var(--muted); font-size: var(--text-sm); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }
.crumb { display: inline-flex; align-items: center; gap: var(--sp-1); margin: 0 0 2px calc(-1 * var(--sp-1)); padding: 0 var(--sp-1); border-radius: var(--r-sm); font-size: var(--text-xs); font-weight: var(--w-medium); color: var(--muted); text-decoration: none; }
.crumb:hover { color: var(--text); }
.crumb svg { width: 14px; height: 14px; }
.top .menu-btn, .top .top-search { display: none; }
.content { padding: var(--sp-6) var(--sp-7) var(--sp-16); max-width: 1320px; }
.content:focus { outline: none; }

/* ---------- Elementos ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.card-pad { padding: var(--sp-4) var(--sp-5); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5) 0; }
.card-head + .card-body { padding-top: var(--sp-3); }
.card-body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.stack-sm { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
.row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-5); align-items: start; }
.sticky { position: sticky; top: 84px; }

.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--h-control); padding: 0 var(--sp-4); border-radius: var(--r-md);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font: var(--w-semibold) var(--text-sm) var(--font); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--surface-2); }
.btn svg { width: var(--icon); height: var(--icon); flex: none; }
.btn-primary { background: var(--brand-solid); border-color: var(--brand-solid); color: var(--on-brand); }
.btn-primary:hover { background: color-mix(in srgb, var(--brand-solid) 88%, var(--on-brand)); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--text); }
.btn-danger { color: var(--bad); }
.btn-danger-solid { background: var(--bad); border-color: var(--bad); color: var(--surface); }
.btn-danger-solid:hover { background: color-mix(in srgb, var(--bad) 88%, var(--text)); }
.btn-sm { height: var(--h-control-sm); padding: 0 var(--sp-3); font-size: var(--text-xs); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.icon-btn { width: var(--h-control-sm); padding: 0; justify-content: center; }

.badge { display: inline-flex; align-items: center; gap: var(--sp-1); height: var(--h-badge); padding: 0 var(--sp-2); border-radius: var(--r-full); font-size: var(--text-xs); font-weight: var(--w-semibold); white-space: nowrap; background: var(--surface-2); color: var(--muted); }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge.info { background: var(--info-bg); color: var(--info); }
.badge.brand { background: var(--brand-soft); color: var(--brand-ink); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: currentColor; }

/* ---------- Formularios ---------- */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.form-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form .full { grid-column: 1 / -1; }
.f { display: grid; gap: var(--sp-1); min-width: 0; }
.f > label, .lbl { font-size: var(--text-xs); font-weight: var(--w-semibold); color: var(--muted); display: flex; align-items: center; gap: var(--sp-2); }
.f .hint { font-size: var(--text-xs); color: var(--faint); }
input[type=text], input[type=number], input[type=date], input[type=url], input[type=password], input[type=email], input[type=search], select, textarea {
  width: 100%; min-width: 0; height: var(--h-control); padding: 0 var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--border-control);
  background: var(--surface); color: var(--text); font: var(--text-md) var(--font);
  transition: border-color var(--dur-fast) var(--ease);
}
textarea { height: auto; min-height: 76px; padding: var(--sp-2) var(--sp-3); resize: vertical; line-height: var(--lh-body); }
input:focus, select:focus, textarea:focus { border-color: var(--brand-mark); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand-mark) 45%, transparent); }
input::placeholder, textarea::placeholder { color: var(--faint); }
input[disabled], select[disabled], textarea[disabled] { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
input[type=color] { width: 44px; height: var(--h-control); padding: 3px; border-radius: var(--r-md); border: 1px solid var(--border-control); background: var(--surface); cursor: pointer; }
.check { display: flex; align-items: flex-start; gap: var(--sp-2); cursor: pointer; padding: var(--sp-1) 0; }
.check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--brand-mark); flex: none; }
.money { position: relative; }
.money span { position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%); color: var(--faint); font-size: var(--text-sm); pointer-events: none; }
.money input { padding-left: var(--sp-6); }

.choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.choice label {
  position: relative; border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); cursor: pointer; display: grid; gap: var(--sp-1); background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label:has(input:checked) { border-color: var(--brand-mark); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand-mark) inset; }
.choice strong { font-size: var(--text-md); }
.choice small { color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-snug); }

/* ---------- Tablas editables ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: var(--text-xs); font-weight: var(--w-semibold); color: var(--muted); padding: var(--sp-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table input, .table select { height: var(--h-control-sm); font-size: var(--text-sm); }
.table-wrap { overflow-x: auto; }
.table.hover tbody tr { cursor: pointer; transition: background-color var(--dur-fast) var(--ease); }
.table.hover tbody tr:hover { background: var(--surface-2); }
.empty { text-align: center; padding: var(--sp-7) var(--sp-4); color: var(--muted); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); }

/* ---------- KPIs ---------- */
.kpi { padding: var(--sp-4) var(--sp-5); }
.kpi .k { font-size: var(--text-xs); color: var(--muted); font-weight: var(--w-medium); }
.kpi .v { font: var(--w-bold) var(--text-2xl)/var(--lh-tight) var(--font-head); margin-top: var(--sp-1); } /* cifras proporcionales: tabular solo en columnas */
.kpi .d { font-size: var(--text-xs); color: var(--faint); margin-top: 2px; }

/* ---------- Hero de inicio ---------- */
.hero {
  border-radius: var(--r-xl); padding: var(--sp-6); color: var(--on-brand); position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--brand-solid), color-mix(in srgb, var(--brand-solid) 70%, var(--accent)));
}
.hero h1 { font-size: var(--text-2xl); }
.hero p { opacity: .92; max-width: 640px; margin-top: var(--sp-2); }
.hero .row { margin-top: var(--sp-4); }
.hero .btn { border-color: color-mix(in srgb, var(--on-brand) 35%, transparent); background: color-mix(in srgb, var(--on-brand) 14%, transparent); color: var(--on-brand); }
.hero .btn:hover { background: color-mix(in srgb, var(--on-brand) 24%, transparent); }
.hero .btn-primary { background: var(--on-brand); color: var(--brand-solid); border-color: var(--on-brand); }

.banner { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--info-bg); color: var(--info); font-size: var(--text-sm); }
.banner.warn { background: var(--warn-bg); color: var(--warn); }
.banner .grow { flex: 1; }

/* ---------- Pipeline ---------- */
.board { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: var(--sp-4); overflow-x: auto; padding-bottom: var(--sp-2); }
.col { background: var(--surface-2); border-radius: var(--r-lg); padding: var(--sp-3); min-height: 200px; display: flex; flex-direction: column; gap: var(--sp-3); }
.col-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-1); }
.col-head h3 { font-size: var(--text-sm); }
.col-hint { font-size: var(--text-xs); color: var(--faint); padding: 0 var(--sp-1); margin-top: calc(-1 * var(--sp-2)); }
.ccard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-3); cursor: pointer; display: grid; gap: var(--sp-2); text-decoration: none; color: inherit; box-shadow: var(--shadow-1); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.ccard:hover { border-color: var(--brand-line); box-shadow: var(--shadow-2); }
.ccard .t { font-weight: var(--w-semibold); line-height: var(--lh-snug); }
.bar { height: 6px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--brand-mark); border-radius: var(--r-full); }
.bar.ok > i { background: var(--ok); }
.bar.warn > i { background: var(--warn); }
.bar.bad > i { background: var(--bad); }

/* ---------- Ficha ---------- */
.tabs { position: relative; display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; margin-bottom: var(--sp-4); scrollbar-width: none; scroll-padding: 0 var(--sp-8); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--sp-4), #000 calc(100% - var(--sp-6)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--sp-4), #000 calc(100% - var(--sp-6)), transparent 100%); padding: 0 var(--sp-2); }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: var(--sp-3); color: var(--muted); text-decoration: none; font-weight: var(--w-semibold); font-size: var(--text-sm); border-bottom: 2px solid transparent; white-space: nowrap; display: flex; gap: var(--sp-2); align-items: center; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.tabs a:hover { color: var(--text); }
.tabs a:focus-visible { outline-offset: -2px; border-radius: var(--r-sm); }
.tabs a.active { color: var(--brand-ink); border-bottom-color: var(--brand-mark); }
.tabs .tdot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-control); }
.tabs .tdot.ok { background: var(--ok); }
.tabs .tdot.bad { background: var(--warn); }

.gate { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.gate:last-child { border-bottom: 0; }
.gate .gl { font-size: var(--text-sm); font-weight: var(--w-medium); }
.gate .gd { font-size: var(--text-xs); color: var(--muted); }

.ring { --p: 0; width: 64px; height: 64px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--brand-mark) calc(var(--p) * 1%), var(--surface-2) 0); }
.ring span { width: 52px; height: 52px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font: var(--w-bold) var(--text-md) var(--font-head); font-variant-numeric: tabular-nums; }

.pitch { font-size: var(--text-lg); line-height: var(--lh-body); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--brand-soft); border: 1px solid var(--brand-line); }
.pitch em { font-style: normal; font-weight: var(--w-bold); color: var(--brand-ink); }
.pitch .blank { color: var(--faint); font-weight: var(--w-medium); border-bottom: 1px dashed var(--faint); }

/* Economía */
.wf { display: grid; gap: 2px; }
.wf .r { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; font-variant-numeric: tabular-nums; }
.wf .r.sub { color: var(--muted); padding-left: var(--sp-3); font-size: var(--text-sm); }
.wf .r.tot { border-top: 1px solid var(--border); font-weight: var(--w-bold); padding-top: var(--sp-3); }
.wf .r.big { font-size: var(--text-xl); }
.neg { color: var(--bad); }
.pos { color: var(--ok); }
.stackbar { display: flex; height: 24px; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.stackbar i { display: block; height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--text-xs); color: var(--muted); margin-top: var(--sp-2); }
.legend span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.legend b { width: 10px; height: 10px; border-radius: var(--r-xs); display: inline-block; }
.scen { display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-1) var(--sp-4); font-variant-numeric: tabular-nums; font-size: var(--text-sm); }
.scen .h { font-size: var(--text-xs); font-weight: var(--w-semibold); color: var(--muted); }
.scen .rt { text-align: right; }

/* Alertas y listas */
.alerts { display: grid; gap: var(--sp-2); }
.alert { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); font-size: var(--text-sm); text-decoration: none; color: var(--text); }
.alert.bad { background: var(--bad-bg); }
.alert.warn { background: var(--warn-bg); }
.alert.info { background: var(--info-bg); }
.alert .dot { margin-top: 6px; flex: none; }
.alert.bad .dot { color: var(--bad); } .alert.warn .dot { color: var(--warn); } .alert.info .dot { color: var(--info); }
.list { display: grid; }
.li { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.li:last-child { border-bottom: 0; }
.li .grow { flex: 1; min-width: 0; }

.funnel { display: grid; gap: var(--sp-3); }
.funnel .fr { display: grid; grid-template-columns: 152px 1fr 36px; gap: var(--sp-3); align-items: center; font-size: var(--text-sm); }
.funnel .fb { height: 20px; border-radius: var(--r-sm); background: var(--surface-2); overflow: hidden; }
.funnel .fb i { display: block; height: 100%; background: var(--brand-mark); border-radius: var(--r-sm); min-width: 2px; }

/* ---------- Marca ---------- */
.swatches { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.sw { width: 32px; height: 32px; border-radius: var(--r-md); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong); cursor: pointer; padding: 0; }
.sw.on { box-shadow: 0 0 0 2px var(--text); }
.logo-drop { display: flex; gap: var(--sp-4); align-items: center; }
.logo-drop .logo { width: 64px; height: 64px; border-radius: var(--r-xl); font-size: var(--text-2xl); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip { position: relative; border: 1px solid var(--border-strong); border-radius: var(--r-full); padding: var(--sp-1) var(--sp-3); font-size: var(--text-sm); cursor: pointer; background: var(--surface); transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.chip:has(input:checked) { background: var(--brand-solid); color: var(--on-brand); border-color: var(--brand); }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

/* Vistas previas: simulan la tienda del usuario en claro, siempre */
.preview { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border); background: #fff; color: #161a22; font-family: var(--font); }
.pv-nav { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid #eceef2; }
.pv-nav .logo { width: 32px; height: 32px; border-radius: var(--r-md); font-size: var(--text-xs); }
.pv-nav b { font-family: var(--font-head); }
.pv-nav .links { margin-left: auto; display: flex; gap: var(--sp-3); font-size: var(--text-xs); color: #5c6270; }
.pv-hero { padding: var(--sp-6) var(--sp-4); background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 14%, #fff), #fff); }
.pv-hero h2 { font-size: var(--text-xl); font-family: var(--font-head); color: #10131a; }
.pv-hero p { color: #4a5262; margin-top: var(--sp-2); font-size: var(--text-sm); }
.pv-btn { display: inline-block; margin-top: var(--sp-3); background: var(--brand-solid); color: var(--on-brand); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md); font-weight: var(--w-semibold); font-size: var(--text-sm); }
.pv-btn.alt { background: var(--accent); color: #1b1300; }
.pv-prod { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.pv-card { border: 1px solid #eceef2; border-radius: var(--r-lg); overflow: hidden; }
.pv-img { height: 84px; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--brand) 10%, #fff) 0 10px, color-mix(in srgb, var(--brand) 16%, #fff) 10px 20px); position: relative; }
.pv-tag { position: absolute; top: var(--sp-2); left: var(--sp-2); background: var(--accent); color: #1b1300; font-size: var(--text-xs); font-weight: var(--w-bold); padding: 2px var(--sp-2); border-radius: var(--r-sm); }
.pv-card .in { padding: var(--sp-2) var(--sp-3) var(--sp-3); font-size: var(--text-xs); }
.pv-card .pr { font-weight: var(--w-bold); color: var(--brand-ink-l); margin-top: 2px; }
.ad { border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); overflow: hidden; }
.ad-h { display: flex; gap: var(--sp-2); align-items: center; padding: var(--sp-3); }
.ad-h .logo { width: 32px; height: 32px; border-radius: 50%; font-size: var(--text-xs); }
.ad-img { aspect-ratio: 1.6; background: linear-gradient(135deg, var(--brand-solid), color-mix(in srgb, var(--brand-solid) 70%, var(--accent))); color: var(--on-brand); display: grid; place-items: center; text-align: center; padding: var(--sp-4); font: var(--w-bold) var(--text-xl) var(--font-head); }
.ad-f { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-3); background: var(--surface-2); font-size: var(--text-xs); }

/* ---------- Diálogo ---------- */
dialog { border: 0; border-radius: var(--r-xl); padding: 0; width: min(760px, calc(100vw - 32px)); background: var(--surface); color: var(--text); box-shadow: var(--shadow-3); }
dialog::backdrop { background: var(--scrim); }
.dlg-h { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.dlg-b { padding: var(--sp-5); max-height: 70vh; overflow-y: auto; }
.dlg-f { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); }
/* Paleta de búsqueda (Ctrl+K) */
dialog.palette { width: min(640px, calc(100vw - 32px)); margin: 12vh auto auto; overflow: hidden; animation: pal-open var(--dur-fast) var(--ease); }
/* Solo desplazamiento: si la animación no corre (pestaña en segundo plano), la paleta sigue visible. */
@keyframes pal-open { from { transform: translateY(-4px); } }
.pal-in { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); border-bottom: 1px solid var(--border); }
.pal-in:focus-within { box-shadow: inset 0 -2px 0 var(--brand-mark); }
.pal-in > svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.pal-in input[type=text] { flex: 1; height: 52px; padding: 0; border: 0; background: transparent; font-size: var(--text-lg); outline: none; }
.pal-list { max-height: min(56vh, 440px); overflow-y: auto; padding: var(--sp-2); scroll-padding: var(--sp-2); }
.pal-g { font-size: var(--text-xs); font-weight: var(--w-semibold); color: var(--faint); padding: var(--sp-3) var(--sp-3) var(--sp-1); }
.pal-list > [role=group]:first-child .pal-g { padding-top: var(--sp-1); }
.pal-o { display: flex; align-items: center; gap: var(--sp-3); min-height: 40px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); cursor: pointer; }
.pal-o svg { width: var(--icon); height: var(--icon); flex: none; color: var(--muted); }
.pal-o.on { background: var(--brand-soft); }
.pal-o.on svg, .pal-o.on .pal-l { color: var(--brand-ink); }
.pal-l { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-l mark { background: transparent; color: inherit; font-weight: var(--w-semibold); text-decoration: underline; text-decoration-color: var(--brand-mark); text-underline-offset: 3px; }
.pal-h { font-size: var(--text-xs); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.pal-empty { padding: var(--sp-8) var(--sp-4); text-align: center; display: grid; gap: var(--sp-1); }
.pal-foot { display: flex; gap: var(--sp-4); padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--faint); }
.pal-foot span { display: inline-flex; align-items: center; gap: var(--sp-1); }
@media (max-width: 860px) {
  dialog.palette { margin-top: var(--sp-4); }
  .pal-foot, .pal-in kbd { display: none; }
  .pal-list { max-height: calc(100vh - 140px); }
}

/* Avisos (UI.toast): abajo al centro, apilados; el más reciente abajo */
.toasts { position: fixed; left: 50%; bottom: var(--sp-5); z-index: var(--z-toast); transform: translateX(-50%); display: grid; gap: var(--sp-2); width: min(440px, calc(100vw - 32px)); pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  background: var(--text); color: var(--bg); border-radius: var(--r-lg); box-shadow: var(--shadow-3); font-size: var(--text-sm);
  pointer-events: auto; animation: toast-in var(--dur-base) var(--ease);
}
.toast.out { opacity: 0; transform: translateY(4px); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
@keyframes toast-in { from { transform: translateY(6px); } }
.toast-ic { display: grid; place-items: center; flex: none; }
.toast-ic svg { width: 18px; height: 18px; }
.toast.ok .toast-ic { color: color-mix(in srgb, var(--ok) 55%, var(--bg)); }
.toast.error .toast-ic { color: color-mix(in srgb, var(--bad) 55%, var(--bg)); }
.toast-msg { flex: 1; min-width: 0; line-height: var(--lh-snug); }
.toast-act { flex: none; height: 28px; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-md); background: color-mix(in srgb, var(--bg) 16%, transparent); color: var(--bg); font: var(--w-semibold) var(--text-sm) var(--font); cursor: pointer; }
.toast-act:hover { background: color-mix(in srgb, var(--bg) 26%, transparent); }
.toast-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--r-md); background: transparent; color: color-mix(in srgb, var(--bg) 70%, transparent); cursor: pointer; }
.toast-x:hover { color: var(--bg); background: color-mix(in srgb, var(--bg) 12%, transparent); }
.toast-x svg { width: 16px; height: 16px; }
.toast :focus-visible { outline-color: var(--bg); }

.roadmap .phase { display: grid; grid-template-columns: 36px 1fr; gap: var(--sp-4); }
.roadmap .pn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); font-weight: var(--w-bold); }
.roadmap .pn.done { background: var(--brand-solid); color: var(--on-brand); }

.print-only { display: none; }

/* ---------- Canales, ruta, asistentes ---------- */
.kpi-v { font: var(--w-bold) var(--text-2xl) var(--font-head); font-variant-numeric: tabular-nums; }
.best { border-color: var(--brand-mark); box-shadow: 0 0 0 1px var(--brand-mark) inset, var(--shadow-1); }
.warn-t { color: var(--warn); }
.route { display: flex; align-items: stretch; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-1); }
.route-step { display: grid; gap: var(--sp-1); align-content: start; min-width: 140px; padding: var(--sp-3); border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--border); }
.route-step.ret { background: var(--warn-bg); border-style: dashed; }
.route-step .badge { justify-self: start; margin-top: 2px; }
.route-arrow { align-self: center; color: var(--faint); font-size: var(--text-lg); flex: none; }
.agents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.agent-box { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-3); }
.agent { border-top: 3px solid var(--brand-mark); display: grid; gap: var(--sp-1); }

/* ---------- Modo presentación ---------- */
.present { max-width: 1180px; margin: 0 auto; padding: var(--sp-4) var(--sp-6) var(--sp-12); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.present > *, .card-pad { min-width: 0; }
.present-top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.present-hero { border-radius: var(--r-xl); padding: var(--sp-8); color: var(--on-brand); display: grid; gap: var(--sp-3);
  background: linear-gradient(135deg, var(--brand-solid), color-mix(in srgb, var(--brand-solid) 70%, var(--accent))); }
.present-hero h1 { font-size: var(--text-3xl); }
.present-hero p { font-size: var(--text-lg); max-width: 820px; }
.present-hero .pitch-blank, .present-hero .blank { color: color-mix(in srgb, var(--on-brand) 75%, transparent); border-color: color-mix(in srgb, var(--on-brand) 60%, transparent); }
.present-hero em { font-style: normal; font-weight: var(--w-bold); }
.present-h { font-size: var(--text-lg); margin: var(--sp-1) 0 var(--sp-3); }
.pend-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--warn); flex: none; }
@media (max-width: 860px) {
  .present { padding: var(--sp-3) var(--sp-4) var(--sp-12); }
  .present-hero { padding: var(--sp-6) var(--sp-5); }
  .present-hero h1 { font-size: var(--text-2xl); }
  .agents { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Gráficas (paleta en tokens.css) ---------- */
.chart { position: relative; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .axis { fill: var(--faint); font: 11px var(--font); }
.xchart .hit { fill: transparent; cursor: crosshair; }
.xchart:focus-visible { outline-offset: 4px; border-radius: var(--r-sm); }
.chart-empty { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); background: var(--surface); border: 1px solid var(--border); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full); font-size: var(--text-sm); color: var(--muted); pointer-events: none; white-space: nowrap; }
.hbars { display: grid; gap: var(--sp-3); }
.hbar { display: grid; grid-template-columns: 132px 1fr 92px; gap: var(--sp-3); align-items: center; font-size: var(--text-sm); }
.hbar-l { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.hbar-l i { width: 10px; height: 10px; border-radius: var(--r-xs); flex: none; }
.hbar-t { height: 14px; background: var(--surface-2); border-radius: var(--r-xs); overflow: hidden; }
.hbar-t b { display: block; height: 100%; border-radius: 0 var(--r-xs) var(--r-xs) 0; }
.hbar-v { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.split-bar { display: flex; gap: 2px; height: 24px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); }
.split-bar i { display: block; height: 100%; }
.split-bar .split-empty { flex: 1; display: grid; place-items: center; font-style: normal; font-size: var(--text-xs); color: var(--faint); }


.seg { display: inline-flex; background: var(--surface-2); border-radius: var(--r-md); padding: 2px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; color: var(--muted); font: var(--w-semibold) var(--text-sm) var(--font); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm); cursor: pointer; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.chan { display: inline-flex; align-items: center; gap: var(--sp-2); }
.chan i { width: 8px; height: 8px; border-radius: 50%; }
.copy { display: flex; gap: var(--sp-2); align-items: center; background: var(--surface-2); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); }
.copy code { flex: 1; min-width: 0; overflow-x: auto; font: var(--text-xs) var(--font-mono); white-space: nowrap; }
.steps { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); font-size: var(--text-sm); }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.inbox-list { padding: var(--sp-1) var(--sp-3); max-height: 70vh; overflow-y: auto; }
.inbox-item { border-radius: var(--r-md); padding: var(--sp-3) var(--sp-2); }
.inbox-item.on { background: var(--brand-soft); }
.inbox-item .grow { min-width: 0; }
.chat { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); max-height: 56vh; overflow-y: auto; }
.msg { max-width: 75%; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-lg); display: grid; gap: 2px; font-size: var(--text-md); }
.msg.in { background: var(--surface-2); align-self: flex-start; border-bottom-left-radius: var(--r-xs); }
.msg.out { background: var(--brand-soft); align-self: flex-end; border-bottom-right-radius: var(--r-xs); }
@media (max-width: 860px) {
  .inbox { grid-template-columns: minmax(0, 1fr); }
  .hbar { grid-template-columns: 100px 1fr 80px; }
}

/* ---------- Sesión ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-4);
  background: radial-gradient(circle at 20% 10%, var(--brand-soft), transparent 60%), var(--bg); }
.login-card { width: min(400px, 100%); padding: var(--sp-7); display: grid; gap: var(--sp-4); }
.me { display: flex; gap: var(--sp-3); align-items: center; }
.me-av { width: 32px; height: 32px; border-radius: 50%; font-size: var(--text-xs); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .sticky { position: static; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; z-index: var(--z-drawer); left: 0; top: 0; width: 272px; transform: translateX(-102%); transition: transform var(--dur-base) var(--ease); box-shadow: var(--shadow-3); }
  .side.open { transform: none; }
  .side.open ~ .side-scrim { display: block; position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: var(--scrim); }
  .top .menu-btn, .top .top-search { display: inline-flex; }
  .foot-bar .collapse-btn, .search-btn kbd { display: none; }
  .top { padding: var(--sp-3) var(--sp-4); flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
  .top .titles { order: 1; }
  .top .top-search { order: 2; }
  .top .actions { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .top .actions:empty { display: none; }
  .top .sub { white-space: normal; }
  .content { padding: var(--sp-4) var(--sp-4) var(--sp-12); }
  .grid-2, .grid-3, .form, .form-3, .choice, .form[style] { grid-template-columns: minmax(0, 1fr) !important; }
  .board { grid-template-columns: repeat(4, 82vw); }
  .funnel .fr { grid-template-columns: 112px 1fr 28px; }
}

@media print {
  .side, .top, .tabs, .no-print, .gate-panel, .skip { display: none !important; }
  .shell, .split { display: block; }
  .content { padding: 0; max-width: none; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; break-inside: avoid; }
  .print-only { display: block; }
}

/* Listas largas: "Mostrar más" al pie de la tabla */
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-2) 0; border-top: 1px solid var(--border); }

/* ---------- Tablas de datos (js/table.js) ---------- */
.dt-card { overflow: hidden; }
.dt-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.dt-tools select { width: auto; max-width: 220px; height: var(--h-control-sm); font-size: var(--text-sm); }
.dt-tools .grow { flex: 1; text-align: right; white-space: nowrap; }
.dt-search { position: relative; flex: 1 1 240px; max-width: 360px; }
.dt-search svg { position: absolute; left: var(--sp-3); top: 50%; width: var(--icon); height: var(--icon); transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.dt-search input[type=search] { height: var(--h-control-sm); padding-left: calc(var(--sp-3) + var(--icon) + var(--sp-2)); font-size: var(--text-sm); }
.dt-card > .empty { margin: var(--sp-4); }
/* El contenedor desplaza en ambos ejes: así el encabezado queda fijo dentro de la tabla. */
.dt-scroll { position: relative; overflow: auto; max-height: calc(100vh - 240px); min-height: 160px; overscroll-behavior: contain; }
.dt-scroll:focus-visible { outline-offset: -2px; }
.dt { min-width: 100%; }
.dt thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); padding: var(--sp-2) var(--sp-3); border-bottom: 0; box-shadow: inset 0 -1px 0 var(--border-strong); }
.dt th, .dt td { white-space: nowrap; }
.dt td { padding: var(--sp-3); }
.dt td.wrap { white-space: normal; min-width: 160px; }
.dt.compact td { padding: var(--sp-1) var(--sp-3); }
.dt.compact td .small.faint { display: none; } /* en compacta se ocultan las segundas líneas de apoyo */
.dt th.num, .dt td.num { text-align: right; }
.dt th.num .th-sort { flex-direction: row-reverse; }
.th-sort { display: inline-flex; align-items: center; gap: var(--sp-1); margin: -2px calc(-1 * var(--sp-1)); padding: 2px var(--sp-1); border: 0; border-radius: var(--r-sm); background: transparent; color: inherit; font: inherit; cursor: pointer; transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.th-sort:hover { color: var(--text); background: var(--surface-2); }
.th-sort.on { color: var(--text); }
.th-arrow { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .45; }
.th-sort.on .th-arrow { opacity: 1; color: var(--brand-ink); }
.dt tbody tr:focus-within { background: var(--surface-2); }
/* Acciones por fila: aparecen al pasar el cursor o al llegar con el teclado; siempre visibles en pantallas táctiles. */
/* La celda no ocupa ancho: los botones flotan sobre el final de la fila, con el fondo de la fila. */
.dt .row-actions { position: sticky; right: 0; width: 0; padding: 0; }
.dt .row-actions > div {
  position: absolute; right: var(--sp-2); top: 50%; transform: translateY(-50%);
  display: inline-flex; gap: var(--sp-1); padding-left: var(--sp-6); opacity: 0; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--surface-2) var(--sp-6)); transition: opacity var(--dur-fast) var(--ease);
}
.dt tbody tr:hover .row-actions > div, .dt tbody tr:focus-within .row-actions > div { pointer-events: auto; }
.dt tbody tr:hover .row-actions > div, .dt tbody tr:focus-within .row-actions > div { opacity: 1; }
.dt .row-actions .btn { height: 28px; padding: 0 var(--sp-2); }
/* Pantallas táctiles: sin cursor no hay "pasar encima"; las acciones van en su propia columna, siempre visibles. */
@media (hover: none) {
  .dt td.row-actions { position: static; width: 1%; padding: 0 var(--sp-2); }
  .dt th.row-actions { width: 1%; }
  .dt .row-actions > div { position: static; transform: none; opacity: 1; pointer-events: auto; background: none; padding-left: 0; }
}
.dt-card .pager { padding: var(--sp-3) var(--sp-4); }
/* Encabezados largos ("Contribución tras anuncios") pasan a dos líneas en vez de ensanchar la tabla. */
.dt th { white-space: normal; vertical-align: bottom; line-height: var(--lh-snug); }
.dt th .th-sort { text-align: left; }
.dt td.wrap.dt-primary { min-width: 200px; max-width: 280px; }
/* Tablas anchas: la columna principal (y el # si lo hay) se queda fija al desplazarse de lado,
   para que cada cifra siga junto al nombre al que pertenece. */
.dt .dt-rank { position: sticky; left: 0; width: 48px; min-width: 48px; background: var(--surface); }
.dt .dt-primary { position: sticky; left: 0; background: var(--surface); box-shadow: inset -1px 0 var(--border); }
.dt:has(.dt-rank) .dt-primary { left: 48px; }
.dt thead .dt-rank, .dt thead .dt-primary { z-index: 2; box-shadow: inset 0 -1px 0 var(--border-strong), inset -1px 0 var(--border); }
.dt thead .dt-rank { box-shadow: inset 0 -1px 0 var(--border-strong); }
.dt tbody tr:hover > .dt-rank, .dt tbody tr:hover > .dt-primary,
.dt tbody tr:focus-within > .dt-rank, .dt tbody tr:focus-within > .dt-primary { background: var(--surface-2); }

/* Celular: cada fila es una ficha. Arriba la columna principal; debajo "etiqueta: valor" en dos columnas.
   El encabezado queda como una fila de botones para ordenar, que se desplaza de lado. */
@media (max-width: 640px) {
  .dt-scroll { max-height: none; overflow: visible; min-height: 0; }
  .dt, .dt tbody, .dt tr, .dt td { display: block; width: 100%; }
  .dt thead { display: block; border-bottom: 1px solid var(--border); }
  .dt thead tr { display: flex; gap: var(--sp-1); overflow-x: auto; padding: var(--sp-2) var(--sp-3); scrollbar-width: none; }
  .dt thead th { position: static; flex: none; padding: 0; box-shadow: none; white-space: nowrap; background: none; }
  .dt thead th:not([aria-sort]) { display: none; }
  .dt thead .th-sort { margin: 0; height: var(--h-control-sm); padding: 0 var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--r-full); font-size: var(--text-xs); }
  .dt thead .th-sort.on { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-ink); }
  .dt tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
  .dt tbody tr:last-child { border-bottom: 0; }
  .dt td, .dt.compact td { position: static; padding: 0; border: 0; white-space: normal; text-align: left !important; min-width: 0; max-width: none; width: auto; background: none !important; box-shadow: none; }
  .dt td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: var(--text-xs); color: var(--muted); }
  .dt .dt-primary, .dt .dt-rank { position: static; width: auto; min-width: 0; box-shadow: none; background: none; }
  .dt td.dt-primary { grid-column: 1 / -1; font-size: var(--text-md); }
  .dt td.dt-rank { grid-column: 1 / -1; margin-bottom: calc(-1 * var(--sp-2)); font-size: var(--text-xs); color: var(--muted); }
  .dt td.dt-rank::before { content: '#'; display: inline; margin: 0; }
  .dt td.dt-rank b { font-weight: var(--w-semibold); }
  .dt td.dt-primary::before, .dt td.row-actions::before { content: none; }
  .dt td.row-actions { grid-column: 1 / -1; position: static; width: auto; }
  .dt .row-actions > div { position: static; transform: none; opacity: 1; pointer-events: auto; background: none; padding: 0; }
  .dt.compact td .small.faint { display: block; }
  .dt .badge { white-space: nowrap; }
}
@media (max-width: 860px) {
  .dt-tools { padding: var(--sp-3); }
  .dt-search { max-width: none; flex-basis: 100%; }
  .dt-tools select { flex: 1 1 140px; max-width: none; }
  .dt-tools .grow { text-align: left; }
  .dt-scroll { max-height: calc(100vh - 200px); }
}

/* ---------- Estados vacíos (UI.emptyState) ---------- */
.es { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-8) var(--sp-4); text-align: center; }
.es-art { width: 120px; height: 84px; margin-bottom: var(--sp-1); }
.es-card { fill: var(--surface); stroke: var(--border-control); stroke-dasharray: 4 4; }
.es-line { fill: var(--surface-2); }
.es-dot { fill: var(--brand-soft); stroke: var(--brand-line); }
.es-ic { color: var(--brand-ink); }
.es-t { font-weight: var(--w-semibold); font-size: var(--text-md); }
.es-d { max-width: 46ch; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-body); }
.es-a { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.es-sm { padding: var(--sp-5) var(--sp-3); }
.es-sm .es-art { width: 88px; height: 62px; }

/* ---------- Skeletons ---------- */
.sk { display: block; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface-2) 25%, color-mix(in srgb, var(--surface-2) 40%, var(--surface)) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: sk 1.2s linear infinite; }
@keyframes sk { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.sk-rows { display: grid; gap: var(--sp-4); }
.sk-row { display: flex; gap: var(--sp-4); }
.sk-app .side { gap: 0; }

/* ---------- Aviso de conexión (fijo arriba, no mueve la página) ---------- */
.conn {
  position: fixed; top: var(--sp-3); left: 50%; z-index: var(--z-toast); transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--sp-3); width: max-content; max-width: calc(100vw - 32px);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); border-radius: var(--r-lg);
  background: var(--warn-bg); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); box-shadow: var(--shadow-2);
  font-size: var(--text-sm); animation: toast-in var(--dur-base) var(--ease);
}
.conn[hidden] { display: none; }
.conn > svg { width: 18px; height: 18px; flex: none; }
.conn .conn-t { font-weight: var(--w-semibold); }
.conn .conn-d { color: var(--text); }
.conn .btn { flex: none; }
@media (max-width: 860px) { .conn { flex-wrap: wrap; top: auto; bottom: 88px; } }

/* ---------- Tooltip de gráficas (Charts): el valor primero, la etiqueta después ---------- */
.tip {
  position: fixed; z-index: var(--z-tip); pointer-events: none; min-width: 96px; max-width: 260px;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-2); font-size: var(--text-xs); line-height: var(--lh-snug);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
.tip.on { opacity: 1; }
.tip-v { font-size: var(--text-sm); font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; }
.tip-l { display: flex; align-items: center; gap: var(--sp-2); color: var(--muted); margin-top: 2px; }
.tip-l i { width: 12px; height: 2px; border-radius: 1px; flex: none; } /* llave de línea, no caja */
.tip-d { color: var(--faint); margin-top: 2px; }
.xhair { stroke: var(--border-control); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; }
.xdot { stroke: var(--surface); stroke-width: 2; opacity: 0; }
.xchart.on .xhair, .xchart.on .xdot { opacity: 1; }
.hbar { border-radius: var(--r-sm); transition: background-color var(--dur-fast) var(--ease); }
.hbar:hover { background: var(--surface-2); }

/* ---------- Indicadores (stat tile) y sparkline ---------- */
.stat .stat-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); }
.stat .stat-row .v { min-width: 0; white-space: nowrap; }
.stat .d { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); }
.delta { display: inline-flex; align-items: center; gap: 2px; font-weight: var(--w-semibold); color: var(--muted); }
.delta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.delta.pos { color: var(--ok); }
.delta.neg { color: var(--bad); }
.spark { flex: none; overflow: visible; }
.spark-fill { fill: var(--border-control); opacity: .1; }
.spark-past { fill: none; stroke: var(--border-control); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark-now { fill: none; stroke: var(--brand-mark); stroke-width: 2; stroke-linecap: round; }
.spark-end { fill: var(--brand-mark); stroke: var(--surface); stroke-width: 2; }
.spark .xdot { fill: var(--text); }

/* ---------- Inicio: briefing ---------- */
.brief { max-width: 68ch; padding: var(--sp-2) 0; }
.brief-lead { font: var(--w-medium) var(--text-2xl)/1.3 var(--font-head); letter-spacing: var(--tracking-tight); text-wrap: pretty; }
.brief-lead b { font-weight: var(--w-bold); }
.brief-sub { margin-top: var(--sp-2); color: var(--muted); font-size: var(--text-lg); }
.brief-sub b { color: var(--text); font-weight: var(--w-semibold); }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-4); align-items: start; }
.home-side { gap: var(--sp-3); }
.home-side .kpi { padding: var(--sp-4); }

/* Requiere atención: etiqueta con ícono (nunca solo color), texto y contexto */
.attn-list { display: grid; }
.attn { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--sp-3); align-items: baseline; padding: var(--sp-3) var(--sp-2); margin: 0 calc(-1 * var(--sp-2)); color: inherit; text-decoration: none; transition: background-color var(--dur-fast) var(--ease); }
.attn + .attn, .pipe-row + .pipe-row { border-top: 1px solid var(--border); }
.attn:hover { background: var(--surface-2); }
.attn-tag { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--text-xs); font-weight: var(--w-semibold); color: var(--muted); }
.attn-tag svg { width: 16px; height: 16px; flex: none; }
.attn.bad .attn-tag { color: var(--bad); }
.attn.warn .attn-tag { color: var(--warn); }
.attn.info .attn-tag { color: var(--info); }
.attn-body { display: grid; gap: 2px; min-width: 0; }
.attn-t { font-size: var(--text-sm); font-weight: var(--w-medium); }
.attn-c { font-size: var(--text-xs); color: var(--muted); }
.attn-more summary { cursor: pointer; padding: var(--sp-3) 0 var(--sp-1); font-size: var(--text-sm); font-weight: var(--w-semibold); color: var(--brand-ink); }

/* Pista de condiciones: un segmento por condición mínima, separados por el color de la superficie */
.track-wrap { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.track { display: flex; gap: 2px; flex: 1; min-width: 112px; }
.track i { flex: 1; height: 10px; border-radius: 2px; background: color-mix(in srgb, var(--brand-mark) 18%, var(--surface-2)); transition: transform var(--dur-fast) var(--ease); }
.track i.ok { background: var(--brand-mark); }
.track i:hover { transform: scaleY(1.4); }
.track-n { font-size: var(--text-xs); color: var(--muted); min-width: 34px; text-align: right; }

/* Candidatos en curso */
.pipe { display: grid; }
.pipe-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(180px, 220px) 132px minmax(0, 1.2fr); gap: var(--sp-4); align-items: center; padding: var(--sp-3) var(--sp-2); margin: 0 calc(-1 * var(--sp-2)); color: inherit; text-decoration: none; transition: background-color var(--dur-fast) var(--ease); }

.pipe-row:hover { background: var(--surface-2); }
.pipe-name { display: grid; gap: var(--sp-1); min-width: 0; }
.pipe-name b { line-height: var(--lh-snug); }
.pipe-econ { font-size: var(--text-sm); font-weight: var(--w-semibold); text-align: right; }
.pipe-econ small, .pipe-next small { display: block; font-size: var(--text-xs); font-weight: var(--w-regular); }
.pipe-econ.faint { font-weight: var(--w-regular); }
.pipe-next { font-size: var(--text-sm); min-width: 0; }

@media (max-width: 1100px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .home-side { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
@media (max-width: 860px) {
  .brief-lead { font-size: var(--text-xl); }
  .brief-sub { font-size: var(--text-md); }
  .attn { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .pipe-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-3); }
  .pipe-row .track-wrap { grid-column: 1 / -1; grid-row: 2; }
  .pipe-row .pipe-econ { grid-column: 2; grid-row: 1; align-self: start; }
  .pipe-row .pipe-next { grid-column: 1 / -1; }
}

/* ---------- Ficha: encabezado de expediente ---------- */
.dossier { display: grid; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4); }
.dossier-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.dossier-track { display: grid; gap: var(--sp-2); }
.dossier-track .track i { height: 12px; }
.dossier-track .track-n { font-size: var(--text-sm); font-weight: var(--w-semibold); color: var(--text); }
.dossier-status { font-size: var(--text-sm); color: var(--muted); }
.dossier-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin: 0; padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.dossier-facts dt { font-size: var(--text-xs); color: var(--muted); font-weight: var(--w-medium); }
.dossier-facts dd { margin: var(--sp-1) 0 0; font-weight: var(--w-semibold); font-size: var(--text-md); }
.dossier-facts dd small { display: block; font-size: var(--text-xs); font-weight: var(--w-regular); color: var(--muted); margin-top: 2px; }
.dossier-facts dd.faint { color: var(--faint); }
.dossier-facts dd small.neg { color: var(--bad); }

/* Menú "Más" (divulgación) */
.more { position: relative; }
.more-pop { position: absolute; right: 0; top: calc(100% + var(--sp-1)); z-index: var(--z-drawer); min-width: 232px; padding: var(--sp-1); display: grid; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-3); animation: toast-in var(--dur-fast) var(--ease); }
.more-pop[hidden] { display: none; }
.more-item { display: flex; align-items: center; gap: var(--sp-2); width: 100%; height: var(--h-control); padding: 0 var(--sp-3); border: 0; border-radius: var(--r-md); background: transparent; color: var(--text); font: var(--w-medium) var(--text-sm) var(--font); text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; }
.more-item:hover, .more-item:focus-visible { background: var(--surface-2); }
.more-item svg { width: var(--icon); height: var(--icon); color: var(--muted); flex: none; }
.more-item.danger, .more-item.danger svg { color: var(--bad); }
.more-item.danger { margin-top: var(--sp-1); box-shadow: 0 -1px 0 var(--border); border-radius: 0 0 var(--r-md) var(--r-md); }
.more-item[disabled] { opacity: .5; cursor: not-allowed; }

/* Condiciones mínimas: plegable */
.gates-box > summary { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); cursor: pointer; list-style: none; }
.gates-box > summary::-webkit-details-marker { display: none; }
.gates-box > summary .grow { display: grid; gap: 2px; flex: 1; }
.gates-box > summary > svg { width: var(--icon); height: var(--icon); color: var(--muted); transition: transform var(--dur-fast) var(--ease); }
.gates-box[open] > summary > svg { transform: rotate(180deg); }
.gates-box[open] > summary { border-bottom: 1px solid var(--border); }
.gates-box > .card-body { padding-top: var(--sp-2); }
.gate .ic { width: 20px; height: 20px; flex: none; display: grid; place-items: center; margin-top: 1px; }
.gate .ic svg { width: 18px; height: 18px; }
.gate.ok .ic { color: var(--ok); }
.gate.no .ic { color: var(--bad); }
.gate.soft .ic { color: var(--warn); }
.gate:hover .gl { color: var(--brand-ink); }

@media (max-width: 860px) {
  .dossier { padding: var(--sp-4); }
  .dossier-facts { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .more-pop { right: 0; left: auto; max-width: calc(100vw - 24px); }
}

/* ---------- Celular y app instalada ---------- */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
button, a, label, summary, [role=tab] { touch-action: manipulation; }
/* Respeta la muesca y la barra de inicio del teléfono */
.top { padding-top: max(var(--sp-3), env(safe-area-inset-top)); }
.content { padding-bottom: max(var(--sp-12), calc(env(safe-area-inset-bottom) + var(--sp-8))); }
.toasts { bottom: max(var(--sp-5), calc(env(safe-area-inset-bottom) + var(--sp-3))); }
@media (max-width: 860px) {
  /* 16px en campos: iOS no hace zoom al tocarlos */
  input[type=text], input[type=number], input[type=date], input[type=url], input[type=password], input[type=email], input[type=search], select, textarea { font-size: 16px; }
  .nav a { min-height: 44px; }
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; }
  .side { padding-top: max(var(--sp-4), env(safe-area-inset-top)); padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom)); }
  .top h1 { font-size: var(--text-lg); }
  .top .actions .btn { flex: 1 1 auto; justify-content: center; }
  .top .actions .more { flex: 0 0 auto; }
}
@media (display-mode: standalone) { .top { backdrop-filter: blur(12px); } }

/* ---------- Densidad en celular: más contenido por pantalla, mismo tamaño táctil ---------- */
@media (max-width: 860px) {
  body { font-size: var(--text-sm); }
  .content { padding: var(--sp-3) var(--sp-3) max(var(--sp-8), calc(env(safe-area-inset-bottom) + var(--sp-6))); }
  .stack { gap: var(--sp-3); }
  .grid-4, .home-side, .kpis6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--sp-2); }
  .card-head { padding: var(--sp-3) var(--sp-3) 0; }
  .card-body, .card-pad { padding: var(--sp-3); }
  .card-head + .card-body { padding-top: var(--sp-2); }
  h2 { font-size: var(--text-md); }

  /* Encabezado: título de una línea y acciones en una sola fila que se desliza */
  .top { padding: max(var(--sp-2), env(safe-area-inset-top)) var(--sp-3) var(--sp-2); min-height: 0; gap: var(--sp-1) var(--sp-2); }
  .top h1 { font-size: var(--text-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .top .sub { display: none; }
  .crumb { margin-bottom: 0; }
  .top .actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: var(--sp-2); margin: 0 calc(-1 * var(--sp-3)); padding: 0 var(--sp-3) 2px; }
  .top .actions::-webkit-scrollbar { display: none; }
  .top .actions .btn { flex: 0 0 auto; height: 36px; min-height: 36px; padding: 0 var(--sp-3); font-size: var(--text-xs); }

  /* Indicadores compactos: valor y tendencia apilados */
  .kpi, .home-side .kpi { padding: var(--sp-3); }
  .kpi .k { font-size: 11px; line-height: var(--lh-snug); }
  .kpi .v { font-size: var(--text-xl); }
  .kpi .d { font-size: 11px; }
  .stat .stat-row { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
  .stat .spark { width: 100%; height: 28px; }

  /* Inicio */
  .banner { padding: var(--sp-2) var(--sp-3); font-size: var(--text-xs); gap: var(--sp-2); }
  .banner .btn { flex: none; }
  .brief { padding: 0; }
  .brief-lead { font-size: var(--text-lg); line-height: var(--lh-snug); }
  .brief-sub { font-size: var(--text-sm); margin-top: var(--sp-1); }
  .attn { padding: var(--sp-2); gap: 2px; }
  .attn-t { font-size: var(--text-sm); }
  .pipe-row { padding: var(--sp-2); }
  .es { padding: var(--sp-4) var(--sp-3); gap: var(--sp-1); }
  .es-art { width: 72px; height: 50px; }

  /* Ficha: expediente en menos alto */
  .dossier { padding: var(--sp-3); gap: var(--sp-2); margin-bottom: var(--sp-3); }
  .dossier-meta .small { width: 100%; }
  .dossier-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-3); padding-top: var(--sp-2); }
  .dossier-facts > div:last-child { grid-column: 1 / -1; }
  .dossier-facts dd { font-size: var(--text-sm); }
  .tabs { margin-bottom: var(--sp-3); }
  .tabs a { padding: var(--sp-2) var(--sp-3); }
  .li { padding: var(--sp-2) 0; }
  .form { gap: var(--sp-3); }
  /* Formularios en dos columnas cuando los campos son cortos */
  .form-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .form-3 > .f.full { grid-column: 1 / -1; }
  input[type=text], input[type=number], input[type=date], input[type=url], input[type=password], input[type=email], input[type=search], select { height: 40px; }
  .table td { padding: 2px var(--sp-1); }
  .dt td { padding: var(--sp-2); }
  .dt-tools { padding: var(--sp-2) var(--sp-3); }
}
@media (max-width: 860px) {
  .hide-sm { display: none; }
  /* Sin ventas: el aviso ocupa el ancho completo y en formato breve */
  .home-side > section.card { grid-column: 1 / -1; }
  .home-side .es { justify-items: start; text-align: left; padding: var(--sp-3); }
  .home-side .es-art { display: none; }
  .home-side .es-a { justify-content: flex-start; margin-top: var(--sp-1); }
}
@media (max-width: 860px) {
  /* Con menú "Más" la fila no se desliza (el menú no debe quedar recortado) */
  .top .actions:has(.more) { overflow: visible; }
}

/* Panel de ventas sin datos: pasos numerados (es una secuencia real). El número pasa a ✓ al cumplirse. */
.setup-steps { list-style: none; margin: 0; padding: var(--sp-2) var(--sp-5) var(--sp-4); display: grid; }
.setup-steps li { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
.setup-steps li:last-child { border-bottom: 0; }
.setup-steps .grow { flex: 1; min-width: 0; }
.setup-n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-full); border: 1.5px solid var(--border-control); font: var(--w-semibold) var(--text-sm)/1 var(--font-head); color: var(--muted); font-variant-numeric: tabular-nums; }
.setup-steps li:first-child:not(.ok) .setup-n { border-color: var(--brand-mark); color: var(--brand-ink); background: var(--brand-soft); }
.setup-steps li.ok .setup-n { border-color: transparent; background: var(--ok-bg); color: var(--ok); }
.setup-n svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.setup-steps .btn { flex: none; }
.setup .card-head .nowrap { flex: none; white-space: nowrap; align-self: flex-start; }
@media (max-width: 640px) {
  .setup-steps { padding: var(--sp-1) var(--sp-4) var(--sp-3); }
  .setup-steps li { flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
  .setup-steps .grow { flex-basis: calc(100% - 28px - var(--sp-3)); }
  .setup-steps .btn { margin-left: calc(28px + var(--sp-3)); }
}
/* Inicio en celular: el último indicador suelto ocupa todo el ancho en vez de quedar a la mitad. */
@media (max-width: 860px) {
  .home-side > section.card + :last-child, .home-side > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* =====================================================================================
   Apariencia (Mi marca → Apariencia). Cada opción es un atributo en <html>; ver css/TOKENS.md.
   ===================================================================================== */

/* ---------- Barra lateral ---------- */
/* Color de marca: la barra es un tono profundo de la marca. Se redefinen los tokens dentro de .side,
   así buscador, conteos, botones y avatar se adaptan solos. Texto blanco ≥ 4.5:1 (la mezcla con casi negro
   lo asegura aun con marcas claras). */
:root[data-side="brand"] .side {
  --side-bg: color-mix(in srgb, var(--brand-solid) 52%, #05070a);
  --surface: color-mix(in srgb, #fff 7%, var(--side-bg));
  --surface-2: color-mix(in srgb, #fff 11%, var(--side-bg));
  --border: rgb(255 255 255 / .1); --border-strong: rgb(255 255 255 / .18); --border-control: rgb(255 255 255 / .42);
  --text: #fff; --muted: rgb(255 255 255 / .78); --faint: rgb(255 255 255 / .64);
  --brand-soft: rgb(255 255 255 / .13); --brand-ink: #fff; --brand-mark: #fff; --brand-line: rgb(255 255 255 / .3);
  --ok: #7ee2a8; --warn: #fcd27b;
  background: var(--side-bg); color: var(--text); border-right: 0;
}
:root[data-side="brand"] .side .logo { box-shadow: 0 0 0 1px rgb(255 255 255 / .22); }
:root[data-side="brand"] .side .nav-label { color: rgb(255 255 255 / .58); }
/* Elemento activo: una marca del color de acento a la izquierda, además del fondo. */
:root[data-side="brand"] .nav a.active { position: relative; color: #fff; }
:root[data-side="brand"] .nav a.active::before { content: ''; position: absolute; left: calc(-1 * var(--sp-1)); top: 8px; bottom: 8px; width: 3px; border-radius: var(--r-full); background: var(--accent); }
:root[data-side="brand"] .side :focus-visible { outline-color: #fff; }
/* Tinte suave: la barra lleva un fondo claro del tono de la marca; el elemento activo es una tarjeta. */
:root[data-side="soft"] .side { background: color-mix(in srgb, var(--brand) 9%, var(--base-surface)); border-right-color: transparent; }
:root[data-side="soft"] .nav a.active { background: var(--surface); box-shadow: var(--shadow-1); }
:root[data-side="soft"] .side .search-btn { background: var(--surface); }

/* ---------- Tarjetas ---------- */
/* Elevadas: sin borde, con sombra difusa. En oscuro las sombras no se ven: un borde casi invisible separa. */
:root[data-cards="elevated"] .card, :root[data-cards="elevated"] .ccard {
  border-color: transparent;
  box-shadow: 0 1px 2px hsl(var(--shadow-color) / .05), 0 6px 20px -4px hsl(var(--shadow-color) / .08);
}
:root[data-theme="dark"][data-cards="elevated"] .card, :root[data-theme="dark"][data-cards="elevated"] .ccard { border-color: rgb(255 255 255 / .05); box-shadow: 0 1px 2px rgb(0 0 0 / .4); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-cards="elevated"] .card, :root:not([data-theme="light"])[data-cards="elevated"] .ccard { border-color: rgb(255 255 255 / .05); box-shadow: 0 1px 2px rgb(0 0 0 / .4); }
}
/* Planas: ni borde ni sombra; la tarjeta se distingue solo por el contraste con el lienzo. */
:root[data-cards="flat"] .card, :root[data-cards="flat"] .ccard { border-color: transparent; box-shadow: none; }
:root[data-cards="flat"] .ccard:hover { box-shadow: var(--shadow-1); }

/* ---------- Encabezado de pantalla ---------- */
/* Título grande con la tipografía de títulos: cada pantalla se abre como una página, no como una barra. */
.top { min-height: 76px; padding-top: var(--sp-4); padding-bottom: var(--sp-4); border-bottom-color: color-mix(in srgb, var(--border) 55%, transparent); }
.top h1 { font-size: clamp(22px, 1.2rem + .8vw, 30px); font-weight: var(--w-bold); letter-spacing: -0.02em; }
.top .sub { font-size: var(--text-sm); margin-top: var(--sp-1); }
@media (max-width: 860px) { .top { min-height: 0; } .top h1 { font-size: var(--text-lg); } }

/* ---------- Mi marca → Apariencia ---------- */
/* Estilos predefinidos: miniatura dibujada con CSS (barra, título en su letra, dos tarjetas) + nombre y para qué sirve. */
.sty-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: var(--sp-3); }
.sty {
  display: grid; gap: 2px; align-content: start; padding: var(--sp-2) var(--sp-2) var(--sp-3); text-align: left; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--surface); color: var(--text); font: inherit;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.sty:hover { border-color: var(--brand-line); box-shadow: var(--shadow-2); }
.sty:active { transform: translateY(1px); }
.sty.on { border-color: var(--brand-mark); box-shadow: 0 0 0 1px var(--brand-mark) inset; }
.sty-name { font-weight: var(--w-semibold); font-size: var(--text-sm); padding: var(--sp-2) var(--sp-1) 0; display: flex; align-items: center; gap: var(--sp-1); }
.sty.on .sty-name::after { content: "En uso"; margin-left: auto; font-size: var(--text-xs); font-weight: var(--w-semibold); color: var(--brand-ink); }
.sty-desc { font-size: var(--text-xs); color: var(--muted); line-height: var(--lh-snug); padding: 0 var(--sp-1); }
.sty-mini {
  --ms-bg: color-mix(in srgb, var(--brand-solid) 52%, #05070a);
  display: grid; grid-template-columns: 26% 1fr; height: 96px; overflow: hidden; border-radius: calc(var(--mr) * .8);
  background: color-mix(in srgb, var(--brand) 6%, var(--base-bg)); border: 1px solid var(--border);
}
.sty-side { background: var(--ms-bg); display: grid; align-content: start; gap: 5px; padding: 10px 7px; }
.sty-side i { height: 5px; border-radius: 3px; background: rgb(255 255 255 / .35); }
.sty-side i:first-child { background: var(--accent); width: 70%; }
.sty-mini[data-mside="soft"] .sty-side { background: color-mix(in srgb, var(--brand) 14%, var(--base-surface)); }
.sty-mini[data-mside="neutral"] .sty-side { background: var(--base-surface); border-right: 1px solid var(--border); }
.sty-mini[data-mside="soft"] .sty-side i, .sty-mini[data-mside="neutral"] .sty-side i { background: var(--border-strong); }
.sty-mini[data-mside="soft"] .sty-side i:first-child, .sty-mini[data-mside="neutral"] .sty-side i:first-child { background: var(--brand-mark); }
.sty-main { display: grid; align-content: start; gap: 2px; padding: 8px 9px; min-width: 0; }
.sty-h { font: 700 18px/1 var(--mh), system-ui; color: var(--text); }
.sty-t { font: 400 10px/1.3 var(--mb), system-ui; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sty-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.sty-card { height: 34px; border-radius: var(--mr); background: var(--base-surface); border: 1px solid var(--border-strong); padding: 7px; }
.sty-card b { display: block; height: 6px; width: 60%; border-radius: 3px; background: var(--brand-mark); }
.sty-mini[data-mcards="elevated"] .sty-card { border-color: transparent; box-shadow: 0 3px 8px -2px hsl(var(--shadow-color) / .25); }
.sty-mini[data-mcards="flat"] .sty-card { border-color: transparent; }

/* Opciones sueltas: botones con un pequeño dibujo de lo que cambian. */
.opts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: var(--sp-5) var(--sp-6); }
.opts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sp-2); }
.opt {
  display: flex; align-items: center; gap: var(--sp-2); min-height: 40px; min-width: 0; padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-1); text-align: left; line-height: var(--lh-snug);
  border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--muted);
  font: var(--w-semibold) var(--text-sm) var(--font); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.opt:hover { color: var(--text); border-color: var(--border-control); }
.opt.on { color: var(--brand-ink); border-color: var(--brand-mark); background: var(--brand-soft); }
.og { width: 30px; height: 30px; flex: none; border-radius: 6px; position: relative; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); }
.og::before { content: ""; position: absolute; }
.opt.on .og { border-color: var(--brand-line); }
/* Tema */
.og-theme-light { background: #f5f6f8; }
.og-theme-dark { background: #161a21; }
.og-theme-auto { background: linear-gradient(135deg, #f5f6f8 50%, #161a21 50%); }
.og-theme-light::before, .og-theme-dark::before { inset: 9px 6px auto; height: 4px; border-radius: 2px; background: var(--brand-mark); }
/* Barra lateral */
.og-side-brand::before, .og-side-soft::before, .og-side-neutral::before { inset: 0 auto 0 0; width: 11px; }
.og-side-brand::before { background: color-mix(in srgb, var(--brand-solid) 52%, #05070a); }
.og-side-soft::before { background: color-mix(in srgb, var(--brand) 22%, var(--base-surface)); }
.og-side-neutral::before { background: var(--surface); border-right: 1px solid var(--border-strong); }
/* Tarjetas */
.og-card-elevated::before, .og-card-bordered::before, .og-card-flat::before { inset: 8px 6px; border-radius: 3px; background: var(--surface); }
.og-card-elevated::before { box-shadow: 0 2px 5px hsl(var(--shadow-color) / .3); }
.og-card-bordered::before { border: 1.5px solid var(--border-control); }
/* Esquinas */
.og-corner-soft::before, .og-corner-sharp::before, .og-corner-round::before { inset: 9px -4px -4px 9px; border: 2px solid var(--brand-mark); border-right: 0; border-bottom: 0; }
.og-corner-soft::before { border-top-left-radius: 7px; }
.og-corner-sharp::before { border-top-left-radius: 1px; }
.og-corner-round::before { border-top-left-radius: 14px; }
/* Fondo */
.og-canvas-tint { background: color-mix(in srgb, var(--brand) 22%, var(--base-bg)); }
.og-canvas-plain { background: var(--base-bg); }
.og-canvas-tint::before, .og-canvas-plain::before { inset: 9px 7px; border-radius: 3px; background: var(--base-surface); }
/* Densidad: renglones más o menos juntos */
.og-dens-comfortable::before, .og-dens-compact::before, .og-dens-spacious::before { inset: 6px; background: repeating-linear-gradient(var(--muted) 0 2px, transparent 2px var(--og-gap)); }
.og-dens-comfortable { --og-gap: 6px; }
.og-dens-compact { --og-gap: 4px; }
.og-dens-spacious { --og-gap: 9px; }
/* Tamaño de texto */
.og-text-normal::before, .og-text-large::before { content: "Aa"; inset: 0; display: grid; place-items: center; font: 700 11px/1 var(--font-head); color: var(--text); }
.og-text-large::before { font-size: 15px; }

/* Tipografías: cada opción con su propia letra */
.fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--sp-2); }
.fnt {
  display: grid; justify-items: start; gap: 2px; padding: var(--sp-2) var(--sp-3); text-align: left; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.fnt:hover { border-color: var(--border-control); }
.fnt.on { border-color: var(--brand-mark); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand-mark) inset; }
.fnt-a { font-size: 22px; line-height: 1.1; font-weight: 700; }
.fnt-n { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Vista previa de la aplicación (columna derecha de Mi marca): sigue las opciones elegidas en vivo. */
.appv { display: grid; grid-template-columns: 64px 1fr; height: 188px; overflow: hidden; border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--bg); }
.appv-side { display: grid; align-content: start; gap: 8px; padding: 12px 10px; background: var(--surface); border-right: 1px solid var(--border); }
.appv-side .logo { width: 30px; height: 30px; border-radius: var(--r-md); font-size: 11px; margin-bottom: 6px; }
.appv-side i { height: 6px; border-radius: 3px; background: var(--border-strong); }
.appv-side i.on { background: var(--brand-mark); }
:root[data-side="brand"] .appv-side { background: color-mix(in srgb, var(--brand-solid) 52%, #05070a); border-right: 0; }
:root[data-side="brand"] .appv-side i { background: rgb(255 255 255 / .3); }
:root[data-side="brand"] .appv-side i.on { background: var(--accent); }
:root[data-side="brand"] .appv-side .logo { box-shadow: 0 0 0 1px rgb(255 255 255 / .22); }
:root[data-side="soft"] .appv-side { background: color-mix(in srgb, var(--brand) 9%, var(--base-surface)); border-right: 0; }
.appv-main { display: grid; align-content: start; gap: 4px; padding: 14px; min-width: 0; }
.appv-h { font: var(--w-bold) 20px/1.1 var(--font-head); letter-spacing: -0.02em; }
.appv-t { font-size: 11px; color: var(--muted); }
.appv-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 10px; }
.appv-card { display: grid; gap: 6px; padding: 10px; height: 54px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.appv-card i { height: 5px; width: 50%; border-radius: 3px; background: var(--border-strong); }
.appv-card b { height: 10px; width: 70%; border-radius: 3px; background: var(--brand-mark); }
:root[data-cards="elevated"] .appv-card { border-color: transparent; box-shadow: 0 1px 2px hsl(var(--shadow-color) / .05), 0 6px 14px -4px hsl(var(--shadow-color) / .12); }
:root[data-cards="flat"] .appv-card { border-color: transparent; }
.appv-btn { justify-self: start; padding: 6px 12px; border-radius: var(--r-md); background: var(--brand-solid); color: var(--on-brand); font: var(--w-semibold) 11px var(--font); }

/* ---------- Inicio de una cuenta nueva: arranque guiado ---------- */
/* Un solo bloque grande: título en la letra de la marca, avance a la derecha y los cuatro pasos en fila.
   El siguiente paso pendiente lleva el tono de la marca; los hechos quedan atenuados con su ✓. */
.welcome { background: var(--surface); border-radius: var(--r-xl); padding: var(--sp-8); box-shadow: var(--shadow-1); border: 1px solid var(--border); }
:root[data-cards="elevated"] .welcome, :root[data-cards="flat"] .welcome { border-color: transparent; }
:root[data-cards="elevated"] .welcome { box-shadow: 0 1px 2px hsl(var(--shadow-color) / .05), 0 10px 30px -8px hsl(var(--shadow-color) / .12); }
.welcome-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-8); margin-bottom: var(--sp-8); }
.welcome-t { font: var(--w-bold) clamp(24px, 1rem + 1.4vw, 36px)/1.15 var(--font-head); letter-spacing: -0.025em; max-width: 22ch; text-wrap: balance; }
.welcome-s { margin-top: var(--sp-3); color: var(--muted); font-size: var(--text-lg); max-width: 56ch; line-height: var(--lh-body); }
.welcome-prog { flex: none; display: grid; gap: var(--sp-2); width: 160px; }
.welcome-prog b { font: var(--w-bold) var(--text-3xl)/1 var(--font-head); letter-spacing: -0.02em; }
.welcome-prog small { font-size: var(--text-md); font-weight: var(--w-medium); color: var(--muted); letter-spacing: 0; }
.welcome-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.ws { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface-2); position: relative; }
.ws h3 { font-size: var(--text-lg); line-height: var(--lh-snug); margin-top: var(--sp-2); }
.ws p { color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-body); flex: 1; }
.ws-a { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }
.ws-n { width: 40px; height: 40px; border-radius: var(--r-full); display: grid; place-items: center; font: var(--w-bold) var(--text-lg)/1 var(--font-head); background: var(--surface); color: var(--muted); border: 1px solid var(--border-strong); font-variant-numeric: tabular-nums; }
.ws-n svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ws.next { background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-line); }
.ws.next .ws-n { background: var(--brand-solid); color: var(--on-brand); border-color: transparent; }
.ws.ok .ws-n { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.ws.ok h3 { color: var(--muted); }
@media (max-width: 1100px) { .welcome-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .welcome { padding: var(--sp-5); }
  .welcome-head { flex-direction: column; align-items: stretch; gap: var(--sp-4); margin-bottom: var(--sp-5); }
  .welcome-s { font-size: var(--text-md); }
  .welcome-prog { width: auto; grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-3); }
  .welcome-prog b { font-size: var(--text-xl); }
}
@media (max-width: 640px) {
  .welcome-steps { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .ws { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px var(--sp-3); padding: var(--sp-3); }
  .ws-n { width: 32px; height: 32px; font-size: var(--text-sm); grid-row: span 3; }
  .ws h3 { margin-top: 0; font-size: var(--text-md); }
  .ws-a { margin-top: var(--sp-1); }
}
@media (max-width: 640px) {
  .sty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .sty-mini { height: 72px; }
  .sty-cards { display: none; }
  .sty.on .sty-name::after { display: none; }
  .opt { padding-right: var(--sp-1); font-size: var(--text-xs); }
  .og { width: 24px; height: 24px; }
  .fonts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================================
   Acabado: profundidad en pocos lugares elegidos (barra, bloque principal de Inicio, botón principal,
   logotipo e inicio de sesión) y una entrada suave al cambiar de pantalla. Todo sale del color de la marca.
   ===================================================================================== */

/* Barra lateral de marca: luz arriba que cae a un tono más profundo abajo, y un brillo tenue del acento. */
:root[data-side="brand"] .side {
  background:
    radial-gradient(120% 40% at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--brand-solid) 62%, #05070a) 0%, var(--side-bg) 42%, color-mix(in srgb, var(--brand-solid) 38%, #05070a) 100%);
  box-shadow: inset -1px 0 0 rgb(255 255 255 / .06);
}
:root[data-side="brand"] .nav a.active { background: linear-gradient(90deg, rgb(255 255 255 / .16), rgb(255 255 255 / .07)); }

/* Monograma: un leve brillo diagonal para que no se vea plano. */
.logo:not(:has(img)) { background: linear-gradient(145deg, color-mix(in srgb, var(--brand-solid) 86%, #fff), var(--brand-solid) 55%, color-mix(in srgb, var(--brand-solid) 82%, #000)); }

/* Botón principal: luz arriba, sombra del color de la marca y un pequeño levantamiento al pasar el cursor. */
.btn-primary {
  background-image: linear-gradient(180deg, rgb(255 255 255 / .16), rgb(255 255 255 / 0) 60%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 1px 2px hsl(var(--shadow-color) / .18), 0 6px 16px -6px color-mix(in srgb, var(--brand-solid) 70%, transparent);
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 2px 4px hsl(var(--shadow-color) / .18), 0 10px 22px -8px color-mix(in srgb, var(--brand-solid) 80%, transparent); }
.btn-primary:active { transform: none; }

/* Bloque principal de Inicio (cuenta nueva): un resplandor de la marca desde la esquina y el paso siguiente
   con degradado suave hacia la superficie. */
.welcome {
  position: relative; overflow: hidden;
  background:
    radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%),
    radial-gradient(40% 60% at 85% 10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    var(--surface);
}
.ws.next { background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 20%, var(--surface)), var(--brand-soft) 70%); }
.welcome-prog .bar { height: 8px; }
.welcome-prog .bar > i { background: linear-gradient(90deg, var(--brand-mark), color-mix(in srgb, var(--brand-mark) 60%, var(--accent))); }

/* Resumen del día (cuenta con datos): la misma luz de marca, discreta, detrás del titular. */
.brief { position: relative; isolation: isolate; }
.brief::before { content: ''; position: absolute; z-index: -1; inset: -40px 0 -20px -60px; background: radial-gradient(50% 70% at 20% 40%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%); pointer-events: none; }

/* Inicio de sesión: dos luces (marca y acento) y la tarjeta flotando con sombra amplia. */
.login {
  background:
    radial-gradient(60% 60% at 15% 10%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 70%),
    radial-gradient(50% 50% at 90% 95%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
    var(--bg);
}
.login-card { border-color: transparent; box-shadow: 0 1px 2px hsl(var(--shadow-color) / .06), 0 24px 60px -20px hsl(var(--shadow-color) / .35); }

/* Entrada al cambiar de pantalla: el contenido aparece y sube 6 px. Solo se anima lo que se inserta,
   así los redibujos parciales (Morph) no parpadean. Con movimiento reducido queda en 0. */
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.content > * { animation: page-in 320ms var(--ease) both; }
.content > * + * { animation-delay: 40ms; }
.mail-frame { display: block; width: 100%; min-height: 60vh; border: 0; border-radius: 10px; background: #fff; }