/* ============================================================
   MiBolsillo.es — Sistema de diseño «Día vivo» (oct 2026)
   Rediseño de color: fondo claro y aireado, degradado vivo
   cian → violeta → magenta, acentos ámbar/coral, tarjetas
   blancas con color propio por calculadora (sueldo esmeralda,
   hipoteca violeta, paro coral) y logo propio en SVG.
   Solo cambia la capa visual: HTML y scripts intactos.
   ============================================================ */
:root {
  color-scheme: light;
  --bg:#eef3ff;
  --surface:#ffffff;
  --surface-2:#edf1ff;
  --ink:#16213c;
  --muted:#5b6a94;
  --line:#d9e2fb;
  --line-bright:#b3c4f7;
  --accent:#0891b2;
  --accent-2:#7c3aed;
  --accent-3:#db2777;
  --accent-ink:#081226;
  --accent-soft:rgba(6,182,212,.12);
  --warm:#e11d48;
  --warm-soft:rgba(244,63,94,.10);
  --danger:#dc2626;
  --grad:linear-gradient(95deg,#06b6d4 0%,#8b5cf6 52%,#ec4899 100%);
  --grad-text:linear-gradient(95deg,#0891b2 0%,#7c3aed 55%,#db2777 100%);
  /* Color propio de cada calculadora */
  --c-salary:#059669;
  --c-salary-2:#10b981;
  --c-mortgage:#7c3aed;
  --c-mortgage-2:#c026d3;
  --c-unemployment:#ea580c;
  --c-unemployment-2:#f43f5e;
  --shadow:0 24px 60px rgba(80,90,180,.18),0 4px 16px rgba(80,90,180,.08);
  --radius-lg:28px;
  --radius-md:17px;
  --radius-sm:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f4f8ff;color:var(--ink);font-family:"DM Sans","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
/* Resplandor alegre fijo: halos de color vivos sobre fondo claro */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(900px 480px at 8% -8%,rgba(34,211,238,.34),transparent 60%),
  radial-gradient(840px 520px at 92% -12%,rgba(236,72,153,.27),transparent 60%),
  radial-gradient(760px 480px at 88% 108%,rgba(245,158,11,.26),transparent 62%),
  radial-gradient(1100px 720px at 50% 118%,rgba(139,92,246,.24),transparent 62%),
  linear-gradient(180deg,#fcfeff 0%,#f2f6ff 55%,#e9efff 100%)}
::selection{background:rgba(139,92,246,.30);color:#2a1060}
button,input,select{font:inherit}
button{color:inherit}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
@keyframes grad-slide{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.page{width:min(1160px,calc(100% - 32px));margin:0 auto;padding:34px 0 56px}

/* ---------- Cabecera con logo ---------- */
.site-brand{position:relative;z-index:5;background:rgba(255,255,255,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-brand::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--grad);background-size:220% 100%;animation:grad-slide 10s ease-in-out infinite alternate}
.brand-inner{width:min(1160px,calc(100% - 32px));margin:0 auto;display:flex;align-items:center;padding:11px 0}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand-logo{width:46px;height:46px;flex:none;filter:drop-shadow(0 7px 15px rgba(124,58,237,.35));transition:transform .3s ease}
.brand:hover .brand-logo{transform:rotate(-7deg) scale(1.08)}
.brand-name{font-size:1.32rem;font-weight:800;letter-spacing:-.02em;line-height:1}
.brand-name em{font-style:normal;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Cabecera ---------- */
.intro{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(250px,.55fr);gap:30px;align-items:end;margin-bottom:34px;padding:34px 0 8px}
.intro::before{content:"";position:absolute;left:2px;top:6px;width:128px;height:5px;border-radius:99px;background:var(--grad);background-size:220% 100%;animation:grad-slide 7s ease-in-out infinite alternate}
.intro h1{position:relative;z-index:1;font-size:clamp(2.35rem,6vw,5rem);line-height:.98;letter-spacing:-.045em;margin:0;max-width:760px;font-weight:700}
.intro h1 em{font-style:normal;background:var(--grad-text);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:grad-slide 8s ease-in-out infinite alternate}
.intro p{position:relative;z-index:1;font-size:1.08rem;color:var(--muted);margin:0 0 8px;max-width:360px}

/* ---------- Pestañas de calculadora ---------- */
.tool-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:15px}
.tab{appearance:none;border:1.5px solid var(--line);background:rgba(255,255,255,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:16px;padding:15px 16px;font-weight:700;cursor:pointer;display:grid;grid-template-columns:38px 1fr auto;gap:11px;align-items:center;text-align:left;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
.tab:hover{transform:translateY(-3px);border-color:var(--line-bright);box-shadow:0 14px 30px rgba(80,90,180,.18)}
.tab .num{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.69rem;color:var(--muted)}
.tab-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--surface-2);color:var(--accent);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 4px 10px rgba(80,90,180,.14)}
.tab-icon svg{width:20px;height:20px;filter:drop-shadow(0 1px 1px rgba(22,33,60,.18))}
.tab-label{line-height:1.15}
#tab-salary .tab-icon{background:linear-gradient(140deg,#a7f3d0,#6ee7b7);color:#047857}
#tab-mortgage .tab-icon{background:linear-gradient(140deg,#ddd6fe,#f0abfc);color:#6d28d9}
#tab-unemployment .tab-icon{background:linear-gradient(140deg,#fed7aa,#fda4af);color:#c2410c}
.tab[aria-selected="true"]{color:#fff;border-color:transparent}
#tab-salary[aria-selected="true"]{background:linear-gradient(95deg,var(--c-salary),var(--c-salary-2));box-shadow:0 14px 34px rgba(5,150,105,.38)}
#tab-mortgage[aria-selected="true"]{background:linear-gradient(95deg,var(--c-mortgage),var(--c-mortgage-2));box-shadow:0 14px 34px rgba(124,58,237,.38)}
#tab-unemployment[aria-selected="true"]{background:linear-gradient(95deg,var(--c-unemployment),var(--c-unemployment-2));box-shadow:0 14px 34px rgba(234,88,12,.38)}
.tab[aria-selected="true"] .num{color:#fff;opacity:.7}
.tab[aria-selected="true"] .tab-icon{background:rgba(255,255,255,.25);color:#fff;box-shadow:none}

/* ---------- Panel de la calculadora ---------- */
.workspace{position:relative;background:linear-gradient(165deg,#ffffff,#fbfcff 45%,#fff7fb);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;animation:rise .5s ease both}
.workspace::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad);background-size:220% 100%;opacity:.9;animation:grad-slide 10s ease-in-out infinite alternate}
.panel{display:none;grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);min-height:510px}
.panel.active{display:grid;animation:rise .45s ease both}
/* Variables de color por panel */
#salary{--pc:var(--c-salary);--pc2:var(--c-salary-2);--pc-soft:rgba(16,185,129,.13)}
#mortgage{--pc:var(--c-mortgage);--pc2:var(--c-mortgage-2);--pc-soft:rgba(139,92,246,.13)}
#unemployment{--pc:var(--c-unemployment);--pc2:var(--c-unemployment-2);--pc-soft:rgba(249,115,22,.14)}
.form-side{padding:36px;border-right:1px solid var(--line)}
.result-side{padding:36px;background:linear-gradient(170deg,var(--pc-soft,rgba(6,182,212,.12)),rgba(255,255,255,.35) 60%,var(--pc-soft,rgba(236,72,153,.10)));display:flex;flex-direction:column}
.panel-heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:28px}
.panel-heading h2{font-size:clamp(1.55rem,3vw,2.35rem);line-height:1.05;letter-spacing:-.03em;margin:0 0 8px}
.panel-heading p{color:var(--muted);margin:0;max-width:540px}
.tag{white-space:nowrap;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.68rem;letter-spacing:.09em;padding:7px 11px;border-radius:999px;background:var(--pc-soft,var(--accent-soft));border:1px solid var(--line-bright);border-color:color-mix(in srgb,var(--pc,var(--accent)) 42%,transparent);color:var(--pc,var(--accent));font-weight:600}

/* ---------- Campos ---------- */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field.full{grid-column:1/-1}
label{display:block;font-size:.94rem;font-weight:700;margin-bottom:9px}
.input-wrap{position:relative}
input,select{width:100%;height:58px;background:#ffffff;color:var(--ink);border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:0 46px 0 16px;outline:none;font-weight:600;font-size:1.06rem;transition:border-color .18s ease,box-shadow .18s ease}
select{padding-right:42px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%235b6a94' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}
select option{background:#ffffff;color:var(--ink)}
input:hover,select:hover{border-color:var(--line-bright)}
input:focus,select:focus{border-color:var(--pc,var(--accent));box-shadow:0 0 0 4px color-mix(in srgb,var(--pc,var(--accent)) 20%,transparent),0 6px 18px color-mix(in srgb,var(--pc,var(--accent)) 14%,transparent)}
.unit{position:absolute;right:15px;top:50%;transform:translateY(-50%);font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--pc,var(--accent));font-size:.82rem;font-weight:600;pointer-events:none}
.help{font-size:.85rem;color:var(--muted);margin:7px 0 0}
.range-line{display:flex;align-items:center;gap:14px}
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;padding:0;height:8px;border:none;border-radius:99px;background:linear-gradient(90deg,var(--pc,#06b6d4),var(--pc2,#ec4899));box-shadow:none;cursor:pointer}
input[type="range"]:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--pc,var(--accent)) 20%,transparent)}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--pc2,var(--accent-2));box-shadow:0 4px 14px rgba(80,90,180,.35);cursor:pointer}
input[type="range"]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--pc2,var(--accent-2));box-shadow:0 4px 14px rgba(80,90,180,.35);cursor:pointer}
input[type="range"]::-moz-range-track{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--pc,#06b6d4),var(--pc2,#ec4899))}
.range-value{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95rem;font-weight:700;color:var(--pc,var(--accent));min-width:58px;text-align:right}

/* ---------- Resultado protagonista ---------- */
.result-kicker{font-size:.8rem;font-weight:700;letter-spacing:.15em;color:var(--pc,var(--accent));margin-top:4px}
.primary{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(2.7rem,5.8vw,4.9rem);font-weight:700;letter-spacing:-.05em;line-height:1.02;margin:8px 0 10px;overflow-wrap:anywhere;background:linear-gradient(95deg,var(--pc,#0891b2),var(--pc2,#db2777));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:grad-slide 9s ease-in-out infinite alternate;filter:drop-shadow(0 3px 10px color-mix(in srgb,var(--pc,#7c3aed) 25%,transparent))}
.result-sub{color:var(--muted);font-size:1rem;margin:0 0 24px}
.metric-list{margin-top:auto;border-top:1px solid var(--line)}
.metric{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--line)}
.metric span:first-child{color:var(--muted)}
.metric strong{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95rem;text-align:right;color:var(--ink)}
.callout{margin-top:18px;padding:15px 16px;border-radius:var(--radius-sm);background:var(--pc-soft,var(--accent-soft));border:1px solid;border-color:color-mix(in srgb,var(--pc,var(--accent)) 32%,transparent);color:#37456b;font-size:.9rem}
.callout.warm{background:var(--warm-soft);border-color:rgba(244,63,94,.35);color:#881337}
.error{color:var(--danger);font-size:.85rem;font-weight:600;min-height:1.1em;margin:12px 0 0}

/* ---------- Método, avisos ---------- */
.method{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}
details{border-top:1px solid var(--line);padding:17px 2px}
summary{cursor:pointer;font-weight:700}
summary:hover{color:var(--accent-2)}
details p{color:var(--muted);font-size:.92rem;margin:10px 0 0;max-width:650px}
.disclaimer{display:flex;gap:13px;align-items:flex-start;margin-top:28px;color:var(--muted);font-size:.85rem;max-width:900px}
.disclaimer svg{flex:none;margin-top:2px;color:var(--accent-2)}

/* ---------- Guías (portada) ---------- */
.guides{margin-top:56px}
.guides h2{font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.035em;margin:0 0 6px}
.guides>p{color:var(--muted);margin:0 0 22px}
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.guide-card{display:flex;flex-direction:column;gap:9px;background:#ffffff;border:1px solid var(--line);border-top:5px solid var(--accent-2);border-radius:var(--radius-md);padding:22px;text-decoration:none;color:var(--ink);box-shadow:0 8px 24px rgba(80,90,180,.08);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;animation:rise .5s ease both}
.guide-card:nth-child(1){border-top-color:var(--c-salary)}
.guide-card:nth-child(2){border-top-color:var(--c-unemployment);animation-delay:.07s}
.guide-card:nth-child(3){border-top-color:var(--c-mortgage);animation-delay:.14s}
.guide-card:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(80,90,180,.18)}
.guide-kicker{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-2)}
.guide-card:nth-child(1) .guide-kicker{color:var(--c-salary)}
.guide-card:nth-child(2) .guide-kicker{color:var(--c-unemployment)}
.guide-card:nth-child(3) .guide-kicker{color:var(--c-mortgage)}
.guide-card strong{font-size:1.04rem;line-height:1.32}
.guide-more{margin-top:auto;color:var(--accent);font-weight:700;font-size:.9rem}
.guide-card:nth-child(1) .guide-more{color:var(--c-salary)}
.guide-card:nth-child(2) .guide-more{color:var(--c-unemployment)}
.guide-card:nth-child(3) .guide-more{color:var(--c-mortgage)}

/* ---------- Pie ---------- */
.site-footer{margin-top:60px;border-top:3px solid transparent;border-image:var(--grad) 1;padding:36px 0 14px;color:var(--muted);background:rgba(255,255,255,.65)}
.footer-inner{width:min(1160px,calc(100% - 32px));margin:0 auto}
.footer-brand{display:inline-flex;align-items:center;gap:10px}
.footer-brand img{width:32px;height:32px;filter:drop-shadow(0 4px 9px rgba(124,58,237,.30))}
.footer-inner strong{font-size:1.08rem;color:var(--ink)}
.footer-inner>p{margin:8px 0 0;max-width:640px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:6px 22px;margin:17px 0}
.site-footer nav a{color:var(--accent-2);font-weight:700;font-size:.92rem;text-decoration:none}
.site-footer nav a:hover{color:var(--accent-3);text-decoration:underline;text-underline-offset:3px}
.footer-note{font-size:.8rem}

/* ---------- Banner de cookies ---------- */
.cookie-banner{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;display:flex;gap:14px;align-items:center;justify-content:space-between;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ink);border:1px solid var(--line-bright);border-radius:16px;padding:15px 17px;box-shadow:var(--shadow);font-size:.88rem}
.cookie-banner[hidden]{display:none}
.cookie-banner p{margin:0}
.cookie-banner a{color:var(--accent-2);font-weight:600}
.cookie-banner button{background:var(--grad);color:#fff;border:0;border-radius:11px;padding:12px 24px;font-weight:700;font-size:.95rem;cursor:pointer;box-shadow:0 8px 20px rgba(124,58,237,.30);transition:transform .15s ease,box-shadow .15s ease}
.cookie-banner button:hover{transform:scale(1.05);box-shadow:0 12px 26px rgba(124,58,237,.40)}

/* ---------- Artículos, guías y páginas legales ---------- */
.article{max-width:760px;margin:0 auto;padding:42px 0 20px}
.article h1{font-size:clamp(1.95rem,4.5vw,3.05rem);letter-spacing:-.035em;line-height:1.08;margin:0 0 12px}
.article .lede{font-size:1.1rem;color:var(--muted);margin:0 0 26px}
.article h2{font-size:1.38rem;margin:36px 0 10px;letter-spacing:-.02em}
.article p{margin:0 0 14px}
.article p a,.article li a{color:var(--accent-2);font-weight:600}
.article ul{padding-left:20px;margin:0 0 16px}
.article li{margin-bottom:8px}
.article .toc{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-md);padding:19px 21px;margin:0 0 28px}
.article .toc strong{display:block;margin-bottom:8px}
.article .toc ul{margin:0}
.article .toc a{color:var(--accent-2);font-weight:600;text-decoration:none}
.article .toc a:hover{text-decoration:underline;text-underline-offset:3px}
.article .cta-box{margin:32px 0;padding:24px;border-radius:var(--radius-md);background:linear-gradient(135deg,rgba(6,182,212,.14),rgba(139,92,246,.13) 55%,rgba(236,72,153,.13));border:1px solid var(--line-bright)}
.article .cta-box p{margin:0 0 4px}
.article .cta-box a{display:inline-block;margin-top:12px;background:var(--grad);color:#fff;padding:14px 26px;border-radius:12px;font-weight:700;font-size:1rem;text-decoration:none;box-shadow:0 10px 24px rgba(124,58,237,.30);transition:transform .18s ease,box-shadow .18s ease}
.article .cta-box a:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(124,58,237,.40)}
.article table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.94rem;background:#fff}
.article th,.article td{border:1px solid var(--line);padding:11px;text-align:left}
.article th{background:var(--surface-2)}
.article .note{background:rgba(249,115,22,.10);border:1px solid rgba(249,115,22,.38);color:#7c2d12;border-radius:var(--radius-sm);padding:15px 16px;font-size:.9rem;margin:18px 0}
.back-home{display:inline-block;margin-bottom:20px;color:var(--accent-2);font-weight:700;text-decoration:none}
.back-home:hover{color:var(--accent-3)}

/* ---------- Responsive: móvil primero ---------- */
@media(max-width:820px){
  .page{width:min(100% - 20px,650px);padding-top:26px}
  .brand-inner{width:min(100% - 20px,650px)}
  .intro{grid-template-columns:1fr;gap:16px;padding-top:30px}
  .intro p{max-width:560px}
  .panel.active{grid-template-columns:1fr}
  .form-side{border-right:0;border-bottom:1px solid var(--line);padding:25px 20px}
  .result-side{padding:26px 20px;min-height:380px}
  .method{grid-template-columns:1fr}
  .workspace{border-radius:22px}
  .tag{display:none}
  .guide-grid{grid-template-columns:1fr}
  .cookie-banner{flex-direction:column;align-items:stretch;text-align:center}
}
@media(max-width:700px){
  /* Pestañas compactas en fila: la calculadora queda a la vista sin scroll */
  .tool-tabs{gap:8px}
  .tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;padding:12px 6px;border-radius:14px}
  .tab:hover{transform:none}
  .tab .num{display:none}
  .tab-icon{width:34px;height:34px;border-radius:10px}
  .tab-label{font-size:.83rem;line-height:1.2}
}
@media(max-width:520px){
  .fields{grid-template-columns:1fr;gap:16px}
  .field.full{grid-column:auto}
  .panel-heading{margin-bottom:22px}
  .intro{padding-top:26px}
  .intro h1{font-size:2.55rem}
  .primary{font-size:2.65rem}
  .metric{font-size:.9rem}
  input,select{height:56px}
  .brand-logo{width:40px;height:40px}
  .brand-name{font-size:1.18rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .intro::before,.intro h1 em,.workspace::before,.primary,.site-brand::after{animation:none}
  .workspace,.panel.active,.guide-card{animation:none}
  .tab,.guide-card,.article .cta-box a,.cookie-banner button,.brand-logo{transition:none}
  .tab:hover,.guide-card:hover,.article .cta-box a:hover,.cookie-banner button:hover,.brand:hover .brand-logo{transform:none}
}