/* --- ESTILOS PARA SENSACIÓN NATIVA --- */
html, body {
    background-color: #0f172a; /* Slate-950 */
    overscroll-behavior: none; /* Evita el rebote elástico */
    -webkit-tap-highlight-color: transparent; /* Quita el cuadro azul al tocar */
    -webkit-touch-callout: none; /* Quita menús contextuales al mantener pulsado */
    user-select: none; /* Evita que el usuario seleccione texto como en una web */
    -webkit-user-select: none;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    height: 100%;
    width: 100%;
    overflow: hidden; /* Control total del scroll */
}

/* Permitir seleccionar texto SOLO en inputs y textareas */
input, textarea {
    user-select: text !important;
    -webkit-user-select: text !important;
}

/* Animaciones */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn 0.4s ease-out forwards; }

/* Scrollbar invisible pero funcional */
::-webkit-scrollbar { width: 0px; background: transparent; }

/* --- MAGMA MODE: Inputs --- */
/* Color base cambiado a Orange-500 */
input[type=range] { accent-color: #f97316; }

/* Rango amarillo para grasas/acento (Yellow-400) */
input.range-yellow[type=range] { accent-color: #facc15; }

/* Asegurar que el contenedor raíz ocupe todo */
#root {
    height: 100%;
    overflow-y: auto; /* El scroll ocurre aquí, no en el body */
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
    padding-bottom: env(safe-area-inset-bottom);
}

/* --- MAGMA MODE: Loader Inicial --- */
/* Cambiado de verde a Naranja Vibrante (#f97316) */
#initial-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #f97316; /* Orange-500 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #0f172a; /* Slate-950 */
    z-index: 9999;
    transition: opacity 0.5s ease-out;
}

.pulse-logo { animation: pulse 2s infinite; }
@keyframes pulse { 
    0% { opacity: 0.6; transform: scale(0.95); } 
    50% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.5)); } 
    100% { opacity: 0.6; transform: scale(0.95); } 
}

/* Utilidades extra para el onboarding */
.avatar-stack { display: flex; justify-content: center; }
.avatar-stack img, .avatar-stack .avatar-placeholder { 
    width: 40px; height: 40px; border-radius: 50%; border: 2px solid #0f172a; margin-left: -10px; 
    background-color: #1e293b; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; color: #cbd5e1;
}
.avatar-stack > :first-child { margin-left: 0; }