/*
 * Modal de pago de planes: estilos propios.
 *
 * POR QUE ESTE FICHERO EXISTE
 * ---------------------------
 * El modal se apoyaba en los componentes por defecto de Bootstrap 4 (.btn-primary,
 * .text-muted, .text-success…), y no encajaban con nada de la pagina:
 *
 *   - el boton por defecto es azul Bootstrap (#007bff) y la pagina usa #4c57d6
 *   - el boton por defecto es casi recto y los botones de la pagina son capsule
 *     (border-radius 50px) y van en MAYUSCULAS
 *   - Bootstrap pone su propia tipografia y la pagina va en Montserrat
 *   - el verde #28a745 y el cian #17a2b8 de Bootstrap no estan en la paleta
 *
 * El skill ux-designer dice: "reuse before inventing... Match them, even where
 * your own taste differs". Aqui no se inventa nada: se copia el lenguaje que ya
 * usan los botones primary-btn, las tarjetas pricing__item y los titulos.
 *
 * PALETA Y MEDIDAS TOMADAS DE LA PAGINA (css/style.css)
 *   color de marca      #4c57d6   (5.77:1 sobre blanco, AA)
 *   texto de cuerpo     #444444   (9.74:1, AA)
 *   color de titulos    #111111   (18.88:1, AA)
 *   tipografia          Montserrat, sans-serif
 *   botones             15px, peso 700, mayusculas, radio 50px
 *   tarjetas            sombra 0 0 10px rgba(18,8,81,.1)
 *   ritmo de espacios   8 / 12 / 16 / 24 / 32 px
 */

/* ---------------------------------------------------------------- base */

#modalPago .modal-dialog {
    max-width: 30rem;
}

#modalPago .modal-content {
    /* La misma sombra suave que las tarjetas de plan de la pagina. */
    border: 0;
    border-radius: .5rem;
    box-shadow: 0 0 10px rgba(18, 8, 81, .1), 0 18px 44px rgba(18, 8, 81, .16);
    font-family: "Montserrat", sans-serif;
    color: #444;
    overflow: hidden;
}

/* ------------------------------------------------------------ cabecera */

#modalPago .modal-header {
    /* El paso va como eyebrow y el titulo debajo: se lee de un vistazo en que
     * punto del proceso se esta, sin tener que interpretar la migas. */
    display: block;
    padding: 1.5rem 1.75rem 1.25rem;
    border-bottom: 1px solid #eef0f4;
    background: #fff;
    position: relative;
}

#modalPago .modal-header .bn-paso {
    display: inline-block;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #4c57d6;
    margin-bottom: .25rem;
}

#modalPago .modal-title {
    font-family: "Montserrat", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: #111;
    margin: 0;
    padding-right: 2rem;
}

/* La X de Bootstrap es un aspa TooSmall; se sustituye por el icono del sitio
 * para que no parezca un boton de otra libreria. */
#modalPago .modal-header .close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid #e4e7ec;
    border-radius: 50%;
    background: #fff;
    color: #6b7280;
    font-size: 1.375rem;
    line-height: 1;
    opacity: 1;
    text-shadow: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

#modalPago .modal-header .close:hover {
    background: #f3f4f6;
    border-color: #d4d8de;
    color: #111;
}

/* -------------------------------------------------------------- cuerpo */

#modalPago .modal-body {
    padding: 1.25rem 1.75rem 1.5rem;
    color: #444;
    font-size: .9375rem;
}

/* ----------------------------------------------------- lineas del resumen */

#modalPago .bn-fila {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .625rem 0;
    border-bottom: 1px solid #f0f2f5;
}

#modalPago .bn-fila__k {
    color: #6b7280;
    font-size: .875rem;
    white-space: nowrap;
}

#modalPago .bn-fila__v {
    font-weight: 600;
    color: #111;
    text-align: right;
}

/* El total es lo unico que el usuario viene a ver: se separa con una linea
 * mas marcada y con mas peso. No se fia solo del color, que el color por si
 * solo no es informacion accesible. */
#modalPago .bn-fila--total {
    border-bottom: 2px solid #111;
    margin-top: .25rem;
    padding-bottom: .75rem;
}

#modalPago .bn-fila--total .bn-fila__k {
    color: #111;
    font-weight: 600;
    font-size: .9375rem;
}

#modalPago .bn-fila--total .bn-fila__v {
    font-size: 1.25rem;
    font-weight: 700;
    color: #4c57d6;
}

/* El saldo de MiWallet va en positivo y con su propio tono, pero la etiqueta
 * dice lo que es: no se depende de que se lea "verde" para entenderlo. */
#modalPago .bn-fila--bono .bn-fila__v {
    color: #0f7b6c;
}

/* -------------------------------------------------- metodo de pago */

#modalPago .bn-subtitulo {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6b7280;
    margin: 1.5rem 0 .75rem;
}

/* Tarjeta del metodo de pago: es la unica opcion, asi que se presenta como una
 * tarjeta seleccionable y no como un boton de radio suelto. */
#modalPago .bn-metodo {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem 1.125rem;
    border: 1px solid #dfe3e8;
    border-radius: .375rem;
    background: #fafbfc;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

#modalPago .bn-metodo:hover {
    border-color: #b9c0c8;
    background: #fff;
}

#modalPago .bn-metodo:has(input:checked) {
    border-color: #4c57d6;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(76, 87, 214, .12);
}

#modalPago .bn-metodo:has(input:focus-visible) {
    outline: 2px solid #4c57d6;
    outline-offset: 2px;
}

#modalPago .bn-metodo input {
    margin: .1875rem 0 0;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    accent-color: #4c57d6;
}

#modalPago .bn-metodo__t {
    display: block;
    font-weight: 600;
    color: #111;
    font-size: .9375rem;
}

#modalPago .bn-metodo__d {
    display: block;
    color: #6b7280;
    font-size: .8125rem;
    margin-top: .125rem;
}

#modalPago .bn-nota {
    margin: 1rem 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: #6b7280;
}

/* Cuando la pasarela este conectada la nota pasa a tono positivo. */
#modalPago .bn-nota--listo {
    color: #0f7b6c;
    font-weight: 600;
}

/* ----------------------------------------------------------------- pie */

#modalPago .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: 1.125rem 1.75rem;
    border-top: 1px solid #eef0f4;
    background: #fafbfc;
}

/* Botones con la forma del sitio: capsule, mayusculas, peso 700. */
#modalPago .modal-footer .btn {
    font-family: "Montserrat", sans-serif;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 50px;
    padding: .6875rem 1.5rem;
    min-height: 2.75rem;
    border: 1px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease,
                box-shadow .15s ease;
}

#modalPago .modal-footer .btn:focus-visible {
    outline: 2px solid #4c57d6;
    outline-offset: 2px;
}

/* Secundario: contorno, no gris Bootstrap. */
#modalPago .modal-footer .btn-outline-secondary {
    color: #4c57d6;
    border-color: #4c57d6;
    background: #fff;
}

#modalPago .modal-footer .btn-outline-secondary:hover {
    background: #4c57d6;
    color: #fff;
}

/* El boton de pago es la accion principal del proceso: relleno con la marca. */
#modalPago .modal-footer .btn-primary {
    background: #4c57d6;
    border-color: #4c57d6;
    color: #fff;
    min-width: 11rem;
}

#modalPago .modal-footer .btn-primary:hover {
    background: #3f49bd;
    border-color: #3f49bd;
    color: #fff;
}

#modalPago .modal-footer .btn-primary:active {
    background: #37429f;
}

/* Sin pasarela el boton no hace nada: se ve pulsable pero apagado, y la nota
 * de arriba explica por que. Deshabilitado sin explicacion seria peor. */
#modalPago .modal-footer .btn-primary:disabled,
#modalPago .modal-footer .btn-primary.disabled {
    background: #d7dae0;
    border-color: #d7dae0;
    color: #fff;
    cursor: not-allowed;
    box-shadow: none;
}

/* -------------------------------------------------------------- movil */

@media (max-width: 575.98px) {
    #modalPago .modal-dialog {
        margin: .5rem;
    }

    #modalPago .modal-header,
    #modalPago .modal-body,
    #modalPago .modal-footer {
        padding-left: 1.125rem;
        padding-right: 1.125rem;
    }

    /* Tres botones en fila no caben en 375px: se apilan a ancho completo. */
    #modalPago .modal-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    #modalPago .modal-footer .btn {
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    #modalPago .bn-fila--total .bn-fila__v {
        font-size: 1.125rem;
    }
}

/* Si el sistema pide menos movimiento, sin transiciones. */
@media (prefers-reduced-motion: reduce) {
    #modalPago .btn,
    #modalPago .bn-metodo,
    #modalPago .modal-header .close {
        transition: none;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Valla de sesion. Se inyecta desde js/planes.js al no haber sesion, asi que
   no existe en el HTML. Va antes del paso 1 para que se lea antes de nada.
   ────────────────────────────────────────────────────────────────────────── */
.bn-sesion {
    display: block;
    margin: 0 0 22px;
    padding: 16px 18px;
    background: #fdf6e6;
    border: 1px solid #f2d894;
    border-left: 4px solid #e0a53a;
    border-radius: 8px;
}
.bn-sesion strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #7a5410;
    margin-bottom: 4px;
}
.bn-sesion p {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.55;
    color: #6b5416;
}
.bn-sesion__botones { display: flex; gap: 10px; flex-wrap: wrap; }

/* ──────────────────────────────────────────────────────────────────────────
   Catalogo: cargando y error.
   El precio ya no sale del DOM, asi que hay una espera. La espera se explica;
   el fallo se enseña con su boton de reintento. Un modal que se cierra solo
   cuando algo va mal se lee como un modal roto.
   ────────────────────────────────────────────────────────────────────────── */

/* El borde de color no es el unico aviso: el texto lleva su propio titular y
   el icono, para que se distinga tambien sin perceive el color. */
.bn-error {
    display: block;
    margin: 0 0 22px;
    padding: 16px 18px;
    background: #fdeeee;
    border: 1px solid #f3c9c9;
    border-left: 4px solid #c0392b;
    border-radius: 8px;
}
.bn-error strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #96271b;
    margin-bottom: 4px;
}
.bn-error p {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.55;
    color: #7d3a31;
}

.bn-cargando {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #6b7280;
}

.bn-btn {
    display: inline-block;
    padding: 11px 22px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s;
}
.bn-btn--primario { background: #4c57d6; border: 1px solid #4c57d6; color: #fff; }
.bn-btn--primario:hover { background: #3d47c0; border-color: #3d47c0; color: #fff; }
.bn-btn--linea {
    background: transparent;
    border: 1px solid #e0a53a;
    color: #7a5410;
}
.bn-btn--linea:hover { background: #f7e9c8; color: #7a5410; }

@media (prefers-reduced-motion: reduce) {
    .bn-btn { transition: none; }
}