/* =====================================================================
 * membresia.css
 * Estilos del banner de estado de membresía y páginas auxiliares.
 * Sin estilos en línea — todo aquí.
 * ===================================================================== */

/* Wrapper del banner — espeja el margin-left + width del sidebar de AdminLTE
   para que no quede por debajo del menú lateral ni se desborde por la derecha
   cuando el sidebar está abierto. Mismo patrón que #banner-perfil en estilo.css. */
#mem-banner-wrap {
   margin-left: 250px;
   width: calc(100% - 250px);
   transition: margin-left .3s ease-in-out, width .3s ease-in-out;
}
.sidebar-collapse #mem-banner-wrap {
   margin-left: 0;
   width: 100%;
}
@media (max-width: 991.98px) {
   #mem-banner-wrap {
      margin-left: 0 !important;
      width: 100% !important;
   }
}

.mem-banner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 8px 14px;
   margin: 0 0 12px;
   border-radius: 6px;
   font-size: 0.9rem;
   line-height: 1.3;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
   position: relative;
}

.mem-banner__left {
   display: flex;
   align-items: center;
   gap: 10px;
   min-width: 0;
   flex: 1;
}

.mem-banner__icon {
   font-size: 1.1rem;
   flex-shrink: 0;
}

.mem-banner__text {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.mem-banner__text strong {
   font-weight: 600;
}

.mem-banner__btn {
   flex-shrink: 0;
   white-space: nowrap;
}

/* Botón X de cierre del banner (estado pagado) */
.mem-banner__close {
   flex-shrink: 0;
   background: transparent;
   border: none;
   color: inherit;
   font-size: 1rem;
   line-height: 1;
   padding: 4px 8px;
   cursor: pointer;
   opacity: 0.6;
   border-radius: 4px;
   transition: opacity .15s ease, background .15s ease;
}
.mem-banner__close:hover,
.mem-banner__close:focus {
   opacity: 1;
   background: rgba(0, 0, 0, 0.08);
   outline: none;
}

/* Estado: PENDIENTE / NO PAGADA */
.mem-banner--pendiente {
   background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
   color: #664d03;
   border: 1px solid #ffda6a;
}

.mem-banner--pendiente .mem-banner__icon {
   color: #b35900;
}

/* Estado: PAGADA */
.mem-banner--pagada {
   background: linear-gradient(135deg, #d1e7dd 0%, #a3cfbb 100%);
   color: #0a3622;
   border: 1px solid #75b798;
}

.mem-banner--pagada .mem-banner__icon {
   color: #146c43;
}

/* Estado: CARGANDO (skeleton) */
.mem-banner--cargando {
   background: #f8f9fa;
   color: #6c757d;
   border: 1px solid #dee2e6;
}

.mem-banner--cargando .mem-banner__text {
   opacity: 0.6;
}

/* Estado: OCULTO */
.mem-banner--oculto {
   display: none;
}

/* Detalle pequeño debajo del texto principal */
.mem-banner__sub {
   font-size: 0.78rem;
   opacity: 0.75;
   font-weight: 400;
}

/* Banners con texto largo (renovación / cobro diferido): varias líneas, nunca truncar. */
.mem-banner--wrap .mem-banner__text {
   white-space: normal;
   overflow: visible;
   text-overflow: clip;
}

/* Responsive: stack en móvil */
@media (max-width: 575.98px) {
   .mem-banner {
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      padding: 10px 12px;
      padding-right: 36px; /* espacio para la X absoluta */
   }
   .mem-banner__left {
      justify-content: flex-start;
   }
   .mem-banner__btn {
      width: 100%;
   }
   /* X de cierre: esquina superior derecha en móvil */
   .mem-banner__close {
      position: absolute;
      top: 6px;
      right: 6px;
      padding: 2px 6px;
   }
}

/* =====================================================================
 * Páginas de éxito / cancelación
 * ===================================================================== */

.mem-result {
   max-width: 520px;
   margin: 60px auto;
   padding: 30px 24px;
   text-align: center;
   background: #ffffff;
   border-radius: 10px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.mem-result__icon {
   font-size: 4rem;
   margin-bottom: 12px;
}

.mem-result--exito .mem-result__icon {
   color: #198754;
}

.mem-result--cancelado .mem-result__icon {
   color: #dc3545;
}

.mem-result__titulo {
   margin: 0 0 8px;
   font-size: 1.6rem;
   font-weight: 600;
   color: #212529;
}

.mem-result__mensaje {
   color: #6c757d;
   font-size: 1rem;
   margin: 0 0 24px;
   line-height: 1.5;
}

.mem-result__acciones {
   display: flex;
   gap: 10px;
   justify-content: center;
   flex-wrap: wrap;
}

.mem-result__acciones--hidden {
   display: none;
}

/* Iconos de estado dentro del countdown */
.mem-result__countdown .mem-icon-ok      { color: #198754; }
.mem-result__countdown .mem-icon-info    { color: #0d6efd; }

.mem-result__id {
   margin-top: 16px;
   font-size: 0.75rem;
   color: #adb5bd;
   word-break: break-all;
}

/* Auto-redirect countdown en mem_exito.html */
.mem-result__countdown {
   margin-top: 14px;
   font-size: 0.85rem;
   color: #6c757d;
}
.mem-result__countdown strong {
   color: #198754;
   font-weight: 700;
}

/* =====================================================================
 * Landing de pago de membresía (pay_landing.html)
 * Estilo AdminLTE claro + acentos dorados Top Producer.
 * Sin estilos en línea.
 * ===================================================================== */

/* Oculta secciones de la landing sin borrar el markup.
   Para restaurar una sección: quitar la clase landing-hidden del <section>. */
.landing-hidden {
   display: none !important;
}

.landing-body {
   margin: 0;
   font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
   background: #f4f6f9;
   color: #212529;
   line-height: 1.55;
   -webkit-font-smoothing: antialiased;
   /* Sticky footer: body ocupa toda la viewport y el footer recibe
      margin-top: auto para empujarse al fondo aunque el contenido sea corto. */
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}

/* ---------- Topbar ---------- */
.landing-topbar {
   background: #ffffff;
   border-bottom: 1px solid #e9ecef;
   padding: 14px 0;
   position: sticky;
   top: 0;
   z-index: 100;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.landing-topbar__brand {
   display: flex;
   align-items: center;
   gap: 10px;
   font-weight: 700;
   color: #0d0d0d;
   font-size: 1rem;
   letter-spacing: 0.3px;
}

.landing-topbar__brand img {
   height: 36px;
   width: auto;
}

.landing-topbar__logout {
   color: #6c757d;
   font-size: 0.88rem;
   text-decoration: none;
   font-weight: 500;
}

.landing-topbar__logout:hover {
   color: #0d0d0d;
}

/* ---------- Hero ---------- */
.landing-hero {
   padding: 64px 0 56px;
   background: linear-gradient(180deg, #ffffff 0%, #f4f6f9 100%);
   border-bottom: 1px solid #e9ecef;
}

.landing-badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: rgba(201, 160, 64, 0.12);
   color: #8a6a17;
   font-size: 0.78rem;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   padding: 6px 12px;
   border-radius: 50px;
   margin-bottom: 18px;
}

.landing-hero__title {
   font-size: 2.4rem;
   font-weight: 800;
   color: #0d0d0d;
   margin: 0 0 18px;
   line-height: 1.15;
   letter-spacing: -0.5px;
}

.landing-hero__accent {
   color: #C9A040;
   position: relative;
   white-space: nowrap;
}

.landing-hero__sub {
   font-size: 1.1rem;
   color: #495057;
   margin: 0 0 28px;
   max-width: 540px;
}

.landing-hero__sub strong {
   color: #0d0d0d;
   font-weight: 700;
}

.landing-hero__ctas {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-bottom: 26px;
}

.landing-btn-primary {
   background: #0d0d0d;
   color: #ffffff;
   border: none;
   font-weight: 700;
   letter-spacing: 0.5px;
   padding: 14px 28px;
   border-radius: 6px;
   transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
   box-shadow: 0 4px 14px rgba(13, 13, 13, 0.18);
}

.landing-btn-primary:hover,
.landing-btn-primary:focus {
   background: #1a1a1a;
   color: #C9A040;
   transform: translateY(-1px);
   box-shadow: 0 6px 18px rgba(13, 13, 13, 0.25);
}

.landing-btn-primary:active {
   transform: translateY(0);
}

.landing-btn-secondary {
   font-weight: 600;
   padding: 14px 24px;
   border-radius: 6px;
   border-color: #ced4da;
   color: #495057;
}

.landing-btn-secondary:hover {
   background: #ffffff;
   border-color: #0d0d0d;
   color: #0d0d0d;
}

.landing-hero__trust {
   display: flex;
   gap: 22px;
   flex-wrap: wrap;
   color: #6c757d;
   font-size: 0.85rem;
}

.landing-hero__trust span {
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

.landing-hero__trust i {
   color: #198754;
}

/* ---------- Hero card (precio) ---------- */
.landing-hero__visual {
   margin-top: 36px;
}

.landing-hero__card {
   background: #ffffff;
   border-radius: 12px;
   padding: 32px 28px;
   text-align: center;
   box-shadow: 0 8px 24px rgba(13, 13, 13, 0.08);
   border: 1px solid #e9ecef;
   border-top: 4px solid #C9A040;
   position: relative;
}

.landing-hero__crown {
   color: #C9A040;
   font-size: 1.8rem;
   margin-bottom: 8px;
}

.landing-hero__card h3 {
   font-size: 1.05rem;
   color: #6c757d;
   font-weight: 600;
   margin: 0 0 18px;
   text-transform: uppercase;
   letter-spacing: 1px;
}

.landing-hero__price {
   display: flex;
   align-items: flex-start;
   justify-content: center;
   gap: 4px;
   margin-bottom: 6px;
}

.landing-hero__currency {
   font-size: 1.1rem;
   color: #495057;
   font-weight: 600;
   margin-top: 10px;
}

.landing-hero__amount {
   font-size: 4rem;
   font-weight: 800;
   color: #0d0d0d;
   line-height: 1;
}

.landing-hero__period {
   font-size: 1.1rem;
   color: #6c757d;
   font-weight: 600;
   align-self: flex-end;
   margin-bottom: 8px;
   margin-left: 2px;
}

.landing-hero__price-sub {
   color: #6c757d;
   font-size: 0.9rem;
   margin: 0 0 18px;
}

/* Bloque "primer pago" — destaca tarifa de setup one-time */
.landing-hero__first {
   background: rgba(201, 160, 64, 0.08);
   border: 1px dashed rgba(201, 160, 64, 0.45);
   border-radius: 8px;
   padding: 12px 14px;
   margin: 0 0 18px;
   display: flex;
   flex-direction: column;
   gap: 2px;
   text-align: center;
}

.landing-hero__first-label {
   font-size: 0.7rem;
   text-transform: uppercase;
   letter-spacing: 1.2px;
   font-weight: 700;
   color: #8a6a17;
}

.landing-hero__first-amount {
   font-size: 1.2rem;
   font-weight: 800;
   color: #0d0d0d;
}

.landing-hero__first-sub {
   font-size: 0.78rem;
   color: #6c757d;
   line-height: 1.35;
}

/* Nota al pie de la tarjeta — comisión Stripe */
.landing-hero__fee-note {
   margin: 14px 0 0;
   padding-top: 12px;
   border-top: 1px solid #f1f3f5;
   font-size: 0.78rem;
   color: #6c757d;
   line-height: 1.45;
   display: flex;
   align-items: flex-start;
   gap: 6px;
   text-align: left;
}

.landing-hero__fee-note i {
   color: #C9A040;
   margin-top: 2px;
   flex-shrink: 0;
}

.landing-hero__list {
   list-style: none;
   padding: 0;
   margin: 0;
   text-align: left;
   border-top: 1px solid #f1f3f5;
   padding-top: 18px;
}

.landing-hero__list li {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 6px 0;
   font-size: 0.92rem;
   color: #343a40;
}

.landing-hero__list i {
   color: #198754;
   font-size: 0.85rem;
}

/* ---------- Sections ---------- */
.landing-section {
   padding: 64px 0;
}

.landing-section--alt {
   background: #ffffff;
   border-top: 1px solid #e9ecef;
   border-bottom: 1px solid #e9ecef;
}

.landing-section__head {
   text-align: center;
   max-width: 640px;
   margin: 0 auto 44px;
}

.landing-section__head h2 {
   font-size: 1.9rem;
   font-weight: 800;
   color: #0d0d0d;
   margin: 0 0 10px;
   letter-spacing: -0.3px;
}

.landing-section__head p {
   color: #6c757d;
   font-size: 1.05rem;
   margin: 0;
}

.landing-section__title-left {
   font-size: 1.8rem;
   font-weight: 800;
   color: #0d0d0d;
   margin: 0 0 18px;
}

.landing-section__lead {
   font-size: 1.05rem;
   color: #495057;
   margin: 0 0 22px;
}

/* ---------- Benefit cards ---------- */
.landing-card {
   background: #ffffff;
   border: 1px solid #e9ecef;
   border-radius: 10px;
   padding: 26px 22px;
   height: 100%;
   transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.landing-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 10px 22px rgba(13, 13, 13, 0.08);
   border-color: #dee2e6;
}

.landing-card__icon {
   width: 52px;
   height: 52px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.4rem;
   margin-bottom: 16px;
}

.landing-card__icon--blue   { background: rgba(0, 123, 255, 0.10);  color: #007bff; }
.landing-card__icon--green  { background: rgba(25, 135, 84, 0.10);  color: #198754; }
.landing-card__icon--gold   { background: rgba(201, 160, 64, 0.14); color: #b8902d; }
.landing-card__icon--purple { background: rgba(111, 66, 193, 0.10); color: #6f42c1; }

.landing-card h4 {
   font-size: 1.05rem;
   font-weight: 700;
   color: #0d0d0d;
   margin: 0 0 8px;
}

.landing-card p {
   color: #6c757d;
   font-size: 0.92rem;
   margin: 0;
   line-height: 1.5;
}

/* ---------- Checklist ---------- */
.landing-checklist {
   list-style: none;
   padding: 0;
   margin: 0;
}

.landing-checklist li {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 0;
   color: #343a40;
   font-size: 0.98rem;
   border-bottom: 1px solid #f1f3f5;
}

.landing-checklist li:last-child {
   border-bottom: none;
}

.landing-checklist i {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: rgba(201, 160, 64, 0.12);
   color: #C9A040;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 0.85rem;
   flex-shrink: 0;
}

/* ---------- Quote ---------- */
.landing-quote {
   background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
   color: #ffffff;
   padding: 32px 28px;
   border-radius: 12px;
   position: relative;
   box-shadow: 0 8px 24px rgba(13, 13, 13, 0.15);
}

.landing-quote__mark {
   color: #C9A040;
   font-size: 1.6rem;
   margin-bottom: 12px;
   display: block;
}

.landing-quote__text {
   font-size: 1.1rem;
   line-height: 1.6;
   margin: 0 0 18px;
   color: #f1f3f5;
   font-style: italic;
}

.landing-quote__author {
   display: flex;
   flex-direction: column;
   gap: 2px;
   border-top: 1px solid rgba(201, 160, 64, 0.3);
   padding-top: 14px;
}

.landing-quote__author strong {
   color: #C9A040;
   font-weight: 700;
   font-size: 0.95rem;
}

.landing-quote__author span {
   color: #adb5bd;
   font-size: 0.82rem;
}

/* ---------- CTA final ---------- */
.landing-cta {
   background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
   color: #ffffff;
   padding: 64px 0;
   text-align: center;
}

.landing-cta h2 {
   font-size: 2rem;
   font-weight: 800;
   margin: 0 0 12px;
   color: #ffffff;
   letter-spacing: -0.3px;
}

.landing-cta p {
   color: #adb5bd;
   font-size: 1.1rem;
   margin: 0 0 28px;
}

.landing-cta .landing-btn-primary {
   background: #C9A040;
   color: #0d0d0d;
   box-shadow: 0 6px 18px rgba(201, 160, 64, 0.35);
}

.landing-cta .landing-btn-primary:hover,
.landing-cta .landing-btn-primary:focus {
   background: #d6ae4d;
   color: #0d0d0d;
   box-shadow: 0 8px 22px rgba(201, 160, 64, 0.45);
}

.landing-cta__trust {
   margin-top: 20px;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: #6c757d;
   font-size: 0.85rem;
}

.landing-cta__trust i {
   font-size: 1.6rem;
   color: #C9A040;
}

/* ---------- FAQ ---------- */
.landing-faq {
   max-width: 760px;
   margin: 0 auto;
}

.landing-faq .accordion-item {
   border: 1px solid #e9ecef;
   border-radius: 8px;
   margin-bottom: 10px;
   overflow: hidden;
}

.landing-faq .accordion-button {
   font-weight: 600;
   color: #0d0d0d;
   font-size: 0.98rem;
   padding: 16px 20px;
   background: #ffffff;
}

.landing-faq .accordion-button:not(.collapsed) {
   background: #f9fafb;
   color: #0d0d0d;
   box-shadow: none;
}

.landing-faq .accordion-button:focus {
   border-color: #C9A040;
   box-shadow: 0 0 0 0.15rem rgba(201, 160, 64, 0.2);
}

.landing-faq .accordion-body {
   color: #495057;
   font-size: 0.95rem;
   line-height: 1.6;
   padding: 4px 20px 18px;
}

/* ---------- Footer ---------- */
.landing-footer {
   background: #ffffff;
   border-top: 1px solid #e9ecef;
   padding: 22px 0;
   color: #6c757d;
   font-size: 0.82rem;
   margin-top: auto; /* sticky footer — empuja al fondo en pantallas altas */
}

.landing-footer p {
   margin: 0;
}

/* ---------- Loader overlay ---------- */
.landing-loader {
   position: fixed;
   inset: 0;
   background: rgba(13, 13, 13, 0.85);
   display: none;
   align-items: center;
   justify-content: center;
   z-index: 2000;
}

.landing-loader--visible {
   display: flex;
}

.landing-loader__box {
   background: #ffffff;
   padding: 28px 36px;
   border-radius: 10px;
   text-align: center;
   color: #0d0d0d;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.landing-loader__box i {
   font-size: 1.8rem;
   color: #C9A040;
   margin-bottom: 10px;
}

.landing-loader__box p {
   margin: 0;
   font-weight: 600;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
   .landing-hero {
      padding: 44px 0 36px;
   }
   .landing-hero__title {
      font-size: 1.9rem;
   }
   .landing-hero__visual {
      margin-top: 28px;
   }
   .landing-section {
      padding: 44px 0;
   }
   .landing-section__head h2,
   .landing-cta h2 {
      font-size: 1.55rem;
   }
}

@media (max-width: 575.98px) {
   .landing-hero__title {
      font-size: 1.6rem;
   }
   .landing-hero__sub {
      font-size: 1rem;
   }
   .landing-hero__ctas .btn {
      width: 100%;
   }
   .landing-hero__amount {
      font-size: 3.2rem;
   }
   .landing-cta .landing-btn-primary {
      width: 100%;
   }
}