/*
 * Acceso a la consola de flota (RF-45).
 *
 * Hoja de pantalla aparte de site.css: es la única superficie de esta aplicación que se ve sin
 * sesión, no comparte ni una regla con el chasis de sidebar + tabla, y así se puede cachear y
 * versionar por su cuenta. Todos los colores y tamaños salen del bloque :root de site.css.
 */

.fleet-auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* dvh y no vh: en móvil la barra de direcciones recorta vh y el botón de enviar el código
     queda bajo el pliegue. La línea con vh se conserva como reserva para navegadores sin
     soporte de dvh, que la de abajo pisa en cuanto lo hay. */
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px;
  background: var(--surface);
}

.fleet-auth__panel {
  width: 100%;
  max-width: 400px;
  padding: 32px;
  background: var(--card);
  border: 1px solid var(--outline);
  border-radius: var(--radius-md);
}

/*
 * Aquí va el lockup completo, no el isotipo del sidebar: esta pantalla no tiene chasis y la
 * marca es lo único que se mira. Por eso deja de reutilizar .fleet-sidebar__mark —que era el
 * mismo cuadrado "FX" en los dos sitios— y apila logotipo y coletilla en vez de ponerlos en
 * fila: el nombre del producto ya lo dice el propio logotipo.
 */
.fleet-auth__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 32px;
}
.fleet-auth__logo { display: block; height: var(--brand-lockup-height); width: auto; }
.fleet-auth__tag { font-size: var(--text-xs); color: var(--tertiary); line-height: 14px; }

.fleet-auth__title {
  margin: 0 0 4px;
  font-size: var(--text-title);
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--primary);
}

.fleet-auth__lead {
  margin: 0 0 24px;
  font-size: var(--text-base);
  line-height: 20px;
  color: var(--on-surface-variant);
}

.fleet-auth__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Clase explícita en el marcado y no un selector por tipo: así .fleet-auth__code puede
   redefinir tipografía y tamaño sin necesitar !important para ganar especificidad. */
.fleet-auth__input {
  width: 100%;
  height: var(--control-lg);
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--outline);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--on-surface);
}

.fleet-auth__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/*
 * El código se teclea dígito a dígito, así que se compone como un dato y no como texto:
 * monoespaciada, cifras de ancho fijo y letras separadas.
 */
.fleet-auth__input.fleet-auth__code {
  font-family: var(--font-mono);
  font-size: var(--text-title);
  font-variant-numeric: tabular-nums;
  letter-spacing: .3em;
  text-align: center;
}

/* Ancho completo: en esta pantalla no hay ninguna otra acción que compita. */
.fleet-auth__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--control-lg);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--on-primary);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
}
.fleet-auth__submit:hover { background: var(--accent-strong); }

.fleet-auth__hint {
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--outline);
  font-size: var(--text-sm);
  line-height: 18px;
  color: var(--on-surface-variant);
}

/*
 * Código de desarrollo. Se pinta como una advertencia y no como parte del diseño: tiene que
 * cantar que esto no es una pantalla normal, para que nadie lo confunda con algo que pueda
 * llegar a producción. Mismo criterio que .auth__devcode en la AdminApp.
 */
.fleet-auth__devcode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
  padding: 8px 16px;
  background: var(--err-tint-soft);
  border: 1px dashed var(--err);
  border-radius: var(--radius-sm);
}
.fleet-auth__devcode-label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--err);
}
.fleet-auth__devcode-value {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--err);
}

.fleet-auth__foot {
  margin-top: 24px;
  max-width: 400px;
  font-size: var(--text-sm);
  line-height: 18px;
  text-align: center;
  color: var(--tertiary);
}