/* ==========================================================================
   Nexo · portada (pantalla de acceso)
   Pensada primero para el móvil: la tarjeta entra en una pantalla sin
   desplazamiento y las claves del demo solo aparecen si se piden.
   ========================================================================== */

.auth-card {
  width: min(430px, 100%);
  padding: clamp(20px, 5vw, 34px);
}

.auth-brand { margin-bottom: 18px; }
.auth-card h1 { font-size: clamp(20px, 5.4vw, 25px); line-height: 1.2; margin: 0 0 6px; }
.auth-lead { font-size: 11px; line-height: 1.55; margin-bottom: 18px; }
.auth-tabs { margin-bottom: 16px; }
.auth-form { gap: 11px; }

/* -------------------------- Accesos de demostración -------------------------- */
.demo-access { margin-top: 20px; padding-top: 16px; }
.demo-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.demo-access h2 { margin: 0; font-size: 10px; }
.demo-hint { margin: 4px 0 12px; font-size: 9px; color: var(--muted); }
.demo-toggle {
  border: 0; background: transparent; color: var(--purple);
  font-size: 9px; font-weight: 750; padding: 2px 0;
}
.demo-toggle:hover { color: var(--purple-dark); }

/* Cuatro roles en una rejilla compacta: un toque y dentro. */
.role-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.role-chip {
  display: grid; justify-items: center; gap: 5px;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 12px; padding: 11px 4px;
  font-size: 9px; font-weight: 700; color: #5b5869;
  transition: .16s ease;
}
.role-chip:hover { border-color: #c9c0f0; background: #fbfaff; transform: translateY(-1px); }
.role-chip:active { transform: none; }
.role-chip:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.role-icon { font-size: 17px; line-height: 1; }

/* Credenciales: ocultas por defecto, legibles cuando se piden. */
.demo-creds { display: grid; gap: 6px; margin-top: 12px; }
.demo-creds.hidden { display: none; }
.cred-row {
  display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center;
  gap: 6px 8px; padding: 8px 9px; background: #faf9fd;
  border: 1px solid var(--line); border-radius: 10px;
}
.cred-role { font-size: 8px; font-weight: 800; color: var(--purple-dark); text-transform: uppercase; letter-spacing: .5px; }
.cred-user, .cred-pass {
  font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cred-pass { grid-column: 2; color: var(--muted); }
.cred-row .copy-button { grid-row: 1 / 3; grid-column: 3; }

.auth-credit { margin-top: 16px; }

/* --------------------------------- Celular --------------------------------- */
@media (max-width: 560px) {
  .auth-screen { padding: 16px 12px 22px; align-items: start; }
  .auth-card { border-radius: 20px; box-shadow: 0 14px 34px rgba(39, 31, 78, .09); }
  .auth-brand { margin-bottom: 14px; }
  .auth-brand .brand-copy strong { font-size: 19px; }
  .auth-card h1 { font-size: 21px; letter-spacing: -.7px; }
  .auth-lead { font-size: 10.5px; margin-bottom: 15px; }
  .auth-form input, .auth-form select { padding: 12px; font-size: 16px; } /* 16px evita el zoom de iOS */
  .auth-form label { font-size: 9.5px; }
  .auth-form .primary-button { padding: 14px; }
  .role-picker { gap: 6px; }
  .role-chip { padding: 10px 2px; font-size: 8.5px; border-radius: 11px; }
  .role-icon { font-size: 16px; }
  .cred-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cred-role { grid-column: 1 / -1; }
  .cred-user, .cred-pass { grid-column: 1; }
  .cred-row .copy-button { grid-row: 2 / 4; grid-column: 2; }
}

@media (max-width: 360px) {
  .role-picker { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------- Oscuro --------------------------------- */
[data-theme="oscuro"] .role-chip { background: var(--surface); color: #b3b0c4; }
[data-theme="oscuro"] .role-chip:hover { background: var(--surface-2); border-color: #4a4270; }
[data-theme="oscuro"] .cred-row { background: var(--surface-soft); }
[data-theme="oscuro"] .cred-user { color: var(--ink); }

/* Acciones de la cabecera móvil */
.mobile-actions { display: flex; align-items: center; gap: 8px; }
.mobile-actions .icon-button { border: 0; background: transparent; font-size: 19px; width: 34px; height: 34px; }
.search-trigger { margin-top: 14px; width: 100%; }
@media (max-width: 900px) { .search-trigger { display: none; } }