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

    :root {
        --brand-red: #E63946;      /* Tu rojo personalizado */
        --brand-red-dark: #D62828; /* Rojo para hover */
        --brand-bg: #F3F4F6;       /* Gris muy suave de fondo */
        --brand-text: #212529;
        --brand-gray: #6C757D;
    }

    body {
        font-family: 'Plus Jakarta Sans', sans-serif;
        background-color: var(--brand-bg);
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .login-wrapper {
        background: #fff;
        border-radius: 20px; /* Bordes más redondeados que el estándar */
        box-shadow: 0 15px 35px rgba(0,0,0,0.05); /* Sombra suave y difusa */
        overflow: hidden;
        width: 100%;
        max-width: 1000px;
        min-height: 600px;
    }

    /* Columna Izquierda (Branding) */
    .brand-side {
        background: var(--brand-red);
        background: linear-gradient(135deg, var(--brand-red) 0%, #C91828 100%); /* Degradado sutil */
        color: white;
        position: relative;
    }
    
    .brand-side::before {
        /* Patrón decorativo opcional */
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    /* Columna Derecha (Formulario) */
    .form-side {
        padding: 3rem;
    }

    /* Overrides de Bootstrap para quitar el color azul por defecto */
    .form-control:focus {
        border-color: var(--brand-red);
        box-shadow: 0 0 0 0.25rem rgba(230, 57, 70, 0.15); /* Tu rojo con transparencia */
    }

    .form-floating label {
        color: var(--brand-gray);
    }

    .btn-brand {
        background-color: var(--brand-red);
        border-color: var(--brand-red);
        color: white;
        padding: 12px 20px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-brand:hover {
        background-color: var(--brand-red-dark);
        border-color: var(--brand-red-dark);
        transform: translateY(-2px); /* Pequeño efecto de elevación */
    }

    .link-brand {
        color: var(--brand-gray);
        text-decoration: none;
        font-size: 0.9rem;
        transition: color 0.2s;
    }

    .link-brand:hover {
        color: var(--brand-red);
    }

    .institute-links li {
        list-style: none;
        font-size: 0.9rem;
        opacity: 0.9;
    }
    .institute-links a {
        color: white;
        text-decoration: none;
        font-weight: 600;
    }

    /* Ajuste responsivo */
    @media (max-width: 991px) {
        .login-wrapper { max-width: 500px; }
        .brand-side { display: none; } /* Ocultamos la parte roja en móviles para simplificar */
    }