/* =========================================
   INTEC-SEC | CORE STYLES
   ========================================= */

button, [onclick] {
    cursor: pointer !important;
}

body { background-color: #030712; color: #cbd5e1; transition: all 0.3s ease; }
.panel { background-color: #0a0a0a; border: 1px solid #1e293b; transition: all 0.3s ease; }
.input-dark { background-color: #030712; border: 1px solid #334155; transition: all 0.3s ease; }
.input-dark:focus { border-color: #10b981; outline: none; box-shadow: 0 0 0 1px #10b981; }

/* Scrollbar elegante */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Animación suave para Tabs y Cursor */
.fade-in { animation: fadeIn 0.3s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.cursor-blink { animation: blink 1s step-end infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* =========================================
   SISTEMA DE TEMAS DINÁMICOS
   ========================================= */

/* 1. TEMA DAY / LIGHT */
body[data-theme="light"] { background-color: #f8fafc !important; color: #334155 !important; }
body[data-theme="light"] .panel, body[data-theme="light"] aside, body[data-theme="light"] header, body[data-theme="light"] footer, body[data-theme="light"] .bg-\[\#0a0a0a\] { background-color: #ffffff !important; border-color: #e2e8f0 !important; }
body[data-theme="light"] .text-white, body[data-theme="light"] .text-slate-200 { color: #0f172a !important; }
body[data-theme="light"] .text-slate-400, body[data-theme="light"] .text-slate-500 { color: #64748b !important; }
body[data-theme="light"] .bg-\[\#030712\], body[data-theme="light"] .bg-slate-900 { background-color: #f1f5f9 !important; border-color: #cbd5e1 !important; }
body[data-theme="light"] .bg-\[\#0f1219\] { background-color: #f8fafc !important; border-color: #e2e8f0 !important; }
body[data-theme="light"] .border-slate-800, body[data-theme="light"] .border-slate-700 { border-color: #e2e8f0 !important; }
body[data-theme="light"] .input-dark { background-color: #ffffff !important; color: #0f172a !important; border-color: #cbd5e1 !important; }
body[data-theme="light"] #terminal-box { background-color: #0f172a !important; color: #10b981 !important; } 

/* 2. TEMA MATRIX */
body[data-theme="matrix"] { background-color: #000000 !important; color: #00ff00 !important; font-family: 'Courier New', Courier, monospace !important; }
body[data-theme="matrix"] .panel, body[data-theme="matrix"] aside, body[data-theme="matrix"] header, body[data-theme="matrix"] footer, body[data-theme="matrix"] .bg-\[\#0a0a0a\] { background-color: #050505 !important; border-color: #003300 !important; }
body[data-theme="matrix"] .text-white, body[data-theme="matrix"] .text-slate-200, body[data-theme="matrix"] .text-slate-400, body[data-theme="matrix"] .text-slate-500, body[data-theme="matrix"] .text-emerald-500, body[data-theme="matrix"] .text-rose-500, body[data-theme="matrix"] .text-blue-500, body[data-theme="matrix"] .text-purple-400 { color: #00ff00 !important; }
body[data-theme="matrix"] .bg-\[\#030712\], body[data-theme="matrix"] .bg-slate-900, body[data-theme="matrix"] .bg-\[\#0f1219\] { background-color: #001100 !important; border-color: #003300 !important; }
body[data-theme="matrix"] .border-slate-800, body[data-theme="matrix"] .border-slate-700 { border-color: #003300 !important; }
body[data-theme="matrix"] .input-dark { background-color: #000000 !important; color: #00ff00 !important; border-color: #00ff00 !important; }
body[data-theme="matrix"] .bg-emerald-600, body[data-theme="matrix"] .bg-rose-600 { background-color: #004400 !important; color: #00ff00 !important; border: 1px solid #00ff00 !important; }
body[data-theme="matrix"] .bg-emerald-500, body[data-theme="matrix"] .bg-rose-500, body[data-theme="matrix"] .bg-amber-500, body[data-theme="matrix"] .bg-blue-500 { background-color: #00ff00 !important; }

/* 3. TEMA CYBERPUNK */
body[data-theme="cyberpunk"] { background-color: #0d0221 !important; color: #00f0ff !important; }
body[data-theme="cyberpunk"] .panel, body[data-theme="cyberpunk"] aside, body[data-theme="cyberpunk"] header, body[data-theme="cyberpunk"] footer, body[data-theme="cyberpunk"] .bg-\[\#0a0a0a\] { background-color: #190440 !important; border-color: #ff003c !important; }
body[data-theme="cyberpunk"] .text-white, body[data-theme="cyberpunk"] .text-slate-200 { color: #fcee0a !important; }
body[data-theme="cyberpunk"] .text-slate-400, body[data-theme="cyberpunk"] .text-slate-500 { color: #00f0ff !important; }
body[data-theme="cyberpunk"] .bg-\[\#030712\], body[data-theme="cyberpunk"] .bg-\[\#0f1219\], body[data-theme="cyberpunk"] .bg-slate-900 { background-color: #0d0221 !important; border-color: #00f0ff !important; }
body[data-theme="cyberpunk"] .border-slate-800, body[data-theme="cyberpunk"] .border-slate-700 { border-color: #ff003c !important; }
body[data-theme="cyberpunk"] .input-dark { background-color: #190440 !important; color: #fcee0a !important; border-color: #00f0ff !important; }
body[data-theme="cyberpunk"] .bg-emerald-600, body[data-theme="cyberpunk"] .bg-rose-600 { background-color: #ff003c !important; color: #ffffff !important; border: 1px solid #fcee0a !important; }
body[data-theme="cyberpunk"] .text-emerald-500 { color: #00f0ff !important; }
body[data-theme="cyberpunk"] .text-rose-500 { color: #ff003c !important; }

/* 4. TEMA DRACULA */
body[data-theme="dracula"] { background-color: #282a36 !important; color: #f8f8f2 !important; }
body[data-theme="dracula"] .panel, body[data-theme="dracula"] aside, body[data-theme="dracula"] header, body[data-theme="dracula"] footer, body[data-theme="dracula"] .bg-\[\#0a0a0a\] { background-color: #44475a !important; border-color: #6272a4 !important; }
body[data-theme="dracula"] .bg-\[\#030712\], body[data-theme="dracula"] .bg-slate-900, body[data-theme="dracula"] .bg-\[\#0f1219\] { background-color: #282a36 !important; border-color: #6272a4 !important; }
body[data-theme="dracula"] .text-slate-400, body[data-theme="dracula"] .text-slate-500 { color: #6272a4 !important; }
body[data-theme="dracula"] .border-slate-800, body[data-theme="dracula"] .border-slate-700 { border-color: #6272a4 !important; }
body[data-theme="dracula"] .text-emerald-500 { color: #50fa7b !important; }
body[data-theme="dracula"] .text-rose-500 { color: #ff5555 !important; }
body[data-theme="dracula"] .text-amber-500 { color: #f1fa8c !important; }
body[data-theme="dracula"] .bg-emerald-600 { background-color: #50fa7b !important; color: #282a36 !important; }
body[data-theme="dracula"] .input-dark { background-color: #282a36 !important; color: #f8f8f2 !important; border-color: #6272a4 !important; }

/* 5. TEMA WARGAMES */
body[data-theme="wargames"] { background-color: #000000 !important; color: #ff9900 !important; font-family: 'Courier New', Courier, monospace !important; }
body[data-theme="wargames"] .panel, body[data-theme="wargames"] aside, body[data-theme="wargames"] header, body[data-theme="wargames"] footer, body[data-theme="wargames"] .bg-\[\#0a0a0a\] { background-color: #0a0a0a !important; border-color: #ff9900 !important; }
body[data-theme="wargames"] .text-white, body[data-theme="wargames"] .text-slate-200, body[data-theme="wargames"] .text-slate-300, body[data-theme="wargames"] .text-slate-400, body[data-theme="wargames"] .text-slate-500, body[data-theme="wargames"] .text-emerald-500, body[data-theme="wargames"] .text-emerald-400, body[data-theme="wargames"] .text-rose-500, body[data-theme="wargames"] .text-blue-500, body[data-theme="wargames"] .text-purple-400, body[data-theme="wargames"] .text-amber-500 { color: #ff9900 !important; }
body[data-theme="wargames"] .bg-\[\#030712\], body[data-theme="wargames"] .bg-slate-900, body[data-theme="wargames"] .bg-\[\#0f1219\] { background-color: #050505 !important; border-color: #ff9900 !important; }
body[data-theme="wargames"] .border-slate-800, body[data-theme="wargames"] .border-slate-700 { border-color: #ff9900 !important; }
body[data-theme="wargames"] .input-dark { background-color: #000000 !important; color: #ff9900 !important; border-color: #ff9900 !important; }
body[data-theme="wargames"] .bg-emerald-600, body[data-theme="wargames"] .bg-rose-600, body[data-theme="wargames"] .bg-slate-800 { background-color: #221100 !important; color: #ff9900 !important; border: 1px solid #ff9900 !important; }
body[data-theme="wargames"] .bg-emerald-500, body[data-theme="wargames"] .bg-rose-500, body[data-theme="wargames"] .bg-amber-500, body[data-theme="wargames"] .bg-blue-500 { background-color: #ff9900 !important; }
body[data-theme="wargames"] .bg-emerald-500\/10, body[data-theme="wargames"] .bg-rose-500\/10, body[data-theme="wargames"] .bg-amber-500\/10 { background-color: rgba(255, 153, 0, 0.1) !important; border-color: rgba(255, 153, 0, 0.3) !important; }
body[data-theme="wargames"] .bg-emerald-500\/5, body[data-theme="wargames"] .bg-rose-500\/5 { background-color: rgba(255, 153, 0, 0.05) !important; }
body[data-theme="wargames"] .border-emerald-500, body[data-theme="wargames"] .border-rose-500 { border-color: #ff9900 !important; }
body[data-theme="wargames"] #terminal-box { background-color: #000000 !important; color: #ff9900 !important; border: 1px solid #ff9900 !important;}