.day-of-the-dead {
    /* Variables específicas del tema */
    --dotd-bg: #1a0a0f;
    --dotd-surface: #2d1520;
    --dotd-text: #f9f0e8;
    --dotd-accent: #ff9500;
    --dotd-secondary: #ffb347;
    --dotd-button: #ff8c1a;
    --dotd-button-hover: #ffad33;
    --dotd-border: #6b1f4a;
    --dotd-decoration: #ffd700;
    --dotd-velvet: #8b1a4f;
    --dotd-deep-purple: #4a1942;
    --dotd-pink: #ff6b9d;
    background: linear-gradient(135deg, var(--dotd-bg) 0%, #4a1942 50%, #2a1818 100%);
    color: var(--dotd-text);
    position: relative;
    overflow-x: hidden;
}

/* Fondo de ofrenda con overlay oscuro y efecto de velas parpadeantes */
.day-of-the-dead::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../../assets/ofrenda.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.12;
    filter: hue-rotate(15deg) brightness(1);
    z-index: -2;
    animation: candleFlicker 4s ease-in-out infinite;
}

.day-of-the-dead::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 15, 15, 0.7);
    z-index: -1;
}

/* Estilos específicos para día de muertos */
.day-of-the-dead .theme-buttons {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
}

.day-of-the-dead .theme-btn {
    color: var(--dotd-text);
}

.day-of-the-dead .theme-btn.active {
    background: rgba(255, 107, 53, 0.3);
}

.day-of-the-dead .tab-container {
    border-color: var(--dotd-border);
}

.day-of-the-dead .tab-button {
    color: var(--dotd-text);
}

.day-of-the-dead .tab-button.active::after {
    background-color: var(--dotd-accent);
}

.day-of-the-dead .tab-button.active {
    background: rgba(255, 107, 53, 0.1);
    border-radius: 4px 4px 0 0;
}

.day-of-the-dead .tab-button:hover:not(.active) {
    background: rgba(255, 107, 53, 0.05);
}

.day-of-the-dead .content-container {
    background-color: rgba(42, 24, 24, 0.9);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.4),
        inset 0 0 20px rgba(255, 107, 53, 0.05);
    border: 1px solid var(--dotd-border);
    backdrop-filter: blur(10px);
}

.day-of-the-dead .domain-input {
    background-color: rgba(26, 15, 15, 0.8);
    color: var(--dotd-text);
    border: 1px solid var(--dotd-border);
}

.day-of-the-dead .domain-input:focus {
    border-color: var(--dotd-accent);
    box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.3), 0 0 15px rgba(255, 107, 53, 0.3);
    outline: none;
    animation: inputGlow 1.5s ease-in-out infinite;
}

.day-of-the-dead .multi-domain-textarea {
    background-color: rgba(26, 15, 15, 0.8);
    color: var(--dotd-text);
    border: 1px solid var(--dotd-border);
}

.day-of-the-dead .multi-domain-textarea:focus {
    border-color: var(--dotd-accent);
    box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.3), 0 0 15px rgba(255, 107, 53, 0.3);
    outline: none;
    animation: inputGlow 1.5s ease-in-out infinite;
}

.day-of-the-dead .whois-button {
    background: linear-gradient(45deg, var(--dotd-secondary), #c4450d);
    color: white;
}

.day-of-the-dead .whois-button:hover {
    background: linear-gradient(45deg, #c4450d, var(--dotd-secondary));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(226, 88, 34, 0.4);
}

.day-of-the-dead .add-button {
    background: linear-gradient(45deg, var(--dotd-button), #b8430a);
    color: white;
}

.day-of-the-dead .add-button:hover {
    background: linear-gradient(45deg, #b8430a, var(--dotd-button));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(217, 78, 26, 0.4);
}

.day-of-the-dead .additional-domains {
    border-color: var(--dotd-border);
}

.day-of-the-dead .analyze-button {
    background: linear-gradient(45deg, var(--dotd-accent), var(--dotd-secondary));
    color: white;
    border: 2px solid var(--dotd-decoration);
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.3);
    position: relative;
    overflow: hidden;
    animation: breathe 3s ease-in-out infinite;
}

.day-of-the-dead .analyze-button:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 107, 53, 0.5);
    background: linear-gradient(45deg, var(--dotd-secondary), var(--dotd-accent));
    animation: none;
}

.day-of-the-dead .analyze-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.7s;
}

.day-of-the-dead .analyze-button:hover::before {
    left: 100%;
}

.day-of-the-dead .loading-text {
    background: linear-gradient(45deg, var(--dotd-accent), var(--dotd-secondary));
}

.day-of-the-dead .progress-bar {
    background: linear-gradient(90deg, #ffd700, #ff6b35, #ffd700);
    background-size: 200% 100%;
    animation: progressShine 2s linear infinite;
    position: relative;
    overflow: hidden;
}

.day-of-the-dead .progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: wave 1.5s linear infinite;
}

.day-of-the-dead .result-display {
    background-color: rgba(26, 15, 15, 0.9);
    border: 1px solid var(--dotd-border);
    backdrop-filter: blur(10px);
}

.day-of-the-dead .result-display h3 {
    background: linear-gradient(45deg, var(--dotd-accent), var(--dotd-secondary));
}

.day-of-the-dead .result-display pre {
    color: var(--dotd-text);
}

.day-of-the-dead .copy-button {
    background: linear-gradient(45deg, var(--dotd-secondary), #c4450d);
    color: white;
}

.day-of-the-dead .copy-button:hover {
    background: linear-gradient(45deg, #c4450d, var(--dotd-secondary));
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(226, 88, 34, 0.4);
}

.day-of-the-dead .download-button {
    background: linear-gradient(45deg, #228b22, #1e7b1e);
    color: white;
}

.day-of-the-dead .download-button:hover {
    background: linear-gradient(45deg, #1e7b1e, #228b22);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(34, 139, 34, 0.4);
}

.day-of-the-dead .rat-speech-bubble {
    background: linear-gradient(135deg, var(--dotd-surface), #3a2525);
    border: 1px solid var(--dotd-decoration);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    animation: gentlePulse 3s ease-in-out infinite;
}

.day-of-the-dead .rat-speech-bubble:after {
    border-left-color: var(--dotd-surface);
}

.day-of-the-dead .app-footer {
    color: #ddd;
}

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

/* Velas parpadeantes sutiles */
@keyframes candleFlicker {
    0%, 100% { 
        opacity: 0.12; 
        filter: hue-rotate(15deg) brightness(1);
    }
    20% {
        opacity: 0.18;
        filter: hue-rotate(15deg) brightness(1.15);
    }
    40% {
        opacity: 0.10;
        filter: hue-rotate(15deg) brightness(0.95);
    }
    60% {
        opacity: 0.20;
        filter: hue-rotate(15deg) brightness(1.2);
    }
    80% {
        opacity: 0.14;
        filter: hue-rotate(15deg) brightness(1.05);
    }
}

/* Efecto de respiración sutil para botón analizar */
@keyframes breathe {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 107, 53, 0.3);
    }
    50% { 
        transform: scale(1.02);
        box-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
    }
}

/* Glow pulsante para inputs en focus */
@keyframes inputGlow {
    0%, 100% {
        box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.3), 
                    0 0 15px rgba(255, 107, 53, 0.3);
    }
    50% {
        box-shadow: 0 0 0 2px rgba(255, 149, 0, 0.5), 
                    0 0 25px rgba(255, 149, 0, 0.4);
    }
}

/* Animación de brillo para progress bar */
@keyframes progressShine {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Onda que se mueve sobre el progress bar */
@keyframes wave {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Pulsación suave del rat reminder */
@keyframes gentlePulse {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}