/* wallet-recarga.css — modal COMPARTIDO de recarga de wallet.
   Lo abre el carrito de compras (y podría abrirlo el perfil): se carga en
   _head.ejs porque el drawer vive en la navbar de todas las páginas.

   Clases con prefijo .wr- a propósito: NO chocan con el modal de recarga que el
   perfil construye con sus propias clases, así que si algún día se unifican,
   este estilo ya está listo y hoy no interfiere con nada.
   Usa solo tokens de tokens.css. */

.wr-overlay {
  position: fixed; inset: 0; z-index: 100000;
  display: none; align-items: center; justify-content: center;
  /* Edge-to-edge: 16px de aire + insets seguros del teléfono. El botón
   * «Pagar y recargar» quedaba pegado a la barra de gestos en Android/iPhone. */
  padding: calc(16px + var(--sat, env(safe-area-inset-top, 0px)))
           calc(16px + env(safe-area-inset-right, 0px))
           calc(16px + env(safe-area-inset-bottom, 0px))
           calc(16px + env(safe-area-inset-left, 0px));
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.wr-overlay.open { display: flex; }

.wr-modal {
  width: 100%; max-width: 420px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px - var(--sat, env(safe-area-inset-top, 0px)) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.wr-head { margin-bottom: 14px; }
.wr-head h3 { font-size: 17px; font-weight: 700; margin: 0 0 4px; color: var(--text); }
.wr-contexto { font-size: 12px; line-height: 1.55; color: var(--text-muted); margin: 0; }

/* ── Atajos de monto: "lo que me falta" / "el total de mi compra" ── */
.wr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.wr-chip {
  flex: 1 1 auto;
  padding: 8px 12px;
  font-size: 12px; font-weight: 500; font-family: inherit;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.wr-chip:hover { color: var(--text); border-color: var(--border-light); }
.wr-chip.active {
  color: var(--purple-light);
  border-color: var(--purple);
  background: var(--purple-10);
}

.wr-modal .form-group { margin-bottom: 14px; }
.wr-modal .form-group label {
  display: block; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-muted); margin-bottom: 6px;
}
.wr-modal .form-group input,
.wr-modal .form-group select {
  width: 100%; padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text); font-size: 14px; font-family: inherit;
}
.wr-modal .form-group input:focus,
.wr-modal .form-group select:focus {
  outline: none; border-color: var(--purple);
}

/* ── Desglose: recibes / comisión / total a pagar ── */
.wr-fee {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.wr-fee-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text-muted);
  padding: 3px 0;
}
.wr-fee-row b { color: var(--text); font-weight: 600; }
.wr-fee-row.total {
  margin-top: 6px; padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--text);
}
.wr-fee-row.total b { font-size: 15px; color: var(--purple-light); }
.wr-sim { margin-top: 10px; width: 100%; }
.wr-sim-warn { font-size: 10px; color: var(--yellow); margin: -4px 0 10px; }

.wr-result {
  display: none;
  font-size: 12px; line-height: 1.5;
  padding: 10px 12px; border-radius: 10px;
  margin-bottom: 12px;
}
.wr-result.success { display: block; background: var(--emerald-10); color: var(--emerald); border: 1px solid rgba(52, 211, 153, 0.3); }
.wr-result.error { display: block; background: var(--red-10); color: var(--red); border: 1px solid rgba(248, 113, 113, 0.3); }

.wr-actions { display: flex; gap: 10px; justify-content: flex-end; }

@media (max-width: 520px) {
  /* Hoja inferior: sin aire lateral, pero con el inset inferior para que la
   * barra de gestos no tape los botones. */
  .wr-overlay { align-items: flex-end; padding: 0 0 env(safe-area-inset-bottom, 0px); }
  .wr-modal { max-width: none; border-radius: 16px 16px 0 0; max-height: 92vh; max-height: 92dvh; }
  .wr-actions .btn { flex: 1; }
}