/* ===================================
   PETIU GLOBAL CSS
=================================== */

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

body{
    font-family:Arial, Helvetica, sans-serif;
}

/* ===================================
   OVERLAY
=================================== */

#overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    display:none;
    z-index:998;
}

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

.panel-derecha{
    position:fixed;
    top:0;
    right:-420px;
    width:390px;
    max-width:100%;
    height:100vh;
    background:#fff;
    z-index:9999;
    box-shadow:-10px 0 25px rgba(0,0,0,.08);
    transition:.30s ease;
    display:flex;
    flex-direction:column;
}

.panel-derecha.activo{
    right:0;
}

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

.panel-header{
    display:flex;
    align-items:center;
    padding:18px 20px;
    border-bottom:1px solid #eee;
}

.titulo-carrito{
    font-size:22px;
    font-weight:700;
    color:#1f2937;
}

.cerrar{
    margin-left:auto;
    font-size:28px;
    cursor:pointer;
    color:#555;
    line-height:1;
}

.cerrar:hover{
    color:#000;
}

/* ===================================
   BODY PANEL
=================================== */

.carrito-body{
    flex:1;
    overflow-y:auto;
    padding:18px;
    background:#fafafa;
}

.carrito-body::-webkit-scrollbar{
    width:6px;
}

.carrito-body::-webkit-scrollbar-thumb{
    background:#d1d5db;
    border-radius:10px;
}

/* ===================================
   ITEM CARRITO
=================================== */

.carrito-item{
    display:flex;
    gap:12px;
    background:#fff;
    border:1px solid #eee;
    border-radius:16px;
    padding:12px;
    margin-bottom:14px;
    box-shadow:0 4px 12px rgba(0,0,0,.04);
    align-items:center;
}

/* imagen */

.carrito-img{
    width:72px;
    min-width:72px;
}

.carrito-img img{
    width:72px;
    height:72px;
    border-radius:12px;
    object-fit:cover;
}

/* info */

.carrito-info{
    flex:1;
    min-width:0;
}

.carrito-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
}

.carrito-nombre{
    font-size:15px;
    font-weight:700;
    color:#111827;
    line-height:1.3;
}

/* variante */

.carrito-variante{
    font-size:12px;
    color:#6b7280;
    margin:4px 0 8px;
}

/* bottom */

.carrito-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

.carrito-precio{
    font-size:16px;
    font-weight:700;
    color:#111827;
}

/* cantidad */

#panelCarrito .carrito-qty{
    display:flex !important;
    align-items:center !important;
    border:1px solid #ddd !important;
    border-radius:8px !important;
    overflow:hidden !important;
}

#panelCarrito .carrito-qty span{
    width:30px !important;
    height:30px !important;
    border-radius:8px !important;
    background:#67C1BA !important;
    color:#fff !important;
    border:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    font-size:16px !important;
    font-weight:700 !important;
    line-height:1 !important;
}

#panelCarrito .carrito-qty span:hover{
    background:#4FA8A1 !important;
}

#panelCarrito .carrito-qty input{
    width:26px !important;
    border:none !important;
    text-align:center !important;
    font-weight:700 !important;
    background:transparent !important;
    outline:none !important;
}

#panelCarrito .carrito-qty .qty-num{
    background:transparent !important;
    color:#111827 !important;
    width:26px !important;
    min-width:26px !important;
    height:auto !important;
    font-size:15px !important;
    font-weight:700 !important;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    cursor:default !important;
}

#carrito-total{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: #222;
}

#carrito-total div{
    margin-bottom: 6px;
}

#carrito-total strong{
    font-size: 17px;
    font-weight: 600;
}
/* eliminar */

.btn-eliminar{
    font-size:18px;
    color:#ef4444;
    cursor:pointer;
    font-weight:700;
    line-height:1;
}

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

/* ===================================
   FOOTER PANEL
=================================== */

.carrito-footer{
    background:#fff;
    border-top:1px solid #eee;
    padding:16px;
}

.carrito-total{
    font-size:18px;
    font-weight:700;
    color:#111827;
    margin-bottom:12px;
}

.btn-comprar{
    width:100%;
    padding:14px;
    border:none;
    border-radius:12px;
    background:linear-gradient(135deg,#67C1BA,#4FA8A1);
    color:#fff;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
}

.btn-comprar:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 20px rgba(0,0,0,.08);
}

/* ===================================
   PANEL CUENTA
=================================== */

#cuenta-body{
    width:100%;
    max-width:320px;
    margin:auto;
    padding:30px 20px;
    text-align:center;
}

#cuenta-body h3{
    font-size:24px;
    margin-bottom:18px;
    color:#111827;
}

#cuenta-body input{
    width:100%;
    padding:13px 14px;
    border:1px solid #ddd;
    border-radius:12px;
    margin-bottom:12px;
    font-size:14px;
    outline:none;
}

#cuenta-body input:focus{
    border-color:#67C1BA;
}

/* botones principales */

.btn-main{
    width:100%;
    padding:13px;
    border:none;
    border-radius:12px;
    background:linear-gradient(135deg,#67C1BA,#4FA8A1);
    color:#fff;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
}

.btn-main:hover{
    opacity:.95;
}

/* links */

.link{
    margin-top:14px;
    color:#67C1BA;
    font-size:14px;
    cursor:pointer;
}

.link:hover{
    text-decoration:underline;
}

/* divider */

.divider{
    display:flex;
    align-items:center;
    gap:10px;
    margin:18px 0;
    color:#9ca3af;
    font-size:12px;
}

.divider:before,
.divider:after{
    content:"";
    flex:1;
    height:1px;
    background:#e5e7eb;
}

/* social */

.social-container{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.social-btn{
    width:100%;
    height:42px;
    border-radius:999px;
    border:1px solid #ddd;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    cursor:pointer;
}

.fb-btn{
    color:#1877f2;
    border-color:#1877f2;
}

.fb-btn:hover{
    background:#f0f6ff;
}

/* ===================================
   PERFIL
=================================== */

.perfil-box{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}

.perfil-foto{
    width:90px;
    height:90px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #67C1BA;
}

/* ===================================
   TOAST
=================================== */

.toast{
    position:fixed;
    right:20px;
    bottom:30px;
    background:#111827;
    color:#fff;
    padding:12px 18px;
    border-radius:12px;
    opacity:0;
    transform:translateY(15px);
    transition:.3s;
    z-index:2000;
}

.toast.show{
    opacity:1;
    transform:translateY(0);
}

/* ===================================
   ANIMACIONES
=================================== */

@keyframes shake{
    0%{transform:rotate(0);}
    25%{transform:rotate(-10deg);}
    50%{transform:rotate(10deg);}
    75%{transform:rotate(-10deg);}
    100%{transform:rotate(0);}
}

.shake{
    animation:shake .4s;
}

/* ===================================
   RESPONSIVE
=================================== */

@media(max-width:768px){

    .panel-derecha{
        width:100%;
        right:-100%;
    }

    .panel-header{
        padding:16px;
    }

    .carrito-body{
        padding:14px;
    }

    .carrito-item{
        padding:10px;
    }

    .carrito-img{
        width:64px;
        min-width:64px;
    }

    .carrito-img img{
        width:64px;
        height:64px;
    }

    .carrito-nombre{
        font-size:14px;
    }

    .carrito-precio{
        font-size:15px;
    }

}



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

    #panelCarrito .carrito-qty span{
        width:30px !important;
        height:30px !important;
        font-size:16px !important;
    }

    #panelCarrito .btn-eliminar{
        width:26px;
        height:26px;
        font-size:15px !important;
    }
}



/* =========================
🔐 LOGIN / CUENTA
========================= */
#cuenta-body{
    width:100%;
    max-width:320px;
    margin:auto;
    text-align:center;
}

#cuenta-body h3{
    font-size:20px;
    margin-bottom:20px;
    color:#222;
}

/* INPUTS */
#cuenta-body input{
    width:100%;
    padding:12px 14px;
    margin-bottom:12px;
    border-radius:10px;
    border:1px solid #ddd;
    font-size:14px;
    background:#fafafa;
    transition:0.3s;
}

#cuenta-body input:focus{
    border-color:#67C1BA;
    box-shadow:0 0 0 2px rgba(103,193,186,0.2);
    background:#fff;
}

/* BOTON PRINCIPAL */
.btn-main{
    width:100%;
    padding:12px;
    border-radius:12px;
    border:none;
    background:linear-gradient(135deg,#67C1BA,#4fa8a1);
    color:white;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
}

.btn-main:hover{
    transform:translateY(-1px);
    box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

/* LINK */
.link{
    margin-top:15px;
    color:#67C1BA;
    cursor:pointer;
    font-size:13px;
}

.link:hover{
    text-decoration:underline;
}

/* DIVIDER */
.divider{
    margin:20px 0;
    display:flex;
    align-items:center;
    font-size:12px;
    color:#999;
}

.divider::before,
.divider::after{
    content:"";
    flex:1;
    border-bottom:1px solid #eee;
}

.divider::before{margin-right:10px;}
.divider::after{margin-left:10px;}

/* SOCIAL */
.social-btn{
    width: 100%;
    max-width: 280px; /* 🔥 igual límite visual que Google */
    height: 40px; /* 🔥 mismo alto real del botón Google */
    margin: 0 auto; /* 🔥 centrado */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
}

.social-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.fb-btn{
    color:#1877f2;
    border-color:#1877f2;
}

.fb-btn:hover{
    background:#f0f6ff;
}

.social-btn i{
    font-size:16px;
}

.g_id_signin{
    display:flex !important;
    width: 100% !important;
    justify-content:center;
    margin-bottom:10px;
}

iframe[title="Ingresa con Google"]{
    width: 100% !important;
    height: 44px !important; /* 🔥 MISMO ALTO */
    border-radius: 999px !important;
}

/* PERFIL */
.perfil-box{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    padding-top:20px;
    animation:fadeIn 0.4s ease;
}

.perfil-foto{
    width:90px;
    height:90px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #67C1BA;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.perfil-box h3{
    font-size:18px;
    font-weight:600;
}

.perfil-box p{
    font-size:13px;
    color:#777;
}

/* =========================
🎯 TOAST
========================= */
.toast{
    position:fixed;
    bottom:100px;
    right:20px;
    background:#333;
    color:white;
    padding:12px 18px;
    border-radius:10px;
    font-size:14px;
    opacity:0;
    transform:translateY(20px);
    transition:0.3s;
    z-index:2000;
}

.toast.show{
    opacity:1;
    transform:translateY(0);
}

/* =========================
🎬 ANIMACIONES
========================= */
@keyframes fadeIn{
    from{opacity:0; transform:translateY(10px);}
    to{opacity:1; transform:translateY(0);}
}

@keyframes shake{
    0%{transform:rotate(0);}
    25%{transform:rotate(-10deg);}
    50%{transform:rotate(10deg);}
    75%{transform:rotate(-10deg);}
    100%{transform:rotate(0);}
}

.shake{
    animation:shake 0.4s;
}


/* FIN de mi cuenta ****************************


/* MENUUUUUUU ********************* */


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

/* BASE */
body{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}

/* CONTENEDOR */
.petiu-menu{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 30px;
    background:#fff;
    border-bottom:1px solid #ececec;
    position:sticky;
    top:0;
    z-index:999;
    box-shadow:0 4px 14px rgba(0,0,0,.04);
}


/* MENU PRINCIPAL */
.petiu-menu-list{
    display:flex;
    align-items:center;
    gap:28px;
    list-style:none;
}

.petiu-menu-list li{
    position:relative;
}

/* LINKS PRINCIPALES */
.petiu-menu-list li a{
    font-size:15px;
    padding:14px 10px;
    display:block;
    transition:.25s ease;
    position:relative;
    letter-spacing:.1px;
}

/* LINEA HOVER */
.petiu-menu-list li a::after{
    content:"";
    position:absolute;
    left:10px;
    bottom:8px;
    width:0;
    height:2px;
    background:#67C1BA;
    transition:.25s ease;
}

.petiu-menu-list li a:hover{
    color:#67C1BA;
}

.petiu-menu-list li a:hover::after{
    width:calc(100% - 20px);
}

/* ===============================
   SUBMENU NIVEL 1
================================= */
.submenu{
    position:absolute;
    top:100%;
    left:0;
    min-width:270px;
    background:#fff;
    border-radius:14px;
    box-shadow:0 18px 40px rgba(0,0,0,.08);
    list-style:none;
    padding:12px;
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:.25s ease;
    z-index:999;
}

.submenu li{
    width:100%;
}

.submenu li a{
    display:block;
    width:100%;
    padding:13px 16px;
    font-size:14px;
    border-radius:10px;
}

.submenu li a::after{
    display:none;
}

.submenu li a:hover{
    background:#f8f6fc;
    color:#67C1BA;
    padding-left:22px;
}

/* MOSTRAR */
.dropdown:hover > .submenu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* ===============================
   SUBMENU NIVEL 2
================================= */
.sub-dropdown{
    position:relative;
}

.submenu-2{
    position:absolute;
    top:0;
    left:100%;
    min-width:250px;
    background:#fff;
    border-radius:14px;
    box-shadow:0 18px 40px rgba(0,0,0,.08);
    list-style:none;
    padding:12px;
    opacity:0;
    visibility:hidden;
    transform:translateX(8px);
    transition:.25s ease;
    z-index:999;
}

.submenu-2 li{
    width:100%;
}

.submenu-2 li a{
    display:block;
    width:100%;
    padding:12px 16px;
    font-size:14px;
    border-radius:10px;
    white-space:nowrap;
}

.submenu-2 li a::after{
    display:none;
}

.submenu-2 li a:hover{
    background:#f8f6fc;
    color:#67C1BA;
    padding-left:22px;
}

/* MOSTRAR */
.sub-dropdown:hover > .submenu-2{
    opacity:1;
    visibility:visible;
    transform:translateX(0);
}

/* BOTON MOBILE */
.petiu-toggle{
    display:none;
    font-size:28px;
    color:#67C1BA;
    cursor:pointer;
    /*line-height:1;*/
}

/* ===============================
   RESPONSIVE
================================= */
@media (max-width:991px){

.petiu-toggle{
    display:block;
}

.petiu-menu{
    flex-wrap:wrap;
    padding:14px 20px;
}

.petiu-menu-list{
    display:none;
    flex-direction:column;
    width:100%;
    gap:0;
    margin-top:15px;
    background:#fff;
}

.petiu-menu-list.active{
    display:flex;
}

.petiu-menu-list li{
    width:100%;
}

.petiu-menu-list li a{
    padding:15px 10px;
    border-bottom:1px solid #eee;
    font-size:15px;
    font-weight:300;
    color:#555;
}

/* quitar linea hover mobile */
.petiu-menu-list li a::after{
    display:none;
}

/* dropdown mobile */
.submenu,
.submenu-2{
    position:relative;
    top:0;
    left:0;
    min-width:100%;
    opacity:1;
    visibility:visible;
    transform:none;
    display:none;
    box-shadow:none;
    border-radius:0;
    padding:0 0 0 14px;
    background:#fff;
}

.submenu li a,
.submenu-2 li a{
    padding:12px 10px;
    font-size:14px;
    font-weight:300;
    color:#666;
    border-bottom:1px solid #f5f5f5;
}

/* abrir con JS */
.dropdown.active > .submenu{
    display:block;
}

.sub-dropdown.active > .submenu-2{
    display:block;
}

}

/** FIN  MENUUUUUUU *********************