/* css/styles.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background-color: #0f172a; 
    color: #f8fafc;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.font-mono { font-family: 'JetBrains Mono', monospace; }

/* --- PALETA MODO CLARO (Oculta por ahora) --- */
body.light-mode {
    background-color: #f8fafc; color: #334155;
}
body.light-mode .bg-slate-900 { background-color: #ffffff !important; }
body.light-mode .bg-slate-800 { background-color: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
body.light-mode .bg-slate-950 { background-color: #f1f5f9 !important; }
body.light-mode .text-white { color: #0f172a !important; }
body.light-mode .text-slate-100 { color: #1e293b !important; }
body.light-mode .text-slate-300 { color: #475569 !important; }
body.light-mode .text-slate-400 { color: #64748b !important; }
body.light-mode .text-slate-500 { color: #94a3b8 !important; }
body.light-mode .border-slate-700, body.light-mode .border-slate-800 { border-color: #e2e8f0 !important; }
body.light-mode .border-slate-600 { border-color: #cbd5e1 !important; }
body.light-mode .text-blue-400 { color: #2563eb !important; }
body.light-mode .bg-blue-600 { background-color: #3b82f6 !important; }
body.light-mode .widget-card:hover { background-color: #ffffff !important; border-color: #3b82f6 !important; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
body.light-mode .bg-slate-900\/80 { background-color: rgba(255,255,255, 0.8) !important; }
body.light-mode .bg-slate-900\/50 { background-color: #f1f5f9 !important; }
body.light-mode ::-webkit-scrollbar-track { background: #f8fafc; }
body.light-mode ::-webkit-scrollbar-thumb { background: #cbd5e1; border: 2px solid #f8fafc; }
body.light-mode ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
body.light-mode .modal-scrollbar::-webkit-scrollbar-track { background: #ffffff; }
body.light-mode .flutter-screen { background-color: #ffffff; border-color: #e2e8f0; box-shadow: 0 20px 30px -10px rgba(0,0,0,0.1); }
body.light-mode .modal-visual-pattern { background-image: radial-gradient(#cbd5e1 1.5px, transparent 1.5px); opacity: 0.5 !important; }
body.light-mode div:where(.swal2-container) div:where(.swal2-popup) { background: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 10px 40px -10px rgba(0,0,0,0.1) !important; }
body.light-mode div:where(.swal2-container) .swal2-title { color: #0f172a !important; }
body.light-mode div:where(.swal2-container) .swal2-html-container { color: #475569 !important; }
body.light-mode div:where(.swal2-container) input { background: #f8fafc !important; border: 1px solid #cbd5e1 !important; color: #0f172a !important; }

/* Estilos Base (Dark Mode) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0f172a; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; border: 2px solid #0f172a; }
::-webkit-scrollbar-thumb:hover { background: #475569; }
.modal-scrollbar::-webkit-scrollbar-track { background: #1e293b; margin: 4px 0; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.bg-icon-rotated { position: absolute; right: -25px; bottom: -25px; font-size: 8rem; transform: rotate(12deg); opacity: 0.1; pointer-events: none; z-index: 0; transition: all 0.3s ease; }
.group:hover .bg-icon-rotated { transform: rotate(0deg) scale(1.1); opacity: 0.2; }
.flutter-screen { background-color: #1e293b; border-radius: 12px; box-shadow: 0 10px 30px -5px rgba(0,0,0,0.5); overflow: hidden; position: relative; font-family: 'Inter', sans-serif; border: 1px solid #334155; }
.modal-visual-pattern { background-image: radial-gradient(#334155 1px, transparent 1px); background-size: 16px 16px; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] summary .accordion-chevron { transform: rotate(90deg); }
details[open] div { animation: slideDown 0.2s ease-out; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }
.modal-animate { animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes heartBeat { 0% { transform: scale(1); } 14% { transform: scale(1.3); } 28% { transform: scale(1); } 42% { transform: scale(1.3); } 70% { transform: scale(1); } }
.heart-animate { animation: heartBeat 0.5s ease-in-out; }