/* Herramientas · Finanzas con Paula — estilos compartidos.
   Reglas de marca: fucsia #F72585 único acento; texto blanco sobre fucsia solo grande y en negrita;
   verde/rojo solo para datos; sin logo (la marca es el texto FINANZAS CON PAULA). */
:root{
  --ink:#1D1A1C; --muted:#6E6468; --card:#FFFFFF; --soft:#F6F1F3; --line:#EFE3E8;
  --fucsia:#F72585; --hondo:#C9126A; --rosa:#FFD3E6; --rosa-2:#FEE8F2;
  --sube:#0E9F5B; --baja:#D64545; --gris-dato:#E6DEE2;
  --shadow:0 2px 4px rgba(120,30,70,.04), 0 8px 24px -10px rgba(120,30,70,.18);
  --r:20px;
  color-scheme: light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh;
  background:
    radial-gradient(120% 50% at 50% 0%, #FFD6E8 0%, rgba(255,214,232,0) 70%),
    linear-gradient(180deg, #FFE9F2 0%, #FFF4EE 35%, #FFFFFF 80%);
  background-color:#FFFFFF;
  color:var(--ink);
  font-family:"Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  padding:28px 16px 40px;
}
.wrap{max-width:560px; margin:0 auto; display:flex; flex-direction:column; gap:18px}
h1,h2,h3,.titular{font-family:"Nunito", sans-serif; font-weight:900; line-height:1.15; margin:0}
h1{font-size:30px; text-align:center; text-wrap:balance}
h1 em, h2 em{font-style:normal; color:var(--fucsia)}
h2{font-size:21px}
h3{font-size:17px}
p{margin:0}
a{color:var(--hondo)}

/* Cabecera de marca */
.marca{display:block; text-align:center; font-family:"Nunito",sans-serif; font-weight:800; font-size:12px; letter-spacing:.25em; color:var(--muted); text-decoration:none}
.marca b{color:var(--fucsia)}
.volver{align-self:flex-start; font-size:14px; font-weight:700; color:var(--hondo); text-decoration:none}
.entradilla{text-align:center; color:var(--muted); font-size:16px; text-wrap:balance}

/* Tarjetas */
.card{background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); padding:20px}
.card.suave{background:var(--rosa-2); box-shadow:none}

/* Bloque de resultado en fucsia: SOLO texto grande/negrita dentro */
.resultado{background:var(--fucsia); color:#fff; border-radius:24px; padding:26px 20px; text-align:center; box-shadow:0 14px 30px -12px rgba(247,37,133,.65)}
.resultado .etq{font-size:14px; font-weight:800; letter-spacing:.04em; text-transform:uppercase}
.resultado .cifra{font-family:"Nunito",sans-serif; font-weight:900; font-size:48px; line-height:1.05; margin-top:6px; font-variant-numeric:tabular-nums}
.resultado .dos{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; text-align:left}
.resultado .dos > div{background:rgba(255,255,255,.16); border-radius:16px; padding:12px 14px}
.resultado .dos .n{font-family:"Nunito",sans-serif; font-weight:900; font-size:22px; margin-top:2px; font-variant-numeric:tabular-nums}
.aviso-res{text-align:center; color:var(--muted); font-size:14px}

/* Controles */
.control{display:block}
.control + .control{margin-top:22px}
.control .fila{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.control .nom{font-weight:700}
.control .val{font-family:"Nunito",sans-serif; font-weight:900; font-size:22px; color:var(--fucsia); font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:44px; background:transparent; cursor:pointer; margin:2px 0 0}
input[type=range]::-webkit-slider-runnable-track{height:8px; border-radius:99px; background:linear-gradient(to right,var(--fucsia) 0,var(--fucsia) var(--fill,50%),var(--gris-dato) var(--fill,50%),var(--gris-dato) 100%)}
input[type=range]::-moz-range-track{height:8px; border-radius:99px; background:var(--gris-dato)}
input[type=range]::-moz-range-progress{height:8px; border-radius:99px; background:var(--fucsia)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:30px; height:30px; margin-top:-11px; border-radius:50%; background:var(--fucsia); border:4px solid #fff; box-shadow:0 2px 8px rgba(247,37,133,.45)}
input[type=range]::-moz-range-thumb{width:24px; height:24px; border-radius:50%; background:var(--fucsia); border:4px solid #fff}
input[type=number], select{width:100%; font:inherit; font-size:18px; padding:12px 14px; border:1.5px solid var(--line); border-radius:14px; background:#fff; color:var(--ink)}
input[type=number]:focus, select:focus{outline:none; border-color:var(--fucsia)}

/* Botones */
.btn{display:block; width:100%; text-align:center; font:inherit; font-family:"Nunito",sans-serif; font-weight:900; font-size:18px; cursor:pointer; border-radius:16px; padding:15px 16px; text-decoration:none; border:0}
.btn-fucsia{background:var(--fucsia); color:#fff; box-shadow:0 8px 18px -8px rgba(247,37,133,.7)}
.btn-fucsia:hover{background:var(--hondo)}
.btn-borde{background:#fff; color:var(--fucsia); border:2px solid var(--fucsia)}
.chips{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px}
.chip{font:inherit; font-weight:800; font-size:14px; padding:11px 6px; border-radius:14px; border:1.5px solid var(--line); background:#fff; color:var(--ink); cursor:pointer}
.chip[aria-pressed="true"]{background:var(--fucsia); border-color:var(--fucsia); color:#fff}

/* Gráficas SVG */
.grafica svg{display:block; width:100%; height:auto}
.leyenda{display:flex; flex-wrap:wrap; gap:14px; font-size:13px; font-weight:700; color:var(--muted); margin-bottom:10px}
.leyenda i{display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:-1px}

/* Pie */
.enlaces{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.enlaces .peq{text-align:center; font-size:14px; font-weight:700; color:var(--muted)}
footer.legal{border-top:1px solid var(--line); padding-top:16px; margin-top:8px; text-align:center; color:var(--muted); font-size:13px; line-height:1.5}
.oculto{display:none !important}
@media (min-width:600px){ h1{font-size:36px} .resultado .cifra{font-size:56px} }
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }