/* =========================================================
   DeClara Web — UI Pro (Sidebar + Onboarding + Calendario + Planes + Perfil)
   CSS orquestado y depurado para look & feel claro y profesional
   ========================================================= */

/* ===================== TOKENS / VARIABLES ===================== */
:root{
  /* Brand */
  --brand:       #6b53ff;
  --brand-2:     #ab7aff;
  --brand-300:   #b7a8ff;
  --brand-600:   #6b53ff;
  --brand-700:   #5a44f5;

  --accent:      #ff7a00;

  /* Ink / Surface */
  --ink:         #111827;
  --ink-900:     #0f1222;
  --ink-800:     #171a2e;
  --ink-700:     #1e223b;
  --ink-600:     #2a2f52;
  --ink-500:     #343a66;

  --bg:          #f4f6fb;
  --card:        #ffffff;
  --panel:       #ffffff;
  --muted:       #6b7280;

  /* Borders / Sidebar */
  --border:      #e9ecf5;
  --sb-w:        264px;
  --sb-w-collapsed: 84px;
  --sb-bg:       #ffffff;
  --sb-fg:       #4b5563;
  --sb-active:   #6b53ff;
  --sb-hover:    rgba(107, 83, 255, 0.08);

  /* Status */
  --ok:          #16a34a;
  --warn:        #f59e0b;
  --danger:      #ef4444;

  /* Elevation */
  --shadow:      0 12px 36px rgba(17,24,39,.12);
  --shadow-sm:   0 1px 2px rgba(16,24,40,.06), 0 1px 1px rgba(16,24,40,.04);
  --shadow-md:   0 10px 15px rgba(16,24,40,.08), 0 4px 6px rgba(16,24,40,.06);
  --shadow-lg:   0 20px 30px rgba(16,24,40,.10), 0 8px 10px rgba(16,24,40,.08);

  /* Radius */
  --radius:      16px;
  --radius-lg:   20px;
  --pill:        22px;

  /* Close button */
  --close-size:        34px;
  --close-bg:          #f7f7ff;
  --close-bg-hover:    #efefff;
  --close-border:      #ecebff;
  --close-color:       var(--brand-600);
  --close-shadow:      0 6px 14px rgba(107,83,255,.08);
}

/* ===================== BASE / RESET ===================== */
*{ box-sizing:border-box; }

html,body{
  height:100%;
  background:var(--bg);
  color:#0b1020;
}

body{
  margin:0;
  font:16px/1.45 Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
}

/* Utilities */
.hidden{ display:none !important; }
.w-100{ width:100%; }
.mt-6{ margin-top:6px; }

:focus-visible{
  outline: 3px solid #cbd1ff;
  outline-offset: 2px;
}

/* ===================== LAYOUT GENERAL ===================== */
.with-sidebar{
  display:grid;
  grid-template-columns: var(--sb-w) 1fr;
  position:relative;
  align-items:stretch;
}

/* cuando colapsa, el grid se ajusta */
body.sidebar-collapsed .with-sidebar{
  grid-template-columns: var(--sb-w-collapsed) 1fr;
}

/* Columna izquierda pintada a todo el alto */
.with-sidebar::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width: var(--sb-w);
  background: var(--sb-bg);
  border-right:1px solid var(--border);
  z-index:0;
}

body.sidebar-collapsed .with-sidebar::before{
  width: var(--sb-w-collapsed);
}

/* En móvil no necesitamos la columna pintada */
@media (max-width: 920px){
  .with-sidebar{ grid-template-columns:1fr; }
  .with-sidebar::before{ display:none; }
}

/* Contenedor principal */
.container{
  max-width:1200px;
  margin:22px auto;
  padding:0 16px;
}

.container .view{
  animation:fadeIn .24s ease;
}

.view.hidden{ display:none; }

@keyframes fadeIn{
  from{ opacity:0; transform:translateY(4px); }
  to{   opacity:1; transform:none; }
}

@media (prefers-reduced-motion:reduce){
  .container .view{ animation:none; }
}

/* Grid principal 2 columnas (contenido + panel derecho) */
.main-grid{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:18px;
  align-items:start;
}
.right-panel{ position:sticky; top:18px; }

@media (max-width: 1100px){
  .main-grid{ grid-template-columns:1fr; }
  .right-panel{ order:-1; }
}

/* ===================== SIDEBAR ===================== */
.sidebar{
  position:sticky;
  top:0;
  height:auto;
  min-height:0;
  padding:14px 10px;
  background:transparent;       /* lo pinta ::before en desktop */
  color:var(--sb-fg);
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:1;
}

/* header de marca en sidebar */
.side-brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:18px 16px 12px;
  border-bottom:1px solid #f0f2f8;
}
.logo-dot{
  width:8px; height:8px;
  border-radius:999px;
  background:var(--brand-600);
  box-shadow:0 0 0 4px #f3efff;
}
.logo-text{
  font-weight:800;
  letter-spacing:.2px;
  font-size:18px;
  color:var(--ink);
}
.logo-text span{ color:var(--brand-600); }

.side-toggle{
  margin-left:auto;
  border:none;
  background:#f7f7ff;
  width:34px; height:34px;
  border-radius:10px;
  color:var(--brand-600);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background .15s ease;
}
.side-toggle:hover{ background:#efefff; }

/* Navegación */
.side-nav{
  padding:12px 10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.side-item{
  --c:#3b3f53;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  color:var(--c);
  width:100%;
  text-align:left;
  cursor:pointer;
  text-decoration:none;
  transition: all .18s ease;
  position:relative;
}
.side-item .ico{
  width:22px;
  display:grid;
  place-items:center;
  color:#62657a;
}
.side-item .txt{
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.side-item:hover{
  background:#f6f6ff;
  color:#201a52;
}
.side-item.active{
  background: linear-gradient(180deg,#f3efff,#ffffff);
  border-color:#ece8ff;
  color:#21175a;
  box-shadow: inset 0 0 0 2px #efeaff;
}
.side-item.cta{
  margin-top:10px;
  color:#fff;
  background:linear-gradient(180deg,var(--brand-600),var(--brand-700));
  border:none;
  justify-content:center;
  box-shadow:0 6px 14px rgba(107,83,255,.22);
}
.side-item.cta:hover{ filter:brightness(1.06); }

/* Icon wrapper con halo */
.ico-wrap{
  width:36px; height:36px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#f7f7ff;
  border:1px solid #efeffa;
  box-shadow:var(--shadow-sm);
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.ico-24{
  width:20px; height:20px;
  color:#62657a;
}
.side-item:hover .ico-wrap{
  background:#f2f0ff;
  box-shadow:0 6px 12px rgba(107,83,255,.10);
}
.side-item.active .ico-wrap{
  background:linear-gradient(180deg,var(--brand-600),var(--brand-700));
  border-color:transparent;
  box-shadow:0 8px 14px rgba(107,83,255,.25);
}
.side-item.active .ico-24{ color:#fff; }

/* Tooltips cuando está colapsado */
body.sidebar-collapsed .side-item .txt,
body.sidebar-collapsed .side-brand .logo-text,
body.sidebar-collapsed .brand-inline .brand-text {
  display:none;
}
body.sidebar-collapsed .side-item{
  justify-content:center;
}
body.sidebar-collapsed .ico-wrap{
  margin-inline:auto;
}
body.sidebar-collapsed .side-item::after{
  content:attr(title);
  position:absolute;
  left:calc(100% + 8px);
  top:50%;
  transform:translateY(-50%);
  background:#111827;
  color:#fff;
  border-radius:10px;
  padding:6px 8px;
  font-size:12px;
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
  transition:.15s ease;
  z-index:10;
}
body.sidebar-collapsed .side-item:hover::after{
  opacity:1;
}

/* Pie del sidebar */
.brand-inline{
  display:flex;
  align-items:center;
  gap:8px;
  padding:16px 16px 8px;
  margin-top:auto;
  color:#7a7f93;
}
.brand-inline img{ display:block; }
.brand-text{ font-weight:900; }
.brand-text span{ color:var(--brand); }

.side-foot{
  padding:0 16px 16px;
  color:#9aa1b6;
}

/* Sidebar en móvil: superpuesto */
@media (max-width: 920px){
  .sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:var(--sb-w);
    background:var(--sb-bg);
    border-right:1px solid var(--border);
    box-shadow:var(--shadow-md);
    transform:translateX(0);
    transition:transform .2s ease;
    z-index:40;
  }
  body.sidebar-collapsed .sidebar{
    transform:translateX(-100%);
    width:var(--sb-w);
  }
  .container{
    padding-left:20px;
    padding-right:20px;
    padding-top:72px;
  }
}

/* ===================== HEADER APP ===================== */
.app-header{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  background:#fff;
  box-shadow:var(--shadow);
}
.brand{
  display:flex;
  align-items:center;
  font-weight:900;
  font-size:22px;
  letter-spacing:.2px;
}
.brand-logo{ color:var(--brand); }
.brand-rest{ color:#0f172a; margin-left:2px; }
.brand-dot{
  width:8px; height:8px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  border-radius:50%;
  margin-left:8px;
}
.nav{
  display:flex;
  gap:8px;
  align-items:center;
}
.nav-btn{
  border:0;
  background:transparent;
  padding:10px 12px;
  border-radius:14px;
  color:var(--muted);
  cursor:pointer;
}
.nav-btn:hover,
.nav-btn.active{
  background:rgba(107,83,255,.12);
  color:var(--brand);
}
.cta{
  margin-left:6px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;
  border-radius:999px;
  padding:10px 16px;
  font-weight:700;
  box-shadow:var(--shadow);
}

/* ===================== CARDS / HERO / FEATURES ===================== */
.card{
  background:var(--panel);
  border-radius:var(--radius-lg);
  border:1px solid #eef0f6;
  box-shadow:var(--shadow-sm);
  padding:22px;
  margin-bottom:18px;
}
.card + .card{ margin-top:18px; }
.card .muted{ color:var(--muted); }

.glass{ backdrop-filter:saturate(1.1) blur(0px); }
.muted{ color:var(--muted); }

/* Hero */
.hero{
  display:grid;
  grid-template-columns: 1.6fr .8fr;
  gap:20px;
  align-items:center;
  padding:28px;
}
.hero h1{
  margin:0 0 4px;
  font-size:16px;
  line-height:1.2;
}
.hero .actions{
  display:flex;
  gap:10px;
  margin-top:10px;
}
.grad{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* hero con logo a la derecha */
.hero-media{
  display:grid;
  place-items:center;
  height:140px;
  border-radius:14px;
  background:#ffffff;
  border:1px solid #eef0f6;
  box-shadow:0 8px 16px rgba(16,24,40,.06);
}
.hero-logo{
  width:160px;
  height:auto;
  display:block;
  filter: drop-shadow(0 2px 8px rgba(17,24,39,.12));
  animation: logoPulse 4s ease-in-out infinite;
}

@keyframes logoPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.03); }
}

.hero-title{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 8px;
  font-size:28px;
  line-height:1.2;
}
.hero-mark{
  width:28px; height:28px;
  border-radius:8px;
  box-shadow:0 2px 8px rgba(17,24,39,.12);
}
@media (max-width: 520px){
  .hero-title{ font-size:24px; }
  .hero-mark{ width:24px; height:24px; }
}

.hero-art{
  width:100%;
  height:120px;
  border-radius:16px;
  background:
    radial-gradient(60px 60px at 25% 40%, #8e7bff55, transparent 60%),
    radial-gradient(80px 80px at 70% 60%, #b69cff55, transparent 60%),
    linear-gradient(180deg,#151328,#0f0d20);
  box-shadow: inset 0 0 60px #00000040;
}

@media (max-width:1100px){
  .hero{ grid-template-columns:1fr; }
  .hero-media{ height:120px; order:2; }
}

/* Next due */
.next-due{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
}
.next-due h2{ margin:0 0 6px; }
.next-due .btn-link{
  color:var(--brand-600);
  font-weight:600;
}
.next-due-icon{
  width:48px; height:48px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#f6f3ff;
  border:1px solid #efeaff;
}

/* Quick actions */
.quick-actions{
  padding:16px 18px;
}
.quick-actions .actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* Features */
.features{ padding:22px; }
.features h2{ margin:0 0 14px; }
.features-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.feature{
  border-radius:14px;
  padding:16px;
  border:1px solid #eef0f6;
  background:#fafbff;
}
.fx-icon{
  width:28px; height:28px;
  border-radius:9px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:700;
  background: linear-gradient(180deg,var(--brand-600),var(--brand-700));
  box-shadow:0 6px 12px rgba(123,92,255,.22);
  margin-bottom:8px;
}

/* Feature PRO */
.feature.pro{
  background:#fff;
  border:1px solid #eef0f6;
  border-radius:16px;
  padding:18px;
  box-shadow:var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  position:relative;
}
.feature.pro:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:#e6e9f7;
}
.feature.pro h4{
  margin:8px 0 6px;
  font-weight:800;
}
.benefit-ico{
  width:44px; height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,var(--brand-600),var(--brand-700));
  box-shadow:0 10px 18px rgba(107,83,255,.22),
             inset 0 0 0 1px rgba(255,255,255,.25);
}
.bico{
  width:22px; height:22px;
  stroke:#fff;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Estados lock */
.feature.locked{
  opacity:.55;
  filter:grayscale(.15);
  position:relative;
}
.feature.locked .actions .btn{ pointer-events:none; }
.feature.locked::after{
  content: attr(data-why);
  position:absolute;
  inset:auto 12px 12px 12px;
  font-size:12px;
  line-height:1.2;
  background:#f7f6ff;
  color:#4638d2;
  border:1px solid #ecebff;
  border-radius:10px;
  padding:8px 10px;
  box-shadow:0 2px 10px rgba(23,23,56,.08);
}

/* Plan pill */
.plan-pill{
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  background:#eef0ff;
  color:#4f43d9;
  border:1px solid #e6e8ff;
}

/* Responsive features */
@media (max-width:1100px){
  .features-grid{ grid-template-columns:1fr; }
}

/* ===================== BOTONES / FORMS / CHIPS ===================== */
.btn{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid #e7e9f2;
  background:#fff;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:filter .12s ease, transform .06s ease;
}
.btn:hover{ filter:brightness(.98); }
.btn:active{ transform:translateY(1px); }

.btn.primary{
  background: linear-gradient(180deg,var(--brand-600),var(--brand-700));
  color:#fff;
  border:none;
  box-shadow:0 8px 16px rgba(107,83,255,.22);
}
.btn.primary:hover{ filter:brightness(1.06); }

.btn.ghost{
  background:#f7f8fd;
  border-color:#eceff7;
  box-shadow:none;
  color:#222;
}
.btn-link{
  background:transparent;
  border:none;
  color:var(--brand-600);
  cursor:pointer;
}
.btn.pill{
  border-radius:999px;
  background:#151a38;
  color:#fff;
  border:none;
  padding:8px 14px;
}
.btn.pill.ghost{
  background:#f3f4f9;
  color:#222;
  border:1px solid #eaecf4;
}
.btn.danger{ background:#e53935; color:#fff; }
.btn.xs{
  font-size:12px;
  padding:6px 9px;
  border-radius:10px;
}
/* .btn:empty{ display:none; } */

.actions{
  display:flex;
  gap:8px;
}
.actions.wrap{ flex-wrap:wrap; }
.actions.right{
  justify-content:flex-end;
  align-items:center;
}

/* Inputs */
.input,
.select,
.input-search,
input,
select{
  width:100%;
  border:1px solid #e7e9f2;
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}
input:focus,
select:focus,
.input:focus,
.input-search:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(107,83,255,.2);
}
.input-search{ min-width:280px; }

/* Fieldset */
fieldset{
  border:1px dashed var(--border);
  border-radius:14px;
  padding:10px 12px;
}

/* Grids forms */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media(max-width:960px){
  .grid-2,.grid-3{ grid-template-columns:1fr; }
}

/* Chips */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip{
  padding:8px 12px;
  border-radius:999px;
  background:#eef1ff;
  color:#2b305e;
  border:1px solid #dfe5ff;
  cursor:pointer;
}
.chip.active{
  background:#f7eaff;
  border-color:#e4d3ff;
  color:#4a2a8a;
}

.chip-filter{
  border:1px solid #e6e8f5;
  background:#fff;
  border-radius:999px;
  padding:6px 10px;
  cursor:pointer;
  font-weight:600;
}
.chip-filter.active{
  background:#f3ecff;
  border-color:#e2d6ff;
  color:#5b3df5;
}

/* ===================== CALENDARIO ===================== */
.calendar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.icon-btn{
  background:#eef1ff;
  border:0;
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
}
.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
}
.calendar-grid .dow{
  font-weight:700;
  color:var(--muted);
  text-align:center;
  padding:6px;
}
.day{
  background:#fafbff;
  border:1px solid #eef1ff;
  border-radius:14px;
  min-height:100px;
  padding:8px;
  position:relative;
}
.day .date{
  font-size:12px;
  color:#7b86a8;
}
.badges{
  position:absolute;
  bottom:8px;
  left:8px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.badge{
  border-radius:999px;
  padding:3px 8px;
  font-size:11px;
  color:#fff;
}
.badge.isr{ background:#2b73ff; }
.badge.iva{ background:#00a88b; }
.badge.diot{ background:#7b5cff; }
.day.today{ outline:2px solid var(--brand-2); }

/* legend refinado */
.legend{
  display:flex;
  gap:8px;
  padding:12px 16px;
}
.legend .badge{
  font-size:12px;
  font-weight:700;
  padding:4px 8px;
  border:1px solid transparent;
}
.badge.isr{
  color:#1d2c5c;
  background:#e9eeff;
  border-color:#dfe6ff;
}
.badge.iva{
  color:#0f5b2a;
  background:#e8f7ee;
  border-color:#d7f1e1;
}
.badge.diot{
  color:#4a1361;
  background:#f2e7ff;
  border-color:#eadcff;
}

/* ===================== CHECKLIST PRO ===================== */
.checklist{ list-style:none; padding-left:0; }
.checklist li{
  display:flex;
  align-items:center;
  gap:8px;
  margin:6px 0;
}
.checklist input{ transform:scale(1.1); }

.checklist-card{ padding:20px 20px 12px; }
.check-header{
  display:flex;
  gap:16px;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:12px;
}
.check-header h2{ margin:0; }
.check-progress{ min-width:260px; }
.progress-head{
  display:flex;
  justify-content:flex-end;
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}
.progress-label{
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}
.progress-bar{
  height:8px;
  background:#eef1ff;
  border-radius:999px;
  overflow:hidden;
}
.progress-fill{
  height:100%;
  width:0;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  border-radius:999px;
  transition:width .2s ease;
}

.check-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:10px 0 6px;
}
.filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.tools{
  display:flex;
  gap:10px;
  align-items:center;
}
.btn-group{
  display:flex;
  gap:8px;
}

/* Lista avanzada */
.pro-list{
  list-style:none;
  padding:6px 2px;
  margin:0;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.pro-item{
  display:grid;
  grid-template-columns:32px 1fr auto;
  align-items:flex-start;
  gap:12px;
  padding:12px;
  border:1px solid #eef1ff;
  background:#fff;
  border-radius:14px;
  position:relative;
  transition:box-shadow .12s ease;
}
.pro-item:hover{
  box-shadow:0 8px 20px rgba(17,24,39,.06);
}
.pro-item .title{
  font-weight:800;
}
.pro-item .hint{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}
.pro-item .right{
  display:flex;
  gap:8px;
  align-items:center;
}
.pro-item input[type="checkbox"]{ margin-top:2px; }

.pro-item.pending{
  border-color:#ffe1a6;
  background:linear-gradient(0deg,#fffaf1,#fff);
  box-shadow:inset 3px 0 0 #ffb347;
}
.pro-item.pending.isr{
  box-shadow:inset 3px 0 0 #2b73ff20,
             inset 6px 0 0 #2b73ff;
}
.pro-item.pending.iva{
  box-shadow:inset 3px 0 0 #00a88b20,
             inset 6px 0 0 #00a88b;
}
.pro-item.pending.diot{
  box-shadow:inset 3px 0 0 #7b5cff20,
             inset 6px 0 0 #7b5cff;
}
.pro-item.done{
  opacity:.75;
}
.pro-item.done .title{
  text-decoration:line-through 1.5px rgba(0,0,0,.12);
}

.status{
  font-size:12px;
  border-radius:999px;
  padding:4px 8px;
}
.status.pending{
  background:#fff2cc;
  color:#b36b00;
}
.status.ok{
  background:#e9fff5;
  color:#0d7a58;
}
#checkCounter{ font-variant-numeric:tabular-nums; }

@media(min-width:980px){
  .pro-list{ grid-template-columns:1fr 1fr; }
}
@media(min-width:1350px){
  .pro-list{ grid-template-columns:1fr 1fr 1fr; }
}

/* Checkbox mini pro */
.chk{
  appearance:none;
  -webkit-appearance:none;
  width:18px;
  height:18px;
  border:2px solid #c7cde0;
  border-radius:6px;
  background:#fff;
  display:inline-grid;
  place-content:center;
  vertical-align:middle;
  margin:0;
  cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease,
             box-shadow .15s ease, transform .06s ease;
}
.chk:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(76,175,80,.15);
}
.chk:active{ transform:scale(.96); }
.chk::after{
  content:"✓";
  font-weight:800;
  font-size:12px;
  color:#2e7d32;
  transform:scale(0);
  transition:transform .12s ease;
}
.chk:checked{
  background:#eaf6ee;
  border-color:#4caf50;
}
.chk:checked::after{ transform:scale(1); }

/* ===================== MODALES (BASE) ===================== */
.modal{
  position:fixed;
  inset:0;
  background:rgba(14,19,26,.42);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  padding:18px;
}
.modal.hidden{ display:none; }

/* Modal clásico con .modal-content (onboarding, etc.) */
.modal-content{
  background:#fff;
  padding:22px;
  border-radius:16px;
  box-shadow:var(--shadow-lg);
  width:min(760px,92vw);
  position:relative;
}
.modal-content.wide{
  width:min(900px,94vw);
}

/* Nuevo layout de tarjeta grande */
.modal-card{
  width:min(1180px,96vw);
  max-height:78vh;
  background:#fff;
  border:1px solid #eef0f6;
  border-radius:18px;
  box-shadow:0 30px 60px rgba(15,18,30,.35);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.modal-card.modal--xl{
  width:min(1280px,98vw);
}
.modal-card--xl{
  max-width:1280px;
  width:calc(100vw - 48px);
}
.modal-card--xxl{
  max-width:1400px;
  width:min(1400px, calc(100vw - 48px));
  max-height:86vh;
}

/* Head / body / foot */
.modal-head,
.modal-foot{
  position:sticky;
  z-index:1;
  background:#fff;
  padding:12px 16px;
}
.modal-head{
  top:0;
  border-bottom:1px solid #eef0f6;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.modal-foot{
  bottom:0;
  border-top:1px solid #eef0f6;
  display:flex;
  gap:8px;
  justify-content:flex-end;
}
.modal-body{
  overflow:auto;
  padding:14px 16px;
}
.modal-card--xxl .modal-body{
  padding:12px 14px;
  max-height:unset;
  overflow:visible;
}

/* Título estilo chip */
.modal-head h3,
#onboarding .modal-content > h2{
  display:inline-flex;
  align-items:center;
  padding:8px 14px;
  border-radius:999px;
  background: linear-gradient(180deg,var(--brand-600),var(--brand-700));
  color:#fff;
  box-shadow:0 6px 14px rgba(107,83,255,.22);
  line-height:1;
  font-weight:700;
  font-size:16px;
  margin:0;
}

/* Botón cerrar (unificado) */
.modal-head .icon-btn,
.modal-content .close,
.modal-close{
  appearance:none;
  display:grid;
  place-items:center;
  width:var(--close-size);
  height:var(--close-size);
  padding:0;
  border-radius:12px;
  border:1px solid var(--close-border);
  background:var(--close-bg);
  color:var(--close-color);
  box-shadow:var(--close-shadow);
  cursor:pointer;
  line-height:1;
  font-size:18px;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.modal-head .icon-btn:hover,
.modal-content .close:hover,
.modal-close:hover{
  background:var(--close-bg-hover);
  transform:translateY(-1px);
}
.modal-head .icon-btn:active,
.modal-content .close:active,
.modal-close:active{
  transform:translateY(0);
}
.modal-head .icon-btn:focus-visible,
.modal-content .close:focus-visible,
.modal-close:focus-visible{
  outline:3px solid #cbd1ff;
  outline-offset:2px;
}
.modal-content{ position:relative; }
.modal-content .close{
  position:absolute;
  top:12px;
  right:12px;
}
.modal-head .icon-btn svg,
.modal-close svg{
  width:18px; height:18px;
  stroke:currentColor;
}

/* Modal perfil (sin scroll interno) */
.modal-card.profile{
  width:1040px;
  max-width:min(1040px,96vw);
}
.modal-card.profile .modal-body{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:16px;
  align-items:start;
  padding:16px;
}
.modal-card.profile .modal-head{
  padding:14px 16px;
}
.modal-card.profile .modal-head h3{
  font-size:18px;
}
.modal-card.profile .modal-body + .actions{
  position:sticky;
  bottom:0;
  padding:10px 16px 16px;
  background:linear-gradient(180deg, rgba(255,255,255,0), #fff 40%);
  border-top:1px solid #eef0f6;
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
.modal-card.profile .icon-btn{ opacity:.8; }
.modal-card.profile .icon-btn:hover{ opacity:1; }

@media (max-height:820px){
  .modal-card.profile{ transform:translateZ(0); }
}

/* Modal-specific layouts */
.calc-modal .topbar{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.calc-modal .grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.calc-modal .grid-4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.calc-modal .kpi{
  background:#fafbff;
  border:1px solid #eef0f6;
  border-radius:12px;
  padding:10px;
}
.calc-modal .kpi h5{
  margin:0 0 6px;
  font-size:12px;
  color:#6b7280;
  font-weight:600;
}
.calc-modal .kpi .val{
  font-weight:800;
  font-variant-numeric:tabular-nums;
}

/* Bóveda fiscal */
.vault-modal .filters{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.vault-modal .cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
@media (max-width:1200px){
  .vault-modal .cards{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  .vault-modal .cards{ grid-template-columns:repeat(2,1fr); }
}
.vault-modal .doc{
  background:#fff;
  border:1px solid #eef0f6;
  border-radius:12px;
  padding:12px;
  box-shadow:0 6px 16px rgba(16,24,40,.06);
}
.vault-modal .doc h6{
  margin:0 0 4px;
  font-size:13px;
}
.vault-modal .meta{
  font-size:12px;
  color:#6b7280;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2px 8px;
}

/* IA panel (input arriba, chat abajo) */
.ai-panel{
  display:flex;
  flex-direction:column;
  height:520px;
  background:#fafaff;
  border:1px solid #eef1ff;
  border-radius:12px;
}
.ai-head{
  order:0;
  padding:10px 12px;
  border-bottom:1px solid #eef1ff;
}
.ai-form{
  order:1;
  display:flex;
  gap:8px;
  padding:10px 12px;
  border-bottom:1px solid #eef1ff;
}
.ai-chat{
  order:2;
  flex:1;
  overflow:auto;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ai-msg{
  max-width:80%;
  padding:10px 12px;
  border-radius:12px;
  line-height:1.35;
}
.ai-msg.user{
  align-self:flex-end;
  background:#e9e3ff;
}
.ai-msg.bot{
  align-self:flex-start;
  background:#fff;
}
.ai-msg .small{
  font-size:11px;
  color:#8a8ea2;
  display:block;
  margin-top:4px;
}

/* IA box genérica */
.ia-box{
  margin-top:10px;
  background:#fafaff;
  border:1px solid #eef0f6;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.ia-head{
  padding:10px 12px;
  border-bottom:1px solid #eef0f6;
  font-weight:600;
}
.ia-chat{
  max-height:220px;
  overflow:auto;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ia-form{
  display:flex;
  gap:8px;
  padding:10px 12px;
  border-top:1px solid #eef0f6;
}
.ia-form .input{ flex:1; }

/* ===================== TABLAS / VAULT ===================== */
.data-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.data-table th,
.data-table td{
  border-bottom:1px solid #eef0f6;
  padding:8px 10px;
  text-align:left;
  white-space:nowrap;
}
.data-table th{
  position:sticky;
  top:0;
  background:#fafbff;
  z-index:1;
}

/* Fichas bóveda */
.vault-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
@media(max-width:1100px){
  .vault-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:700px){
  .vault-grid{ grid-template-columns:1fr; }
}
.vault-card{
  border:1px solid #eef0f6;
  border-radius:12px;
  padding:12px;
  background:#fff;
}
.vault-card .k{ font-size:12px; color:#6b7280; }
.vault-card .v{ font-weight:700; }
.vault-card .row{
  display:flex;
  justify-content:space-between;
  gap:6px;
}

/* ===================== PRICING / PLANES ===================== */
.pricing-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
}
@media (max-width:980px){
  .pricing-grid{ grid-template-columns:1fr; }
}

.price-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px 16px 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  box-shadow:0 1px 0 rgba(16,24,40,.02);
  position:relative;
}
.price-card .pc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  position:relative;
  padding-right:120px;
}
.price-card h3{
  margin:0;
  font-size:18px;
  font-weight:800;
}
.price-card .muted{
  color:#7a8499;
  font-weight:600;
}
.price-card .lede{
  margin:2px 0 8px;
  line-height:1.45;
}
.price-card .price-line{
  margin:2px 0 4px;
}
.price-card .price{
  font-size:22px;
  font-weight:900;
  letter-spacing:.2px;
}
.price-card .btn{
  margin-top:auto;
}
.price-card .btn[disabled]{
  opacity:.6;
  cursor:not-allowed;
}

/* Etiquetas */
.tag{
  background:#f2f4ff;
  color:#4a36ff;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:700;
}
.tag--free{
  background:#e8fbef;
  color:#138a33;
}

/* Ribbon */
.ribbon{
  position:absolute;
  right:10px;
  top:34px;
  background:#6b53ff;
  color:#fff;
  font-weight:800;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  box-shadow:0 4px 12px rgba(107,83,255,.25);
}

/* Plan PRO */
.price-card.pro{
  background: linear-gradient(180deg,#ECE7FF 0%, #E6E0FF 42%, #FFFFFF 100%);
  border-color:#DDD4FF;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 10px 20px rgba(107,83,255,.10);
  color:var(--ink);
}
.price-card.pro h3,
.price-card.pro p,
.price-card.pro li,
.price-card.pro .price,
.price-card.pro .muted{
  color:var(--ink);
}
.price-card.pro .pc-head .tag,
.price-card.pro .tag{
  background:#efe9ff;
  color:#4a36ff;
}
.price-card.pro .ribbon{
  background:#6b53ff;
  color:#fff;
  box-shadow:0 6px 14px rgba(107,83,255,.22);
}

/* Plan activo */
.price-card.current{
  outline:2px solid #6b53ff;
  box-shadow:0 0 0 4px rgba(107,83,255,.12);
}

/* bullets con palomita verde */
.list.bullets{
  list-style:none;
  padding-left:0;
  margin:6px 0 10px;
}
.list.bullets li{
  position:relative;
  padding-left:28px;
  margin:8px 0;
  line-height:1.45;
}
.list.bullets li::before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  width:18px;
  height:18px;
  background:no-repeat center/contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><circle cx='10' cy='10' r='10' fill='%23E8FBF0'/><path d='M6 10.5l2.4 2.4L14 7.3' stroke='%2311A84E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.list.bullets strong{ font-weight:800; }

/* PRO: check un poco más saturado */
.price-card.pro .list.bullets li::before{
  background:no-repeat center/contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><circle cx='10' cy='10' r='10' fill='%23E4F9ED'/><path d='M6 10.5l2.4 2.4L14 7.3' stroke='%2313A357' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* Intro de modal PRO */
#modalPro .card.soft{
  background: linear-gradient(180deg, #F6F4FF 0%, #FFFFFF 100%);
  border: 1px solid #E6E0FF;
  padding: 10px 12px;
  border-radius: 14px;
  margin-bottom:10px;
}
#modalPro .card.soft::before{
  content:"ELIGE TU PLAN";
  display:inline-block;
  margin-bottom:4px;
  padding:4px 8px;
  background:#efeaff;
  color:#5a44ff;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
}
#modalPro .card.soft p{
  margin:4px 0;
  line-height:1.35;
  font-size:14.5px;
}

/* Ajustes de layout en modal PRO */
#modalPro .pro-head{ padding-block:10px; }
#modalPro .modal-body{ padding-top:10px; }
#modalPro .pricing-grid{ margin-top:6px; }
#modalPro .modal-card--xxl{ max-height:94vh; }

/* Logo + redes en header del modal PRO */
#modalPro .pro-head{
  display:flex;
  align-items:center;
  gap:10px;
}
#modalPro .pro-head .head-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
}
#modalPro .brand-top{
  height:28px;
  width:auto;
  display:block;
  filter: drop-shadow(0 1px 3px rgba(16,24,40,.12));
}

/* Redes mini en modal PRO */
#modalPro .social.small{
  display:flex;
  gap:8px;
  align-items:center;
}
#modalPro .social.small a{
  width:26px; height:26px;
  border-radius:8px;
  position:relative;
  display:block;
  background:#f2f3ff;
  border:1px solid #ecefff;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
  transition:transform .12s ease, background .15s ease, box-shadow .15s ease;
  color:#6b53ff;
  overflow:hidden;
}
#modalPro .social.small a:hover{
  background:#eef0ff;
  transform:translateY(-1px);
}
#modalPro .social.small a::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:18px;
  height:18px;
  background: currentColor;
  -webkit-mask: var(--m) no-repeat center / contain;
  mask: var(--m) no-repeat center / contain;
}

/* Máscaras SVG (mini) */
#modalPro .social.small a[data-ico="fb"]{
  --m: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27><path d=%27M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z%27/></svg>");
  color:#1877F2;
}
#modalPro .social.small a[data-ico="ig"]{
  --m: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27><path d=%27M12.017 0C8.396 0 7.987.012 6.756.06 2.702.227.228 2.688.062 6.755.012 7.986 0 8.395 0 12.017c0 3.62.012 4.028.062 5.26.166 4.066 2.626 6.54 6.693 6.705 1.23.048 1.64.06 5.26.06 3.62 0 4.028-.012 5.26-.062 4.066-.165 6.533-2.624 6.698-6.693.048-1.23.06-1.64.06-5.26 0-3.62-.012-4.028-.062-5.26-.165-4.067-2.624-6.533-6.693-6.698C16.045.012 15.636 0 12.017 0zm0 2.16c3.203 0 3.585.012 4.804.06 3.252.135 4.77 1.693 4.905 4.905.048 1.218.06 1.602.06 4.804 0 3.2-.012 3.585-.06 4.803-.135 3.21-1.644 4.773-4.905 4.905-1.218.048-1.602.06-4.804.06-3.2 0-3.585-.012-4.803-.06-3.26-.132-4.77-1.692-4.905-4.905-.048-1.218-.06-1.602-.06-4.803 0-3.202.012-3.586.06-4.804.135-3.26 1.654-4.768 4.905-4.905 1.218-.048 1.602-.06 4.803-.06zm0 3.678a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zm0 10.162a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z%27/></svg>");
  background:linear-gradient(45deg,#f58529,#feda77,#dd2a7b,#8134af,#515bd4);
  color:#fff;
}
#modalPro .social.small a[data-ico="wa"]{
  --m: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27><path d=%27M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893c0-3.189-1.248-6.189-3.515-8.447z%27/></svg>");
  color:#25D366;
}

/* Redes loud (chips grandes) */
#modalPro .social.loud{
  display:flex;
  gap:10px;
}
#modalPro .social.loud a{
  --c:#6b53ff;
  width:30px; height:30px;
  border-radius:10px;
  background:var(--c);
  border:1px solid color-mix(in srgb, var(--c), #fff 75%);
  box-shadow:
    0 2px 10px color-mix(in srgb, var(--c), transparent 75%),
    0 0 0 0 color-mix(in srgb, var(--c), transparent 85%);
  position:relative;
  overflow:hidden;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
}
#modalPro .social.loud a::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:18px;
  height:18px;
  background:#fff;
  mask: var(--m) no-repeat center / contain;
  -webkit-mask: var(--m) no-repeat center / contain;
}
#modalPro .social.loud a::after{
  content: attr(aria-label);
  position:absolute;
  left:50%;
  bottom:-26px;
  transform:translateX(-50%);
  background:#101428;
  color:#fff;
  font-size:11px;
  padding:3px 6px;
  border-radius:6px;
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
  transition:.15s;
}
#modalPro .social.loud a:hover::after{
  opacity:1;
}
#modalPro .social.loud a:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:
    0 6px 16px color-mix(in srgb, var(--c), transparent 65%),
    0 0 0 4px #fff,
    0 0 0 7px color-mix(in srgb, var(--c), #fff 70%);
}
#modalPro .social.loud a:focus-visible{
  outline:3px solid color-mix(in srgb, var(--c), #fff 40%);
  outline-offset:2px;
}
#modalPro .social.loud a[data-ico="fb"]{ --c:#1877F2; }
#modalPro .social.loud a[data-ico="wa"]{ --c:#25D366; }
#modalPro .social.loud a[data-ico="x"] { --c:#111111; }
#modalPro .social.loud a[data-ico="ig"]{
  background:
    radial-gradient(33% 33% at 30% 30%, #feda77 0, transparent 60%),
    linear-gradient(45deg,#f58529,#feda77,#dd2a7b,#8134af,#515bd4);
  border-color:#f7c7a0;
}

/* ===================== PROFILE MODAL INTERNALS ===================== */
.section{
  background:#fff;
  border:1px solid #eef0f6;
  border-radius:16px;
  padding:14px 16px;
  box-shadow:0 1px 0 rgba(16,24,40,.02);
}
.section h4{
  margin:0 0 8px;
  font-size:13px;
  letter-spacing:.2px;
  color:#2f3b66;
  font-weight:700;
}

/* Layout interno */
.compact .input,
.compact input,
.compact select{
  height:38px;
  padding:8px 10px;
  font-size:14px;
  border-radius:10px;
}
.compact label{
  font-size:12px;
  color:#364058;
  font-weight:600;
}

.grid-2c{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid-3c{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }

.chips.row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.chip{ padding:6px 10px; font-size:12px; border-radius:999px; }

.rule{
  height:1px;
  background:#eef0f6;
  margin:10px 0;
}

/* Avanzado siempre visible, sin triángulo */
details.advanced{ border:0; padding:0; }
details.advanced summary{
  list-style:none;
  cursor:default;
  user-select:none;
  font-weight:600;
  color:#5b6b8a;
  margin-bottom:6px;
}
details.advanced summary::marker{ content:""; }
details.advanced[open] summary{ color:#303a52; }
details.advanced label{ font-size:13px; }

/* Nota fuerte */
.note-strong{
  font-weight:700;
  font-style:italic;
  color:#415a3a;
}

/* Info card derecha */
.info-card{
  padding:16px 16px 14px;
  position:sticky;
  top:20px;
}
.info-head{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}
.info-head .avatar{
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,var(--brand-600),var(--brand-700));
  color:#fff;
  font-weight:800;
  font-size:18px;
  box-shadow:0 6px 14px rgba(107,83,255,.22);
}
.info-head .titles{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}
.info-card .kv{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px;
}
.info-card .kv li{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid #eef0f6;
  border-radius:12px;
  background:#fbfbff;
}
.info-card .kv li span{ color:var(--muted); }
.info-empty{
  margin-top:12px;
  padding:12px;
  border:1px dashed #e0e3ff;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(107,83,255,.08), rgba(171,122,255,.08));
}

/* ===================== NOTIFICACIONES GLOBALES ===================== */
.notification,
.enhanced-notification{
  position:fixed;
  right:24px;
  bottom:24px;
  max-width:360px;
  padding:12px 16px;
  border-radius:12px;
  background:#111827;
  color:#f9fafb;
  box-shadow:0 18px 45px rgba(15,23,42,.35);
  z-index:11000;
  display:flex;
  align-items:center;
  animation:notif-fade-in 0.25s ease-out;
  font-size:.95rem;
}

/* variantes */
.notification-info,
.enhanced-notification-info{
  border-left:4px solid #3b82f6;
}
.notification-success,
.enhanced-notification-success{
  border-left:4px solid #10b981;
}
.notification-warning,
.enhanced-notification-warning{
  border-left:4px solid #f59e0b;
}
.notification-error,
.enhanced-notification-error{
  border-left:4px solid #ef4444;
}

.notification-content,
.enhanced-notification-content{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
}
.notification-message,
.enhanced-notification-message{
  flex:1;
  line-height:1.4;
}
.notification-close,
.enhanced-notification-close{
  background:transparent;
  border:none;
  color:#9ca3af;
  font-size:16px;
  cursor:pointer;
  padding:2px 4px;
}
.notification-close:hover,
.enhanced-notification-close:hover{
  color:#e5e7eb;
}

@keyframes notif-fade-in{
  from{ opacity:0; transform:translateY(8px); }
  to{   opacity:1; transform:translateY(0); }
}

/* ===================== ONBOARDING / FEATURE CARDS ===================== */
.onboarding-error-banner{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-bottom:16px;
  padding:10px 14px;
  border-radius:10px;
  background:#fef2f2;
  border:1px solid #fecaca;
  color:#991b1b;
  font-size:.9rem;
}
.onboarding-error-icon{
  font-size:1.2rem;
  margin-top:2px;
}
.onboarding-error-message{
  line-height:1.4;
}

.onboarding-hero-logo{
  display:flex;
  justify-content:right;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
}
.onboarding-logo-circle{
  width:52px;
  height:52px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 20%, #ffb6ff, #8a63ff);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 30px rgba(118,84,255,.35);
}
.onboarding-logo-img{
  width:64px;
  height:64px;
}
.onboarding-logo-text{
  font-weight:700;
  font-size:1.1rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#1a1a1a;
}

/* ===== Encabezado onboarding ===== */
.onboarding-shell-header{
  max-width: 900px;
  margin: 0 auto 24px;
}

/* Línea principal: texto a la izquierda, logo a la derecha */
.onboarding-shell-brand{
  display: flex;
  align-items: center;           /* alinea tagline y logo en la misma línea */
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

/* Contenedor del tagline + h1 */
.onboarding-shell-title{
  flex: 1;
}

.onboarding-shell-title .onboarding-tagline{
  display: block;
  font-size: 0.9rem;
  color: #6b7280;
  margin-bottom: 6px;
}

.onboarding-shell-title h1{
  margin: 0;
  font-size: 1.9rem;
  line-height: 1.25;
}

/* Logo: pegado a la derecha del header */
.onboarding-shell-brand .onboarding-logo-img{
  flex-shrink: 0;
  width: 120px;         /* ajusta tamaño a tu gusto */
  height: auto;
  margin-left: 24px;   /* se separa visualmente del texto */
}

/* ===== Meta del encabezado (chips violeta suaves) ===== */
.onboarding-shell-meta{
  display: inline-flex;
  align-items: center;
  gap: 6px;                           /* ⬅️ menos espacio entre items */
  padding: 4px 10px;
  margin-top: 6px;
  border-radius: 999px;
  background: rgba(91, 56, 248, 0.06);  /* violeta MUY tenue */
  font-size: 0.9rem;
}

.onboarding-shell-meta .meta-item{
  white-space: nowrap;
  padding: 2px 8px;
  border-right: 1px solid rgba(123, 92, 255, 0.18);
}

.onboarding-shell-meta .meta-item:last-child{
  border-right: none;
}

.onboarding-shell-subtitle{
  margin: 6px 0 8px;   /* reduce el espacio vertical total del header */
  font-size: 0.95rem;
  color: #6b7280;
}

.onboarding-footer{
  margin-top: 24px;
  padding: 18px 32px 32px;
  border-top: 1px solid rgba(226,230,251,0.8);
  display:flex;
  justify-content: flex-end;
}

.onboarding-footer-inner{
  width:100%;
  max-width:960px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
}

.onboarding-footer-spacer{
  flex:1;
}

.hidden{
  display:none !important;
}

/* ===== Fichas de features ===== */
.feature-card{
  background:#ffffff;
  border-radius:18px;
  padding:22px 20px;
  text-align:left;
  border:1px solid rgba(226,230,251,0.9);
  box-shadow:0 16px 45px rgba(25,28,54,0.06);
}
.feature-illustration{
  width:52px;
  height:52px;
  border-radius:18px;
  margin-bottom:14px;
  background-size:60%;
  background-repeat:no-repeat;
  background-position:center;
}
.feature-illustration--calendar{
  background-image:url('assets/onboarding/icon-calendar.webp');
  background-color:#f3ecff;
}
.feature-illustration--calculator{
  background-image:url('assets/onboarding/icon-calculator.webp');
  background-color:#e9f5ff;
}
.feature-illustration--reminders{
  background-image:url('assets/onboarding/icon-bell.webp');
  background-color:#fff4ec;
}

/* chips de actividades */
.activity-chip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  background:#ffffff;
  border-radius:14px;
  border:1px solid #e5e7fb;
  cursor:pointer;
  transition:all 0.18s ease;
}
.activity-icon{
  width:32px;
  height:32px;
  border-radius:12px;
  background-color:#f4f3ff;
  background-size:70%;
  background-position:center;
  background-repeat:no-repeat;
}
.activity-icon--sueldos{
  background-image:url('assets/onboarding/icon-payroll.webp');
}
.activity-icon--servicios{
  background-image:url('assets/onboarding/icon-services.webp');
}
.activity-icon--arr{
  background-image:url('assets/onboarding/icon-house.jpeg');
}
.activity-icon--actividades{
  background-image:url('assets/onboarding/icon-actividades.webp');
}
.activity-icon--plataformas{
  background-image:url('assets/onboarding/icon-plataformas.webp');
}
.activity-icon--intereses{
  background-image:url('assets/onboarding/icon-intereses.webp');
}
.activity-icon--dividendos{
  background-image:url('assets/onboarding/icon-dividendos.jpeg');
}
.activity-icon--otros{
  background-image:url('assets/onboarding/icon-otros.webp');
}
.activity-label{
  font-weight:500;
  color:#26243a;
}
.activity-chip.selected,
.activity-chip.active{
  border-color:#7b5cff;
  background:linear-gradient(135deg,#f4eeff,#f7f4ff);
  box-shadow:0 10px 25px rgba(75,52,195,0.18);
}

/* ===================== FOOTER APP ===================== */
.app-footer{
  padding:40px 12px;
  text-align:center;
  color:var(--muted);
}

/* ==== Layout general del Onboarding (desktop) ==== */
.onboarding-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.onboarding-flow {
  max-width: 1060px;
  width: 100%;
  margin: 0 auto;
  padding: 20px 24px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Cada paso ocupa el alto disponible sin provocar scroll en desktop */
@media (min-width: 1200px) {
  .onboarding-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* centra verticalmente el contenido */
  }

  .onboarding-hero-card,
  .onboarding-layout {
    margin: 0 auto;
    max-width: 900px;
  }
}

/* Compactar márgenes y tipografías para que todo quepa cómodo */
.onboarding-header h2,
.onboarding-hero h2 {
  margin-bottom: 6px;
}

.onboarding-header p,
.onboarding-hero p {
  margin-top: 0;
  margin-bottom: 10px;
}

.onboarding-main {
  padding: 18px 26px 16px;
}

.onboarding-side-card {
  padding: 18px 20px 16px;
}

.onboarding-form .form-group {
  margin-bottom: 14px;
}

.onboarding-reassure {
  margin-top: 16px;
}

.onboarding-actions {
  margin-top: 18px;
}

.onboarding-side-card h3 {
  margin-bottom: 8px;
}

.onboarding-side-card ul {
  margin: 8px 0 6px;
}

:root {
  /* Ajusta este color si ya tienes una variable de marca definida */
  --declara-primary: #7c3aed;
}

/* Banda de encabezado */
.onboarding-shell-header {
  padding: 16px 40px 14px;
  background: radial-gradient(circle at top left,
              rgba(124, 58, 237, 0.10),
              rgba(124, 58, 237, 0.02));
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
}

/* Marca alineada y más compacta */
.onboarding-shell-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}

.onboarding-logo-img {
  width: 80px;
  height: auto;
  flex-shrink: 0;
}

.onboarding-shell-title h1 {
  font-size: 1.45rem;
  margin: 2px 0 0;
}

.onboarding-tagline {
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.7);
}

/* Subtítulo del header más compacto */
.onboarding-shell-subtitle {
  margin: 2px 0 8px;
  font-size: 0.9rem;
}

/* Cinta de meta-items con fondo sutil violeta */
.onboarding-shell-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.06);
}

.onboarding-shell-meta .meta-item {
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Progreso + contador pegados al header */
.onboarding-progress-container {
  margin-top: 8px;
  margin-bottom: 0;
}

.onboarding-step-counter {
  margin-top: 4px;
  font-size: 0.8rem;
}

/* Feature cards: más compactas + hover profesional */
.onboarding-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.feature-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 18px 16px;
  border: 1px solid rgba(226, 230, 251, 0.9);
  box-shadow: 0 12px 35px rgba(25, 28, 54, 0.05);
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.feature-card h3 {
  margin-top: 6px;
  margin-bottom: 4px;
  font-size: 0.95rem;
}

.feature-card p {
  font-size: 0.82rem;
  margin: 0;
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 45px rgba(88, 28, 135, 0.18);
  border-color: rgba(124, 58, 237, 0.35);
  background: radial-gradient(circle at top left,
              rgba(124, 58, 237, 0.08),
              #ffffff);
}

/* ==== Modal de detalle de funcionalidades ==== */
.feature-modal.hidden {
  display: none;
}

.feature-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
}

.feature-modal-dialog {
  position: relative;
  z-index: 1;
  max-width: 780px;
  width: 90%;
  background: #ffffff;
  border-radius: 20px;
  padding: 22px 26px 22px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
}

.feature-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: transparent;
  font-size: 1.2rem;
  cursor: pointer;
  color: rgba(15, 23, 42, 0.6);
}

.feature-modal-lead {
  margin: 4px 0 16px;
  font-size: 0.9rem;
  color: rgba(15, 23, 42, 0.8);
}

.feature-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.feature-modal-card {
  border-radius: 14px;
  padding: 12px 12px 10px;
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.9);
  font-size: 0.85rem;
}

.feature-modal-card h4 {
  margin: 0 0 6px;
  font-size: 0.9rem;
  color: var(--declara-primary);
}

/* Link bajo las cards */
.feature-more-link {
  margin-top: 12px;
  text-align: center;
}

.btn-link {
  border: none;
  background: transparent;
  font-size: 0.85rem;
  color: var(--declara-primary);
  text-decoration: underline;
  cursor: pointer;
}

/* Evita scroll en body cuando el onboarding está abierto */
body.onboarding-open {
  min-height: 100vh;
  overflow: hidden;
}

/* Contenedor general del onboarding (cubre pantalla) */
#enhancedOnboardingContainer.onboarding-shell {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: stretch;
  background: radial-gradient(circle at top, #f4f2ff 0, #f8f9ff 35%, #ffffff 100%);
}

/* Columna interna: header + pasos + footer */
.onboarding-flow {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
}

:root {
  /* Ajusta estos valores a la realidad de tu header/footer */
  --onb-header-h: 210px;
  --onb-footer-h: 90px;
  --onb-shell-pad-x: 24px;
}

/* HEADER GLOBAL */
.onboarding-shell-header {
  flex: 0 0 auto;
  padding: 24px var(--onb-shell-pad-x) 16px;
  position: sticky;      /* se queda fijo dentro del shell */
  top: 0;
  z-index: 10;
  background: radial-gradient(circle at top, #f4f2ff 0, #f8f9ff 35%, #ffffff 100%);
}

/* Cada paso ocupa el espacio entre header y footer */
.onboarding-step {
  flex: 1 1 auto;
  display: flex;
  align-items: center;                /* centra verticalmente la tarjeta */
  justify-content: center;
  padding: 0 var(--onb-shell-pad-x);
  margin: 0;                          /* evita que se despegue del centro */
}

/* Card del paso 1 */
.onboarding-hero-card,
.onboarding-layout {                  /* pasos 2–5 */
  width: 100%;
  max-width: 960px;
  background: #ffffff;
  border-radius: 24px;
  padding: 32px 40px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.06);

  /* Aquí está el truco: la card nunca es más alta que el hueco
     entre header y footer; si el contenido se pasa, scrollea DENTRO
     de la propia tarjeta, no en toda la pantalla. */
  max-height: calc(100vh - var(--onb-header-h) - var(--onb-footer-h) - 24px);
  overflow-y: auto;
}

/* Opcional: en móviles reduce padding y radio para que entre todo mejor */
@media (max-width: 768px) {
  .onboarding-step {
    padding: 0 12px;
  }
  .onboarding-hero-card,
  .onboarding-layout {
    padding: 24px 16px;
    border-radius: 16px;
  }
}

.onboarding-footer {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: #ffffff;
  padding: 12px var(--onb-shell-pad-x) 20px;
  box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.06);
}

.onboarding-footer-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.onboarding-footer-spacer {
  flex: 1;
}

.onboarding-header {
  margin: 0 0 16px;
}

.onboarding-form {
  margin: 0;
}

.onboarding-side-card {
  margin: 0;
}

.onboarding-hero h2,
.onboarding-header h2 {
  margin-top: 0;
}