/* Efecto esmerilado/cristal para la tarjeta de login */
.glass-effect {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.dark .glass-effect {
    background: rgba(15, 13, 12, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Patrón de puntos geométricos de fondo — Light */
.pattern-bg {
    background-color: var(--dm-background);
    background-image:
        radial-gradient(var(--dm-outline-variant) 0.5px, transparent 0.5px),
        radial-gradient(var(--dm-outline-variant) 0.5px, var(--dm-background) 0.5px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

/* Inputs dentro del login — fuerzan colores correctos */
.login-input {
    background-color: var(--dm-surface-container-lowest) !important;
    color: var(--dm-on-surface) !important;
    border-color: var(--dm-outline-variant) !important;
}
.login-input::placeholder { color: var(--dm-on-surface-variant) !important; opacity: 0.7; }
.login-input:focus { border-color: var(--dm-primary) !important; }