/* PosControl — diseño. Marca KernalPOS: grafito y rojo en oscuro, hoja blanca con acción negra en claro (Atkinson Hyperlegible).
   Estilo true-black-flat adaptado a la marca: elevación SOLO por luminosidad (fondo → panel → hundido),
   sin bordes ni sombras en lo que reposa; el color va en los datos (estado del enlace) y en la única acción. */
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 400; font-display: swap; src: url(fuentes/atkinson-hyperlegible-next-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 500; font-display: swap; src: url(fuentes/atkinson-hyperlegible-next-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 600; font-display: swap; src: url(fuentes/atkinson-hyperlegible-next-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 700; font-display: swap; src: url(fuentes/atkinson-hyperlegible-next-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-weight: 400; font-display: swap; src: url(fuentes/atkinson-hyperlegible-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-weight: 500; font-display: swap; src: url(fuentes/atkinson-hyperlegible-mono-latin-500-normal.woff2) format("woff2"); }

:root {
  /* Oscuro = «Grafito y rojo» (variante B de /root/design/kernalpos-identidad.html), igual que FreePOS. */
  --fondo: #121214; --panel: #1a1a1d; --hundido: #222226; --activo: #2a2a2f;
  --regla: rgb(255 255 255 / 0.08); --control: rgb(255 255 255 / 0.15);
  --texto: #ececee; --tenue: #a1a1a8; --apagado: #85858d;
  --marca: #ff3b40; --senal: #34d399; --aviso: #fbbf24; --peligro: #ff6b6b;
  --accion: #e5141b; --accion-hover: #c80f15; --sobre-accion: #ffffff;
  --foco: rgb(229 20 27 / 0.3);
  --pill-ok-bg: rgb(52 211 153 / 0.14); --pill-ok: #6ee7b7;
  --pill-aviso-bg: rgb(251 191 36 / 0.14); --pill-aviso: #fcd34d;
  --pill-mal-bg: rgb(255 107 107 / 0.14); --pill-mal: #fca5a5;
  --pill-neutro-bg: rgb(255 255 255 / 0.08); --pill-neutro: #d4d4d8;
  --letra: "Atkinson Hyperlegible Next", system-ui, "Segoe UI", sans-serif;
  --cifra: "Atkinson Hyperlegible Mono", ui-monospace, Consolas, monospace;
  --r: 8px; --r-control: 6px; --alto-control: 36px; --gutter: 29px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --fondo: #f4f4f5; --panel: #ffffff; --hundido: #ececee; --activo: #e4e4e7;
    --regla: rgb(0 0 0 / 0.09); --control: rgb(0 0 0 / 0.2);
    --texto: #0b0b0c; --tenue: #55555d; --apagado: #6e6e76;
    --marca: #c80006; --senal: #047857; --aviso: #a15c00; --peligro: #b91c1c;
    --accion: #0b0b0c; --accion-hover: #2c2c30; --foco: rgb(224 0 6 / 0.18);
    --pill-ok-bg: #dcfae9; --pill-ok: #065f46; --pill-aviso-bg: #fff4d6; --pill-aviso: #8a4b00;
    --pill-mal-bg: #fff1f1; --pill-mal: #9b1c1c; --pill-neutro-bg: #ececee; --pill-neutro: #3f3f46;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --fondo: #f4f4f5; --panel: #ffffff; --hundido: #ececee; --activo: #e4e4e7;
  --regla: rgb(0 0 0 / 0.09); --control: rgb(0 0 0 / 0.2);
  --texto: #0b0b0c; --tenue: #55555d; --apagado: #6e6e76;
  --marca: #c80006; --senal: #047857; --aviso: #a15c00; --peligro: #b91c1c;
  --accion: #0b0b0c; --accion-hover: #2c2c30; --foco: rgb(224 0 6 / 0.18);
  --pill-ok-bg: #dcfae9; --pill-ok: #065f46; --pill-aviso-bg: #fff4d6; --pill-aviso: #8a4b00;
  --pill-mal-bg: #fff1f1; --pill-mal: #9b1c1c; --pill-neutro-bg: #ececee; --pill-neutro: #3f3f46;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
body { background: var(--fondo); color: var(--texto); font: 400 15px/1.5 var(--letra); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
a { color: var(--marca); }
.cifra { font-family: var(--cifra); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* Botones: una sola acción esmeralda por pantalla; secundario con contorno; terciario texto. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--alto-control); padding: 0 16px; border-radius: var(--r-control); font: 600 14px var(--letra); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color 150ms var(--ease), transform 120ms var(--ease); }
.btn:active { transform: scale(0.98); }
.btn-accion { background: var(--accion); color: var(--sobre-accion); }
.btn-accion:hover { background: var(--accion-hover); }
.btn-sec { background: transparent; color: var(--texto); border-color: var(--control); }
.btn-sec:hover { background: var(--hundido); }
.btn-peligro { background: transparent; color: var(--peligro); border-color: var(--peligro); }
.btn[disabled] { background: var(--hundido); color: var(--apagado); cursor: not-allowed; border-color: transparent; }

.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pill-ok { background: var(--pill-ok-bg); color: var(--pill-ok); }
.pill-aviso { background: var(--pill-aviso-bg); color: var(--pill-aviso); }
.pill-mal { background: var(--pill-mal-bg); color: var(--pill-mal); }
.pill-neutro { background: var(--pill-neutro-bg); color: var(--pill-neutro); }
.punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

label.campo { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; }
input.entrada { width: 100%; height: 40px; padding: 0 12px; border-radius: var(--r-control); border: 1px solid var(--control); background: var(--fondo); color: var(--texto); font: 16px var(--letra); }
input.entrada:focus { border-color: var(--marca); outline: none; box-shadow: 0 0 0 3px var(--foco); }

/* Marca de PosControl: dos pantallas enlazadas (la PC del local y la web), dibujadas para el producto. */
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--texto); text-decoration: none; }
.marca svg { flex: none; }

/* Cabeceras y unidades en la letra de texto; solo las cifras van en mono. */
th.num { font-family: var(--letra); }
.num .ud, .cifra .ud { font-family: var(--letra); }


/* Superficies del navegador con la paleta. */
::selection { background: var(--foco); color: var(--texto); }
html { caret-color: var(--marca); scrollbar-color: var(--hundido) var(--fondo); }

/* Logo: la PC del local, el enlace y la web se dibujan en ese orden al cargar. */
.marca svg .trazo { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trazar 520ms var(--ease) forwards; }
.marca svg .t2 { animation-delay: 160ms; animation-duration: 220ms; }
.marca svg .t3 { animation-delay: 300ms; }
@keyframes trazar { to { stroke-dashoffset: 0; } }

/* PC conectada: el punto late. Es el único bucle y dice «en vivo». */
.pill-ok .punto { position: relative; }
.pill-ok .punto::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: latir 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
@keyframes latir { 0% { transform: scale(1); opacity: 0.55; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
.pill { transition: background-color 200ms var(--ease), color 200ms var(--ease); }

/* Botón ocupado: giro en vez de texto de espera. */
.btn .giro { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: girar 700ms linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.btn[aria-busy="true"] { cursor: progress; }

/* Aviso arriba al centro. */
.toast { position: fixed; top: 20px; left: 50%; z-index: 60; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: var(--r); background: var(--texto); color: var(--fondo); font-size: 14px; font-weight: 500; box-shadow: 0 8px 24px rgb(0 0 0 / 0.28); transition: opacity 180ms var(--ease), translate 180ms var(--ease); }
.toast[data-fuera] { opacity: 0; translate: 0 -8px; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .marca svg .trazo { animation: none; stroke-dashoffset: 0; }
  .pill-ok .punto::after { animation: none; display: none; }
  .btn:active { transform: none; }
  .toast { transition: opacity 180ms; }
}

/* Fondo: la K de la marca grande y tenue detrás de todo, para que no quede un fondo liso. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url(k-fondo.png) no-repeat 50% 55% / min(78vmin, 720px); opacity: 0.07; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) body::before { filter: invert(1) hue-rotate(180deg); opacity: 0.06; } }
:root[data-theme="light"] body::before { filter: invert(1) hue-rotate(180deg); opacity: 0.06; }
/* Debajo de la K, el nombre de la marca, tan tenue como el logo. */
body::after { content: "KERNALCODEX"; position: fixed; left: 0; right: 0; top: calc(55vh + min(78vmin, 720px) * 0.31); z-index: -1; pointer-events: none; text-align: center; padding-left: 0.4em; font: 700 calc(min(78vmin, 720px) * 0.075)/1 var(--letra); letter-spacing: 0.4em; color: var(--texto); opacity: 0.07; }

/* Marca KernalCodex: la K, el nombre del producto y la casa debajo. */
.marca img { border-radius: 8px; flex: none; }
.marca-txt { display: flex; flex-direction: column; line-height: 1.05; }
.marca-txt small { font-size: 9.5px; font-weight: 700; letter-spacing: 0.32em; color: var(--tenue); margin-top: 3px; }

/* Campo de contraseña con el ojo (lo pone mov.js). */
.clave { position: relative; display: block; }
.clave input.entrada { padding-right: 44px; }
.clave .ojo { position: absolute; top: 0; right: 0; width: 44px; height: 40px; display: grid; place-items: center; border: 0; background: none; color: var(--texto); opacity: .7; cursor: pointer; border-radius: var(--r-control); }
.clave .ojo:hover { opacity: 1; }
.clave .ojo:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--foco); }