/* Vital54 - Estilos Nativos Mobile-First, Alto Contraste y Ergonomía */ :root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); } /* Modo Claro (Default cuando no tiene clase .dark) */ body { background-color: #f1f5f9; color: #0f172a; } #app-wrapper { background-color: #ffffff; border-color: #cbd5e1; } /* Modo Oscuro (Cuando tiene clase .dark en ) */ html.dark body { background-color: #030712; color: #f8fafc; } html.dark #app-wrapper { background-color: #0b0f19; border-color: #1e293b; } /* Glassmorphism */ .glass-panel { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(0, 0, 0, 0.1); } html.dark .glass-panel { background: rgba(11, 15, 25, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.12); } /* Touch targets ergonómicos para móvil (48px+) */ .touch-target { min-height: 48px; min-width: 48px; } /* Custom scrollbars */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.5); border-radius: 9999px; } ::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.8); } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* Safe areas para móvil */ .safe-bottom { padding-bottom: max(1rem, env(safe-area-inset-bottom)); } .safe-top { padding-top: max(1rem, env(safe-area-inset-top)); } /* Deshabilitar tap highlight en navegadores móviles */ * { -webkit-tap-highlight-color: transparent; }