/* La calculadora de batería. Hereda la paleta de site.css (tema de lectura). */

#calculadora fieldset { border: 1px solid var(--borde); border-radius: 6px; padding: 16px 18px 18px; margin: 22px 0; }
#calculadora legend { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--verde-vivo); padding: 0 6px; }
#calculadora label { display: block; font-size: 14.5px; color: var(--suave); }
#calculadora input, #calculadora select {
  font-family: var(--mono); font-size: 14px; color: var(--texto); background: var(--fondo-2, rgba(255,255,255,.03));
  border: 1px solid var(--borde); border-radius: 4px; padding: 7px 9px; width: 100%; margin-top: 5px;
}
#calculadora input:focus, #calculadora select:focus { outline: 0; border-color: var(--azul); }
#calculadora input:disabled { opacity: .35; }
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 18px; }
.ayuda { font-size: 13.5px; color: var(--tenue); margin-top: 10px; max-width: 70ch; }

/* tabla de consumos: en el teléfono se desliza dentro de su caja */
.tabla-consumos { overflow-x: auto; }
#consumos { border-collapse: collapse; min-width: 640px; width: 100%; }
#consumos th { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--suave); text-align: left; font-weight: 400; padding: 0 6px 6px; }
#consumos td { padding: 4px 6px; vertical-align: middle; }
#consumos td input, #consumos td select { margin-top: 0; }
#consumos label.continuo { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--mono); font-size: 12.5px; }
#consumos label.continuo input { width: auto; }
#consumos button.quitar { background: none; border: 1px solid var(--borde); color: var(--suave); border-radius: 4px; width: 30px; height: 32px; cursor: pointer; }
#consumos button.quitar:hover { color: var(--rojo); border-color: var(--rojo); }

/* resultados */
.resultado { border: 1px solid var(--azul); border-radius: 6px; padding: 18px 20px; margin: 26px 0; }
.cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.cifra .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: var(--suave); }
.cifra .v { font-family: var(--mono); font-size: 26px; color: var(--texto); margin-top: 4px; }
.cifra.grande .v { font-size: 40px; color: var(--azul); }
.veredicto { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; margin-top: 14px; }
.veredicto.si { color: var(--verde-vivo); }
.veredicto.no { color: var(--rojo); }
#res-notas { margin: 10px 0 0 18px; font-size: 15px; }
#res-barra { width: 100%; height: 28px; display: block; margin: 18px 0 8px; border-radius: 4px; background: rgba(255,255,255,.04); }
.seg.radio, .marca-color.radio { fill: var(--azul); background: var(--azul); }
.seg.c0, .marca-color.c0 { fill: var(--verde-vivo); background: var(--verde-vivo); }
.seg.c1, .marca-color.c1 { fill: var(--verde); background: var(--verde); }
.seg.c2, .marca-color.c2 { fill: var(--ambar); background: var(--ambar); }
.seg.c3, .marca-color.c3 { fill: var(--suave); background: var(--suave); }
.marca-color { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; }
#res-partes { border-collapse: collapse; font-family: var(--mono); font-size: 13px; margin-top: 6px; }
#res-partes td { padding: 4px 18px 4px 0; }
#res-partes td + td { text-align: right; }
.acciones { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }

/* .campos es grid: sin esto, el atributo hidden no esconde los grupos del radio */
#calculadora [hidden] { display: none !important; }
.cifra.grande .v { font-size: 34px; white-space: nowrap; }