/* assets/css/main.css */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;600;700&family=Questrial&display=swap');

:root {
    --brand-primary: #537DB4;
    --brand-secondary: #6E97D0;
    --brand-black: #000000;
}

/* Base - Reemplaza Croogla */
body {
    font-family: 'Fredoka', sans-serif !important;
    overflow-x: hidden;
    color: #1a1a1a;
    -webkit-font-smoothing: antialiased;
}

/* Títulos - Reemplaza Hammersmith */
h1, h2, h3, h4, .font-heading, .font-bold-heading {
    font-family: 'Questrial', sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em;
}

/* Acentos y Botones */
.font-accent, button, .nav-link, .btn-brand {
    font-family: 'Fredoka', sans-serif !important;
    font-weight: 600;
}

/* ... Resto de tus animaciones y componentes (WhatsApp, Toast, etc) se mantienen igual ... */

/* =========================================
   2. ANIMACIONES
   ========================================= */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.animate-fade-in { animation: fadeIn 0.8s ease-out forwards; }

@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.animate-slide-up { animation: slideUp 0.5s ease-out forwards; }

@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
.animate-slide-in-right { animation: slideInRight 0.3s ease-out forwards; }

/* =========================================
   3. COMPONENTES UI Y NOTIFICACIONES
   ========================================= */

/* Botón Flotante de WhatsApp */
.floating-whatsapp {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 90;
    transition: transform 0.3s ease;
    text-decoration: none;
}
.floating-whatsapp:hover { transform: scale(1.1); }

/* Notificaciones Toast (Carrito) */
#toast-container {
    position: fixed;
    top: 100px;
    right: 20px;
    z-index: 1000;
    pointer-events: none;
}

.toast-card { 
    background: white; 
    border-left: 4px solid #537DB4; 
    padding: 15px; 
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); 
    margin-bottom: 10px; 
    pointer-events: auto;
    display: flex; 
    align-items: center; 
    gap: 10px; 
    animation: slideInRight 0.3s ease forwards;
}

/* Scrollbar Personalizado */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

/* Tabla Admin Simplificada */
.admin-table-container {
    overflow-x: auto;
    background: white;
    border-radius: 12px;
    border: 1px solid #eee;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.admin-table th, .admin-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #f5f5f5;
}

/* =========================================
   4. GOOGLE TRANSLATE (MODO INVISIBLE)
   ========================================= */
.goog-te-banner-frame.skiptranslate { display: none !important; }
body { top: 0px !important; position: static !important; }
#google_translate_element { display: none !important; }
.goog-text-highlight { background-color: transparent !important; box-shadow: none !important; }