/* =========================================================
 * Recarga en Línea — Calculo S.A.
 * Look & feel alineado con www.calculo.com (paleta naranja).
 * ========================================================= */

:root {
  /* Paleta principal */
  --naranja:        #F47B20;
  --naranja-osc:    #D8631A;
  --naranja-claro:  #FFB477;
  --naranja-suave:  #FFF1E6;

  /* Neutros */
  --texto:          #1F2230;
  --texto-suave:    #5F6478;
  --linea:          #E6E8EE;
  --linea-fuerte:   #C9CDDA;
  --fondo:          #FFFFFF;
  --fondo-cmp:      #F8F9FC;

  /* Estado */
  --ok:             #1B9E5E;
  --error:          #D43A3A;

  /* Operadoras */
  --op-antel:       #1F3A93;   /* azul Antel */
  --op-tigo:        #00377B;   /* azul Tigo */
  --op-claro:       #D52B1E;   /* rojo Claro */

  /* Misc */
  --radio:          14px;
  --radio-chico:    10px;
  --sombra:         0 18px 48px -16px rgba(244, 123, 32, .25),
                    0 4px 14px -6px rgba(31, 34, 48, .08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: transparent;        /* el iframe debe verse sobre el modal del padre */
  color: var(--texto);
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

.recarga-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 14px;
  /* Atmósfera sutil naranja en background, queda lindo si el iframe muestra el body */
  background:
    radial-gradient(1100px 500px at 110% -10%, rgba(244,123,32,.10), transparent 55%),
    radial-gradient(900px 600px at -20% 110%, rgba(244,123,32,.07), transparent 60%),
    #FBFBFD;
}

/* ============================================================
 *  Card
 * ============================================================ */
.recarga-card {
  width: 100%;
  max-width: 480px;
  background: var(--fondo);
  border-radius: var(--radio);
  padding: 28px 26px 22px;
  box-shadow: var(--sombra);
  position: relative;
  overflow: hidden;
}

/* Banda decorativa superior */
.recarga-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--naranja) 0%, var(--naranja-claro) 100%);
}

.recarga-card--center {
  text-align: center;
}

.recarga-card--confirm h1 {
  font-size: 1.45rem;
}

/* ============================================================
 *  Header
 * ============================================================ */
.recarga-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.recarga-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--naranja);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.recarga-header h1 {
  font-size: 1.55rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.recarga-header__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--texto-suave);
  background: var(--fondo-cmp);
  white-space: nowrap;
  transition: all .25s ease;
}
.opBadge__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--linea-fuerte);
  transition: background .25s ease;
}

/* variantes por operadora detectada */
.recarga-header__badge--op1 { color: var(--op-antel); border-color: rgba(31,58,147,.25); background: rgba(31,58,147,.06); }
.recarga-header__badge--op1 .opBadge__dot { background: var(--op-antel); }
.recarga-header__badge--op2 { color: var(--op-tigo);  border-color: rgba(0,55,123,.25);  background: rgba(0,55,123,.06); }
.recarga-header__badge--op2 .opBadge__dot { background: var(--op-tigo); }
.recarga-header__badge--op3 { color: var(--op-claro); border-color: rgba(213,43,30,.25); background: rgba(213,43,30,.06); }
.recarga-header__badge--op3 .opBadge__dot { background: var(--op-claro); }

/* ============================================================
 *  Campos
 * ============================================================ */
.campo {
  border: 0;
  padding: 0;
  margin: 0 0 14px;
}

.campo > label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 6px;
}

.campo-help {
  display: block;
  font-size: 0.74rem;
  color: var(--texto-suave);
  margin-top: 6px;
  line-height: 1.4;
}
.campo-help strong { color: var(--texto); }

.input-wrap, .select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--fondo-cmp);
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-chico);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.input-wrap:focus-within, .select-wrap:focus-within {
  border-color: var(--naranja);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(244,123,32,.15);
}

.input-prefix {
  flex: 0 0 auto;
  padding: 0 12px;
  color: var(--texto-suave);
  font-weight: 600;
  font-size: 0.85rem;
  border-right: 1px solid var(--linea);
}

.input-wrap input,
.select-wrap select {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--texto);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.input-wrap input::placeholder { color: #B0B4C2; }

.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 36px;
}
.select-wrap::after {
  content: "";
  position: absolute;
  right: 14px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--texto-suave);
  border-bottom: 2px solid var(--texto-suave);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* check icon (validación visual) */
.check-icon {
  width: 22px; height: 22px;
  margin: 0 12px 0 0;
  flex: 0 0 22px;
  border-radius: 50%;
  background: transparent;
  position: relative;
  transition: background .2s ease;
}
.check-icon.is-ok    { background: var(--ok); }
.check-icon.is-error { background: var(--error); }
.check-icon.is-ok::after {
  content: "";
  position: absolute;
  left: 7px; top: 4px;
  width: 5px; height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.check-icon.is-error::after,
.check-icon.is-error::before {
  content: "";
  position: absolute;
  left: 10px; top: 5px;
  width: 2px; height: 12px;
  background: #fff;
  border-radius: 1px;
}
.check-icon.is-error::after  { transform: rotate(45deg); }
.check-icon.is-error::before { transform: rotate(-45deg); }

/* Promo: se anima al aparecer */
.campo--promo {
  background: linear-gradient(180deg, rgba(31,58,147,.04), rgba(31,58,147,.0) 80%);
  border: 1px dashed rgba(31,58,147,.25);
  border-radius: var(--radio-chico);
  padding: 12px 14px;
  margin-bottom: 14px;
  /* El transform de la animación slideIn crea un nuevo stacking context
     que atrapa al .promo-panel adentro. Para que el panel del dropdown
     pueda dibujarse por arriba del campo "Monto" que viene después,
     elevamos todo el .campo--promo con position+z-index propios. */
  position: relative;
  z-index: 10;
  animation: slideIn .35s ease both;
}
.campo--promo.is-active-dropdown {
  z-index: 100; /* extra cuando el dropdown está abierto */
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.campo--promo > label { color: var(--op-antel); }

/* ============================================================
 *  Dropdown custom de promociones Antel
 *  (reemplaza al <select> nativo para soportar textos largos
 *  sin desbordar el modal)
 * ============================================================ */
.promo-select {
  position: relative;
}

.promo-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  appearance: none;
  background: var(--fondo-cmp);
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-chico);
  padding: 12px 40px 12px 14px;
  font: inherit;
  font-size: 1rem;
  color: var(--texto);
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.promo-trigger:hover { border-color: var(--linea-fuerte); }
.promo-trigger:focus-visible,
.promo-select.is-open .promo-trigger {
  outline: 0;
  border-color: var(--naranja);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(244, 123, 32, .15);
}

/* Texto del trigger: una sola línea con ellipsis si llegara a ser largo */
.promo-trigger__text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.promo-trigger__chevron {
  position: absolute;
  right: 16px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--texto-suave);
  border-bottom: 2px solid var(--texto-suave);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
  pointer-events: none;
}
.promo-select.is-open .promo-trigger__chevron {
  transform: translateY(-30%) rotate(-135deg);
}

/* Panel desplegable: queda contenido al ancho del trigger */
.promo-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  box-shadow: 0 24px 48px -18px rgba(31, 34, 48, .25),
              0 6px 16px -8px rgba(31, 34, 48, .10);
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: slideIn .18s ease both;
}

.promo-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease;
}
.promo-option:hover,
.promo-option.is-active {
  background: var(--naranja-suave);
}
.promo-option[aria-selected="true"] {
  background: rgba(31, 58, 147, .07);
}
.promo-option[aria-selected="true"].is-active {
  background: rgba(31, 58, 147, .12);
}

/* Píldora del precio (alineada arriba, fija de ancho) */
.promo-option__price {
  flex: 0 0 auto;
  background: var(--op-antel);
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  min-width: 64px;
  text-align: center;
  letter-spacing: 0.01em;
  margin-top: 1px;
}

/* Variante "Sin promoción" */
.promo-option__none {
  flex: 0 0 auto;
  background: var(--fondo-cmp);
  color: var(--texto-suave);
  padding: 5px 10px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  border: 1px dashed var(--linea-fuerte);
  min-width: 64px;
  text-align: center;
  margin-top: 1px;
}

/* Cuerpo de la opción: nombre + descripción wrappeables */
.promo-option__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.promo-option__name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--texto);
  line-height: 1.3;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.promo-option__rend {
  font-size: 0.78rem;
  color: var(--texto-suave);
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Scrollbar más prolija dentro del panel */
.promo-panel::-webkit-scrollbar { width: 8px; }
.promo-panel::-webkit-scrollbar-thumb {
  background: var(--linea-fuerte);
  border-radius: 4px;
}
.promo-panel::-webkit-scrollbar-track { background: transparent; }

/* Monto bloqueado cuando hay promo */
input[name="monto"]:disabled {
  color: var(--texto-suave);
  background: #EEF0F6;
  cursor: not-allowed;
}
.input-wrap:has(input:disabled) {
  background: #EEF0F6;
  border-color: var(--linea);
  box-shadow: none;
}

/* ============================================================
 *  Resumen en vivo
 * ============================================================ */
.recarga-summary {
  margin: 4px 0 16px;
  padding: 12px 14px;
  border-radius: var(--radio-chico);
  background: var(--naranja-suave);
  border: 1px solid rgba(244,123,32,.25);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--texto);
  animation: slideIn .35s ease both;
}
.recarga-summary__sep { color: var(--linea-fuerte); }
.recarga-summary__monto { color: var(--naranja-osc); font-size: 1.05rem; }

/* ============================================================
 *  Error general
 * ============================================================ */
.form-error,
.recarga-alert {
  border-radius: var(--radio-chico);
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 12px;
}
.recarga-alert--error,
.form-error {
  background: rgba(212,58,58,.08);
  border: 1px solid rgba(212,58,58,.25);
  color: var(--error);
}

/* ============================================================
 *  Botones
 * ============================================================ */
.recarga-actions, .confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
}

.btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 12px 22px;
  border-radius: var(--radio-chico);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--naranja);
  color: #fff;
  box-shadow: 0 8px 22px -10px rgba(244,123,32,.7);
}
.btn--primary:hover:not(:disabled) {
  background: var(--naranja-osc);
  box-shadow: 0 12px 26px -10px rgba(216,99,26,.65);
}
.btn--primary:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

.btn--ghost {
  background: transparent;
  color: var(--texto);
  border: 1.5px solid var(--linea-fuerte);
}
.btn--ghost:hover {
  background: var(--fondo-cmp);
  border-color: var(--texto-suave);
}

/* ============================================================
 *  Confirmación
 * ============================================================ */
.confirm-question {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--texto);
  margin: 4px 0 18px;
}
.confirm-question strong { color: var(--naranja-osc); }
.confirm-num { font-variant-numeric: tabular-nums; }
.confirm-monto { font-size: 1.15rem; }

.confirm-promo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding: 10px 14px;
  border-radius: var(--radio-chico);
  background: rgba(31,58,147,.06);
  border: 1px solid rgba(31,58,147,.20);
  margin-bottom: 18px;
  font-size: 0.88rem;
}
.confirm-promo__tag {
  background: var(--op-antel);
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.confirm-promo__nombre { font-weight: 600; color: var(--op-antel); }
.confirm-promo__rend   { color: var(--texto-suave); }

/* Loader spinner mientras se hace el redirect a procesar_recarga */
.loader {
  display: inline-flex;
  gap: 6px;
  margin: 18px auto 14px;
}
.loader span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--naranja);
  animation: bounce 1s infinite ease-in-out;
}
.loader span:nth-child(2) { animation-delay: .15s; background: var(--naranja-claro); }
.loader span:nth-child(3) { animation-delay: .30s; background: var(--naranja-osc); }
@keyframes bounce {
  0%, 80%, 100% { transform: scale(.4); opacity: .5; }
  40%           { transform: scale(1);  opacity: 1;  }
}
.muted { color: var(--texto-suave); font-size: 0.85rem; }

/* ============================================================
 *  Footer card
 * ============================================================ */
.recarga-foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--linea);
  text-align: center;
  font-size: 0.74rem;
  color: var(--texto-suave);
  letter-spacing: 0.01em;
}

/* ============================================================
 *  Honeypot
 * ============================================================ */
.hp-field {
  position: absolute;
  left: -10000px;
  top: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================
 *  Responsive
 * ============================================================ */
@media (max-width: 480px) {
  .recarga-card { padding: 22px 18px 18px; border-radius: 14px; }
  .recarga-header { flex-direction: column; align-items: flex-start; }
  .recarga-header__badge { align-self: flex-start; }
  .recarga-actions, .confirm-actions { flex-direction: column-reverse; }
  .btn { width: 100%; }
}