/* Las pantallas de ingreso (login_pin.html, login_password.html y su escena,
   _login_escena.html). Estaban en <style> de las plantillas: la
   Content-Security-Policy no deja estilos en linea. Solo lo cargan esas
   pantallas. */

/* ---- la escena ---- */
/* ---- escena: dos paneles en escritorio, uno arriba del otro en el celular ---- */
.login-escena {
  display: grid;
  gap: 16px;
  min-height: calc(100svh - 64px);
  align-content: center;
}
@media (min-width: 1024px) {
  .login-escena {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 24px;
    align-content: stretch;
  }
}

/* ---- la marca: solida, verde azulado profundo ---- */
.login-marca {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio-panel, 20px);
  background-color: #06302d;
  color: #ffffff;
  padding: 24px;
  box-shadow: var(--sombra-2, 0 12px 32px -12px rgba(6, 48, 45, .45));
}
@media (min-width: 1024px) {
  .login-marca { padding: 48px; display: flex; align-items: flex-end; }
}
/* luces y una trama de puntos, en una capa aparte para que el texto tenga
   un fondo liso (y se pueda medir su contraste) */
.login-marca-deco {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 88% 12%, rgba(47, 191, 172, .42), transparent 62%),
    radial-gradient(50% 60% at 6% 96%, rgba(23, 160, 142, .30), transparent 60%),
    radial-gradient(circle at 1px 1px, rgba(201, 246, 238, .16) 1px, transparent 1.5px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(160deg, #000 30%, transparent 95%);
  mask-image: linear-gradient(160deg, #000 30%, transparent 95%);
}
.login-marca-capsula {
  position: absolute; right: -14%; top: -18%; width: 78%; max-width: 560px;
  fill: none; stroke: rgba(149, 236, 221, .16); stroke-width: 1.2; pointer-events: none;
}
.login-marca-capsula .interior { stroke: rgba(149, 236, 221, .10); }
@media (max-width: 1023px) { .login-marca-capsula { width: 46%; right: -8%; top: -30%; } }
.login-marca-contenido { position: relative; }
.login-logo { width: 44px; height: 44px; }
@media (min-width: 1024px) { .login-logo { width: 72px; height: 72px; } }
.logo-trazo { fill: none; stroke: #95ecdd; stroke-width: 3; stroke-linecap: round; }
.logo-mitad { fill: #2fbfac; }
.logo-cruz { fill: none; stroke: #c9f6ee; stroke-width: 3.5; stroke-linecap: round; }

.login-nombre {
  margin-top: 12px;
  font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.01em;
}
.login-nombre span { color: #5cdac8; }
.login-lema { margin-top: 4px; font-size: 14px; line-height: 20px; color: #c4e3de; }
@media (min-width: 1024px) {
  /* tamanio display: la unica excepcion a la escala tipografica, solo para
     la marca en el login (ver DESIGN.md) */
  .login-nombre { margin-top: 20px; font-size: 44px; line-height: 52px; letter-spacing: -0.02em; }
  .login-lema { font-size: 16px; line-height: 24px; max-width: 26ch; }
}

.login-datos { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: #e6f7f4; }
.login-datos > div { display: flex; align-items: center; gap: 8px; }
.login-datos dt { color: #95ecdd; display: flex; }
.login-datos-reloj dd { font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) {
  .login-datos { margin-top: 40px; flex-direction: column; font-size: 16px; }
}

/* ---- el panel de ingreso ---- */
.login-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.login-tarjeta {
  width: 100%; max-width: 400px;
  border-radius: var(--radio-panel, 20px);
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 24px;
  box-shadow: var(--sombra-2, 0 12px 32px -12px rgba(6, 48, 45, .25));
}
@media (min-width: 640px) { .login-tarjeta { padding: 32px; } }

/* ---- la entrada: ninguna propia. La pantalla del PIN se ve cada vez que
   cambia quien atiende, varias veces por turno: aparece directo, como en
   main (con la entrada de pagina de base.css). Antes el logo se dibujaba
   trazo por trazo, la capsula del fondo tambien, el texto entraba renglon por
   renglon, los usuarios de a uno y el fondo "respiraba": el ingreso gastaba
   al cargar el doble de procesador que en main (pruebas/cpu_carga.py). ---- */
@keyframes aparecer { to { opacity: 1; } }
@keyframes subir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- ingreso con PIN ---- */
.login-usuario {
  display: flex; width: 100%; min-height: 64px; align-items: center; gap: 12px;
  border: 1px solid #e2e8f0; border-radius: 14px; background: #ffffff;
  padding: 10px 12px; text-align: left;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s var(--curva-resorte, ease);
}
.login-usuario:hover { border-color: #5cdac8; box-shadow: 0 8px 20px -12px rgba(11, 67, 64, .45); transform: translateY(-1px); }
.login-usuario:active { transform: scale(.985); }
.login-usuario:focus-visible { outline: none; border-color: #17a08e; box-shadow: 0 0 0 4px rgba(23, 160, 142, .22); }
.login-usuario-entrar {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; font-weight: 500; color: #0a655d;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .2s ease, transform .2s ease;
}
.login-usuario:hover .login-usuario-entrar,
.login-usuario:focus-visible .login-usuario-entrar { opacity: 1; transform: none; }
@media (hover: none) { .login-usuario-entrar { opacity: 1; transform: none; } .login-usuario-entrar span { display: none; } }

/* un color por persona (el id), todos con texto oscuro sobre fondo claro: AA */
.login-avatar {
  display: flex; height: 44px; width: 44px; flex-shrink: 0; align-items: center; justify-content: center;
  border-radius: 9999px; font-size: 14px; font-weight: 500;
  transition: transform .25s var(--curva-resorte, ease);
}
.login-usuario:hover .login-avatar { transform: scale(1.06); }
.login-avatar-grande { height: 72px; width: 72px; font-size: 24px; }
/* los colores de cada persona (.avatar-0 a .avatar-5) estan en diseno.css */

/* ---- teclado del PIN ---- */
.tecla-pin {
  display: flex; height: 56px; align-items: center; justify-content: center;
  border: 1px solid #e2e8f0; border-radius: 12px; background: #ffffff;
  font-size: 20px; line-height: 28px; font-weight: 500; color: #334155;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.tecla-pin:hover { border-color: #5cdac8; background: #eefcfa; }
.tecla-pin:active { transform: scale(0.95); background: #d7f5ef; }
.tecla-pin:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(23, 160, 142, 0.2); }
.tecla-pin-suave { color: #475569; }

.pin-punto {
  width: 14px; height: 14px; border-radius: 9999px;
  background: #e2e8f0; transition: background-color .15s ease;
}
.pin-punto.lleno { background: #0d8074; animation: puntoLleno .28s var(--curva-resorte, ease); }
@keyframes puntoLleno { 0% { transform: scale(.4); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
.sacudir { animation: sacudir .42s ease; }
@keyframes sacudir {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); } 40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(3px); }
}

/* ---- la entrada de lo propio del PIN (la marca y la tarjeta estan en
   _login_escena.html): los usuarios llegan de a uno y los pasos se
   deslizan. ---- */
@media (prefers-reduced-motion: no-preference) {
  .login-paso.entra { animation: deslizar .32s var(--curva-salida, ease-out); }
  .login-paso.vuelve { animation: deslizarVuelta .32s var(--curva-salida, ease-out); }
}
@keyframes deslizar { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes deslizarVuelta { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pin-punto.lleno, .sacudir { animation: none; }
}