:root {
            --primary-color: #000000; 
            --secondary-color: #009632; 
            --navy-color: #003264; 
            --blue-family-color: #3296FA; 
            --bg-main: #f1f5f9; /* Slate 100 for desktop background */
            --bg-app: #f8fafc; /* Slate 50 for app background */
        }
        body {
            font-family: 'Inter', sans-serif; 
            background-color: var(--bg-main);
            color: var(--primary-color); 
            -webkit-tap-highlight-color: transparent;
            user-select: none; 
            overflow: hidden;
            display: flex;
            justify-content: center;
        }
        
        /* Contenedor principal que simula el móvil en escritorio */
        #mobile-wrapper {
            width: 100%;
            max-width: 480px; /* Tamaño máximo para escritorio */
            height: 100dvh;
            background-color: var(--bg-app);
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 40px rgba(0,0,0,0.1);
            margin: 0 auto;
            
        }

        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        
        .page {
            display: none; opacity: 0; transform: translateY(15px) scale(0.98);
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            height: 100%; overflow-y: auto; padding-bottom: 90px;
        }
        .page.active { display: block; opacity: 1; transform: translateY(0) scale(1); }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.6); 
            box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.05); 
            border-radius: 20px;
        }

        @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
        .shake-animation { animation: shake 0.4s ease-in-out; }

        /* Animaciones extra para el censo */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in {
            animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        /* Brillo sutil para las tarjetas premium */
        .glass-icon {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        /* para inout en residentes  */
        input#res-num-id::-webkit-outer-spin-button,
        input#res-num-id::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
        }

        /* Firefox */
        input#res-num-id[type=number] {
        -moz-appearance: textfield;
        }
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        input[type=number] {
            -moz-appearance: textfield;
}
input, textarea, select {
    -webkit-user-select: text;
    user-select: text;
}