/* Tamaño de fuente base */
html {
    font-size: 14px; /* Tamaño por defecto */
}

/* Aumentar tamaño de fuente en pantallas más grandes */
@media (min-width: 768px) {
    html {
        font-size: 16px; /* Tamaño para pantallas medianas y grandes */
    }
}

/* Asegurando que html tenga la altura mínima adecuada */
html {
    position: relative;
    min-height: 100%;
}

/* Margen inferior para el cuerpo */
body {
    margin-bottom: 60px; /* Espacio para el pie de página si lo hay */
}

/* Contenedor principal para el diseño */
.main-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
}

/* Estilos para el panel de medios de pago */
.panel-medios-pago {
    width: 40%;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Estilos para el resumen de compra */
.resumen-compra {
    width: 55%;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Estilos para los productos listados */
.producto {
    display: flex;
    margin-bottom: 10px;
}

/* Estilos para las fotos de los productos */
.producto-foto {
    width: 100px;
    height: 100px;
    margin-right: 10px;
}

/* Descripción del producto */
.producto-descripcion {
    flex-grow: 1;
}

/* Totales de compra */
.totales {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Mensaje del bono */
.mensaje-bono {
    color: green;
    margin-top: 10px;
}

/* Estilos del botón */
button {
    background-color: #007bff; /* Color de fondo */
    color: white; /* Color de texto */
    border: none; /* Sin borde */
    padding: 10px; /* Espaciado interno */
    border-radius: 5px; /* Esquinas redondeadas */
    cursor: pointer; /* Cambiar cursor a pointer */
    margin-top: 10px; /* Espaciado superior */
}

    /* Efecto hover para el botón */
    button:hover {
        background-color: #0056b3; /* Color de fondo al pasar el mouse */
    }

/* Diseño responsivo para pantallas pequeñas */
@media (max-width: 768px) {
    .main-container {
        flex-direction: column; /* Cambiar a columna en pantallas pequeñas */
    }

    .panel-medios-pago,
    .resumen-compra {
        width: 100%; /* Tomar el ancho completo */
    }
}

/* Opciones de pago */
.payment-options {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}

/* Estilo para los botones de opción de pago */
.payment-option-button {
    border: none; /* Sin borde */
    background: transparent; /* Sin fondo */
    padding: 0; /* Sin espaciado interno */
    cursor: pointer; /* Cambiar cursor a pointer */
}

    /* Imagen de opción de pago */
    .payment-option-button img {
        height: 80px; /* Altura de la imagen */
        transition: filter 0.3s; /* Transición suave para filtro */
    }

    /* Efecto hover para la imagen de opción de pago */
    .payment-option-button:hover img {
        filter: grayscale(100%); /* Cambiar a escala de grises al pasar el mouse */
    }
    .payment-option-button.selected {
        border: 3px solid blue; /* Aumenta el grosor del borde */
        box-shadow: 0 0 15px rgba(0, 0, 255, 0.7); /* Intensifica la sombra azul */
        background-color: rgba(0, 0, 255, 0.1); /* Agrega un fondo azul claro */
        border-radius: 12px; /* Asegura que el borde tenga el mismo redondeado */
        transform: scale(1.05); /* Hace que el botón parezca más grande al seleccionarlo */
        transition: all 0.2s ease-in-out; /* Suaviza la transición */
    }


/* Estilo para elementos de detalle */
.detail-item {
    display: flex;
    justify-content: space-between; /* Espaciado entre elementos */
    padding: 5px 0; /* Espaciado vertical */
}

    /* Estilo para el texto en elementos de detalle */
    .detail-item span {
        display: block; /* Mostrar como bloque */
    }

    /* Título en el detalle */
    .detail-item h4 {
        margin: 0; /* Sin margen */
        text-align: right; /* Alinear a la derecha */
    }

/* Indentación */
.indent {
    padding-left: 20px; /* Espaciado a la izquierda */
}

/* Espaciado en el cuerpo de la tarjeta */
.card-body {
    padding: 0.5rem; /* Espaciado interno */
}

/* Estilo para el botón de enlace */
.btn-link {
    border: none; /* Sin borde */
    background: transparent; /* Sin fondo */
    padding: 0; /* Sin espaciado interno */
}

/* Icono de chevron */
.bi-chevron-down {
    font-size: 1.2rem; /* Tamaño del icono */
    transition: transform 0.2s ease; /* Transición suave para transformación */
}

/* Rotación del icono al mostrar */
.collapse.show + .btn-link .bi-chevron-down {
    transform: rotate(180deg); /* Rotar icono */
}

/* Margen inferior */
.mb-4 {
    margin-bottom: 1.5rem; /* Espacio inferior */
}

/* Icono personalizado para los pasos */
.custom-step-icon {
    width: 24px; /* Ancho del icono */
    height: 24px; /* Alto del icono */
}

    /* SVG en el icono personalizado */
    .custom-step-icon svg {
        width: 100%; /* Ancho completo */
        height: 100%; /* Alto completo */
    }
.progress-bar {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.steps {
    display: flex;
    list-style-type: none;
    padding: 0;
    width: 90%;
    justify-content: space-between;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
}

    .step span {
        margin-top: 10px;
        font-size: 14px;
        color: gray;
    }

    .step.completed span {
        color: dodgerblue;
    }
    /* Círculo del paso */
    .step::before {
        content: "";
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: white;
        border: 2px solid lightgray;
        display: block;
    }

    .step.completed::before {
        background-color: white; /* Mantiene el fondo blanco */
        border-color: #0056b3; /* Azul oscuro para el borde del círculo completado */
    }

.line {
    width: 100%;
    height: 2px;
    background-color: lightgray;
    margin-top: 10px;
}

    .line.active {
        background-color: lightgray;
    }

#btnContinuarPago {
    background-color: #DD0021;
    border-color: #DD0021;
}

    /* Cambiar el color cuando el botón está deshabilitado */
    #btnContinuarPago:disabled {
        background-color: #DD0021;
        opacity: 0.6; /* Ajusta la opacidad si deseas que el botón se vea más tenue */
    }

.btns {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    flex-direction: row;
    width: 50%;
    gap: 1rem;
}

.btn-small {
    width: 50%;
    padding: 5px 10px;
    font-size: 12px;
    background-color: #CFE2FF;
    border: 2px solid #CFE2FF;
    border-radius: 4px;
    color: blue;
    transition: background-color 0.3s, color 0.3s;
}

    .btn-small:hover, .btn-small:focus {
        background-color: blue;
        color: white;
    }
/* Aumentar tamaño de fuente en pantallas más grandes */
@media (min-width: 768px) {
    html {
        font-size: 16px; /* Tamaño para pantallas medianas y grandes */
    }
}
/* Diseño responsivo para pantallas pequeñas */
@media (max-width: 768px) {
    .main-container {
        flex-direction: column; /* Cambiar a columna en pantallas pequeñas */
    }

    .panel-medios-pago,
    .resumen-compra {
        width: 100%; /* Tomar el ancho completo */
    }

    .btns {
        width: 100%; /* Ancho completo para el contenedor de botones */
    }
}