/* ============================================================================
   password-meter.css — medidor de requisitos de contraseña en tiempo real
   ----------------------------------------------------------------------------
   Componente reutilizable que se incluye junto a un campo de contraseña vía
   templates/partials/_password_requirements.html y lo anima static/js/
   password-meter.js. Las reglas (8 / mayúscula / número / especial) coinciden
   EXACTAMENTE con apps/core/password_validators.py. Aislado: usa variables de
   marca con fallback para funcionar en pantallas con y sin landing.css.
   ============================================================================ */

/* El medidor y el ojo de ver/ocultar (password-meter.js) dibujan sus íconos
   con la clase .material-icons. El panel (panel/base_panel.html) solo carga
   Bootstrap Icons, así que aquí declaramos la fuente Material (local) para que
   el componente sea autocontenido: donde se cargue este CSS, el ojo y los
   íconos de requisitos se ven como glifo y no como el texto "visibility_off".
   En login/reset/registro la fuente ya está cargada y el navegador deduplica. */
@import url("../vendor/material-icons/iconfont/material-icons.css");

.pw-meter {
    display: none;                 /* oculto hasta enfocar/escribir el campo */
    margin: 0.6rem 0 0;
    padding: 0.85rem 1rem;
    background: var(--bg-surface, #f5f8fc);
    border: 1px solid var(--border-color, #e4e9f0);
    border-radius: 0.75rem;
}

.pw-meter.pw-meter--visible {
    display: block;
}

.pw-meter__title {
    margin: 0 0 0.55rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted, #5A6B7D);
}

.pw-meter__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 0.9rem;
}

.pw-req {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    line-height: 1.3;
    color: var(--text-muted, #5A6B7D);
    transition: color 0.15s ease;
}

.pw-req .material-icons {
    font-size: 1.05rem;
    color: #c2ccd6;
    transition: color 0.15s ease;
}

.pw-req.met {
    color: #1f9d63;
}

.pw-req.met .material-icons {
    color: #2dbc7a;
}

@media (max-width: 480px) {
    .pw-meter__list {
        grid-template-columns: 1fr;
    }
}

/* ── Ojo para ver/ocultar la contraseña ────────────────────────────────────
   El JS envuelve el <input type="password"> en .pw-toggle-wrap y le añade el
   botón .pw-toggle-btn. Funciona en login, cambiar y restablecer contraseña. */
.pw-toggle-wrap {
    position: relative;
    display: block;
}

.pw-toggle-wrap > input {
    width: 100%;
    padding-right: 2.75rem !important;
}

.pw-toggle-btn {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted, #5A6B7D);
    transition: color 0.15s ease;
}

.pw-toggle-btn:hover {
    color: var(--primary, #1B4F8A);
}

.pw-toggle-btn .material-icons {
    font-size: 1.2rem;
}