/* =========================================================================
   TEMAS (THEMES) - INVITÁ CHE
   Base estructural: template.css (no modificar la estructura)
   ========================================================================= */

/* =========================================
   TEMA 1: CAPIBARA (Cute, infantil, beige)
   ========================================= */
body.theme-capibara {
    --theme-primary: #D19455;
    /* Marrón claro cálido */
    --theme-primary-dark: #A66C36;
    --theme-secondary: #FDF5E6;
    /* Beige / OldLace */
    --theme-accent: #A9DFBF;
    /* Verde agua/suave */
    --theme-text: #5D4037;
    --theme-text-light: #8D6E63;
    --theme-bg: #FCF9F2;
    --theme-card-bg: #FFFFFF;

    font-family: 'Quicksand', sans-serif;
}

/* Modificaciones visuales de la temática en los decoradores flotantes */
.theme-capibara .floating-decorations .d-1,
.theme-capibara .floating-decorations .d-2,
.theme-capibara .floating-decorations .d-3,
.theme-capibara .floating-decorations .d-4 {
    color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.theme-capibara .d-1 {
    background-image: url('../../img/templates/capibara-1.png');
    width: 60px;
    height: 60px;
}

.theme-capibara .d-2 {
    background-image: url('../../img/templates/capibara-balloon.png');
    width: 50px;
    height: 75px;
}

.theme-capibara .d-3 {
    background-image: url('../../img/templates/capibara-cake.png');
    width: 65px;
    height: 65px;
}

.theme-capibara .d-4 {
    background-image: url('../../img/templates/capibara-2.png');
    width: 55px;
    height: 55px;
}

/* El loader capibara */
.theme-capibara .bounce-emoji {
    content: url('../../img/templates/capibara-1.png');
    width: 80px;
    height: 80px;
}

/* Hero Badge */
.theme-capibara .badge {
    background: var(--theme-accent);
    color: #1a5632;
    box-shadow: 0 4px 10px rgba(169, 223, 191, 0.4);
}

/* =========================================
   TEMA 2: BRAINROT (Meme, caótico, internet)
   ========================================= */
body.theme-brainrot {
    --theme-primary: #FF00FF;
    /* Fucsia eléctrico */
    --theme-primary-dark: #CC00CC;
    --theme-secondary: #00FFFF;
    /* Cyan */
    --theme-accent: #FFFF00;
    /* Amarillo flúor */
    --theme-text: #220033;
    --theme-text-light: #660066;
    --theme-bg: #EAE6FE;
    /* Lavanda grisáceo caótico */
    --theme-card-bg: #FFFFFF;

    font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif;
    /* Apropiado para Brainrot */
}

/* Decoradores caóticos */
.theme-brainrot .floating-decorations .decor {
    color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.theme-brainrot .d-1 {
    background-image: url('../../img/templates/brainrot-star.png');
    width: 70px;
    height: 70px;
}

.theme-brainrot .d-2 {
    background-image: url('../../img/templates/brainrot-face.png');
    width: 60px;
    height: 60px;
    animation: brainrot-spin 2s linear infinite;
}

.theme-brainrot .d-3 {
    background-image: url('../../img/templates/brainrot-character.png');
    width: 80px;
    height: 80px;
    animation: bounce 0.5s infinite alternate;
}

.theme-brainrot .d-4 {
    background-image: url('../../img/templates/brainrot-bubble.png');
    width: 70px;
    height: 60px;
}

@keyframes brainrot-spin {
    100% {
        transform: rotate(360deg);
    }
}

/* El loader brainrot */
.theme-brainrot .bounce-emoji {
    content: url('../../img/templates/brainrot-face.png');
    width: 80px;
    height: 80px;
    animation: bounce 0.2s infinite alternate;
}

/* Hero caótico */
.theme-brainrot .hero-card {
    border: 4px solid var(--theme-accent);
    border-radius: 4px;
    /* Sin bordes redondeados */
    box-shadow: 10px 10px 0px var(--theme-primary);
}

.theme-brainrot .hero-card::before {
    display: none;
}

.theme-brainrot .btn-primary {
    border: 3px solid #000;
    box-shadow: 6px 6px 0px #000;
    border-radius: 0;
}

.theme-brainrot .btn-primary:active {
    box-shadow: 2px 2px 0px #000;
    transform: translate(4px, 4px);
}

/* =========================================
   TEMA 3: LABUBU (Cute, Premium, Lavanda)
   ========================================= */
body.theme-labubu {
    --theme-primary: #A490E5;
    /* Lavanda premium */
    --theme-primary-dark: #826ACA;
    --theme-secondary: #FFF0F5;
    /* Rosa blashug */
    --theme-accent: #ADD8E6;
    /* Celeste toy */
    --theme-text: #45376E;
    --theme-text-light: #7E71A5;
    --theme-bg: #F8F6FF;
    --theme-card-bg: #FFFFFF;
}

/* Decoradores suaves y kawaii */
.theme-labubu .floating-decorations .decor {
    color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.theme-labubu .d-1 {
    background-image: url('../../img/templates/labubu-1.png');
    width: 65px;
    height: 85px;
}

.theme-labubu .d-2 {
    background-image: url('../../img/templates/labubu-star.png');
    width: 45px;
    height: 45px;
    animation: pulse 3s infinite;
}

.theme-labubu .d-3 {
    background-image: url('../../img/templates/labubu-2.png');
    width: 70px;
    height: 85px;
}

.theme-labubu .d-4 {
    background-image: url('../../img/templates/labubu-heart.png');
    width: 50px;
    height: 50px;
    animation: pulse 2s infinite;
}

/* El loader Labubu */
.theme-labubu .bounce-emoji {
    content: url('../../img/templates/labubu-1.png');
    width: 80px;
    height: 100px;
    animation: float 3s ease-in-out infinite;
}

/* Hero Premium */
.theme-labubu .hero-card {
    border-radius: var(--radius-lg);
    box-shadow: 0 15px 35px rgba(164, 144, 229, 0.15);
}

.theme-labubu .message-bubble {
    border: 2px dashed var(--theme-primary);
    background: transparent;
}


/* =========================================
   TEMA 4: PERSONALIZABLE (Gris/Blanco base)
   ========================================= */
body.theme-base {
    /* Variables preparadas para inyectar desde panel Admin */
    --primary-color: #334155;
    --secondary-color: #F1F5F9;
    --accent-color: #EC4899;

    --theme-primary: var(--primary-color);
    --theme-primary-dark: #0F172A;
    --theme-secondary: var(--secondary-color);
    --theme-accent: var(--accent-color);
    --theme-text: #1E293B;
    --theme-text-light: #64748B;
    --theme-bg: #F8FAFC;
    --theme-card-bg: #FFFFFF;
}

/* Base custom themes */
body.theme-base.color-navy {
    --primary-color: #1e3a8a;
    /* Navy Blue */
    --secondary-color: #eff6ff;
    --accent-color: #3b82f6;
    --theme-primary-dark: #1e3a8a;
}

body.theme-base.color-rose {
    --primary-color: #be123c;
    /* Rose Gold/Pink */
    --secondary-color: #fff1f2;
    --accent-color: #f43f5e;
    --theme-primary-dark: #be123c;
}

body.theme-base.color-mint {
    --primary-color: #047857;
    /* Emerald/Mint */
    --secondary-color: #f0fdf4;
    --accent-color: #10b981;
    --theme-primary-dark: #047857;
}

body.theme-base.color-sunset {
    --primary-color: #c2410c;
    /* Deep Orange */
    --secondary-color: #fff7ed;
    --accent-color: #f97316;
    --theme-primary-dark: #c2410c;
}

body.theme-base.color-lavender {
    --primary-color: #6d28d9;
    /* Deep Purple */
    --secondary-color: #faf5ff;
    --accent-color: #8b5cf6;
    --theme-primary-dark: #6d28d9;
}

body.theme-base.color-gold {
    --primary-color: #b45309;
    --secondary-color: #fdf6e3;
    --accent-color: #f59e0b;
    --theme-primary-dark: #b45309;
}

body.theme-base.color-forest {
    --primary-color: #064e3b;
    --secondary-color: #ecfdf5;
    --accent-color: #10b981;
    --theme-primary-dark: #064e3b;
}

body.theme-base.color-ocean {
    --primary-color: #0c4a6e;
    --secondary-color: #f0f9ff;
    --accent-color: #0ea5e9;
    --theme-primary-dark: #0c4a6e;
}

body.theme-base.color-berry {
    --primary-color: #831843;
    --secondary-color: #fdf2f8;
    --accent-color: #ec4899;
    --theme-primary-dark: #831843;
}

body.theme-base.color-monochrome {
    --primary-color: #171717;
    --secondary-color: #f5f5f5;
    --accent-color: #525252;
    --theme-primary-dark: #171717;
}

/* Mantiene símbolos emoji de texto como decoradores base, 
   pero se tiñen según accent para que matcheen la estética limpia. */
.theme-base .d-1,
.theme-base .d-2,
.theme-base .d-3,
.theme-base .d-4 {
    font-size: 2rem;
    opacity: 0.2;
    filter: drop-shadow(0 0 5px var(--theme-accent));
}

.theme-base .hero-card {
    border: 1px solid #E2E8F0;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.03);
}