:root {
            /* Paleta de colores solicitada */
            --color-white: #fcfcfc;
            --color-dark-blue: #2543a2;
            --color-med-dark-blue: #2b66b1;
            --color-med-light-blue: #3289c1;
            --color-cyan: #39add1;

            /* Configuración de temas utilizando la paleta */
            --bg-body-dark: #121826;
            --bg-card-dark: #1a233a;
            --border-dark: #2b66b1;

            --bg-body-light: #fcfcfc;
            --bg-card-light: #ffffff;
            --border-light: #cbd5e1;
        }

        html.dark body {
            background-color: var(--bg-body-dark);
            color: var(--color-white);
        }

        html:not(.dark) body {
            background-color: var(--bg-body-light);
            color: #1e293b;
        }

        .login-brand-logo {
            width: min(270px, 78vw);
            height: auto;
            object-fit: contain;
        }

        .login-panel {
            background: rgba(26, 35, 58, .92);
            border: 1px solid rgba(57, 173, 209, .22);
            box-shadow: 0 24px 70px rgba(2, 6, 23, .28);
        }

        html:not(.dark) .login-panel {
            background: rgba(255, 255, 255, .96);
            border-color: #dbe4ef;
            box-shadow: 0 24px 70px rgba(37, 67, 162, .14);
        }

        @media (max-width: 640px) {
            body { min-height: 100dvh; height: auto !important; }
            .login-content { padding: 72px 16px 28px !important; align-items: flex-start !important; }
            .login-panel { padding: 24px 20px !important; border-radius: 20px; }
            .login-brand-logo { width: 210px; }
        }