.Shopping_icon .mud-badge-wrapper {
    top: 4px;
    left: 12px !important;
}

.Shopping_icon {
    padding-top: 3px;
    margin: 0px;
}

@media (max-width: 850px) {
    .Shopping_icon {
        padding-top: 14px;
    }
}

.texto-boton {
    color: #1a73e8; /* Color azul similar a los enlaces */
    cursor: pointer;
    font-size: 16px;
    border: none;
    background: none;
}

    .texto-boton:hover {
        color: #0c4da1; /* Color al pasar el ratón */
    }


.underline-effect {
    position: relative;
    text-decoration: none; /* Quita el subrayado predeterminado */
    font-weight: bold; /* Opcional: para un estilo más claro */
}

    .underline-effect::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px; /* Grosor de la línea */
        background-color: black; /* Color de la línea */
        transition: opacity 0.1s ease; /* Transición suave */
        opacity: 1;
    }

    .underline-effect:hover::after {
        opacity: 0; /* Desaparece la línea al pasar el cursor */
    }

.RemoveMargin .mud-nav-link .mud-nav-link-text {
    margin-inline-start: 0px;
}

.RemoveMargin .mud-nav-link {
    padding-bottom: 0px !important;
}
/**************************************Estilos de SigleWEbImagenSelector***************************/
.image-preview-container {
    height: auto;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.preview-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Contiene la imagen dentro del contenedor sin recortar */
    border-radius: 8px;
}


.image-container {
    display: flex;
    flex-wrap: wrap; /* Permite que las imágenes se vayan a la siguiente fila cuando no hay espacio */
    gap: 0px 10px; /* Espacio entre las imágenes */
    overflow-y: auto; /* Activa el desplazamiento vertical si el contenido excede la altura máxima */
    padding: 10px;
    border: 1px solid #ccc; /* Opcional: borde para el contenedor */
    align-items: start;
    align-content: flex-start;
}

    .image-container img {
        max-width: 100%;
        max-height: 100%;
        object-fit: cover; /* Evita el desbordamiento y centra la imagen dentro de su contenedor */
        border-radius: 5px; /* Opcional: redondea las esquinas de las imágenes */
        margin: 5px;
    }


.file-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.file-chip {
    display: flex;
    align-items: center;
}

.badge_personalizado * .mud-badge.mud-badge-icon {
    width: 30px;
    height: 30px;
    cursor: pointer;
}
/*****************************Estilos de pagina Index y sus componentes******************************/
.texto_modificado_h2 {
    font-size: 3.75rem !important; /* Tamaño de texto por defecto */
}

@media (max-width: 959px) {
    .texto_modificado_h2 {
        font-size: 2rem !important; /* Reducir el tamaño de h1 en pantallas más pequeñas */
    }
}

.texto_modificado_h3 {
    font-size: 3rem !important; /* Tamaño de texto por defecto */
}


@media (max-width: 959px) {
    .texto_modificado_h3 {
        font-size: 2.125rem !important; /* Reducir el tamaño de h1 en pantallas más pequeñas */
    }
}

.step-item {
    height: 150px;
}

@media (max-width: 490px) {
    .step-item {
        height: 200px;
    }
}

.feature {
    height: 250px;
}

/*******************Estilos de pagina Payment************************/

.texto_modificado_h2_vpayment {
    font-size: 3.75rem !important; /* Tamaño de texto por defecto */
}

@media (max-width: 420px) {
    .texto_modificado_h2_vpayment {
        font-size: 2.7rem !important; /* Reducir el tamaño de h2 en pantallas más pequeñas */
    }
}

.texto_modificado_h3_vpayment {
    font-size: 2.6rem !important; /* Tamaño de texto por defecto */
}


@media (max-width: 959px) {
    .texto_modificado_h3_vpayment {
        font-size: 2.1rem !important; /* Reducir el tamaño de h3 en pantallas más pequeñas */
    }
}

@media (max-width: 420px) {
    .texto_modificado_h3_vpayment {
        font-size: 1.6rem !important; /* Reducir el tamaño de h3 en pantallas más pequeñas */
    }
}

.texto_modificado_h5_vpayment {
    font-size: 1.5rem !important; /* Tamaño de texto por defecto */
}


@media (max-width: 959px) {
    .texto_modificado_h5_vpayment {
        font-size: 1.2rem !important; /* Reducir el tamaño de h5 en pantallas más pequeñas */
    }
}

@media (max-width: 420px) {
    .texto_modificado_h5_vpayment {
        font-size: 1rem !important; /* Reducir el tamaño de h5 en pantallas más pequeñas */
    }
}


.texto_modificado_h5_vpayment-button {
    font-size: 1.5rem !important; /* Tamaño de texto por defecto */
}


@media (max-width: 650px) {
    .texto_modificado_h5_vpayment-button {
        font-size: 1.2rem !important; /* Reducir el tamaño de h5 en pantallas más pequeñas */
    }
}

@media (max-width: 485px) {
    .texto_modificado_h5_vpayment-button {
        font-size: 1rem !important; /* Reducir el tamaño de h5 en pantallas más pequeñas */
    }
}

@media (max-width: 386px) {
    .texto_modificado_h5_vpayment-button {
        font-size: 0.9rem !important; /* Reducir el tamaño de h5 en pantallas más pequeñas */
    }
}

.custom-button_vpayment {
    background-color: #6200ee; /* color inicial */
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.1s ease, transform 0.1s ease;
}

    .custom-button_vpayment:hover {
        background-color: #3700b3; /* color en hover */
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
    }

    .custom-button_vpayment:active {
        background-color: #1a00a0; /* color en click */
        transform: scale(0.98); /* animación de click */
    }

.ripple-button {
    position: relative;
    overflow: hidden;
    padding: 10px 20px;
    color: white;
    height: 160px;
    border: none;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s ease, box-shadow 0.1s ease, transform 0.1s ease;
}

    .ripple-button:hover {
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
    }

    .ripple-button::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        transform: scale(0);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.4s ease, opacity 0.4s ease; /* Ajusta la duración de la expansión */
    }

    .ripple-button:active::after {
        transform: scale(20); /* Tamaño de la onda */
        opacity: 1;
        transition: none; /* Evita que se retrase en aparecer */
    }

    .ripple-button::after {
        transition: transform 0.6s ease-out, opacity 0.6s ease-out; /* Para hacer que la expansión y desaparición ocurran con suavidad */
    }

@media (max-width: 737px) {
    .ripple-button {
        height: 130px;
    }
}

@media (max-width: 591px) {
    .ripple-button {
        height: 110px;
    }
}

@media (max-width: 501px) {
    .ripple-button {
        height: 100px;
    }
}

@media (max-width: 408px) {
    .ripple-button {
        height: 75px;
    }
}

/********************************ESTILOS DE GLOBALSECTIONS*****************************/
.loadingP {
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mud-overlay {
    position: fixed !important; /* para que esté por encima del contenido */
}

.input-padding input.mud-input-slot {
    padding-inline-start: 0px !important;
}

.TableTdPadding .mud-table-cell 
{
    padding: 0px !important; 
}

.Input-Slot .mud-input-slot {
    padding-top: 13px !important;
    margin-inline-start: 0px !important;
}

.InputText .mud-input.mud-input-text {
    width: min-content !important;
}

.TableCell {
    text-align: center !important;
    vertical-align: top !important;
}

@media (max-width: 600px) {
    .TableCell {
        border-bottom: 1px solid rgb(0 0 0) !important;
        border-top: 1px solid rgb(0 0 0) !important;
    }
}