/**
 * 05-acceso.css — Pantalla de entrada y avisos de estado de la sesión.
 *
 * La pantalla de acceso es lo primero que ve el equipo cada mañana, así que
 * carga el morado de marca de forma más franca que el resto de la aplicación:
 * un lavado suave detrás de una tarjeta blanca. Dentro del flujo el acento se
 * reserva para la estructura, porque ahí lo que manda son las cifras.
 */

/* `display:flex` de una clase le gana al `display:none` que el navegador
   aplica al atributo `hidden`. Sin esta primera regla, la pantalla de acceso
   seguiría tapando la aplicación después de entrar. */
.acceso[hidden] { display: none; }

.acceso {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  /* Lavado diagonal con los dos morados de marca, muy diluidos. */
  background:
    radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--acc) 14%, transparent) 0%, transparent 60%),
    radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--acc2) 10%, transparent) 0%, transparent 55%),
    var(--bg);
}

.acceso-caja {
  width: 100%;
  max-width: 372px;
  padding: 30px 28px 26px;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: var(--shadow);
}

.acceso-marca { margin-bottom: 14px; }
.acceso-marca .org {
  font-family: var(--f-num);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--acc);
  margin-left: 12px;
}
.acceso-marca .wm {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 3px;
  font-family: var(--f-num);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tx);
}
.acceso-marca .wm::before {
  content: "";
  display: block;
  width: 3px;
  height: 17px;
  background: var(--acc);
}

.acceso-caja input[type=email],
.acceso-caja input[type=password] {
  width: 100%;
  padding: 7px 9px;
  font-size: 13.5px;
}

.acceso-error {
  padding: 8px 11px;
  margin-bottom: 14px;
  background: var(--negSoft);
  border: 1px solid var(--neg);
  border-radius: var(--r);
  color: var(--neg);
  font-size: 12px;
}
.acceso-error[hidden] { display: none; }

/* ── Indicadores de la barra superior ────────────────────────────────────── */

/* Aviso de escritura en vuelo. Discreto a propósito: la interfaz ya respondió
   de forma optimista y bloquearla mientras confirma sería castigar al usuario
   por tener red. */
.ocupado {
  font-family: var(--f-num);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amb);
}
.ocupado[hidden] { display: none; }

#usuarioChip:empty { display: none; }