/* Calculadora de costo de electricidad (y piezas compartidas con autoalojar-vs-suscripcion: kpis, tablas, avisos). El kit base está en calc.css. */
.cc .calc-in .fld input[type=number],.cc .calc-in .fld input[type=text]{width:100%;font:600 1.05rem/1.2 var(--body);color:var(--paper);background:rgba(246,244,236,.08);border:1.5px solid rgba(246,244,236,.22);border-radius:12px;padding:.8em .9em;min-height:44px}
.cc .calc-in .fld input:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.cc .calc-in .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cc .calc-in .sec{font:700 .78rem/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--lime);margin:4px 0 -8px;padding-top:14px;border-top:1px solid rgba(246,244,236,.2)}
.cc .calc-in .hint{font-size:.85rem;line-height:1.45;color:var(--mute-on-ink);margin:0}
.cc .calc-in .hint b{color:var(--paper)}
.pres{display:flex;flex-wrap:wrap;gap:8px}
.pres button{font:600 .85rem/1.2 var(--body);min-height:44px;padding:.5em .9em;border-radius:999px;border:1.5px solid rgba(246,244,236,.28);background:transparent;color:var(--paper);cursor:pointer;transition:background .2s,color .2s}
.pres button:hover{border-color:var(--lime)}
.pres button:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.pres button:active{background:var(--lime);color:var(--ink)}

/* resultados */
.cc .sum{background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.42)),var(--paper-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 22px 44px -28px rgba(14,15,10,.45);gap:14px}
.cc .sum-t{margin:0;font-weight:600;font-size:1.05rem;line-height:1.45}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kpi{display:grid;gap:4px;padding:14px;border:2px solid var(--ink);border-radius:16px;background:var(--paper);min-width:0}
.kpi-t{font:700 .72rem/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.kpi b{font:800 clamp(1.35rem,5.6vw,1.9rem)/1.05 var(--display);letter-spacing:-.02em;overflow-wrap:anywhere}
.kpi-s{font-size:.8rem;line-height:1.3;color:var(--mute)}
.cc .rw-t{margin:0;font-size:.92rem;line-height:1.5;color:var(--mute)}
.cc .rw-t b{color:var(--ink)}
.cc .rw-w{margin:0;font-size:.85rem;line-height:1.45;color:var(--mute);border-left:4px solid #FFD37A;padding-left:10px}
.cc .rw-w a{font-weight:700}
.cc-err{border-style:dashed;border-color:#8A1D12}
.cc-err ul{margin:0;padding-left:1.1em;font-size:.9rem}
.aporta{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.aporta li{display:grid;gap:2px;padding-top:8px;border-top:1px solid rgba(14,15,10,.2)}
.aporta li:first-child{border-top:0;padding-top:0}
.aporta span{font:600 .85rem/1.4 var(--mono);color:var(--mute);overflow-wrap:anywhere}

/* tablas de referencia (legibles sin JS) */
.ctbl{margin-top:clamp(20px,3vw,32px);overflow-x:auto;border:2px solid var(--ink);border-radius:18px;background:var(--paper)}
.ctbl:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.ctbl table{width:100%;min-width:560px;border-collapse:collapse;font-size:.95rem}
.ctbl th,.ctbl td{text-align:left;padding:12px 14px;vertical-align:top}
.ctbl thead th{font:700 .74rem/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;background:var(--ink);color:var(--lime);white-space:nowrap}
.ctbl tbody th{font:800 1rem/1.25 var(--display)}
.ctbl tbody tr+tr th,.ctbl tbody tr+tr td{border-top:2px solid var(--ink)}
.ctbl small{color:var(--mute);font-size:.8rem}
.ctbl caption{caption-side:bottom;text-align:left;padding:10px 14px;font-size:.82rem;color:var(--mute)}
.formula{display:inline-block;font:700 clamp(.95rem,3.8vw,1.25rem)/1.4 var(--mono);padding:.7em 1em;border:2px solid var(--ink);border-radius:14px;background:var(--lime);max-width:100%;overflow-wrap:anywhere}
.srcs{margin:1em 0 0;padding-left:1.2em}
.srcs li{margin:.5em 0;overflow-wrap:anywhere}
.rel{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.rel a{display:inline-flex;align-items:center;min-height:44px;padding:.5em 1em;border:2px solid var(--ink);border-radius:999px;font-weight:700;text-decoration:none;background:var(--paper)}
.rel a:hover{background:var(--ink);color:var(--lime)}
@media (max-width:480px){.cc .calc-in .two{grid-template-columns:1fr}.kpis{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.pres button{transition:none}}
.cc [hidden]{display:none!important}

/* tarjetas del índice /calculadoras: línea «cuál usar» */
.ct-use{font-size:.92rem;line-height:1.4;color:var(--ink);border-top:2px solid var(--ink);padding-top:10px;margin-top:4px}
.ct-use i{font:700 .74rem/1 var(--mono);font-style:normal;letter-spacing:.05em;text-transform:uppercase;margin-right:.4em}