/* Pantalla de login de index.html — sigue con el look de antes del
   rediseño "Feria" a propósito (HANDOFF.md: "El login queda como está").

   Hasta el paso 3 del rediseño salía de static/catalogo/style.css +
   static/pos/style.css (los dos borrados); ahora index.html carga feria/styles.css (global:
   body oscuro, button{font:inherit}, p{margin:0}, :focus-visible), así
   que acá se reproducen los mismos valores, limitados al login. Todo lo
   de body va detrás de :has() para que no toque la pantalla de Venta. */

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/pos/fonts/work-sans-600.woff2') format('woff2');
}

body:has(> #pantalla-login:not(.oculto)) {
  margin: 0;
  padding: 1rem;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: normal;
  background: #f4f4f5;
  color: #1a1a1a;
  color-scheme: light;
  -webkit-font-smoothing: auto;
}

#pantalla-login {
  max-width: 360px;
  margin: 3rem auto;
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
}

#pantalla-login h1 {
  margin-top: 0;
}

#pantalla-login p {
  margin: 1em 0;
}

#pantalla-login label {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

#pantalla-login :is(input, select, button) {
  font: revert;
  color: revert;
  font-size: 1.1rem;
  padding: 0.5rem;
  width: 100%;
  margin-top: 0.25rem;
}

#pantalla-login button {
  cursor: pointer;
  width: auto;
}

#pantalla-login :focus-visible {
  outline: revert;
  outline-offset: revert;
}

#login-error.mensaje-error {
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 4px;
  margin-bottom: 16px;
  background: color-mix(in srgb, #C81E2E 12%, #F7F3E9);
  color: #C81E2E;
  border: 2px solid #C81E2E;
}

/* Sin mensaje no se ve el recuadro (antes quedaba una caja roja vacía
   arriba de "Entrar"). El <p> no tiene espacios adentro y login.js lo
   vacía con "", así que :empty alcanza. */
#login-error:empty {
  display: none;
}