/* ===========================
   CALCULADORA
   =========================== */
.calculadora {
  width: min(900px, 100%);
  margin: 16px auto 6px;
  padding: 16px;
  border-radius: var(--RAD);
  background: var(--FONDO_CARDS);
  border: 1px solid var(--BORDE);
  box-shadow: var(--SOMBRA);
  text-align: center;
}

.conten-horario {
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 8px;
}

.horario {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(420px, 100%);
  margin: 4px auto;
  padding: 10px 12px;
  border-radius: var(--RAD-SM);
  border: 1px solid var(--BORDE);
  background: #0f141c;
  color: var(--TEXTO_PRINCIPAL);
  cursor: pointer;
  transition: border-color var(--TRANS), transform var(--TRANS);
}
.horario:hover { transform: translateY(-1px); border-color: var(--PRIMARIO) }

/* Radios minimal */
.calculadora input[type="radio"] {
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 999px;
  border: 2px solid #3a4657;
  background: transparent;
  display: grid; place-items: center;
  transition: border-color var(--TRANS), background var(--TRANS);
}
.calculadora input[type="radio"]:checked {
  border-color: var(--PRIMARIO);
  background: radial-gradient(8px 8px at 50% 50%, var(--PRIMARIO) 0 50%, transparent 51%);
}

/* Inputs */
.calculadora input[type="tel"],
.calculadora input[type="text"],
.calculadora input[type="time"] {
  width: min(420px, 100%);
  padding: 12px 14px;
  text-align: center;
  border-radius: var(--RAD-SM);
  border: 1px solid var(--BORDE);
  background: #0f141c;
  color: var(--TEXTO_PRINCIPAL);
  font-size: 1rem;
  outline: none;
  transition: border-color var(--TRANS), box-shadow var(--TRANS);
}
.calculadora input::placeholder { color: #6b7280 }
.calculadora input:focus {
  border-color: var(--PRIMARIO);
  box-shadow: 0 0 0 4px var(--PRIMARIO-ALFA);
}

/* Botón calcular (si lo usás) */
#calcular-personalizado {
  padding: 12px 18px;
  border: 1px solid var(--BORDE);
  border-radius: var(--RAD-SM);
  background: linear-gradient(180deg, #0f141c 0%, var(--FONDO_CARDS) 100%);
  color: var(--TEXTO_PRINCIPAL);
  cursor: pointer;
  transition: transform var(--TRANS), border-color var(--TRANS);
}
#calcular-personalizado:hover {
  transform: translateY(-1px);
  border-color: var(--PRIMARIO);
}

/* Mensajes */
.mensaje-error,
.mensaje-error2 {
  display: none;
  color: var(--ERROR);
  font-size: .92rem;
  margin-top: 6px;
}

/* Responsive */
@media (max-width: 768px) {
  .calculadora { padding: 14px }
}