/* === kiosco.css ===
   Modo mostrador. Pensado para una pantalla fija a un metro de distancia y para
   operarse sin mouse: tipografía grande, una sola columna de foco (la búsqueda)
   y el total siempre a la vista.

   Usa los tokens de base.css, así que acompaña el tema claro/oscuro. */

body.kiosco-on { overflow: hidden; }

.kiosco {
  position: fixed; inset: 0; z-index: 150;
  display: grid;
  grid-template-rows: 52px 1fr 40px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  user-select: none;
}
.kiosco[hidden] { display: none; }

/* ══ Barra superior ═══════════════════════════════════════════════════════ */
.k-top {
  display: flex; align-items: center; gap: 14px;
  padding: 0 16px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}
.k-brand {
  font-family: var(--font-head); font-weight: 900;
  font-size: .82rem; letter-spacing: .22em;
  color: var(--amber);
}
.k-ctx { font-size: .82rem; color: var(--text3); }
.k-spacer { flex: 1; }

.k-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--text2); border-radius: 999px;
  padding: 5px 13px; font-size: .82rem; font-family: inherit;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.k-chip:hover { border-color: var(--amber); color: var(--text); }
.k-chip span { font-weight: 700; color: var(--text); }
.k-chip-out:hover { border-color: var(--red); }

.k-net { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--text3); }
.k-net i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px var(--green);
}
.k-net.off i { background: var(--red); box-shadow: 0 0 8px var(--red); }
.k-net.off span { color: var(--red); font-weight: 700; }

.k-clock {
  font-size: 1rem; font-weight: 800; color: var(--text2);
  font-variant-numeric: tabular-nums;
}

/* ══ Cuerpo ═══════════════════════════════════════════════════════════════ */
.k-main {
  display: grid; grid-template-columns: 1fr 340px;
  gap: 14px; padding: 14px; min-height: 0;
}
.k-left  { display: grid; grid-template-rows: auto auto 1fr; gap: 12px; min-height: 0; }
.k-right { display: grid; grid-template-rows: auto auto 1fr; gap: 12px; min-height: 0; }

/* ── Búsqueda ── */
.k-searchbox {
  position: relative; display: flex; align-items: center;
  background: var(--bg2);
  border: 2px solid var(--border2); border-radius: var(--r2);
  transition: border-color .15s, box-shadow .15s;
}
.k-searchbox:focus-within {
  border-color: var(--amber);
  box-shadow: 0 0 0 4px var(--amber-dim);
}
.k-search-icon { padding: 0 4px 0 18px; font-size: 1.2rem; opacity: .7; }
.k-search {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none;
  color: var(--text); font-family: inherit;
  font-size: 1.55rem; font-weight: 600;
  padding: 16px 14px;
}
.k-search::placeholder { color: var(--text3); font-weight: 400; font-size: 1.15rem; }
.k-multi {
  margin-right: 16px; padding: 6px 14px; border-radius: var(--r);
  background: var(--amber); color: #000;
  font-size: 1.1rem; font-weight: 900; white-space: nowrap;
}

/* ── Resultados de búsqueda ── */
.k-results-wrap { min-height: 0; }
.k-results { list-style: none; max-height: 244px; overflow-y: auto; }
.k-results:empty { display: none; }

.k-res {
  display: grid; grid-template-columns: 108px 1fr auto auto;
  align-items: center; gap: 14px;
  padding: 11px 14px;
  border: 1px solid transparent; border-left: 4px solid transparent;
  border-radius: var(--r);
  background: var(--bg2);
  margin-bottom: 4px;
  cursor: pointer;
}
.k-res.sel {
  border-color: var(--amber); border-left-color: var(--amber);
  background: var(--amber-dim);
}
.k-res-code {
  font-family: ui-monospace, Consolas, monospace; font-size: .82rem;
  color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.k-res.sel .k-res-code { color: var(--amber); }
.k-res-name { font-size: 1.05rem; font-weight: 600; }
.k-res-stock { font-size: .8rem; color: var(--text3); white-space: nowrap; }
.k-res-stock.no { color: var(--red); font-weight: 700; }
.k-res-price {
  font-size: 1.15rem; font-weight: 800; color: var(--amber);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.k-tag {
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  background: var(--blue-dim); color: var(--blue);
  border-radius: 4px; padding: 2px 6px; margin-left: 8px;
}
.k-res-hint { font-size: .74rem; color: var(--text3); }

.k-empty {
  padding: 26px; text-align: center;
  color: var(--text3); font-size: .95rem;
}

/* ── Carrito ── */
.k-cart-wrap {
  display: grid; grid-template-rows: auto 1fr; min-height: 0;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r2);
  overflow: hidden;
}
.k-cart-head, .k-line {
  display: grid;
  grid-template-columns: 116px 1fr 132px 116px 132px;
  align-items: center; gap: 10px;
  padding: 9px 16px;
}
.k-cart-head {
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text3); background: var(--bg3);
  border-bottom: 1px solid var(--border);
}
.k-num { text-align: right; }

.k-cart { list-style: none; overflow-y: auto; min-height: 0; }
.k-line {
  border-left: 4px solid transparent;
  border-bottom: 1px solid var(--border);
  font-size: 1.05rem;
}
.k-line.sel { background: var(--amber-dim); border-left-color: var(--amber); }
.k-line-code {
  font-family: ui-monospace, Consolas, monospace; font-size: .8rem; color: var(--text3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.k-line-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-line-qty {
  text-align: right; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--text);
}
.k-line-qty small { font-weight: 600; color: var(--text3); margin-left: 3px; }
.k-line-price, .k-line-sub {
  text-align: right; font-variant-numeric: tabular-nums;
}
.k-line-price { color: var(--text2); }
.k-line-sub   { font-weight: 800; }
.k-line.nueva { animation: kFlash .5s ease; }
@keyframes kFlash {
  from { background: var(--green-dim); }
  to   { background: transparent; }
}

/* ── Total ── */
.k-total-box {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--r2); padding: 18px 20px 20px;
  text-align: right;
}
.k-total-label {
  font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text3);
}
.k-total {
  font-family: var(--font-head);
  font-size: 3.1rem; line-height: 1.05; font-weight: 900;
  color: var(--amber); font-variant-numeric: tabular-nums;
  margin: 4px 0 2px; word-break: break-all;
}
.k-total-sub { font-size: .85rem; color: var(--text2); }
.k-desc {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border2);
  font-size: .88rem; font-weight: 700;
}
.k-desc.menos { color: var(--green); }
.k-desc.mas   { color: var(--red); }

/* ── Botones de cobro ── */
.k-pagos {
  display: grid; grid-template-rows: auto repeat(4, minmax(54px, 68px)); gap: 8px;
  align-content: start;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--r2); padding: 14px;
  min-height: 0;
}
.k-pagos-title {
  font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text3);
}
.k-pago {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: var(--r); color: var(--text);
  font-family: inherit; font-size: 1.02rem; font-weight: 700;
  padding: 0 14px; cursor: pointer;
  transition: border-color .15s, background .15s, transform .05s;
}
.k-pago:hover  { border-color: var(--amber); background: var(--amber-dim); }
.k-pago:active { transform: translateY(1px); }

.k-side-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-self: end; }
.k-mini {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--r); color: var(--text2);
  font-family: inherit; font-size: .82rem; font-weight: 600;
  padding: 9px 6px; cursor: pointer;
}
.k-mini:hover { border-color: var(--amber); color: var(--text); }
.k-mini-danger:hover { border-color: var(--red); color: var(--red); }

/* ══ Barra de atajos ══════════════════════════════════════════════════════ */
.k-hints {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 0 16px;
  background: var(--bg2); border-top: 1px solid var(--border);
  font-size: .76rem; color: var(--text3);
  overflow: hidden;
}
.k-hints span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

kbd {
  display: inline-block;
  background: var(--bg4); border: 1px solid var(--border2);
  border-bottom-width: 2px; border-radius: 5px;
  padding: 1px 6px; min-width: 22px; text-align: center;
  font-family: ui-monospace, Consolas, monospace; font-size: .72rem; font-weight: 700;
  color: var(--amber);
}
.k-pago kbd, .k-mini kbd { font-size: .74rem; }

/* ══ Diálogos ═════════════════════════════════════════════════════════════ */
.k-dialog-back {
  position: absolute; inset: 0; z-index: 10;
  background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.k-dialog-back[hidden] { display: none; }
.k-dialog {
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: var(--r2); box-shadow: var(--shadow);
  width: 560px; max-width: 100%; max-height: 84vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.k-dialog-title {
  font-family: var(--font-head); font-size: 1.15rem; font-weight: 800;
  padding: 16px 22px; border-bottom: 1px solid var(--border);
}
.k-dialog-body { padding: 20px 22px; overflow-y: auto; }
.k-dialog-hint {
  padding: 11px 22px; border-top: 1px solid var(--border);
  background: var(--bg3); font-size: .78rem; color: var(--text3);
  display: flex; gap: 16px; flex-wrap: wrap;
}

.k-dlg-input {
  width: 100%; background: var(--bg3);
  border: 2px solid var(--border2); border-radius: var(--r);
  color: var(--text); font-family: inherit;
  font-size: 1.6rem; font-weight: 700; padding: 12px 16px; outline: none;
}
.k-dlg-input:focus { border-color: var(--amber); }
.k-dlg-monto {
  font-family: var(--font-head); font-size: 2.6rem; font-weight: 900;
  color: var(--amber); text-align: center; font-variant-numeric: tabular-nums;
  margin: 4px 0 14px;
}
.k-dlg-msg { font-size: 1rem; color: var(--text2); line-height: 1.6; }
.k-dlg-msg b { color: var(--text); }

.k-dlg-list { list-style: none; max-height: 46vh; overflow-y: auto; }
.k-dlg-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-radius: var(--r);
  border-left: 4px solid transparent;
  font-size: 1rem; cursor: pointer;
}
.k-dlg-list li.sel { background: var(--amber-dim); border-left-color: var(--amber); }
.k-dlg-list .k-dlg-sub { font-size: .8rem; color: var(--text3); }

/* Tabla de la ayuda */
.k-help { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; align-items: center; }
.k-help-sec {
  grid-column: 1 / -1; margin-top: 10px;
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber);
}
.k-help-sec:first-child { margin-top: 0; }
.k-help-k { white-space: nowrap; text-align: right; }
.k-help-d { font-size: .9rem; color: var(--text2); }

/* ══ Pantallas chicas: una sola columna ═══════════════════════════════════ */
@media (max-width: 1024px) {
  .k-main { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .k-right { grid-template-rows: auto auto auto; }
  .k-total { font-size: 2.4rem; }
  .k-cart-head, .k-line { grid-template-columns: 1fr 90px 110px; }
  .k-cart-head span:nth-child(1), .k-line-code,
  .k-cart-head span:nth-child(4), .k-line-price { display: none; }
}