/* Ascan — ajustes propios sobre NODO Metro: login, barra de periodo, avisos, form de clave, filas con acción. */

/* Login: pantalla completa, sin cromo de app */
.login {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--m-accent); color: #fff; box-sizing: border-box;
}
.login[hidden] { display: none; }
.login__caja { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; }
.login__marca { margin: 0; font-weight: 300; font-size: 56px; letter-spacing: -1px; text-transform: lowercase; line-height: 1; }
.login__sub { margin: 0 0 18px; font-size: 16px; opacity: .85; }
.login__campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; text-transform: lowercase; letter-spacing: .4px; }
.login__campo input {
  font: inherit; font-size: 18px; padding: 10px 2px; min-height: 44px; box-sizing: border-box;
  border: 0; border-bottom: 2px solid rgba(255,255,255,.7); background: transparent; color: #fff; border-radius: 0; outline: none;
}
.login__campo input:focus { border-bottom-color: #fff; }
.login__boton { margin-top: 10px; min-height: 48px; background: #fff; color: var(--m-accent); font-size: 16px; }
.login__mal { margin: 0; padding: 10px; background: rgba(0,0,0,.25); font-size: 14px; }
.login__mal[hidden] { display: none; }

/* Barra de periodo (Faltas, Detalle): fechas + botones en una franja */
.barra-periodo {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  padding: 0 16px 12px;
}
.barra-periodo label { display: flex; flex-direction: column; font-size: 12px; gap: 2px; text-transform: lowercase; }
.barra-periodo input[type=date] { min-height: 44px; padding: 6px 8px; font: inherit; border: 1px solid var(--m-border, #ccc); background: var(--m-surface); color: inherit; }
.barra-periodo button { min-height: 44px; padding: 0 16px; font: inherit; border: 0; background: var(--m-accent); color: #fff; cursor: pointer; }
.barra-periodo button:not(.primario) { background: var(--m-surface-2, #e5e5e5); color: inherit; }

/* Avisos a bloque: rojo, tibio y verde (siempre con texto, no solo color) */
.aviso-malo, .aviso-tibio, .aviso-ok {
  margin: 0 0 14px; padding: 12px 14px; font-size: 14px; border-left: 4px solid;
}
.aviso-malo { border-color: var(--m-danger); background: rgba(232,17,35,.08); }
.aviso-tibio { border-color: var(--m-warn); background: rgba(255,185,0,.10); }
.aviso-ok { border-color: var(--m-ok); background: rgba(16,124,16,.08); }

/* Fila con acción (Cierre): título + estado a la izquierda, botón a la derecha */
.fila-accion {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--m-border, #e0e0e0);
}
.fila-accion button { min-height: 44px; padding: 0 16px; font: inherit; border: 0; cursor: pointer; }
.fila-accion .primario { background: var(--m-accent); color: #fff; }

/* Formulario de clave */
.form-clave { display: flex; flex-direction: column; gap: 14px; max-width: 420px; padding: 8px 0; }
.form-clave label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.form-clave input { min-height: 44px; padding: 8px 10px; font: inherit; font-size: 16px; border: 1px solid var(--m-border, #ccc); background: var(--m-surface); color: inherit; box-sizing: border-box; }
.form-clave button { min-height: 48px; font: inherit; border: 0; background: var(--m-accent); color: #fff; cursor: pointer; }

/* Pantallas anchas (PC): la lista usa el ancho; en celular queda a pantalla completa */
@media (min-width: 900px) {
  .barra-periodo { padding: 0 24px 12px; }
  .login__marca { font-size: 72px; }
}