/* ==========================================================================
   FÁBRICA DE REELS — ESTILOS MAESTROS INDEPENDIENTES (PRODUCCIÓN & LOCAL)
   ========================================================================== */

:root {
    --bg-dark: #111418;
    --surface-dark: #161b20;
    --surface-dark-hover: #1d242c;
    --border-dark: #252e38;
    --primary: #58819d;
    --primary-light: #6d95b2;
    --primary-text: #8cb1c9;
    --sage: #7fa992;
    --sage-text: #9ec5b0;
    --sand: #c2a674;
    --rose: #c47c7c;
    --text-white: #ffffff;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background-color: #111418 !important;
    color: #ffffff !important;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Background utilities */
.bg-\[\#111418\] { background-color: #111418 !important; }
.bg-\[\#161b20\] { background-color: #161b20 !important; }
.bg-\[\#1d242c\] { background-color: #1d242c !important; }
.bg-\[\#58819d\] { background-color: #58819d !important; }
.bg-\[\#6d95b2\] { background-color: #6d95b2 !important; }
.bg-\[\#7fa992\] { background-color: #7fa992 !important; }
.bg-\[\#4d7c67\] { background-color: #4d7c67 !important; }
.bg-\[\#5a8e77\] { background-color: #5a8e77 !important; }
.bg-\[\#58819d\]\/10 { background-color: rgba(88, 129, 157, 0.10) !important; }
.bg-\[\#58819d\]\/15 { background-color: rgba(88, 129, 157, 0.15) !important; }
.bg-\[\#7fa992\]\/10 { background-color: rgba(127, 169, 146, 0.10) !important; }
.bg-\[\#7fa992\]\/15 { background-color: rgba(127, 169, 146, 0.15) !important; }
.bg-surface { background-color: #161b20 !important; }
.bg-canvas { background-color: #111418 !important; }

/* Dark mode forced background classes */
.dark\:bg-\[\#161b20\], .dark\:bg-\[\#111418\], .dark\:bg-background-dark, .dark\:bg-slate-900 {
    background-color: #161b20 !important;
}
.dark\:bg-slate-800, .dark\:bg-slate-800\/50, .dark\:bg-slate-800\/40 {
    background-color: #1b2229 !important;
}

/* Border utilities */
.border-\[\#252e38\] { border-color: #252e38 !important; }
.border-\[\#58819d\] { border-color: #58819d !important; }
.border-\[\#58819d\]\/30 { border-color: rgba(88, 129, 157, 0.3) !important; }
.border-\[\#7fa992\]\/30 { border-color: rgba(127, 169, 146, 0.3) !important; }
.border-subtle { border-color: #252e38 !important; }
.dark\:border-\[\#252e38\], .dark\:border-slate-700, .dark\:border-slate-800 {
    border-color: #252e38 !important;
}

/* Text color utilities */
.text-\[\#8cb1c9\] { color: #8cb1c9 !important; }
.text-\[\#9ec5b0\] { color: #9ec5b0 !important; }
.text-\[\#7fa992\] { color: #7fa992 !important; }
.text-\[\#c2a674\] { color: #c2a674 !important; }
.text-white { color: #ffffff !important; }

/* Input, Select, Textarea defaults for dark theme */
input, select, textarea {
    background-color: #161b20 !important;
    color: #ffffff !important;
    border-color: #252e38 !important;
}

input::placeholder, textarea::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Aspect ratio utilities */
.aspect-square {
    aspect-ratio: 1 / 1;
}
.aspect-video {
    aspect-ratio: 16 / 9;
}
.aspect-\[9\/16\], .aspect-reels {
    aspect-ratio: 9 / 16;
}

/* Custom Scrollbars */
.custom-scrollbar::-webkit-scrollbar,
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
    background: #111418;
}

.custom-scrollbar::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
    background: #252e38;
    border-radius: 9999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:hover {
    background: #58819d;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Animations */
@keyframes pulseSlow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-pulse-slow {
    animation: pulseSlow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}