:root{--blue:#004aac;--dark:#09214b;--ink:#19304e;--muted:#5e718d;--line:#d9e4f2;--bg:#f4f7fc;--soft:#e9f2ff;--amber:#fff5dc}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,Segoe UI,sans-serif}
a{color:var(--blue)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #faad36;outline-offset:2px}
[hidden]{display:none!important}
.wrapper{width:min(100% - 32px,1160px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:12px;top:12px;z-index:9999;background:white;padding:8px}
.topbar{background:#061c47;padding:14px 0}
.topbar .wrapper{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.brand-logo{width:170px;height:auto;display:block}
.nav{display:flex;flex-wrap:wrap;gap:12px}
.nav a{color:#fff;text-decoration:none;font-size:.94rem}
main{padding:28px 0 64px}
.breadcrumbs{font-size:.88rem;color:var(--muted);margin-bottom:24px}
.breadcrumbs a{color:var(--muted)}
.hero{padding:24px 0 18px}
.kicker{text-transform:uppercase;letter-spacing:.1em;color:var(--blue);font-size:.78rem;font-weight:800}
h1,h2,h3{color:var(--dark);line-height:1.17}
h1{font-size:clamp(2rem,4.4vw,3.45rem);max-width:920px;margin:10px 0}
h1 span{color:var(--blue)}
.lead{max-width:810px;font-size:1.1rem;color:var(--muted)}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.pills span{border:1px solid #cadcf4;background:white;color:var(--dark);border-radius:100px;padding:6px 13px;font-size:.87rem}
.panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(16px,3vw,30px);margin:20px 0;box-shadow:0 7px 26px #1039720a}
.panel h2{font-size:clamp(1.35rem,2.6vw,1.9rem);margin:4px 0 8px}
.muted{color:var(--muted)}
.config{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0}
label{font-weight:650;color:var(--dark)}
.config label{display:flex;flex-direction:column;gap:7px;font-size:.94rem}
label small,.hint{font-weight:400;font-size:.83rem;color:var(--muted);line-height:1.4}
input{border:1px solid #bbcde4;border-radius:9px;padding:11px 10px;color:var(--ink);font:inherit;background:#fff;min-width:0;width:100%}
input:focus{border-color:#004aac}
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table{width:100%;border-collapse:collapse;text-align:left}
.entry-table{min-width:950px}
thead{background:#eef4fc}
th{padding:12px 8px;font-size:.82rem;color:var(--dark);line-height:1.25}
td{padding:9px 8px;border-top:1px solid var(--line);vertical-align:middle}
.entry-table td input{font-size:.93rem;padding:10px 7px}
.entry-table th:nth-child(1){min-width:160px}
.entry-table th:nth-child(2){min-width:75px}
.entry-table th:nth-child(3){min-width:110px}
.entry-table th:nth-child(4){min-width:96px}
.entry-table th:nth-child(5){min-width:96px}
.entry-table th:nth-child(6){min-width:110px}
.entry-table th:nth-child(7){min-width:62px}
button,.cta{cursor:pointer;border:0;border-radius:10px;padding:12px 18px;font-weight:750;font-size:.94rem;font-family:inherit;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
button.primary,.cta{background:var(--blue);color:#fff}
button.secondary{color:var(--blue);background:var(--soft)}
button.ghost{color:var(--dark);background:#edf1f7}
button.remove{padding:5px 11px;border:1px solid #f1c9ce;color:#ad2334;background:#fff1f3;font-size:1.4rem;line-height:1}
button:disabled{opacity:.48;cursor:not-allowed}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
#form-error{border-radius:10px;background:#fff0f0;border:1px solid #f1b8b8;color:#9a1623;padding:12px 14px;font-weight:650}
.notice{background:var(--amber);border:1px solid #efd89d;padding:12px 14px;border-radius:10px;font-size:.9rem;color:#594519}
.privacy{font-size:.85rem;color:var(--muted);margin:16px 0 0}
.empty{text-align:center;padding:32px 8px;color:var(--muted)}
.empty strong{font-size:1.15rem;color:var(--dark);display:block}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0}
.metric{background:#eff5ff;border-radius:13px;padding:16px}
.metric small{display:block;color:var(--muted);font-size:.8rem}
.metric strong{display:block;font-size:clamp(1.25rem,2.6vw,1.9rem);color:var(--blue);overflow-wrap:anywhere}
.results-table tbody tr:nth-child(even){background:#f7f9fd}
.summary-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding:12px 0}
.scenario{background:#f4f9f7;border:1px solid #c9e6d6;padding:18px;border-radius:14px;margin:22px 0}
.scenario strong{color:#075b38;font-size:1.6rem}
.explain{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.explain p,.explain li{color:#3d516e}
.related{display:flex;flex-direction:column;gap:6px}
.faq details{padding:15px 0;border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700;color:var(--dark)}
.faq p{margin-bottom:4px}
.cta-panel{background:linear-gradient(115deg,#072a67,#004aac);color:white}
.cta-panel h2,.cta-panel p{color:white}
.cta-panel .cta{background:#fff;color:#004aac}
.cta-panel small{color:#dbe7fb}
@media(max-width:760px){.config,.metrics,.explain{grid-template-columns:1fr 1fr}.topbar .wrapper{align-items:flex-start}}
@media(max-width:520px){.wrapper{width:calc(100% - 24px)}.config,.metrics,.explain{grid-template-columns:1fr}main{padding-top:16px}.nav{gap:10px}.entry-table{min-width:0}.entry-table thead{display:none}.entry-table tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border-top:2px solid var(--line);padding:10px 6px}.entry-table tbody td{display:flex;flex-direction:column;gap:5px;padding:4px;border:0;min-width:0}.entry-table tbody td:before{content:attr(data-label);font-size:.76rem;font-weight:700;color:var(--muted)}.entry-table tbody td:first-child{grid-column:1/-1}.entry-table tbody td.remove-cell{grid-column:1/-1}.entry-table input{min-width:0}.table-scroll{overflow:visible}.results-table{font-size:.78rem}.results-table td,.results-table th{padding:8px 5px}.panel{padding:17px}.actions button{flex:1 1 auto}}
@media print{.topbar,.nav,.breadcrumbs,.hero,.config,.entry-table,.actions,.faq,.related,.cta-panel,footer,.privacy,#form-error,.no-print{display:none!important}body{background:white;font-size:12px}.panel{border:0;box-shadow:none;padding:0;margin:8px 0}.wrapper{width:100%}#results{display:block!important}.metric{break-inside:avoid}h1{font-size:22px}main{padding:0}}
/* Adaptaciones específicas para la calculadora de respaldo */
.section-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.count{background:#ecf4ff;color:#004aac;border-radius:999px;padding:7px 13px;font-weight:800;font-size:.85rem}
.entry-table{min-width:610px}
.entry-table th:nth-child(1){min-width:165px}
.entry-table th:nth-child(2){min-width:85px}
.entry-table th:nth-child(3){min-width:140px}
.entry-table th:nth-child(4){min-width:110px}
.entry-table th:nth-child(5){min-width:75px}
.entry-table td output{display:block;text-align:right;font-variant-numeric:tabular-nums;color:#004aac;font-weight:750}
.entry-table td{vertical-align:middle}
h3{margin:28px 0 12px}
.metric.featured{background:linear-gradient(130deg,#0a387a,#004aac);color:white}
.metric.featured small,.metric.featured strong,.metric.featured span{color:white}
.metric span{display:block;font-size:.77rem;color:#596d88}
progress{width:100%;height:14px;margin-top:8px;accent-color:#004aac}
.warnings p{padding:13px 15px;margin:11px 0;border-radius:11px;border:1px solid #ebc8a1;background:#fff7e6;color:#74501a;font-weight:600}
.warnings p.ok{border-color:#cce6d6;background:#effbf3;color:#176443}
.results-table{font-variant-numeric:tabular-nums}
.results-table th,.results-table td{padding:12px 11px}
.entry-table input{font-size:.95rem}
#result-panel{scroll-margin-top:22px}
#result-panel:focus{outline:none}
.notice strong{color:#564010}
@media(max-width:520px){
 .entry-table{min-width:0}
 .entry-table tbody tr{grid-template-columns:repeat(2,minmax(0,1fr))}
 .entry-table tbody td:first-child{grid-column:1/-1}
 .entry-table tbody td:last-child{grid-column:1/-1}
 .entry-table tbody td{overflow-wrap:anywhere}
 .entry-table td output{text-align:left}
 .results-table th,.results-table td{font-size:.78rem;padding:9px 6px}
 .count{font-size:.78rem}
 .lead{font-size:1rem}
 .topbar .wrapper{gap:13px}
}
@media print{
 .hero,.breadcrumbs,#ups-form,.cta-panel,.faq,.related,.explain,.topbar,footer,.actions,.no-print{display:none!important}
 #result-panel,.metrics{break-inside:avoid}
 #result-panel{display:block!important}
 #results{display:block!important}
}