/* Calculadora de descuento (Ley 769) — componente compartido.
 *
 * Vivía embebido en index-nuevo.php. El hero de las sedes usa la MISMA
 * calculadora, así que las reglas salen a un archivo propio en vez de
 * duplicarse: una sola fuente de verdad para campos, radios y botón.
 *
 * Las declaraciones son las del home, sin cambios: lo único que se movió es
 * el selector de las variables, de #celCalcForm a .vc-calc__form — la misma
 * clase que ya llevaba ese formulario, y que ahora también lleva el de la
 * sede (#vadCalcForm).
 *
 * Sin look de tarjeta propio (padding/sombra/fondo): el formulario siempre
 * vive dentro de otra caja (la del hero o la del diálogo del modal), y una
 * tarjeta dentro de otra se veía redundante. Aquí queda solo estructural.
 */
.vc-calc__form{
  --vc-bg:#FFFFFF; --vc-ink:#0B0B0B; --vc-ink-2:rgba(11,11,11,.74);
  --vc-border-2:rgba(11,11,11,.20);
  --vc-gold:var(--accent-color); --vc-gold-bg:#FFF9EF;
  --vc-cta-bg:var(--accent-color); --vc-cta-ink:#0B0B0B;
  --vc-radius:8px; --vc-shadow-md:0 10px 24px rgba(11,11,11,.14);
  --vc-text-sm:13px;
  color-scheme:light;
}
.vc-calc__form { display: flex; flex-direction: column; gap: 14px; }
.vc-calc__field { display: flex; flex-direction: column; gap: 6px; }
.vc-calc__field label { font-size: var(--vc-text-sm); font-weight: 700; color: var(--vc-ink); }
.vc-calc__input, .vc-calc__select {
  width: 100%; height: 48px; padding: 0 14px;
  border-radius: var(--vc-radius); border: 1px solid var(--vc-border-2);
  background: var(--vc-bg); color: var(--vc-ink);
  font: 600 15px/1 'Sora', sans-serif;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.vc-calc__fecha { display: flex; gap: 8px; }
.vc-calc__fecha .vc-calc__input { flex: 1 1 auto; min-width: 0; }
.vc-calc__skip {
  flex: 0 0 auto; padding: 0 13px;
  border: 1px dashed var(--vc-border-2); border-radius: var(--vc-radius);
  background: transparent; color: var(--vc-ink-2);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap; transition: border-color .15s, color .15s;
}
.vc-calc__skip:hover { border-color: var(--vc-gold); color: var(--vc-ink); }
.vc-calc__input:focus, .vc-calc__select:focus {
  outline: none; border-color: var(--vc-gold); box-shadow: 0 0 0 3px var(--vc-gold-bg);
}
.vc-calc__select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121113' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
  padding-right: 40px;
}
.vc-calc__submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  /* Sin el reset, el navegador le pone su borde «outset» de 2px: un marco
     negro alrededor del CTA amarillo. Nadie lo declaró, era el estilo de
     agente de usuario asomando. */
  border: 0; cursor: pointer;
  width: 100%; height: 52px; border-radius: var(--vc-radius);
  background: var(--vc-cta-bg); color: var(--vc-cta-ink);
  font-weight: 800; font-size: 15px; letter-spacing: .01em;
  box-shadow: var(--vc-shadow-md); margin-top: 4px;
  transition: transform .14s ease, box-shadow .14s ease;
}
.vc-calc__submit:active { transform: scale(.98); }
.vc-calc-radios { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vc-calc-radio { position: relative; }
.vc-calc-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.vc-calc-radio span {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  padding: 13px 10px; border: 1px solid var(--vc-border-2);
  border-radius: var(--vc-radius); font-size: var(--vc-text-sm); font-weight: 700;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.vc-calc-radio span::before {
  content: ''; width: 18px; height: 18px; flex: 0 0 auto;
  border: 2px solid var(--vc-border-2); border-radius: 50%;
  transition: border-color .15s, box-shadow .15s;
}
.vc-calc-radio input:checked + span { border-color: var(--vc-gold); background: var(--vc-gold-bg); }
.vc-calc-radio input:checked + span::before { border-color: var(--vc-gold); box-shadow: inset 0 0 0 4px var(--vc-gold); }
.vc-calc-radio input:focus-visible + span { outline: 2px solid var(--vc-ink); outline-offset: 2px; }