:root{
  --bg:#f4f6f9;
  --card:#fff;
  --text:#1f2a37;
  --muted:#6b7280;
  --primary:#0a2540;
  --primary2:#163d63;
  --border:#e5e7eb;
  --shadow: 0 10px 25px rgba(0,0,0,.06);
  --radius:14px;
  --good:#16a34a;
  --danger:#dc2626;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}

.hero{
  background: linear-gradient(135deg, #0f172a 0%, #0b3a6a 55%, #0a7a77 100%);
  color:#fff;
  padding: 28px 18px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.hero-inner{
  max-width: 980px;
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.topbar{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
}
.brand,
.brand:visited,
.brand:hover,
.brand:active{
  color:#fff;
  text-decoration:none;
}
.logo{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.logo svg{
  width:44px;
  height:44px;
  display:block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
}
.hero h1{margin:0; font-size:22px; line-height:1.1}
.tagline{margin:2px 0 0 0; opacity:.9; font-size:14px}


.badge{
  border:1px solid rgba(255,255,255,.25);
  padding:6px 10px;
  border-radius:999px;
  font-size:13px;
  opacity:.95;
}

.container{
  max-width: 980px;
  margin: 0 auto;
  padding: 18px;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 18px;
  margin: 14px 0;
}

h2{margin:0 0 12px 0}
h3{margin:0 0 10px 0}

label{display:block; font-size:13px; color:var(--muted); margin-top:10px}
input{
  width:100%;
  padding: 10px 12px;
  border-radius: 10px;
  border:1px solid var(--border);
  outline:none;
  margin-top:6px;
  background:#fff;
}
input:focus{border-color:#cbd5e1}

.btn{
  background:var(--primary);
  color:#fff;
  border:none;
  border-radius: 12px;
  padding: 11px 14px;
  width:100%;
  cursor:pointer;
  margin-top: 12px;
  font-size: 15px;
}
.btn:hover{background:var(--primary2)}
.btn.small{width:auto; padding:8px 10px; font-size:13px}
.btn.outline{background:transparent; color:var(--text); border:1px solid var(--border)}
.btn.outline:hover{background:#f3f4f6}
.btn.danger{background:#dc2626}
.btn.danger:hover{background:#b91c1c}

.muted{color:var(--muted); margin:10px 0 0 0; font-size:13px}
.result{font-weight:700; margin:12px 0 0 0}

.hidden{display:none !important}

.tabs{display:flex; gap:8px; margin: 10px 0 12px 0}
.tab{
  width:auto;
  padding:8px 10px;
  border:1px solid var(--border);
  background:#fff;
  border-radius: 999px;
  cursor:pointer;
}
.tab.active{
  background:#eef2ff;
  border-color:#c7d2fe;
}

.inputs-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 10px;
}

@media (max-width: 900px){
  .inputs-grid{ grid-template-columns: 1fr; }
  .topbar{position:static; margin-top:12px}
}

.chart-wrap{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  scroll-margin-top: 14px;
}

.chart-wrap.qe-flash{
  border-top-color: var(--primary2);
  box-shadow: 0 0 0 3px rgba(10,37,64,.10);
  border-radius: 12px;
  transition: box-shadow .25s ease, border-top-color .25s ease;
}

.chart-sub{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.chart-sub h3{
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}

.advanced{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.soft-sep{
  height: 1px;
  background: rgba(148, 163, 184, 0.45);
  margin: 10px 0;
}

.advanced-title{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:12px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.advanced-title-left{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.inline-cta{
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  opacity: 0.95;
  white-space: nowrap;
}

/* Comparador */
.cmp-better{ font-weight: 600; }
.cmp-worse{ font-weight: 600; }
.cmp-delta{ font-size: 12px; color: var(--muted); margin: 8px 0 10px; }
.cmp-delta strong{ color: var(--text); }

@media (max-width: 640px){
  .inline-cta{ white-space: normal; text-align: right; }
}

.chart-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 8px;
}

.chart-title{
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.inline{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}
.inline input{
  width:auto;
  margin:0;
}

.inline.disabled{
  opacity: .6;
}

/* Tooltip (?) */
.help{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  cursor: help;
  position: relative;
  user-select:none;
  background:#fff;
}

.help:hover{
  border-color:#cbd5e1;
}

/* Tooltip box */
.help::after{
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  width: min(320px, 70vw);
  background: #111827;
  color: #fff;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  box-shadow: 0 10px 25px rgba(0,0,0,.22);
  z-index: 20;
}

/* En tablas (p.ej. Resumen) ancla el tooltip al borde derecho para evitar que se corte */
table.summary .help::after{
  left: auto;
  right: 0;
  transform: none;
}
table.summary .help::before{
  left: auto;
  right: 6px;
  transform: none;
}

/* Tooltip arrow */
.help::before{
  content:"";
  position:absolute;
  left:50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  border:6px solid transparent;
  border-top-color:#111827;
  opacity:0;
  transition: opacity .12s ease;
  pointer-events:none;
  z-index: 21;
}

.help:hover::after,
.help:hover::before{
  opacity: 1;
}

.savebox{
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
}
.savebox h3{
  margin: 0 0 12px;
}
.savebox form{
  display: grid;
  gap: 12px;
}

.list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.item{
  border:1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.item .actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.item .meta{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.item .name{font-weight:700}
.item .sub{font-size:12px; color:var(--muted)}
.item .date{font-size:12px; color:var(--muted)}
.item button{
  width:auto;
  margin:0;
  padding:8px 10px;
  border-radius: 10px;
}

.actions-menu{
  position:relative;
}
.actions-trigger{
  list-style:none;
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  color:var(--text);
  cursor:pointer;
  font-size:24px;
  line-height:1;
  padding:0;
}
.actions-trigger:hover{
  background:#f8fafc;
  border-color:#cfd8e3;
}
.actions-menu[open] .actions-trigger{
  background:#f8fafc;
  border-color:#cfd8e3;
}
.actions-menu summary{
  list-style:none;
}
.actions-menu summary::-webkit-details-marker{ display:none; }
.actions-dropdown{
  position:absolute;
  right:0;
  top:calc(100% + 6px);
  min-width:160px;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 10px 24px rgba(2,6,23,.12);
  z-index:20;
}
.actions-dropdown .btn{
  width:100%;
  justify-content:flex-start;
}

.footer{
  padding: 20px 18px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}


/* Advanced inline row (checkbox + field) */
.inline-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 6px;
}
.inline-row .inline{
  margin-top: 0;
}
.inline-field{
  display:flex;
  align-items:center;
  gap:10px;
}
.inline-field label{
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.inline-field input{
  width: 110px;
  margin:0;
}

/* Advanced extra inputs */
.advanced-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 860px){
  .advanced-grid{
    grid-template-columns: 1fr 1fr;
  }
}
.hint{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

/* Summary table */
.table-wrap{
  overflow: visible;
}
table.summary{
  width:100%;
  border-collapse: collapse;
  margin-top: 8px;
}
table.summary th, table.summary td{
  text-align:left;
  padding:10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
table.summary th{
  color: var(--muted);
  font-weight: 700;
}
table.summary td.num{
  text-align:right;
  font-variant-numeric: tabular-nums;
}

.inline-field.disabled{ opacity:.6; }


/* Link-like button */
button.link{
  background: transparent;
  border: none;
  color: var(--primary2);
  padding: 0;
  margin-top: 10px;
  text-decoration: underline;
  cursor: pointer;
  font-size: 13px;
}
button.link:hover{ opacity: .85; }

.reset-panel{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.reset-step{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.adv-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 12px;
}

.small{ font-size: 12px; }


/* Split input + select */
.split{
  display:flex;
  gap:10px;
}
.split input{ flex: 1 1 auto; }
.split select{
  flex: 0 0 170px;
}

/* Compact hero (for article pages) */
.hero.hero-compact{
  padding: 22px 0;
}
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background: #f1f5f9;
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 12px;
  display:inline-block;
}
.link{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}


select{
  width:100%;
  padding: 10px 12px;
  border-radius: 10px;
  border:1px solid var(--border);
  outline:none;
  margin-top:6px;
  background:#fff;
}
select:focus{border-color:#cbd5e1}

.pill{
  margin-top:6px;
  padding: 10px 0;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text);
  font-weight: 400;
  font-size: 16px; /* mismo tamaño que los inputs */
  text-align: right;
}
.inline-field.grow{flex:1}


.btn.ghost{
  background: transparent;
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
}

.guest-note, .lock-note{
  background: rgba(10,37,64,.06);
  border:1px dashed rgba(10,37,64,.25);
  color: var(--text);
  padding:10px 12px;
  border-radius: 12px;
  margin: 10px 0 14px;
  font-size: 14px;
}
.hero .guest-note, .hero .lock-note{color:#fff;}

.advanced.locked{
  opacity: .75;
}
.advanced.locked input,
.advanced.locked select,
.advanced.locked button{
  pointer-events: none;
}

select{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#f9fafb;
  color:var(--text);
}
select:focus{
  outline:none;
  border-color:#93c5fd;
  box-shadow: 0 0 0 3px rgba(147,197,253,.35);
}

.savebox.hidden{display:none;}


.article a{ color: var(--primary2); text-decoration: underline; }
.article a:visited{ color: var(--primary2); }


/* Gasto anual + objetivo estimado (misma línea, alineado a la derecha) */
.gasto-main-line{
  align-items: center;
  flex-wrap: nowrap;
}
.gasto-left{
  display:flex;
  align-items:center;
  gap:14px;
  flex: 1;
  min-width: 320px;
}
.gasto-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  min-width: 320px;
}
.goal-link{
  margin-top: 0;
  line-height: 1;

  font-size: 12px;
}
.goal-field input{
  width: 150px;
  text-align: right;
  margin-top: 0;
}
input.readonly{
  background: #fff;
}
@media (max-width: 900px){
  .gasto-main-line{flex-wrap: wrap;}
  .gasto-right{min-width: unset; width:100%; justify-content:flex-start;}
  .goal-field input{width: 180px;}
}


/* ===== Feedback modal ===== */
.linklike{
  background: transparent;
  border: 0;
  padding: 0;
  margin-left: 10px;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.linklike:hover{ opacity: .9; }

.modal.hidden{ display:none; }
.modal{
  position: fixed;
  inset: 0;
  z-index: 50;
}
.modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}
.modal-card{
  position: relative;
  max-width: 720px;
  width: calc(100% - 24px);
  margin: 60px auto;
  background: #0b1220;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 16px 16px 8px 16px;
}
.modal-body{
  padding: 8px 16px 16px 16px;
}
.modal-actions{
  display:flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 16px 16px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.iconbtn{
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.85);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 10px;
}
.iconbtn:hover{ background: rgba(255,255,255,.06); }

.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 10px;
}
textarea{
  width: 100%;
  resize: vertical;
  min-height: 120px;
}
@media (max-width: 640px){
  .form-grid{ grid-template-columns: 1fr; }
  .modal-card{ margin: 24px auto; }
}

/* Toast (mensajes breves de éxito/error) */
.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 28px));
  padding: 12px 14px;
  border-radius: 14px;
  background: #111;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  z-index: 9999;
}
.toast.success{ background: #0d2d1a; }
.toast.error{ background: #3b0d0d; }
.toast.hidden{ display:none; }

/* Separador */
.sep{
  border: none;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: 18px 0;
}

/* Comparador */
.compare-head h3{ margin: 0; }
.compare-head p{ margin: 6px 0 0; }

.compare-controls{
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: end;
  margin-top: 12px;
}
.compare-controls .field label{ display:block; margin-bottom: 6px; }
.compare-controls .field select{ width: 100%; }
.compare-controls .actions{ display:flex; gap: 10px; }

@media (max-width: 820px){
  .compare-controls{ grid-template-columns: 1fr; }
  .compare-controls .actions{ justify-content: flex-start; }
}


/* Comparador: dos gráficas lado a lado */
.compare-charts{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 10px;
}
.compare-charts .chart-wrap{
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
}
.compare-charts canvas{
  width: 100% !important;
  height: 280px !important;
}
.compare-charts .chart-title{
  font-weight: 800;
  margin-bottom: 8px;
}
@media (max-width: 860px){
  .compare-charts{ grid-template-columns: 1fr; }
}

/* Plan card */
.plan-card{
  margin: 14px 0 18px;
  padding: 14px 14px 12px;
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 16px;
  background: rgba(2,6,23,.04);
}
.plan-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}
.plan-title{ font-weight: 800; letter-spacing: -.01em; }
.plan-sub{ color: var(--muted); font-size: 13px; margin-top: 2px; }

.plan-list{ margin: 12px 0 0; }
.plan-hero{border:1px solid rgba(148,163,184,.28);border-radius:16px;padding:12px 14px;background:rgba(255,255,255,.72);}
.plan-hero.success{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.24);}
.plan-hero.warn{background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.25);}
.plan-hero.neutral{background:rgba(255,255,255,.76);}
.plan-hero-title{font-size:20px;font-weight:800;line-height:1.2;color:#0f172a;letter-spacing:-.02em;}
.plan-hero-message{margin-top:6px;font-size:14px;line-height:1.45;color:#334155;}
.plan-hero-motivation{margin-top:8px;font-size:14px;line-height:1.45;font-weight:600;color:#0f172a;}
.plan-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px;}
.plan-kpi-item{border:1px solid rgba(148,163,184,.28);border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.82);}
.plan-kpi-label{font-size:12px;color:var(--muted);line-height:1.3;}
.plan-kpi-value{margin-top:4px;font-size:18px;font-weight:800;color:#0f172a;line-height:1.2;}
.plan-details{margin:12px 0 0;padding-left:18px;display:grid;gap:6px;}
.plan-details li{font-size:13px;line-height:1.5;color:#334155;}
@media (max-width: 720px){
  .plan-hero{padding:11px 12px;}
  .plan-hero-title{font-size:18px;}
  .plan-hero-message,.plan-hero-motivation{font-size:13px;}
  .plan-kpis{grid-template-columns:1fr;gap:8px;}
  .plan-kpi-item{padding:9px 10px;}
  .plan-kpi-value{font-size:17px;}
  .plan-details{gap:5px;}
}

.plan-foot{ margin-top: 10px; font-size: 13px; color: var(--muted); }


/* Article / help pages */
.article-page{
  padding-bottom: 56px;
}
.article-layout{
  display:grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 22px;
  align-items:start;
}
@media (max-width: 960px){
  .article-layout{ grid-template-columns: 1fr; }
}
.toc{
  position: sticky;
  top: 14px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
}
@media (max-width: 960px){
  .toc{ position: relative; top:auto; }
}
.toc-title{
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: 8px;
}
.toc ul{
  margin: 0;
  padding-left: 18px;
}
.toc li{ margin: 8px 0; }
.toc a{
  color: var(--text);
  text-decoration: none;
}
.toc a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}
.toc-note{
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
.prose{
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 18px 18px 20px;
  box-shadow: 0 12px 28px rgba(2,6,23,.06);
}
.prose > *:first-child{ margin-top: 0; }
.prose h2{
  margin-top: 22px;
  padding-top: 10px;
  border-top: 1px solid rgba(148,163,184,.35);
  font-size: 20px;
}
.prose h3{
  margin-top: 16px;
  font-size: 16px;
}
.prose p, .prose li{
  line-height: 1.7;
  font-size: 15px;
}
.prose code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background: #f1f5f9;
  border: 1px solid rgba(148,163,184,.35);
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 13px;
}
.prose pre{
  background:#0b1220;
  color:#e5e7eb;
  border-radius: 16px;
  padding: 14px 16px;
  overflow:auto;
}
.callout{
  border: 1px solid rgba(59,130,246,.25);
  background: rgba(59,130,246,.06);
  border-radius: 16px;
  padding: 12px 14px;
  margin: 14px 0;
}
.callout strong{ display:block; margin-bottom: 4px; }
.kpi-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 6px;
}
@media (max-width: 720px){
  .kpi-row{ grid-template-columns: 1fr; }
}
.kpi{
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.75);
  border-radius: 16px;
  padding: 10px 12px;
}
.kpi .kpi-label{ font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.kpi .kpi-value{ font-weight: 800; font-size: 16px; }

.article-section{
  padding: 6px 2px;
}
.article-section + .article-section{
  margin-top: 8px;
}


/* --- L1: Remove advanced grouping blue line --- */
.advanced-stack { border-left: none !important; }


/* --- T2: Refine 'Tu plan actual' guest style --- */
.plan-card .plan-list li { font-size: 13px; line-height: 1.55; }
.plan-card .plan-sub { font-size: 13px; color: var(--muted); }
.plan-card .plan-list li strong { font-weight: 600; }
.plan-card { background: rgba(2,6,23,.03); }



.simulator-help-link{ display:inline-block; margin: 8px 0 0; font-size: 13px; }

/* --- L4: Edad actual/objetivo inputs narrower (3 digits) --- */
#edadActual, #edadObjetivo { width: 56px !important; max-width: 56px !important; }
#edadActual { text-align: right; }
#edadObjetivo { text-align: right; }

/* --- L7 fix: plan card moved into its own section (avoid double card) --- */
#planCardSection { margin-top: 16px; }
#planCardSection #planCard{
  margin: 0;
  border: none;
  background: transparent;
  padding: 0;
}

/* --- T9: Plan title uses same header style as Resumen --- */
#planCardSection .plan-sub{
  margin-top: 6px;
}

/* --- Collapsible sections --- */
.collapsible.collapsed .collapsible-content{ display:none; }
.collapse-btn{
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 10px;
  color: var(--muted);
}
.collapse-btn:hover{ background: rgba(2,6,23,.05); color: var(--text); }
.collapsible.collapsed .collapse-btn{ transform: rotate(-90deg); }

/* --- UX: clickable headers for collapsed sections --- */
.collapsible .chart-head:hover{
  background: rgba(2,6,23,.02);
  border-radius: 16px;
}

/* ensure help link is clickable */
.onboard-help{ pointer-events:auto; }



/* Acciones en cabeceras de tarjetas (ej: Exportar PDF) */
.head-actions{ display:flex; gap:10px; align-items:center; }
.head-actions .btn{ margin-top:0; width:auto; }
.btn.secondary{
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--border);
}
.btn.secondary:hover{ background: var(--bg); }

/* Banner vista compartida */
.shared-banner{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  margin:14px 0;
  border:1px solid var(--border);
  border-radius:12px;
  background: #fff7ed; /* amber-50 */
  box-shadow: 0 6px 16px rgba(0,0,0,.04);
}
.shared-banner .muted{ color: #6b7280; }
.shared-banner .small{ font-size:12px; }
.shared-banner .left{ display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.shared-banner .right{ display:flex; gap:6px; align-items:baseline; flex-wrap:wrap; max-width:55%; }
.shared-banner .sharedLink{ word-break: break-all; }



/* ===== Mobile refinements (V42.5.0) ===== */
@media (max-width: 640px){
  html, body{ max-width: 100%; overflow-x: hidden; }
  body{ padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .container{ padding: 14px; max-width: 100%; box-sizing: border-box; }

  /* Hero layout */
  .hero{ padding: 22px 14px; max-width: 100%; box-sizing: border-box; }
  .hero-inner{ flex-direction: column; align-items: flex-start; }
  .brand{ gap: 10px; }
  .logo{ width: 38px; height: 38px; }
  .logo svg{ width: 38px; height: 38px; }
  .topbar{ width: 100%; justify-content: flex-start; gap: 8px; }
  .topbar .btn.small{ padding: 10px 12px; }

  /* Buttons / actions */
  .btn{ width: 100%; }
  .btn.small{ width: auto; }
  .adv-actions{ flex-direction: column; align-items: stretch; }
  .adv-actions .btn{ width: 100%; }
  .compare-controls .actions{ flex-direction: column; align-items: stretch; }
  .compare-controls .actions .btn{ width: 100%; }

  /* Mobile CTA */
  #calcBtn{
    position: sticky;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    box-shadow: 0 10px 24px rgba(2,6,23,.16);
  }

  /* Inputs: larger tap targets */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  button,
  .qe-chip{
    min-height: 44px;
  }
  .inputs-grid{ gap: 18px; }
  .inputs-grid > div,
  .advanced,
  .adv-group,
  .fullrow,
  .card,
  .shared-banner{
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Inline rows that can overflow */
  .inline-field{ flex-wrap: wrap; }
  .split{ flex-direction: column; gap: 12px; }
  .split select{ flex: 1 1 auto; width: 100%; }
  .basic-grid .split{ flex-direction: row; align-items: stretch; gap: 8px; }
  .basic-grid .split input{ min-width: 0; }
  .basic-grid .split select{ flex: 0 0 118px; width: 118px; }

  /* Gasto + objetivo line: ensure no horizontal scroll */
  .gasto-left, .gasto-right{ min-width: 0; }
  .gasto-right{ width: 100%; }

  /* Cards and list items */
  .card{ padding: 14px; }
  .item{ flex-direction: column; align-items: flex-start; }
  .item .actions{ width: 100%; justify-content: flex-start; align-items:flex-start; }
  .item button{ width: auto; }
  .actions-menu{ width:auto; }
  .actions-dropdown{ left:0; right:auto; min-width:150px; }

  /* Summary table: fit mobile without horizontal scroll */
  #summaryTableWrap table.summary{
    display: table;
    table-layout: fixed;
    width: 100%;
    white-space: normal;
  }
  #summaryTableWrap table.summary th,
  #summaryTableWrap table.summary td{
    padding: 8px 8px;
    font-size: 12px;
    vertical-align: top;
  }
  #summaryTableWrap table.summary th:first-child,
  #summaryTableWrap table.summary td:first-child{
    width: 64%;
    word-break: break-word;
  }
  #summaryTableWrap table.summary .num{
    width: 36%;
    white-space: normal;
    word-break: break-word;
  }
}

/* Extra-small devices */
@media (max-width: 420px){
  .hero h1{ font-size: 20px; }
  .hero .tagline{ font-size: 12px; }
  .hint{ font-size: 12px; }
}



/* ===== Dependency warning (V42.6.4) ===== */
.hint-dep{ color: rgba(185,28,28,.92) !important; font-weight: 600 !important; background: rgba(220,38,38,.06); border: 1px solid rgba(220,38,38,.18); padding: 8px 10px; border-radius: 10px; display:inline-block; }

/* V43.7.0 - Email verification UX */
.noticeBar{margin:14px 0;background:rgba(37,99,235,.10);border:1px solid rgba(37,99,235,.22);border-radius:14px;padding:10px 12px}
.noticeBar__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.noticeBar__left{display:flex;align-items:center;gap:10px;min-width:260px}
.noticeDot{width:10px;height:10px;border-radius:999px;background:rgba(37,99,235,.9);box-shadow:0 0 0 4px rgba(37,99,235,.18)}
.noticeBar__text{display:flex;flex-direction:column;gap:2px;line-height:1.15}
.noticeBar__actions{display:flex;gap:8px;align-items:center}

/* Modal (lightweight, consistent) */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:60}
.modal.hidden{display:none !important}
.modalCard{width:min(720px,100%);max-height:85vh;overflow:auto;background:var(--card-bg,#0f1a2e);border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.45);padding:14px}
.modalTop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.modalBody{display:grid;gap:10px}
.modalLead{margin:0}
.modalActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.iconBtn{border:1px solid rgba(255,255,255,.10);background:transparent;color:inherit;border-radius:10px;padding:8px 10px;cursor:pointer}
.iconBtn:hover{background:rgba(255,255,255,.06)}
.tiny{font-size:12px;margin:0}

/* V43.7.2 - Verify email modal polish */
#verifyModal .modalCard{background:rgba(15,26,46,.98);border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:18px}
#verifyModal .modalTop{margin-bottom:12px}
#verifyModal .modalBody{gap:12px}
#verifyModal ul{margin:0 0 6px 18px}
#verifyModal li{margin:4px 0}
#verifyModalEmail{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
#verifyModal .btn{width:100%}
#verifyModal .modalActions{display:grid;grid-template-columns:1fr;gap:10px}

/* Turnstile */
.turnstileWrap{margin:12px 0;min-height:65px;display:flex;align-items:center}
#verifyModal .iconBtn{border-radius:12px}

/* V43.7.2 - Banner width aligned with simulator panel */
.noticeBar{max-width:1100px;margin-left:auto;margin-right:auto}

/* V43.7.3 - Modal text contrast fix */
#verifyModal .modalCard{color:rgba(229,231,235,0.98)}
#verifyModal h2{color:rgba(243,244,246,0.98)}
#verifyModal .modalLead{color:rgba(229,231,235,0.92)}
#verifyModal .modalBody .muted{color:rgba(209,213,219,0.82)}
#verifyModalEmail{
  color:rgba(243,244,246,0.98);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
}


/* Quick examples (engagement) */
.quick-examples{
  margin: 18px 0 10px;
  padding: 12px 12px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: rgba(0,0,0,.02);
}
.quick-examples .qe-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 10px;
}
.quick-examples .qe-toggle{
  cursor:pointer;
  user-select:none;
}
.quick-examples .qe-title-copy{
  min-width:0;
}
.quick-examples .qe-chevron{
  flex:0 0 auto;
  font-size:14px;
  line-height:1;
  color:#5b6573;
  transition:transform .18s ease;
}
.quick-examples.is-collapsed .qe-chevron{
  transform:rotate(-90deg);
}
.quick-examples .qe-content{
  overflow:hidden;
}
.quick-examples.is-collapsed .qe-content{
  display:none;
}
.quick-examples .qe-title h3{
  margin:0;
  font-size: 15px;
}
.quick-examples .qe-sub{
  margin:0;
  font-size: 13px;
  opacity:.8;
}
.quick-examples .qe-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.quick-examples .qe-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.7);
  cursor:pointer;
  font-size: 13px;
  line-height: 1;
  transition: transform .06s ease, box-shadow .12s ease;
}
.quick-examples .qe-chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.quick-examples .qe-chip:active{
  transform: translateY(0px);
  box-shadow:none;
}
.quick-examples .qe-chip .qe-tag{
  font-size: 11px;
  opacity:.75;
}


/* Share result (Tu plan actual) */
.plan-share{margin:10px 0 12px 0;padding:9px 10px;border:1px solid #e6e6e6;border-radius:10px;background:#fafafa;display:flex;gap:10px;align-items:center;justify-content:space-between;}
.plan-share-text{font-size:12px;color:#475569;line-height:1.25;}
.plan-share-text strong{font-weight:600;}
.plan-improve{margin:10px 0 10px 0;padding:10px 12px;border:1px solid #e6e6e6;border-radius:10px;background:#fff;}
.plan-improve-head{font-size:12px;font-weight:700;margin-bottom:6px;color:#0f172a;line-height:1.2;}
.plan-improve-list{display:grid;gap:0;}
.plan-improve-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 0;border-top:1px solid #eef2f7;}
.plan-improve-item:first-child{border-top:0;padding-top:0;}
.plan-improve-copy{font-size:12px;line-height:1.25;color:#334155;min-width:0;}
.plan-improve-copy strong{font-weight:700;color:#0f172a;}
.plan-improve-item .btn{flex:0 0 auto;padding:6px 10px;min-height:auto;line-height:1.2;}
@media (max-width: 640px){.plan-improve{padding:9px 10px;}.plan-improve-item{grid-template-columns:1fr;gap:6px;}.plan-improve-item .btn{width:100%;}}
@media (max-width: 640px){.plan-share{flex-direction:column;align-items:stretch;}.plan-share .btn{width:100%;}}


/* Share: aviso login requerido (inline) */
.share-login-note{ color:#b00020; font-weight:600; }

/* Pequeña animación para llamar la atención */
@keyframes shake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-4px); }
  40%{ transform: translateX(4px); }
  60%{ transform: translateX(-3px); }
  80%{ transform: translateX(3px); }
}
.shake{ animation: shake 0.65s ease; }

/* Share modal */
.share-row{ display:grid; gap:6px; margin-top: 10px; }
.share-kpi{ font-weight: 600; }
.share-hint{ margin-top:10px; font-size:12px; color: rgba(255,255,255,.75); }


/* --- Share modal (unificado) style fix --- */
#shareModal .modal-card{
  background: rgba(11,18,32,0.98);
  color: rgba(229,231,235,0.96);
}

#shareModal .modal-title{
  font-size: 18px;
  font-weight: 700;
  color: rgba(229,231,235,0.96);
}

#shareModal label.small{
  padding: 0;
  color: rgba(209,213,219,0.90);
}

#shareModal .share-kpi{
  color: rgba(229,231,235,0.96);
}

#shareModal .share-hint{
  color: rgba(209,213,219,0.82);
}

#shareModal .input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.95);
  color: #111827;
}

#shareModal .input:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.25);
  border-color: rgba(59,130,246,0.55);
}

/* --- FIX definitivo: botones secundarios visibles en modal oscuro --- */
#shareModal button,
#shareModal .btn{
  color: rgba(255,255,255,0.92) !important;
  opacity: 1 !important;
}

#shareModal .btn-outline,
#shareModal button.btn-outline,
#shareModal .btn.outline,
#shareModal button.btn.outline{
  border: 1px solid rgba(255,255,255,0.45) !important;
  background: transparent !important;
}

#shareModal .btn-outline:hover:not(:disabled),
#shareModal button.btn-outline:hover:not(:disabled),
#shareModal .btn.outline:hover:not(:disabled),
#shareModal button.btn.outline:hover:not(:disabled){
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.70) !important;
}

#shareModal button:disabled,
#shareModal .btn:disabled,
#shareModal :disabled{
  color: rgba(255,255,255,0.55) !important;
  border-color: rgba(255,255,255,0.25) !important;
  opacity: 1 !important;
}


/* --- Share modal (viral) --- */
#shareModal .share-inline-actions{ margin-top:8px; }
#shareModal .share-inline-actions .btn{ width:100%; }
#shareModal .share-quick-title{ font-size:12px; color:rgba(255,255,255,0.75); margin-bottom:6px; }
#shareModal .share-quick-actions{ display:flex; gap:10px; }
#shareModal .share-quick-actions .btn{ flex:1; }

/* Advanced options grouping (V50.0.2) */
.adv-intro{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  margin:2px 0 10px;
  border:1px solid #e8edf3;
  border-radius:14px;
  background:linear-gradient(180deg,#fbfdff 0%, #f8fbff 100%);
}
.adv-intro-title{
  font-size:14px;
  font-weight:700;
  color:#0f172a;
  margin-bottom:4px;
}
.adv-pill-list{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.adv-pill{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid #e5e7eb;
  color:#475569;
  font-size:12px;
  font-weight:600;
}
.adv-microcopy{
  margin: 4px 0 6px 0;
  font-size: 13px;
  color: #6b7280;
}

.advanced-stack{
  display: flex;
  flex-direction: column;
  gap: 0;
}

.adv-group{
  margin: 6px 0 10px 0;
}

.adv-group-title{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#0b3a6a;
  margin:0 0 8px 2px;
}

.adv-group .inline-field label{
  font-size:11px;
}

.adv-group .hint{
  margin-top:4px;
}

.adv-card{
  margin:0 0 8px;
  padding:12px 14px;
  border:1px solid #e8edf3;
  border-radius:14px;
  background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,0.03);
}
.adv-card-head{
  display:grid;
  gap:6px;
}
.adv-card-head-split{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:10px;
}
.adv-option-label{
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  color:#0f172a;
}
.adv-option-copy{
  color:#64748b;
  font-size:13px;
  line-height:1.45;
  margin-left:28px;
}
.adv-card-body{
  margin-top:10px;
  gap:10px;
  align-items:flex-end;
}
.adv-card .inline-field{
  min-width:0;
}
.adv-card .inline-field.grow{
  flex:1 1 220px;
}
.adv-card .inline-field input,
.adv-card .inline-field select{
  margin-top:7px;
}
.adv-two-fields .inline-field{
  flex:1 1 180px;
}

.adv-card.is-disabled{
  padding:10px 12px;
}
.adv-card.is-disabled .adv-card-head{
  gap:4px;
}
.adv-card.is-disabled .adv-option-copy{
  font-size:12px;
  line-height:1.35;
  margin-left:28px;
}
.adv-card.is-disabled .adv-card-body,
.adv-card.is-disabled #noIncomeHint{
  display:none;
}
.adv-card.is-enabled{
  padding:12px 14px;
}
.adv-card.is-enabled .adv-card-body{
  display:flex;
}
.adv-card .inline-field label{
  margin-bottom:0;
}
.goal-link,
.adv-card a.link{
  white-space:nowrap;
  font-size:12px;
}

.seo-scenario-card{margin-bottom:14px;}
.seo-scenario-wrap{display:grid;gap:8px;}
.seo-scenario-kicker{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#0f766e;}
.seo-scenario-wrap h1{margin:0;font-size:28px;line-height:1.15;}
.seo-scenario-wrap p{margin:0;color:#4b5563;}
@media (max-width:640px){.seo-scenario-wrap h1{font-size:22px;}}


/* Legal pages */
.legal-shell{
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 18px 56px;
}
.legal-card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px 20px;
  box-shadow: var(--shadow);
}
.legal-card h1{
  margin: 0 0 8px;
  font-size: 30px;
}
.legal-card .legal-intro{
  color: var(--muted);
  margin-bottom: 18px;
}
.legal-card h2{
  margin: 22px 0 8px;
  font-size: 18px;
}
.legal-card p,
.legal-card li{
  color: var(--text);
  line-height: 1.6;
}
.legal-card ul{
  padding-left: 20px;
}
.legal-note{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(37,99,235,.06);
  border: 1px solid rgba(37,99,235,.14);
  color: var(--text);
}
.footer-links{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:8px;
}
.footer-links a{
  color: var(--muted);
  text-decoration:none;
}
.footer-links a:hover{
  color: var(--text);
  text-decoration:underline;
}


#accountDangerCard{
  padding: 18px 20px;
}
#accountDangerCard .account-danger-head h3{
  margin: 0 0 6px;
  font-size: 18px;
}
#accountDangerCard .account-danger-head p{
  margin: 0;
  max-width: 720px;
}

#accountModal .btn,
#accountModal button.btn,
#changePasswordModal .btn,
#changePasswordModal button.btn{
  color: rgba(255,255,255,0.92);
  opacity: 1;
}

#accountModal .btn.outline,
#accountModal button.btn.outline,
#changePasswordModal .btn.outline,
#changePasswordModal button.btn.outline{
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.02);
  color: #f8fafc;
  font-weight: 600;
  opacity: 1;
  box-shadow: none;
}

#accountModal .btn.outline:hover,
#accountModal button.btn.outline:hover,
#changePasswordModal .btn.outline:hover,
#changePasswordModal button.btn.outline:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.42);
}

#accountChangePasswordBtn,
#accountModal .account-help-link{
  min-height: 44px;
  color: #f8fafc;
}

.text-danger-action{
  appearance: none;
  border: 0;
  background: transparent;
  color: #f87171;
  padding: 0;
  margin-top: 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.text-danger-action:hover{
  color: #fb7185;
}
.modal-card-danger{
  background: linear-gradient(180deg, #0b1220 0%, #0d1528 100%);
}
.modal-head-danger{
  align-items: flex-start;
  padding: 18px 18px 10px 18px;
}
#deleteAccountTitle{
  margin: 0;
  color: #f8fafc;
  font-size: 24px;
  line-height: 1.2;
}
.modal-kicker{
  margin: 4px 0 0;
  color: #94a3b8;
  font-size: 13px;
}
.modal-danger-copy{
  color: #cbd5e1;
}
#deleteAccountModal label{
  display: block;
  margin: 14px 0 6px;
  color: #e5e7eb;
  font-weight: 600;
}
#deleteAccountModal input{
  margin-bottom: 8px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.18);
}
#deleteAccountModal input:focus{
  border-color: rgba(59,130,246,.8);
  box-shadow: 0 0 0 4px rgba(59,130,246,.18);
}
#deleteAccountMsg{
  min-height: 20px;
  margin: 10px 0 0;
}
@media (max-width: 640px){
  #accountDangerCard{
    padding: 16px;
  }
  #deleteAccountTitle{
    font-size: 21px;
  }
  .modal-head-danger{
    padding: 16px 16px 8px 16px;
  }
}

#accountModalCard .modal-head,
#changePasswordModal .modal-head{
  align-items:flex-start;
}
#accountModalTitle,
#changePasswordTitle{
  margin:0;
  color:#f8fafc;
  font-size:24px;
  line-height:1.2;
}
#accountModalCard .modal-body,
#changePasswordModal .modal-body{
  color:#e5e7eb;
}
#accountEmailRow{
  margin: 2px 0 4px;
  color: #b8c3d3;
  font-size: 13px;
}
.account-menu-actions{
  display:grid;
  gap:12px;
  margin-top:12px;
}
.account-help-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
#changePasswordModal label,
#deleteAccountModal label{
  display:block;
  margin:14px 0 6px;
  color:#e5e7eb;
  font-weight:600;
}
#changePasswordModal input,
#deleteAccountModal input{
  margin-bottom:8px;
}
@media (max-width: 640px){
  #accountBtn{ width:auto; }
  #accountModalTitle,
  #changePasswordTitle,
  #deleteAccountTitle{ font-size:21px; }
}

.account-email{font-size:13px;color:#9aa4b2;margin-top:6px;margin-bottom:10px;}


.topbar #userBadge{display:none !important;}
.account-email{font-size:13px;color:#9aa4b2;margin-top:0;margin-bottom:14px;}


/* Feedback modal visual fix */
#feedbackModal .modal-card{
  background: rgba(11,18,32,0.98);
  color: rgba(229,231,235,0.96);
}
#feedbackModal .modal-head h3,
#feedbackModal #feedbackTitle{
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: rgba(229,231,235,0.96) !important;
}
#feedbackModal .muted,
#feedbackModal label{
  color: rgba(209,213,219,0.9);
}
#feedbackModal input,
#feedbackModal select,
#feedbackModal textarea{
  color: #111827;
}
#feedbackModal .iconbtn{
  color: rgba(255,255,255,0.9);
}

/* --- V54.7.0: simplificación visual del simulador --- */
.simulator-basic{
  border:1px solid #e7edf5;
  background:linear-gradient(180deg,#fbfdff 0%, #f8fbff 100%);
  border-radius:16px;
  padding:16px;
  margin-top:14px;
}
.section-kicker{
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#0b3a6a;
  margin-bottom:6px;
}
.section-subcopy{
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
  margin-bottom:14px;
}
.basic-grid{
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
  align-items:start;
}
.basic-grid > div{
  background:#fff;
  border:1px solid #e8edf3;
  border-radius:14px;
  padding:10px 12px;
}
.basic-grid label{ margin-top:0; color:#475569; font-weight:600; }
.basic-grid input,
.basic-grid select{ margin-top:8px; }
.basic-grid input{ padding:9px 11px; }
.basic-grid .split{ gap:8px; }
.basic-grid .split select{ flex:0 0 120px; }
.basic-grid .hint{ margin-top:6px; min-height:18px; font-size:12px; }
.quick-examples-compact{
  margin-top:14px;
  padding:12px 14px;
  background:#fff;
  border:1px solid #e8edf3;
}
.quick-examples-compact .qe-title h3{ font-size:15px; }
.quick-examples-compact .qe-sub{ margin-top:2px; }

@media (max-width: 768px){
  .quick-examples.mobile-collapsed .qe-content{
    display:none;
  }
  .quick-examples.mobile-collapsed .qe-chevron{
    transform:rotate(-90deg);
  }
  .quick-examples.mobile-collapsed .qe-title{
    margin-bottom:0;
  }
}
.btn-primary-strong{
  margin-top:16px;
  font-size:16px;
  font-weight:700;
  min-height:50px;
}
.advanced-collapsible{
  border-top:0;
  padding-top:0;
  margin-top:14px;
  border:1px solid #e5e7eb;
  border-radius:16px;
  background:#fff;
  overflow:hidden;
}
.advanced-toggle{
  margin:0;
  padding:14px 16px;
  color:#111827;
  cursor:pointer;
  user-select:none;
}
.advanced-title-right{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto;
}
.advanced-summary{
  color:var(--muted);
  font-size:12px;
  font-weight:500;
  text-align:right;
}
.advanced-chevron{
  font-size:18px;
  line-height:1;
  transition:transform .18s ease;
}
.advanced-content{
  padding:0 16px 16px;
  border-top:1px solid #eef2f7;
}
.advanced.is-collapsed .advanced-content{
  display:none;
}
.advanced.is-collapsed .advanced-chevron{
  transform:rotate(-90deg);
}
.adv-actions{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #eef2f7;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
#advancedPanel .lock-note{
  margin:0 16px 12px;
}
@media (max-width: 900px){
  .basic-grid{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .simulator-basic{ padding:14px; }
  .advanced-toggle{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
  .advanced-title-right{
    width:100%;
    justify-content:space-between;
    margin-left:0;
    gap:8px;
  }
  .advanced-summary{ text-align:left; }
  .adv-intro{
    flex-direction:column;
    padding:10px;
  }
  .adv-pill-list{
    justify-content:flex-start;
  }
  .adv-card{
    padding:10px 12px;
  }
  .adv-card.is-disabled{
    padding:9px 10px;
  }
  .adv-card-head,
  .adv-card-head-split{
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
  }
  .adv-option-copy{
    margin-left:0;
    font-size:12px;
  }
  .adv-card.is-disabled .adv-option-copy{
    margin-top:2px;
  }
  .adv-card.is-enabled{
    padding:10px 12px;
  }
  .adv-card-body,
  .adv-card.is-enabled .adv-card-body,
  .adv-card-body.inline-row{
    display:grid;
    grid-template-columns:1fr;
    justify-content:stretch;
    align-items:start;
    gap:8px;
    margin-top:8px;
  }
  .adv-card-body.adv-two-fields{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  .adv-card-body .inline-field,
  .adv-card .inline-field{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }
  .adv-card .inline-field input,
  .adv-card .inline-field select{
    width:100%;
    margin-top:0;
  }
  .goal-link,
  .adv-card a.link{
    justify-self:start;
  }
  #noIncomeHint{
    margin-top:6px !important;
  }
}

@media (max-width: 420px){
  .adv-card-body.adv-two-fields{
    grid-template-columns:1fr 1fr;
  }
}


@media (max-width: 420px){
  .basic-grid .split{ gap:6px; }
  .basic-grid .split select{ flex-basis:104px; width:104px; }
}

@media (max-width: 640px){
  #lifecycleChart{
    height: 280px !important;
  }
}

@media (max-width: 640px){
  .adv-card-body.adv-two-fields,
  .adv-card.is-enabled .adv-card-body.adv-two-fields{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
    align-items:start;
  }
  .adv-card-body.adv-two-fields .inline-field,
  .adv-card.is-enabled .adv-card-body.adv-two-fields .inline-field{
    width:auto !important;
    min-width:0 !important;
  }
  .adv-card-body.adv-two-fields .inline-field input{
    width:100% !important;
  }
}


@media (max-width: 640px){
  .advanced-collapsible,
  .advanced-content,
  .adv-card,
  .card,
  .section-card,
  .simulator-basic{
    overflow: visible;
  }
  .help::after{
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 14px;
    top: auto;
    width: auto;
    max-width: none;
    transform: none;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.4;
    z-index: 9999;
  }
  .help::before{
    display: none;
  }
  .help:hover::before,
  .help:focus::before,
  .help:active::before{
    opacity: 0;
  }
  .help:hover::after,
  .help:focus::after,
  .help:active::after{
    opacity: 1;
  }
}


.expandable-chart{ cursor: default; }
.chart-head{ gap: 12px; }
.chart-expand-btn{
  margin-left: auto;
  border: 1px solid var(--line, #d7dde7);
  background: #fff;
  color: var(--text, #142033);
  border-radius: 10px;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}
.chart-expand-btn:hover{ background:#f7f9fc; }
.chart-modal.hidden{ display:none !important; }
.chart-modal{
  position: fixed;
  inset: 0;
  z-index: 3000;
}
.chart-modal-backdrop{
  position:absolute; inset:0; background:rgba(10,22,40,.72);
}
.chart-modal-dialog{
  position:relative;
  z-index:1;
  width:min(96vw, 1200px);
  height:min(92dvh, 900px);
  margin:4dvh auto;
  background:#fff;
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.28);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.chart-modal-head{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-bottom:1px solid #e6ebf2;
}
.chart-modal-title{ font-weight:700; color:#10243d; }
.chart-modal-close{
  margin-left:auto; border:0; background:transparent; font-size:24px; cursor:pointer; color:#3a4b63;
}
.chart-modal-body{
  flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:16px; background:#f8fafc;
}
.chart-modal-body img{
  display:block; max-width:100%; max-height:calc(100dvh - 96px); width:auto; height:auto; object-fit:contain;
  border-radius:12px; background:#fff;
}
body.chart-modal-open{ overflow:hidden; }
@media (max-width: 640px){
  .chart-expand-btn{ min-width:32px; height:32px; border-radius:8px; font-size:16px; padding:0 8px; }
  .chart-modal-dialog{ width:100vw; height:100dvh; max-height:100dvh; margin:0; border-radius:0; }
  .chart-modal-head{ padding:12px 14px; }
  .chart-modal-body{ padding:10px; }
  .chart-modal-body img{ max-height:calc(100dvh - 76px); }
}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
.autofill-decoy{pointer-events:none!important;opacity:0!important;}