:root {
    --color-1-opaco: #e1167f80;
    --color-1-opaco-2: #e1167f17;
    --color-1: #e1167f;
    --color-2-opaco: #6b398217;
    --color-3-opaco: #6b398273;
    --color-2: #6b3982;
    --color-banner-opaco: #6b398273;
}

body {
    position: relative;
    padding-top: 60px;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

body.catalogo {
    padding-top: 115px;
}

.texto-rojo {
    color: #ff2525;
}

.texto-verde {
    color: #4cc62d;
}

.card-body .switch-oculto {
    overflow: hidden;
    transition:
        max-height 0.4s ease,
        padding 0.4s ease,
        opacity 0.4s ease;
    opacity: 1;
    max-height: 720px;
}

.card-body .switch-oculto.encoger {
    max-height: 0;
    padding: 0;
    opacity: 0;
}

.contenedor-mapa iframe {
    width: 100%;
    height: 350px;
}

@keyframes vibrar {
    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-5px);
    }

    40% {
        transform: translateX(5px);
    }

    60% {
        transform: translateX(-5px);
    }

    80% {
        transform: translateX(5px);
    }

    100% {
        transform: translateX(0);
    }
}

.vibrar {
    animation: vibrar 0.3s;
}

/*--------------------------------- HEADER (INICIO) --------------------------------------------*/
.menu {
    position: fixed;
    width: 100%;
    top: 0;
    display: flex;
    height: 67px;
    background-color: #fff;
    justify-content: center;
    align-items: center;
    padding: 20px 88px;
    z-index: 2500;
    /* offset-x | offset-y | blur-radius | spread-radius | color */
    -webkit-box-shadow: 0px -1px 10px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px -1px 10px 2px rgba(0, 0, 0, 0.2);
}

#menu {
    position: fixed;
    width: 100%;
    top: 0;
    background-color: #fff;
    z-index: 2500;
    box-shadow: 0px -1px 10px 2px rgba(0, 0, 0, 0.2);
}

.navbar-brand img {
    width: auto;
    max-height: 40px;
    border-radius: 5px;
    margin-right: 8px;
}

.perfil-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    object-fit: cover;
}

.opciones-menu-up {
    display: flex;
    flex-basis: auto;
    flex-grow: 1;
    align-items: center;
}

.opciones-menu-up ul {
    flex-direction: row;
}

.menu-link {
    font-size: 18px;
    color: #686868;
    padding: 10px;
    cursor: pointer;
    text-decoration: none;
    font-family: "Poppins", serif;
}

.menu-link:hover {
    color: #000;
}

.menu-link.active {
    color: #000;
}

#sesion a {
    color: #000;
}

@media (min-width: 990px) {
    #sesion {
        font-size: 12px;
    }
}

.btn-me-interesa {
    background-color: var(--color-1);
    color: #fff;
}

.btn-me-interesa:hover {
    background-color: var(--color-2);
    color: #fff;
}



/* Botón hamburguesa */
.hamburguesa {
    display: none;
    /* Ocultar por defecto (se muestra sólo en móvil) */
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    align-items: center;
    gap: 8px;
    /* Espacio entre el icono y la palabra */
}

.hamburguesa svg {
    fill: #7c611f;
}

.texto-categorias {
    font-size: 16px;
    display: none;
    font-family: "Poppins", serif;
    font-weight: 400;
    color: #7c611f;
}

/* Estilo del menú */
#menuNav {
    display: flex;
}

button.hamburguesa {
    padding: 9px 10px;
}

#opcsMenu {
    display: flex;
    flex-direction: row;
    list-style: none;
    /* gap: 20px; */
    padding: 0;
    margin: 0;
    position: relative;
}

#opcsMenu li {
    cursor: pointer;
}

#opcsMenu li:first-child {
    position: sticky;
    left: 0;
}

#opcsMenu li:first-child::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

/* Mostrar hamburguesa y ocultar menú en móviles */
@media (max-width: 480px) {
    .hamburguesa {
        display: flex !important;
        /* Mostrar botón hamburguesa */
    }

    #menuNav {
        display: none;
        position: absolute;
        top: 61px;
        left: 0;
        background: white;
        width: 100%;
        flex-direction: column;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        padding: 0;
    }

    #menuNav.active {
        display: flex;
        /* Mostrar menú cuando se active */
    }

    #opcsMenu {
        flex-direction: column;
        /* Mostrar categorías en columna */
        /* gap: 10px; */
        overflow-y: auto;
        max-height: calc(100vh - 111px);
        height: fit-content;
    }

    #opcsMenu li:first-child {
        position: sticky;
        top: 0;
    }

    .texto-categorias {
        display: block;
        /* Mostrar palabra "Categorías" sólo en móvil */
    }
}

header .menu-categorias {
    width: 100%;
    position: fixed;
    top: 66px;
    /* height: 48px; */
    background: #fff;
    z-index: 4;
    /* offset-x | offset-y | blur-radius | spread-radius | color */
    -webkit-box-shadow: 0px -1px 10px 2px var(--color-1-opaco-2);
    box-shadow: 0px -1px 10px 2px var(--color-1-opaco-2);
}

header .menu-categorias ul {
    list-style: none;
    display: flex;
    height: 100%;
    padding: 0;
    /* border-bottom: 2px solid #ebebeb; */
    margin: 0;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-1-opaco);

}

header .menu-categorias ul li {
    padding: 10px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

header .menu-categorias ul li.active {
    border-bottom-color: var(--color-2);
    font-weight: bold;
    background-color: var(--color-2-opaco);
    color: var(--color-2);
}

header .menu-categorias ul li:hover {
    background-color: var(--color-1-opaco-2);
    border-bottom-color: var(--color-1);
    color: var(--color-1);
}

.banner {
    height: 600px;
    width: 100%;
    position: relative;
    background-image: url('../img/banner.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

a#HacerPedido {
    bottom: 35%;
}

.banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* background-color: rgba(225, 22, 127, 0.5); */
    bottom: 0;
    /* Color negro con 50% de opacidad */
    background-color: var(--color-banner-opaco);
    z-index: 1;
}

.banner * {
    position: relative;
    z-index: 2;
    /* Texto blanco para mejor contraste */
    color: #403000;
    border-radius: 5px;
}

.banner>h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.banner .logo {
    display: flex;
    align-items: end;
    flex: 1;
    bottom: -10%;
}

.banner .contenedor-boton {
    display: flex;
    align-items: start;
    flex: .7;
}

.banner .logo img {
    /* height: 150px; */
}

@font-face {
    font-family: t1;
    src: url(../fonts/photograph.ttf);
}

.banner h2 {
    flex: 1;
}

.banner h2 span {
    background-color: #9f9f9f94;
    backdrop-filter: blur(4px);
    padding: 8px 20px;
    border-radius: 10px;
    display: inline-block;
    margin-top: 1rem;
    color: #fff;
    /* font-size: 1.2rem; */
    font-style: italic;
    font-family: "Poppins", serif;
    /* Ajusta el tamaño entre 2rem y 8rem según el tamaño de la pantalla */
    font-size: clamp(1.5rem, 1vw, 8rem);
    font-weight: bold;
    /* Asegura que se rompan las palabras si es necesario */
    overflow-wrap: break-word;
    /* Opcional: Alinear el texto */
    text-align: center;
    /* Ajustar el espacio entre líneas */
    line-height: 1.2;
    -webkit-text-stroke: .3px #fff;
    margin-left: 10px;
    margin-right: 10px;
}

/* .banner button {
    background-color: #ffffff;
    color: var(--color-1);
    border-radius: 20px;
    border: none;
    padding: 7px 15px;
    font-weight: bold;
} */

.boton-whatsapp {
    /* display: inline-flex; */
    /* align-items: center; */
    gap: 10px;
    background-color: #25D366;
    color: #fff;
    /* font-weight: 600; */
    padding: 8px 15px;
    border-radius: 30px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, background 0.3s;
    font-size: 1.2rem;
    font-weight: bold;
}

.boton-whatsapp i {
    color: #fff;
}

.boton-whatsapp:hover {
    background-color: #1ebe5a;
    color: #fff;
    transform: scale(1.05);
}

.boton-whatsapp:active i {
    color: inherit;
}

/* 
.banner button:hover {
    background-color: #ffeaea;
}

.banner button:active {
    background-color: #ffc7c7 !important;
} */
/*--------------------------------- HEADER (FINAL) --------------------------------------------*/


/*--------------------------------- MAIN (INICIO) --------------------------------------------*/
main {
    flex: 1;
}

section.contenedor {
    width: 100%;
    padding: 0px 10px 30px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.catalogo section.contenedor:nth-of-type(4n + 1) {
    background: var(--color-1-opaco-2);
}

.catalogo section.contenedor:nth-of-type(4n + 2) {
    background: #fff;
}

.catalogo section.contenedor:nth-of-type(4n + 3) {
    background: var(--color-2-opaco);
}

.catalogo section.contenedor:nth-of-type(4n + 4) {
    background: #fff;
}

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@100&display=swap');

section.contenedor h2 {
    font-family: "Poppins", serif;
    /* Fuente delgada */
    font-weight: 400;
    /* Ajusta el tamaño según tus necesidades */
    font-size: 2.3rem;
    /* Espaciado entre letras */
    letter-spacing: 0.1rem;
    /* Centrar el texto */
    text-align: center;
    margin: 18px 0;
    padding: 0;
    /*Color solamente para éste tipo de título de la página */
    color: #7c611f;
}

/*** Promociones ***/
.bg-promociones {
    background-color: var(--color-1-opaco-2);
}

.contenedor-promociones {
    display: flex;
    /* Scroll horizontal si el contenido es más grande que la pantalla */
    overflow-x: auto;
    width: 100%;
}

.promociones {
    display: flex;
    /* Alinea los elementos al principio */
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    margin: auto;
}

.promociones .promocion {
    width: 200px;
    min-width: 200px;
    min-height: 150px;
    margin: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 8px;
    padding: 5px;
    background-size: cover;
    background-position: center;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    /* Sombra sutil */
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.promocion::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(102 76 16 / 50%);
    mix-blend-mode: multiply;
    z-index: 1;
}

.promociones .promocion:nth-child(1) {
    background-image: url('../img/chido/promocion-1.jpg');
}

.promociones .promocion:nth-child(2) {
    background-image: url('../img/chido/promocion-2.jpg');
}

.promociones .promocion:nth-child(3) {
    background-image: url('../img/chido/promocion-3.jpg');
}

.promociones .promocion h3 {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    text-overflow: ellipsis;
    z-index: 2;
    overflow: hidden;
}

.promociones .promocion p {
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    text-overflow: ellipsis;
    z-index: 2;
}

/*** Productos ***/
.contenedor-productos {
    display: flex;
    /* Scroll horizontal si el contenido es más grande que la pantalla */
    overflow-x: auto;
    width: 100%;
}

.productos {
    display: flex;
    /* Alinea los elementos al principio */
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    margin: auto;
}

#contenedor-chido .productos {
    width: 100%;
}

.contenedor-productos.no-overflow {
    display: flex;
    flex-direction: row;
    /* Centra el grupo de elementos */
    justify-content: center;
}

.no-overflow .productos {
    /* margin: 0; */
    display: flex;
    margin-left: auto;
    /* Empuja el grupo de elementos hacia la izquierda */
}

.productos .producto {
    width: 200px;
    height: 260px;
    margin: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 8px;
    /* padding: 5px; */
    background-size: cover;
    background-position: center;
    background-color: var(--color-3-opaco);
    position: relative;
}

.producto .codigo {
    padding: 5px;
    background: var(--color-2);
    color: #fff;
    position: absolute;
    top: 10px;
    left: 0;
    font-size: 10px;
    z-index: 2;
}

.productos .producto .contenedor-foto {
    width: 100%;
    height: 100%;
    max-height: 200px;
    /* display: flex;
    justify-content: center; */
    position: relative;
    margin-bottom: 10px;
    border-top-left-radius: 8px;
    overflow: hidden;
    border-top-right-radius: 8px
}

.productos .producto .contenedor-foto img {
    /* max-width: 100%;
    max-height: 100%; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.productos .producto h3 {
    font-size: .9rem;
    font-family: "Poppins", serif;
    font-weight: bold;
    text-align: center;
    /* Ocultar el desbordamiento */
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* Limita a 2 líneas */
    -webkit-line-clamp: 1;
    /* Permitir que se rompan las líneas */
    white-space: normal;
    /* Puntos suspensivos si el texto excede el espacio */
    text-overflow: ellipsis;
    height: 25px;
    padding: 0 2px;
}

.productos .producto p {
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    font-family: "Poppins", serif;
}

/*** Quienes somos ***/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

.bg-quienes-somos {
    background-color: #f6f6f6;
}

.bg-quienes-somos h3,
.bg-quienes-somos p {
    max-width: 1000px;
    width: 90%;
    margin: auto;
    text-align: center;
    font-family: "Poppins", serif;
}

.bg-quienes-somos h3 {
    font-weight: 400;
    /* Ajusta según el color que prefieras */
    color: #7c611f;
    margin-bottom: 23px;
    margin-top: 15px;
    font-size: 2.3rem;

}

.bg-quienes-somos p {
    font-weight: 400;
    text-transform: math-auto;
    /* Ajuste de espaciado entre letras si es necesario */
    letter-spacing: 0.05em;
}

/*** Sucursales ***/
section.bg-sucursales {
    background-color: #fff;
    display: flex;
    flex-direction: row;
}

.parte-izquierda {
    width: 50%;
    display: flex;
    flex-direction: column;
}

.parte-izquierda .logo {
    height: fit-content;
    margin: auto;
}

.parte-izquierda .logo img {
    height: 100px;
    border-radius: 5px;
}

.parte-izquierda h3 {
    text-align: center;
    font-weight: 400;
    color: #7c611f;
    margin-bottom: 23px;
    margin-top: 15px;
    font-size: 2.3rem;
}

.parte-izquierda article {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.parte-izquierda article svg {
    width: 20px;
    margin-right: 10px;
}

.parte-izquierda article p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-height: 1.5em;
}

.parte-derecha {
    flex: 1;
}

.parte-derecha #map {
    width: 100%;
    height: 300px;
}

@media (max-width: 800px) {
    section.bg-sucursales {
        flex-direction: column;
    }

    .parte-izquierda {
        width: 100%;
        padding: 20px 10px;
    }

    .parte-derecha {
        padding: 20px 10px;
        background-color: var(--color-2-opaco);
        width: 100%;
        flex: auto;
        margin: -20px -10px;
    }
}

/*--------------------------------- MAIN (FINAL) --------------------------------------------*/
/*---------------------------------  (INICIO) --------------------------------------------*/
footer {
    background: var(--color-2);
    padding: 20px 10px;
    margin-top: 20px;
}

footer p {
    margin: 0;
    text-align: center;
    color: #fff;
    font-size: clamp(.4rem, 5vw, .8rem);
}

/*---------------------------------  (FINAL) --------------------------------------------*/
/*--------------------------------- MODALES (INICIO) --------------------------------------------*/
.contenedor-modal {
    background-color: rgba(0, 0, 0, .2);
    height: 100%;
    width: 100%;
    color: #000;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9100;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contenedor-modal .modal-imagen {
    width: fit-content;
    height: fit-content;
    position: relative;
    background: var(--color-1-opaco);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    border-radius: 10px;
    cursor: zoom-out;
}

.contenedor-modal .modal-imagen img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 10px;
}

.contenido-modal {
    display: flex;
    max-width: 90%;
    width: 700px;
    height: fit-content;
    max-height: 350px;
    /* border: 2px solid red; */
    background: #fff;
    position: relative;
    /* padding: 10px; */
    /* offset-x | offset-y | blur-radius | spread-radius | color */
    -webkit-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    opacity: 0;
}

.contenedor-modal .contenido-modal>svg {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    text-align: center;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    cursor: pointer;
    -o-transition: transform .3s ease;
    -moz-transition: transform .3s ease;
    -webkit-transition: transform .3s ease;
    transition: transform .3s ease;
    background: #fff;
    border-radius: 100%;
    border: 1px solid #fff;
}

.contenedor-modal .contenido-modal>svg path {
    fill: var(--color-1);
}

.contenedor-modal .contenido-modal>svg:hover {
    transform: rotate(90deg) scale(1.1);
}

@keyframes aparecer-modal {
    0% {
        transform: scale(.9);
        opacity: 50;
    }

    50% {
        transform: scale(1.1);
        opacity: 75;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.contenedor-modal.active .contenido-modal {
    opacity: 1;
    transform: 1;
    animation-name: aparecer-modal;
    animation-duration: .2s;
}

.contenido-modal .contenedor-imagen {
    flex: 1;
    min-height: 350px;
    position: relative;
    overflow: hidden;
    position: sticky;
    top: 0;
    z-index: 2;
}

.contenido-modal .contenedor-imagen img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.contenido-modal .contenedor-texto {
    flex: 1;
    position: relative;
    padding: 10px 10px 0 10px;
    display: flex;
    flex-direction: column;
    max-height: 50%;
    overflow-y: auto;
}

.contenido-modal .contenedor-texto h3 {
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    padding: 10px;
    border-bottom: 1px solid #c6c6c6;
    color: #363636;
    /* font-family: 'Playfair Display', serif; */
    font-family: 'Montserrat', sans-serif;
    /* font-family: 'Lora', serif; */
    /* font-family: 'Raleway', sans-serif; */
    /* font-family: 'Lora', serif; */
    background-color: var(--color-2-opaco);
    color: var(--color-1);
}

.contenido-modal .contenedor-texto .descripcion {
    flex: 1;
    overflow-y: auto;
}

.contenido-modal .contenedor-texto p {
    /* margin-bottom: 7px; */
    text-align: justify;
    padding-left: 10px;
    padding-right: 10px;
    color: #5c5c5c;
    /* font-family: 'Merriweather', serif;
    font-size: 18px;
    font-weight: 400;
    color: #333;
    /* font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    letter-spacing: 1px; */
    /* font-family: 'Lobster', 'Abril Fatface', ;
    font-size: 20px;
    font-weight: lighter;
    color: #703800; */
    /* font-family: 'Abril Fatface', serif;
    font-size: 18px;
    color: #8B4513; */
    /* font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    color: #d35400;
    text-transform: uppercase;
    letter-spacing: 1.5px; */
}

.contenido-modal .contenedor-texto p .negritas {
    color: var(--color-2);
}

.contenido-modal .contenedor-texto .precio {
    position: sticky;
    bottom: 0;
    width: calc(100% + 20px);
    font-weight: bold;
    padding: 5px;
    background: var(--color-2-opaco);
    color: var(--color-1);
    text-align: center;
    font-size: 20px;
    margin-left: -10px;
    margin-right: -10px;
    z-index: 9999;
    /* Aumentar el z-index para asegurar que esté frente al contenido */
}

.btn-primary {
    background: var(--color-1);
    border: none;
    border: 1px solid var(--color-1);
    font-weight: bold;
}

.btn-primary:hover,
.btn-outline-primary:hover {
    background: var(--color-1-opaco);
    border: 1px solid var(--color-1-opaco);
}

.btn-primary:focus,
.btn-outline-primary:focus {
    background: var(--color-1-opaco);
    color: #fff;
}

.btn-primary:focus-visible,
.btn-outline-primary:focus-visible {
    background: var(--color-1-opaco);
    color: #fff;
}

.btn-primary:active,
.btn-outline-primary:active {
    background: var(--color-1) !important;
    color: #fff !important;
    outline: none !important;
    outline-width: 0 !important;
    border: none !important;
}

.btn-success:hover i,
.btn-primary i,
.btn-outline-primary i,
.btn-outline-danger i,
.btn-outline-success i {
    -o-transition: transform .3s ease;
    -moz-transition: transform .3s ease;
    -webkit-transition: transform .3s ease;
    transition: transform .3s ease;
}

.btn-success:hover i,
.btn-primary:hover i,
.btn-outline-primary:hover i,
.btn-outline-danger:hover i,
.btn-outline-success:hover i {
    transform: translate(-3px, 0px);
}

.btn-outline-primary {
    /* background: transparent; */
    border: 1px solid var(--color-base-fuerte-1);
    color: var(--color-base-fuerte-1);
    font-weight: bold;
}

/*--------------------------------- MODALES (FINAL) --------------------------------------------*/

.form-floating label {
    -o-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    z-index: 0;
    top: 0;
    padding: 5px 10px;
    color: #ababab;
    fill: #ababab;
}

.form-floating textarea~label {
    left: 10px;
}

.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
    opacity: 1;
    padding: 0 3px;
    transform: scale(.85) translateY(-.7rem) translateX(.15rem);
    height: fit-content;
    background-color: #fff;
    width: fit-content;
    color: #585858;
    fill: #585858;
    border-radius: 5px;
}

.form-floating>.form-control:focus~label::after,
.form-floating>.form-control:not(:placeholder-shown)~label::after,
.form-floating>.form-select~label::after {
    z-index: 10 !important;
    /* background: transparent !important; */
    background: transparent;
}

.form-floating .form-control,
.form-floating .form-select {
    /* border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid #c8c8c8;
    border-radius: 0; */
    padding: 10px !important;
    height: 38px;
    min-height: 38px;
    background-color: transparent;
}

.form-floating textarea.form-control {
    height: 76px;
}

.form-floating .form-control:focus,
.form-floating .form-select:focus {
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

.form-floating .form-control[readonly]:not(.modal-search input[readonly]),
.form-floating .form-select[readonly] {
    background: #ece6e5 !important;
}

.form-floating .form-control[readonly]:not(.modal-search input[readonly]):focus,
.form-floating .form-select[readonly]:focus {
    border-color: var(--bs-border-color);
}

.form-floating>.form-control[readonly]:not(.modal-search input[readonly]):focus~label,
.form-floating>.form-control[readonly]:not(:placeholder-shown, .modal-search input[readonly])~label,
.form-floating>.form-select[readonly]~label {
    background-color: var(--bs-border-color);
}


.modal-search,
.input-con-icono {
    position: relative;
}

.modal-search input {
    cursor: pointer;
}

.input-con-icono>i {
    color: #4E342E;
}

.modal-search>i,
.input-con-icono>i {
    position: absolute;
    top: calc(50% - 6px);
    right: 8px;
}

.input-con-icono.input-password>i {
    padding: 8px;
    top: calc(50% - 14px);
    cursor: pointer;
}

.input-con-icono.input-password>i:hover {
    color: #a79a96;
}

.input-con-icono.input-password>i~i {
    display: none;
}

.input-con-icono.input-password.active>i {
    display: none;
}

.input-con-icono.input-password.active>i~i {
    display: block;
}

.form-floating .equis-eliminar {
    position: absolute;
    font-size: 20px;
    right: 10px;
    bottom: calc(50% - 10px);
    color: #ff2525;
    cursor: pointer;
    -o-transition: transform .3s ease;
    -moz-transition: transform .3s ease;
    -webkit-transition: transform .3s ease;
    transition: transform .3s ease;
}

.form-floating .equis-eliminar:hover {
    transform: rotate(90deg);
}


/********************************** MODAL FORMULARIO (INICIO) ***********************************/
.modal-emergente {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2500;
    justify-content: center;
    align-items: center;
    font-size: 12px;
}

.modal-fondo {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.modal-contenido {
    position: relative;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    width: 90%;
    max-width: 500px;
    min-height: 300px;
    z-index: 1;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
    animation: aparecer 0.2s ease-out;
    max-height: 80vh;
    overflow-y: auto;
    background-size: cover;
    background-position: center;
    color: #fff;
}

.modal-contenido::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(102 76 16 / 50%);
    mix-blend-mode: multiply;
    z-index: 1;
}

.modal-contenido h2 {
    margin-top: 0;
    z-index: 2;
    position: relative;
}

.modal-contenido p {
    z-index: 2;
    position: relative;
}

.modal-contenido button[type="submit"] {
    background-color: #222;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

.cerrar-modal {
    position: sticky;
    top: 0px;
    right: 13px;
    background: transparent;
    border: none;
    font-size: 22px;
    float: right;
    z-index: 3;
    width: 10px;
    height: 10px;
    color: #fff;
}

@keyframes aparecer {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/********************************** MODAL FORMULARIO (FINAL) ***********************************/


/*--------------------------------- EXTRAS (INICIO) --------------------------------------------*/
body.modal-abierto {
    overflow: hidden;
}

.cursor-pointer {
    cursor: pointer;
}

.zoom-hover {
    -o-transition: transform .3s ease;
    -moz-transition: transform .3s ease;
    -webkit-transition: transform .3s ease;
    transition: transform .3s ease;
}

.zoom-hover:hover {
    transform: scale(1.1);
}

.negritas {
    font-weight: bold;
}

.oculto {
    display: none !important;
}

.no-overflow {
    overflow: hidden;
}

.no-overflow .productos {
    flex-wrap: wrap;
}

.transiciones {
    -o-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

#btnZoomImg {
    width: 45px;
    height: 45px;
    display: flex;
    position: absolute;
    top: 10px;
    left: 10px;
    cursor: zoom-in;
    z-index: 2;
}

/********************************** MODAL PRODCUTO (INICIO) ***********************************/
.container-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 9000;
}

.modal-content {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    max-height: 85vh;
}

.contenedor-modal-img {
    height: 250px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 1;
    cursor: zoom-in;
    flex-shrink: 0;
}

.modal-img {
    width: 100%;
    height: 100%;
    /* mantiene la proporción */
    object-fit: contain;
    object-position: center;
}

.modal-img-desenfoque {
    position: absolute;
    inset: 0;
    /* background-image: url('tu-imagen.jpg'); */
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.7);
    transform: scale(1.1);
    z-index: 0;
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
    transition: opacity 0.2s ease;
    opacity: 1;
}

.modal-img-desenfoque.cambiando {
    opacity: 0;
}

.no-img {
    height: 220px;
    background-color: #f0f0f0;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: italic;
}

.modal-body {
    padding: 1.5rem;
    position: relative;
    padding-bottom: 0;
}

.modal-body .botones-modal {
    display: flex;
    justify-content: center;
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 10px;
}

#seRequiere {
    position: absolute;
    top: -16px;
    right: -9px;
    font-size: 12px;
    background-color: #ffffff94;
    padding: 8px 20px;
    border-top-left-radius: 10px;
    display: inline-block;
    margin-top: 1rem;
    font-family: "Poppins", serif;
    font-weight: bold;
    overflow-wrap: break-word;
    text-align: center;
    line-height: 1.2;
    margin-left: 10px;
    margin-right: 10px;
    border-bottom-left-radius: 10px;
}

.modal-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #333;
}

.modal-description {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 1rem;
}

.modal-price {
    text-align: right;
    font-size: 1.2rem;
    color: #333;
}

.old-price {
    text-decoration: line-through;
    color: #999;
    margin-right: 8px;
}

.offer-price {
    color: #d32f2f;
    font-weight: bold;
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 2;
    color: #3F3F3F;
    background: #fff;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-close:hover {
    background-color: #e3e3e3;
    color: #0D0D0D;
}

.botones-modal .btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.botones-modal a {
    text-decoration: none;
}

.botones-modal .btn svg {
    margin-right: 5px;
    fill: #fff;
}

@media (max-width: 600px) {
    .modal-content {
        margin-top: auto;
        margin-bottom: auto;
    }

    .botones-modal {
        flex-direction: column;
    }

    .botones-modal .btn {
        margin-left: auto;
        margin-right: auto !important;
        margin-bottom: 10px;
        width: fit-content;
    }
}

/* === SLIDER DENTRO DEL MODAL === */
.slider-modal {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.slider-modal-track {
    display: flex;
    width: 500%;
    height: 100%;
    transition: transform 0.5s ease;
}

.slider-modal .modal-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    flex-shrink: 0;
}

/* Flechas */
.slider-modal-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.6);
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.3rem 0.6rem;
    border-radius: 50%;
    color: #333;
    transition: background-color 0.3s;
    z-index: 2;
    height: 50px;
    width: 50px;
}

.slider-modal-btn:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

.slider-modal-btn.prev {
    left: 10px;
}

.slider-modal-btn.next {
    right: 10px;
}

/* Indicadores */
.slider-modal-indicadores {
    position: absolute;
    bottom: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 3;
}

.slider-modal-indicadores span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.3s;
}

.slider-modal-indicadores span.activo {
    background: #fff;
}

/********************************** MODAL PRODCUTO (FINAL) ***********************************/

/********************************** NOTIFICACIONES (INICIO) ***********************************/

.campana-notificaciones {
    font-size: 20px;
    margin-right: 10px;
    position: relative;
}

.campana-notificaciones>i {
    border-radius: 100%;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}


.campana-notificaciones:hover>i {
    background-color: #d3d3d3;
}

.notification-panel {
    position: absolute;
    top: 35px;
    right: 0;
    width: 95vw;
    max-width: 500px;
    background: white;
    color: black;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    /* padding: 10px; */
    display: none;
    /* Oculto por defecto */
    z-index: 9000;
    overflow-x: hidden;
    max-height: 90vh;
    overflow-y: auto;
}

.notification-panel>p {
    margin: 0;
    padding: 5px;
    background: #173E5D;
    text-align: center;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 1;
}

.notification-panel .sin-notificaiones {
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #b0b0b0;
}

.notification-panel i {
    font-size: 70px;
    color: #ddd;
    margin-bottom: 8px;
}

.notification-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.notification-panel li {
    padding: 10px;
    padding-bottom: 25px;
    border-bottom: 1px solid #d9d9d9;
    position: relative;
    display: flex;
    flex-direction: column;
    /* Oculta el contenido sobrante */
    overflow: hidden;
    transition: all 0.3s ease;
    height: auto;
}

.notification-panel li.encoger {
    height: 0;
    padding: 0;
}

.notification-panel li:hover {
    background-color: #f5f5f5;
}

.notification-panel li:last-child {
    border-bottom: none;
}

.notification-panel li #titulo {
    width: 100%;
}

.notification-panel li #tiempo {
    position: absolute;
    right: 5px;
    top: 2px;
    font-size: 12px;
}

.notification-panel li #mensaje {
    font-size: 13px;
    color: #7d7d7d;
    display: -webkit-box;
    /* Número máximo de líneas */
    /* -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; */
    line-height: 14px;
}

.notification-panel li .acciones-notificaciones span {
    position: absolute;
    bottom: 2px;
    font-size: 12px;
    color: #0099ff;
    cursor: pointer;
}

.notification-panel li .acciones-notificaciones #ver {
    left: 5px;
}

.notification-panel li .acciones-notificaciones #visto {
    right: 5px;
}

.notification-panel li .acciones-notificaciones span:hover {
    color: #0075c4;
}

@keyframes notificaciones-saturadas {
    0% {
        -webkit-transform: rotateZ(-5deg);
        border: 1px solid #4E342E;
        color: #4E342E;
    }

    50% {
        -webkit-transform: rotateZ(0deg) scale(.9);
    }

    100% {
        -webkit-transform: rotateZ(5deg);
        border: 1px solid #ff2525;
        color: #ff2525;
    }
}

.campana-notificaciones.sobrecarga>i {
    animation-name: notificaciones-saturadas;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.campana-notificaciones .numero-notificaciones {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    color: #fff;
    background: red;
    border-radius: 100%;
    width: 16px;
    height: 16px;
    font-size: 11px;
    bottom: -3px;
    right: -3px;
}

/********************************** NOTIFICACIONES (FINAL) ***********************************/

/*--------------------------------- EXTRAS (FINAL) --------------------------------------------*/
@media (max-width: 500px) {
    body {
        padding-top: 57px;
    }

    .menu {
        height: 57px;
        padding: 10px 20px;
    }

    .menu nav ul li {
        font-size: 18px;
    }

    .menu button {
        font-size: 10px;
    }

    body.catalogo {
        padding-top: 100px;
    }

    body.catalogo .menu-categorias {
        top: 66px;
        display: flex;
        padding: 10px;
        align-items: center;
        justify-content: space-between;
    }
}

@media (max-width: 600px) {

    /*--- MODALES (INICIO) ----*/
    .contenido-modal {
        flex-direction: column;
        max-height: 90%;
    }

    .catalogo section.contenedor h2 {
        font-size: 30px;
    }

    .no-overflow .productos {
        justify-content: center;
    }

    .no-overflow .productos .producto {
        width: 85%;
        height: 450px;
    }

    .no-overflow .productos .producto .contenedor-foto {
        max-height: 400px;
    }

    /*--- MODALES (FINAL) ----*/
}

/*ANIMACIÓN AL INICIAR PÁGINA*/
.animated-div {
    opacity: 0;
    transform: translateY(-100px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.animated-div.visible {
    opacity: 1;
    transform: translateY(0);
}

.animated-col {
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.from-left {
    transform: translateX(-100px);
}

.from-right {
    transform: translateX(100px);
}

.from-top {
    transform: translateY(100px);
}

.animated-col.visible {
    opacity: 1;
    transform: translateX(0);
}

.from-top.visible {
    transform: translateY(0);
}

.opciones-celular-header {
    display: flex;
    flex: 1;
    justify-content: end;
}

#sesionCelular {
    font-size: 12px;
    width: fit-content;
}

#sesionCelular a {
    color: #000;
}



.img-perfil {
    width: 38px;
    height: 38px;
    overflow: hidden;
    display: flex;
    /* centra horizontalmente */
    justify-content: center;
    /* centra verticalmente */
    align-items: center;
    border-radius: 100%;
    outline: 1px solid #fff;
    border: 1px solid #404040;
    cursor: pointer;
}

.img-perfil img {
    width: 100%;
    height: 100%;
    /* recorta el exceso y mantiene centrado */
    object-fit: cover;
    /* asegura que se mantenga centrada */
    object-position: center;
}


/*********************************** MENÚ SESIÓN (INICIO) ***********************************/
.dropdown-account {
    position: fixed;
    right: 10px;
    top: 63px;
    width: 240px;
    background-color: #FFF;
    border-radius: 12px;
    border: 1px solid #E9ECEF;
    font-size: 14px;
    display: none;
    z-index: 8000;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px 0px;
}

.account-header {
    background: #f6f6f6;
    padding: 12px 20px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom: 1px solid #E9ECEF;
}

.account-header .rol {
    color: #6C757D;
    font-size: 13px;
    margin-bottom: 3px;
}

.account-header .usuario {
    color: #173F5F;
    font-weight: bold;
}

.account-items {
    padding: 3px;
}

.account-item {
    padding: 10px 20px;
    color: #173F5F;
    display: flex;
    border-radius: 12px;
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
    text-decoration: none;
}

.account-item:hover {
    color: #000;
    background-color: #EAF3F8;
}

.icon-account svg {
    width: 16px;
    height: 16px;
    margin-right: 12px;
    fill: #173F5F;
}

/*********************************** MENÚ SESIÓN (FINAL) ***********************************/

/********************************** CARRITO (INICIO) ***********************************/
.btn-carrito {
    margin-right: 10px;
    border-radius: 100%;
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.btn-carrito:hover {
    background-color: #d3d3d3;
}

.numero-productos {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    color: #fff;
    background: red;
    border-radius: 100%;
    width: 16px;
    height: 16px;
    font-size: 11px;
    bottom: 0;
    right: 0;
}

.btn-carrito svg {
    width: 20px;
}

@media (max-width: 980px) {

    #btnCarrito,
    #navbarContenido #usuario {
        display: none;
    }

}



.contenedor-carrito {
    width: 100vw;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: end;
    display: none;
    z-index: 3000;
}

.obstaculo-carrito {
    background-color: rgba(0, 0, 0, .5);
    position: absolute;
    width: 100%;
    height: 100dvh;
    top: 0;
    left: 0;
    cursor: pointer;
}

.carrito {
    background-color: #fff;
    height: 100%;
    width: 400px;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

@media (max-width: 650px) {
    .carrito {
        width: 100%;
    }

    .oculto-celular {
        display: none !important;
    }
}

.header-carrito {
    padding: 16px;
    display: flex;
    align-items: center;
}

.header-carrito .btn-close {
    margin-left: auto;
}

.body-carrito {
    display: flex;
    flex-direction: column;
    padding: 16px;
    flex: 1;
    overflow-y: auto;
}

.carrito-item {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid #eee;
}

.carrito-item:first-child {
    border-top: none;
}

.superior-carrito-item {
    display: flex;
}

.superior-carrito-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    cursor: zoom-in;
    -o-transition: transform .3s ease;
    -moz-transition: transform .3s ease;
    -webkit-transition: transform .3s ease;
    transition: transform .3s ease;
}

.superior-carrito-item img:hover {
    transform: scale(1.1);
}

.titulo-item {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.descripcion-item {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
    color: #555;
}

.superior-carrito-item .btn {
    height: fit-content;
    background: aliceblue;
    margin: auto;
}

.superior-carrito-item .btn:hover {
    background: #e2eaf0;
}


.inferior-carrito-item {
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
}

.oferta-item span {
    text-decoration: line-through;
    font-size: 12px;
}

.oferta-item strong {
    color: #198754;
}


.footer-carrito {
    padding: 16px;
}

.superior-footer-carrito {
    border-top: 1px solid #eee;
}

.medio-footer-carrito {
    border-top: 1px solid #eee;
}

/********************************** CARRITO (FINAL) ***********************************/




/*--------------------------------- TABLA (INICIO) --------------------------------------------*/
.filtros-tabla {
    display: flex;
    justify-content: space-between;
}

.filtros-tabla #registrosPorPagina {
    display: flex;
    align-items: center;
    /* height: fit-content; */
}

.filtros-tabla #registrosPorPagina select {
    width: auto;
    border: none;
    border-bottom: 2px solid #464646;
    border-radius: 0;
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

/* 
#contenedorBuscadorTabla #input-buscador {
    padding-right: 0;
} */

#registrosPorPagina #select-columna {
    padding-left: 0;
    position: relative;
}

#registrosPorPagina #iconosAcciones i {
    cursor: pointer;
    font-size: 20px;
    color: #1e1e42;
    margin-left: 5px;
    margin-right: 5px;
}

#registrosPorPagina #iconosAcciones i:hover {
    color: #414177;
}

#contenedorBuscadorTabla #select-columna .form-select {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    background: var(--color-2);
}

#contenedorBuscadorTabla #select-columna .fa-angle-right {
    position: absolute;
    right: 15px;
    bottom: calc(50% - 6px);
    transform: rotate(90deg);
}

#contenedorBuscadorTabla #select-columna .form-select:focus {
    background: #b16917;
    color: #fff;
}

.contenedor-tabla {
    overflow: auto;
    max-height: 70vh;
    margin-top: 5px;
}

.contenedor-tabla thead th {
    position: sticky;
    top: 0;
}

table {
    border-collapse: collapse;
    width: 100%;
}

.tabla-con-lineas-derecha table tr td {
    border-right: 1px solid var(--color-2);
}

.tabla-con-lineas-derecha table tr td:last-child {
    border-right: none;
}

table tr {
    border-bottom: 1px solid var(--color-2);
}

table th {
    color: #ffffff;
    background: #464646;
    padding: 5px 10px;
    text-align: left;
    position: relative;
    font-weight: 600;
    white-space: nowrap;
    font-size: 1rem;
}

tbody,
td,
tfoot,
th,
thead,
tr {
    font-size: 1rem;
    font-weight: 500;
}

table thead th:first-child {
    text-align: center;
}

table th i {
    position: absolute;
    top: 1px;
    right: 1px;
    font-size: .8rem;
    display: none !important;
}

table th.asc i[data-orden='asc'] {
    display: block !important;
}

table th.desc i[data-orden='desc'] {
    display: block !important;
}

table thead:last-child {
    border: none;
}

table td div:not(div.btn-checkbox) {
    white-space: nowrap;
    padding: 0px 10px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    /* text-align: center; */
}

table td.td-acciones {
    white-space: nowrap;
    padding: 3px 10px;
    text-align: center;
}

table td.td-acciones i {
    margin-left: 5px;
    margin-right: 5px;
    cursor: pointer;
    font-size: 1.2rem;
    color: #464646;
}

table td.td-acciones i:hover {
    color: #151515;
}

table td.td-acciones button i {
    color: #fff;
}

table td.td-acciones i.fa-trash-can,
table td.td-acciones i.fa-ban,
table td.td-acciones i.fa-file-pdf {
    color: #ff2525;
}

table td.td-acciones i.fa-location-dot {
    color: #fb9537;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, .1);
}

table td.td-acciones i.fa-location-dot:hover {
    color: #da7f2b;
}

table td.td-acciones i.fa-trash-can:hover,
table td.td-acciones i.fa-ban:hover,
table td.td-acciones i.fa-file-pdf:hover {
    color: #bb1f1f;
}

table thead:last-child {
    border: none;
}

table tbody tr:nth-child(2n),
table tbody tr:nth-child(2n) td.td-acciones {
    background: #fff;
}

table tbody tr:nth-child(2n + 1),
table tbody tr:nth-child(2n + 1) td.td-acciones {
    background: color-mix(in srgb, var(--color-1) 20%, white);
}

table tbody tr:hover,
table tbody tr:hover td.td-acciones {
    background: color-mix(in srgb, var(--color-2) 30%, white);
}

.contenedor-paginado {
    display: flex;
    justify-content: space-between;
}

.contenedor-paginado .paginado {
    display: flex;
    justify-content: end;
}

.contenedor-paginado .paginado button {
    background-color: transparent;
    padding: 5px;
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--color-2) 30%, white);
}

.contenedor-paginado .paginado button.deshabilitado {
    color: var(--bs-border-color);
}

.contenedor-paginado .paginado button:hover:not(.deshabilitado) {
    background-color: color-mix(in srgb, var(--color-2) 40%, white);
    color: #fff;
}

.contenedor-paginado .paginado button.pagina-puntos {
    background-color: transparent;
}

.contenedor-paginado .paginado button.pagina-actual {
    background-color: color-mix(in srgb, var(--color-2) 20%, white);
    color: #fff;
}

/*--------------------------------- TABLA (FINAL) --------------------------------------------*/


/*--------------------------------- DROPZONE (INICIO) --------------------------------------------*/
.contenedor-dropzone {
    border: 1px solid #4E342E;
    padding: 0px 10px 10px 10px;
    border-radius: 3px;
}

.contenedor-dropzone h2 {
    color: #fff;
    background: #464646;
    padding: 2px 10px;
    margin: 0px -10px 10px -10px;
    font-size: 16px;
    text-align: center;
}

.dropzone {
    /* max-width: 90%; */
    min-width: 300px;
    height: 200px;
    border: 2px dashed #ccc;
    text-align: center;
    font-size: 20px;
    color: #999;
    background-image: url('../img/fondo-dropZone.png');
    background-size: 150px 150px;
    background-position: center center;
    background-repeat: no-repeat;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    cursor: pointer;
}

.dropzone.dragover {
    border-color: #00bfff;
    color: #00bfff;
}

.dropzone .iconos-miniaturas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* z-index: 2; */
}

.dropzone .iconos-miniaturas .icono-miniatura {
    width: 180px;
    height: 180px;
    position: relative;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dropzone .iconos-miniaturas .icono-miniatura .extension-file {
    position: absolute;
    left: 10px;
    background: #000;
    color: #fff;
    padding: 0px 5px;
    border: 4px solid #000;
    border-radius: 5px;
    font-weight: 600;
    top: 50px;
    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}

.dropzone .iconos-miniaturas .icono-miniatura i {
    position: absolute;
    top: 5px;
    right: 5px;
    /* z-index: 2; */
    line-height: auto;
    color: red;
    background-color: #fff;
    border-radius: 100%;
    cursor: pointer;
    -o-transition: transform .3s ease;
    -moz-transition: transform .3s ease;
    -webkit-transition: transform .3s ease;
    transition: transform .3s ease;
    transform: rotate(0deg) scale(1);
    -webkit-transform: rotate(0deg) scale(1);
}

.dropzone .iconos-miniaturas .icono-miniatura i:hover {
    transform: rotate(90deg) scale(1.3);
    -webkit-transform: rotate(90deg) scale(1.3);
}

.dropzone .iconos-miniaturas .icono-miniatura img {
    width: 100%;
    border-radius: 5px;
}

.dropzone .iconos-miniaturas .icono-miniatura img:hover~.nombre-imagen {
    display: block;
}

.dropzone .iconos-miniaturas .icono-miniatura .nombre-imagen {
    position: absolute;
    margin: auto;
    background: rgba(255, 255, 255, .5);
    display: none;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    color: black;
    padding: 5px;
    white-space: nowrap;
}

/*--------------------------------- DROPZONE (FINAL) --------------------------------------------*/

/*********************************** ALERTAS (INICIO) ***********************************/
/* Contenedor general de notificaciones */
.notifications {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
}

/* Estilo de cada notificación */
.notification {
    background: #ffffff;
    color: #333;
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 250px;
    max-width: 320px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.4s, transform 0.4s;
    cursor: default;
    cursor: pointer;
}

.notification.verde {
    border-left: 10px solid #36ff20ff;
}

.notification.roja {
    border-left: 10px solid #ff2020;
}

/* Cuando aparece */
.notification.show {
    opacity: 1;
    transform: translateX(0);
}

.notification.show:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transform: translateX(0) scale(1.02);

}

/*********************************** ALERTAS (FINAL) ***********************************/

/********************************** MENÚ INFERIOR (INICIO) ***********************************/
.bottom-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--color-1);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 0;
    z-index: 2000;
}

.menu-item {
    color: white;
    text-align: center;
    flex: 1;
    transition: transform 0.2s ease, color 0.2s ease;
    text-decoration: none;
}

.menu-item i {
    font-size: 18px;
    display: block;
    margin-bottom: 3px;
}

.menu-item span {
    font-size: 13px;
    letter-spacing: 0.5px;
}

.menu-item:hover {
    transform: translateY(-4px);
    color: #fffbe7;
}

.menu-item.active {
    color: #fffbe7;
    font-weight: bold;
}

/********************************** MENÚ INFERIOR (FINAL) ***********************************/


/********************************** SWITCH BUTTON (INICIO) ***********************************/
.switch-container {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: sans-serif;
    width: fit-content;
    margin-left: auto;
}

/* Oculta el checkbox original */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Fondo del switch */
.slider {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    background-color: #ccc;
    border-radius: 26px;
    transition: background-color 0.3s;
    cursor: pointer;
}

/* Círculo interior */
.slider::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    top: 3px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

/* Cuando está activado */
.switch-container input:checked+.slider {
    background-color: #4CAF50;
}

.switch-container input:checked+.slider::before {
    transform: translateX(24px);
}

.switch-container .texto {
    user-select: none;
    cursor: pointer;
}

/********************************** SWITCH BUTTON (FINAL) ***********************************/

/********************************** PANTALLA CARGA (INICIO) ***********************************/
.loader-container {
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    top: 0;
}

.loader-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #ffffff;
    z-index: -2;
}

.loader {
    width: 80px;
    height: 80px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(farthest-side, #223038 94%, #0000) top/8px 8px no-repeat,
        conic-gradient(#0000 30%, #223038);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
    animation: l13 1s infinite linear;
}

@keyframes l13 {
    100% {
        transform: rotate(1turn)
    }
}

/********************************** PANTALLA CARGA (FINAL) ***********************************/

.mi-ubicacion-mapa {
    position: absolute;
    top: 10px;
    z-index: 1000;
    right: 10px;
    border: 2px solid rgba(0, 0, 0, 0.4);
    background-color: #fff;
    padding: 4px;
    border-radius: 4px;
}

.mi-ubicacion-mapa:hover {
    background-color: #f4f4f4;
}

.carrito-item #ms-error {
    color: #ff7373;
    font-size: 13px;
}

.modal-content #ms-error {
    position: absolute;
    top: -16px;
    left: -9px;
    font-size: 12px;
    background-color: #ffffff94;
    padding: 8px 20px;
    border-top-left-radius: 10px;
    display: inline-block;
    margin-top: 1rem;
    font-family: "Poppins", serif;
    font-weight: bold;
    overflow-wrap: break-word;
    text-align: center;
    line-height: 1.2;
    margin-left: 10px;
    margin-right: 10px;
    border-bottom-right-radius: 10px;
    z-index: 3;
}

@media (min-width: 992px) {
    .opciones-celular-header {
        display: none !important;
    }

    #searchCelular {
        display: none !important;
    }

    .bottom-menu {
        display: none;
    }
}

@media (max-width: 992px) {

    .margin-bottom-celular {
        padding-bottom: 80px !important;
    }

    .nav-item {
        margin: 10px;
        text-align: center;
    }

    .contenedor-me-interesa {
        display: flex;
    }

    .btn-me-interesa {
        margin: auto !important;
    }

    #search,
    #sesion {
        display: none !important;
    }

    .ocultar-celular {
        display: none !important;
    }
}