/* calculadora v2 — requiere design-system.css */
/* ===== Calculadora ===== */
.calc-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden; }
.calc-body { padding: 1.75rem; }
.calc-field { margin-bottom: 1.5rem; }
.calc-field:last-child { margin-bottom: 0; }
.calc-label { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.calc-label > span:first-child { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.calc-hint { font-size: 0.75rem; color: var(--text-muted); }

.monto-wrap { position: relative; }
.monto-wrap .sign { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 700; color: var(--text-muted); pointer-events: none; }
#monto, #gastos, #capital {
  width: 100%; padding: 0.85rem 1rem 0.85rem 2.6rem;
  border: 2px solid var(--border); border-radius: var(--radius-sm);
  font-size: 1.8rem; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text-primary); outline: none; transition: var(--transition);
}
#monto:focus, #gastos:focus, #capital:focus { border-color: var(--blue-mid); box-shadow: 0 0 0 3px rgba(13,102,208,0.12); }
#capital { font-size: 1.4rem; }
.monto-words { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.35rem; min-height: 1.1rem; }

.tna-row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.tna-input-wrap { position: relative; flex-shrink: 0; }
#tna {
  width: 130px; padding: 0.6rem 2rem 0.6rem 0.9rem;
  border: 2px solid var(--border); border-radius: var(--radius-sm);
  font-size: 1.15rem; font-weight: 700; color: var(--text-primary);
  outline: none; transition: var(--transition);
}
#tna:focus { border-color: var(--blue-mid); box-shadow: 0 0 0 3px rgba(13,102,208,0.12); }
.tna-input-wrap .pct { position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--text-muted); pointer-events: none; }
.tna-source { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.5rem; }
.tna-source strong { color: var(--blue-dark); }

.plazo-custom { display: flex; align-items: center; gap: 0.4rem; }
.plazo-custom input {
  width: 84px; padding: 0.4rem 0.6rem; border: 1.5px solid var(--border);
  border-radius: var(--radius-pill); font-size: 0.85rem; font-weight: 600;
  text-align: center; outline: none; transition: var(--transition);
}
.plazo-custom input:focus { border-color: var(--blue-mid); }
.plazo-custom span { font-size: 0.8rem; color: var(--text-muted); }

/* Resultado */
.result {
  background: linear-gradient(135deg, #071d4a 0%, var(--blue-dark) 60%, var(--blue-light) 100%);
  color: #fff; padding: 1.75rem; position: relative; overflow: hidden;
}
.result::before { content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%; background: rgba(255,255,255,0.06); bottom: -170px; right: -70px; pointer-events: none; }
.result-inner { position: relative; z-index: 1; }
.result-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.8; }
.result-total { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin: 0.2rem 0 0.15rem; }
.result-gain { font-size: 1rem; font-weight: 600; color: #6ee7a8; }
.result-gain span { opacity: 0.85; font-weight: 500; color: rgba(255,255,255,0.85); font-size: 0.85rem; }

.split-bar { display: flex; height: 10px; border-radius: var(--radius-pill); overflow: hidden; margin: 1.1rem 0 0.5rem; background: rgba(255,255,255,0.15); }
.split-cap { background: rgba(255,255,255,0.55); }
.split-int { background: #34d399; }
.split-legend { display: flex; gap: 1.25rem; font-size: 0.75rem; opacity: 0.9; flex-wrap: wrap; }
.split-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 0.35rem; }
.split-legend .c-cap { background: rgba(255,255,255,0.55); }
.split-legend .c-int { background: #34d399; }

.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-top: 1.4rem; }
.metric { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-sm); padding: 0.7rem 0.85rem; }
.metric-val { font-size: 1.1rem; font-weight: 800; line-height: 1.15; }
.metric-lbl { font-size: 0.66rem; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.15rem; }

.real-note { background: var(--amber-pale); border-top: 1px solid #fde68a; color: #78350f; padding: 0.85rem 1.75rem; font-size: 0.85rem; line-height: 1.5; }

/* Comparativa de plazos */
.compare-block { margin-top: 2rem; }
.data-table tbody tr.current { background: var(--blue-pale); }
.data-table tbody tr.current td:first-child { font-weight: 700; color: var(--blue-dark); }
.cur-chip { display: inline-block; background: var(--blue-dark); color: #fff; font-size: 0.56rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.1rem 0.45rem; border-radius: var(--radius-pill); margin-left: 0.4rem; vertical-align: middle; }

/* Otras calculadoras */
.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.875rem; margin-top: 1rem; }
.tool-tile { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 1.1rem; transition: var(--transition); display: flex; gap: 0.8rem; align-items: flex-start; }
.tool-tile:hover { border-color: var(--blue-light); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tool-ico { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--blue-pale); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
.tool-tile.hot .tool-ico { background: var(--amber-pale); }
.tool-name { font-size: 0.85rem; font-weight: 700; line-height: 1.3; }
.tool-desc { font-size: 0.72rem; color: var(--text-muted); line-height: 1.4; margin-top: 0.15rem; }

/* Contenido */
.content-block { margin-top: 2.5rem; }
.content-block h2 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; margin: 1.75rem 0 0.7rem; }
.content-block h2:first-child { margin-top: 0; }
.content-block h2 span { color: var(--blue-mid); }
.content-block p { font-size: 0.92rem; color: var(--text-secondary); margin-bottom: 0.9rem; max-width: 70ch; }
.content-block ul { margin: 0 0 0.9rem 1.25rem; font-size: 0.92rem; color: var(--text-secondary); }
.content-block li { margin-bottom: 0.35rem; }
.content-block a.inline { color: var(--blue-mid); font-weight: 600; }
.content-block a.inline:hover { text-decoration: underline; }
.formula {
  background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--blue-mid);
  border-radius: var(--radius-sm); padding: 1rem 1.25rem; margin: 1rem 0; font-size: 0.95rem;
}
.formula code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; color: var(--blue-dark); }
.formula .ej { display: block; font-size: 0.82rem; color: var(--text-muted); margin-top: 0.4rem; }

/* ---------- Vivir de intereses: barra de cobertura y veredicto ---------- */
.cobertura-track {
  margin-top: 1.1rem; height: 10px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.22); overflow: hidden;
}
.cobertura-fill {
  height: 100%; width: 0; border-radius: var(--radius-pill);
  background: var(--green); transition: width .35s ease, background .35s ease;
}
.veredicto {
  padding: 0.9rem 1.1rem; border-radius: var(--radius);
  font-size: 0.95rem; line-height: 1.55;
  background: var(--blue-pale); color: #1e3a8a;
}
.best-chip {
  display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.45rem;
  border-radius: var(--radius-pill); background: var(--green);
  color: #fff; font-size: 0.65rem; font-weight: 700; vertical-align: middle;
}

/* Sidebar: botón "usar tasa" */
.side-use {
  font-size: 0.68rem; font-weight: 700; color: var(--blue-mid);
  background: var(--blue-pale); border: none; border-radius: var(--radius-pill);
  padding: 0.2rem 0.55rem; cursor: pointer; transition: var(--transition);
}
.side-use:hover { background: var(--blue-dark); color: #fff; }

@media (max-width: 768px) {
  .calc-body, .result { padding: 1.25rem; }
  .real-note { padding: 0.85rem 1.25rem; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .result-total { font-size: 2.1rem; }
  #monto { font-size: 1.45rem; }
  .tools-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .tools-grid { grid-template-columns: 1fr 1fr; }
}