/* ACCESO (login) del Administrativo Y del POS web: tableta, ventanas angostas y escritorio. Antes vivía dentro de compras93.css (reglas 44 a 46) y el POS web no lo cargaba, así que en el iPad su acceso se veía distinto
   (franja baja y logo chico). Ahora los dos acceso cargan este archivo después de styles.css y responsivo.css. */
/* 44) Pantalla de entrada: el mismo ancho del formulario en cualquier ventana de escritorio (antes cambiaba de 460 a 540 px según el ancho en píxeles de la pantalla; como todo escala parejo con el zoom, ya no hace falta). */
@media (min-width: 1100px) { .entrada form { max-width: 500px; } .entrada .texto-caja { max-width: 640px; } }

/* 45) Pantalla de entrada en TABLETA en vertical (iPad…): aprovecha la pantalla. Franja de foto alta con el logo grande y el ticket completo; el formulario grande (campos y botón cómodos para el dedo) centrado en lo que queda, sin los vacíos enormes de antes. */
@media (min-width: 641px) and (max-width: 960px) and (min-height: 760px) {
  .entrada.entrada { grid-template-rows: minmax(250px, 28dvh) minmax(0, 1fr); }
  .entrada.entrada .caja { min-height: 0; height: auto; padding: 28px 44px; align-items: flex-start; justify-content: space-between; }
  .entrada.entrada .marca-h { width: min(430px, 50vw); }
  .entrada.entrada .ticket { top: 36px; right: 44px; width: 232px; }
  .entrada.entrada .ticket-papel { font-size: .72rem; padding: 14px 12px 26px; }
  .entrada.entrada .entrar { place-items: center; padding: 16px 48px 28px; }
  .entrada.entrada form { max-width: 600px; }
  .entrada.entrada form h2 { font-size: 2.1rem; margin-top: 10px; }
  .entrada.entrada form .suave { font-size: 1.02rem; margin-bottom: 18px; }
  .entrada.entrada .campo { margin-bottom: 12px; }
  .entrada.entrada .campo input { min-height: 60px; font-size: 1.1rem; }
  .entrada.entrada .cuenta-visible, .entrada.entrada .selector-cuenta select { min-height: 68px; height: 68px; }
  .entrada.entrada .pie-seg { font-size: .9rem; margin-bottom: 12px; }
  .entrada.entrada .btn.principal { min-height: 62px; font-size: 1.14rem; }
}

/* 46) Pantalla de entrada: la foto SE FUNDE con el resto, sin línea de corte. Tableta y celular (foto arriba): la foto se desvanece hacia el color del fondo de abajo. Escritorio (foto a la izquierda): la foto se desvanece hacia el panel oscuro. */
@media (min-width: 641px) and (max-width: 960px) {
  .entrada.entrada .entrar { background: linear-gradient(180deg, #17302f 0%, #131b18 46%, #0e1513 100%); }
  .entrada.entrada .caja::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(23, 48, 47, 0) 38%, rgba(23, 48, 47, .72) 74%, #17302f 100%); }
}
@media (min-width: 961px) {
  .entrada.entrada { background: linear-gradient(160deg, #17302f 0%, #131b18 56%, #0e1513 100%); }
  .entrada.entrada .entrar { background: radial-gradient(900px 620px at 88% 0%, rgba(86, 133, 118, .24), transparent 65%), radial-gradient(700px 520px at 0% 100%, rgba(198, 124, 20, .10), transparent 70%); }
  .entrada.entrada .caja { -webkit-mask-image: linear-gradient(to right, #000 0%, #000 82%, transparent 100%); mask-image: linear-gradient(to right, #000 0%, #000 82%, transparent 100%); }
}
/* (escritorio) el degradado de fondo vive en toda la pantalla, no solo en el panel de la derecha: así no hay costura donde termina la foto */
@media (min-width: 961px) {
  .entrada.entrada { background: radial-gradient(900px 620px at 88% 0%, rgba(86, 133, 118, .24), transparent 65%), radial-gradient(800px 560px at 56% 100%, rgba(198, 124, 20, .10), transparent 70%), linear-gradient(160deg, #17302f 0%, #131b18 56%, #0e1513 100%); }
  .entrada.entrada .entrar { background: none; }
  .entrada.entrada .caja { -webkit-mask-image: linear-gradient(to right, #000 0%, #000 74%, transparent 100%); mask-image: linear-gradient(to right, #000 0%, #000 74%, transparent 100%); }
}