/* ============================================================
   MARKETIMAGIC ULTIMATE HIGH-CONTRAST LIGHT MODE
   ============================================================ */

/* 1. Global Reset & Main Layout */
html.light,
html.light body,
html.light #root,
html.light [class*="bg-[#050505]"],
html.light [class*="bg-[#10141d]"],
html.light [class*="bg-[#0c0c0e]"],
html.light [class*="bg-[#111111]"],
html.light [class*="bg-gradient-premium"],
html.light main {
  background-color: #f1f5f9 !important;
  background-image: none !important;
  color: #0f172a !important;
}

/* 2. Sidebar Navigation */
html.light aside {
  background-color: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.03) !important;
}
html.light aside p,
html.light aside span:not(.text-blue-500):not(.text-primary) {
  color: #64748b !important;
}
html.light aside h1,
html.light aside h2,
html.light aside h3,
html.light aside .font-bold:not(.text-blue-400):not(.text-blue-500) {
  color: #0f172a !important;
}
html.light aside a,
html.light aside button {
  color: #475569 !important;
}
html.light aside a:hover,
html.light aside button:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}
html.light aside a[class*="bg-white/5"],
html.light aside [class*="bg-white/5"] {
  background-color: #e0f2fe !important;
  color: #0284c7 !important;
}

/* 3. Header */
html.light header {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}
html.light header input {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
html.light header input::placeholder {
  color: #94a3b8 !important;
}

/* 4. General Cards & Containers */
html.light .glass-card,
html.light [class*="bg-white/5"],
html.light [class*="bg-white/10"],
html.light [class*="bg-white/[0.02]"],
html.light [class*="bg-white/[0.03]"],
html.light [class*="bg-white/[0.08]"],
html.light [class*="bg-[#18181b]"],
html.light [class*="bg-[#141b27]"],
html.light [class*="bg-[#1e293b]"],
html.light [class*="bg-[#0b0f17]"],
html.light [class*="bg-card"],
html.light div[class*="rounded-3xl bg-white"],
html.light div[class*="rounded-2xl bg-white"],
html.light div[class*="rounded-xl bg-white"] {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
}

/* 5. ISSUE 1: STUDIO BANNER & ASISTENTE IA CHAT */
html.light div[class*="bg-gradient-to-r from-blue-900"],
html.light div[class*="from-purple-900"],
html.light [class*="bg-[#111111]"][class*="p-6"] {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}
html.light div[class*="bg-gradient-to-r from-blue-900"] h2,
html.light div[class*="from-purple-900"] h2,
html.light [class*="bg-[#111111]"][class*="p-6"] h2 {
  color: #0f172a !important;
}
html.light [class*="bg-[#27272a]"],
html.light [class*="bg-[#1c1c1f]"] {
  background-color: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}
html.light div[class*="HISTORIAL DE CHAT"] ~ div,
html.light div[class*="Historial de Chat"] ~ div,
html.light [class*="rounded-tl-sm"],
html.light [class*="rounded-tr-sm"] {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}
html.light div[class*="MODO INVESTIGACIÓN"],
html.light div[class*="Modo Investigación"],
html.light [class*="bg-[#18181b]"][class*="p-4"] {
  background-color: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
}
html.light input[class*="bg-[#27272a]"] {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

/* 6. ISSUE 2: MAGIC STUDIO (DISEÑADOR DE POSTS & CARRUSELES) */
html.light [class*="magic-studio"],
html.light div[class*="Editor Mágico"],
html.light div[class*="flex-1 overflow-hidden relative flex flex-col"] {
  background-color: #f1f5f9 !important;
}
html.light div[class*="w-[320px]"][class*="border-l"],
html.light div[class*="w-80"][class*="border-l"],
html.light div[class*="w-[380px]"][class*="border-l"],
html.light div[class*="w-96"][class*="border-l"] {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}
html.light button[class*="border-white/10"],
html.light div[class*="border-white/10"] {
  border-color: #e2e8f0 !important;
}
html.light div[class*="bg-[#0c0c0e]"] {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* 7. ISSUE 3: CALENDAR GRID LINES (SEPARADORES DE DÍAS VISIBLES) */
html.light .grid-cols-7 > div,
html.light [class*="grid-cols-7"] > div,
html.light div[class*="border-r border-b border-white"],
html.light div[class*="border-r border-white"],
html.light div[class*="border-b border-white"] {
  border-color: #cbd5e1 !important;
  border-right-width: 1px !important;
  border-bottom-width: 1px !important;
}
html.light [class*="border-white/5"] {
  border-color: #cbd5e1 !important;
}
html.light div[class*="grid grid-cols-7 gap-px bg-white"] {
  background-color: #cbd5e1 !important;
  border: 1px solid #cbd5e1 !important;
}
html.light div[class*="grid grid-cols-7 gap-px"] > div {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* 8. ISSUE 4: BRAND KIT (CENTRO DE IDENTIDAD & VISTA PREVIA) */
html.light div[class*="bg-[#111111]"][class*="rounded"],
html.light div[class*="bg-[#18181b]"][class*="rounded"],
html.light div[class*="bg-[#1c1c1f]"][class*="rounded"] {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}
html.light div[class*="bg-[#111111]"] h3,
html.light div[class*="bg-[#111111]"] span,
html.light div[class*="bg-[#111111]"] p {
  color: #0f172a !important;
}
html.light [class*="text-purple-300"] {
  color: #7c3aed !important;
}
html.light [class*="text-blue-300"] {
  color: #0284c7 !important;
}
html.light [class*="text-gray-300"],
html.light [class*="text-gray-400"] {
  color: #475569 !important;
}
html.light [class*="text-gray-500"],
html.light [class*="text-gray-600"] {
  color: #64748b !important;
}
html.light .text-white {
  color: #0f172a !important;
}

/* 9. CTA Buttons Contrast Preservation */
html.light .bg-blue-600,
html.light .bg-blue-600 *,
html.light .bg-primary,
html.light .bg-primary *,
html.light button.bg-blue-600,
html.light button[class*="bg-blue-600"],
html.light button[class*="bg-purple-600"],
html.light button[class*="bg-purple-600"] * {
  color: #ffffff !important;
}

/* 10. Form Controls */
html.light input:not([type="checkbox"]):not([type="radio"]),
html.light textarea,
html.light select {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}


/* ============================================================
   VISIBLE SLEEK SCROLLBAR FOR SIDEBAR & NAVIGATION
   ============================================================ */
aside,
aside nav,
aside div,
aside [class*="overflow-y-auto"] {
  scrollbar-width: thin !important;
  scrollbar-color: #94a3b8 transparent !important;
}

aside::-webkit-scrollbar,
aside nav::-webkit-scrollbar,
aside div::-webkit-scrollbar,
aside [class*="overflow-y-auto"]::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
  display: block !important;
}

aside::-webkit-scrollbar-track,
aside nav::-webkit-scrollbar-track,
aside div::-webkit-scrollbar-track,
aside [class*="overflow-y-auto"]::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.02) !important;
  border-radius: 9999px !important;
}

aside::-webkit-scrollbar-thumb,
aside nav::-webkit-scrollbar-thumb,
aside div::-webkit-scrollbar-thumb,
aside [class*="overflow-y-auto"]::-webkit-scrollbar-thumb {
  background-color: #94a3b8 !important;
  border-radius: 9999px !important;
}

aside::-webkit-scrollbar-thumb:hover,
aside nav::-webkit-scrollbar-thumb:hover,
aside div::-webkit-scrollbar-thumb:hover,
aside [class*="overflow-y-auto"]::-webkit-scrollbar-thumb:hover {
  background-color: #64748b !important;
}

/* Dark mode scrollbars */
html.dark aside,
html.dark aside nav,
html.dark aside div,
html.dark aside [class*="overflow-y-auto"] {
  scrollbar-color: #475569 transparent !important;
}
html.dark aside::-webkit-scrollbar-thumb,
html.dark aside nav::-webkit-scrollbar-thumb,
html.dark aside div::-webkit-scrollbar-thumb,
html.dark aside [class*="overflow-y-auto"]::-webkit-scrollbar-thumb {
  background-color: #475569 !important;
}
html.dark aside::-webkit-scrollbar-thumb:hover,
html.dark aside nav::-webkit-scrollbar-thumb:hover,
html.dark aside div::-webkit-scrollbar-thumb:hover,
html.dark aside [class*="overflow-y-auto"]::-webkit-scrollbar-thumb:hover {
  background-color: #64748b !important;
}


/* ============================================================
   LIGHT MODE: MULTIPLICADOR 360 & CUSTOM WORKSPACE ADAPTABILITY
   ============================================================ */
html.light #marketimagic-custom-workspace {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

html.light #marketimagic-custom-workspace div[style*="background: #141b27"],
html.light #marketimagic-custom-workspace div[style*="background:#141b27"],
html.light #marketimagic-custom-workspace [style*="background: #141b27"],
html.light #marketimagic-custom-workspace [style*="background:#141b27"] {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

html.light #marketimagic-custom-workspace div[style*="background: #0b0f17"],
html.light #marketimagic-custom-workspace div[style*="background:#0b0f17"],
html.light #marketimagic-custom-workspace [style*="background: #0b0f17"],
html.light #marketimagic-custom-workspace [style*="background:#0b0f17"] {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light #marketimagic-custom-workspace textarea,
html.light #marketimagic-custom-workspace input,
html.light #marketimagic-custom-workspace select {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html.light #marketimagic-custom-workspace textarea:focus,
html.light #marketimagic-custom-workspace input:focus,
html.light #marketimagic-custom-workspace select:focus {
  border-color: #0284c7 !important;
  outline: 2px solid rgba(2, 132, 199, 0.15) !important;
}

html.light #marketimagic-custom-workspace h1,
html.light #marketimagic-custom-workspace h2,
html.light #marketimagic-custom-workspace h3,
html.light #marketimagic-custom-workspace h4,
html.light #marketimagic-custom-workspace label {
  color: #0f172a !important;
}

html.light #marketimagic-custom-workspace p {
  color: #475569 !important;
}

html.light #marketimagic-custom-workspace .omni-channel-tab:not([style*="background: rgb(56, 189, 248)"]):not([style*="background: #38bdf8"]) {
  background-color: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

html.light #marketimagic-custom-workspace .omni-channel-tab:hover {
  background-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* ============================================================
   INTEGRATIONS CONFIGURATION - ULTRA HIGH CONTRAST URL / CODE
   ============================================================ */
code.break-all,
code[class*="break-all"],
code[class*="text-green-400"],
code[class*="bg-black"],
div:has(> label) code {
  background-color: #090d16 !important;
  color: #38bdf8 !important;
  border: 1px solid #334155 !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

html.light code.break-all,
html.light code[class*="break-all"],
html.light code[class*="text-green-400"],
html.light div:has(> label) code {
  background-color: #f1f5f9 !important;
  color: #0369a1 !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 700 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* ============================================================
   INTEGRATIONS CONFIGURATION - ABSOLUTE CONTRAST (BLACK IN LIGHT MODE, WHITE IN DARK MODE)
   ============================================================ */
/* MODO CLARO: LETRAS NEGRAS SOBRE FONDO CLARO (SIN NADA DE VERDE) */
html.light code,
html.light code.break-all,
html.light code[class*="break-all"],
html.light code[class*="text-green-400"],
html:not(.dark) code,
html:not(.dark) code.break-all,
html:not(.dark) code[class*="text-green-400"],
body.light code,
.light code {
  background-color: #e2e8f0 !important;
  color: #0f172a !important; /* Negro carbón profundo */
  border: 1px solid #94a3b8 !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* MODO OSCURO: LETRAS BLANCAS SOBRE FONDO OSCURO */
html.dark code,
html.dark code.break-all,
html.dark code[class*="break-all"],
html.dark code[class*="text-green-400"],
code.break-all {
  background-color: #090d16 !important;
  color: #ffffff !important; /* Blanco puro */
  border: 1px solid #334155 !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
}