/* ===== SISTEMA DE TEMAS (Light/Dark) ===== */

:root {
  /* Light Mode (Default) */
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --border-color: #e5e7eb;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* Brand Colors */
  --primary-color: #f97316;
  --primary-dark: #ea580c;
  --secondary-color: #f43f54;
  --accent-color: #ff5722;

  /* Status Colors */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;

  /* Neutral */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode */
html.dark-mode {
  --bg-primary: #000000;
  --bg-secondary: #121212;
  --bg-tertiary: #1e1e1e;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
  --border-color: #2d2d2d;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7);

  /* Brand Colors (adjusted for dark) */
  --primary-color: #fb923c;
  --primary-dark: #f97316;
  --secondary-color: #fb7185;
  --accent-color: #ff6b4a;

  /* Status Colors (darker mode) */
  --success: #34d399;
  --warning: #fbbf24;
  --error: #f87171;
  --info: #60a5fa;
}

/* ===== GLOBAL STYLES WITH THEME ===== */

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: var(--transition-smooth);
}

/* Text Colors */
.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-tertiary {
  color: var(--text-tertiary);
}

/* Background Colors */
.bg-primary {
  background-color: var(--bg-primary);
}

.bg-secondary {
  background-color: var(--bg-secondary);
}

.bg-tertiary {
  background-color: var(--bg-tertiary);
}

/* Border */
.border-color {
  border-color: var(--border-color);
}

.border {
  border-color: var(--border-color);
}

/* Shadows */
.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

/* ===== COMPONENT THEMING ===== */

/* Cards */
.card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  transition: var(--transition-smooth);
}

.card:hover {
  border-color: var(--primary-color);
}

/* Buttons */
.btn-primary {
  background-color: var(--primary-color);
  color: white;
  transition: var(--transition-smooth);
}

.btn-primary:hover {
  background-color: var(--primary-dark);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  transition: var(--transition-smooth);
}

.btn-secondary:hover {
  background-color: var(--border-color);
}

/* Inputs */
input,
textarea,
select {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  transition: var(--transition-smooth);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

/* Modals & Overlays */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}

html.dark-mode .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Headers & Nav */
header,
nav,
.navbar {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
}

/* Footers */
footer {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-top: 1px solid var(--border-color);
}

/* Tables */
table {
  color: var(--text-primary);
}

table tbody tr {
  border-bottom: 1px solid var(--border-color);
}

table tbody tr:hover {
  background-color: var(--bg-tertiary);
}

/* Code Blocks */
code,
pre {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

/* Scrollbar Theming */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* ===== SMOOTH TRANSITIONS ===== */

* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Prevent flashing on page load */
html {
  color-scheme: light dark;
}

html.dark-mode {
  color-scheme: dark;
}

/* ===== UTILITY CLASSES ===== */

.text-orange-500 {
  color: var(--primary-color);
}

.text-red-500 {
  color: var(--secondary-color);
}

.bg-orange-50 {
  background-color: rgba(249, 115, 22, 0.1);
}

.bg-gray-50 {
  background-color: var(--gray-50);
}

html.dark-mode .bg-gray-50 {
  background-color: var(--bg-tertiary);
}

.bg-white {
  background-color: var(--bg-primary);
}

.bg-gray-900 {
  background-color: var(--bg-secondary);
}

.text-gray-900 {
  color: var(--text-primary);
}

.text-gray-600 {
  color: var(--text-secondary);
}

.text-gray-400 {
  color: var(--text-tertiary);
}

.border-gray-200 {
  border-color: var(--border-color);
}

.border-gray-300 {
  border-color: var(--border-color);
}

.hover\:bg-gray-100:hover {
  background-color: var(--bg-tertiary);
}

.hover\:text-orange-500:hover {
  color: var(--primary-color);
}

/* ===== DARK MODE SPECIFIC ===== */

html.dark-mode input::placeholder {
  color: var(--text-tertiary);
}

html.dark-mode textarea::placeholder {
  color: var(--text-tertiary);
}

/* NeoNav Dark Mode */
html.dark-mode .neonav {
  background-color: var(--bg-secondary);
}

html.dark-mode .neonav-link {
  color: var(--text-primary);
}

html.dark-mode .neonav-mobile {
  background-color: var(--bg-secondary);
}

/* Chat Widget */
html.dark-mode #chat-widget {
  --chat-bg: var(--bg-secondary);
  --chat-msg-user-bg: var(--primary-color);
  --chat-msg-bot-bg: var(--bg-tertiary);
  --chat-text: var(--text-primary);
}

/* Buttons with Tailwind classes */
.py-3.px-4.bg-orange-500 {
  background-color: var(--primary-color);
}

.py-3.px-4.bg-gray-100 {
  background-color: var(--bg-tertiary);
}

html.dark-mode .py-3.px-4.bg-gray-100 {
  background-color: var(--bg-tertiary);
}

/* Modal Fixes */
html.dark-mode .bg-white {
  background-color: var(--bg-secondary);
}

html.dark-mode .text-white {
  color: var(--text-primary);
}

/* Gradients */
.gradient-to-r {
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
}

html.dark-mode .gradient-to-r {
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
}

/* =====================================================================
   DARK MODE OVERRIDES — Sobrescriben clases hardcodeadas de Tailwind
   ===================================================================== */

/* --- Textos: tonos oscuros → claros en dark mode --- */
html.dark-mode .text-gray-900,
html.dark-mode .text-gray-800 {
  color: #f1f5f9 !important;
}

html.dark-mode .text-gray-700 {
  color: #e2e8f0 !important;
}

/* Prose en dark mode - muy importante para TinyMCE content */
html.dark-mode .prose.text-gray-700 {
  color: #e2e8f0 !important;
}

html.dark-mode .prose.max-w-none.text-gray-700 {
  color: #e2e8f0 !important;
}

/* Especificidad extra para divs con prose + bg-gray-50 (evento.php) */
html.dark-mode div.prose.max-w-none.text-gray-700.bg-gray-50.p-6.rounded-xl {
  color: #e2e8f0 !important;
  background-color: #1e1e1e !important;
  border-color: #2d2d2d !important;
}

html.dark-mode .text-gray-600,
html.dark-mode .text-gray-500 {
  color: #cbd5e1 !important;
}

html.dark-mode .text-gray-400,
html.dark-mode .text-gray-300 {
  color: #94a3b8 !important;
}

html.dark-mode .text-black {
  color: #f1f5f9 !important;
}

/* Mantener colores de marca en dark */
html.dark-mode .text-orange-500 {
  color: #fb923c !important;
}
html.dark-mode .text-orange-600 {
  color: #f97316 !important;
}
html.dark-mode .text-red-500 {
  color: #f87171 !important;
}
html.dark-mode .text-green-500 {
  color: #34d399 !important;
}
html.dark-mode .text-blue-500 {
  color: #60a5fa !important;
}
html.dark-mode .text-blue-700 {
  color: #93c5fd !important;
}
html.dark-mode .text-amber-600 {
  color: #fcd34d !important;
}

/* Labels de formularios */
html.dark-mode label,
html.dark-mode .label {
  color: #e2e8f0;
}

/* Texto blanco: mantener blanco */
html.dark-mode .text-white {
  color: #ffffff !important;
}

/* --- Fondos: claros → oscuros en dark mode --- */
html.dark-mode .bg-white {
  background-color: #121212 !important;
}

html.dark-mode .bg-gray-50 {
  background-color: #121212 !important;
}

html.dark-mode .bg-gray-100 {
  background-color: #1e1e1e !important;
}

html.dark-mode .bg-gray-200 {
  background-color: #2d2d2d !important;
}

html.dark-mode .bg-gray-300 {
  background-color: #3d3d3d !important;
}

/* Fondos naranja/orange en dark: ligeramente más oscuros */
html.dark-mode .bg-orange-50 {
  background-color: rgba(251, 146, 60, 0.12) !important;
}

html.dark-mode .bg-amber-50 {
  background-color: rgba(251, 191, 36, 0.1) !important;
}

html.dark-mode .bg-blue-50 {
  background-color: rgba(96, 165, 250, 0.1) !important;
}

html.dark-mode .bg-green-50 {
  background-color: rgba(52, 211, 153, 0.1) !important;
}

html.dark-mode .bg-red-50 {
  background-color: rgba(248, 113, 113, 0.1) !important;
}

html.dark-mode .bg-indigo-50 {
  background-color: rgba(165, 180, 252, 0.1) !important;
}

html.dark-mode .bg-emerald-50 {
  background-color: rgba(52, 211, 153, 0.1) !important;
}

/* Fondos gradient claros → dark */
html.dark-mode .bg-gradient-to-br.from-orange-50,
html.dark-mode .from-orange-50 {
  --tw-gradient-from: rgba(251, 146, 60, 0.15) !important;
}
html.dark-mode .from-blue-50 {
  --tw-gradient-from: rgba(96, 165, 250, 0.15) !important;
}
html.dark-mode .from-green-50 {
  --tw-gradient-from: rgba(52, 211, 153, 0.15) !important;
}
html.dark-mode .from-amber-50 {
  --tw-gradient-from: rgba(251, 191, 36, 0.1) !important;
}
html.dark-mode .to-red-50,
html.dark-mode .to-amber-50,
html.dark-mode .to-emerald-50,
html.dark-mode .to-indigo-50 {
  --tw-gradient-to: transparent !important;
}

/* --- Bordes --- */
html.dark-mode .border-gray-100,
html.dark-mode .border-gray-200,
html.dark-mode .border-gray-300 {
  border-color: #2d2d2d !important;
}

html.dark-mode .border-t,
html.dark-mode .border-b,
html.dark-mode .border-l,
html.dark-mode .border-r,
html.dark-mode .border {
  border-color: #2d2d2d !important;
}

/* Bordes de colores de marca: mantener */
html.dark-mode .border-orange-200,
html.dark-mode .border-orange-400 {
  border-color: rgba(251, 146, 60, 0.5) !important;
}

html.dark-mode .border-orange-400 {
  border-color: #fb923c !important;
}

/* --- Hover states --- */
html.dark-mode .hover\:bg-gray-100:hover,
html.dark-mode .hover\:bg-gray-50:hover,
html.dark-mode .hover\:bg-gray-200:hover {
  background-color: #1e1e1e !important;
}

html.dark-mode .hover\:text-gray-700:hover,
html.dark-mode .hover\:text-gray-900:hover {
  color: #f1f5f9 !important;
}

html.dark-mode .hover\:bg-orange-50:hover {
  background-color: rgba(251, 146, 60, 0.15) !important;
}

/* --- Modales --- */
html.dark-mode .relative.bg-white.rounded-3xl {
  background-color: #121212 !important;
}

html.dark-mode #login-modal .relative,
html.dark-mode #forgot-password-modal .relative,
html.dark-mode #user-dashboard-modal .relative,
html.dark-mode #registration-modal .relative,
html.dark-mode #cart-modal .relative,
html.dark-mode #membresia-modal .relative {
  background-color: #121212;
  color: #f1f5f9;
}

/* Separadores dentro de modales */
html.dark-mode .border-t.border-gray-200 {
  border-color: #2d2d2d !important;
}

/* --- Inputs en dark mode --- */
html.dark-mode input[type="text"],
html.dark-mode input[type="email"],
html.dark-mode input[type="password"],
html.dark-mode input[type="tel"],
html.dark-mode input[type="date"],
html.dark-mode select,
html.dark-mode textarea {
  background-color: #1e1e1e !important;
  color: #f1f5f9 !important;
  border-color: #2d2d2d !important;
}

html.dark-mode input[type="text"]:focus,
html.dark-mode input[type="email"]:focus,
html.dark-mode input[type="password"]:focus,
html.dark-mode input[type="tel"]:focus,
html.dark-mode input[type="date"]:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus {
  border-color: var(--primary-color) !important;
  background-color: #1e1e1e !important;
}

html.dark-mode select option {
  background-color: #121212;
  color: #f1f5f9;
}

/* --- Buttons secundarios en dark --- */
html.dark-mode .bg-gray-100.text-gray-700,
html.dark-mode .bg-gray-100.text-gray-600 {
  background-color: #1e1e1e !important;
  color: #e2e8f0 !important;
}

html.dark-mode button.bg-gray-100,
html.dark-mode a.bg-gray-100 {
  background-color: #1e1e1e !important;
  color: #e2e8f0 !important;
}

/* Divider "o continúa con email" */
html.dark-mode .bg-white.text-gray-500 {
  background-color: #121212 !important;
  color: #94a3b8 !important;
}

/* --- Chat Widget dark mode --- */
html.dark-mode #chat-window {
  background: #121212;
  border-color: #1e1e1e;
}

html.dark-mode #chat-messages {
  background: #121212 !important;
}

html.dark-mode .chat-msg.bot {
  background: #1e1e1e !important;
  color: #f1f5f9 !important;
}

html.dark-mode #chat-input-wrap {
  background: #121212 !important;
  border-top-color: #2d2d2d !important;
}

html.dark-mode #chat-input {
  background: #1e1e1e !important;
  color: #f1f5f9 !important;
  border-color: #2d2d2d !important;
}

html.dark-mode #chat-input:focus {
  background: #2a2a2a !important;
  border-color: var(--primary-color) !important;
}

html.dark-mode .chat-typing {
  background: #1e1e1e !important;
}

/* --- Toast en dark --- */
html.dark-mode #toast {
  background: #121212 !important;
  color: #f1f5f9 !important;
  border: 1px solid #2d2d2d;
}

html.dark-mode #toast-title {
  color: #f1f5f9 !important;
}

html.dark-mode #toast-message {
  color: #cbd5e1 !important;
}

/* --- Dashboard stats cards en dark --- */
html.dark-mode .bg-gradient-to-br.from-orange-50.to-red-50 {
  background: rgba(251, 146, 60, 0.15) !important;
}
html.dark-mode .bg-gradient-to-br.from-blue-50.to-indigo-50 {
  background: rgba(96, 165, 250, 0.15) !important;
}
html.dark-mode .bg-gradient-to-br.from-green-50.to-emerald-50 {
  background: rgba(52, 211, 153, 0.15) !important;
}

/* Tarjetas de Puntos TIM3 e Invita un Amigo */
html.dark-mode .bg-gradient-to-br.from-indigo-50.to-purple-50 {
  background: rgba(99, 102, 241, 0.15) !important;
}
html.dark-mode .border-indigo-100 {
  border-color: rgba(99, 102, 241, 0.3) !important;
}
html.dark-mode .text-indigo-800,
html.dark-mode .text-indigo-700 {
  color: #c7d2fe !important; /* indigo-200 */
}
html.dark-mode .text-indigo-500 {
  color: #818cf8 !important; /* indigo-400 */
}

html.dark-mode .bg-gradient-to-br.from-teal-50.to-green-50 {
  background: rgba(20, 184, 166, 0.15) !important;
}
html.dark-mode .border-teal-100,
html.dark-mode .border-teal-200 {
  border-color: rgba(20, 184, 166, 0.3) !important;
}
html.dark-mode .text-teal-800,
html.dark-mode .text-teal-700 {
  color: #99f6e4 !important; /* teal-200 */
}
html.dark-mode .text-teal-600 {
  color: #2dd4bf !important; /* teal-400 */
}
html.dark-mode .text-teal-500 {
  color: #14b8a6 !important; /* teal-500 */
}

/* --- Membresía modal en dark --- */
html.dark-mode .bg-gradient-to-br.from-orange-50.to-amber-50 {
  background: rgba(251, 146, 60, 0.12) !important;
}

/* --- Info banner en dashboard --- */
html.dark-mode .bg-blue-50.border-l-2.border-blue-300 {
  background-color: rgba(96, 165, 250, 0.1) !important;
  border-color: #60a5fa !important;
}

html.dark-mode .text-blue-700 {
  color: #93c5fd !important;
}

/* --- Tabs en dashboard --- */
html.dark-mode .border-b.border-gray-200 {
  border-color: #2d2d2d !important;
}

/* --- Pill nav en dark (si aparece) --- */
html.dark-mode #pill-nav-wrap {
  --pn-base: #121212;
  --pn-pill: #f1f5f9;
  --pn-text: #f1f5f9;
}

/* ===== PROSE & CONTENT BLOCKS (TinyMCE, Event Details) ===== */

/* Prose (TinyMCE editor content) */
html.dark-mode .prose {
  color: #f1f5f9;
}

html.dark-mode .prose p,
html.dark-mode .prose li,
html.dark-mode .prose td,
html.dark-mode .prose blockquote {
  color: #e2e8f0;
}

html.dark-mode .prose h1,
html.dark-mode .prose h2,
html.dark-mode .prose h3,
html.dark-mode .prose h4,
html.dark-mode .prose h5,
html.dark-mode .prose h6 {
  color: #f1f5f9;
}

html.dark-mode .prose a {
  color: #fb923c;
}

html.dark-mode .prose a:hover {
  color: #fbbf24;
}

html.dark-mode .prose strong {
  color: #f1f5f9;
}

html.dark-mode .prose em {
  color: #f1f5f9;
}

html.dark-mode .prose code {
  background-color: #000000;
  color: #f1f5f9;
  border: 1px solid #1e1e1e;
}

html.dark-mode .prose pre {
  background-color: #000000;
  color: #f1f5f9;
}

html.dark-mode .prose table {
  border-color: #2d2d2d;
}

html.dark-mode .prose table thead {
  border-color: #2d2d2d;
  background-color: #1e1e1e;
}

html.dark-mode .prose table tr {
  border-color: #2d2d2d;
}

html.dark-mode .prose table tr:nth-child(2n) {
  background-color: #1e1e1e;
}

html.dark-mode .prose table th,
html.dark-mode .prose table td {
  color: #f1f5f9;
  border-color: #2d2d2d;
}

html.dark-mode .prose hr {
  border-color: #2d2d2d;
}

html.dark-mode .prose blockquote {
  border-color: #2d2d2d;
  color: #cbd5e1;
}

/* Content sections with bg-gray-50 */
html.dark-mode .bg-gray-50.p-6.rounded-xl {
  background-color: #1e1e1e !important;
  border-color: #2d2d2d !important;
}

/* TinyMCE content wrapper */
html.dark-mode .tinymce-content {
  color: #e2e8f0;
}

html.dark-mode .tinymce-content p {
  color: #e2e8f0;
}

html.dark-mode .tinymce-content strong,
html.dark-mode .tinymce-content b {
  color: #f1f5f9;
}

/* Event description areas */
html.dark-mode .bg-white.bg-opacity-90,
html.dark-mode .bg-white\/90 {
  background-color: #121212 !important;
}

html.dark-mode .bg-white\/90.backdrop-blur-sm {
  background-color: #121212 !important;
}

/* Acerca del evento section */
html.dark-mode .bg-white\/90.backdrop-blur-sm.rounded-2xl {
  background-color: #121212;
}

html.dark-mode .bg-white\/90 .text-gray-800 {
  color: #f1f5f9 !important;
}

html.dark-mode .text-gray-800 {
  color: #f1f5f9 !important;
}

html.dark-mode .text-gray-600.leading-relaxed {
  color: #cbd5e1 !important;
}

/* ===== MORPHY BUTTONS (Dark Mode) ===== */

/* morphy-btn--dark en dark mode: fondo blanco/claro con texto oscuro */
html.dark-mode .morphy-btn--dark .morphy-bg {
  background: #f8fafc !important;
}

html.dark-mode .morphy-btn--dark .morphy-dot {
  background: #e2e8f0 !important;
}

html.dark-mode .morphy-btn--dark .morphy-label {
  color: #000000 !important;
  transform: translateX(0) !important;
}

/* Hover state en dark mode: fondo gris más oscuro */
html.dark-mode .morphy-btn--dark.is-active .morphy-bg,
html.dark-mode .morphy-btn--dark:hover .morphy-bg {
  background: #e2e8f0 !important;
}

html.dark-mode .morphy-btn--dark.is-active .morphy-dot,
html.dark-mode .morphy-btn--dark:hover .morphy-dot {
  background: #cbd5e1 !important;
}

html.dark-mode .morphy-btn--dark.is-active .morphy-label,
html.dark-mode .morphy-btn--dark:hover .morphy-label {
  color: #000000 !important;
  transform: translateX(0.375rem) !important;
}

html.dark-mode .morphy-btn--dark.is-active,
html.dark-mode .morphy-btn--dark:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2) !important;
}