/* ==========================================================================
   payments-skin.css
   ------------------------------------------------------------------------
   Skin de sobreescritura (dark) para el flujo de pago (suscripcion.html,
   search_and_make_payment.html, suscription_mobile.html), que sigue
   extendiendo templates/main/index_generator.html (Bootstrap 5 +
   Font Awesome + styles.css) sin cambios de estructura.

   Se carga DESPUES de Bootstrap y de styles.css: solo repinta clases ya
   existentes (colores, bordes, tipografia). NUNCA toca display, visibility
   ni estructura de ningun elemento con id usado por el JS de Stripe /
   codigos promocionales (checkout-form, btn-pay, codigo-promo,
   codigo-promo-id, codigo-promo-feedback, precio-final-container,
   precio-original, precio-final, descuento-badge, btn-aplicar-codigo).

   Tokens re-declarados desde static/assets/css/ar-design.css (:root) para
   no depender de una doble carga del design system.
   ========================================================================== */

:root {
  --bg: #0a0f0d;
  --surface: #101613;
  --surface-2: #161f1a;
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .14);
  --text: #f2f5f3;
  --text-dim: rgba(242, 245, 243, .6);
  --text-faint: rgba(242, 245, 243, .4);
  --lime: #c9d628;
  --green: #1e7e5c;
  --green-deep: #155740;
  --gold: #d4af37;
  --radius: 16px;
}

/* ===== BASE ===== */
body {
  background-color: var(--bg);
  color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}

/* Secciones con fondo claro del skin antiguo -> oscuras */
.bg-gc-dark,
.payment-section,
.mobile-sub-bg,
section.bg-light,
.faq-section {
  background-color: var(--bg) !important;
  background-image: none;
}

.bg-white,
.filosofia-card {
  background-color: var(--surface) !important;
  border: 1px solid var(--border);
}

/* Cajas destacadas (precio final, inputs "bg-light" sueltos) */
.bg-light {
  background-color: var(--surface-2) !important;
}

hr,
.hr-subtle {
  border-color: var(--border);
  opacity: 1;
}

.border-top,
.border-bottom,
.border-secondary {
  border-color: var(--border-strong) !important;
}

@media (min-width: 768px) {
  .border-end-md {
    border-right: 1px solid var(--border-strong) !important;
  }
}

/* ===== TEXTOS (legibilidad sobre fondo oscuro) ===== */
.text-gc-dark {
  color: var(--text) !important;
}

.text-muted,
.text-secondary {
  color: var(--text-dim) !important;
}

.text-white-50 {
  color: var(--text-dim) !important;
}

/* ===== CARDS ===== */
.card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.card:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, .45);
}

.pricing-card.featured,
.tarifa-card.featured {
  background: linear-gradient(160deg, var(--green-deep) 0%, var(--bg) 70%, #060907 100%);
}

/* ===== BOTONES ===== */
.btn-lime {
  background-color: var(--lime);
  color: var(--bg);
  border-radius: 10px;
}

.btn-lime:hover {
  background-color: var(--lime);
  filter: brightness(1.08);
  color: var(--bg);
}

.btn-outline-success {
  border-color: var(--border-strong);
  color: var(--text);
  background-color: transparent;
}

.btn-outline-success:hover {
  background-color: var(--lime);
  border-color: var(--lime);
  color: var(--bg);
}

/* ===== FORMULARIOS ===== */
.form-control {
  background-color: rgba(255, 255, 255, .04);
  border: 1px solid var(--border-strong);
  color: var(--text);
}

.form-control::placeholder {
  color: var(--text-faint);
}

.form-control:focus {
  background-color: rgba(255, 255, 255, .06);
  border-color: var(--lime);
  color: var(--text);
  box-shadow: 0 0 0 .2rem rgba(201, 214, 40, .15);
}

.form-label {
  color: var(--text);
}

.field-missing {
  background-color: rgba(212, 175, 55, .1);
}

/* ===== BADGES / ALERTAS ===== */
.alert-danger {
  background-color: rgba(220, 53, 69, .15);
  border-color: rgba(220, 53, 69, .35);
  color: #ff9fac;
}

.alert-warning {
  background-color: rgba(255, 193, 7, .12);
  border-color: rgba(255, 193, 7, .35);
  color: #ffd873;
}

/* ===== NAVBAR / FOOTER ===== */
.navbar {
  background-color: rgba(10, 15, 13, .82);
  backdrop-filter: blur(12px);
}

footer {
  background-color: var(--surface);
}

/* ===== ACCORDION (FAQ) ===== */
.accordion-item.bg-transparent:hover {
  background-color: rgba(255, 255, 255, .03);
}

.accordion-body.text-white-50 {
  color: var(--text-dim) !important;
}

/* Fix: la etiqueta de la tarifa (position-absolute top-0 translate-middle)
   sobresale del borde superior y styles.css:462 la recortaba con
   overflow:hidden. Se libera el overflow; el glow ::before que ese hidden
   contenía se retira (coherente con la purga de glows del design system). */
.pricing-card,
.tarifa-card {
  overflow: visible;
}

.pricing-card.featured::before {
  content: none;
}