/* Pantalla de entrada (js/entrada.js). Solo tokens de css/styles.css. Se usa
   sobre todo en telefono y en la tablet compartida de cocina: una columna,
   botones a todo el ancho y blancos de toque grandes. */
.entrada {
  max-width: 480px; margin: var(--sp-4) auto; padding: var(--sp-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.entrada-titulo { font-size: var(--fs-4); }
.entrada-nota { margin: 0; font-size: var(--fs-1); color: var(--text-dim); }
.entrada-error {
  margin: 0; padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm);
  border: 1px solid var(--danger); color: var(--text); font-size: var(--fs-1);
}
.entrada-vacio { margin: 0; color: var(--text-dim); }
.entrada-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.entrada-persona, .entrada-salir {
  width: 100%; min-height: 48px; padding: var(--sp-2);
  background: var(--surface-2); color: var(--text); font: inherit;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; transition: background var(--trans), border-color var(--trans);
}
.entrada-persona {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
}
.entrada-persona:hover, .entrada-persona:focus-visible,
.entrada-salir:hover, .entrada-salir:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.entrada-persona:focus-visible, .entrada-salir:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.entrada-nombre { font-size: var(--fs-3); font-weight: 600; }
.entrada-puesto { font-size: var(--fs-1); color: var(--text-dim); }
.entrada-quien { margin: 0; display: flex; flex-direction: column; gap: 2px; }
/* Accion secundaria de una pantalla de estado (la de "sin acceso" de
   js/app.js usa la misma tarjeta .entrada). */
.entrada-accion {
  align-self: flex-start; min-height: 44px; padding: var(--sp-1) var(--sp-3);
  background: var(--accent-soft); color: var(--text); font: inherit;
  border: 1px solid var(--accent); border-radius: var(--radius-sm); cursor: pointer;
}
.entrada-accion:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Quien esta dentro, en la cabecera (htmlIdentidad). */
.entrada-identidad { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.entrada-identidad:empty { display: none; }
.entrada-identidad-quien { display: flex; flex-direction: column; line-height: 1.2; text-align: right; }
.entrada-identidad-nombre { font-size: var(--fs-1); font-weight: 600; }
.entrada-identidad-puesto { font-size: var(--fs-0); color: var(--text-dim); }
.entrada-identidad-salir {
  background: none; color: var(--text-dim); font: inherit; font-size: var(--fs-1);
  padding: var(--sp-1) var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
}
.entrada-identidad-salir:hover, .entrada-identidad-salir:focus-visible { color: var(--text); border-color: var(--accent); }

@media (max-width: 520px) {
  .entrada { margin: var(--sp-2) 0; padding: var(--sp-2); border-radius: var(--radius-sm); }
  .entrada-titulo { font-size: var(--fs-3); }
}