/* Las calculadoras. Se apoyan en guias.css (mismo sitio, misma hoja) y esto es solo
   lo que ahi no hacia falta: los campos y el panel de resultado. */

.calc {
  border: 1px solid rgba(167, 139, 250, 0.45);
  border-radius: 18px;
  padding: 20px;
  margin: 26px 0 8px;
  background: linear-gradient(180deg, rgba(18,16,43,0.92), rgba(10,8,32,0.86));
}

.calc__campos {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.campoc label {
  display: block;
  color: var(--claro);
  font-family: "Orbitron", sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.campoc__fila { display: flex; align-items: center; gap: 8px; }

.campoc input,
.campoc select {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--linea);
  background: #0a0820;
  color: var(--claro);
  font-family: "Rajdhani", sans-serif;
  font-size: 1.05rem;
}

.campoc input:focus-visible,
.campoc select:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }
.campoc__u { color: var(--tenue); font-size: 0.9rem; flex: 0 0 auto; }

/* El resultado no aparece de la nada: es una zona que existe desde el principio, con su aviso
   de que faltan datos. Asi no salta el contenido al escribir el primer numero. */
.calc__salida { margin-top: 18px; border-top: 1px solid var(--linea); padding-top: 16px; }
.calc__vacio { color: var(--tenue); margin: 0; }
.calc__mal { color: var(--ambar); margin: 0; }

.calc__cifras { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.dato {
  flex: 1 1 8rem;
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(0, 229, 208, 0.06);
}
.dato dt {
  font-family: "Orbitron", sans-serif; font-size: 0.58rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cian); margin: 0 0 4px;
}
.dato dd {
  margin: 0; color: var(--claro); font-size: 1.5rem; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.dato dd small { color: var(--tenue); font-size: 0.8rem; }
.dato--suave dd { font-size: 1.15rem; }

.calc__tabla { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 0.95rem; }
.calc__tabla th, .calc__tabla td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linea);
  font-variant-numeric: tabular-nums;
}
.calc__tabla th { color: var(--cian); font-size: 0.8rem; font-weight: 500; }
.calc__tabla td:first-child { color: var(--claro); }

.calc__nota { color: var(--tenue); font-size: 0.82rem; margin: 16px 0 0; }