@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');

/* Importar fuentes */
/* Importar sistema de tema Light/Dark */
/* ========================================
   BEZHAS WEB3 - THEME SYSTEM
   Light Mode (Pastel/Lavanda) + Dark Mode
   ======================================== */
:root {
    /* === LIGHT MODE COLORS (Default) === */

    /* Primary Palette - Lavanda/Morado */
    --color-primary-50: 250 245 255;
    /* #faf5ff */
    --color-primary-100: 243 232 255;
    /* #f3e8ff */
    --color-primary-200: 233 213 255;
    /* #e9d5ff */
    --color-primary-300: 216 180 254;
    /* #d8b4fe */
    --color-primary-400: 192 132 252;
    /* #c084fc */
    --color-primary-500: 168 85 247;
    /* #a855f7 */
    --color-primary-600: 147 51 234;
    /* #9333ea */
    --color-primary-700: 126 34 206;
    /* #7e22ce */
    --color-primary-800: 107 33 168;
    /* #6b21a8 */
    --color-primary-900: 88 28 135;
    /* #581c87 */

    /* Accent Palette - Rosa Pastel */
    --color-accent-50: 253 242 248;
    /* #fdf2f8 */
    --color-accent-100: 252 231 243;
    /* #fce7f3 */
    --color-accent-200: 251 207 232;
    /* #fbcfe8 */
    --color-accent-300: 249 168 212;
    /* #f9a8d4 */
    --color-accent-400: 244 114 182;
    /* #f472b6 */
    --color-accent-500: 236 72 153;
    /* #ec4899 */
    --color-accent-600: 219 39 119;
    /* #db2777 */

    /* Sky Palette - Azul Pastel */
    --color-sky-50: 240 249 255;
    /* #f0f9ff */
    --color-sky-100: 224 242 254;
    /* #e0f2fe */
    --color-sky-200: 186 230 253;
    /* #bae6fd */
    --color-sky-300: 125 211 252;
    /* #7dd3fc */
    --color-sky-400: 56 189 248;
    /* #38bdf8 */
    --color-sky-500: 14 165 233;
    /* #0ea5e9 */

    /* Backgrounds */
    --bg-primary: 253 251 255;
    /* #fdfbff - Blanco lavanda */
    --bg-secondary: 255 255 255;
    /* #ffffff - Blanco puro */
    --bg-tertiary: 248 244 255;
    /* #f8f4ff - Lavanda muy claro */
    --bg-muted: 243 244 246;
    /* #f3f4f6 - Gris claro */

    /* Borders */
    --border-light: 233 213 255;
    /* #e9d5ff - Lavanda pastel */
    --border-medium: 216 180 254;
    /* #d8b4fe */
    --border-strong: 192 132 252;
    /* #c084fc */

    /* Text Colors */
    --text-primary: 31 41 55;
    /* #1f2937 - Gris oscuro */
    --text-secondary: 107 114 128;
    /* #6b7280 - Gris medio */
    --text-muted: 156 163 175;
    /* #9ca3af - Gris claro */
    --text-accent: 147 51 234;
    /* #9333ea - Morado */
    --text-white: 255 255 255;
    /* #ffffff */

    /* Semantic Colors */
    --success: 34 197 94;
    /* #22c55e - Verde */
    --warning: 251 146 60;
    /* #fb923c - Naranja */
    --error: 239 68 68;
    /* #ef4444 - Rojo */
    --info: 59 130 246;
    /* #3b82f6 - Azul */

    /* Shadows */
    --shadow-soft: 0 2px 15px -3px rgba(147, 51, 234, 0.1), 0 4px 6px -2px rgba(147, 51, 234, 0.05);
    --shadow-card: 0 1px 3px 0 rgba(147, 51, 234, 0.08), 0 1px 2px 0 rgba(147, 51, 234, 0.04);
    --shadow-card-hover: 0 4px 12px -2px rgba(147, 51, 234, 0.12), 0 2px 6px -1px rgba(147, 51, 234, 0.06);
    --shadow-glow: 0 0 20px rgba(147, 51, 234, 0.3);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Spacing */
    --spacing-xs: 0.25rem;
    /* 4px */
    --spacing-sm: 0.5rem;
    /* 8px */
    --spacing-md: 1rem;
    /* 16px */
    --spacing-lg: 1.5rem;
    /* 24px */
    --spacing-xl: 2rem;
    /* 32px */
    --spacing-2xl: 3rem;
    /* 48px */

    /* Border Radius */
    --radius-sm: 0.375rem;
    /* 6px */
    --radius-md: 0.5rem;
    /* 8px */
    --radius-lg: 0.75rem;
    /* 12px */
    --radius-xl: 1rem;
    /* 16px */
    --radius-2xl: 1.5rem;
    /* 24px */
    --radius-full: 9999px;

    /* Z-Index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}
/* === DARK MODE OVERRIDE === */
.dark {
    /* Backgrounds Dark */
    --bg-primary: 26 26 46;
    /* #1a1a2e */
    --bg-secondary: 31 31 58;
    /* #1f1f3a */
    --bg-tertiary: 24 24 27;
    /* #18181b */
    --bg-muted: 39 39 42;
    /* #27272a */

    /* Borders Dark */
    --border-light: 63 63 70;
    /* #3f3f46 */
    --border-medium: 82 82 91;
    /* #52525b */
    --border-strong: 113 113 122;
    /* #71717a */

    /* Text Colors Dark */
    --text-primary: 255 255 255;
    /* #ffffff */
    --text-secondary: 161 161 170;
    /* #a1a1aa */
    --text-muted: 113 113 122;
    /* #71717a */
    --text-accent: 168 85 247;
    /* #a855f7 */

    /* Primary colors remain similar but adjusted for dark */
    --color-primary-600: 168 85 247;
    /* Brighter in dark mode */

    /* Shadows Dark */
    --shadow-soft: 0 2px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --shadow-card-hover: 0 4px 12px -2px rgba(168, 85, 247, 0.3), 0 2px 6px -1px rgba(168, 85, 247, 0.2);
    --shadow-glow: 0 0 30px rgba(168, 85, 247, 0.4);
}
/* === BASE STYLES === */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: rgb(var(--bg-primary));
    color: rgb(var(--text-primary));
    transition: background-color var(--transition-base), color var(--transition-base);
    min-height: 100vh;
}
/* === UTILITY CLASSES === */
/* Gradients */
.bg-gradient-light {
    background: linear-gradient(135deg, #faf5ff 0%, #fdf2f8 100%);
}
.bg-gradient-primary {
    background: linear-gradient(135deg, #e9d5ff 0%, #fbcfe8 100%);
}
.bg-gradient-hero {
    background: linear-gradient(135deg, #f0f9ff 0%, #faf5ff 50%, #fdf2f8 100%);
}
.bg-gradient-card {
    background: linear-gradient(180deg, #ffffff 0%, #faf5ff 100%);
}
/* Glass Effect */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(147, 51, 234, 0.1);
}
.dark .glass {
    background: rgba(31, 31, 58, 0.7);
    border: 1px solid rgba(168, 85, 247, 0.2);
}
/* Card Styles */
.card {
    background: rgb(var(--bg-secondary));
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}
.card-interactive {
    cursor: pointer;
}
.card-interactive:active {
    transform: translateY(0);
}
/* Button Base */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    cursor: pointer;
    border: none;
    outline: none;
    text-decoration: none;
    white-space: nowrap;
}
.btn-primary {
    background: rgb(var(--color-primary-600));
    color: rgb(var(--text-white));
}
.btn-primary:hover {
    background: rgb(var(--color-primary-700));
    box-shadow: var(--shadow-glow);
}
.btn-secondary {
    background: rgb(var(--color-accent-500));
    color: rgb(var(--text-white));
}
.btn-secondary:hover {
    background: rgb(var(--color-accent-600));
}
.btn-outline {
    background: transparent;
    border: 2px solid rgb(var(--color-primary-600));
    color: rgb(var(--color-primary-600));
}
.btn-outline:hover {
    background: rgb(var(--color-primary-50));
}
.dark .btn-outline:hover {
    background: rgba(var(--color-primary-600), 0.1);
}
/* Input Base */
.input {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg);
    border: 2px solid rgb(var(--border-light));
    background: rgb(var(--bg-secondary));
    color: rgb(var(--text-primary));
    transition: all var(--transition-fast);
    outline: none;
    width: 100%;
}
.input:focus {
    border-color: rgb(var(--color-primary-600));
    box-shadow: 0 0 0 3px rgba(var(--color-primary-600), 0.1);
}
.input::placeholder {
    color: rgb(var(--text-muted));
}
/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: rgb(var(--bg-muted));
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb {
    background: rgb(var(--color-primary-300));
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--color-primary-400));
}
.dark ::-webkit-scrollbar-track {
    background: rgb(var(--bg-tertiary));
}
.dark ::-webkit-scrollbar-thumb {
    background: rgb(var(--color-primary-600));
}
/* Animation Utilities */
.animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
}
.animate-slide-up {
    animation: slideUp 0.3s ease-out;
}
.animate-scale-in {
    animation: scaleIn 0.2s ease-out;
}
/* Responsive Container */
.container-responsive {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 640px) {
    .container-responsive {
        padding: 0 1.5rem;
    }
}
@media (min-width: 1024px) {
    .container-responsive {
        padding: 0 2rem;
    }
}
/* Text Utilities */
.text-gradient {
    background: linear-gradient(135deg, rgb(var(--color-primary-600)) 0%, rgb(var(--color-accent-500)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* Focus Visible (Accessibility) */
.focus-visible:focus-visible {
    outline: 2px solid rgb(var(--color-primary-600));
    outline-offset: 2px;
}
/* @tailwind base;
@tailwind components;
@tailwind utilities; */
/* ==================== VARIABLES CSS - LIGHT/DARK THEME ==================== */
:root {
  --background-primary: #e8eaed;
  --background-secondary: #f5f5f5;
  --text-primary: #000000;
  --text-secondary: #424242;
  --accent-color: #5e35b1;
  --border-color: #d0d0d0;
  --shadow-color: rgba(0, 0, 0, 0.08);
}
.dark-mode {
  --background-primary: #0A101F;
  --background-secondary: #192235;
  --text-primary: #E2E8F0;
  --text-secondary: #94A3B8;
  --accent-color: #4A90E2;
  --border-color: #334155;
  --shadow-color: rgba(0, 0, 0, 0.3);
}
/* ==================== GLOBAL STYLES ==================== */
body {
  @apply bg-dark-background dark:bg-light-background font-sans;
  color: #000000;
  background-color: var(--background-primary);
  /* Color de texto por defecto */
  transition: background-color 0.3s ease, color 0.3s ease;
}
body.dark-mode {
  color: #E2E8F0;
}
/* ==================== TEXT COLOR MANAGEMENT ==================== */
/* Light mode: Textos negros */
.light p,
.light span,
.light div,
.light label,
.light h1,
.light h2,
.light h3,
.light h4,
.light h5,
.light h6 {
  color: #000000 !important;
}
.light .text-inherit {
  color: inherit !important;
}
/* Light mode: Forzar negro en todos los íconos y símbolos */
.light svg,
.light [role="img"],
.light svg * {
  color: #000 !important;
  fill: #000 !important;
  stroke: #000 !important;
}
/* Dark mode: Textos gris claro */
.dark p,
.dark span,
.dark div,
.dark label,
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
  color: #D1D5DB !important;
}
.dark .text-inherit {
  color: inherit !important;
}
/* Excepciones para elementos con colores específicos */
.light .text-primary,
.light .text-accent,
.light .text-success,
.light .text-error,
.light .text-warning,
.light .text-info,
.light [class*="text-blue"],
.light [class*="text-pink"],
.light [class*="text-purple"],
.light [class*="text-green"],
.light [class*="text-red"],
.light [class*="text-yellow"],
.light [class*="text-cyan"],
.light [class*="text-indigo"],
.dark .text-primary,
.dark .text-accent,
.dark .text-success,
.dark .text-error,
.dark .text-warning,
.dark .text-info,
.dark [class*="text-blue"],
.dark [class*="text-pink"],
.dark [class*="text-purple"],
.dark [class*="text-green"],
.dark [class*="text-red"],
.dark [class*="text-yellow"],
.dark [class*="text-cyan"],
.dark [class*="text-indigo"] {
  color: inherit !important;
}
/* Mantener colores de botones y enlaces */
.light button,
.light a,
.dark button,
.dark a {
  color: inherit;
}
/* Inputs y textareas */
.light input,
.light textarea,
.light select {
  color: #000000;
}
.dark input,
.dark textarea,
.dark select {
  color: #D1D5DB;
}
/* Custom Scrollbar Styles */
@layer utilities {

  /* Webkit browsers (Chrome, Safari, Edge) */
  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: #374151;
    border-radius: 3px;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #4B5563;
  }

  /* Dark mode scrollbar */
  .dark-mode .scrollbar-thin::-webkit-scrollbar-thumb {
    background: #4B5563;
  }

  .dark-mode .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #6B7280;
  }

  /* Firefox */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: #374151 transparent;
  }

  .dark-mode .scrollbar-thin {
    scrollbar-color: #4B5563 transparent;
  }
}
/* Smooth transitions for sidebar */
@layer components {
  .sidebar-transition {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Header sticky styles - Se queda al lado del sidebar */
  .header-float {
    position: sticky;
    top: 0;
    z-index: 30;
    box-shadow: 0 4px 15px var(--shadow-color);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .header-hide {
    transform: translateY(-100%);
  }

  .header-show {
    transform: translateY(0);
  }

  /* ReelFeed - Hide scrollbar */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* Line clamp utilities */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ==================== RIGHT SIDEBAR RESPONSIVE ==================== */

  /* Texto vertical para el botón flotante */
  .writing-mode-vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }

  /* Animaciones suaves para componentes */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes slideInRight {
    from {
      transform: translateX(100%);
    }

    to {
      transform: translateX(0);
    }
  }

  @keyframes scaleIn {
    from {
      transform: scale(0.95);
      opacity: 0;
    }

    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes fadeInUp {
    from {
      transform: translateY(10px);
      opacity: 0;
    }

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

  /* Clases de animación */
  .animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
  }

  .animate-scale-in {
    animation: scaleIn 0.2s ease-out;
  }

  .animate-fade-in-up {
    animation: fadeInUp 0.3s ease-out;
  }

  /* Prevenir scroll cuando sidebar móvil está abierta */
  body.sidebar-open {
    overflow: hidden;
  }

  /* Smooth transitions para el layout */
  .layout-transition {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Estilos para el botón flotante */
  .floating-sidebar-button {
    box-shadow: -4px 0 20px rgba(124, 58, 237, 0.4);
  }

  .floating-sidebar-button:hover {
    box-shadow: -6px 0 25px rgba(124, 58, 237, 0.6);
  }
}
/* Hide scrollbar utility class */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}
/* Theme transition for all elements */
* {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
/* Google Translate Widget Styles */
#google_translate_element .goog-te-gadget-simple {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-family: inherit !important;
}
#google_translate_element .goog-te-gadget-simple span {
  color: inherit !important;
}
/* Hide the top bar injected by Google */
body {
  top: 0 !important;
}
.goog-te-banner-frame.skiptranslate {
  display: none !important;
}
/* Dark mode adjustments */
.dark #google_translate_element .goog-te-gadget-simple span {
  color: white !important;
}