/* Página de entrada: una columna estrecha, el símbolo de InterEIDAS arriba y el formulario en la mitad alta de la
   pantalla (el teclado del móvil no tapa el botón). Sin tarjeta ni fondo de adorno: papel (o tinta, en oscuro). */

body { min-block-size: 100dvh; display: grid; place-items: start center; }
.entrada {
  inline-size: min(100% - 2rem, 23rem);
  padding-block: clamp(2.5rem, 12vh, 7rem) 3rem;
  display: grid; gap: 1.25rem;
}
.entrada-marca { display: flex; align-items: center; gap: .75rem; color: var(--tinta); margin-block-end: 1.5rem; }
.entrada-marca .simbolo { inline-size: 2.5rem; block-size: 2.5rem; fill: currentColor; flex: none; }
.entrada-marca p { display: grid; line-height: 1.2; }
.entrada-marca .nombre { font-weight: 600; font-size: 1.125rem; letter-spacing: -.01em; }
.entrada-marca .pieza { color: var(--meta); font-size: .9375rem; }
.entrada h1 { font-size: 1.75rem; letter-spacing: -.025em; padding-block-start: 1.25rem; border-block-start: 1px solid var(--filete); }
.entrada form { display: grid; gap: 1rem; }
.fila-clave { display: flex; gap: .5rem; }
.fila-clave input { flex: 1 1 auto; min-inline-size: 0; }
.fila-clave .boton.icono { border: 1px solid var(--borde); border-radius: var(--radio-control); flex: none; }
.fila-clave .boton.icono[aria-pressed="true"] { background: var(--niebla); }
.mensaje { min-block-size: 1.5em; color: var(--mal); font-size: .9375rem; }
.mensaje[data-tipo="espera"] { color: var(--aviso); }
.mensaje[data-tipo="bien"] { color: var(--bien); }
.boton.entrar { inline-size: 100%; min-block-size: 3rem; font-size: 1rem; }
.pie { color: var(--meta); font-size: .875rem; margin-block-start: .5rem; }