@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root { 
    --nv-navy: #0b1f3a; 
    --nv-navy-2: #12294d; 
    --nv-cyan: #0891b2; 
    --nv-cyan-dark: #0e7490; 
    --nv-paper: #f6f4f0; 
}

html, body { 
    height: 100%; 
    margin: 0; 
    overscroll-behavior-y: none; 
}

body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    background-color: var(--nv-paper); 
    transition: background-color 0.3s ease; 
}

#root { 
    height: 100%; 
}

.app-shell { 
    height: 100vh; 
    height: 100dvh; 
}

.scroll-area { 
    overscroll-behavior-y: contain; 
    -webkit-overflow-scrolling: touch; 
}

.font-display { 
    font-family: 'Space Grotesk', sans-serif; 
}

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

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

.safe-bottom { 
    padding-bottom: env(safe-area-inset-bottom, 0px); 
}

.blueprint-grid { 
    background-image: linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px); 
    background-size: 22px 22px; 
}

@keyframes toast-in { 
    from { opacity: 0; transform: translate(-50%, 12px); } 
    to { opacity: 1; transform: translate(-50%, 0); } 
}

.toast-anim { 
    animation: toast-in 0.25s ease-out; 
}

.card-hover { 
    transition: transform 0.25s ease, box-shadow 0.25s ease; 
}

.card-hover:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 12px 24px -8px rgba(11,31,58,0.18); 
}

@keyframes fade-up { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

@keyframes fade-in { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}

@keyframes scale-in { 
    from { opacity: 0; transform: scale(0.94); } 
    to { opacity: 1; transform: scale(1); } 
}

@keyframes soft-pulse { 
    0%, 100% { box-shadow: 0 0 0 0 rgba(14,116,144,0.35); } 
    50% { box-shadow: 0 0 0 8px rgba(14,116,144,0); } 
}

.anim-fade-up { 
    animation: fade-up 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; 
}

.anim-fade-in { 
    animation: fade-in 0.35s ease-out both; 
}

.anim-scale-in { 
    animation: scale-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; 
}

.anim-pulse-ring { 
    animation: soft-pulse 2.2s ease-in-out infinite; 
}

.press-fx { 
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease; 
}

.press-fx:active { 
    transform: scale(0.96); 
}

.tile-fx { 
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease; 
}

.tile-fx:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 10px 20px -8px rgba(11,31,58,0.15); 
}

.tile-fx:active { 
    transform: translateY(-1px) scale(0.97); 
}

.nav-icon-fx { 
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease; 
}

.nav-active-icon { 
    transform: translateY(-2px) scale(1.08); 
}

.nav-pill { 
    transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1), width 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
}

canvas { 
    touch-action: none; 
}

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

.hide-scrollbar { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

/* Modo Oscuro */
html.dark body, 
html.dark .app-shell, 
html.dark main, 
html.dark select, 
html.dark input, 
html.dark textarea { 
    background-color: #0f172a !important; 
    color: #f1f5f9 !important; 
}

html.dark .bg-white, 
html.dark .bg-slate-50 { 
    background-color: #1e293b !important; 
    color: #f1f5f9 !important; 
}

html.dark .text-slate-800, 
html.dark .text-slate-700, 
html.dark .text-slate-600 { 
    color: #f8fafc !important; 
}

html.dark .text-slate-500, 
html.dark .text-slate-400 { 
    color: #94a3b8 !important; 
}

html.dark .border-slate-200, 
html.dark .border-slate-100, 
html.dark .border-cyan-300 { 
    border-color: #334155 !important; 
}

html.dark .border-t, 
html.dark .border-b { 
    border-color: #334155 !important; 
}

html.dark .bg-cyan-50 { 
    background-color: rgba(14, 116, 144, 0.2) !important; 
}

/* Modo Accesibilidad: Reducir animaciones */
.reducir-animaciones * { 
    animation-duration: 0.01ms !important; 
    animation-iteration-count: 1 !important; 
    transition-duration: 0.01ms !important; 
    scroll-behavior: auto !important; 
}