/**
 * Campus Latino Real — Pantallas de acceso (login, recuperar acceso,
 * seleccionar perfil, acceso denegado). Reutilizado responsablemente
 * desde CAMPUS LATINO MOCK (identidad visual únicamente).
 */
.auth-form .field { margin-bottom: var(--space-sm); }

/* Campo con icono dentro del input (nunca un SVG suelto entre label e
   input, que rompería el alto del formulario). */
.input-with-icon { position: relative; }
.input-with-icon input { padding-left: 2.5rem; }
.input-with-icon__icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  pointer-events: none;
}
.input-with-icon__icon.ui-icon { width: 20px; height: 20px; }

.auth-form__row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-md); font-size: var(--font-size-sm); }
.auth-form__links { display: flex; flex-direction: column; gap: 0.4rem; margin-top: var(--space-sm); font-size: var(--font-size-sm); text-align: center; }

/* ---- Selección de perfil (#/seleccionar-perfil) ---- */
.role-select-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-sm); margin-top: var(--space-md); }
.role-select-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  width: 100%;
  text-align: left;
}
.role-select-card:hover,
.role-select-card:focus-visible { border-color: var(--color-blue); box-shadow: var(--shadow-sm); }
.role-select-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-blue-soft);
  color: var(--color-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.role-select-card__icon svg { width: 22px; height: 22px; }
.role-select-card__profile { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-text); }
.role-select-card__code { font-size: var(--font-size-xs); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--color-text-muted); }
.role-select-card__meta { font-size: var(--font-size-xs); color: var(--color-text-secondary); display: flex; flex-wrap: wrap; gap: 0.3rem; }