/**
 * ONLAB Campus — Pantallas de acceso (login, recuperar acceso,
 * seleccionar perfil, acceso denegado). Reutilizado responsablemente
 * desde el prototipo visual previo (identidad visual únicamente).
 */
/* ---- Cabecera de identidad (components/brand-header.js) ----
   Institución como identidad principal; producto como línea secundaria. */
.brand-header { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-md); }
.brand-header__logo { flex-shrink: 0; object-fit: contain; }
.brand-header--auth .brand-header__logo { width: 52px; height: 52px; }
.brand-header--compact .brand-header__logo { width: 40px; height: 40px; }
.brand-header__text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.brand-header__institution { font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); line-height: var(--line-height-tight); color: var(--color-primary-deep); }
.brand-header--compact .brand-header__institution { font-size: var(--font-size-md); }
.brand-header__product { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.brand-header__demo {
  align-self: flex-start;
  margin-top: 0.2rem;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-warning-border);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: 0.7rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
}

.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-primary); box-shadow: var(--shadow-sm); }
.role-select-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  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; }

/* ---- Selector de perfiles DEMO (#/demo · ONC-3) ---- */
.auth-card.demo-explorer { max-width: 760px; }
.demo-persona-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: var(--space-sm);
}
.demo-persona-grid__item { display: flex; min-width: 0; }
.demo-persona-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  width: 100%;
  min-height: 44px;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.demo-persona-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.demo-persona-card:focus-visible { border-color: var(--color-primary); box-shadow: var(--shadow-sm); outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.demo-persona-card:disabled { cursor: progress; opacity: 0.7; }
.demo-persona-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.demo-persona-card__icon svg { width: 22px; height: 22px; }
.demo-persona-card__title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.demo-persona-card__desc { font-size: var(--font-size-xs); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.demo-persona-card__cta { margin-top: auto; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-primary); }
.demo-explorer__note { margin-top: var(--space-md); font-size: var(--font-size-xs); color: var(--color-text-secondary); text-align: center; }
.demo-data-notice { margin-bottom: var(--space-sm); }