/***********************************************************/
/*                                                         */
/* Plataforma e-ducativa - Argentina                       */
/*                                                         */
/* Copyright (c) 2026 de e-ducativa Educación Virtual S.A. */
/*                                                         */
/***********************************************************/
/* ----------------------------------------------------------------
   EDU_MEDIDOR_CLAVE - Nivel de seguridad de una clave
   ---------------------------------------------------------------- */

/* Tres barras y la leyenda "Nivel de seguridad: Medio" debajo del campo.
   El DOM lo arma Educativa/Aula/MedidorClave.js.
   El color de la leyenda se hereda: el componente tambien va sobre fondos
   oscuros, como el cambio de clave del catalogo.
   Spec: .claude/skills/css-components/references/edu_medidor_clave.md */

/* ---------
   Variables
   --------- */
:root {
    --edu-medidor-clave-bajo: var(--theme-danger, #be2731);
    --edu-medidor-clave-medio: var(--theme-warning, #ffc107);
    --edu-medidor-clave-alto: var(--theme-success, #198654);
    --edu-medidor-clave-vacia: rgba(128, 128, 128, .3);
    --edu-medidor-clave-ancho: 372px;
}

/* ----
   Base
   ---- */
.edu_medidor_clave {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--edu-medidor-clave-ancho);
    margin-top: 6px;
    font-size: .813rem;
    line-height: 1.3;
}

.edu_medidor_clave[hidden] { display: none; }

.edu_medidor_clave_barras {
    display: flex;
    gap: 4px;
    margin-bottom: 3px;
}
.edu_medidor_clave_barras span {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background-color: var(--edu-medidor-clave-vacia);
    transition: background-color .15s ease;
}

/* -------
   Niveles
   ------- */
.edu_medidor_clave_bajo  .edu_medidor_clave_barras span:nth-child(-n+1) { background-color: var(--edu-medidor-clave-bajo); }

.edu_medidor_clave_medio .edu_medidor_clave_barras span:nth-child(-n+2) { background-color: var(--edu-medidor-clave-medio); }

.edu_medidor_clave_alto  .edu_medidor_clave_barras span                 { background-color: var(--edu-medidor-clave-alto); }

@media (prefers-reduced-motion: reduce) {
    .edu_medidor_clave_barras span { transition: none; }
}