/* GPS Track · la puerta del SERVIDOR · los pasos que la lamina no dibuja
   ---------------------------------------------------------------------
   REQUIERE, CARGADOS ANTES y en este orden (el mismo que la puerta del
   modo local): gps-tokens-v5.css · fuentes.css · gps-sistema.css (los
   tres del producto, servidos tal cual por la tabla MARCA de Puerta.php)
   y acceso.css (las reglas de la puerta del modo local, que es fiel a
   esc-02 y movil-02).

   La lamina dibuja UNA pantalla: marca, «Portal GPS Track», el titulo,
   usuario, codigo, ENTRAR y «Olvide usuario o codigo». El servidor tiene
   mas pasos (el codigo del telefono, el QR, los ocho codigos, la
   instalacion, el ultimo recurso de hPanel) y todos van en LA MISMA CAJA
   (.acc-tarjeta), con las mismas piezas: el kicker, el titulo, la
   etiqueta y el campo, el boton ENTRAR y el enlace verde. Aqui solo esta
   lo que esas piezas no cubren (el parrafo, el QR, la lista de codigos,
   el boton secundario) y esta hecho con el MISMO vocabulario: los mismos
   tokens, las mismas tipografias, los mismos radios y bordes de
   acceso.css. Ni un color literal, cero !important, cero selectores de ID,
   sin degradados ni sombras. Nada de aqui cambia la pantalla de entrar:
   la mide producto/pruebas-vistas/puerta-servidor.mjs contra la lamina y
   contra la puerta del modo local. */

/* Una tarjeta, un paso: las demas se esconden con el atributo hidden.
   acceso.css no le pone display a .acc-tarjeta, asi que el hidden del
   navegador basta; se dice igual para que nadie lo rompa sin querer. */
.acc-tarjeta[hidden] { display: none; }

/* El parrafo que explica un paso. La lamina no dibuja texto corrido en
   el panel del formulario; el que dibujaba en el panel azul iba en el
   gris claro del cuerpo sobre azul (--gps-apagado) y en Inter de cuerpo.
   Es ese. Sobre el carbon da 9,4 de contraste. */
.pas-texto {
  margin: 0 0 14px;
  font-family: var(--gps-body); font-size: 14px; line-height: 1.6;
  color: var(--gps-apagado);
}
.pas-texto b, .pas-lista b { color: var(--gps-blanco); font-weight: 600; }
/* Un nombre de carpeta o de fichero se parte SOLO si no cabe en el
   renglon (visto a 1440: «gps-track-p / rivado» partido a mitad de
   palabra con break-all). */
.pas-texto code, .pas-lista code {
  font-family: var(--gps-mono); font-size: 12px;
  color: var(--gps-blanco); overflow-wrap: anywhere;
}
.pas-lista {
  margin: 0 0 14px; padding-left: 18px;
  font-family: var(--gps-body); font-size: 14px; line-height: 1.6;
  color: var(--gps-apagado);
}
.pas-lista li { margin: 0 0 6px; }

/* «Hola, Nombre · Empresa.» · en la tinta del titulo y en la de la UI. */
.pas-quien {
  margin: 0 0 12px;
  font-family: var(--gps-ui); font-weight: 600; font-size: 15px;
  color: var(--gps-blanco);
}

/* Los enlaces dentro del texto: el verde de «Olvide usuario o codigo». */
.pas-texto a, .pas-detalle a { color: var(--gps-verde-claro); }
.pas-texto a:focus-visible, .pas-detalle a:focus-visible, .pas-detalle summary:focus-visible {
  outline: 2px solid var(--gps-verde-claro); outline-offset: 2px;
}

/* El codigo de seis cifras y los de recuperacion: la caja, el borde y el
   cuerpo de 15 px del campo de la lamina, con los numerales en mono y
   separados para que se lean de uno en uno. El interlineado se fija al de
   la Inter de los demas campos (18 px): la mono es mas alta y el campo
   creceria un pixel (medido: 52 donde esc-02 dibuja 51). */
.acc-campo input.pas-cifras {
  font-family: var(--gps-mono); letter-spacing: .2em; line-height: 18px;
}

/* Lo que se abre al pulsar (¿No puede escanearlo?, ¿Ha perdido el
   telefono?): el enlace verde de la lamina, sin triangulo. */
.pas-detalle { margin: 16px 0 0; }
.pas-detalle summary {
  display: block; cursor: pointer; list-style: none;
  font-family: var(--gps-mono); font-size: 10px;
  letter-spacing: var(--gps-track-mono); text-transform: uppercase;
  color: var(--gps-verde-claro);
}
.pas-detalle summary::-webkit-details-marker { display: none; }
.pas-detalle[open] summary { margin-bottom: 12px; }
/* En el paso del QR el desplegable va ENTRE el cuadro y el campo: sin
   aire debajo, el enlace verde se pegaba a la etiqueta del campo (visto
   a 1440). El mismo 18 px que separa dos campos en esc-02. */
.alta > .pas-detalle { margin: 0 0 18px; }

/* La ayuda de «Olvide usuario o codigo»: dos parrafos debajo del enlace. */
.pas-ayuda { margin-top: 16px; }

/* El aviso bueno («Telefono vinculado.»): el mismo recuadro de
   .acc-aviso, con el borde verde en vez del naranja de error. */
.acc-aviso[data-tono="bien"] { border-color: var(--gps-verde); }

/* Mientras una peticion esta en camino los botones se bloquean. */
.acc-entrar:disabled, .pas-secundario:disabled { opacity: .55; cursor: default; }

/* EL QR. Modulos en negro operativo sobre el claro de la marca, con el
   margen blanco que exige la norma (cuatro modulos, dentro del propio
   SVG) y el radio de los campos. */
.qr { display: flex; justify-content: center; margin: 4px 0 16px; }
.qr svg {
  width: 232px; height: 232px; display: block;
  background: var(--gps-blanco); color: var(--gps-negro);
  border: 1px solid var(--gps-campo-borde); border-radius: 12px;
}
.clave-manual {
  font-family: var(--gps-mono); font-size: 15px; letter-spacing: .08em;
  word-break: break-all; color: var(--gps-blanco);
}

/* LOS OCHO CODIGOS: la caja del campo (su relleno, su borde y su radio:
   los grises de la puerta, gps-tokens-v5.css V5.2). */
.imprimible h2 {
  margin: 0 0 10px;
  font-family: var(--gps-mono); font-size: 10px; font-weight: 400;
  letter-spacing: var(--gps-track-mono); text-transform: uppercase;
  color: var(--gps-acero);
}
ol.codigos {
  list-style: none; counter-reset: codigo; margin: 0 0 14px; padding: 16px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px;
  background: var(--gps-campo-oscuro); border: 1px solid var(--gps-campo-borde); border-radius: 12px;
}
ol.codigos li {
  counter-increment: codigo;
  font-family: var(--gps-mono); font-size: 16px; color: var(--gps-blanco);
}
ol.codigos li::before { content: counter(codigo) ".  "; color: var(--gps-acero); }

/* El boton secundario (Imprimir, Copiar): la pildora de ENTRAR, hueca. */
.pas-botones { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.pas-secundario {
  appearance: none; cursor: pointer;
  background: transparent; color: var(--gps-verde-claro);
  border: 1px solid var(--gps-verde); border-radius: 999px;
  font-family: var(--gps-mono); font-weight: 700; font-size: 11px;
  letter-spacing: var(--gps-track-mono); text-transform: uppercase;
  padding: 11px 18px;
}
.pas-secundario:focus-visible { outline: 2px solid var(--gps-blanco); outline-offset: 2px; }

@media (max-width: 400px) {
  ol.codigos { grid-template-columns: 1fr; }
}

/* El MISMO corte que acceso.css (1280 desde el 2026-09-12, N-2): por
   debajo va la caja de movil-02 y el QR centrado en ella. */
@media (min-width: 1280px) {
  .qr { justify-content: flex-start; }
  ol.codigos { border-radius: 14px; }
  .qr svg { border-radius: 14px; }
}

/* Al imprimir los codigos de recuperacion, solo sale la lista, en tinta
   sobre papel. */
@media print {
  .acc-nav, .acc-discurso, .acc-idioma, .alta > :not(.imprimible) { display: none; }
  body.acc, .acc-panel, .acc-tarjeta { background: none; border: 0; padding: 0; color: var(--gps-negro); }
  ol.codigos { background: none; border-color: var(--gps-negro); }
  ol.codigos li, .imprimible h2 { color: var(--gps-negro); }
}