/* Variables (Copias de tus archivos) */
        :root {
            --sidebar-bg: #2f4050; 
            --main-bg: #e9ecef; 
            --header-bg: #ffffff;
            --accent-color: #28a745;
            --text-color: #343a40;
        }

        body {
            font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: var(--main-bg);
            margin: 0;
            overflow: hidden;
            display: flex;
            min-height: 100vh;
        }

        #login-wrapper {
            display: flex;
            width: 100%;
        }

        /* --- Lado Izquierdo: Branding (Escritorio) --- */
        #branding-side {
            background-color: var(--sidebar-bg);
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 2rem;
            width: 24%;
            position: relative;
        }
        
        .branding-logo {
            font-size: 2.5rem;
            font-weight: 600;
            color: var(--accent-color);
        }
        
        /* Estilo para el Copyright anclado */
        .copyright-footer {
            position: absolute;
            bottom: 1.5rem;
            left: 0;
            right: 0;
            padding: 0 2rem;
            font-size: 0.75rem;
            opacity: 0.7;
        }

        /* --- Lado Derecho: Formulario --- */
        #form-side {
            background-color: var(--main-bg);
            display: flex;
            justify-content: center;
            align-items: center; 
            padding: 2rem;
            flex-grow: 1; 
            flex-direction: column;
        }
        
        #login-card {
            background-color: var(--header-bg);
            padding: 2.5rem;
            border-radius: 0.75rem;
            max-width: 450px;
            width: 100%;
            box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
        }
        
        /* Estilo para el Powered By (separado del formulario) */
        .powered-by-footer {
            margin-top: 1.5rem;
            text-align: center;
        }
        
        /* --- ESTILOS PARA LA VALIDACIÓN DE JQUERY (errores en color rojo) --- */
        .error {
            color: #dc3545; /* Color de error de Bootstrap (rojo) */
            font-size: 0.85rem;
            margin-top: 0.25rem;
        }
        
        input.error {
            border-color: #dc3545; /* Borde rojo en el campo con error */
            padding-right: calc(1.5em + 0.75rem); /* Espacio para el icono */
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right calc(0.375em + 0.1875rem) center;
            background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
        }

        /* --- ESTILOS RESPONSIVOS PARA MÓVILES --- */
        @media (max-width: 767.98px) {
            #branding-side { display: none; }
            #form-side {
                width: 100%; 
                align-items: center; 
                padding: 1.5rem; 
            }
            #login-card {
                background-color: transparent; 
                box-shadow: none; 
                padding: 0;
                max-width: 90%; 
            }
            .mobile-logo {
                display: block !important; 
                font-size: 2.5rem;
                font-weight: 700;
                color: var(--accent-color);
                margin-bottom: 2rem;
            }
            .powered-by-footer {
                margin-top: 3rem;
            }
        }