:root {
    --morado: #5b18c9;
    --morado-oscuro: #3f0d9b;
    --rosa: #ff2f8e;
    --turquesa: #10b9b6;
    --fondo: #f8f7ff;
    --texto: #1f1f35;
}

/* ==========================================
   ESTILOS GENERALES
========================================== */

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: var(--fondo);
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    overflow-x: hidden;
}

body {
    color: var(--texto);
}

.site-footer {
    margin-top: 32px;
    padding: 22px 16px;
    text-align: center;
    color: #69697c;
    font-size: .9rem;
}

.site-footer p {
    margin: 0;
}

/* ==========================================
   CONTENIDO PRINCIPAL
========================================== */

.content {
    width: 100%;
    min-height: 100vh;
    padding: 20px;
    margin-left: 0;
}

/* ==========================================
   HEADER PRINCIPAL JIMA'S
========================================== */

.hero-jimas {
    background: linear-gradient(120deg, #fff1f8, #ffffff, #dffafa);
    border-radius: 0 0 35px 35px;
    padding: 35px 40px;
    margin: -20px -20px 30px -20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(91, 24, 201, 0.10);
}

.hero-jimas::before {
    content: "✏️ 📎 🎁 ⭐ 📚";
    position: absolute;
    font-size: 55px;
    opacity: 0.08;
    top: 20px;
    right: 60px;
    letter-spacing: 25px;
    pointer-events: none;
}

.logo-jimas {
    max-height: 160px;
    filter: drop-shadow(0 8px 15px rgba(0, 0, 0, .12));
}

.hero-title {
    color: var(--morado);
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 5px;
}

.hero-subtitle {
    color: var(--turquesa);
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 700;
}

.hero-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
    font-weight: 600;
}

.hero-feature i {
    color: var(--rosa);
    font-size: 1.8rem;
}

/* ==========================================
   WHATSAPP CARD
========================================== */

.whatsapp-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .12);
}

.whatsapp-card i {
    font-size: 42px;
    color: #25d366;
}

.btn-whatsapp {
    background: linear-gradient(90deg, var(--morado), var(--morado-oscuro));
    color: #ffffff !important;
    border-radius: 30px;
    padding: 10px 22px;
    text-decoration: none;
    display: block;
    text-align: center;
    font-weight: 700;
    transition: .25s;
}

.btn-whatsapp i {
    color: #ffffff !important;
    font-size: 1rem;
}

.btn-whatsapp:hover {
    color: #ffffff !important;
    transform: scale(1.03);
}

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

.catalog-toolbar{

    background:#ffffff;

    border-radius:18px;

    padding:20px;

    margin-bottom:25px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.catalog-toolbar h5{

    color:var(--morado);

    font-weight:800;

}

.catalog-toolbar i{

    color:var(--turquesa);

}

/* ==========================================
   BUSCADOR
========================================== */

.search-box{

    border:2px solid #d7b6ff;

    border-radius:14px;

    height:50px;

    font-size:1rem;

    transition:.25s;

}

.search-box:focus{

    border-color:var(--morado);

    box-shadow:0 0 0 .2rem rgba(91,24,201,.15);

}

/* ==========================================
   CATEGORIAS
========================================== */

.categoria-box{

    background:#fff;

    border-radius:18px;

    padding:18px 20px;

    margin-bottom:25px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.categoria-box label{

    font-weight:700;

    color:var(--morado);

}

.categoria-box i{

    color:var(--rosa);

}

#categoriaSelect{

    border:2px solid #d7b6ff;

    border-radius:14px;

    height:50px;

}

#categoriaSelect:focus{

    border-color:var(--morado);

    box-shadow:0 0 0 .2rem rgba(91,24,201,.15);

}

/* ==========================================
   PRODUCTOS
========================================== */

.productos-section{

    background:#fff;

    border-radius:20px;

    padding:25px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.productos-title{

    color:var(--morado);

    font-weight:800;

    margin-bottom:25px;

}

.productos-title i{

    color:var(--turquesa);

}

/* ==========================================
   TARJETAS
========================================== */

.producto-card .card{

    border:none;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.25s;

}

.producto-card .card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 35px rgba(91,24,201,.18);

}

.producto-card img{

    border-radius:20px 20px 0 0;

    object-fit:cover;

}

.producto-card h5{

    font-weight:700;

    color:#222;

}

.producto-card small{

    display:inline-block;

    background:#efe2ff;

    color:var(--morado)!important;

    padding:5px 12px;

    border-radius:20px;

    margin-bottom:10px;

    font-weight:700;

}

.producto-card h4{

    color:var(--rosa)!important;

    font-weight:800;

    margin-top:auto;

}

/* ==========================================
   BOTONES
========================================== */

/* Botón Agregar */

.btn-primary{

    background:linear-gradient(135deg,var(--morado),var(--turquesa)) !important;

    color:#fff !important;

    border:none !important;

    border-radius:14px;

    font-weight:700;

    transition:.25s;

    box-shadow:0 6px 15px rgba(91,24,201,.25);

}

.btn-primary i{

    color:#fff !important;

    margin-right:6px;

}

.btn-primary span{

    color:#fff !important;

}

.btn-primary:hover{

    transform:translateY(-2px);

    background:linear-gradient(135deg,var(--morado-oscuro),#0fa3a1) !important;

    color:#fff !important;

}

.btn-primary:hover i{

    color:#fff !important;

}

/* Botón WhatsApp */

.btn-success{

    background:#25D366 !important;

    border:none !important;

    border-radius:14px;

    font-weight:700;

}

.btn-success i{

    color:white !important;

}

.btn-success:hover{

    background:#1fb85b !important;

}

/* Botón Vaciar */

.btn-danger{

    border-radius:14px;

    font-weight:700;

}

/* ==========================================
   INPUT CANTIDAD
========================================== */

.input-group-text{

    background:var(--morado);

    color:#fff;

    border:none;

}

.form-control{

    border-radius:12px;

}

.btn-cantidad{

    width:42px;

    height:42px;

    border-radius:50%;

}

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

.carrito-card{

    border:none;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,.10);

}

.carrito-card .card-header{

    background:linear-gradient(135deg,var(--morado),var(--turquesa)) !important;

    color:#fff;

}

.carrito-card .card-header i{

    color:white;

}

.carrito-card .card-footer{

    background:#fff;

}

#total-precio,
#total-precio-mobile{

    color:var(--rosa);

    font-weight:800;

    font-size:1.5rem;

}

/* ==========================================
   BOTÓN FLOTANTE CARRITO
========================================== */

#btn-carrito{

    position:fixed;

    right:20px;

    bottom:20px;

    width:68px;

    height:68px;

    border-radius:50%;

    background:linear-gradient(135deg,var(--morado),var(--turquesa)) !important;

    border:none !important;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:0 12px 28px rgba(0,0,0,.25);

    z-index:1100;

}

#btn-carrito:hover{

    transform:scale(1.08);

}

#btn-carrito i{

    color:#fff !important;

    font-size:1.7rem;

}

/* Contador */

#btn-carrito .badge{

    background:#ff2f8e !important;

    color:white;

    font-size:.75rem;

    font-weight:bold;

    min-width:22px;

}

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

.toast{

    border-radius:18px;

    overflow:hidden;

}

.toast-header{

    background:linear-gradient(135deg,var(--morado),var(--turquesa)) !important;

    color:white;

}

.toast-header i{

    color:white;

}

.toast-body{

    padding:25px;

}

.toast-body button{

    border-radius:12px;

}

/* ==========================================
   EFECTOS Y DETALLES VISUALES
========================================== */

.card,
.productos-section,
.catalog-toolbar,
.categoria-box,
.whatsapp-card {
    animation: aparecer .35s ease;
}

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

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

/* Fondo decorativo suave */
body::before {
    content: "";
    position: fixed;
    width: 350px;
    height: 350px;
    background: rgba(255, 47, 142, .10);
    border-radius: 50%;
    top: -120px;
    left: -120px;
    z-index: -1;
}

body::after {
    content: "";
    position: fixed;
    width: 320px;
    height: 320px;
    background: rgba(16, 185, 182, .12);
    border-radius: 50%;
    bottom: -120px;
    right: -120px;
    z-index: -1;
}

/* ==========================================
   OFFCANVAS CARRITO MÓVIL
========================================== */

.offcanvas {
    border-radius: 20px 0 0 20px;
    overflow: hidden !important;
}

.offcanvas-header {
    background: linear-gradient(135deg, var(--morado), var(--turquesa)) !important;
    color: #fff;
}

.offcanvas-header i {
    color: #fff;
}

.offcanvas-body {
    background: #f8f7ff;
}

#carrito-items,
#carrito-items-mobile {
    padding-bottom: 10px;
}

/* Tarjetas internas del carrito */
#carrito-items .card,
#carrito-items-mobile .card {
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

#carrito-items h6,
#carrito-items-mobile h6 {
    font-weight: 700;
    color: var(--morado);
}

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

@media (max-width: 992px) {
    .content {
        padding: 15px;
        padding-bottom: 100px;
    }

    .hero-jimas {
        margin: -15px -15px 25px -15px;
    }

    .productos-section {
        padding: 18px;
    }
}

@media (max-width: 768px) {
    .hero-jimas {
        padding: 25px 18px;
        text-align: center;
        border-radius: 0 0 28px 28px;
    }

    .hero-jimas::before {
        font-size: 36px;
        right: 10px;
        top: 10px;
        letter-spacing: 10px;
    }

    .logo-jimas {
        max-height: 130px;
        margin-bottom: 15px;
    }

    .hero-title {
        font-size: 1.6rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .hero-feature {
        justify-content: center;
        font-size: .9rem;
    }

    .catalog-toolbar,
    .categoria-box {
        padding: 15px;
    }

    .producto-card img {
        height: 200px !important;
    }

    .productos-title {
        font-size: 1.4rem;
    }
}

@media (max-width: 576px) {
    .content {
        padding: 12px;
        padding-bottom: 110px;
    }

    .hero-jimas {
        margin: -12px -12px 20px -12px;
    }

    .whatsapp-card {
        padding: 15px;
    }

    .btn-primary,
    .btn-success,
    .btn-danger {
        min-height: 45px;
    }

    #btn-carrito {
        width: 62px;
        height: 62px;
        right: 16px;
        bottom: 16px;
    }

    #btn-carrito i {
        font-size: 1.5rem;
    }
}

/* Ocultar botón flotante en escritorio */
@media (min-width: 992px) {
    #btn-carrito {
        display: none !important;
    }
}

.toast{

    border-radius:18px;

    overflow:hidden;

    min-width:340px;

    box-shadow:0 15px 35px rgba(0,0,0,.18);

}

.toast-header{

    background:linear-gradient(135deg,#5b18c9,#10b9b6)!important;

    color:white;

}

.toast-body{

    padding:25px;

    font-size:1rem;

}

#toast-producto-nombre{

    color:#5b18c9;

    font-size:1.3rem;

    font-weight:700;

}