:root {
    --gs-primary: #0b4a68;
    --gs-accent: #22a79b;
    --gs-ink: #111827;
    --gs-muted: #667085;
    --gs-border: #d7dee8;
    --gs-surface: #ffffff;
}

body.login-ui,
div.login-ui {
    min-height: 100vh;
    background:
        radial-gradient(circle at 18% 18%, rgba(34, 167, 155, 0.16), transparent 28rem),
        linear-gradient(135deg, #f5f8fb 0%, #edf3f7 52%, #ffffff 100%);
    color: var(--gs-ink);
    font-family: Carlito, Arial, sans-serif;
}

.login-ui .login-dialog-middle {
    padding: 2rem 1rem;
}

.login-ui .login-dialog {
    position: relative;
    max-width: 28rem;
    padding: 2.1rem 2rem 1.5rem;
    border: 1px solid var(--gs-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 70px rgba(11, 74, 104, 0.16);
}

.login-ui .login-dialog::before {
    content: "Acceso remoto seguro";
    display: block;
    margin-bottom: 1.35rem;
    color: var(--gs-muted);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.login-ui .login-dialog .logo {
    display: block;
    width: min(20rem, 86vw);
    height: 6.95rem;
    margin: 0 auto 1rem;
    border-radius: 0;
    background: url("images/gs-conecta-logo.png?v=20260620") center / contain no-repeat;
    box-shadow: none;
}

.login-ui .login-dialog .logo::after {
    content: none;
}

.login-ui .login-dialog .version {
    padding: 0 0 1.15rem;
}

.login-ui .login-dialog .version .app-name {
    color: var(--gs-primary);
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.login-ui .login-dialog .version .version-number {
    position: static;
    display: block;
    margin: 0.25rem 0 0;
    padding: 0;
    color: var(--gs-muted);
    background: transparent;
    font-size: 0.86rem;
    font-style: normal;
    opacity: 1;
    text-align: center;
}

.login-ui .login-dialog .login-fields input {
    min-height: 2.75rem;
    border: 1px solid var(--gs-border);
    border-radius: 8px;
    background: #fbfcfe;
    box-shadow: none;
}

.login-ui .login-dialog .login-fields input:focus {
    border-color: var(--gs-accent);
    outline: 2px solid rgba(34, 167, 155, 0.18);
}

.login-ui .login-dialog .buttons input[type="submit"] {
    min-height: 2.75rem;
    border: 0;
    border-radius: 8px;
    background: var(--gs-primary);
    box-shadow: 0 12px 20px rgba(11, 74, 104, 0.18);
    color: #fff;
    font-weight: 700;
}

.login-ui .login-dialog .buttons input[type="submit"]:hover,
.login-ui .login-dialog .buttons input[type="submit"]:focus {
    background: #083b55;
}

.header {
    border-bottom-color: var(--gs-border);
}

.menu,
.user-menu {
    border-color: var(--gs-border);
}