/* ===================================================
   PROYECTO TECNOLOGIA / EstilosFarmacia / style.css
   PharmaCity - Diseño tipo farmacia ecommerce
=================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#f5f6fa;
    color:#222;
}

/* ==========================================
   BARRAS SUPERIORES
========================================== */

.top-bar{
    background:#1f2b63;
    color:#fff;
    text-align:center;
    padding:10px;
    font-size:14px;
    font-weight:bold;
}

/* REEMPLAZA SOLO .info-bar Y AGREGA ESTO */

/* ==========================================
   BARRA GRIS SUPERIOR
========================================== */

.info-bar{
    background:#8f95a8;
    color:#ffffff;
    padding:8px 26px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}

/* texto centro */

.info-center{
    flex:1;
    text-align:center;
    font-size:14px;
    font-weight:600;
}

/* botón 24h */

.btn-farmacia24{
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    padding:10px 18px;
    display:flex;
    align-items:center;
    gap:14px;
    min-width:235px;
    cursor:pointer;
    transition:.3s;
}

.btn-farmacia24:hover{
    background:rgba(255,255,255,.18);
}

/* círculo rojo */

.btn-farmacia24-icono{
    width:34px;
    height:34px;
    border-radius:50%;
    background:#ef233c;
    color:#ffffff;
    font-size:12px;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* texto */

.btn-farmacia24 span{
    font-size:15px;
    font-weight:700;
    color:#ffffff;
}

/* flecha */

.btn-farmacia24 i{
    margin-left:auto;
    color:#ffffff;
    font-size:15px;
}

/* responsive */

@media(max-width:768px){

    .info-bar{
        justify-content:center;
        padding:10px;
    }

    .info-center{
        width:100%;
        order:2;
        font-size:12px;
    }

    .btn-farmacia24{
        min-width:auto;
        width:100%;
        max-width:280px;
    }

}

/* REEMPLAZA TODO TU BLOQUE HEADER POR ESTE */

/* ==========================================
   HEADER
========================================== */

.header{
    background:#ffffff;
    padding:14px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    flex-wrap:nowrap;
}

/* logo */
.logo{
    width:210px;
    min-width:210px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.logo img{
    width:175px;
    height:auto;
    object-fit:contain;
    display:block;
}

@media(max-width:768px){

    .header{
        padding:10px;
        flex-direction:column;
        gap:10px;
    }

    .logo img{
        width:150px;
    }

    .menu-box{
        width:90%;
        justify-content:center;
        font-size:13px;
        padding:10px;
    }

    .icons{
        justify-content:center;
        gap:20px;
    }

}
/* MENÚ PRODUCTOS */

.menu-box{
    display:flex;
    align-items:center;
    gap:10px;
    border:2px solid #16b9ef;
    padding:12px 18px;
    border-radius:8px;
    cursor:pointer;
    color:#1f2b63;
    font-weight:bold;
    font-size:14px;
}

.menu-box i{
    font-size:18px;
}

/* ====== EMERSON =====??????????????=============================================== */

/* ================================
   PANEL DINÁMICO TIPO FYBECA PRO
================================ */

.panel-contenido{
    position:fixed;
    top:105px;
    left:320px;
    width:calc(100% - 340px);
    min-height:430px;
    background:#ffffff;
    z-index:9998;
    box-shadow:0 12px 30px rgba(0,0,0,.18);
    padding:32px;
    display:none;
    opacity:0;
    transform:translateX(25px);
    transition:all .35s ease;
}

.panel-contenido.active{
    display:block;
    opacity:1;
    transform:translateX(0);
    animation:panelEntrada .35s ease;
}

@keyframes panelEntrada{
    from{
        opacity:0;
        transform:translateX(30px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

.panel-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:3px solid #16b9ef;
    padding-bottom:14px;
    margin-bottom:22px;
}

.panel-header h2{
    color:#1f2b63;
    font-size:25px;
    font-weight:800;
}

.panel-header button{
    border:none;
    background:#f0342c;
    color:white;
    width:34px;
    height:34px;
    border-radius:50%;
    font-size:24px;
    cursor:pointer;
}

.panel-subcategorias{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:12px;
    margin-bottom:28px;
}

.panel-subcategorias span{
    background:#f1f5fb;
    color:#1f2b63;
    padding:12px;
    border-radius:8px;
    font-weight:700;
    text-align:center;
    transition:.3s;
}

.panel-subcategorias span:hover{
    background:#16b9ef;
    color:#ffffff;
    transform:translateY(-3px);
}

.panel-productos{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:20px;
}

.panel-producto{
    background:#ffffff;
    border-radius:14px;
    padding:16px;
    text-align:center;
    box-shadow:0 5px 15px rgba(0,0,0,.10);
    transition:.3s;
}

.panel-producto:hover{
    transform:translateY(-8px);
}

.panel-producto img{
    width:120px;
    height:120px;
    object-fit:contain;
    margin-bottom:12px;
}

.panel-producto h3{
    font-size:15px;
    color:#1f2b63;
    min-height:40px;
}

.panel-producto p{
    color:#f0342c;
    font-size:20px;
    font-weight:800;
    margin:10px 0;
}

.panel-producto button{
    background:#1f2b63;
    color:white;
    border:none;
    padding:10px 16px;
    border-radius:20px;
    cursor:pointer;
    font-weight:bold;
}

.panel-producto button:hover{
    background:#f0342c;
}

/* RESPONSIVE */

@media(max-width:768px){
    .panel-contenido{
        left:0;
        top:150px;
        width:100%;
        min-height:auto;
        max-height:75vh;
        overflow-y:auto;
    }

    .panel-subcategorias{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media(max-width:600px){
    .panel-subcategorias{
        grid-template-columns:1fr;
    }
}

/* ==================================================
EMERSON
================================================== */




/* REEMPLAZA TODO ESE BLOQUE POR ESTE */

/* ==================================================
   MENU FYBECA + PANEL LATERAL CORREGIDO
================================================== */

.menu-container{
    position:relative;
    z-index:9999;
}

/* ==================================================
   MENU FIJO A LA IZQUIERDA AL ABRIR
   REEMPLAZA SOLO .menu-dropdown
================================================== */

/* REEMPLAZA SOLO .menu-dropdown */

.menu-dropdown{
    position:fixed;
    top:0;
    left:0;
    width:320px;
    height:100vh;
    padding-top:71px;   /* deja espacio header */
    overflow-y:auto;
    background:#255cae;
    box-shadow:8px 0 18px rgba(0,0,0,.18);
    display:none;
    z-index:9999;
}

/* Mostrar menú */
.menu-container.active .menu-dropdown{
    display:block;
}

/* Items */
.menu-dropdown a{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:18px 20px;
    color:#ffffff;
    text-decoration:none;
    font-size:15px;
    font-weight:500;
    border-bottom:1px solid rgba(255,255,255,.05);
    transition:.25s;
}

/* Iconos */
.menu-dropdown a i{
    width:24px;
    font-size:16px;
    color:#d7f4ff;
}

/* Flecha */
.menu-dropdown a::after{
    content:"›";
    font-size:24px;
    color:#ffffff;
    margin-left:auto;
}

/* Hover */
.menu-dropdown a:hover{
    background:#eef1f5;
    color:#12bff0;
}

.menu-dropdown a:hover i,
.menu-dropdown a:hover::after{
    color:#12bff0;
}

/* ==================================================
   PANEL DERECHO BLANCO
================================================== */

.menu-dropdown a .submenu{
    position:fixed;
    top:106px;
    left:325px;
    width:calc(100vw - 340px);
    height:560px;
    background:#ffffff;
    display:none;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    overflow:hidden;
    z-index:9998;
}

/* Mostrar panel */
.menu-dropdown a:hover .submenu{
    display:block;
}

/* Imagen */
.submenu img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Responsive */
@media(max-width:768px){

    .menu-dropdown{
        width:100%;
        left:0;
    }

    .menu-dropdown a .submenu{
        display:none !important;
    }
}

/* PEGAR AL FINAL DE style.css */

/* Últimos 2 items blancos */

.menu-dropdown a:nth-last-child(2),
.menu-dropdown a:last-child{
    background:#ffffff;
    color:#111111;
}

.menu-dropdown a:nth-last-child(2) i,
.menu-dropdown a:last-child i,
.menu-dropdown a:nth-last-child(2)::after,
.menu-dropdown a:last-child::after{
    color:#18b8ee;
}

/* Hover */
.menu-dropdown a:nth-last-child(2):hover,
.menu-dropdown a:last-child:hover{
    background:#f2f4f7;
    color:#18b8ee;
}


/* Scroll */
.menu-dropdown::-webkit-scrollbar{
    width:8px;
}

.menu-dropdown::-webkit-scrollbar-track{
    background:#1e4c92;
}

.menu-dropdown::-webkit-scrollbar-thumb{
    background:#8aa9db;
    border-radius:10px;
}

/* Móvil */
@media(max-width:768px){

    .menu-dropdown{
        width:100%;
        left:0;
        top:58px;
        height:430px;
    }

}
/* BUSCADOR */

.search-box{
    flex:1;
    position:relative;
    display:flex;
    min-width:280px;
    max-width:620px;
}

.search-box input{
    width:100%;
    border:none;
    background:#f1f1f1;
    padding:14px 18px;
    border-radius:30px 0 0 30px;
    outline:none;
}

.search-box button{
    width:55px;
    border:none;
    background:#16b9ef;
    color:#fff;
    border-radius:0 30px 30px 0;
    cursor:pointer;
    font-size:18px;
}

/* ICONOS */

.icons{
    display:flex;
    gap:18px;
}

.icons a{
    text-decoration:none;
    color:#16b9ef;
    font-size:24px;
}

/* ==========================================
   CARRUSEL
========================================== */

/* REEMPLAZA SOLO BLOQUE DEL CARRUSEL */

.slider{
    position:relative;
    width:100%;
    height:385px;   /* mismo estilo Fybeca */
    overflow:hidden;
    /*background:#f5f5f5;*/
    background:#f4f4f4;
}

.slides{
    width:100%;
    height:100%;
    display:none;
}

.slides img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    display:block;
    background:#ffffff;
}

/* tablet */
@media(max-width:992px){

    .slider{
        height:300px;
    }

}

/* móvil */
@media(max-width:768px){

    .slider{
        height:auto;
        min-height:auto;
        border-radius:0;
    }

    .slides img{
        object-fit:contain;
        height:auto;
    }

}
/* Flechas */

.prev,
.next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,.45);
    color:#fff;
    border:none;
    width:45px;
    height:45px;
    border-radius:50%;
    cursor:pointer;
    font-size:22px;
    z-index:5;
}

.prev{
    left:15px;
}

.next{
    right:15px;
}

.prev:hover,
.next:hover{
    background:#f0342c;
}

/* Animación */

.fade{
    animation:fadeEffect 1s;
}

@keyframes fadeEffect{
    from{opacity:.4;}
    to{opacity:1;}
}

/* REEMPLAZA TODO ESE BLOQUE POR ESTE */

/* ==========================================
   SECCION GENERAL HOME
========================================== */

/* REEMPLAZA SOLO EL FONDO GENERAL */

.home-secciones{
    background-image:url("../ImgFarmacia/fondo-categoria.png");
    background-size:100% auto;     /* mostrar completa */
    background-position:center top;
    background-repeat:repeat-y;
    background-color:#f8f8f8;
    padding:30px 35px 50px;
}

/* ==========================================
   TITULOS
========================================== */

.titulo-home{
    text-align:center;
    font-size:38px;
    font-weight:800;
    color:#11bde9;
    margin:35px 0 28px;
}

.titulo-home.naranja{
    color:#ff7a00;
    text-align:left;
    font-size:32px;
}

/* ==========================================
   CATEGORÍAS
========================================== */

.categorias{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:20px;
}

.card-cat{
    background:rgba(255,255,255,.88);
    border-radius:15px;
    padding:28px;
    text-align:center;
    box-shadow:0 4px 10px rgba(0,0,0,.08);
    transition:.3s;
    border:2px solid #d8d800; /* base */

}
/* colores variados */
.card-cat:nth-child(1){
    border-color:#d6d800; /* amarillo */
}

.card-cat:nth-child(2){
    border-color:#c4cf00; /* verde limón */
}

.card-cat:nth-child(3){
    border-color:#bfe8f6; /* celeste */
}

.card-cat:nth-child(4){
    border-color:#d6d800; /* amarillo */
}

.card-cat:nth-child(5){
    border-color:#bfe8f6; /* celeste */
}

.card-cat:nth-child(6){
    border-color:#ffc857; /* naranja suave */
}

.card-cat:nth-child(7){
    border-color:#8ee3ff; /* azul claro */
}

.card-cat:nth-child(8){
    border-color:#d6d800;
}
.card-cat:hover{
    transform:translateY(-6px);
}

.card-cat i{
    font-size:34px;
    color:#f0342c;
    margin-bottom:12px;
}

.card-cat p{
    font-weight:bold;
    color:#1f2b63;
    font-size:18px;
}

/* BLOQUE GENERAL */
.bloque-ofertas{
    padding:30px 35px;
}

/* TITULO */
.titulo-home{
    text-align:center;
    font-size:28px;
    color:#12b8e8;
    margin-bottom:25px;
    font-weight:800;
}

/* 3 ARRIBA */
.ofertas-slider{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-bottom:18px;
}

.ofertas-track{
    position:relative;
    height:150px;
    overflow:hidden;
    border-radius:10px;
}

.ofertas-track img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    opacity:0;
    animation:fadeBanner 8s infinite;
}

.ofertas-track img:nth-child(1){animation-delay:0s;}
.ofertas-track img:nth-child(2){animation-delay:4s;}

/* 6 ABAJO */
.grid-banners-fijos{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.grid-banners-fijos img{
    width:100%;
    height:300px;          /* más grande */
    object-fit:cover;      /* llena el cuadro */
    border-radius:10px;
}
.grid-banners-fijos img:hover{
    transform:scale(1.03);
    transition:.3s;
} 

/* ANIMACION */
@keyframes fadeBanner{
    0%{opacity:0;}
    10%{opacity:1;}
    45%{opacity:1;}
    55%{opacity:0;}
    100%{opacity:0;}
}

/* CELULAR */
@media(max-width:768px){

    .ofertas-slider{
        grid-template-columns:1fr;
    }

    .grid-banners-fijos{
        grid-template-columns:repeat(2,1fr);
    }

    .ofertas-track,
    .grid-banners-fijos img{
        height:120px;
    }
}
/* ==========================================
   PRODUCTOS
========================================== */

.productos{
    padding-top:45px;
}

.productos h2{
    text-align:center;
    font-size:42px;
    color:#1f2b63;
    margin-bottom:30px;
}

.grid-productos{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
}

.producto{
    background:rgba(255,255,255,.92);
    border-radius:15px;
    padding:20px;
    text-align:center;
    box-shadow:0 4px 10px rgba(0,0,0,.08);
    transition:.3s;
}

.producto:hover{
    transform:translateY(-5px);
}

.producto img{
    width:150px;
    height:150px;
    object-fit:contain;
    margin-bottom:15px;
}

.producto h3{
    font-size:18px;
    margin-bottom:10px;
}

.producto span{
    display:block;
    color:#f0342c;
    font-size:24px;
    font-weight:bold;
    margin-bottom:15px;
}

.producto button{
    width:100%;
    border:none;
    background:#ff8a00;
    color:#fff;
    padding:12px;
    border-radius:30px;
    cursor:pointer;
    font-weight:bold;
}

.producto button:hover{
    background:#f0342c;
}
/* ==========================================
   CARRUSEL PRODUCTOS (NUEVO)
========================================== */

.productos-slider{
    position:relative;
    overflow:hidden;
    width:100%;
    padding:0 40px; /* espacio para flechas */

}

.productos-track{
    display:flex;
    gap:20px;
    transition:transform .4s ease;
    width:max-content;
    will-change: transform; /* 👈 agrega esto */

}

/* reutiliza tu .producto pero adapta */
.productos-track .producto{
    min-width:250px;
    flex-shrink:0;
}

/* botones */
.prod-prev,
.prod-next{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    position:absolute;
    top:40%;
    transform:translateY(-50%);
    width:40px;
    height:40px;
    border:none;
    border-radius:50%;
    background:rgba(0,0,0,.4);
    color:#fff;
    cursor:pointer;
    z-index:10;
}

.prod-prev{ left:5px; }
.prod-next{ right:5px; }

/* ==========================================
   BLOQUES
========================================== */

.fila-bloques{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:20px;
    margin-bottom:35px;
}

.banner-hover{
    position:relative;
    overflow:hidden;
    border-radius:12px;
    height:250px; /* 🔥 controla el tamaño aquí */
}

.banner-hover img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .4s ease;
}
.banner-hover .overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.4);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:bold;
    opacity:0;
    transition:.3s;
}

.banner-hover:hover img{
    transform:scale(1.08);
}

.banner-hover:hover .overlay{
    opacity:1;
}

.ver-mas{
    background:#ef321d;
    color:#fff;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:20px;
    font-size:22px;
    font-weight:800;
}

/* ==========================================
   BENEFICIOS
========================================== */

.beneficios-home{
    padding-top:45px;
    position:relative;
}

.beneficios-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    text-align:center;
}

.beneficio i{
    font-size:38px;
    color:#11bde9;
    margin-bottom:10px;
}

.beneficio p{
    font-weight:bold;
    color:#1f2b63;
}
.beneficios-home .titulo-home{
    margin:0 0 35px;
    padding-left:520px;   /* mueve texto a la derecha */
    text-align:left;
}
/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:768px){

    .home-secciones{
        padding:20px 15px 35px;
    }

    .categorias,
    .grid-productos,
    .beneficios-grid,
    .ofertas-track{
        grid-template-columns:1fr;
    }

    .fila-bloques{
        grid-template-columns:1fr;
    }

    .titulo-home,
    .productos h2{
        font-size:28px;
    }

    .titulo-home.naranja{
        text-align:center;
        font-size:25px;
    }

}
/* ==========================================
   FOOTER
========================================== */

.footer{
    background:#2f5ea3;
    color:#fff;
    margin-top:50px;
}

/* TOP */
.footer-top{
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr 1fr;
    gap:80px;
    padding:55px 60px;
    max-width:1400px;
    margin:auto;
}

/* COLUMNAS */
.footer-col h4{
    font-size:28px;
    margin-bottom:20px;
    font-weight:700;
    position:relative;
}

.footer-col h4::after{
    content:"";
    display:block;
    width:100%;
    height:2px;
    background:rgba(255,255,255,.7);
    margin-top:10px;
}

.footer-col a{
    display:block;
    color:#fff;
    margin-bottom:14px;
    text-decoration:none;
    font-size:18px;
    line-height:1.5;
}

.footer-col a:hover{
    text-decoration:underline;
}

/* LOGO */
.logo-footer{
    font-size:48px;
    font-weight:800;
    margin-bottom:25px;
}

.redes{
    display:flex;
    gap:15px;
    margin-top:20px;
}

.redes i{
    width:40px;
    height:40px;
    border-radius:50%;
    background:#ffffff;
    color:#2f5ea3;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}

/* PAGOS */
.pagos span{
    display:block;
    margin-bottom:8px;
    font-size:14px;
}

/* NEWSLETTER */
.footer-news{
    background:#7d89a6;
    padding:25px 40px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:30px;
    flex-wrap:wrap;
}

.footer-news h4{
    color:#fff;
    font-size:28px;
    font-weight:700;
}

.newsletter-box{
    display:flex;
    gap:15px;
}

.newsletter-box input{
    width:350px;
    height:48px;
    border:none;
    border-radius:30px;
    padding:0 20px;
}

.newsletter-box button{
    width:140px;
    height:48px;
    border:none;
    border-radius:30px;
    background:#ff8a00;
    color:#fff;
    font-weight:700;
}

@media(max-width:768px){

    .footer-top{
        grid-template-columns:1fr;
        gap:35px;
        padding:35px 25px;
        text-align:center;
    }

    .footer-news{
        flex-direction:column;
    }

    .newsletter-box{
        width:100%;
        flex-direction:column;
    }

    .newsletter-box input,
    .newsletter-box button{
        width:100%;
    }

    .redes{
        justify-content:center;
    }
}

/* COPY */
.footer-copy{
    text-align:center;
    padding:15px;
    font-size:13px;
    background:#1f2b63;
}
/* ==========================================
   RESPONSIVE TABLET
========================================== */

@media(max-width:992px){

    .header{
        justify-content:center;
    }

    .search-box{
        position:relative;
        order:4;
        width:100%;
        max-width:100%;
    }

    .slider{
        height:320px;
    }

}

/* ==========================================
   RESPONSIVE MÓVIL
========================================== */

@media(max-width:768px){

    .top-bar,
    .info-bar{
        font-size:12px;
        padding:8px;
    }

    .header{
        padding:18px;
        gap:12px;
    }

    .logo img{
        width:130px;
    }

    .menu-box{
        width:100%;
        justify-content:center;
    }

    .icons{
        width:100%;
        justify-content:center;
    }

    .search-box{
        width:100%;
    }

    .slider{
        height:220px;
    }

    .prev,
    .next{
        width:38px;
        height:38px;
        font-size:18px;
    }

    .categorias,
    .productos,
    .beneficios,
    .footer{
        padding:20px;
    }

    .productos h2{
        font-size:28px;
    }

}

/* ==========================================
   RESPONSIVE MINI CELULAR
========================================== */

@media(max-width:480px){

    .slider{
        height:180px;
    }

    .producto img{
        width:120px;
        height:120px;
    }

    .producto span{
        font-size:20px;
    }

}

/* PEGAR AL FINAL DE EstilosFarmacia/style.css */

/* ==========================================
   MODAL UBICACION
========================================== */

#mapaCobertura{
    width:100%;
    height:350px;
    border-radius:12px;
    margin-top:15px;
}
.modal-ubicacion{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.35);
    display:none;
    justify-content:center;
    align-items:flex-start;
    padding-top:20px;
    z-index:10000;
}

/* REEMPLAZA SOLO .modal-box */

.modal-box{
    width:660px;
    max-width:95%;
    max-height:92vh;
    background:#ffffff;
    border-radius:10px;
    overflow-y:auto;
    box-shadow:0 15px 30px rgba(0,0,0,.20);
}

/* Scroll bonito */
.modal-box::-webkit-scrollbar{
    width:8px;
}

.modal-box::-webkit-scrollbar-thumb{
    background:#255cae;
    border-radius:10px;
}

.modal-box::-webkit-scrollbar-track{
    background:#f1f1f1;
}

/* encabezado */

.modal-header{
    background:#255cae;
    color:#fff;
    padding:18px 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.modal-header h2{
    font-size:18px;
    font-weight:700;
}

.modal-header span{
    font-size:34px;
    cursor:pointer;
    line-height:1;
}

/* contenido */

.modal-body{
    padding:28px 40px 35px;
}

.modal-body p{
    color:#555;
    font-size:16px;
    line-height:1.5;
    margin-bottom:24px;
}

.modal-body label{
    display:block;
    font-weight:700;
    color:#1f2b63;
    margin-bottom:8px;
}

.modal-body select{
    width:100%;
    height:50px;
    border:none;
    background:#f2f2f2;
    border-radius:30px;
    padding:0 18px;
    margin-bottom:22px;
    outline:none;
    font-size:15px;
}

.modal-body h3{
    text-align:center;
    color:#666;
    font-size:17px;
    font-weight:500;
    margin:8px 0 20px;
}

.modal-body img{
    width:100%;
    max-width:360px;
    display:block;
    margin:auto;
    object-fit:contain;
}

/* responsive */

@media(max-width:768px){

    .modal-ubicacion{
        padding:10px;
        align-items:flex-start;
    }

    .modal-box{
        width:100%;
        max-width:100%;
        height:95vh;
        max-height:95vh;
        border-radius:0;
        margin:0;
    }

    .modal-header{
        padding:15px;
    }

    .modal-header h2{
        font-size:16px;
    }

    .modal-body{
        padding:15px;
    }

    .modal-body p{
        font-size:14px;
    }

    .modal-body select{
        height:45px;
        font-size:14px;
    }

    #mapaCobertura{
        height:280px;
    }

    .modal-cobertura-actions{
        flex-direction:column;
        gap:10px;
    }

    .modal-cobertura-save,
    .modal-cobertura-cancel{
        width:100%;
        max-width:none;
    }

}

/* PEGAR AL FINAL DE style.css */

/* ==========================================
   BOTONES MODAL COBERTURA
========================================== */

.modal-cobertura-actions{
    display:flex;
    justify-content:center;
    gap:18px;
    margin-top:28px;
    flex-wrap:wrap;
}

.modal-cobertura-cancel,
.modal-cobertura-save{
    border:none;
    padding:14px 34px;
    border-radius:35px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
    letter-spacing:.3px;
}

/* cancelar */

.modal-cobertura-cancel{
    background:#ffffff;
    color:#14b9ee;
    border:2px solid #14b9ee;
}

.modal-cobertura-cancel:hover{
    background:#14b9ee;
    color:#ffffff;
}

/* guardar */

.modal-cobertura-save{
    background:#14b9ee;
    color:#ffffff;
    min-width:210px;
}

.modal-cobertura-save:hover{
    background:#0b9fce;
}

/* responsive */

@media(max-width:768px){

    .modal-cobertura-actions{
        flex-direction:column;
        align-items:center;
    }

    .modal-cobertura-cancel,
    .modal-cobertura-save{
        width:100%;
        max-width:280px;
    }

}
/* PEGA AL FINAL DEL CSS */
/* FORZAR NUEVO TAMAÑO HEADER */

header.header{
    height:auto !important;
    min-height:auto !important;
    padding:8px 25px !important;
    display:flex;
    align-items:center;
}

/* logo */
header.header .logo{
    width:180px !important;
    min-width:180px !important;
}

header.header .logo img{
    width:150px !important;
    max-height:70px !important;
    object-fit:contain;
}

/* buscador más centrado */
header.header .search-box{
    margin:0;
}
.modal-login{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

/* SOLO AJUSTES DEL LOGIN */
.login-page{
    background:#f5f6f8;
    padding:60px 20px;
}

.login-container{
    max-width:1000px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
}

.login-form,
.login-beneficios{
    background:#fff;
    padding:30px;
    border-radius:15px;
    box-shadow:0 4px 10px rgba(0,0,0,.08);
}

.login-form h3,
.login-beneficios h3{
    color:#1f2b63;
    margin-bottom:20px;
    border-bottom:2px solid #2a4fbf;
    padding-bottom:10px;
}

.login-form input{
    width:100%;
    padding:12px;
    margin-bottom:12px;
    border-radius:20px;
    border:none;
    background:#f0f0f0;
}

.links{
    font-size:14px;
    margin:10px 0;
}

.links span{
    color:#2a4fbf;
    cursor:pointer;
}

.btn-login{
    width:100%;
    padding:14px;
    border:none;
    border-radius:25px;
    background:#ff8a00;
    color:#fff;
    font-weight:bold;
    cursor:pointer;
}

.btn-login:hover{
    background:#f0342c;
}

.login-beneficios ul{
    padding-left:18px;
}

.login-beneficios li{
    margin-bottom:8px;
}

.btn-crear{
    margin-top:20px;
    width:100%;
    padding:12px;
    border-radius:25px;
    border:2px solid #2a4fbf;
    background:#fff;
    color:#2a4fbf;
    font-weight:bold;
}

@media(max-width:768px){
    .login-container{
        grid-template-columns:1fr;
    }
}
/* ========================================= */
/* ESTILOS PARA LAS PÁGINAS DE CATÁLOGO      */
/* ========================================= */

body {
    background-color: #f4f7f6;
}

/* BREADCRUMB */
.breadcrumb {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
    color: #555;
    font-size: 14px;
    font-weight: bold;
}

.breadcrumb a {
    color: #007bff;
    text-decoration: none;
}

.breadcrumb span {
    color: #555;
}

/* CONTENEDOR A 2 COLUMNAS */
.contenedor-catalogo {
    display: flex;
    max-width: 1200px;
    margin: 0 auto 40px auto;
    padding: 0 20px;
    gap: 20px;
}

/* BARRA LATERAL (FILTROS) */
.sidebar-filtros {
    width: 250px;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    height: fit-content;
}

.sidebar-filtros h3 {
    margin-top: 0;
    color: #0a2540;
    font-size: 18px;
}

.sidebar-filtros hr {
    border: 0;
    border-top: 1px solid #eee;
    margin: 15px 0;
}

.grupo-filtro {
    margin-bottom: 20px;
}

.grupo-filtro h4 {
    margin-bottom: 10px;
    font-size: 14px;
    color: #333;
}

.grupo-filtro label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
    cursor: pointer;
}

.grupo-filtro input {
    margin-right: 8px;
}

/* ÁREA DERECHA (PRODUCTOS) */
.area-productos {
    flex: 1;
}

.cabecera-catalogo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 15px 25px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

.cabecera-catalogo h2 {
    margin: 0;
    color: #0a2540;
}

.ordenar-por select {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-left: 10px;
    outline: none;
}

/* CUADRICULA DE PRODUCTOS */
.grid-productos-catalogo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.tarjeta-producto{
    background:#fff;
    padding:20px;
    border-radius:14px;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    text-align:center;
    transition:.3s;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.tarjeta-producto:hover{
    transform:translateY(-6px);
}

.tarjeta-producto img {
    max-width: 100%;
    height: 150px;
    object-fit: contain;
    margin-bottom: 15px;
}

.tarjeta-producto h3 {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
    flex-grow: 1;
}

.tarjeta-producto .precio-prod {
    color: #e63946;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}

.btn-agregar{
    width:100%;
    padding:12px;
    border:none;
    border-radius:30px;
    background:linear-gradient(45deg,#ff8a00,#ff5e00);
    color:#ffffff;
    font-weight:700;
    font-size:13px;
    cursor:pointer;
    transition:.3s;
    box-shadow:0 4px 12px rgba(255,138,0,.35);
    letter-spacing:.3px;
}

/* HOVER */
.btn-agregar:hover{
    background:linear-gradient(45deg,#ff5e00,#ff2e00);
    transform:translateY(-2px) scale(1.03);
}

/* CLICK */
.btn-agregar:active{
    transform:scale(0.95);
}

/*------------*/

.subcat-link{
    display:inline-block;
    padding:10px 15px;
    background:#eaeef5;
    margin:5px;
    border-radius:10px;
    text-decoration:none;
    color:#000;
    font-weight:bold;
}

.subcat-link:hover{
    background:#1f2b63;
    color:#fff;
}

/**REGSITROOOOOOOOO*/
/* REGISTRO */

.registro-container{
    width:100%;
    padding:50px 20px;
}

.registro-card{
    max-width:1000px;
    margin:auto;
    background:#fff;
    border-radius:15px;
    padding:35px;
    box-shadow:0 4px 15px rgba(0,0,0,.08);
}

.registro-titulo{
    display:flex;
    align-items:center;
    gap:10px;
    color:#1f2b63;
    margin-bottom:25px;
    padding-bottom:15px;
    border-bottom:2px solid #255cae;
}

.registro-form{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:18px;
}

.grupo{
    display:flex;
    flex-direction:column;
}

.grupo label{
    font-size:14px;
    color:#1f2b63;
    margin-bottom:8px;
    font-weight:600;
}

.grupo input,
.grupo select{
    height:48px;
    border:none;
    background:#f1f1f1;
    border-radius:25px;
    padding:0 15px;
}

.grupo-full{
    grid-column:1 / -1;
}

.btn-registro{
    margin-top:10px;
    width:250px;
    height:50px;
    border:none;
    border-radius:30px;
    background:#ff8a00;
    color:white;
    font-weight:bold;
    cursor:pointer;
}

.btn-registro:hover{
    background:#ff7300;
}
@media(max-width:768px){

    .registro-form{
        grid-template-columns:1fr;
    }

    .registro-card{
        padding:20px;
    }

    .btn-registro{
        width:100%;
    }

}
/*CARITOOOO */
.carrito{
    position:fixed;
    top:0;
    right:-420px;
    width:420px;
    height:100%;
    background:#fff;
    box-shadow:-10px 0 25px rgba(0,0,0,.2);
    transition:.3s;
    z-index:99999;
    display:flex;
    flex-direction:column;
}
.carrito.activo{
    right:0;
}
/* SOLO MOVIL */

@media(max-width:768px){

    .carrito{
        width:100%;
        right:-100%;
    }


.carrito.activo{
    right: 0;
}
}

/* HEADER */
.carrito-header{
    background: #1f2b63;
    color: #fff;
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
}

/* ITEMS */
.carrito-items{
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

/* ITEM */
.item{
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/* IMAGEN */
.item img{
    width: 65px;
    height: 65px;
    object-fit: contain;
    background: #f7f7f7;
    border-radius: 8px;
}

/* INFO */
.item-info{
    flex: 1;
}

.item-info h4{
    font-size: 14px;
    margin: 0;
}

.item-info span{
    color: #f0342c;
    font-weight: bold;
}

/* CANTIDAD */
.cantidad{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}

.cantidad button{
    width: 25px;
    height: 25px;
    border: none;
    background: #ddd;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
}

.cantidad span{
    min-width: 20px;
    text-align: center;
}

/* ELIMINAR */
.eliminar{
    margin-top: 5px;
    background: none;
    border: none;
    color: #00aaff;
    cursor: pointer;
    font-size: 12px;
}

/* TOTAL */
.carrito-total{
    padding: 15px;
    border-top: 1px solid #ddd;
    background: #fafafa;
}

.carrito-total p{
    margin: 5px 0;
}

.carrito-total h4{
    margin-top: 10px;
}

/* BOTONES */
.btn-ver{
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid #1f2b63;
    background: transparent;
    cursor: pointer;
    border-radius: 5px;
}

.btn-pagar{
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    border: none;
    background: #ff8a00;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
}
/* ==========================================
   MENU RESPONSIVE TIPO FYBECA
========================================== */

@media (max-width:768px){

    .panel-contenido{
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        width:100% !important;
        height:100vh !important;
        background:#fff;
        z-index:99999;
        overflow-y:auto;
        padding:0;
    }

    .panel-header{
        background:#255cae;
        padding:15px 20px;
        margin:0;
        border:none;
    }

    .panel-header h2{
        color:#fff;
        font-size:28px;
    }

    .panel-header button{
        background:none;
        color:#fff;
        font-size:30px;
        width:auto;
        height:auto;
    }

    .panel-subcategorias{
        display:flex !important;
        flex-direction:column !important;
        gap:0 !important;
        margin:0;
    }

    .panel-subcategorias a{
        display:flex;
        justify-content:space-between;
        align-items:center;
        background:#fff !important;
        color:#1f2b63 !important;
        padding:18px 22px;
        border-bottom:1px solid #e8e8e8;
        border-radius:0;
        margin:0;
        font-size:18px;
    }

    .panel-subcategorias a::after{
        content:"›";
        font-size:26px;
        font-weight:bold;
    }

    .panel-productos{
        display:none !important;
    }

}
#volverMenu{
    display:none;
}
@media(max-width:768px){

    #volverMenu{
        display:block;
        background:#255cae;
        color:#fff;
        padding:15px 20px;
        font-weight:700;
        text-decoration:none;
        margin-bottom:10px;
    }

    .panel-subcategorias a{
        display:block;
        padding:18px 20px;
        border-bottom:1px solid #e5e5e5;
        text-decoration:none;
        color:#1f2b63;
        font-weight:600;
    }

    .panel-productos{
        display:none;
    }
}

/* PEGAR AL FINAL DE style.css */
@media(max-width:768px){

    .header{
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
        padding:10px 15px;
    }

    .menu-container{
        width:33%;
        display:flex;
        justify-content:flex-start;
    }

    .logo{
        width:34%;
        display:flex;
        justify-content:center;
        align-items:center;
        min-width:0;
    }

    .logo img{
        width:130px;
        max-width:100%;
        height:auto;
    }

    .icons{
        width:33%;
        display:flex;
        justify-content:flex-end;
        gap:15px;
    }

    .search-box{
        display:none;
    }


    .menu-box{
    width:auto;
    height:auto;
    padding:0;
    border:none;
    background:none;
}

    .icons{
        display:flex;
        justify-content:center;
        gap:25px;
    }

    .icons i{
        font-size:24px;
    }

    .slider{
        height:auto !important;
    }

    .slides img{
        width:100%;
        height:auto !important;
        object-fit:contain !important;
    }

/* BANNER */
.slider{
    margin-top:0;
}

.slider img{
    height:auto;
    width:100%;
}




/* CATEGORIAS */
.categorias{
    overflow-x:auto;
    flex-wrap:nowrap;
}

.card-cat{
    min-width:180px;
}

/* OFERTAS */
.ofertas-slider{
    flex-direction:column;
}

.ofertas-track{
    width:100%;
}
}

/* PEGAR AL FINAL DE style.css */

.desktop-only{
    display:block;
}

@media(max-width:768px){
    .desktop-only{
        display:none;
    }
}
@media(max-width:768px){

    .menu-box span{
        display:none;
    }

    .menu-box{
        border:none;
        padding:0;
        background:none;
    }

    .menu-box i{
        font-size:28px;
        color:#16b9ef;
    }
    

}
@media(max-width:768px){

    #btnUbicacion{
        display:none !important;
    }

}

.volver-menu{
    display:none;
}
@media(max-width:768px){

    .volver-menu{
        display:block;
        color:#0a58ff;
        font-size:18px;
        font-weight:600;
        margin-bottom:20px;
    }

}


@media(min-width:768px){
    .modal-agregado{
        display:none !important;
    }
}
.modal-agregado{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    width:100% !important;
    height:100vh !important;
    background:rgba(0,0,0,.6) !important;
    display:none;
    justify-content:center;
    align-items:center;
    z-index:999999;
}

.modal-agregado-box{
    background:#fff !important;
    width:90% !important;
    max-width:320px !important;
    padding:25px 20px !important;
    border-radius:22px !important;
    text-align:center !important;
    box-shadow:0 15px 35px rgba(0,0,0,.20);
}

.modal-agregado-box h2{
    font-size:18px !important;
    font-weight:800;
    color:#1f2b63 !important;
    margin-bottom:15px !important;
}

.modal-agregado-box p{
    font-size:15px !important;
    line-height:1.5 !important;
    color:#444 !important;
    margin-bottom:22px !important;
}
.cerrar-agregado{
    position:absolute !important;
    right:15px !important;
    top:10px !important;
    font-size:30px !important;
    color:#16b9ef !important;
    cursor:pointer !important;
}

.acciones-agregado{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
}

#seguirComprandoBtn,
#irBolsaBtn{
    width:100% !important;
    height:52px !important;
    padding:0 !important;
    font-size:14px !important;
    font-weight:700 !important;
    border-radius:30px !important;
}

#seguirComprandoBtn{
    background:#fff !important;
    border:2px solid #1f2b63 !important;
    color:#1f2b63 !important;
}

#irBolsaBtn{
    background:#ff8a00 !important;
    color:#fff !important;
}
#seguirComprandoBtn:hover{
    background:#1f2b63 !important;
    color:#fff !important;
}

#irBolsaBtn:hover{
    background:#ff7200 !important;
}

@media(max-width:768px){

    .modal-agregado-box{
        width:calc(100vw - 30px) !important;
        max-width:280px !important;
        margin:auto !important;
    }

    .modal-agregado-box h2{
        font-size:24px !important;
        line-height:1.2 !important;
        word-break:break-word;
    }

    .modal-agregado-box p{
        font-size:16px !important;
        line-height:1.4 !important;
    }

    .acciones-agregado{
        width:100% !important;
    }

    #seguirComprandoBtn,
    #irBolsaBtn{
        width:100% !important;
        display:block !important;
        box-sizing:border-box !important;
    }

}

/* ESTILOS DE CHECKOUT*/
body{
    margin:0;
    font-family:Arial, sans-serif;
    background:#f1f0f0;
}

.checkout-header{
    background:#ffffff;
    padding:15px 40px;
}

.checkout-header img{
    height:55px;
}

.pasos{
    width:80%;
    margin:30px auto;
    background:#1f4c9c;
    border-radius:40px;
    display:flex;
    justify-content:space-around;
    padding:15px;
}

.paso{
    color:#fff;
    font-weight:600;
}

.paso span{
    background:#1bc8ff;
    width:35px;
    height:35px;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    margin-right:10px;
}

.checkout-container{
    width:90%;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr 350px;
    gap:25px;
    margin-top:40px;
}

.card{
    background:#fff;
    padding:30px;
    border-radius:15px;
}

.card h3{
    color:#1f2b63;
    margin-bottom:25px;
}

.card input{
    width:100%;
    padding:14px;
    margin-bottom:15px;
    border:none;
    background:#f0f0f0;
    border-radius:30px;
}

.btn-principal{
    width:100%;
    border:none;
    background:#ff8a00;
    color:#fff;
    padding:14px;
    border-radius:30px;
    font-weight:bold;
    cursor:pointer;
}

.btn-secundario{
    width:100%;
    margin-top:12px;
    background:#fff;
    border:2px solid #1f2b63;
    color:#1f2b63;
    padding:14px;
    border-radius:30px;
    font-weight:bold;
    cursor:pointer;
}

.resumen{
    background:#fff;
    border-radius:15px;
    overflow:hidden;
}

.resumen-header{
    background:#26385a;
    color:#fff;
    padding:15px;
    font-weight:bold;
}

#resumenProductos{
    padding:15px;
}

.item-resumen{
    display:flex;
    gap:10px;
    margin-bottom:15px;
}

.item-resumen img{
    width:60px;
    height:60px;
    object-fit:contain;
}

.totales{
    padding:20px;
    border-top:1px solid #ddd;
}

.totales h2{
    color:#ff2f2f;
}

@media(max-width:768px){

    .checkout-container{
        grid-template-columns:1fr;
    }

    .pasos{
        width:95%;
        flex-direction:column;
        gap:10px;
    }
}


.telefono-group{
    display:flex;
    gap:10px;
}

.telefono-group select{
    flex:0 0 120px;
    height:48px;
    border:none;
    border-radius:25px;
    background:#f1f1f1;
    padding:0 10px;
}

.telefono-group input{
    flex:1;
    min-width:120px;
}
/* CLIENTE */

.cliente-banner{

    background:#255cae;
    color:white;

    padding:50px 20px;

    text-align:center;
}

.cliente-panel{

    width:90%;
    max-width:1200px;

    margin:50px auto;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:25px;
}

.cliente-card{

    background:white;

    border-radius:15px;

    padding:40px;

    text-align:center;

    box-shadow:0 4px 15px rgba(0,0,0,.08);

    cursor:pointer;

    transition:.3s;
}

.cliente-card:hover{

    transform:translateY(-5px);
}

.cliente-card i{

    font-size:60px;

    color:#00b7e8;

    margin-bottom:20px;
}

/*LOGOUT CLIENTEEEE */
.btn-logout{
    background:#ff8800;
    color:white;
    padding:12px 20px;
    text-decoration:none;
    border-radius:30px;
    display:inline-block;
    margin-bottom:20px;
    font-weight:bold;
}

/**INVITADOOOOO*/

.modal-invitado{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:9999;

    justify-content:center;
    align-items:center;
}

.modal-invitado-box{
    background:#fff;
    width:500px;
    max-width:95%;
    border-radius:15px;
    padding:30px;
    position:relative;
}

.modal-invitado-box h2{
    color:#1b2d72;
    text-align:center;
    margin-bottom:10px;
}

.modal-invitado-box p{
    text-align:center;
    margin-bottom:20px;
}

.modal-invitado-box input{
    width:100%;
    padding:14px;
    margin-bottom:12px;
    border:none;
    border-radius:30px;
    background:#eef3ff;
}

#cerrarModalInvitado{
    position:absolute;
    top:10px;
    right:15px;
    font-size:30px;
    cursor:pointer;
}

/* responsivo invitado*/
@media(max-width:768px){

    .modal-invitado-box{
        width:calc(100vw - 30px);
        max-width:none;
        margin:auto;
    }

    .modal-invitado-box h2{
        font-size:24px;
    }

}

/*checkout invitado */
.envio-container{
    width:90%;
    max-width:900px;
    margin:40px auto;
}

.envio-card{
    background:#fff;
    padding:40px;
    border-radius:20px;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.envio-card h2{
    color:#17387d;
    margin-bottom:20px;
}

.grupo{
    margin-bottom:20px;
}

.grupo label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
}

.grupo input,
.grupo select{
    width:100%;
    padding:15px;
    border:none;
    border-radius:30px;
    background:#eef3fb;
}

.btn-principal{
    background:#ff8a00;
    color:white;
    border:none;
    padding:15px 30px;
    border-radius:30px;
    cursor:pointer;
}

.checkout-envio{
    width:90%;
    margin:40px auto;
    display:flex;
    gap:30px;
}

.envio-izquierda{
    flex:2;
    background:#fff;
    padding:30px;
    border-radius:20px;
}

.envio-derecha{
    flex:1;
    background:#fff;
    padding:25px;
    border-radius:20px;
    height:max-content;
}

.fila{
    display:flex;
    gap:20px;
}

.fila .grupo{
    flex:1;
}

.tabs-envio{
    display:flex;
    margin:20px 0;
}

.tabs-envio button{
    flex:1;
    padding:18px;
    border:none;
    cursor:pointer;
}

.tab-activo{
    background:#2f5cab;
    color:white;
}

.grupo{
    margin-bottom:20px;
}

.grupo label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
}

.grupo input,
.grupo select{
    width:100%;
    padding:15px;
    border:none;
    border-radius:30px;
    background:#eef3fb;
}

@media(max-width:900px){

    .checkout-envio{
        flex-direction:column;
    }

    .fila{
        flex-direction:column;
    }

}
.item-resumen{
    display:flex;
    gap:15px;
    align-items:center;
    margin-bottom:15px;
}

.item-resumen img{
    width:70px;
    height:auto;
    object-fit:contain;
}

.checkout-top{
    height:70px;
    background:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 60px;
    border-bottom:1px solid #eee;
}

.checkout-logo img{
    height:50px;
}

.checkout-user a{
    text-decoration:none;
    color:#00bff3;
    font-weight:600;
}

.pasos-fy{
    width:85%;
    margin:40px auto;
    background:#2f5cab;
    border-radius:35px;
    padding:25px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:relative;
}

.linea-pasos{
    position:absolute;
    left:10%;
    right:10%;
    top:40px;
    height:3px;
    background:#4dd9ff;
}

.paso-fy{
    z-index:2;
    color:white;
    text-align:center;
    font-weight:600;
}

.paso-fy span{
    width:38px;
    height:38px;
    background:white;
    color:#2f5cab;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
    margin-bottom:8px;
}

.paso-fy.activo span{
    background:#00d5ff;
    color:white;
}
.checkout-steps{
    width:85%;
    margin:30px auto;
    background:#2f5cab;
    border-radius:40px;
    padding:25px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.step{
    color:white;
    text-align:center;
    font-weight:600;
    flex:1;
}

.step span{
    width:40px;
    height:40px;
    border-radius:50%;
    background:white;
    color:#2f5cab;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0 auto 10px;
    font-weight:bold;
}

.step.active span{
    background:#00d9ff;
    color:white;
}

@media(max-width:768px){

    .checkout-steps{
        flex-direction:column;
        gap:20px;
    }

}

.envio-izquierda h1{
    color:#17387d;
    font-size:42px;
    margin-bottom:10px;
}

.envio-izquierda p{
    color:#555;
    margin-bottom:25px;
}

.tabs-envio{
    display:flex;
    overflow:hidden;
    border-radius:12px;
    margin-bottom:30px;
}

.tabs-envio button{
    flex:1;
    padding:18px;
    border:none;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.tab-activo{
    background:#2f5cab;
    color:white;
}

.tab-inactivo{
    background:#f0f0f0;
}

.envio-card{
    background:white;
    border-radius:20px;
    padding:30px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.pago-box{
    background:#fff;
    padding:30px;
    border-radius:20px;
}

.opcion-pago{
    border:1px solid #ddd;
    border-radius:12px;
    padding:20px;
    margin-bottom:20px;
}
.pedido-item{
    background:#fff;
    padding:15px;
    border-radius:10px;
    margin-top:15px;
    text-align:left;
    border:1px solid #ddd;
}

.pedido-item strong{
    color:#173f8a;
    font-size:18px;
}
#resultadosBusqueda{
    position:absolute;
    top:100%;
    left:0;
    width:850px;
    height:400px;
    background:#fff;
    border-radius:10px;
    box-shadow:0 5px 20px rgba(0,0,0,.2);
    z-index:99999;
    display:none;
    overflow:hidden;
}

.resultados-grid{
    display:flex;
    height:100%;
}

.resultados-lista{
    width:35%;
    padding:15px;
    overflow-y:auto;
    border-right:1px solid #eee;
}

.resultados-detalle{
    width:65%;
    padding:15px;
    overflow-y:auto;
}

.item-busqueda{
    padding:10px;
    cursor:pointer;
    font-weight:600;
    color:#00a7e1;
}

.item-busqueda:hover{
    background:#f5f5f5;
}

.producto-busqueda{
    display:flex;
    gap:15px;
    margin-bottom:15px;
    border-bottom:1px solid #eee;
    padding-bottom:10px;
}

.producto-busqueda img{
    width:80px;
    height:80px;
    object-fit:contain;
}

.producto-busqueda h4{
    margin:0;
}

.producto-busqueda .precio{
    color:red;
    font-weight:bold;
    font-size:22px;
}
.admin-topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
}

.btn-logout{
    background:#ff8800;
    color:white;
    padding:12px 25px;
    border-radius:30px;
    text-decoration:none;
    font-weight:bold;
    transition:.3s;
}

.btn-logout:hover{
    background:#e67700;
}

.cliente-topbar{
    width:95%;
    margin:20px auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.cliente-topbar .logo img{
    height:60px;
}

.btn-logout{
    background:#ff8800;
    color:white;
    padding:12px 25px;
    border-radius:30px;
    text-decoration:none;
    font-weight:bold;
    transition:.3s;
}

.btn-logout:hover{
    background:#e67700;
}