@font-face { font-family: "Entrada"; src: url("archivo.woff2") format("woff2"); font-weight: 400 800; font-stretch: 62% 125%; font-display: swap; }
/* Entrada de los sistemas WianStark (núcleo): la estructura de la cortina del primer sistema de caja de WianStark. Dos hojas con el mismo fondo
   (alineado a la pantalla) que se abren hacia los costados. El fondo y su gesto son de cada negocio, nunca de otro:
   --cortina-fondo (color), --cortina-gesto (imagen o degradado propio de la marca), --cortina-acento (brillo y barra
   de carga) y --cortina-tinta-2 (textos suaves). Sin gesto, queda el fondo liso. */
.cortina { position: fixed; inset: 0; z-index: 60; overflow: hidden; }
.cortina .hoja { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; transition: transform 1.1s cubic-bezier(.77, 0, .18, 1); will-change: transform; }
.cortina .izq { left: 0; } .cortina .der { right: 0; }
.cortina .lienzo { position: absolute; top: 0; bottom: 0; width: 100vw; background-color: var(--cortina-fondo, var(--marco)); background-image: var(--cortina-gesto, none); }
.cortina .izq .lienzo { left: 0; } .cortina .der .lienzo { right: 0; }
.cortina.abierta .izq { transform: translateX(-100%); }
.cortina.abierta .der { transform: translateX(100%); }
.cortina.abierta { pointer-events: none; }
.cortina .izq::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: linear-gradient(transparent 10%, var(--cortina-acento, var(--acento)) 50%, transparent 90%);
  opacity: 0; transition: opacity .4s; box-shadow: 0 0 18px 2px var(--cortina-acento, var(--acento)); }
.cortina.cargando .izq::after { opacity: 1; }
.cortina-marca { position: absolute; left: 50%; top: max(16px, calc(50% - 330px)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.cortina-marca img { display: block; width: 280px; max-width: 62vw; height: auto; filter: drop-shadow(0 12px 32px rgb(0 0 0 / .6)); }
.cortina-marca .lema { font-size: 14px; line-height: 18px; color: var(--cortina-tinta-2, var(--marco-tinta-2)); }
/* La tarjeta con usuario y contraseña: completa aquí (etiquetas, campos y botón), así se ve igual en cualquier sistema */
.cortina-form .cortina-campo { display: grid; gap: 6px; margin: 0; }
.cortina-form .cortina-etq { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2, var(--tinta)); }
.cortina-form { position: absolute; left: 50%; top: calc(50% + 10px); transform: translateX(-50%); z-index: 3; width: min(380px, 90vw); padding: 24px; display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--linea); border-radius: var(--r2); background: var(--capa); color: var(--tinta); box-shadow: 0 32px 64px rgb(0 0 0 / .35); transition: opacity .35s ease, transform .35s ease; }
.cortina-form .campo-ico { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border: 1px solid var(--linea); border-bottom-color: var(--linea-2); border-radius: var(--r); background: var(--capa); color: var(--tinta-3); }
.cortina-form .campo-ico:focus-within { border-bottom: 2px solid var(--acento); }
.cortina-form .campo-ico .ico { width: 18px; height: 18px; }
.cortina-form .campo-ico input { flex: 1; min-width: 0; min-height: 0; height: 100%; padding: 0; border: 0; background: none; outline: none; color: var(--tinta); font-size: 15px; }
.cortina-form .boton { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 0; border-radius: var(--r, 4px); background: var(--acento); color: var(--sobre-acento, #fff); font-size: 15px; font-weight: 600; cursor: pointer; }
.cortina-form .boton:hover:not(:disabled) { filter: brightness(1.08); } .cortina-form .boton:disabled { opacity: .7; }
.cortina-form .pin-error { min-height: 1.2em; color: var(--alerta, var(--acento)); font-size: 13.5px; font-weight: 600; margin: 0; }
.cortina-form .pin-error:empty { min-height: 0; }
.cortina:not(.con-form) .cortina-form { opacity: 0; pointer-events: none; transform: translate(-50%, 14px); }
/* Barra de carga: «Abriendo…» mientras se cargan los datos */
.cortina-carga { position: absolute; left: 50%; top: calc(50% + 60px); transform: translateX(-50%); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--cortina-tinta-2, var(--marco-tinta-2)); font-size: 12px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.cortina.cargando .cortina-carga { opacity: 1; }
.carga-barra { display: block; width: 240px; height: 4px; border-radius: 2px; background: #2a2a2e; overflow: hidden; }
.carga-barra i { display: block; height: 100%; background: var(--cortina-acento, var(--acento)); transform-origin: left; transform: scaleX(0); }
.cortina.cargando .carga-barra i { animation: carga-llena 1.5s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes carga-llena { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cortina-pie { position: absolute; left: 14px; bottom: 8px; z-index: 2; font-size: 12px; color: var(--cortina-tinta-2, var(--marco-tinta-2)); transition: opacity .3s; pointer-events: none; }
@keyframes cortina-aparece { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translateX(-50%); } }
.cortina.nueva .cortina-marca { animation: cortina-aparece 800ms 100ms cubic-bezier(.16, 1, .3, 1) both; }
.cortina.nueva .cortina-form { animation: cortina-aparece 700ms 450ms cubic-bezier(.16, 1, .3, 1) both; }
.cortina.abierta .cortina-form, .cortina.abierta .cortina-carga, .cortina.abierta .cortina-pie { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .cortina .hoja, .cortina-form, .cortina-carga { transition: none; } .cortina.cargando .carga-barra i { animation: none; transform: none; } }
/* Con la cortina cerrada el agente no se ve (va encima de la cortina para saludar cuando se abre) */
body:has(.cortina:not(.abierta)) .ag-presencia { visibility: hidden; }

/* ---------- Efecto del rubro (núcleo; igual en todos, cada uno con lo de su oficio) ----------
   La foto del negocio cubre la pantalla (con --escena-velo encima si hace falta para leer el logo) y se acerca muy lento (o la animación propia del rubro en --escena-anim, como el
   enfoque de la óptica). Mientras abre, suben partículas de su oficio (--particula: su aspecto; --particula-forma: su borde).
   Al abrir: las hojas a los costados (la cortina de la tienda) o un relleno que sube y cubre la pantalla (--relleno), y el
   sistema llega desde atrás. Solo transform y opacidad (no calienta la PC). */
.cortina.con-foto .lienzo::before { content: ""; position: absolute; inset: 0; background-image: var(--escena-velo, linear-gradient(rgb(0 0 0 / .52), rgb(0 0 0 / .3) 45%, rgb(0 0 0 / .56))), var(--escena-foto);
  background-position: center, var(--escena-foto-pos, center); background-size: cover; background-repeat: no-repeat;
  transform-origin: var(--escena-foco, 50% 50%); animation: var(--escena-anim, escena-acerca 20s ease-in-out infinite alternate); }
@keyframes escena-acerca { from { transform: scale(1); } to { transform: scale(1.04); } }
.cortina.con-foto.abierta .lienzo::before { animation: none; }
.escena { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.escena i { position: absolute; bottom: -50px; left: var(--x); width: var(--t); height: var(--t); border-radius: var(--particula-forma, 50%); opacity: 0; background: var(--particula, none); }
.cortina.cargando .escena i, .cortina.abierta .escena i { animation: particula var(--v) var(--d) cubic-bezier(.35, 0, .65, 1) infinite; }
.cortina.abierta .escena i { animation-iteration-count: 1; }
/* caen: granos claros y alargados que caen por todo el ancho, girando (el arroz del abarrotes) */
.escena.caen i { top: -24px; bottom: auto; width: calc(var(--t) * .3); height: calc(var(--t) * .64); border-radius: 50%; background: var(--particula-grano, #f1e8d2); box-shadow: 0 0 1px rgb(0 0 0 / .45); transform: rotate(var(--g)); }
.cortina.cargando .escena.caen i, .cortina.abierta .escena.caen i { animation-name: grano-cae; animation-timing-function: cubic-bezier(.45, 0, .85, .55); }
@keyframes grano-cae { 0% { opacity: 0; transform: translateY(0) rotate(var(--g)); } 8%, 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(100vh + 48px)) rotate(calc(var(--g) + 320deg)); } }      /* al abrir terminan su vuelta y paran: nada se anima escondido */
@keyframes particula { 0% { transform: translateY(0) scale(.4); opacity: 0; } 12%, 80% { opacity: 1; } 92% { transform: translateY(-88vh) scale(1.1); opacity: 1; }
  100% { transform: translateY(-92vh) scale(1.6); opacity: 0; } }
/* Se abre con un relleno que sube (no se parte la foto por el medio) */
.cortina.abre-relleno.abierta .izq, .cortina.abre-relleno.abierta .der { transform: none; }
.cortina.abre-relleno .izq::after { display: none; }
.cortina.abre-relleno { transition: opacity .4s ease, visibility 0s; }
.cortina.abre-relleno.abierta { opacity: 0; visibility: hidden; transition: opacity .45s .65s ease, visibility 0s 1.1s; }
.cortina.abre-relleno .escena::before { content: ""; position: absolute; inset: -40px 0 0; transform: translateY(105%); transition: transform .5s cubic-bezier(.6, 0, .4, 1);
  background: var(--relleno, var(--cortina-acento, var(--acento))); border-radius: 50% 50% 0 0 / 40px 40px 0 0; }
.cortina.abre-relleno.abierta .escena::before { transform: translateY(0); transition: transform .6s cubic-bezier(.55, 0, .25, 1); }
.cortina-carga { z-index: 2; }
/* El sistema llega desde atrás del relleno: empieza un poco chico y se acomoda; el agente llega cuando ya se ve */
body:has(.cortina.abre-relleno) #app { transition: transform .8s .7s cubic-bezier(.2, .8, .2, 1); }
body:has(.cortina.abre-relleno:not(.abierta)) #app { transform: scale(.96); transition: none; }
body:has(.cortina.abre-relleno.abierta) .ag-presencia { animation: ag-tarde 1.2s both; }
@keyframes ag-tarde { 0%, 85% { visibility: hidden; } 100% { visibility: visible; } }
@media (prefers-reduced-motion: reduce) { .escena i, .cortina.con-foto .lienzo::before { animation: none !important; } .cortina.abre-relleno .escena::before, body:has(.cortina.abre-relleno) #app { transition: none; } }
/* «¿Olvidaste tu contraseña?» bajo «Entrar»; su ventana (y cualquier otra) se ve encima de la cortina cerrada */
.cortina-olvido { align-self: center; font-size: 14px; color: var(--cortina-tinta-2, var(--marco-tinta-2)); }
body:has(.cortina.con-form) .modal { z-index: 70; }
/* Capas del rubro sobre la foto (Entrada.configurar({ efecto: { capas } })): el vapor de la olla o la freidora y la luz que
   entra por el techo del mercado o la vitrina. Van en cada hoja, sobre la foto y bajo el logo. */
.cortina .capa { position: absolute; left: var(--cx); top: var(--cy); width: var(--cw); height: var(--ch); pointer-events: none; overflow: visible; }
.capa-vapor b { position: absolute; bottom: 0; left: var(--bx); width: 42%; height: 75%; border-radius: 50%; opacity: 0; transform-origin: 50% 100%;
  background: radial-gradient(ellipse at 50% 70%, rgb(255 255 255 / .6), rgb(255 255 255 / .22) 40%, transparent 70%); filter: blur(12px);
  animation: capa-vapor var(--bd) ease-in-out var(--bdl) infinite; }
@keyframes capa-vapor { 0% { opacity: 0; transform: translateY(15%) scale(.55, .45); } 25% { opacity: .9; } 60% { opacity: .5; transform: translate(10%, -40%) scale(1, 1.1); } 100% { opacity: 0; transform: translate(-8%, -85%) scale(1.35, 1.5); } }
.capa-luz { mix-blend-mode: screen; }
.capa-luz b { position: absolute; top: -10%; left: var(--bx); width: 13%; height: 125%; opacity: .25; filter: blur(8px); transform: skewX(-16deg);
  background: linear-gradient(180deg, rgb(255 242 210 / .5), rgb(255 242 210 / .12) 55%, transparent);
  animation: capa-luz var(--bd) ease-in-out var(--bdl) infinite alternate; }
@keyframes capa-luz { from { opacity: .18; transform: skewX(-16deg) translateX(-4%); } to { opacity: .7; transform: skewX(-16deg) translateX(4%); } }
/* Como las partículas: con el formulario la foto queda quieta; el efecto corre al iniciar sesión y termina su vuelta al abrirse */
.cortina .capa { visibility: hidden; }
.cortina.cargando .capa, .cortina.abierta .capa { visibility: visible; }
.cortina:not(.cargando):not(.abierta) .capa b { animation: none; }
.cortina.abierta .capa b { animation-iteration-count: 1; }
@media (prefers-reduced-motion: reduce) { .cortina .capa b { animation: none; opacity: .4; } }
.capa-humo b { position: absolute; bottom: 0; left: var(--bx); width: 50%; height: 80%; border-radius: 50%; opacity: 0; transform-origin: 50% 100%;
  background: radial-gradient(ellipse at 50% 70%, rgb(225 225 225 / .45), rgb(200 200 200 / .16) 45%, transparent 72%); filter: blur(14px);
  animation: capa-humo var(--bd) ease-in-out var(--bdl) infinite; }
@keyframes capa-humo { 0% { opacity: 0; transform: translateY(10%) scale(.5, .4); } 30% { opacity: .75; } 100% { opacity: 0; transform: translate(18%, -90%) scale(1.5, 1.6); } }
/* Los granos: un chorrito que cae de la cuchara al saco (granos claros y alargados, que giran un poco al caer) */
.capa-granos b { position: absolute; top: 0; left: var(--bx); width: 3px; height: 7px; border-radius: 50%; opacity: 0;
  background: linear-gradient(90deg, #fbf6e8, #e9dfc3); box-shadow: 0 0 1px rgb(0 0 0 / .35);
  animation: capa-granos var(--bd) cubic-bezier(.45, 0, .9, .6) var(--bdl) infinite; }
@keyframes capa-granos { 0% { opacity: 0; top: 0; transform: rotate(var(--gr)); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; top: 100%; transform: rotate(calc(var(--gr) + 220deg)); } }
/* La marca de la entrada, igual en todos los sistemas (Entrada.marca): el logo del negocio, el nombre con la misma letra y el
   mismo tamaño, lo que vende y la línea de práctica. Cada sistema solo cambia su color, su foto, su efecto y su posición. */
.ent-marca { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; filter: drop-shadow(0 10px 28px rgb(0 0 0 / .35)); }
.ent-logo { display: grid; place-items: center; width: 76px; height: 76px; overflow: hidden; border-radius: 20px; background: var(--cortina-logo, var(--acento)); box-shadow: 0 8px 24px rgb(0 0 0 / .3); }
.ent-logo img { width: 100%; height: 100%; object-fit: cover; }
.ent-nombre { margin: 0; font: 800 clamp(34px, 4.2vw, 48px)/1.05 "Entrada", system-ui, sans-serif; font-stretch: 112%; letter-spacing: -.01em; color: #fff; white-space: nowrap; }
.ent-lema { font: 700 13px/1.3 "Entrada", system-ui, sans-serif; letter-spacing: .3em; text-transform: uppercase; color: rgb(255 255 255 / .86); }
.ent-nota { margin-top: 12px; font: 400 14px/1.4 "Entrada", system-ui, sans-serif; color: rgb(255 255 255 / .82); text-align: center; }
.cortina-form .cortina-olvido { font-family: "Entrada", system-ui, sans-serif; color: #4a4a4a; }
/* Al costado (la brostería): la marca y la tarjeta van a la izquierda y la foto luce a la derecha */
.cortina.a-costado .cortina-marca, .cortina.a-costado .cortina-form, .cortina.a-costado .cortina-carga { left: 26%; }