@import url("/__assets/3923fab9db3851db0bd1bc177a1ab552abf648b01f6497e32ad23acb76c6363a/css/asesor-loading.css");
@import url("/__assets/4e7c89fb736be692b662fb62b53a01725359379dc92919023e099fc935667c87/css/asesor-directorio.css");
@import url("/__assets/2e8e3c6f22bf02ec52653de11777bc2df3e57910b3f8114f1a69e91794ba202f/css/icon-controls.css");
@import url("/__assets/b671c8f98ae74c4cd1a104eeadffc6f241693fc334cc421f2a0b9348ff6b0ab9/css/asesor-layout-tokens.css");

/* ============================================================
   QuVi Pro · Escritorio — Shell
   (codename interno: "asesor" / "as" / "AS")
   Navegación superior y paneles de trabajo
   QuVi · 2026
   ============================================================ */

/* ---- Tokens ---- */
:root {
  --ink:       #0f172a;
  --mut:       #475569;
  --line:      #e2e8f0;
  --bg:        #f8fafc;
  --brand:     #0d99ff;
  --brand-d: var(--brand);
  /* Compatibilidad de componentes compartidos: Pro usa un único azul. */
  --brand-dark: var(--brand);
  --brand-hover: var(--brand);
  --qv-brand-hover: var(--brand);
  --brand-50:  #e5f3ff;
  --card:      #fff;
  --win:       #16a34a;
  --win-d:     #15803d;
  --warn:      #d97706;
  --err:       #dc2626;
  --err-50:    #fee2e2;

  --topbar-h:           56px;
  --tb-mark-size:       26px;
  --tb-avatar-size:     calc(var(--tb-mark-size) + 4px);
  --sheet-w:            360px;
  --insights-w:         320px;

  --t:       .12s;
  --t-slide: .18s cubic-bezier(.32,.72,0,1);
  --r-pill:  9999px;
}

/* ---- Reset mínimo ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

/* ---- Base tipográfica global — todo hereda desde aquí ---- */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button { font: inherit; cursor: pointer; }

/* El muro cubre también portales/diálogos de herramientas fuera de #asApp.
   Se conserva su estado y sólo se muestran acceso y gestión de suscripción. */
body.as-access-denied > :not(#asAuthGate):not(#subOverlay):not(script):not(style):not(link) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ============================================================
   AUTH GATE
   ============================================================ */
.as-auth-gate {
  position: fixed; inset: 0; z-index: 9900;
  background: linear-gradient(160deg, #cfe7ff 0%, #dceeff 30%, #e9f3ff 65%, #eff5fb 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .25s cubic-bezier(.32,.72,0,1), transform .25s cubic-bezier(.32,.72,0,1);
}
.as-auth-gate.is-hiding {
  opacity: 0; pointer-events: none; transform: scale(1.015);
}

.as-auth-card {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 18px;
  box-shadow: 0 2px 4px rgba(15,23,42,.05), 0 24px 64px rgba(13,153,255,.13);
  width: 100%; max-width: 420px;
  padding: 40px 36px 36px;
}

.as-auth-tolanding {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  color: var(--brand);
  margin-bottom: 20px;
  transition: opacity .15s ease;
  flex: none;
}
.as-auth-tolanding:hover { text-decoration: none; }
.as-auth-logo { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 32px; }
.as-auth-logo-mark { display: flex; align-items: center; gap: 9px; }
.as-auth-logo img { height: 28px; width: auto; }
/* Indicador multidispositivo: el plan incluye escritorio + app móvil. */
.as-auth-devices {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--mut);
  white-space: nowrap;
}
.as-auth-devices svg { width: 15px; height: 15px; color: var(--brand); }
.as-auth-logo-badge {
  font-size: .74rem; font-weight: 700; letter-spacing: .02em; line-height: 1;
  color: oklch(0.62 0.19 252);
  background: oklch(0.96 0.03 252);
  padding: 3px 8px; border-radius: 7px;
}

.as-auth-title {
  font-size: 22px; font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em; color: var(--ink); margin-bottom: 6px;
}
.as-auth-sub {
  font-size: 13px; font-weight: 400; line-height: 1.55;
  color: var(--mut); margin-bottom: 28px;
}
.as-auth-panel { display: flex; flex-direction: column; gap: 14px; }
.as-auth-panel[hidden] { display: none; }

.as-auth-field { display: flex; flex-direction: column; gap: 6px; }
.as-auth-label {
  font-size: 11px; font-weight: 600; line-height: 1;
  letter-spacing: .05em; text-transform: uppercase; color: var(--mut);
}
.as-auth-input {
  font-size: 15px; font-weight: 400; line-height: 1.25;
  color: var(--ink);
  background: rgba(255,255,255,.95);
  border: 1.5px solid var(--line); border-radius: 12px;
  padding: 11px 14px; outline: none; width: 100%;
  transition: border-color var(--t), box-shadow var(--t);
}
.as-auth-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(13,153,255,.14);
}
.as-auth-input::placeholder { color: #94a3b8; }

.as-auth-btn {
  font-size: 14px; font-weight: 600; line-height: 1;
  color: #fff;
  background: var(--brand);
  border: none; border-radius: 12px;
  padding: 13px 20px; cursor: pointer; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: opacity var(--t), transform var(--t);
  text-decoration: none;
}
.as-auth-btn:hover { opacity: .92; }
.as-auth-btn:active { transform: scale(.98); }
.as-auth-btn:disabled { opacity: .5; cursor: not-allowed; }

.as-auth-btn-ghost {
  font-size: 13px; font-weight: 400; line-height: 1;
  color: var(--brand);
  background: none; border: none; padding: 6px 0;
  cursor: pointer; text-align: center;
  transition: opacity var(--t);
}
.as-auth-btn-ghost:hover { opacity: .72; }

.as-auth-error {
  font-size: 12.5px; font-weight: 500; line-height: 1.3;
  color: var(--err);
  background: var(--err-50);
  border: 1px solid rgba(220,38,38,.18);
  border-radius: 8px; padding: 9px 12px; display: none;
}
.as-auth-error.is-visible { display: block; }

/* OTP */
.as-otp-wrap { display: flex; gap: 6px; }
.as-otp-input {
  font-size: 20px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink);
  background: rgba(255,255,255,.95);
  border: 1.5px solid var(--line); border-radius: 12px;
  padding: 10px 0; width: 100%; min-width: 0; text-align: center; outline: none;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.as-otp-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(13,153,255,.14); }
.as-otp-input.is-filled { border-color: var(--brand); background: var(--brand-50); }

.as-spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Upgrade */
.as-upgrade-card { text-align: center; padding: 8px 0; }
.as-upgrade-icon { font-size: 36px; margin-bottom: 16px; display: block; }
.as-upgrade-title { font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--ink); margin-bottom: 8px; }
.as-upgrade-sub   { font-size: 13px; font-weight: 400; line-height: 1.6; color: var(--mut); margin-bottom: 24px; }
/* Separa los botones apilados del muro (Asesor / Elite / Cerrar sesión). */
.as-upgrade-card .as-auth-btn + .as-auth-btn { margin-top: 10px; }
.as-upgrade-card .as-auth-btn-ghost { display: block; width: 100%; margin-top: 14px; line-height: 1.4; }
/* Diferenciador de Elite (justifica la brecha de precio). */
.as-wall-note {
  font-size: 12.5px; font-weight: 600; line-height: 1.5;
  color: var(--brand); margin-top: 16px;
}
/* Leyenda suave FUERA de la tarjeta (bajo la tarjeta, sobre el fondo). */
.as-auth-legend {
  font-size: 12px; font-weight: 500; line-height: 1.3;
  color: #64748b; text-align: center; margin: 16px 0 0; flex: none;
}
/* Pago de un solo mes: dos chips claros, secundarios, separados con divisor. */
.as-wall-once { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.as-wall-once-label {
  display: block; font-size: 12.5px; font-weight: 400;
  color: var(--mut); margin-bottom: 11px;
}
.as-wall-once-opts { display: flex; gap: 8px; }
.as-wall-once-chip {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: rgba(255,255,255,.7); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 10px; cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.as-wall-once-chip:hover { border-color: var(--brand); background: var(--brand-50); }
.as-wall-once-chip:disabled { opacity: .5; cursor: not-allowed; }
.as-wall-once-plan { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.as-wall-once-price { font-size: 12.5px; font-weight: 500; color: var(--brand); }

/* ============================================================
   APP GRID
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: 0 1fr 0;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "topbar topbar topbar"
    "sheet canvas insights";
  height: 100vh; width: 100vw;
  /* La reserva cambia una vez; el riel no anima el ancho del contenido. */
  transition: none;
}
.app[hidden] { display: none !important; }

.app.has-sheet         { grid-template-columns: var(--sheet-w)   1fr 0; }
.app.has-insights      { grid-template-columns: 0                1fr var(--insights-w); }
.app.has-sheet.has-insights { grid-template-columns: var(--sheet-w) 1fr var(--insights-w); }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  grid-area: topbar;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 0;
  gap: 14px; min-width: 0;
}

.tb-left  { margin-inline-start: calc((var(--pro-account-column) - var(--tb-avatar-size)) / 2); display: flex; align-items: center; gap: 12px; min-width: 0; }
.tb-right { display: flex; align-items: center; justify-content: flex-end; gap: var(--pro-action-gap); min-width: 0; }



.tb-brand {
  min-height: 40px;
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--ink);
  font-size: 14px; font-weight: 600; line-height: 1;
  white-space: nowrap; flex: none;
  border: 0; background: none; padding: 0; cursor: pointer;
}
@media (pointer: coarse) { .tb-brand { min-height:44px; } }
.tb-logo  { height: var(--tb-mark-size); width: auto; display: block; }
/* "Pro" tag — idéntico al .pro-brand__tag de la landing /pro */
.tb-pro-tag {
  font-size: .70rem; font-weight: 700; letter-spacing: .02em; line-height: 1;
  color: oklch(0.62 0.19 252);
  background: oklch(0.96 0.03 252);
  padding: 2px 7px; border-radius: 7px;
}
.tb-section {
  display: flex; align-items: center; gap: 8px; justify-self: center;
  min-width: 0; max-width: min(20vw, 360px); color: var(--ink);
}
.tb-context {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.tb-context .ctx-empty { color: var(--mut); }

.tb-btn {
  font-size: 12.5px; font-weight: 500; line-height: 1;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  padding: 7px 13px; border-radius: 9px;
  cursor: pointer; white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
  transition: all var(--t);
}
.tb-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.tb-btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.tb-btn.primary:hover { background: var(--brand); border-color: var(--brand); }
.tb-btn svg { width: 14px; height: 14px; stroke-width: 2; flex: none; }

/* Acciones rápidas de la cabecera: área estable, iconos sin marco permanente. */
.tb-right .tb-btn, .tb-home { width: 40px; height: 40px; padding: 0; justify-content: center; border: 0; border-radius: 10px; background: transparent; color: #52637b; }
.tb-right .tb-btn:hover, .tb-home:hover, .pro-nav-toggle:hover { background: #e5e7eb; }
.tb-right .tb-btn svg, .tb-home svg { width: 18px; height: 18px; stroke-width: 1.9; }
@media (pointer: coarse) { .tb-right .tb-btn, .tb-home { width: 44px; height: 44px; } .tb-right .tb-avatar { height: 44px; } }

/* Uso del plan dentro del menú; sin datos no deja un control vacío. */
.tb-quota[hidden] { display: none !important; }
.tb-quota .tbq-usage { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tb-quota .tbq-item { display: flex; align-items: center; gap: 5px; color: var(--mut); }
.tb-quota .tbq-ico { width: 14px; height: 14px; stroke-width: 2; flex: none; }  /* svg Lucide; hereda color */
.tb-quota .tbq-num { font-size: 12px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.tb-quota .tbq-of { font-size: 11px; font-weight: 500; color: #94a3b8; line-height: 1; }
.tb-quota .tbq-inf { font-size: 15px; font-weight: 600; color: #94a3b8; line-height: 1; }
.tb-quota .tbq-sep { width: 1px; height: 14px; background: var(--line); flex: none; }
/* Estados: pocos restantes / agotado. Color por contraste, no por brillo. */
.tb-quota .tbq-item.is-low { color: #f59e0b; }
.tb-quota .tbq-item.is-low .tbq-num { color: #f59e0b; }
.tb-quota .tbq-item.is-out { color: var(--err); }
.tb-quota .tbq-item.is-out .tbq-num { color: var(--err); }

/* Overlay de uso del plan (reusa el shell .mx-goal de Métricas). */
/* ── Uso del plan: popover anclado al chip (mismo patrón que ayuda/campana) ── */
.qov-panel { position: fixed; z-index: 8000; width: 340px; max-width: calc(100vw - 24px); background: var(--card, #fff); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px rgba(15,23,42,.18); overflow: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease; }
.qov-panel.is-in { opacity: 1; transform: translateY(0); }
.qov-panel[hidden] { display: none !important; }
.qov-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid var(--line); }
.qov-head .mx-goal-ic { flex: none; width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-50); color: var(--brand); }
.qov-head .mx-goal-ic svg { width: 17px; height: 17px; }
.qov-head .mx-goal-htxt { flex: 1; min-width: 0; }
.qov-head .mx-goal-title { font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.qov-head .mx-goal-sub { font-size: 12px; color: var(--mut); margin-top: 2px; }
.qov-head .mx-goal-x { flex: none; appearance: none; width: 28px; height: 28px; border: 1px solid var(--line); background: #fff; border-radius: 8px; color: var(--mut); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.qov-head .mx-goal-x:hover { border-color: var(--brand); color: var(--brand); }
.qov-head .mx-goal-x svg { width: 15px; height: 15px; }
.qov-body { padding: 14px; display: flex; flex-direction: column; gap: 16px; }
.qov-panel .mx-goal-seclbl { display: flex; align-items: center; gap: 6px; }
.qov-panel .mx-goal-seclbl svg { width: 14px; height: 14px; flex: none; }
.qov-panel .qov-big { font-size: 23px; font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -.02em; }
.qov-panel .qov-big-sub { font-size: 12.5px; font-weight: 500; color: var(--mut); letter-spacing: 0; }
.qov-panel .qov-foot { font-size: 12px; color: var(--mut); }
.qov-panel .qov-inf-badge { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--brand); background: var(--brand-50); border: 1px solid #bae0ff; border-radius: 999px; padding: 3px 11px; }
.qov-panel .qov-up { appearance: none; cursor: pointer; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--brand); background: var(--brand-50); color: var(--brand); font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 10px; transition: all var(--t); }
.qov-panel .qov-up:hover { background: var(--brand); color: #fff; }
.qov-panel .qov-up svg { width: 15px; height: 15px; flex: none; }

.tb-avatar {
  position: relative;
  width: var(--pro-account-column); height: 40px; border-radius: 10px; margin-inline-start: calc(var(--pro-shell-inset) - var(--pro-action-gap)); flex: none;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; overflow: visible;
  transition: background var(--t);
}
.tb-avatar-txt {
  display: grid; place-items: center; width: var(--tb-avatar-size); height: var(--tb-avatar-size); border-radius: 50%; background: var(--brand);
  font-size: 10px; font-weight: 700; line-height: 1;
  color: #fff; letter-spacing: .04em; pointer-events: none;
}

/* ============================================================
   NAVEGACIÓN SUPERIOR — familia del riel público, sin expansión lateral.
   ============================================================ */
.pro-nav-toggle, .pro-nav .tool {
  appearance: none; border: 0; background: transparent; color: #52637b;
  display: flex; align-items: center; gap: 9px; border-radius: 10px;
  font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.3; cursor: pointer; text-align: left;
  transition: background .12s, color .12s;
}
.tb-navigation { display:flex; align-items:center; gap:2px; }
.tb-home { position:relative; isolation:isolate; flex:none; }

.pro-nav-toggle { position: relative; isolation: isolate; height: 40px; padding: 0 10px; flex: none; font-size: 13px; font-weight: 500; }
@media (pointer: coarse) { .pro-nav-toggle { height: 44px; } }
.pro-nav-toggle > svg { width: 18px; height: 18px; stroke-width: 1.9; }
.pro-nav-toggle > .pro-nav-chevron { width: 13px; height: 13px; transition: transform .16s; }
.pro-nav-toggle[aria-expanded="true"] > .pro-nav-chevron { transform: rotate(180deg); }
.pro-nav-toggle[aria-expanded="true"] { color: var(--brand); }
.pro-nav-toggle[aria-expanded="true"] { background:#e5e7eb; }
.pro-nav {
  position: fixed; z-index: 50; top: calc(var(--topbar-h) + 8px); left: var(--pro-shell-inset); right: auto;
  width: min(1040px, calc(100vw - var(--pro-shell-inset) - var(--pro-shell-inset) - var(--pro-account-column))); max-width:1040px; margin-inline: 0; padding: 24px 20px 12px;
  --pro-nav-divider: var(--line);
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 36px #213a5c18, 0 2px 6px #213a5c08;
  max-height: calc(100dvh - var(--topbar-h) - 24px); overflow-y: auto; overscroll-behavior: contain;
}
.pro-nav[hidden] { display: none; }
.pro-nav-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pro-nav-group { min-width: 0; padding: 0 18px; }
.pro-nav-group + .pro-nav-group { border-left: 1px solid var(--pro-nav-divider); }
.pro-nav-group h2 { font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--ink); margin: 0 8px 6px; padding-block: 2px; }
.pro-nav .tool { position: relative; min-height: 36px; width: 100%; padding: 7px 8px; gap: 8px; border-radius: 8px; color: #334155; font-family: inherit; font-size: 13px; font-weight: 500; }
.pro-nav .tool.active { color: var(--brand); background: transparent; }
.pro-nav .tool-icon, .pro-nav .tool > svg { color: var(--mut); }
.pro-nav .tool:is(.active, .is-active) :is(.tool-icon, svg) { color: var(--brand); }
.pro-nav .tool-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex: none; position: relative; }
.pro-nav .tool-icon svg { width: 18px; height: 18px; stroke-width: 1.8; }
.pro-nav .tool-label { line-height: 1.3; }
.pro-nav .tool-pro { font-size: 8px; font-weight: 600; letter-spacing: .02em; padding: 2px 4px; border-radius: 4px; color: #60748e; background: #e5e7eb; }
.pro-nav-account { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; border-top: 1px solid var(--pro-nav-divider); margin: 20px 18px 0; padding-top: 10px; }
.pro-nav-account .tool { width: auto; }
.pro-nav-uf { display:inline-flex; align-items:center; gap:16px; padding:7px 8px 7px 0; margin-inline-start:4px; color:var(--mut); font-size:13px; font-weight:400; line-height:18px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.pro-nav-uf::before { content:""; width:1px; height:18px; flex:none; background:var(--pro-nav-divider); }
.pro-nav-uf[hidden] { display:none; }
.pro-nav-account #asSignOutBtn { margin-left: auto; }
.pro-nav-utilities { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; border-top: 1px solid var(--pro-nav-divider); margin: 10px 18px 0; padding-top: 10px; }
.pro-nav-utilities .tool { width: auto; flex-wrap: wrap; }
.pro-nav-account .tool > svg, .pro-nav-utilities .tool > svg { width: 18px; height: 18px; flex: none; }
.pro-nav-utilities:not(:has(> :not([hidden]))) { display: none; }
.pro-nav-account .tool.is-active, .pro-nav-utilities .tool.is-active { color: var(--brand); background: transparent; }
@media (hover: hover) {
  .pro-nav .tool:hover { background: var(--bg); }
  .pro-nav .tool:is(.active, .is-active):hover { background: transparent; }
}
@media (max-width: 1000px) {
  .pro-nav { padding: 20px 8px 10px; }
  .pro-nav-group { padding-inline: 10px; }
}
@media (max-width: 1000px) {
  .pro-nav-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; }
  .pro-nav-group:nth-child(3) { border-left: 0; }
}
@media (max-width: 480px) {
  .pro-nav-uf { margin-inline-start:0; padding-inline-start:8px; }
  .pro-nav-uf::before { display:none; }
  .pro-nav-groups { grid-template-columns: minmax(0, 1fr); gap:16px; }
  .pro-nav-group + .pro-nav-group { border-left:0; border-top:1px solid var(--pro-nav-divider); padding-top:16px; }
}
@media (prefers-reduced-motion: reduce) {
  .pro-nav-toggle, .tb-home, .pro-nav-toggle > .pro-nav-chevron, .pro-nav .tool { transition: none; }
}

/* ============================================================
   SHEET / CANVAS / INSIGHTS
   ============================================================ */
.sheet {
  grid-area: sheet;
  background: var(--card);
  border-right: 1px solid var(--line);
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
}
.canvas {
  grid-area: canvas;
  background: var(--bg);
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
}
.insights {
  grid-area: insights;
  background: var(--card);
  border-left: 1px solid var(--line);
  overflow-y: auto;
}

/* ============================================================
   KBD
   ============================================================ */
kbd {
  font-size: 11px; font-weight: 600; line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  background: #f1f5f9; color: var(--ink);
  border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 5px; padding: 1px 6px;
}

/* ============================================================
   FONDO MODAL COMPARTIDO
   ============================================================ */
.modal-back {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.32);
  z-index: 300;
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 80px;
  animation: fadeIn .18s ease-out;
}

/* Diálogos compartidos de ventas y uso del plan. Métricas tiene CSS propio. */
/* Modal "Mis metas" (editor de objetivos) */
.mx-goal-back { position: fixed; inset: 0; z-index: 400; background: rgba(15,23,42,.34); display: flex; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.mx-goal { width: 100%; max-width: 380px; background: #fff; border-radius: 18px; box-shadow: 0 24px 64px rgba(15,23,42,.22); overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.mx-goal-head { display: flex; align-items: center; gap: 12px; padding: 18px 18px 16px; border-bottom: 1px solid var(--line); }
.mx-goal-ic { width: 38px; height: 38px; border-radius: 11px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-50); color: var(--brand); }
.mx-goal-ic svg { width: 19px; height: 19px; }
.mx-goal-htxt { flex: 1; min-width: 0; }
.mx-goal-title { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.mx-goal-sub { font-size: 12px; font-weight: 400; color: var(--mut); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-goal-x { appearance: none; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; border: 0; background: #f1f5f9; color: var(--mut); display: inline-flex; align-items: center; justify-content: center; flex: none; transition: background var(--t); }
.mx-goal-x:hover { background: #e2e8f0; }
.mx-goal-x svg { width: 15px; height: 15px; }
.mx-goal-body { padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.mx-goal-loading { padding: 36px 0; display: flex; justify-content: center; }
.mx-goal-sec { display: flex; flex-direction: column; gap: 9px; }
.mx-goal-seclbl { font-size: 12px; font-weight: 700; color: var(--brand); }
.mx-goal-field { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; padding: 0 14px; transition: border-color var(--t), box-shadow var(--t); }
.mx-goal-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(13,153,255,.14); }
.mx-goal-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); padding: 11px 0; font-variant-numeric: tabular-nums; }
.mx-goal-unit { font-size: 12.5px; font-weight: 500; color: var(--mut); flex: none; white-space: nowrap; }
.mx-goal-hint { font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--mut); }
.mx-goal-err { font-size: 12.5px; color: var(--err); display: none; }
.mx-goal-err.is-on { display: block; }
.mx-goal-cta { appearance: none; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; background: var(--brand); color: #fff; font: inherit; font-size: 14px; font-weight: 600; padding: 13px; transition: opacity var(--t); }
.mx-goal-cta:hover { opacity: .94; }
.mx-goal-cta:disabled { opacity: .45; cursor: not-allowed; }
.mx-goal-cta-txt { display: inline-flex; align-items: center; gap: 8px; }
.mx-goal-cta-txt svg { width: 16px; height: 16px; }
/* `.as-spinner { display:inline-block }` pisa al atributo [hidden]; forzamos
   que [hidden] gane (si no, el spinner se ve siempre en el CTA). */
.mx-goal-cta-spin[hidden] { display: none; }
/* El spinner (.as-spinner) gira con su propio `transform: rotate`. Lo centra el
   flex del botón (con el texto en display:none); NO le ponemos transform propio

/* ============================================================
   SIMULADOR — embed del recomendador (iframe full-bleed)
   ============================================================ */
/* Host persistente del Simulador: celda 'canvas' del grid de #asApp, hermana de
   #asCanvas (que sí se limpia entre tabs). Se muestra/oculta sin recargar el
   iframe → el motor del recomendador arranca una sola vez. Ocupa el mismo rect
   que el canvas y conserva su alineación. */
.sim-host { grid-area: canvas; display: none; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: #fff; }
.sim-host.is-active { display: flex; }
.sim-wrap { position: relative; flex: 1; min-height: 0; width: 100%; }
.sim-frame { width: 100%; height: 100%; border: 0; display: block; }
/* Safari puede conservar el iframe sin pintar al retirar visibility:hidden.
 * Ocultar sólo la composición del host mantiene el documento pintable;
 * el iframe sigue inert hasta recibir el envío y completar sus estilos. */
.sim-host.is-preparing-home { opacity: 0; pointer-events: none; }

.sim-loading {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; background: var(--bg);
  transition: opacity .3s ease-out;
}
.sim-loading.is-hidden { opacity: 0; pointer-events: none; }
@media(prefers-reduced-motion:reduce) { .sim-loading { transition:none; } }

/* ── Modal de envío ── */
.co-modal-back {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(8,19,43,.48);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; animation: fadeIn .16s ease-out;
}
.co-modal {
  width: 100%; max-width: 440px;
  background: #fff; border-radius: 18px; padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 24px 80px rgba(8,19,43,.32);
  animation: slideUp .2s cubic-bezier(.32,.72,0,1);
}
.co-modal-title { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.co-modal-sub { font-size: 12.5px; font-weight: 400; color: var(--mut); margin-top: 3px; line-height: 1.4; }
.co-field { display: flex; flex-direction: column; gap: 6px; }
.co-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); }
.co-input {
  font-size: 15px; font-weight: 400; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 11px;
  padding: 11px 14px; outline: none; width: 100%;
  transition: border-color var(--t), box-shadow var(--t);
}
.co-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(13,153,255,.14); }
.co-input::placeholder { color: #94a3b8; }
.co-err { font-size: 12.5px; font-weight: 400; color: var(--err); background: var(--err-50); border-radius: 8px; padding: 9px 12px; display: none; }
.co-err.is-on { display: block; }
.co-modal-actions { display: flex; gap: 10px; margin-top: 2px; }
.co-btn-ghost {
  flex: none; appearance: none; border: 1px solid var(--line); background: #fff;
  font-size: 14px; font-weight: 500; color: var(--mut);
  padding: 12px 18px; border-radius: 12px; cursor: pointer; transition: all var(--t);
}
.co-btn-ghost:hover { background: #f1f5f9; color: var(--ink); }
.co-btn-primary {
  flex: 1; appearance: none; border: 0; cursor: pointer;
  background: var(--brand); color: #fff;
  font-size: 14px; font-weight: 600; padding: 12px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: opacity var(--t);
}
.co-btn-primary:hover { opacity: .92; }
.co-btn-primary:disabled { opacity: .6; cursor: default; }
/* Botón WhatsApp — verde de marca WhatsApp, sin glow. */
.co-btn-wa {
  flex: 1; appearance: none; border: 0; cursor: pointer;
  background: #25d366; color: #fff;
  font-size: 14px; font-weight: 600; padding: 12px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: opacity var(--t);
}
.co-btn-wa:hover { opacity: .92; }
.co-btn-wa:disabled { opacity: .6; cursor: default; }
.co-btn-ic { width: 16px; height: 16px; flex: none; }
.co-label-opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: color-mix(in oklch, var(--mut) 65%, transparent); }
.co-spin { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0; }
.co-modal-note { font-size: 11.5px; font-weight: 400; line-height: 1.5; color: var(--mut); }
/* Aviso amigable: en escritorio WhatsApp va por link; el PDF adjunto es en la app. */
.co-modal-hint {
  display: flex; align-items: flex-start; gap: 9px;
  background: color-mix(in oklch, var(--brand) 6%, #fff);
  border: 1px solid color-mix(in oklch, var(--brand) 16%, #e2e8f0);
  border-radius: 11px; padding: 10px 12px;
  font-size: 12px; line-height: 1.45; color: color-mix(in oklch, var(--ink) 72%, transparent);
}
.co-modal-hint svg { width: 16px; height: 16px; flex: none; color: var(--brand); margin-top: 1px; }
.co-modal-hint b { font-weight: 600; color: var(--ink); }
.co-success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 12px 4px 4px; }
.co-success-ic { width: 48px; height: 48px; border-radius: 50%; background: #ecfdf5; color: #047857; font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.co-success-title { font-size: 17px; font-weight: 700; color: var(--ink); }
.co-success-sub { font-size: 13px; font-weight: 400; color: var(--mut); line-height: 1.5; }
.co-success .co-btn-primary { margin-top: 8px; min-width: 120px; flex: none; }

/* ============================================================
   MODAL INFORMATIVO CANÓNICO (réplica QuVi Pro Performance)
   ============================================================ */
.am-backdrop {
  position: fixed; inset: 0; z-index: 400;
  background: rgb(247 248 250 / 86%);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; animation: fadeIn .16s ease-out;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .am-backdrop { background: rgb(247 248 250 / 58%); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
}
@media (prefers-reduced-transparency: reduce) {
  .am-backdrop { background: rgb(247 248 250 / 94%); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) { .am-backdrop { background: Canvas; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.am-backdrop.is-closing { animation: fadeOut .16s ease-in forwards; }
@keyframes fadeOut { to { opacity: 0; } }

.am-card {
  width: 100%; max-width: 380px;
  background: #fff; border-radius: 18px;
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: none; border: 1px solid var(--line);
  max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain;
  animation: slideUp .2s cubic-bezier(.32,.72,0,1);
}
.am-backdrop.is-closing .am-card { animation: none; }
@media (prefers-reduced-motion: reduce) { .am-backdrop, .am-card { animation: none; } }

.am-head { display: flex; align-items: center; gap: 14px; }
.am-badge {
  width: 52px; height: 52px; border-radius: 14px;
  background: #fff; border: 2px solid;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.am-badge-icon { display: flex; }
.am-badge-icon svg { width: 22px; height: 22px; }
.am-badge-num { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.am-badge-num--sm { font-size: 16px; letter-spacing: -.03em; }
.am-head-text { flex: 1; min-width: 0; }
.am-title { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.am-sub { font-size: 13px; font-weight: 400; color: var(--mut); line-height: 1.45; margin-top: 2px; }

.am-table {
  background: rgba(15,23,42,.04); border-radius: 12px;
  padding: 12px; display: flex; flex-direction: column; gap: 12px;
}
.am-row { display: flex; align-items: flex-start; gap: 14px; }
.am-val-wrap { min-width: 48px; text-align: center; flex: none; }
.am-val { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.am-val-sub { font-size: 9px; font-weight: 700; color: var(--mut); text-transform: uppercase; letter-spacing: .03em; margin-top: 1px; }
.am-row-text { flex: 1; min-width: 0; }
.am-row-title { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.am-row-body { font-size: 12.5px; font-weight: 400; color: var(--mut); line-height: 1.45; margin-top: 2px; }

/* Señales con barras de puntos */
.am-signal-row { display: flex; align-items: center; gap: 10px; }
.am-signal-text { flex: 1; min-width: 0; }
.am-row-detail { font-size: 11.5px; font-weight: 500; color: var(--mut); margin-top: 1px; }
.am-dots { display: flex; gap: 4px; flex: none; }
.am-dot { width: 8px; height: 8px; border-radius: 4px; }

/* Píldoras de estado */
.am-states { display: flex; gap: 6px; }
.am-state {
  flex: 1; text-align: center; padding: 8px 4px;
  border-radius: 10px; border: 1px solid rgba(15,23,42,.08);
  background: rgba(15,23,42,.03);
}
.am-state-label { font-size: 12px; font-weight: 600; color: var(--mut); }
.am-state.is-active .am-state-label { font-weight: 700; }
.am-state-range { font-size: 10px; font-weight: 500; color: var(--mut); margin-top: 2px; }

.am-cta {
  background: var(--brand); color: #fff;
  border: 0; border-radius: var(--r-pill); padding: 12px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: opacity var(--t);
}
.am-cta:hover { opacity: .92; }
.am-cta:active { transform: scale(.99); }

/* Botón "i" en cards */
.mx-info-btn {
  appearance: none; border: 0; background: transparent;
  color: var(--faint, #94a3b8); cursor: pointer;
  padding: 0; display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: none;
  transition: color var(--t);
}
.mx-info-btn svg { width: 16px; height: 16px; }
.mx-info-btn:hover { color: var(--brand); }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp  { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============================================================================
   Tab "Directorio de planes" (asesor-planes-view.js)
   ========================================================================== */
.canvas.dir-canvas { padding: 0; overflow-y: auto; }
/* width:100% es CLAVE: .dir-wrap es flex-item de #asCanvas (display:flex column).
   Con margin:0 auto se centra, pero sin width definido tomaría el ancho de su
   CONTENIDO (la tabla crecía con los nombres y difería de las tarjetas). Con
   width:100% queda con ancho definido (llena hasta max-width), igual en lista y
   tarjetas, con o sin overlay. */
.dir-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 28px 28px 56px; }
.dir-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 60vh; color: var(--mut, #64748b); }

/* Hero */
.dir-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.dir-title { font-size: 30px; line-height: 1.1; letter-spacing: -0.5px; font-weight: 700; color: var(--ink, #0f172a); margin: 0; }
.dir-sub { margin: 6px 0 0; font-size: 14px; color: var(--mut, #64748b); }
.dir-sub strong { color: var(--brand, #0d99ff); }
.dir-search { flex: 1 1 280px; max-width: 380px; }
.dir-search input { width: 100%; height: 44px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line, #e2e8f0); background: #fff; font: inherit; font-size: 14px; color: var(--ink, #0f172a); outline: none; transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }
.dir-search input:focus { border-color: var(--brand, #0d99ff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #0d99ff) 14%, transparent); }

/* Toolbar: chips + sort */
.dir-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 22px; }
/* Fila 2: controles de tabla (Vista/Ordenar/Por página) a la izquierda y
   "Caballitos" al extremo derecho (es otra cosa: abre tus favoritos). */
.dir-toolbar-row2 { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.dir-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.dir-chip { appearance: none; cursor: pointer; border: 1px solid var(--line, #e2e8f0); background: #fff; color: var(--ink, #334155); font: inherit; font-size: 13px; font-weight: 600; height: 34px; padding: 0 14px; border-radius: 999px; transition: all .15s; }
.dir-chip:hover { border-color: #cbd5e1; }
.dir-chip.is-on { color: #fff; background: var(--ink, #0f172a); border-color: transparent; }

/* Controles de la derecha (orden + por página), separados de los chips de
   isapre para que no se confundan con los filtros. */
.dir-controls { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.dir-ctl { display: flex; align-items: center; gap: 8px; }
.dir-ctl-lbl { font-size: 12px; font-weight: 600; color: var(--mut, #94a3b8); white-space: nowrap; }
/* "Ordenar" como control segmentado (un bloque con 3 opciones): claramente
   distinto de los chips de isapre (filtros sueltos). Sin glow: thumb sólido. */
.dir-seg { display: inline-flex; gap: 2px; padding: 3px; background: color-mix(in srgb, var(--line, #e2e8f0) 45%, #fff); border: 1px solid var(--line, #e2e8f0); border-radius: 10px; }
.dir-segbtn { appearance: none; cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--mut, #64748b); font: inherit; font-size: 12.5px; font-weight: 600; height: 30px; padding: 0 11px; border-radius: 8px; transition: all .15s; }
.dir-segbtn:hover { color: var(--ink, #0f172a); }
.dir-segbtn.is-on { background: #fff; color: var(--ink, #0f172a); border-color: var(--line, #e2e8f0); }
/* Selector "por página": select nativo estilizado, con chevron propio. */
.dir-select { appearance: none; -webkit-appearance: none; cursor: pointer; border: 1px solid var(--line, #e2e8f0); background-color: #fff; color: var(--ink, #334155); font: inherit; font-size: 12.5px; font-weight: 600; height: 34px; padding: 0 30px 0 12px; border-radius: 10px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; }
.dir-select:hover { border-color: #cbd5e1; }
/* Toggle de vista: botones de solo ícono dentro del segmentado. */
.dir-segbtn-ic { padding: 0 9px; }
.dir-seg-ic { width: 15px; height: 15px; flex: none; display: block; }
/* Vista compacta = tabla densa: filas con columnas alineadas, fácil de escanear. */
.dir-tablewrap { overflow-x: auto; }
.dir-table { display: block; min-width: min-content; background: #fff; border: 1px solid var(--line, #e8edf3); border-radius: 14px; overflow: hidden; }
.dir-thead, .dir-trow { display: grid; grid-template-columns: 40px 100px minmax(180px, 1.6fr) 88px 88px 96px 72px 100px 114px; align-items: center; gap: 8px; padding: 0 16px; }
.dir-thead { height: 40px; background: color-mix(in srgb, var(--line, #f1f5f9) 40%, #fff); border-bottom: 1px solid var(--line, #e8edf3); }
.dir-th { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 0; text-align: left; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--mut, #94a3b8); white-space: nowrap; transition: color .12s; }
.dir-th:hover { color: var(--ink, #334155); }
.dir-th.is-sorted { color: var(--brand, #0d99ff); }
.dir-th-static { cursor: default; }
.dir-trow { min-height: 56px; border-bottom: 1px solid color-mix(in srgb, var(--line, #e8edf3) 55%, #fff); transition: background .12s; }
.dir-trow:last-child { border-bottom: 0; }
.dir-trow:hover { background: color-mix(in srgb, var(--brand, #0d99ff) 5%, #fff); }
.dir-tc { min-width: 0; font-size: 13px; color: var(--ink, #0f172a); }
.dir-tc-isapre .dir-logo { height: 18px; }
.dir-tc-plan { display: flex; flex-direction: column; gap: 1px; }
.dir-tplan { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir-tcode { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--mut, #94a3b8); }
.dir-tnum { font-weight: 600; font-variant-numeric: tabular-nums; }
.dir-tnota { font-weight: 700; color: #047857; }
.dir-tc-price { display: flex; flex-direction: column; }
.dir-tprice-uf { font-weight: 700; font-size: 14px; color: var(--ink, #0f172a); }
.dir-tprice-clp { font-size: 11.5px; font-weight: 600; color: var(--mut, #94a3b8); }
.dir-tc-actions { display: flex; gap: 6px; justify-content: flex-end; }
.dir-tbtn { appearance: none; cursor: pointer; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line, #e2e8f0); background: #fff; color: var(--ink, #334155); border-radius: 9px; transition: all .15s; }
.dir-tbtn:hover { background: #f1f5f9; }
.dir-tbtn-primary { border: 0; background: var(--brand, #0d99ff); color: #fff; }
.dir-tbtn-primary:hover { background: var(--brand, #0d99ff); opacity: .92; }
.dir-tbtn-ic { width: 15px; height: 15px; flex: none; }

/* "Lo más cotizado" — riel de tracción (sección destacada del directorio) */
.dir-top { margin: 4px 0 18px; }
.dir-top-head { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.dir-top-flame { width: 17px; height: 17px; color: #f97316; }
.dir-top-title { font-size: 16px; font-weight: 700; color: var(--ink, #0f172a); letter-spacing: -0.2px; }
.dir-top-hint { font-size: 13px; font-weight: 500; color: var(--mut, #64748b); }
.dir-top-rail { display: flex; gap: 12px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: thin; }
.dir-top-card {
  flex: 0 0 200px; width: 200px; text-align: left;
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 16px;
  padding: 14px; cursor: pointer; font: inherit;
  transition: border-color .16s;
}
/* Hover/focus por contraste de borde — sin resplandor ni levantamiento (el
   riel recorta en vertical por overflow, un translateY cortaría el borde). */
.dir-top-card:hover { border-color: var(--brand, #0d99ff); }
.dir-top-card:focus-visible { outline: none; border-color: var(--brand, #0d99ff); }
.dir-top-rank {
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--brand, #0d99ff); color: #fff;
  font-size: 12px; font-weight: 800; line-height: 24px; text-align: center;
}
.dir-top-name {
  font-size: 13.5px; font-weight: 700; color: var(--ink, #0f172a); line-height: 1.3;
  min-height: 35px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.dir-top-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dir-top-isapre {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
  color: var(--mut, #64748b); background: #eef2f7; padding: 3px 8px; border-radius: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dir-top-uf { font-size: 14px; font-weight: 800; color: var(--ink, #0f172a); white-space: nowrap; }

/* Skeleton del riel (placeholder mientras carga el ranking) */
.dir-top-skel { pointer-events: none; cursor: default; animation: dirTopSkel 1.2s ease-in-out infinite; }
.dir-top-skel:hover { border-color: var(--line, #e2e8f0); }
.dir-top-skel-rank, .dir-top-skel-name, .dir-top-skel-foot { display: block; background: #eef2f7; border-radius: 8px; }
.dir-top-skel-rank { width: 24px; height: 24px; border-radius: 999px; }
.dir-top-skel-name { height: 35px; }
.dir-top-skel-foot { height: 18px; width: 70%; }
@keyframes dirTopSkel { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* Frontera → sección "Todos los planes" */
.dir-sectionhead {
  font-size: 16px; font-weight: 700; color: var(--ink, #0f172a); letter-spacing: -0.2px;
  border-top: 1px solid var(--line, #e2e8f0); padding-top: 16px; margin-bottom: 14px;
}

/* Grid de cards */
.dir-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dir-empty { grid-column: 1 / -1; text-align: center; color: var(--mut, #64748b); padding: 60px 0; }

.dir-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line, #e8edf3); border-radius: 18px; padding: 20px 20px 18px; overflow: hidden; transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s; }
.dir-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -16px rgba(15,23,42,.22), 0 4px 12px -6px rgba(15,23,42,.08); }

.dir-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.dir-card-isapre { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--mut, #64748b); min-width: 0; }
.dir-logo { height: 20px; width: auto; max-width: 104px; object-fit: contain; flex: none; }
.dir-isapre-name { font-weight: 600; color: var(--ink, #0f172a); }
.dir-card-isapre .dir-linea { color: var(--mut, #94a3b8); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-nota { font-size: 13px; font-weight: 700; color: #047857; background: color-mix(in srgb, #10b981 12%, #fff); border: 1px solid color-mix(in srgb, #10b981 26%, transparent); border-radius: 9px; padding: 2px 8px; flex: none; }

.dir-name { font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--ink, #0f172a); margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dir-code { font-size: 11.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--mut, #94a3b8); margin: 3px 0 0; }

/* Separador sutil entre el código y los KPI + respiro vertical. */
.dir-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--line, #e8edf3) 55%, #fff); margin-bottom: 14px; }
/* KPI: ícono a la izquierda + (label arriba / valor abajo) a la derecha. */
.dir-metric { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; padding: 8px 9px; border-radius: 11px; background: color-mix(in srgb, var(--line, #f1f5f9) 45%, #fff); text-align: center; }
.dir-metric-txt { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.dir-ic { width: 17px; height: 17px; flex: none; color: var(--mut, #94a3b8); }
.dir-metric-lbl { font-size: 10.5px; font-weight: 500; color: var(--mut, #94a3b8); white-space: nowrap; }
.dir-metric-val { font-size: 14px; font-weight: 700; color: var(--ink, #0f172a); }

.dir-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.dir-price-uf { font-size: 20px; font-weight: 800; color: var(--ink, #0f172a); letter-spacing: -0.3px; }
.dir-price-clp { font-size: 13px; font-weight: 600; color: var(--mut, #94a3b8); }
.dir-price-na { font-size: 13px; font-weight: 600; color: var(--mut, #94a3b8); }
.dir-prest { font-size: 12px; color: var(--mut, #94a3b8); margin-bottom: 14px; }

.dir-actions { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: auto; }
.dir-btn { appearance: none; cursor: pointer; height: 38px; border-radius: 12px; font: inherit; font-size: 13px; font-weight: 650; transition: all .15s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.dir-btn-ic { width: 14px; height: 14px; flex: none; }
.dir-btn-pdf { border: 1px solid var(--line, #e2e8f0); background: #fff; color: var(--ink, #334155); }
.dir-btn-pdf:hover { background: #f1f5f9; }
.dir-btn-detail { border: 0; background: var(--brand, #0d99ff); color: #fff; }
.dir-btn-detail:hover { opacity: .92; }
/* Botón compartir (solo ícono) en las tarjetas. */
.dir-btn-icon { width: 38px; padding: 0; flex: none; border: 1px solid var(--line, #e2e8f0); background: #fff; color: var(--ink, #334155); }
.dir-btn-icon:hover { background: #f1f5f9; }
/* Ícono de WhatsApp con su color de marca (tabla y tarjetas). */
.dir-btn-icon, .dir-tbtn[data-share] { color: #25d366; }

/* Paginación */
.dir-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; }
.dir-pager:empty { display: none; }
.dir-pagebtn { appearance: none; cursor: pointer; border: 1px solid var(--line, #e2e8f0); background: #fff; color: var(--ink, #0f172a); font: inherit; font-size: 13px; font-weight: 600; height: 38px; padding: 0 16px; border-radius: 12px; transition: all .15s; }
.dir-pagebtn:hover:not([disabled]) { border-color: var(--brand, #0d99ff); color: var(--brand, #0d99ff); }
.dir-pagebtn[disabled] { opacity: .4; cursor: default; }
.dir-pageinfo { font-size: 13px; color: var(--mut, #64748b); }

/* Directorio — rango de cobertura compacto + etiqueta de precio base */
.dir-metric-val { font-size: 13px; white-space: nowrap; }
.dir-price { flex-wrap: wrap; }
.dir-price-base { flex-basis: 100%; font-size: 11px; font-weight: 500; color: var(--mut, #94a3b8); margin-top: 1px; }

/* Directorio — badge de Nota con etiqueta (para no confundir con valor base) */
.dir-nota { display: inline-flex; align-items: baseline; gap: 5px; }
.dir-nota-lbl { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .8; }

/* Directorio — botones: "Ver PDF" y "Ver en simulador" iguales (ambos respiran) + compartir (ícono). */
.dir-actions { grid-template-columns: 1fr 1fr auto; }
.dir-btn { white-space: nowrap; font-size: 12.5px; }

/* ── Caballitos de batalla (favoritos) ─────────────────────────────────────── */
/* Estrella en tarjeta y fila: contorno gris, dorada al marcar (mismo dorado que la app). */
.dir-fav { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 2px; line-height: 0; color: var(--mut, #94a3b8); transition: color .12s, transform .12s; }
.dir-fav svg { width: 19px; height: 19px; display: block; }
.dir-fav:hover { color: #d9a521; transform: scale(1.08); }
.dir-fav.is-fav { color: #d9a521; }
.dir-fav-sm svg { width: 17px; height: 17px; }
.dir-card-tr { display: flex; align-items: center; gap: 8px; flex: none; }
.dir-tc-fav { display: flex; justify-content: center; }

/* Botón "Caballitos (N)" en la barra. */
.dir-cab-btn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--line, #e2e8f0); background: #fff; color: var(--ink, #334155); font: inherit; font-size: 12.5px; font-weight: 600; border-radius: 999px; transition: all .15s; }
.dir-cab-btn i[data-lucide], .dir-cab-btn svg { width: 15px; height: 15px; color: #d9a521; flex: none; }
.dir-cab-btn:hover { border-color: #cbd5e1; }
.dir-cab-btn.is-on { border-color: color-mix(in srgb, #d9a521 45%, var(--line, #e2e8f0)); background: color-mix(in srgb, #d9a521 9%, #fff); }
.dir-cab-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: color-mix(in srgb, var(--line, #e2e8f0) 60%, #fff); color: var(--mut, #64748b); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.dir-cab-btn.is-on .dir-cab-count { background: #d9a521; color: #fff; }

/* Panel derecho de Caballitos: vive en #asInsights del shell (MISMO mecanismo
   que Métricas: app.has-insights abre la columna y el canvas se corre con
   transición). #asInsights ya trae fondo + border-left + scroll. */
.dir-rail-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 18px; background: var(--card, #fff); border-bottom: 1px solid var(--line, #e8edf3); }
.dir-rail-title { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--ink, #0f172a); }
.dir-rail-knight { width: 18px; height: 18px; flex: none; color: #d9a521; }
.dir-rail-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #d9a521; color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.dir-rail-empty { padding: 22px 18px; font-size: 12.5px; line-height: 1.5; color: var(--mut, #94a3b8); }
.dir-rail-list { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.dir-rail-item { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 11px; transition: background .12s; }
.dir-rail-item:hover { background: color-mix(in srgb, var(--line, #f1f5f9) 45%, #fff); }
.dir-rail-logo { height: 16px; width: auto; max-width: 72px; object-fit: contain; flex: none; }
.dir-rail-logo-x { font-size: 10px; font-weight: 700; color: var(--mut, #94a3b8); width: 24px; text-transform: uppercase; flex: none; }
.dir-rail-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dir-rail-name { font-size: 12.5px; font-weight: 600; color: var(--ink, #0f172a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir-rail-code { font-size: 10.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--mut, #94a3b8); }
/* Item completo clickeable → ver en simulador (nombre azul al hover). */
.dir-rail-item.is-openable { cursor: pointer; }
.dir-rail-item.is-openable:hover .dir-rail-name { color: var(--brand, #0d99ff); }
/* Valor base del plan (reemplaza al ícono que estaba). */
.dir-rail-uf { font-size: 12.5px; font-weight: 700; color: var(--ink, #0f172a); white-space: nowrap; flex: none; }
/* Quitar de Caballitos: estrella dorada, rojo al hover. */
.dir-rail-rm { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 4px; line-height: 0; flex: none; border-radius: 8px; color: #d9a521; transition: all .12s; }
.dir-rail-rm svg { width: 17px; height: 17px; display: block; }
.dir-rail-rm:hover { background: color-mix(in srgb, #ef4444 10%, #fff); color: #ef4444; }
/* Vista de tarjetas: 2 por fila SOLO cuando el overlay está abierto. */
.app.has-insights .dir-grid { grid-template-columns: repeat(2, 1fr); }
/* Con el overlay abierto, más aire a la derecha entre la tabla y el panel. */
.app.has-insights .dir-wrap { padding-right: 48px; }
/* Overlay un poco más ancho SOLO en el directorio (no afecta a Métricas). */
.app.dir-rail-wide { --insights-w: 360px; }

/* ── Tab Mis Caballitos de batalla ─────────────────────────────────────────── */
.canvas.cab-canvas { padding: 0; overflow-y: auto; }
.cab-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 28px 28px 56px; }
.cab-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 60vh; color: var(--mut, #64748b); font-size: 14px; }

/* Hero */
.cab-hero { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.cab-title { font-size: 26px; font-weight: 700; letter-spacing: -0.3px; color: var(--ink, #0f172a); margin: 0 0 4px; }
.cab-sub { font-size: 14px; color: var(--mut, #64748b); margin: 0; }
.cab-count { font-weight: 700; color: var(--brand, #0d99ff); }

/* Controles de orden */
.cab-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 16px; }
.cab-summary { margin-left: auto; text-align: right; }
/* Mismo límite útil y filas canónicas que el Directorio de Pro. */
#asApp.app[data-pro-page="caballitos"] .cab-wrap {
  max-width: calc(var(--plans-shell-max) - var(--plans-shell-padding) - var(--plans-shell-padding) - 2px);
}
.cab-table { margin-top: 0; }

/* Estado vacío */
.cab-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 72px 24px; gap: 10px; }
.cab-empty-title { font-size: 18px; font-weight: 700; color: var(--ink, #0f172a); margin: 0; }
.cab-empty-body { font-size: 14px; color: var(--mut, #64748b); max-width: 360px; margin: 0; line-height: 1.55; }
.cab-empty-inline-star { width:16px; height:16px; vertical-align:-3px; }
.cab-empty-btn { appearance: none; display: inline-flex; align-items: center; min-height: 44px; gap: 8px; margin-top: 10px; padding: 10px 20px; border-radius: var(--r-pill, 9999px); border: 1px solid var(--line, #e2e8f0); background: #fff; color: var(--ink, #334155); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .15s; }
.cab-empty-btn:hover { border-color: var(--brand, #0d99ff); color: var(--brand, #0d99ff); background: var(--brand-50, #eff8ff); }
.cab-empty-btn-ic { width: 15px; height: 15px; }
.cab-empty-btn-arrow { width: 13px; height: 13px; }

/* ── Aviso para móvil/touch: el dashboard es de escritorio ──────────────────── */
.as-mobile-gate { display: none; position: fixed; inset: 0; z-index: 100000; align-items: center; justify-content: center; padding: 28px; background: linear-gradient(160deg, #eaf4ff 0%, #f6f9fc 60%); }
.as-mg-card { max-width: 360px; text-align: center; background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 22px; padding: 34px 26px; }
.as-mg-icon { display: block; width: 50px; height: 50px; margin: 0 auto 16px; color: var(--brand, #0d99ff); }
.as-mg-title { font-size: 20px; font-weight: 800; color: var(--ink, #0f172a); margin: 0 0 8px; line-height: 1.25; }
.as-mg-sub { font-size: 14px; line-height: 1.55; color: var(--mut, #64748b); margin: 0 0 14px; }
.as-mg-note { font-size: 13px; line-height: 1.5; color: var(--ink, #334155); margin: 0; }
.as-mg-note strong { color: var(--brand, #0d99ff); }
.as-mg-bypass { margin-top: 18px; width: 100%; padding: 10px 16px; background: none; border: 1px solid var(--line, #e2e8f0); border-radius: 10px; font-size: 13px; color: var(--mut, #64748b); cursor: pointer; }
.as-mg-bypass:hover { background: var(--surface, #f8fafc); }
/* Mobile gate desactivado temporalmente */

/* ============================================================
   GUÍA DE SALUD · Herramientas Pro (ruta compatible: glosario)
   ============================================================ */
#asApp.app[data-pro-page="glosario"] { --insights-w:460px; --bg:#f7f8fa; }
#asApp.app[data-pro-page="glosario"].has-insights { grid-template-columns:var(--pro-workspace-inset) 0 minmax(0,1fr) var(--insights-w) 0; }
.canvas.glos-canvas,.insights.glos-insights { --ink:#1f2937; --mut:#64748b; --line:#e3e9f0; --bg:#f7f8fa; }
.canvas.glos-canvas { padding:0; background:var(--bg); }
#asApp.app[data-pro-page="glosario"].has-insights > .glos-canvas { padding-right:var(--pro-page-gutter); }
#asApp.app[data-pro-page] > .glos-insights[data-qv-panel-moving] { visibility:visible; border-left:1px solid var(--line); }
.as-guide-wrap { padding-block:28px var(--pro-page-end-space); container:guide / inline-size; }
:is(.glos-canvas,.glos-insights) button { appearance:none; font:inherit; cursor:pointer; }
:is(.glos-canvas,.glos-insights) [hidden] { display:none!important; }
:is(.glos-canvas,.glos-insights) svg { width:16px; height:16px; flex:none; }
:is(.glos-canvas,.glos-insights) :is(button,input,a,[tabindex]):focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
.as-guide-back,.as-guide-link { display:inline-flex; align-items:center; gap:8px; min-height:36px; border:0; padding:4px 0; background:transparent; color:var(--mut); font-size:13px!important; font-weight:500!important; text-align:left; }
.as-guide-back:hover,.as-guide-link:hover { color:var(--brand); }
.as-guide-header { display:flex; justify-content:space-between; align-items:center; gap:24px; margin:12px 0 28px; }
.as-guide-header h1 { font-size:26px; font-weight:700; line-height:1.2; letter-spacing:-.025em; color:#0b1220; }
.as-guide-header p { margin-top:8px; color:var(--mut); font-size:14px; line-height:1.5; }
.as-guide-search { display:flex; align-items:center; gap:8px; width:360px; max-width:100%; min-height:40px; flex:none; padding:0 12px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--mut); }
.as-guide-search:focus-within { border-color:var(--brand); }
.as-guide-search input { appearance:none; background:transparent; color:var(--ink); border:0; outline:0; width:100%; min-width:0; font:400 13px/20px Inter,sans-serif; padding-block:9px; }
.as-guide-search input::-webkit-search-cancel-button { appearance:none; }
.as-guide-search input::placeholder { color:var(--mut); }
.as-guide-search button { border:0; background:transparent; color:var(--mut); padding:6px; display:flex; }
.as-guide-tabs { display:flex; gap:24px; align-items:center; border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:24px; }
.as-guide-tabs button { border:0; background:transparent; color:var(--mut); font-size:13px; font-weight:500; min-height:36px; padding:4px 0; display:flex; align-items:center; gap:8px; }
.as-guide-tabs button:hover { color:var(--ink); }
.as-guide-tabs button[aria-current="page"] { color:var(--brand); }
.as-guide-tabs span { font-size:11px; font-weight:600; }
.as-guide-topics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.as-guide-topic { display:flex; flex-direction:column; align-items:stretch; text-align:left; padding:24px; background:#fff; border:1px solid var(--line); border-radius:16px; color:var(--ink); min-width:0; }
.as-guide-topic:hover { border-color:var(--brand); }
.as-guide-topic-label { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:500; color:var(--mut); }
.as-guide-topic-label svg { width:18px; height:18px; }
.as-guide-question { font-size:16px; font-weight:600; line-height:1.4; margin-top:24px; }
.as-guide-insight { display:block; font-size:14px; line-height:1.5; font-weight:400; color:var(--mut); margin-top:12px; margin-bottom:24px; }
.as-guide-topic-foot { margin-top:auto; padding-top:16px; border-top:1px solid #e9edf2; display:flex; justify-content:space-between; align-items:center; gap:8px; color:var(--mut); font-size:12px; }
.as-guide-topic:hover .as-guide-topic-foot { color:var(--brand); }
.as-guide-results-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:0 0 16px; }
.as-guide-results-head h2 { font-size:18px; font-weight:600; line-height:1.4; }
.as-guide-results-head > span { font-size:12px; color:var(--mut); white-space:nowrap; }
.as-guide-az { display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding-bottom:20px; }
.as-guide-az button { min-width:32px; min-height:32px; border:0; border-radius:8px; background:transparent; color:var(--mut); font-size:13px; font-weight:500; padding:4px 8px; }
.as-guide-az button:hover { background:#e5e7eb; }
.as-guide-az button[aria-pressed="true"] { background:var(--brand-50); color:var(--brand); }
.as-guide-az button:disabled { opacity:.35; cursor:default; background:transparent; }
.as-guide-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px; }
.as-guide-term { display:flex; align-items:center; justify-content:space-between; gap:20px; text-align:left; min-width:0; min-height:92px; width:100%; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); padding:16px 12px; border-radius:0; }
.as-guide-term > span { min-width:0; }
.as-guide-term strong { font-size:14px; line-height:20px; font-weight:600; display:block; }
.as-guide-term svg { color:var(--mut); }
.as-guide-excerpt { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:12px; line-height:18px; color:var(--mut); margin-top:4px; }
.as-guide-term:hover { background:#fff; }
.as-guide-term[aria-expanded="true"] { background:var(--brand-50); }
.as-guide-term[aria-expanded="true"] strong,.as-guide-term[aria-expanded="true"] svg { color:var(--brand); }
.as-guide-empty { padding:64px 16px; text-align:center; }
.as-guide-empty h3 { font-size:16px; font-weight:600; }
.as-guide-empty p { color:var(--mut); font-size:14px; margin:8px 0 16px; }
.insights.glos-insights { padding:0; overflow-x:hidden; background:#fff; }
.as-guide-detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:24px; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; z-index:2; }
.as-guide-detail-head p { font-size:12px; line-height:18px; color:var(--mut); margin-bottom:8px; }
.as-guide-detail-head h2 { font-size:18px; font-weight:600; line-height:1.4; overflow-wrap:anywhere; }
.as-guide-close { display:flex; align-items:center; justify-content:center; flex:none; width:36px; height:36px; border:1px solid var(--line); border-radius:50%; background:#fff; color:var(--mut); }
.as-guide-close:hover { background:#e5e7eb; }
.as-guide-detail-body { padding:24px; }
.as-guide-detail-body > .as-guide-back { margin-bottom:16px; }
.as-guide-definition { font-size:14px; font-weight:400; line-height:1.65; color:var(--ink); overflow-wrap:anywhere; }
.as-guide-definition strong { font-weight:600; }
.as-guide-definition a { color:var(--brand); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.as-guide-apply { border:1px solid var(--line); border-radius:16px; padding:20px; margin-top:28px; background:var(--bg); }
.as-guide-apply h3,.as-guide-connections h3 { font-size:13px; font-weight:600; line-height:1.5; }
.as-guide-apply p { font-size:12px; line-height:18px; color:var(--mut); margin-top:8px; }
.as-guide-calculate { display:flex; align-items:center; gap:8px; min-height:40px; width:100%; border:0; padding:12px 0 0; background:transparent; color:var(--brand); font-size:13px!important; font-weight:500!important; text-align:left; }
.as-guide-calculate svg:last-child { margin-left:auto; }
.as-guide-connections { margin-top:28px; }
.as-guide-connections h3 { margin-bottom:8px; }
.as-guide-related { display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; background:transparent; color:var(--ink); padding:12px 0; min-height:44px; text-align:left; border:0; border-bottom:1px solid #e9edf2; font-size:13px!important; }
.as-guide-related svg { color:var(--mut); }
.as-guide-related:hover { color:var(--brand); }
.as-guide-source { display:inline-block; font-size:12px; color:var(--mut); margin-top:28px; text-underline-offset:3px; }
@container guide (max-width:1100px) { .as-guide-topics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@container guide (max-width:760px) {
  .as-guide-header { align-items:flex-start; flex-wrap:wrap; gap:20px; }
  .as-guide-search { margin-left:auto; }
  .as-guide-list { grid-template-columns:minmax(0,1fr); }
}
@container guide (max-width:540px) {
  .as-guide-topics { grid-template-columns:minmax(0,1fr); gap:16px; }
  .as-guide-topic { padding:20px; }
  .as-guide-search { width:100%; }
}
@media (max-width:1024px) {
  #asApp.app[data-pro-page="glosario"].has-insights { grid-template-columns:0 0 minmax(0,1fr) 0 0; }
  #asApp.app[data-pro-page="glosario"].has-insights > .glos-canvas { display:none; }
  #asApp.app[data-pro-page="glosario"].has-insights > .glos-insights { grid-area:2 / 3 / 3 / 4; border-left:0; }
  .glos-insights .as-guide-detail-body { max-width:640px; margin-inline:auto; }
}
@media (max-width:520px),(pointer:coarse) {
  .as-guide-header h1 { font-size:24px; }
  .as-guide-search input { font-size:16px; }
  .as-guide-search,.as-guide-close { min-height:44px; }
  .as-guide-close { width:44px; }
  .as-guide-tabs button,.as-guide-back,.as-guide-az button,.as-guide-search button { min-height:44px; }
  .as-guide-detail-head,.as-guide-detail-body { padding:20px 16px; }
  .as-guide-apply { padding:16px; }
}

/* Herramientas consume la UI pública en un documento con su propia cascada. */
.canvas.herr-canvas { padding:0; overflow:hidden; background:#f7f8fa; }
.herr-public-frame { display:block; width:100%; height:100%; border:0; }
.herr-public-frame[hidden] { display:none; }

/* Utilidades compartidas por Inicio, Notas y Equipo.
   La lista/detalle de cotizaciones vive en asesor-historial.css. */
.hx-filters { display: flex; flex-direction: column; }
.hx-filter { appearance: none; cursor: pointer; display: flex; align-items: center; gap: 9px; width: 100%; border: 0; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); background: none; font: inherit; padding: 7px 9px; border-radius: 8px; text-align: left; transition: background var(--t); }
.hx-filter:first-of-type { border-top: 0; }
.hx-filter:hover { background: var(--bg); }
.hx-filter-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.hx-filter-lbl { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 500; color: var(--ink); }
.hx-filter-n { flex: none; font-size: 11px; font-weight: 700; color: var(--mut); font-variant-numeric: tabular-nums; background: var(--bg); border-radius: 999px; padding: 1px 7px; min-width: 20px; text-align: center; }
.hx-filter-n:empty { display: none; }
.hx-filter.is-on, .hx-filter.is-on + .hx-filter { border-top-color: transparent; }
.hx-filter.is-on { background: var(--cbg, var(--brand-50)); }
.hx-filter.is-on .hx-filter-lbl { color: var(--cfg, var(--brand)); font-weight: 600; }
.hx-filter.is-on .hx-filter-n { color: var(--cfg, var(--brand)); background: color-mix(in srgb, var(--cfg, var(--brand)) 15%, #fff); }
.hx-filter.is-empty { opacity: .42; }
.hx-filter.is-empty:hover { opacity: .7; }
.hx-filter--won .hx-filter-lbl { color: var(--win-d, #15803d); font-weight: 600; }
.hx-filter--won .hx-filter-n { color: var(--win-d, #15803d); }
.hx-filter--won.is-on .hx-filter-n { background: color-mix(in srgb, #16a34a 15%, #fff); }
.hx-filter--lost .hx-filter-lbl { color: var(--mut); font-weight: 600; }
.hx-filter--lost.is-on .hx-filter-lbl { color: var(--ink); }
.hx-filter--lost.is-on .hx-filter-n { background: color-mix(in srgb, var(--mut) 14%, #fff); color: var(--ink); }
.hx-disc-back { position: fixed; inset: 0; z-index: 1000; background: rgba(15, 23, 42, .42); display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(2px); }
.hx-disc { width: 100%; max-width: 380px; background: var(--card); border-radius: 18px; padding: 20px; box-shadow: 0 18px 50px rgba(15, 23, 42, .22); }
.hx-disc-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.hx-disc-htxt { flex: 1; min-width: 0; }
.hx-disc-title { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.hx-disc-sub { font-size: 12.5px; color: var(--mut); line-height: 1.4; margin-top: 3px; }
.hx-disc-x { appearance: none; cursor: pointer; flex: none; border: 0; background: transparent; color: var(--faint, #94a3b8); padding: 2px; border-radius: 8px; transition: color var(--t), background var(--t); }
.hx-disc-x:hover { color: var(--ink); background: var(--bg); }
.hx-disc-x svg { width: 18px; height: 18px; }
.hx-disc-reasons { display: flex; flex-direction: column; gap: 8px; }
.hx-disc-reason { appearance: none; cursor: pointer; text-align: left; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 500; padding: 11px 14px; border-radius: 11px; transition: all var(--t); }
.hx-disc-reason:hover { border-color: var(--brand); background: var(--brand-50); color: var(--brand); }
.hx-disc-reason.is-on { border-color: var(--brand); background: var(--brand-50); color: var(--brand); }
.hx-snack { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px); z-index: 500; display: flex; align-items: center; gap: 12px; background: #0f172a; color: #fff; border-radius: 12px; padding: 12px 14px 12px 16px; box-shadow: 0 16px 40px rgba(15,23,42,.32); opacity: 0; transition: opacity .2s, transform .2s; max-width: 440px; }
.hx-snack.is-in { opacity: 1; transform: translate(-50%, 0); }
.hx-snack.is-err { background: var(--err); }
.hx-snack-ic { width: 20px; height: 20px; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.18); border-radius: 50%; font-size: 12px; font-weight: 700; }
.hx-snack-msg { font-size: 13.5px; font-weight: 500; }
.hx-snack-undo { appearance: none; cursor: pointer; border: 0; background: none; color: var(--brand); font: inherit; font-size: 13.5px; font-weight: 700; padding: 4px 6px; margin-left: 4px; }
.hx-snack-undo:hover { color: #a9d8ff; }
.hx-btn-ghost { appearance: none; cursor: pointer; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 10px; transition: all var(--t); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.hx-btn-ghost:hover { border-color: #cbd5e1; background: var(--bg); }
.hx-btn-ghost:disabled { opacity: .5; cursor: not-allowed; }
.hx-filter--snz .hx-filter-lbl { color: var(--mut); font-weight: 600; }
.hx-filter--snz.is-on .hx-filter-lbl { color: var(--ink); }
.hx-filter--snz.is-on .hx-filter-n { background: color-mix(in srgb, #d97706 14%, #fff); color: var(--ink); }


.nt-mini-ic { width: 12px; height: 12px; }


.nt-rec-check { width: 19px; height: 19px; flex: none; border: 1.6px solid #cbd5e1; border-radius: 6px; background: var(--card); display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: all var(--t); }
.nt-rec-check:hover { border-color: var(--brand); }

.nt-rec-check .nt-ico { width: 12px; height: 12px; }

.nt-rec-date { font-size: 12px; font-weight: 600; color: var(--mut); flex: none; }
.nt-rec-date.is-today { color: var(--brand); }
.nt-rec-date.is-overdue { color: var(--err); }
.nt-rec-del { color: #cbd5e1; flex: none; display: inline-flex; padding: 2px; transition: color var(--t); }
.nt-rec-del:hover { color: var(--err); }
.nt-rec-del .nt-ico { width: 14px; height: 14px; }

.nt-rec-in { flex: 1; min-width: 0; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; outline: none; }
.nt-rec-in:focus { border-color: var(--brand); }


.nt-date-chip { appearance: none; cursor: pointer; border: 1px solid var(--line); background: var(--card); color: var(--mut); font: inherit; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; transition: all var(--t); }
.nt-date-chip:hover { border-color: #cbd5e1; color: var(--ink); }
.nt-date-chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }


/* ── Toast ── */
.nt-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(12px); background: var(--ink); color: #fff; font-size: 13px; font-weight: 500; padding: 11px 18px; border-radius: 11px; box-shadow: 0 8px 28px rgba(15,23,42,.22); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 9600; }
.nt-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }


/* Escala de iconos lucide consistente por contexto */
.nt-ico { width: 16px; height: 16px; flex: none; stroke-width: 2; }
.nt-mini-ic { width: 14px; height: 14px; }


.nt-rec-in { height: 40px; padding: 0 13px; }


.nt-rec-del { background: transparent; border: 0; color: #cbd5e1; }
.nt-rec-del:hover { color: var(--err); }
.nt-rec-del .nt-ico { width: 15px; height: 15px; }
.nt-rec-check { background: var(--card); }
.nt-rec-check .nt-ico { width: 13px; height: 13px; }


/* Mi perfil: formulario de lectura acotada, con la escala y acciones de Pro. */
#asApp[data-pro-page="perfil"] { --bg:#f7f8fa; --ink:#0b1220; --mut:#64748b; --line:#e3e9f0; }
.canvas.pf-canvas { padding:0; }
.pf-canvas button { appearance:none; font-family:inherit; cursor:pointer; }
.pf-canvas :is(button,a),.pf-canvas :is(button,a):hover { text-decoration:none; }
.pf-canvas :is(button,a):focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
.pf-ico { width:16px; height:16px; flex:none; stroke-width:2; }
.pf-mini { width:16px; height:16px; }
.pf-loading { margin:auto; padding:60px; color:var(--mut); font-size:14px; }
.pf-wrap { max-width:720px; width:100%; margin:0 auto; padding:32px 32px 64px; }
.pf-demo { display:flex; align-items:center; gap:8px; font-size:13px; line-height:1.5; color:#92400e; background:#fffbeb; border:1px solid #fde68a; border-radius:12px; padding:12px 16px; margin-bottom:24px; }
.pf-demo .pf-mini { flex:none; }
.pf-hero { margin-bottom:24px; }
.pf-identity { display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:20px; text-align:center; }
.pf-avatar { position:relative; width:64px; height:64px; border-radius:50%; background:var(--brand); border:0; flex:none; }
.pf-avatar.is-busy { opacity:.6; pointer-events:none; }
.pf-avatar-img { position:absolute; inset:0; border-radius:50%; background-size:cover; background-position:center; }
.pf-avatar-fallback { position:absolute; inset:0; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:600; color:#fff; }
.pf-avatar.has-photo .pf-avatar-fallback { display:none; }
.pf-avatar-cam { position:absolute; right:-2px; bottom:-2px; width:28px; height:28px; border-radius:50%; background:var(--card); border:2px solid var(--card); box-shadow:0 0 0 1px var(--line); display:flex; align-items:center; justify-content:center; color:var(--brand); }
.pf-avatar:hover .pf-avatar-cam { background:var(--brand-50); }
.pf-hero-id { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; max-width:100%; }
.pf-hero-name { margin:0; font-size:16px; line-height:1.4; font-weight:600; color:var(--ink); overflow-wrap:anywhere; }
.pf-hero-email { font-size:14px; line-height:1.5; color:var(--mut); overflow-wrap:anywhere; }
.pf-tier-badge { font-size:11px; line-height:1.5; font-weight:600; color:var(--brand); background:var(--brand-50); border-radius:var(--r-pill); padding:3px 10px; }
.pf-photo-rm { background:transparent; border:0; color:var(--mut); font-size:13px; font-weight:500; padding:8px 0; min-height:36px; flex:none; }
.pf-photo-rm:hover { color:var(--err); }
.pf-hint { display:flex; align-items:flex-start; gap:8px; font-size:12px; line-height:18px; color:#78869b; }
.pf-hint .pf-ico { margin-top:1px; }
.pf-sections { display:grid; grid-template-columns:minmax(0,1fr); gap:28px; }
.pf-section { min-width:0; }
.pf-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; border-bottom:1px solid #e9edf2; }
.pf-sec-title { font-size:16px; font-weight:600; line-height:1.4; color:var(--ink); margin:0; }
.pf-card { background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.pf-section-toggle { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; min-height:56px; padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--card); color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.pf-section-toggle:hover { background:#f3f4f6; }
.pf-section-toggle[aria-expanded="true"] { border-radius:16px 16px 0 0; }
.pf-section-label { display:grid; gap:4px; min-width:0; }
.pf-section-summary { font-size:12px; font-weight:400; line-height:18px; color:var(--mut); overflow-wrap:anywhere; }
.pf-section-chevron { flex:none; color:var(--mut); }
.pf-section-toggle[aria-expanded="true"] .pf-section-chevron { transform:rotate(180deg); }
.pf-section-body[hidden],.pf-section-summary[hidden] { display:none; }
.pf-fields { background:var(--card); border:1px solid var(--line); border-top:0; border-radius:0 0 16px 16px; overflow:hidden; }
.pf-hint { margin:8px 0 0; }
.pf-field { display:grid; grid-template-columns:168px minmax(0,1fr); align-items:center; gap:4px 16px; min-height:64px; padding:12px 16px; border-bottom:1px solid #e9edf2; }
.pf-card > .pf-field:last-child,.pf-fields > .pf-field:last-child { border-bottom:0; }
.pf-flabel { grid-column:1; font-size:13px; line-height:20px; font-weight:500; color:var(--mut); }
.pf-finput { grid-column:2; width:100%; min-width:0; min-height:36px; border:1px solid var(--line); border-radius:8px; padding:7px 10px; font:400 14px/20px Inter,sans-serif; color:var(--ink); background:var(--card); outline:none; transition:border-color var(--t); }
.pf-finput:hover { border-color:#cbd5e1; }
.pf-finput:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(13,153,255,.12); }
.pf-finput::placeholder,.pf-ce-input::placeholder { color:#78869b; opacity:1; }
.pf-fstatus { grid-column:2; font-size:12px; line-height:18px; font-weight:400; }
.pf-fstatus:empty { display:none; }
.pf-fstatus.is-saving { color:var(--mut); }
.pf-fstatus.is-saved { color:var(--win); }
.pf-fstatus.is-error { color:var(--err); }
.pf-field-hint { grid-column:2; font-size:12px; line-height:18px; font-weight:400; color:#78869b; }
.pf-field.pf-ro .pf-rovalue { grid-column:2; font-size:14px; line-height:1.5; font-weight:400; color:var(--ink); overflow-wrap:anywhere; }
.pf-ce .pf-ce-val { grid-column:2; display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; }
.pf-ce .pf-rovalue { font-size:14px; line-height:1.5; font-weight:400; color:var(--ink); overflow-wrap:anywhere; min-width:0; }
.pf-ce-change,.pf-ce-link { display:inline-flex; align-items:center; justify-content:center; min-height:36px; border:0; background:transparent; color:var(--brand); font-size:13px; line-height:20px; font-weight:500; padding:8px 0; border-radius:var(--r-pill); }
.pf-ce-change { flex:none; }
.pf-ce-change:hover,.pf-ce-link:hover { color:var(--brand); }
.pf-ce-edit { grid-column:1 / -1; margin-top:12px; padding-top:16px; border-top:1px solid #e9edf2; }
.pf-ce-explain { margin:0 0 16px; font-size:14px; color:var(--mut); line-height:1.5; }
.pf-ce-line { display:flex; align-items:flex-end; gap:12px; margin-bottom:12px; }
.pf-ce-field { display:flex; flex-direction:column; gap:6px; flex:1; min-width:0; font-size:13px; font-weight:500; line-height:20px; color:var(--mut); }
.pf-ce-input { min-width:0; width:100%; min-height:36px; border:1px solid var(--line); border-radius:8px; padding:7px 10px; font:400 14px/20px Inter,sans-serif; color:var(--ink); background:var(--card); outline:none; }
.pf-ce-input:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(13,153,255,.12); }
.pf-ce-codein { letter-spacing:4px; }
.pf-ce-codein::placeholder { letter-spacing:normal; }
.pf-ce-go { display:inline-flex; align-items:center; justify-content:center; min-height:36px; border:0; background:var(--brand); color:#fff; font-size:13px; font-weight:500; line-height:20px; border-radius:var(--r-pill); padding:8px 16px; white-space:nowrap; }
.pf-canvas button:disabled { opacity:.55; cursor:default; }
.pf-ce-status { font-size:12px; line-height:18px; margin:0 0 8px; overflow-wrap:anywhere; }
.pf-ce-status:empty { display:none; }
.pf-ce-status.is-error { color:var(--err); }
.pf-ce-status.is-ok { color:var(--win); }
.pf-ce-status.is-saving { color:var(--mut); }
.pf-ce-actions { display:flex; flex-wrap:wrap; gap:4px 20px; }
.pf-ce-link { color:var(--mut); }
.pf-field.pf-link { display:flex; justify-content:space-between; align-items:center; min-height:52px; transition:background var(--t); }
.pf-field.pf-link:hover { background:var(--bg); }
.pf-field.pf-link .pf-flabel { color:var(--ink); font-weight:500; }
.pf-link-go { display:flex; color:var(--mut); }
.pf-select-btn { grid-column:2; display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:36px; background:var(--card); border:1px solid var(--qv-surface-border,#e3e9f0); border-radius:11px; padding:7px 10px; font:400 14px/20px Inter,sans-serif; color:var(--ink); text-align:left; }
.pf-select-btn:not(:disabled):hover { background:#f6f9fd; border-color:#c3d6e9; }
.pf-select-btn[aria-expanded="true"]:not(:disabled) { background:#f6faff; border-color:var(--qv-surface-border,#e3e9f0); color:var(--brand); }
.pf-select-val.is-empty { color:#78869b; }
.pf-select-btn .pf-mini { color:var(--mut); }
.pf-danger { margin-top:32px; padding-top:24px; border-top:1px solid var(--line); display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.pf-btn-out { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:36px; background:var(--card); border:1px solid var(--line); color:#52637b; font-size:13px; line-height:20px; font-weight:500; padding:7px 16px; border-radius:var(--r-pill); flex:none; }
.pf-btn-out:hover { background:#e5e7eb; }
.pf-delete-area { max-width:320px; }
.pf-btn-del { display:inline-flex; align-items:center; gap:8px; min-height:36px; background:transparent; border:0; border-radius:var(--r-pill); color:var(--err); font-size:13px; line-height:20px; font-weight:500; padding:8px 0; }
.pf-btn-del:hover { color:var(--err); }
.pf-del-hint { font-size:12px; line-height:18px; color:var(--mut); margin:4px 0 0; }
.pf-read-error { font-size:14px; line-height:1.5; }
@media(max-width:600px) {
  /* El título ya está en el contenido; deja espacio a la navegación de cuenta. */
  #asApp[data-pro-page="perfil"] .topbar { grid-template-columns:minmax(0,1fr) auto; }
  #asApp[data-pro-page="perfil"] :is(.tb-section,.tb-brand) { display:none; }
  .pf-field { grid-template-columns:minmax(0,1fr); gap:6px; }
  .pf-flabel,.pf-finput,.pf-fstatus,.pf-field-hint,.pf-field.pf-ro .pf-rovalue,.pf-select-btn,.pf-ce .pf-ce-val { grid-column:1; }
  .pf-danger { flex-direction:column; gap:20px; }
  .pf-section-head { flex-wrap:wrap; }
  .pf-ce-line { flex-wrap:wrap; }
  .pf-ce-field { flex-basis:100%; }
}
@media(max-width:760px),(pointer:coarse) {
  .pf-canvas :is(.pf-btn-out,.pf-btn-del,.pf-photo-rm,.pf-upgrade,.pf-ce-change,.pf-ce-go,.pf-ce-link,.pf-select-btn) { min-height:44px; }
  .pf-finput,.pf-ce-input { min-height:44px; font-size:16px; }
}

/* Reconocimientos v2 — colección de piezas sin tarjetas ni bases individuales. */
#asApp[data-pro-page="reconocimientos"],.rec-modal { --bg:#f7f8fa; --ink:#0b1220; --mut:#64748b; --line:#e3e9f0; }
/* Fondo aprobado: transición de champagne a azul con una onda de luz. */
#asApp.app[data-pro-page="reconocimientos"]:not([hidden]) {
  background:
    url("/__assets/bff3d949983b10c84a1c6129844a9d5f3959b00b48fe36c961af9e5973573a93/assets/pro/reconocimientos/fondo-ondas.svg") center / 100% 100% no-repeat,
    linear-gradient(90deg,rgb(217 205 184 / 40%) 0%,rgb(255 255 255 / 36%) 46%,color-mix(in srgb,var(--brand) 12%,transparent) 100%),
    var(--bg);
}
#asApp[data-pro-page="reconocimientos"]>.rec-canvas { background:transparent; }
@media(forced-colors:active) { #asApp.app[data-pro-page="reconocimientos"]:not([hidden]) { background:Canvas; } }
.rec-canvas { overflow-y:auto; scrollbar-gutter:stable; }
.rec-wrap { --rec-title-row:36px; width:100%; max-width:880px; margin:0 auto; padding:28px 0 64px; container:rec-page / inline-size; }
.rec-header { display:flex; flex-direction:column; margin-bottom:20px; }
.rec-header:has(.rec-latest) { margin-bottom:56px; }
.rec-heading { min-width:0; }
.rec-header h1 { margin:0; margin-top:calc((var(--rec-title-row) - 1.2em) / 2); font-size:26px; font-weight:700; letter-spacing:-.03em; line-height:1.2; color:var(--ink); }
.rec-summary { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 24px; }
.rec-actions { display:flex; gap:24px; flex-wrap:wrap; }
.rec-link { border:0; background:transparent; padding:8px 0; font:inherit; font-size:13px; font-weight:500; line-height:1.5; color:var(--brand); cursor:pointer; }
.rec-actions .rec-link { display:inline-flex; align-items:center; gap:8px; min-height:36px; }
.rec-actions .rec-link svg { width:16px; height:16px; flex:none; stroke-width:2; }
.rec-link,.rec-link:hover { text-decoration:none; }
.rec-count { font-size:14px; font-weight:400; line-height:20px; color:var(--mut); margin:0; }
.rec-count strong { font-weight:600; color:#1f2937; }
.rec-caption { font-size:12px; line-height:18px; color:var(--mut); margin:0; }
.rec-notice { font-size:12px; line-height:18px; color:var(--mut); max-width:460px; margin:12px 0; }
.rec-latest { align-self:center; display:flex; align-items:center; gap:16px; margin-top:48px; border:0; background:transparent; padding:0; text-align:left; color:var(--ink); font:inherit; cursor:pointer; }
.rec-stage { position:relative; display:block; width:184px; height:188px; flex:none; }
.rec-podium { position:absolute; bottom:0; left:0; width:184px; height:60px; object-fit:contain; }
.rec-stage-medal { position:absolute; bottom:28px; left:16px; width:152px; height:160px; object-fit:contain; }
.rec-latest-copy { display:flex; flex-direction:column; gap:3px; min-width:130px; }
.rec-eyebrow { font-size:12px; line-height:18px; color:var(--mut); }
.rec-latest-name { font-size:16px; font-weight:600; line-height:1.4; color:#1f2937; }
.rec-latest-level { font-size:13px; font-weight:500; color:var(--brand); }
.rec-latest-date { font-size:12px; line-height:18px; color:var(--mut); margin-top:4px; }
.rec-wall { container-type:inline-size; }
/* Cada familia conserva su orden y sus cinco niveles; la línea separa grupos,
   sin convertir las medallas en tarjetas ni mezclar familias al ajustar ancho. */
.rec-family + .rec-family { margin-top:20px; padding-top:20px; border-top:1px solid color-mix(in srgb,var(--line) 92%,var(--mut)); }
.rec-family-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
.rec-family-grid--hitos > :first-child { grid-column:2; }
@container (max-width:759px) {
  .rec-family-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .rec-family-grid--hitos > :first-child { grid-column:auto; }
}
@container (max-width:519px) {
  .rec-family-grid { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:8px; }
}
.rec-piece { appearance:none; display:flex; flex-direction:column; align-items:center; width:100%; padding:8px 4px; border:0; background:transparent; border-radius:12px; color:var(--ink); font:inherit; text-align:center; cursor:pointer; }
.rec-piece-art { display:block; width:112px; height:120px; margin-bottom:8px; }
.rec-piece img { display:block; width:100%; height:100%; object-fit:contain; }
.rec-piece img,.rec-stage-medal,.rec-modal-art,.rec-history-event img { filter:contrast(.92) brightness(1.06); }
.rec-piece.is-pending img,.rec-piece.is-unknown img,.rec-modal-art.is-pending { opacity:.4; }
.rec-piece.is-pending .rec-piece-name,.rec-piece.is-unknown .rec-piece-name { color:var(--mut); }
.rec-piece-name { font-size:14px; font-weight:600; line-height:20px; color:#1f2937; }
.rec-piece-level { font-size:12px; font-weight:400; line-height:18px; color:var(--mut); margin-top:3px; }
.rec-piece-state { font-size:11px; font-weight:600; line-height:1.5; color:var(--mut); margin-top:3px; }
.rec-piece:hover .rec-piece-name,.rec-latest:hover .rec-latest-name { color:var(--brand); }
.rec-piece:focus-visible,.rec-latest:focus-visible,.rec-link:focus-visible { outline:2px solid var(--brand); outline-offset:4px; }
.rec-wall-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:24px; margin-top:24px; font-size:12px; line-height:18px; color:var(--mut); }
.rec-wall-legend span { display:flex; align-items:center; gap:8px; }
.rec-dot { display:block; width:8px; height:8px; border-radius:50%; background:var(--brand); }
.rec-dot.is-pending { background:#94a3b8; }
.rec-modal-art { display:block; width:144px; height:144px; object-fit:contain; margin:0 auto 20px; }
.rec-modal .am-val-wrap { flex:0 0 76px; min-width:0; max-width:76px; overflow-wrap:anywhere; }
/* Lecturas largas: sólo el cuerpo se desplaza; cabecera y cierre permanecen. */
.rec-reader { max-width:760px; max-height:min(680px,calc(100dvh - 48px)); padding:0; gap:0; overflow:hidden; }
.rec-reader .am-head { flex:none; padding:24px; border-bottom:1px solid var(--line); }
.rec-reader .am-badge { display:none; }
.rec-reader .am-title { font-size:16px; font-weight:600; line-height:1.4; }
.rec-reader .am-sub { font-size:12px; line-height:18px; margin-top:4px; }
.rec-reader .am-cta { flex:none; margin:16px 24px; min-height:44px; font-size:13px; font-weight:500; }
.rec-reader-body { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:0 24px 24px; font-size:14px; line-height:1.5; color:var(--mut); }
.rec-reader-body:focus-visible { outline:2px solid var(--brand); outline-offset:-2px; }
.rec-reader-body h2,.rec-reader-body h3,.rec-reader-body p { margin:0; }
.rec-reader-body h2 { font-size:14px; font-weight:600; line-height:20px; color:var(--ink); }
.rec-reader-body h3 { font-size:14px; font-weight:600; line-height:20px; color:#1f2937; }
.rec-rule-section,.rec-history-group { padding:20px 0; border-bottom:1px solid var(--line); }
.rec-rule-section>p:not(.rec-rule-unit) { margin-top:16px; }
.rec-reader-body .rec-rule-unit { font-size:12px; line-height:18px; margin-top:3px; }
.rec-rule-levels { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:16px 0 0; }
.rec-rule-levels dt { font-size:12px; line-height:18px; }
.rec-rule-levels dd { font-size:14px; font-weight:600; line-height:20px; font-variant-numeric:tabular-nums; color:var(--ink); margin:3px 0 0; }
.rec-rule-hitos,.rec-history-events { list-style:none; margin:12px 0 0; padding:0; }
.rec-rule-hitos li+li { margin-top:16px; }
.rec-rule-hitos p { margin-top:3px; }
.rec-reader-body .rec-reader-note { font-size:12px; line-height:18px; margin-top:16px; }
.rec-reader-empty { padding:20px 0; }
.rec-history-event { display:flex; align-items:center; gap:12px; min-height:64px; padding:8px 0; }
.rec-history-event img { flex:none; display:block; object-fit:contain; }
.rec-history-event div { min-width:0; }
.rec-history-event h3 span { font-weight:400; color:var(--mut); }
.rec-history-event p,.rec-history-archive li p { font-size:12px; line-height:18px; margin-top:3px; }
@media(max-width:580px) { .am-backdrop:has(.rec-reader) { padding:16px; } .rec-reader { max-height:min(680px,calc(100dvh - 32px)); } .rec-reader .am-head { padding:20px 16px; } .rec-reader-body { padding:0 16px 20px; } .rec-reader .am-cta { margin:16px; } }
@media(max-width:420px) { .rec-rule-levels { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:760px) { .rec-latest { gap:12px; } .rec-stage { width:164px; height:172px; } .rec-podium { width:164px; height:56px; } .rec-stage-medal { width:130px; height:142px; left:17px; } .rec-latest-copy { min-width:100px; } }
@media(max-width:580px) { .rec-header:has(.rec-latest) { margin-bottom:40px; } .rec-summary { align-items:flex-start; flex-direction:column; margin-top:8px; } .rec-latest { margin-top:32px; } .rec-piece-art { width:100px; height:108px; } .rec-link,.rec-actions .rec-link { min-height:44px; } }
/* Misma línea de título que Anualidades: centrada en su control de 36/44 px. */
@media(max-width:520px), (pointer:coarse) { .rec-wrap { --rec-title-row:44px; } }
@container rec-page (max-width:520px) { .rec-header h1 { font-size:24px; } }
@media(pointer:coarse) { .rec-link,.rec-actions .rec-link { min-height:44px; } }

/* Componentes compartidos con Ficha y Renovaciones.
   Inicio tiene estilos propios en asesor-inicio.css. */
.home-ico { width: 16px; height: 16px; flex: none; }
.home-mini { width: 14px; height: 14px; }

.home-cartera-mes { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--brand); margin: 14px 2px 8px; }
.home-cartera-mes:first-child { margin-top: 2px; }
.home-cartera-soon { color: var(--win-d); font-weight: 600; }

/* ════════════════════════════════════════════════════════════════════
   Tab "Renovaciones" — cartera completa por aniversario (buscador + filtros)
   ════════════════════════════════════════════════════════════════════ */

.home-lead-isa { font-size: 11.5px; font-weight: 600; color: var(--mut); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; }

/* ── Redactor de mensaje (el mensaje ya viene escrito) ── */
.home-draft { position: relative; text-align: left; }
.home-draft .am-title, .home-draft .am-sub { text-align: left; }
.home-draft .am-sub { margin-bottom: 14px; }
.home-draft-tx { width: 100%; box-sizing: border-box; resize: vertical; min-height: 112px; font-family: inherit; font-size: 14px; line-height: 1.5; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; outline: 0; transition: border-color var(--t), box-shadow var(--t); }
.home-draft-tx:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(13,153,255,.12); }
.home-draft-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.home-draft-go, .home-draft-copy, .home-draft-ia { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 10px; transition: background var(--t), border-color var(--t), color var(--t); }
/* Botón WhatsApp: verde canónico de QuVi Pro (#25d366). */
.home-draft-go { background: #25d366; border: 0; color: #fff; }
.home-draft-go:hover { background: #1ebe5d; }
.home-draft-copy, .home-draft-ia { background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.home-draft-copy:hover, .home-draft-ia:hover { border-color: #cbd5e1; }
.home-draft-go .home-mini, .home-draft-copy .home-mini, .home-draft-ia .home-mini { width: 15px; height: 15px; }
.home-draft-note { font-size: 12px; color: var(--mut); margin-top: 10px; }
.home-draft-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 8px; background: transparent; border: 0; color: var(--mut); display: grid; place-items: center; transition: background var(--t), color var(--t); }
.home-draft-x:hover { background: var(--bg); color: var(--ink); }
.home-draft-x .home-ico { width: 18px; height: 18px; }

/* ════════════════════════════════════════════════════════════════════
   Ficha de la persona — panel lateral con su línea de vida
   ════════════════════════════════════════════════════════════════════ */
.fx-scrim { position: fixed; inset: 0; background: rgba(15,23,42,.28); opacity: 0; transition: opacity .26s ease; z-index: 9400; }
.fx-scrim.is-open { opacity: 1; }
.fx-ov {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, calc(100vw - 24px));
  background: var(--card); border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  z-index: 9450; transform: translateX(100%);
  transition: transform .28s cubic-bezier(.32,.72,0,1);
  will-change: transform; box-shadow: -24px 0 60px rgba(15,23,42,.12);
}
.fx-ov.is-open { transform: translateX(0); }
.fx-ico { width: 18px; height: 18px; }

/* Cabecera */
.fx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 16px; border-bottom: 1px solid var(--line); flex: none; }
.fx-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fx-ava { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--brand-50); color: var(--brand); font-size: 15px; font-weight: 800; display: grid; place-items: center; letter-spacing: .02em; }
.fx-id-tx { min-width: 0; }
.fx-name { font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-sub { font-size: 12.5px; font-weight: 600; color: var(--mut); margin-top: 1px; }
.fx-x { flex: none; width: 32px; height: 32px; border-radius: 9px; background: transparent; border: 0; color: var(--mut); display: grid; place-items: center; transition: background var(--t), color var(--t); }
.fx-x:hover { background: var(--bg); color: var(--ink); }
.fx-x .fx-ico { width: 17px; height: 17px; }

/* Cuerpo */
.fx-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 18px; }

/* Ahora: lo accionable arriba */
.fx-now { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px; }
.fx-now-k { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--brand); margin-bottom: 7px; }
.fx-now-why { font-size: 14px; line-height: 1.5; color: var(--ink); margin: 0 0 13px; }
.fx-go { display: inline-flex; align-items: center; gap: 7px; background: var(--brand); border: 0; color: #fff; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 10px; transition: background var(--t); }
.fx-go:hover { background: var(--brand); }
.fx-go .fx-ico { width: 15px; height: 15px; }
.fx-sec { background: var(--card); border: 1px solid var(--line); color: var(--mut); font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 10px; transition: border-color var(--t), color var(--t); }
.fx-sec:hover { border-color: #cbd5e1; color: var(--ink); }

/* Chips de datos */
.fx-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 4px; }
.fx-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--mut); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 5px 10px; }
.fx-chip-ic { width: 14px; height: 14px; color: var(--mut); }

/* Resumen de la relación (bajo el título de la historia) */
.fx-summary { font-size: 12.5px; color: var(--mut); margin: -4px 0 14px; line-height: 1.5; }
.fx-summary strong { color: var(--win-d); font-weight: 700; }

/* Línea de tiempo */
.fx-tl-h { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--mut); margin: 22px 0 10px; }
.fx-tl { list-style: none; margin: 0; padding: 0; }
.fx-tl-i { position: relative; display: flex; gap: 13px; padding-bottom: 18px; }
.fx-tl-i::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--line); }
.fx-tl-i:last-child { padding-bottom: 0; }
.fx-tl-i:last-child::before { display: none; }
.fx-tl-dot { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line); color: var(--mut); position: relative; z-index: 1; }
.fx-tl-dot .fx-ico { width: 15px; height: 15px; }
.fx-tone-hot .fx-tl-dot { background: #fff1f2; border-color: #fecaca; color: #ef4444; }
.fx-tone-danger .fx-tl-dot { background: #fff7ed; border-color: #fed7aa; color: #d97706; }
.fx-tone-won .fx-tl-dot { background: #ecfdf5; border-color: #a7f3d0; color: #16a34a; }
.fx-tone-won .fx-tl-tx span { color: var(--win-d); }
.fx-tl-tx { padding-top: 4px; min-width: 0; }
.fx-tl-tx span { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.fx-tl-tx time { font-size: 12px; color: var(--mut); }
.fx-tl-empty { font-size: 13px; color: var(--mut); }

/* Pie */
.fx-foot { flex: none; border-top: 1px solid var(--line); padding: 13px 18px; }
.fx-foot-link { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 0; color: var(--brand); font-size: 13px; font-weight: 700; }
.fx-foot-link:hover { text-decoration: none; }
.fx-foot-link .fx-mini { width: 15px; height: 15px; }

@media (prefers-reduced-motion: reduce) { .fx-ov, .fx-scrim { transition: none; } }

/* ════════════════════════════════════════════════════════════════════
   Notificaciones — campana en el topbar + panel + toast + ajustes
   ════════════════════════════════════════════════════════════════════ */
.tb-bell { position: relative; padding: 7px; }
.tb-right .tb-bell.is-active { color: var(--brand); background: #e5e7eb; }
.tb-bell-badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 800; line-height: 1; border: 2px solid #fff; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
/* display:inline-flex anula [hidden] → guard para que se oculte cuando no hay no leídas */
.tb-bell-badge[hidden] { display: none !important; }

/* ── Panel ───────────────────────────────────────────────────────────── */
.ntf-panel { position: fixed; z-index: 8000; width: 384px; max-width: calc(100vw - 24px); max-height: 72vh; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px rgba(15,23,42,.18); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease; }
.ntf-panel.is-in { opacity: 1; transform: translateY(0); }
/* el display:flex anula el atributo [hidden] → guard explícito (panel + submenú) */
.ntf-panel[hidden], .ntf-clearmenu[hidden] { display: none !important; }
/* ── Popovers anclados del topbar (campana, uso): scrim compartido ──
   Transparente, captura el clic-afuera aunque caiga sobre un iframe. Empieza
   BAJO el topbar para que los demás disparadores sigan clickeables: así abrir
   un popover cierra el otro en el mismo clic. */
.as-pop-scrim { position: fixed; inset: var(--topbar-h, 56px) 0 0 0; z-index: 7999; background: transparent; }
.as-pop-scrim[hidden] { display: none !important; }
.ntf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 16px 13px; border-bottom: 1px solid var(--line); }
.ntf-head-tx strong { display: block; font-size: 15px; font-weight: 800; color: var(--ink); }
.ntf-head-tx span { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.ntf-head-acts { display: flex; gap: 4px; flex: none; }
.ntf-act { appearance: none; width: 30px; height: 30px; border: 1px solid var(--line); background: #fff; border-radius: 9px; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all var(--t); position: relative; }
.ntf-act:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.ntf-act .ntf-ico { width: 15px; height: 15px; }

.ntf-list { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.ntf-loading { padding: 30px 0; text-align: center; color: var(--muted); font-size: 13px; }

.ntf-row { position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px; border-radius: 12px; cursor: pointer; transition: background var(--t); }
.ntf-row:hover { background: #f6f9fc; }
.ntf-row.is-unread { background: var(--brand-50); }
.ntf-row.is-unread:hover { background: #d9ecff; }
.ntf-row-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.ntf-row-ic .ntf-ico { width: 17px; height: 17px; }
.ntf-row-tx { flex: 1; min-width: 0; }
.ntf-row-title { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.ntf-row.is-unread .ntf-row-title { font-weight: 800; }
.ntf-row-body { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.ntf-row-time { display: block; font-size: 11px; color: #94a3b8; margin-top: 5px; }
.ntf-row-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-top: 5px; }
.ntf-del.qv-close-button { position:static; flex:none; align-self:flex-start; opacity:0; --qv-close-bg:#f3f4f6; }
.ntf-row:hover .ntf-del, .ntf-row:focus-within .ntf-del { opacity:1; }
.ntf-del.qv-close-button:hover { --qv-close-bg:#e5e7eb; }
.ntf-row-dot { position:absolute; left:9px; top:9px; }
@media (hover:none) { .ntf-del.qv-close-button { opacity:1; } }

.ntf-empty { padding: 36px 26px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ntf-empty-ic { width: 30px; height: 30px; color: #cbd5e1; margin-bottom: 4px; }
.ntf-empty strong { font-size: 14px; font-weight: 700; color: var(--ink); }
.ntf-empty span { font-size: 12.5px; line-height: 1.5; color: var(--muted); max-width: 280px; }
.ntf-retry { margin-top: 10px; appearance: none; border: 1px solid var(--line); background: #fff; color: var(--brand); border-radius: 9px; padding: 7px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ntf-retry:hover { border-color: var(--brand); background: var(--brand-50); }

.ntf-clearmenu { position: absolute; top: 50px; right: 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(15,23,42,.16); padding: 5px; z-index: 2; display: flex; flex-direction: column; min-width: 190px; }
.ntf-clear-opt { appearance: none; text-align: left; border: none; background: none; border-radius: 8px; padding: 9px 11px; font-size: 13px; color: var(--ink); cursor: pointer; }
.ntf-clear-opt:hover { background: #f1f5f9; }
.ntf-clear-opt.is-danger { color: #dc2626; }
.ntf-clear-opt.is-danger:hover { background: #fee2e2; }

/* ── Toast ───────────────────────────────────────────────────────────── */
.ntf-toast-wrap { position: fixed; right: 20px; bottom: 20px; z-index: 9200; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.ntf-toast { pointer-events: auto; appearance: none; text-align: left; width: 340px; max-width: calc(100vw - 40px); display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 40px rgba(15,23,42,.18); cursor: pointer; opacity: 0; transform: translateX(16px); transition: opacity .24s ease, transform .24s ease; }
.ntf-toast.is-in { opacity: 1; transform: translateX(0); }
.ntf-toast-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.ntf-toast-ic .ntf-ico { width: 17px; height: 17px; }
.ntf-toast-tx { flex: 1; min-width: 0; }
.ntf-toast-tx strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.ntf-toast-tx span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-top: 2px; }

/* ── Modal de ajustes ────────────────────────────────────────────────── */
.ntf-modal-back.am-backdrop { z-index:9300; }
.ntf-modal.am-card { max-width:460px; }
.ntf-modal .am-head { align-items:flex-start; }
.ntf-modal .am-sub { margin-bottom:0; }
.ntf-modal .qv-close-button { flex:none; --qv-close-bg:#f3f4f6; }
.ntf-modal .qv-close-button:hover { --qv-close-bg:#e5e7eb; }
.ntf-prefs { display:flex; flex-direction:column; gap:4px; }
.ntf-pref { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); }
.ntf-pref:first-child { border-top: none; }
.ntf-pref-tx { flex: 1; min-width: 0; }
.ntf-pref-tx strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.ntf-pref-tx span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--muted); margin-top: 2px; }
.ntf-switch { flex: none; appearance: none; width: 44px; height: 26px; border-radius: 999px; border: none; background: #cbd5e1; cursor: pointer; position: relative; transition: background .18s ease; }
.ntf-switch.is-on { background: var(--brand); }
.ntf-switch-dot { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .18s ease; }
.ntf-switch.is-on .ntf-switch-dot { transform: translateX(18px); }

@media (prefers-reduced-motion: reduce) {
  .ntf-panel, .ntf-toast, .ntf-modal-back, .ntf-modal, .ntf-switch, .ntf-switch-dot { transition: none !important; }
}
@media (max-width: 760px) {
  .ntf-panel { width: calc(100vw - 24px); }
}

/* Pantalla completa del simulador: oculta el chrome del asesor. */
.app.sim-fullscreen .pro-nav { display: none; }
.app.sim-fullscreen .topbar {
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.app.sim-fullscreen #asSimHost {
  position: fixed !important; inset: 0 !important;
  width: 100vw !important; height: 100vh !important;
  z-index: 450; display: flex !important;
}
.app.sim-fullscreen #asSimHost .sim-wrap,
.app.sim-fullscreen #asSimHost .sim-frame { width: 100% !important; height: 100% !important; flex: 1; }

/* ============================================================
   SUSCRIPCIÓN · modal de pago (Flow)  ·  namespace sub-*
   Sin glow, bordes sólidos, gradiente de marca para el primario.
============================================================ */
.sub-overlay {
  position: fixed; inset: 0; z-index: 99000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(15, 23, 42, .42);
  opacity: 0; transition: opacity .18s ease;
}
.sub-overlay.is-in { opacity: 1; }
.sub-modal {
  position: relative; width: 100%; max-width: 720px;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 30px 30px 22px; box-shadow: 0 24px 60px -28px rgba(15, 23, 42, .35);
  transform: translateY(8px); transition: transform .2s cubic-bezier(.2,.9,.2,1);
  max-height:calc(100dvh - 48px); overflow-y:auto; overscroll-behavior:contain;
}
.sub-overlay.is-in .sub-modal { transform: translateY(0); }
.sub-close.qv-close-button { position:absolute; top:14px; right:14px; --qv-close-bg:#f3f4f6; }
.sub-close.qv-close-button:hover,.sub-close.qv-close-button:active { --qv-close-bg:#e5e7eb; }
@media(min-width:1025px) and (pointer:fine) {
  .sub-close.qv-close-button { --qv-close-size:26px; background-size:26px 26px; }
  .sub-close.qv-close-button > svg { width:13px; height:13px; }
}
.sub-head { text-align: center; margin-bottom: 22px; }
.sub-title { margin: 0; font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.sub-sub { margin: 6px 0 0; font-size: 14px; color: #64748b; line-height: 1.5; }
.sub-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sub-plan {
  position: relative; border: 1px solid var(--line); border-radius: 16px;
  padding: 22px 20px; background: linear-gradient(180deg, #fbfdff, var(--card));
  display: flex; flex-direction: column;
}
.sub-plan.is-reco { border-color: var(--brand); border-width: 2px; }
.sub-ribbon {
  position: absolute; top: -11px; left: 20px;
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase; padding: 4px 10px; border-radius: 7px;
}
.sub-plan-name { font-size: 17px; font-weight: 700; color: var(--ink); }
.sub-plan-tag { font-size: 13px; color: #64748b; margin-top: 2px; }
.sub-plan-price { margin: 14px 0 16px; display: flex; align-items: baseline; gap: 5px; }
.sub-plan-price strong { font-size: 30px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.sub-plan-price span { font-size: 14px; color: #64748b; }
.sub-feats { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sub-feats li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: #334155; line-height: 1.35; }
.sub-feats svg { width: 17px; height: 17px; color: var(--brand); flex: none; margin-top: 1px; }
.sub-pay {
  appearance: none; cursor: pointer; position: relative; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--brand); background: var(--card); color: var(--brand);
  font: inherit; font-size: 15px; font-weight: 600; padding: 12px; border-radius: 11px;
  transition: all var(--t);
}
.sub-pay:hover { background: var(--brand-50); }
.sub-pay.is-primary { border-color: transparent; background: var(--brand); color: #fff; }
.sub-pay.is-primary:hover { opacity: .92; }
.sub-pay:disabled { opacity: .6; cursor: not-allowed; }
/* Botones de plan apilados (Asesor / Elite): separación entre ambos. */
.sub-pay + .sub-pay { margin-top: 10px; }
.sub-spin {
  width: 17px; height: 17px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: subspin .6s linear infinite;
}
.sub-spin[hidden] { display: none; }
@keyframes subspin { to { transform: rotate(360deg); } }
/* Botón secundario "pagar solo este mes" — bajo perfil, no compite con Suscribirme */
.sub-once {
  appearance: none; cursor: pointer; position: relative; width: 100%; margin-top: 8px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; background: none; color: #64748b; font: inherit; font-size: 13px; font-weight: 500;
  padding: 6px; border-radius: 9px; text-decoration: none;
  transition: color var(--t);
}
.sub-once:hover { color: var(--ink); text-decoration:none; }
.sub-once:disabled { opacity: .6; cursor: not-allowed; }
.sub-support-actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; }
.sub-support-actions .sub-once { width:auto; max-width:100%; min-height:36px; margin:0; padding:8px 16px; border-radius:var(--r-pill); background:#f3f4f6; color:#52637b; line-height:20px; transition:background var(--t); }
.sub-support-actions .sub-once:hover { background:#e5e7eb; color:#52637b; }
.sub-support-actions .sub-once:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
.sub-support-actions svg { width:16px; height:16px; flex:none; stroke-width:2; }
@media(max-width:760px),(pointer:coarse) { .sub-support-actions .sub-once { min-height:44px; } }
.sub-error {
  margin: 16px 0 0; padding: 11px 14px; border-radius: 10px; text-align: center;
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 13px;
}
.sub-error[hidden] { display: none; }
.sub-foot {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 20px; font-size: 12px; color: #94a3b8;
}
.sub-foot svg { width: 14px; height: 14px; flex: none; }
/* Resultado post-pago */
.sub-result { max-width: 440px; text-align: center; padding: 34px 30px 26px; }
.sub-result-icon {
  width: 60px; height: 60px; margin: 0 auto 16px; border: 2px solid; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.sub-result-icon svg { width: 30px; height: 30px; }
.sub-result .sub-pay { margin-top: 22px; }
@media (max-width: 640px) {
  .sub-modal { padding-top:64px; }
  .sub-plans { grid-template-columns: 1fr; }
}

/* Acción de suscripción junto al título de Cuenta. */
.pf-upgrade { appearance:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:36px; border:0; border-radius:var(--r-pill); background:#f3f4f6; color:var(--ink); font:500 13px/20px Inter,sans-serif; padding:8px 16px; }
.pf-upgrade:hover { background:#e5e7eb; }
.pf-upgrade svg { width:16px; height:16px; }

/* Suscripción — loading + vista de gestión */
.sub-loading { display: flex; align-items: center; justify-content: center; min-height: 180px; color: var(--brand); }
.sub-loading .sub-spin { width: 26px; height: 26px; }
.sub-manage { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 16px; }
.sub-mrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; font-size: 14px; color: #64748b; }
.sub-mrow + .sub-mrow { border-top: 1px solid var(--line); }
.sub-mrow strong { color: var(--ink); font-weight: 600; }
.sub-note { background: var(--brand-50); border: 1px solid #bfe0ff; border-radius: 11px; padding: 12px 14px; font-size: 13px; color: var(--brand); margin-bottom: 14px; line-height: 1.45; }

/* Plan único (prueba / activar) + precio con ancla tachada y precio de fundador */
.sub-single { max-width: 420px; margin: 0 auto; }
.sub-price { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 4px; }
.sub-price strong { font-size: 34px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.sub-anchor { font-size: 17px; color: #94a3b8; text-decoration: line-through; }
.sub-permes { font-size: 14px; color: #64748b; }
.sub-founder { font-size: 12px; font-weight: 600; color: var(--brand); margin-bottom: 16px; }
.sub-elite-note { font-size: 12.5px; font-weight: 600; color: var(--brand); margin: 12px 0 4px; text-align: center; }

/* Spinners centrados en botones (margen, no transform: choca con el giro) */
.as-auth-btn { position: relative; }
.as-auth-btn .as-spinner { position: absolute; left: 50%; top: 50%; margin: -8px 0 0 -8px; }
.sub-pay .sub-spin, .sub-once .sub-spin { position: absolute; left: 50%; top: 50%; margin: -8.5px 0 0 -8.5px; }

/* Panel de administración de accesos (modal admin) */
.adm-form { display: flex; flex-direction: column; gap: 12px; }
.adm-input { width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; font: inherit; font-size: 15px; color: var(--ink); outline: none; transition: border-color var(--t); }
.adm-input:focus { border-color: var(--brand); }
.adm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.adm-listwrap { margin-top: 18px; }
.adm-listtitle { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; margin-bottom: 8px; }
.adm-list { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; max-height: 220px; overflow-y: auto; }
.adm-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; font-size: 14px; }
.adm-item + .adm-item { border-top: 1px solid var(--line); }
.adm-item-name { color: var(--ink); font-weight: 600; }
.adm-item-email { color: #64748b; font-size: 13px; }
.adm-empty { padding: 16px; text-align: center; color: #94a3b8; font-size: 13px; }
.adm-plan { display: flex; align-items: center; gap: 8px; }
.adm-plan-lbl { font-size: 13px; color: #64748b; margin-right: 2px; }
.adm-seg { appearance: none; cursor: pointer; border: 1px solid var(--line); background: var(--card); color: #64748b; font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 9px; transition: all var(--t); }
.adm-seg:hover { border-color: #cbd5e1; }
.adm-seg.is-on { border-color: var(--brand); background: var(--brand-50); color: var(--brand); }

/* Onboarding inicial (primera vez) — namespace ob-* */
.ob-overlay { position: fixed; inset: 0; z-index: 99500; display: flex; align-items: center; justify-content: center; padding: 24px; background: linear-gradient(160deg, #eaf4ff 0%, #f6f9fc 60%); overflow-y: auto; }
.ob-card { width: 100%; max-width: 460px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 28px 28px 24px; box-shadow: 0 24px 60px -28px rgba(15,23,42,.35); }
.ob-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.ob-back-sp { width: 32px; height: 32px; }
.ob-back { appearance: none; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--card); border-radius: 9px; color: #64748b; transition: all var(--t); }
.ob-back:hover { background: var(--bg); color: var(--ink); }
.ob-back svg { width: 18px; height: 18px; }
.ob-dots { display: flex; gap: 7px; align-items: center; }
.ob-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: all var(--t); }
.ob-dot.is-on { background: var(--brand); width: 20px; border-radius: 4px; }
.ob-dot.is-done { background: var(--brand); }
.ob-body { text-align: center; }
.ob-logo { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 14px; }
.ob-logo img { height: 28px; width: auto; }
/* Etiqueta "Pro" idéntica al canónico (.tb-pro-tag / landing /pro) */
.ob-logo-tag { font-size: .74rem; font-weight: 700; letter-spacing: .02em; line-height: 1; color: oklch(0.62 0.19 252); background: oklch(0.96 0.03 252); padding: 3px 8px; border-radius: 7px; }
.ob-title { margin: 6px 0 0; font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.ob-sub { margin: 8px 0 18px; font-size: 14px; color: #64748b; line-height: 1.5; }
.ob-input { width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 13px 14px; font: inherit; font-size: 15px; color: var(--ink); outline: none; transition: border-color var(--t); }
.ob-input:focus { border-color: var(--brand); }
.ob-options { display: flex; flex-direction: column; gap: 12px; }
.ob-option { appearance: none; cursor: pointer; display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; border: 1px solid var(--line); background: var(--card); border-radius: 14px; padding: 16px; transition: all var(--t); }
.ob-option:hover { border-color: #cbd5e1; }
.ob-option.is-on { border-color: var(--brand); border-width: 2px; }
.ob-option-ic { flex: none; width: 42px; height: 42px; border-radius: 11px; background: var(--brand-50); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.ob-option-ic svg { width: 20px; height: 20px; }
.ob-option-tx { display: flex; flex-direction: column; gap: 3px; }
.ob-option-tx strong { font-size: 15px; color: var(--ink); font-weight: 600; }
.ob-option-tx span { font-size: 13px; color: #64748b; }
.ob-isapres { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ob-isapre { appearance: none; cursor: pointer; border: 2px solid var(--line); background: #fff; border-radius: 12px; height: 62px; display: flex; align-items: center; justify-content: center; padding: 10px 14px; transition: border-color var(--t); }
.ob-isapre:hover { border-color: #cbd5e1; }
.ob-isapre.is-on { border-color: var(--brand); }
.ob-isapre img { max-height: 30px; max-width: 100%; width: auto; object-fit: contain; }
.ob-primary { appearance: none; cursor: pointer; position: relative; width: 100%; margin-top: 18px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: var(--brand); color: #fff; font: inherit; font-size: 15px; font-weight: 600; padding: 13px; transition: opacity var(--t); }
.ob-primary:hover { opacity: .92; }
.ob-primary:disabled { opacity: .5; cursor: not-allowed; }
.ob-spin { position: absolute; left: 50%; top: 50%; margin: -9px 0 0 -9px; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.ob-spin[hidden] { display: none; }
.ob-skip { appearance: none; cursor: pointer; width: 100%; margin-top: 10px; border: 0; background: none; color: #64748b; font: inherit; font-size: 13px; font-weight: 500; padding: 6px; text-decoration: none; text-underline-offset: 3px; }
.ob-skip:hover { color: var(--ink); }
.ob-optional { display: inline-block; background: #f1f5f9; color: #64748b; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 3px 9px; border-radius: 6px; margin-bottom: 6px; }
.ob-error { margin-top: 14px; padding: 11px 14px; border-radius: 10px; text-align: center; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 13px; }

/* Botón "Administrar accesos" en Perfil (solo admin) */
.pf-admin { appearance: none; cursor: pointer; width: 100%; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; padding: 11px; transition: all var(--t); }
.pf-admin:hover { border-color: #cbd5e1; background: var(--bg); }
.pf-admin svg { width: 16px; height: 16px; }


.nt-ag-edit { -webkit-appearance: none; appearance: none; background: transparent; border: 0; padding: 0; font: inherit; margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--mut); text-decoration: none; cursor: pointer; }
.nt-ag-edit:hover { color: var(--ink); }


.nt-rec-hint[hidden] { display: none !important; }
.nt-rec-hint { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 9px; font-size: 12.5px; color: var(--mut); }
.nt-rh-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #15803d; }
.nt-rh-ok b { font-weight: 800; }
.nt-rh-q { font-weight: 600; color: var(--ink); }
.nt-rh-skip { font-size: 12px; color: #94a3b8; }
.nt-chip-cal { position: relative; display: inline-flex; align-items: center; gap: 5px; }
.nt-chip-cal .nt-mini-ic { width: 13px; height: 13px; }
.nt-chip-cal input[type="date"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.nt-rec-go { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: #fff; background: var(--brand); border: 0; border-radius: 9px; padding: 9px 16px; transition: background var(--t); }
.nt-rec-go:hover { background: var(--brand); }

.nt-rec-hecho { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 12px; font-weight: 600; color: var(--mut); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; transition: all var(--t); }
.nt-rec-hecho .nt-mini-ic { width: 12px; height: 12px; }
.nt-rec-hecho:hover { border-color: #16a34a; color: #15803d; background: #f0fdf4; }


.agd { width: 100%; }
.agd-head h2 { font-size: 22px; font-weight: 800; color: var(--ink); margin: 0 0 4px; }
.agd-head p { font-size: 14px; color: var(--mut); margin: 0 0 18px; }
.agd-head p b { color: var(--ink); }
.agd-add { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 20px; }
.agd-group { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #94a3b8; margin: 18px 2px 6px; }
.agd-group.is-late { color: var(--err); }
.agd-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; margin-bottom: 7px; }
.agd-row.is-done { opacity: .62; }
.agd-row.is-done .agd-row-txt { text-decoration: line-through; }
.agd-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.agd-row-txt { font-size: 14.5px; font-weight: 500; color: var(--ink); line-height: 1.35; }
.agd-row-nota { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 0; padding: 0; font-size: 12px; font-weight: 600; color: var(--mut); transition: color var(--t); }
.agd-row-nota:hover { color: var(--brand); }
.agd-row-nota .nt-mini-ic { width: 11px; height: 11px; }

/* Pastilla de fecha como botón (toca para posponer/reprogramar). */
.nt-rec-date-btn { -webkit-appearance: none; appearance: none; cursor: pointer; font: inherit; background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 3px 9px; transition: all var(--t); }
.nt-rec-date-btn:hover { border-color: var(--line); background: var(--bg); color: var(--ink); }
/* Botón lápiz (editar fila). */
.agd-row-edit-btn { -webkit-appearance: none; appearance: none; cursor: pointer; background: transparent; border: 0; padding: 2px; flex: none; color: #cbd5e1; display: inline-flex; transition: color var(--t); }
.agd-row-edit-btn:hover { color: var(--brand); }
.agd-row-edit-btn .nt-ico { width: 15px; height: 15px; }

/* Popover "Recordármelo…" (posponer). */
.agd-snz { z-index: 9700; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 38px rgba(15,23,42,.16); padding: 7px; width: 184px; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; }
.agd-snz-h { font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .03em; padding: 4px 8px 5px; }
.agd-snz-opt { -webkit-appearance: none; appearance: none; cursor: pointer; text-align: left; border: 0; background: transparent; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink); border-radius: 8px; padding: 8px 9px; display: flex; align-items: center; gap: 7px; transition: background var(--t); }
.agd-snz-opt:hover { background: var(--bg); }
.agd-snz-cal { border-top: 1px solid var(--line); margin-top: 3px; padding-top: 9px; border-radius: 0 0 8px 8px; color: var(--mut); }
.agd-snz-cal .nt-mini-ic { width: 14px; height: 14px; }

/* Fila en edición inline. */
.agd-row-editing { display: block; }
.agd-ed { display: flex; flex-direction: column; gap: 9px; }
.agd-ed-txt { width: 100%; font: inherit; font-size: 14.5px; color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; outline: none; box-sizing: border-box; transition: border-color var(--t); }
.agd-ed-txt:focus { border-color: var(--brand); }
.agd-ed-fields { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.agd-ed-field { -webkit-appearance: none; appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px; transition: border-color var(--t); }
.agd-ed-field:hover { border-color: var(--brand); }
.agd-ed-field .nt-mini-ic { width: 14px; height: 14px; color: var(--mut); }
.agd-ed-time { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mut); }
.agd-ed-time .nt-mini-ic { width: 14px; height: 14px; }
.agd-ed-time input[type=time] { font: inherit; font-size: 13px; color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 6px 9px; outline: none; }
.agd-ed-time input[type=time]:focus { border-color: var(--brand); }
.agd-ed-deft { font-size: 11.5px; color: #94a3b8; }
.agd-ed-clear { -webkit-appearance: none; appearance: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--mut); background: transparent; border: 0; padding: 4px 6px; border-radius: 6px; transition: color var(--t); }
.agd-ed-clear:hover { color: var(--err); }
.agd-ed-actions { display: flex; gap: 8px; }
.agd-ed-save { -webkit-appearance: none; appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: #fff; background: var(--brand); border: 0; border-radius: 9px; padding: 8px 16px; transition: background var(--t); }
.agd-ed-save:hover { background: var(--brand); }
.agd-ed-cancel { -webkit-appearance: none; appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--mut); background: transparent; border: 1px solid var(--line); border-radius: 9px; padding: 8px 14px; transition: all var(--t); }
.agd-ed-cancel:hover { border-color: #cbd5e1; color: var(--ink); }
.agd-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 36px 20px; color: var(--mut); }
.agd-empty .nt-ico { width: 28px; height: 28px; color: #cbd5e1; }
.agd-empty strong { font-size: 15.5px; color: var(--ink); }
.agd-empty span { font-size: 13.5px; line-height: 1.55; max-width: 420px; }
.agd-add .nt-rec-in { width: 100%; font-size: 13.5px; }

/* ============================================================
   TAB RECORDATORIOS (#asCanvas.rec-canvas) — sección propia
   (su botón en el menú izquierdo). Solo canvas, sin rieles.
   Reusa los estilos .agd-* / .nt-rec-* de la libreta.
   ============================================================ */
.canvas.rec-canvas { padding: 0; }
.rec-scroll { width: 100%; padding: 30px 32px 52px; }
.rec-scroll .agd { max-width: 760px; margin: 0 auto; width: 100%; }


/* ── Aviso de recordatorio (reloj de alarmas), clickeable → Recordatorios ── */
.as-alarma-toast { display: flex; align-items: center; gap: 10px; cursor: pointer; pointer-events: auto; max-width: 420px; padding: 12px 16px; }
.as-alarma-ic { font-size: 16px; flex: none; }
.as-alarma-tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-alarma-go { flex: none; font-weight: 700; color: #93c5fd; }

/* ── Tarjeta de avisos en la pestaña Recordatorios ── */
.agd-aviso-card { display: flex; align-items: center; gap: 13px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 18px 0 22px; }
.agd-aviso-card.is-on { border-color: #bfdbfe; background: var(--brand-50); }
.agd-aviso-card.is-blocked { border-color: #fde68a; background: #fffbeb; }
.agd-aviso-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--mut); }
.agd-aviso-card.is-on .agd-aviso-ic { background: #dbeafe; color: var(--brand); }
.agd-aviso-card.is-blocked .agd-aviso-ic { background: #fef3c7; color: #b45309; }
.agd-aviso-ic .nt-ico { width: 18px; height: 18px; }
.agd-aviso-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.agd-aviso-info strong { font-size: 14px; font-weight: 700; color: var(--ink); }
.agd-aviso-info span { font-size: 12.5px; line-height: 1.45; color: var(--mut); }
.agd-aviso-sw { -webkit-appearance: none; appearance: none; cursor: pointer; flex: none; position: relative; width: 42px; height: 24px; border: 0; border-radius: 999px; background: #cbd5e1; transition: background var(--t); }
.agd-aviso-card.is-on .agd-aviso-sw { background: var(--brand); }
.agd-aviso-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform var(--t); }
.agd-aviso-card.is-on .agd-aviso-knob { transform: translateX(18px); }

/* ── Badge del menú: pendientes de Recordatorios para hoy ── */
.tool-icon { position: relative; }
.tool-badge { position: absolute; top: -5px; right: -7px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-sizing: border-box; pointer-events: none; }
.tool-badge[hidden] { display: none; }

/* ── "Hechos hace poco" colapsable + agrupado por fecha ── */
.agd-hechos-tog { -webkit-appearance: none; appearance: none; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 8px; background: transparent; border: 0; padding: 10px 2px; margin-top: 16px; font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #94a3b8; transition: color var(--t); }
.agd-hechos-tog:hover { color: var(--mut); }
.agd-hechos-chev { width: 14px; height: 14px; flex: none; transition: transform var(--t); }
.agd-hechos-tog.is-open .agd-hechos-chev { transform: rotate(90deg); }
.agd-hechos-n { font-size: 10.5px; font-weight: 700; color: var(--mut); background: var(--bg); border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center; }
.agd-group-done { color: #94a3b8; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 12px; margin: 14px 2px 6px; }
.agd-hechos-more { font-size: 12px; color: #94a3b8; padding: 10px 2px; text-align: center; }

/* ── Date picker propio (popover) — reemplaza el calendario nativo ── */
.dp-pop { z-index: 9700; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 38px rgba(15,23,42,.16); padding: 13px; width: 252px; box-sizing: border-box; }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.dp-title { font-size: 13.5px; font-weight: 700; color: var(--ink); text-transform: capitalize; }
.dp-nav { -webkit-appearance: none; appearance: none; cursor: pointer; width: 28px; height: 28px; border: 0; border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 17px; line-height: 1; transition: background var(--t); }
.dp-nav:hover { background: #e2e8f0; }
.dp-dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.dp-dows span { text-align: center; font-size: 10.5px; font-weight: 700; color: #94a3b8; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dp-cell { height: 31px; }
.dp-day { -webkit-appearance: none; appearance: none; cursor: pointer; width: 100%; height: 31px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 13px; font-weight: 500; color: var(--ink); transition: background var(--t); }
.dp-day:hover { background: var(--brand-50); }
.dp-day.is-today { font-weight: 800; color: var(--brand); }
.dp-day.is-sel { background: var(--brand); color: #fff; font-weight: 700; }
.dp-day.is-sel:hover { background: var(--brand); }
.dp-day.is-dis { color: #cbd5e1; cursor: default; }
.dp-day.is-dis:hover { background: transparent; }

/* ============================================================
   Identidad real del cliente: correo bajo el nombre + modo discreto
   ============================================================ */
/* Correo real, solo en la Ficha del cliente (las listas muestran solo el nombre,
   para no recargarlas). */
.fx-mail { font-size: 13px; color: var(--mut); margin-top: 2px; word-break: break-all; }

/* Switch "modo discreto" en el topbar: ojo abierto (datos a la vista) vs. ojo
   tachado (datos ocultos). Estado activo sutil, sin resplandor. */
.tb-discreet .ic-eyeoff { display: none; }
.tb-discreet.is-on .ic-eye { display: none; }
.tb-discreet.is-on .ic-eyeoff { display: inline-block; }
.tb-right .tb-discreet.is-on { color: var(--brand); background: #e5e7eb; }

/* ── Ayuda y soporte ──────────────────────────────────────────────────
   Modal central canónico: velo, foco y movimiento pertenecen a AsesorModal.
   Sólo se dimensionan el contenido y sus dos caminos de contacto. */

.ayu-backdrop.am-backdrop { z-index: 9300; }
.ayu-modal.am-card { max-width: 460px; gap: 20px; }
.ayu-modal .am-head { align-items: flex-start; }
.ayu-modal .am-badge { display: none; }
.ayu-modal .am-title { font-weight: 600; line-height: 1.4; }
.ayu-modal .qv-close-button { --qv-close-bg: #f3f4f6; }
.ayu-content { display: flex; flex-direction: column; gap: 16px; }
.ayu-ico { flex: none; }

.ayu-body { display: flex; flex-direction: column; gap: 12px; }
.ayu-opt { appearance: none; width: 100%; min-height: 68px; text-align: left; display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); background: #fff; border-radius: 12px; cursor: pointer; transition: border-color var(--t), background var(--t); }
.ayu-opt:hover { border-color: var(--brand); background: var(--bg); }
.ayu-opt-ic { flex: none; width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.ayu-opt-ic .ayu-ico { width: 18px; height: 18px; }
.ayu-ic-warn { color: #ef4444; background: #fee2e2; }
.ayu-ic-chat { color: var(--brand); background: var(--brand-50); }
.ayu-opt-tx { flex: 1; min-width: 0; }
.ayu-opt-tx strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 20px; }
.ayu-opt-tx span { display: block; font-size: 12px; line-height: 18px; color: var(--mut); margin-top: 3px; }
.ayu-chev { width: 16px; height: 16px; color: var(--mut); flex: none; }
.ayu-opt:hover .ayu-chev { color: var(--brand); }

.ayu-foot { display: flex; flex-direction: column; gap: 12px; }
.ayu-mail { appearance: none; width: 100%; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 8px; text-align: left; border: none; background: none; border-radius: 10px; font: inherit; font-size: 13px; color: var(--mut); cursor: pointer; transition: background var(--t); }
.ayu-mail:hover { background: var(--bg); }
.ayu-mail strong { font-weight: 500; color: var(--brand); }
.ayu-mail-ic { width: 18px; height: 18px; color: var(--mut); }
.ayu-note { margin: 0; font-size: 12px; line-height: 18px; color: var(--mut); }

@media (prefers-reduced-motion: reduce) {
  .ayu-opt, .ayu-mail { transition: none; }
}

/* ============================================================
   Oportunidades (leads que QuVi ofrece al asesor) · opp-*
   ============================================================ */
.opp-wrap { max-width: 980px; margin: 0 auto; padding: 28px 24px 60px; }
.opp-head { margin-bottom: 18px; }
.opp-title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ink, var(--label)); margin: 0; }
.opp-sub { font-size: 14px; color: var(--muted); margin: 6px 0 0; line-height: 1.5; }
.opp-sec-title { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.opp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.opp-card { background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.opp-card--accepted { border-color: rgba(22,163,74,.28); }
.opp-card--sold { border-color: rgba(22,163,74,.45); background: linear-gradient(180deg, rgba(22,163,74,.05), var(--surface, #fff)); }
.opp-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.opp-isapre { font-size: 16px; font-weight: 750; color: var(--ink, var(--label)); }
.opp-badge { font-size: 12px; font-weight: 700; color: var(--brand); background: var(--brand-50, rgba(13,153,255,.1)); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.opp-badge--ok { color: #15803d; background: rgba(22,163,74,.12); }
.opp-meta { font-size: 13px; color: var(--muted); line-height: 1.45; }
.opp-res { font-size: 13.5px; color: var(--ink, var(--label)); font-style: italic; line-height: 1.5; }
.opp-client { font-size: 18px; font-weight: 800; color: var(--ink, var(--label)); }
.opp-rate { font-size: 12.5px; color: var(--ink, var(--label)); background: var(--brand-50, rgba(13,153,255,.08)); border-radius: 10px; padding: 10px 12px; line-height: 1.45; }
.opp-rate strong { color: var(--brand); font-weight: 800; }
.opp-actions { display: flex; gap: 10px; margin-top: 4px; }
.opp-btn { appearance: none; border: 0; flex: 1; text-align: center; text-decoration: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; padding: 11px 14px; border-radius: 12px; transition: opacity .12s, background .12s; }
.opp-btn:hover { opacity: .9; }
.opp-btn--accept { background: var(--brand); color: #fff; }
.opp-btn--ghost { background: rgba(15,23,42,.05); color: var(--ink, var(--label)); }
.opp-btn--wa { background: #1FA855; color: #fff; }
.opp-btn--sale { display: block; width: 100%; margin-top: 8px; background: #16a34a; color: #fff; }
.opp-pay { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(13,153,255,.06); border: 1px solid rgba(13,153,255,.18); }
.opp-pay-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13.5px; color: var(--ink, var(--label)); }
.opp-pay-row strong { font-size: 16px; color: var(--brand); }
.opp-pay-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.opp-btn--pay { display: block; width: 100%; margin-top: 10px; background: var(--brand); color: #fff; }
.opp-empty, .opp-loading, .opp-error { background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 16px; padding: 28px; text-align: center; font-size: 14px; color: var(--muted); line-height: 1.55; }
.opp-error { color: var(--err, #b91c1c); }

/* componentes.css separa el brillo de acciones del título cinematográfico de Inicio. */

/* Fondo compacto; el área de interacción conserva 40/44 px. */
.topbar :is(.tb-btn, .pro-nav-toggle),
.topbar :is(.tb-btn, .pro-nav-toggle):is(:hover, .is-active, [aria-expanded="true"]) { position:relative; isolation:isolate; background:transparent; }
.topbar :is(.tb-btn, .pro-nav-toggle)::after {
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset-inline:0; top:50%; height:var(--tb-avatar-size); transform:translateY(-50%);
  border-radius:10px; background:transparent;
}
.topbar :is(.tb-btn, .pro-nav-toggle):is(:hover, .is-active, [aria-expanded="true"])::after { background:#e5e7eb; }

/* Uso real de IA dentro de Cuenta; misma escala de Mi perfil. */
.pf-ai-usage { padding:16px 18px; border-top:1px solid var(--line); }
.pf-ai-head,.pf-ai-values { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pf-ai-head { font-size:13px; font-weight:500; color:var(--ink); }
.pf-ai-title { display:inline-flex; align-items:center; gap:6px; }
.pf-ai-title .mx-info-btn:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:50%; }
.pf-ai-values { margin-top:8px; font-size:14px; color:var(--ink); }
.pf-ai-values strong { font-weight:600; font-variant-numeric:tabular-nums; }
.pf-ai-meta { margin:8px 0 0; font-size:12px; line-height:18px; color:var(--mut); }
.pf-ai-track { height:6px; margin-top:12px; border-radius:var(--r-pill); background:var(--line); overflow:hidden; }
.pf-ai-fill { height:100%; background:var(--brand); border-radius:inherit; }
.pf-ai-usage.is-out .pf-ai-fill { background:var(--err); }
.pf-ai-unlimited { color:var(--mut); font-size:12px; font-weight:400; }
.pf-ai-retry { border:0; background:transparent; padding:8px 0; color:var(--brand); font-family:inherit; font-size:13px; font-weight:500; line-height:1.5; cursor:pointer; min-height:44px; }

/* Información de planes: datos comerciales compartidos, presentación propia de Pro. */
.pp-link { border:0; background:transparent; padding:8px 0; min-height:36px; font:500 13px/1.5 Inter,sans-serif; color:var(--brand); cursor:pointer; text-align:left; }
.pp-link:focus-visible { outline:2px solid var(--brand); outline-offset:3px; border-radius:4px; }
.pf-plan-value { grid-column:2; min-width:0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 16px; }
.pp-summary { margin-top:20px; padding:16px; background:#f7f8fa; border-radius:12px; }
.pp-summary h3 { margin:0 0 12px; font-size:14px; line-height:20px; font-weight:600; }
.pp-summary dl { margin:0; display:grid; gap:12px; }
.pp-summary dt { font-size:13px; line-height:1.5; font-weight:600; }
.pp-summary dd { margin:4px 0 0; font-size:13px; line-height:1.5; color:var(--mut); }
.pp-comparison { margin:0 0 20px; }
.pp-table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:13px; line-height:1.5; color:var(--ink); }
.pp-table caption { text-align:left; font-weight:600; padding:12px 0; }
.pp-table th,.pp-table td { padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top; overflow-wrap:anywhere; text-align:left; }
.pp-table th { font-weight:500; }
.pp-table th:first-child { width:44%; }
.pp-table thead { background:#f7f8fa; }
.pp-table thead th { font-weight:600; }
.pp-price { display:block; font-size:12px; font-weight:400; color:var(--mut); margin-top:4px; }
.pp-current { display:block; font-size:11px; font-weight:600; color:var(--brand); margin-top:4px; }
.pp-note { font-size:12px; line-height:18px; color:var(--mut); margin:12px 0; }
@media(max-width:760px),(pointer:coarse) { .pp-link { min-height:44px; } }
@media(max-width:600px) { .pf-plan-value { grid-column:1 / -1; } .pp-table { font-size:12px; } .pp-table th,.pp-table td { padding:10px 4px; } .pp-table th:first-child { width:40%; } }