/* ─── Requisitos de la contraseña ─────────────────────────────────────────
 *
 * La lista que se palomea mientras se teclea. Aparece en las dos superficies
 * —«Mi perfil» dentro del panel, y la pantalla pública donde se establece o
 * se restablece la contraseña con la liga— así que carga sin condición, igual
 * que sagit-logotipo.css y sagit-instalar.css. Vivía dentro de
 * sagit-panel.css, que las pantallas de acceso no cargan: ahí la lista salía
 * sin formato.
 *
 * El estado lo pone `sagit-contrasena.js`. Sin JS, o antes de teclear la
 * primera letra, se ve como una lista de viñetas con guión: sigue diciendo
 * qué se espera, que es lo que de verdad importa. Las palomas son ayuda, no
 * la información.
 *
 * Las medidas van en rem y no en `calc(var(--spacing) * N)`: ese token lo
 * define sagit-tokens.css, que sólo carga el panel. Este archivo tiene que
 * pintarse igual en las dos.
 */
.sagit-requisitos {
    font-size: 0.8125rem;
    line-height: 1.6;
    /* `--sagit-atenuado` lo define sagit-panel.css y sólo existe en el panel;
       en las pantallas de acceso el equivalente es `--sagit-tenue`, que sí se
       emite en los dos contextos desde `TenantBranding::tokens()`. Sin este
       respaldo la declaración es inválida y el texto hereda el color del
       cuerpo: la lista salía del mismo tono que el resto. */
    color: var(--sagit-atenuado, var(--sagit-tenue));
}

.sagit-requisitos__intro {
    margin: 0 0 0.33rem;
}

.sagit-requisitos__lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sagit-requisitos__lista li {
    /* El hueco de la marca se reserva desde el principio: sin él, la lista
       entera brinca de sitio en cuanto se teclea la primera letra. */
    padding-inline-start: 1.1rem;
    position: relative;
}

/* Sólo para lectores de pantalla: la palabra «cumplido» o «falta» que el JS
   escribe en cada renglón. `clip-path` y no `display:none`, que sí lo
   ocultaría también del lector. */
.sagit-solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.sagit-requisitos__lista li::before {
    content: '–';
    position: absolute;
    inset-inline-start: 0;
    /* Tabular para que las tres marcas —guión, paloma y tacha— ocupen lo
       mismo y el texto no se recorra al cambiar de estado. */
    font-variant-numeric: tabular-nums;
}

/*
 * Verde oscuro en claro, verde de marca en oscuro. Escrito con hexadecimales
 * y no con `var(--sagit-exito, #15803D)`, que era lo que había: ese token SÍ
 * está definido —`Marca::EXITO`, el verde menta #2FD180— así que el respaldo
 * nunca entraba y el tema claro pintaba menta sobre blanco, 1.9 de contraste.
 * La paloma se veía; el renglón al lado, casi no.
 */
.sagit-requisitos__ok {
    color: #15803D;
}

/*
 * Los dos selectores repiten `.sagit-requisitos__lista li` a propósito.
 *
 * Sin eso son (0,1,1) contra los (0,1,2) de la regla del guión de arriba, y
 * pierden: los renglones se pintaban de verde pero seguían con el guión, o
 * sea el color cambiaba y la marca no. Es el clásico de dos reglas propias
 * que se anulan entre ellas — se ve como si el JavaScript estuviera a medias.
 */
.sagit-requisitos__lista li.sagit-requisitos__ok::before {
    content: '✓';
}

/* La falta se marca con la forma, no sólo con el color: quien no distingue
   rojo de verde lee igual la tacha. Y en gris, no en rojo — todavía no es un
   error, es un requisito que aún no se cumple. */
.sagit-requisitos__lista li.sagit-requisitos__falta::before {
    content: '✕';
}

/*
 * Sobre fondo oscuro va el verde de la marca. Las pantallas de acceso son
 * siempre oscuras y no llevan la clase `.dark` que Filament pone en el panel,
 * por eso son dos selectores y no uno.
 */
.dark .sagit-requisitos__ok,
.acceso .sagit-requisitos__ok {
    color: var(--sagit-exito);
}

/* Separada de los campos que describe, no pegada al último. */
.acceso .sagit-requisitos {
    margin-block: 0.5rem 1.25rem;
}