/* Ingreso de escritorio (18/10/2026): un ticket de acceso que sale de una
   ranura, como una boleta con su timbre, con documentos tributarios y
   previsionales alrededor. Todo va dentro de >= 720 px: en celular sigue el
   diseño móvil (login-movil.css) y lo tk-* no existe.

   Movimiento (una sola personalidad, sobria): todo entra con la misma curva
   (--tk-entra) entre 400 y 800 ms; lo que sale acelera y dura menos.
   Primero el ticket (protagonista); después los documentos, en cascada de
   menos de medio segundo; lo que queda moviéndose es poco y tenue (los
   documentos flotan 6 px). Con "reducir movimiento" todo queda quieto y
   completo. */

@media (max-width: 719px) {
  .tk-fondo, .tk-docs, .tk-ranura, .tk-cabecera, .tk-titulo, .tk-bajada,
  .tk-mayus, .tk-pie-ticket, .tk-sello, .tk-pie { display: none !important; }
  /* Los envoltorios del ticket no cuentan: el formulario de celular ordena
     a sus hijos con `order`. */
  .tk-impresora, .tk-salida, .tk-campos { display: contents; }
}

@media (min-width: 720px) {
  :root {
    --tk-fondo: #160838;
    --tk-ranura: #0B0420;
    --tk-violeta: #6D28D9;
    --tk-violeta-hover: #5B21B6;
    --tk-lila: #C4B5FD;
    --tk-lila-2: #DDD6FE;
    --tk-lila-3: #EDE9FE;
    --tk-menta: #14B8A6;
    --tk-menta-2: #2DD4BF;
    --tk-menta-3: #5EEAD4;
    --tk-papel: #FFFDF7;
    --tk-tinta: #0F172A;
    --tk-gris: #64748B;
    --tk-raya: #DAD6E6;
    --tk-rojo: #DC2626;
    --tk-rojo-fondo: #FEF2F2;
    --tk-entra: cubic-bezier(0.05, 0.7, 0.1, 1);
    --tk-sale: cubic-bezier(0.3, 0, 1, 1);
  }
  body { background: var(--tk-fondo); }

  #login-box {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: var(--tk-lila-3);
    background:
      radial-gradient(ellipse 46% 52% at 50% 48%, rgb(109 40 217 / 22%), transparent 70%),
      var(--tk-fondo);
  }
  #login-box .auth-blob, #login-box .auth-dots, #login-box .auth-header { display: none; }
  /* "¿No tienes cuenta? Crear cuenta" va dentro del ticket, bajo "Iniciar
     sesión" (19/10/2026, pedido del dueño; antes estaba arriba a la
     derecha, fuera del ticket). */
  #login-box .lm-sin-cuenta { margin: 16px 0 0; font-size: .88rem; color: var(--tk-gris); }
  #login-box .lm-sin-cuenta a { color: var(--tk-violeta); }

  /* ---- Fondo: cuadrícula de 32 px, solo al centro ---- */
  .tk-fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  .tk-cuadricula {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, var(--tk-linea) 1px, transparent 1px),
      linear-gradient(to bottom, var(--tk-linea) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: calc(50% + 16px) calc(50% + 16px);
  }
  .tk-cuadricula {
    --tk-linea: rgb(196 181 253 / 8%);
    -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 50%, #000 25%, transparent 78%);
    mask-image: radial-gradient(ellipse 58% 62% at 50% 50%, #000 25%, transparent 78%);
  }
  /* ---- La impresora: ranura con su luz y el ticket que sale de ella ---- */
  .tk-impresora {
    position: relative;
    z-index: 2;
    align-self: center;
    justify-self: center;
    width: min(440px, calc(100vw - 64px));
    padding: 8px 0 32px;
  }
  .tk-ranura {
    position: relative;
    z-index: 2;
    height: 22px;
    margin: 0 -24px;
    border-radius: 11px;
    background: var(--tk-ranura);
    box-shadow: inset 0 2px 5px rgb(0 0 0 / 70%), 0 1px 0 rgb(255 255 255 / 7%), 0 18px 30px -18px rgb(0 0 0 / 70%);
  }
  .tk-ranura::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 34px;
    top: 50%;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 2px;
    background: #000000;
  }
  .tk-led {
    position: absolute;
    right: 14px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: var(--tk-lila);
    box-shadow: 0 0 8px var(--tk-lila);
    transition: background-color 300ms, box-shadow 300ms;
  }
  #login-box[data-estado="verificando"] .tk-led { animation: tk-titila 800ms ease-in-out infinite alternate; }
  #login-box[data-estado="error"] .tk-led { background: #F87171; box-shadow: 0 0 10px #F87171; }
  #login-box[data-estado="listo"] .tk-led { background: var(--tk-menta-2); box-shadow: 0 0 10px var(--tk-menta-2); }

  /* El ticket se corta en la ranura (clip arriba) y deja ver su sombra a
     los lados y abajo. */
  .tk-salida {
    position: relative;
    z-index: 1;
    margin-top: -11px;
    clip-path: inset(0 -60px -80px -60px);
    filter: drop-shadow(0 26px 34px rgb(0 0 0 / 45%));
  }
  #login-box .auth-card {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 30px 28px 34px;
    border-radius: 0;
    box-shadow: none;
    background: var(--tk-papel);
    color: var(--tk-tinta);
    /* Borde de abajo troquelado: medios círculos cada 18 px. */
    -webkit-mask:
      linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat,
      radial-gradient(circle at 9px 100%, transparent 5.5px, #000 6px) bottom / 18px 9px repeat-x;
    mask:
      linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat,
      radial-gradient(circle at 9px 100%, transparent 5.5px, #000 6px) bottom / 18px 9px repeat-x;
    animation: tk-imprime 800ms var(--tk-entra) 150ms both;
  }
  #login-box .auth-form { position: relative; }

  /* ---- Encabezado del ticket ---- */
  .tk-cabecera {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 7px;
    padding-bottom: 16px;
    border-bottom: 1.5px dashed var(--tk-raya);
    font-variant-numeric: tabular-nums;
    font-size: .74rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tk-gris);
  }
  .tk-cabecera > :nth-child(even) { text-align: right; }
  .tk-cabecera-titulo { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--tk-violeta); }
  .tk-cuadritos {
    width: 12px;
    height: 12px;
    background:
      linear-gradient(var(--tk-menta) 0 0) 0 0 / 5px 5px no-repeat,
      linear-gradient(var(--tk-menta-3) 0 0) 0 7px / 5px 5px no-repeat,
      linear-gradient(var(--tk-menta) 0 0) 7px 7px / 5px 5px no-repeat;
  }

  #login-box .auth-aviso {
    margin: 16px 0 0;
    padding: 10px 12px;
    border: 1px solid #E4DCFD;
    border-radius: 10px;
    background: #F5F2FF;
    color: #4C1D95;
    font-size: .82rem;
    text-align: left;
  }

  .tk-titulo { margin-top: 24px; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--tk-tinta); }
  .tk-titulo span { color: var(--tk-menta); }
  .tk-bajada { margin: 8px 0 0; font-size: .95rem; line-height: 1.45; color: var(--tk-gris); }

  #login-box .auth-field { display: flex; flex-direction: column; gap: 8px; margin: 0; }
  #login-box .lm-etiqueta { display: block; font-size: .86rem; font-weight: 700; line-height: 1.35; color: var(--tk-tinta); }
  #login-box .auth-field-icon { display: none; }
  #login-box .auth-field input {
    height: 50px;
    padding: 0 16px;
    border: 1.5px solid #D9D4EA;
    border-radius: 12px;
    background: #FFFFFF;
    font: inherit;
    font-size: .95rem;
    color: var(--tk-tinta);
    transition: border-color 150ms, box-shadow 150ms;
  }
  #login-box .auth-field input::placeholder { color: #9AA3B5; }
  #login-box .auth-field input:focus { border-color: var(--tk-violeta); box-shadow: 0 0 0 4px var(--tk-lila-3); }
  #login-box .auth-field input[aria-invalid="true"] { border-color: var(--tk-rojo); box-shadow: 0 0 0 4px var(--tk-rojo-fondo); }
  #login-box .auth-field-toggle {
    top: auto;
    bottom: 7px;
    right: 7px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transform: none;
  }
  #login-box .auth-field-toggle:hover { background: var(--tk-lila-3); color: var(--tk-violeta); }

  /* Los campos, uno bajo el otro; "¿Olvidaste tu contraseña?" en la línea
     de la etiqueta de la contraseña. */
  .tk-campos { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 16px; margin-top: 22px; }
  .tk-campos > * { grid-column: 1 / -1; }
  .tk-campos > .auth-field:nth-of-type(2) { grid-row: 2; }
  #login-box .auth-forgot {
    grid-row: 2;
    grid-column: 2;
    align-self: start;
    z-index: 1;
    margin: 0;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--tk-violeta);
  }
  #login-box .auth-forgot:hover { color: var(--tk-violeta-hover); text-decoration: underline; }

  .tk-mayus { margin: -4px 0 0; font-size: .8rem; font-weight: 600; color: #92400E; }

  /* ---- Botones ---- */
  #login-box .auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 52px;
    margin: 4px 0 0;
    padding: 0 20px;
    border: 0;
    border-radius: 12px;
    background: var(--tk-violeta);
    color: #FFFFFF;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 150ms;
  }
  #login-box .auth-submit:hover { background: var(--tk-violeta-hover); filter: none; }
  #login-box .auth-submit:disabled { opacity: 1; cursor: progress; }
  #login-box :is(.auth-submit, .auth-forgot, .lm-sin-cuenta a, .tk-pie a):focus-visible {
    outline: 3px solid var(--tk-lila);
    outline-offset: 2px;
  }
  /* Verificando: la flecha da paso a un indicador que gira. */
  #login-box[data-estado="verificando"] .auth-submit svg { display: none; }
  #login-box[data-estado="verificando"] .auth-submit::after {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid rgb(255 255 255 / 35%);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: tk-gira 700ms linear infinite;
  }

  #login-box .auth-error { min-height: 0; margin: 0; text-align: left; font-size: .85rem; line-height: 1.4; color: var(--tk-rojo); }
  #login-box .auth-error:not(:empty) {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid #FECACA;
    border-radius: 10px;
    background: var(--tk-rojo-fondo);
    animation: tk-aparece 400ms var(--tk-entra);
  }

  /* ---- Pie del ticket: la marca y el código de barras ---- */
  .tk-pie-ticket {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1.5px dashed var(--tk-raya);
    font-variant-numeric: tabular-nums;
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tk-gris);
  }
  .tk-pie-marca { display: flex; align-items: center; gap: 7px; font-size: .9rem; font-weight: 800; letter-spacing: -0.01em; text-transform: none; color: var(--tk-tinta); }
  .tk-pie-marca img { width: 18px; height: auto; }

  /* ---- Sello de éxito ---- */
  .tk-sello {
    position: absolute;
    right: 4px;
    top: 46%;
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 10px 16px;
    border: 3px double #0F9F8F;
    border-radius: 10px;
    background: rgb(20 184 166 / 7%);
    color: #0F766E;
    font-variant-numeric: tabular-nums;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0;
    transform: rotate(-9deg) scale(1.7);
  }
  .tk-sello small { font-size: .6rem; letter-spacing: .16em; }
  #login-box[data-estado="listo"] .tk-sello {
    opacity: .95;
    transform: rotate(-9deg) scale(1);
    transition: transform 450ms var(--tk-entra), opacity 180ms var(--tk-entra);
  }

  /* ---- Alrededor (desde 1150 px): tarjetas como las del portal, en tres
     profundidades (cerca nítidas, al medio y al fondo desenfocadas) ---- */
  .tk-docs { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  .tk-doc {
    --op: .96;
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 196px;
    padding: 14px 16px 15px;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    background: #F6F4FB;
    color: #081A33;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 26px 44px -22px rgb(0 0 0 / 70%);
    opacity: var(--op);
    rotate: var(--giro, 0deg);
    animation:
      tk-doc-entra 600ms var(--tk-entra) var(--retraso, 0ms) both,
      tk-flota var(--dura, 6s) ease-in-out calc(var(--retraso, 0ms) + 600ms) infinite alternate,
      tk-deriva calc(var(--dura, 6s) * 1.4) ease-in-out calc(var(--retraso, 0ms) + 600ms) infinite alternate;
  }
  /* El brillo: una franja blanca en diagonal que baja de arriba a la
     izquierda hacia abajo a la derecha. Cada tarjeta la recibe un poco
     después según dónde está (--tk-brillo), así parece una sola luz que
     cruza la pantalla. Pasa al terminar de entrar y después una vez por
     minuto. */
  .tk-doc::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, transparent 42%, rgb(255 255 255 / 85%) 50%, transparent 58%) 100% 100% / 300% 300% no-repeat;
    animation: tk-brillo 60s calc(1400ms + var(--tk-brillo, 0ms)) infinite;
  }
  .tk-doc--compras, .tk-doc--ventas, .tk-doc--grafico, .tk-doc--vence { --op: .78; filter: blur(1.4px); }
  .tk-doc--balance, .tk-doc--liquidaciones, .tk-doc--deudas { --op: .45; filter: blur(3.2px); width: 170px; }
  .tk-doc--compras { left: calc(50% - 480px); top: 13%; --giro: -7deg; --retraso: 520ms; --dura: 6s; --fx: 7px; --fy: 13px; --fr: 1.2deg; --tk-brillo: 180ms; }
  .tk-doc--balance { left: calc(50% - 690px); top: 9%; --giro: -9deg; --retraso: 640ms; --dura: 7.5s; --fx: -6px; --fy: 11px; --fr: -1deg; --tk-brillo: 0ms; }
  .tk-doc--f29 { left: calc(50% - 460px); top: 50%; --giro: 5deg; --retraso: 460ms; --dura: 5.5s; --fx: -7px; --fy: 14px; --fr: 1.4deg; --tk-brillo: 460ms; }
  .tk-doc--ventas { left: calc(50% + 290px); top: 14%; --giro: 7deg; --retraso: 580ms; --dura: 6.5s; --fx: 6px; --fy: -13px; --fr: -1.2deg; --tk-brillo: 780ms; }
  .tk-doc--previred { left: calc(50% + 262px); top: 43%; --giro: -4deg; --retraso: 400ms; --dura: 5.8s; --fx: -7px; --fy: -12px; --fr: 1.1deg; --tk-brillo: 960ms; }
  .tk-doc--grafico { left: calc(50% + 320px); top: 72%; --giro: -6deg; --retraso: 700ms; --dura: 6.2s; --fx: 7px; --fy: 13px; --fr: -1.3deg; --tk-brillo: 1200ms; }
  .tk-doc--liquidaciones { left: calc(50% - 700px); top: 35%; --giro: 6deg; --retraso: 480ms; --dura: 7s; --fx: 6px; --fy: -11px; --fr: 1deg; --tk-brillo: 150ms; }
  .tk-doc--aviso { left: calc(50% - 600px); top: 81%; --giro: -3deg; --retraso: 540ms; --dura: 5.6s; --fx: -8px; --fy: 10px; --fr: -1.2deg; --tk-brillo: 520ms; }
  .tk-doc--vence { left: calc(50% + 500px); top: 51%; --giro: 5deg; --retraso: 620ms; --dura: 6.8s; --fx: -6px; --fy: 13px; --fr: 1.2deg; --tk-brillo: 1150ms; }
  .tk-doc--deudas { left: calc(50% + 560px); top: 79%; --giro: -8deg; --retraso: 680ms; --dura: 7.4s; --fx: 7px; --fy: -12px; --fr: -1deg; --tk-brillo: 1350ms; }
  /* El aviso: una píldora con su check, como el de la landing. */
  .tk-doc--aviso {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: auto;
    padding: 10px 16px 10px 10px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .tk-doc-check { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #E7F8EF; color: #146C4E; }
  .tk-doc-fecha { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
  .tk-doc-fecha b {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--tk-lila-3);
    color: var(--tk-violeta);
    font-size: 1.25rem;
    font-weight: 800;
  }
  .tk-doc-fecha > span { display: grid; font-size: .9rem; font-weight: 700; }
  .tk-doc-fecha small { font-size: .74rem; font-weight: 500; text-transform: none; color: #64748B; }
  /* Cuadritos turquesa de la marca, sueltos entre las tarjetas. */
  .tk-cuadro {
    position: absolute;
    width: var(--lado, 12px);
    height: var(--lado, 12px);
    border-radius: 3px;
    background: var(--tk-menta);
    opacity: var(--op, .5);
    filter: blur(var(--desenfoque, 0px));
    animation:
      tk-doc-entra 600ms var(--tk-entra) var(--retraso, 0ms) both,
      tk-flota var(--dura, 6s) ease-in-out calc(var(--retraso, 0ms) + 600ms) infinite alternate,
      tk-deriva calc(var(--dura, 6s) * 1.4) ease-in-out calc(var(--retraso, 0ms) + 600ms) infinite alternate;
  }
  .tk-cuadro--1 { left: calc(50% - 300px); top: 9%; --lado: 14px; --op: .55; --retraso: 560ms; --dura: 5s; --fx: 5px; --fy: -11px; --fr: 8deg; }
  .tk-cuadro--2 { left: calc(50% - 560px); top: 66%; --lado: 9px; --op: .4; --desenfoque: 1px; --retraso: 600ms; --dura: 6.5s; --fx: -4px; --fy: 9px; --fr: -10deg; }
  .tk-cuadro--3 { left: calc(50% + 250px); top: 33%; --lado: 10px; --op: .5; --retraso: 640ms; --dura: 5.5s; --fx: 4px; --fy: 12px; --fr: 12deg; }
  .tk-cuadro--4 { left: calc(50% + 470px); top: 9%; --lado: 16px; --op: .3; --desenfoque: 2px; --retraso: 580ms; --dura: 7s; --fx: -5px; --fy: -10px; --fr: -8deg; }
  .tk-cuadro--5 { left: calc(50% + 270px); top: 90%; --lado: 11px; --op: .45; --retraso: 660ms; --dura: 6s; --fx: 5px; --fy: 10px; --fr: 10deg; background: var(--tk-lila); }
  .tk-doc-etiqueta { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #64748B; }
  .tk-doc-monto { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
  .tk-doc-sub { font-size: .76rem; color: #64748B; }
  .tk-doc-fila { display: flex; justify-content: space-between; gap: 8px; font-size: .76rem; color: #475569; }
  .tk-doc-fila:first-of-type { margin-top: 4px; padding-top: 8px; border-top: 1px solid #EEF1F6; }
  .tk-doc-chip {
    align-self: flex-start;
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgb(30 158 107 / 12%);
    color: #16744F;
    font-size: .7rem;
    font-weight: 700;
  }
  .tk-doc-grafico { display: flex; align-items: flex-end; gap: 6px; height: 54px; margin-top: 6px; }
  .tk-doc-grafico i { flex: 1; border-radius: 3px 3px 0 0; background: #DDD6FE; }
  .tk-doc-grafico i:nth-child(1) { height: 40%; }
  .tk-doc-grafico i:nth-child(2) { height: 55%; }
  .tk-doc-grafico i:nth-child(3) { height: 48%; }
  .tk-doc-grafico i:nth-child(4) { height: 66%; }
  .tk-doc-grafico i:nth-child(5) { height: 60%; }
  .tk-doc-grafico i:nth-child(6) { height: 100%; background: var(--tk-violeta); }
  .tk-doc-grafico i:nth-child(7) { height: 72%; }

  /* ---- Pie de página ---- */
  .tk-pie {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    padding: 16px clamp(20px, 3vw, 40px) 20px;
    font-size: .82rem;
    color: var(--tk-lila);
  }
  .tk-pie-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
  .tk-pie-enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
  .tk-pie a { color: var(--tk-lila-2); }
  .tk-pie a:hover { color: #FFFFFF; }
}

/* Los documentos solo caben desde 1150 px. */
@media (max-width: 1149px) {
  .tk-docs { display: none; }
}

/* El brillo cruza la tarjeta en 0,9 s (empieza y termina suave) y el resto
   del minuto queda fuera de ella. */
@keyframes tk-brillo {
  0% { background-position: 100% 100%; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  1.5% { background-position: 0% 0%; }
  100% { background-position: 0% 0%; }
}
@keyframes tk-imprime { from { transform: translateY(-102%); } to { transform: none; } }
@keyframes tk-doc-entra { from { opacity: 0; translate: 0 16px; } to { opacity: var(--op); translate: 0 0; } }
/* Flotar: dos vaivenes suaves con ritmos distintos (el de lado a lado dura
   1,4 veces el otro), así el recorrido no se repite igual ni se detiene.
   Cada tarjeta con su medida (--fx, --fy, --fr) y su ritmo (--dura). */
@keyframes tk-flota { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(var(--fy, 12px)) rotate(var(--fr, 1deg)); } }
@keyframes tk-deriva { from { translate: 0 0; } to { translate: var(--fx, 6px) 0; } }
@keyframes tk-titila { from { opacity: 1; } to { opacity: .25; } }
@keyframes tk-gira { to { transform: rotate(1turn); } }
@keyframes tk-aparece { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }

/* Quieto y completo: el ticket ya impreso, los documentos en su lugar, sin
   luz del cursor ni parpadeos. */
@media (min-width: 720px) and (prefers-reduced-motion: reduce) {
  #login-box .auth-card, .tk-doc, .tk-cuadro, #login-box .auth-error:not(:empty) { animation: none; }
  #login-box[data-estado="listo"] .tk-sello { transition: none; }
  .tk-doc::after { display: none; }
  #login-box[data-estado="verificando"] .tk-led { animation: none; opacity: .5; }
}