:root { --fg:#1a1f2b; --muted:#5b6475; --bg:#f4f6fa; --card:#fff; --accent:#1f5eff; --danger:#c62828; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui, sans-serif; color:var(--fg); background:var(--bg); }
.auth-card { max-width:380px; margin:8vh auto; padding:24px; background:var(--card); border-radius:12px;
  box-shadow:0 2px 12px rgba(0,0,0,.08); }
label { display:block; margin:12px 0 4px; color:var(--muted); font-size:.9rem; }
input { width:100%; padding:12px; font-size:1rem; border:1px solid #c7cddb; border-radius:8px; }
button { margin-top:16px; width:100%; padding:14px; font-size:1rem; color:#fff; background:var(--accent);
  border:0; border-radius:8px; cursor:pointer; min-height:48px; }
.error { color:var(--danger); }
.blocked { margin:16px 0; padding:12px; border:2px solid var(--danger); border-radius:8px; }

.wide { max-width:1000px; margin:24px auto; padding:0 16px; }
.topbar { display:flex; gap:16px; align-items:center; padding:12px 16px; background:var(--card); box-shadow:0 1px 4px rgba(0,0,0,.08); }
.topbar nav { flex:1; }
.topbar form { margin:0; }
button.link { margin:0; width:auto; background:none; color:var(--accent); min-height:0; padding:4px 8px; }
.row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.btn { display:inline-block; padding:10px 16px; color:#fff; background:var(--accent); border-radius:8px; text-decoration:none; }
table { width:100%; border-collapse:collapse; background:var(--card); border-radius:8px; }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid #e5e8ef; vertical-align:top; }
.filters { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.filters input, .filters select { width:auto; flex:1 1 9rem; min-width:7rem; }
.filters button { width:auto; margin:0; }
.stack label { margin-top:12px; }
.stack button[type=submit] { width:auto; padding:12px 24px; }
.grid { display:grid; grid-template-columns:200px 1fr; gap:6px 16px; }
.grid dt { color:var(--muted); }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.actions button { width:auto; margin:8px 0 0; }
.act-block, .act-disable { background:var(--danger); }
.act-suspend { background:#e08a00; }
.act-unblock, .act-reactivate { background:#2e7d32; }
.notice { padding:10px 12px; background:#e8f5e9; border-radius:8px; }
.status { font-size:1.2rem; }
.muted { color:var(--muted); }
fieldset { margin:16px 0; border:1px solid #c7cddb; border-radius:8px; }
.blocked-screen { max-width:560px; margin:8vh auto; padding:32px; background:var(--card); border:3px solid var(--danger);
  border-radius:12px; text-align:center; }
.blocked-screen h1 { color:var(--danger); }
.blocked-screen .lead { font-size:1.15rem; }
.blocked-screen dl { text-align:left; display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:24px 0; }
.blocked-screen dt { color:var(--muted); }
.blocked-screen .code { font-family:ui-monospace, monospace; font-weight:700; font-size:1.2rem; }

.secret code { display:inline-block; padding:12px 16px; font-size:1.3rem; background:#f0f2f8; border-radius:8px; user-select:all; }
.check { display:block; margin:6px 0; color:var(--fg); }
.check input { width:auto; }
.perms { columns:2; list-style:none; padding:0; }

form.inline { display:inline; margin:0; }
form.inline button.link { width:auto; }
img { max-width:100%; height:auto; border-radius:8px; }
.home-nav { display:flex; gap:8px; flex-wrap:wrap; margin:16px 0; }

/* --- TPV --- */
body.pos { background:#eef1f7; }
.pos-grid { display:grid; grid-template-columns:minmax(0,3fr) minmax(300px,2fr); gap:16px; padding:16px; max-width:1400px; margin:0 auto; }
@media (max-width: 640px) { .pos-grid { grid-template-columns:1fr; } }
.pos-search input[type=search] { font-size:1.4rem; padding:16px; }
.results { list-style:none; padding:0; margin:12px 0 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.results form { margin:0; }
.product-btn { display:flex; flex-direction:column; gap:4px; align-items:flex-start; text-align:left; min-height:96px; margin:0; padding:12px;
  background:#fff; color:var(--fg); border:2px solid #d5dbe8; }
.product-btn:hover, .product-btn:focus { border-color:var(--accent); }
.product-btn:disabled { opacity:.5; }
.product-btn span { font-size:1.25rem; font-weight:700; color:var(--accent); }
.product-btn small { color:var(--muted); }
.pos-cart { background:var(--card); border-radius:12px; padding:16px; box-shadow:0 2px 12px rgba(0,0,0,.08); align-self:start; position:sticky; top:8px; }
table.cart td { padding:8px 6px; }
tr.issue { background:#fdecea; }
input.qty { width:84px; text-align:right; font-size:1.1rem; padding:8px; }
button.small { width:auto; min-height:40px; padding:8px 12px; margin:0 0 0 4px; font-size:.9rem; }
button.danger { background:var(--danger); }
.num { text-align:right; white-space:nowrap; }
dl.totals { display:grid; grid-template-columns:1fr auto; gap:4px 12px; margin:12px 0; }
dl.totals dd { margin:0; text-align:right; }
dl.totals .grand { font-size:1.6rem; font-weight:700; border-top:2px solid var(--fg); padding-top:6px; }
fieldset.methods { border:0; padding:0; margin:8px 0; display:flex; gap:8px; flex-wrap:wrap; }
fieldset.methods legend { color:var(--muted); font-size:.9rem; }
label.method { display:flex; align-items:center; gap:8px; margin:0; padding:14px 18px; background:#f0f2f8; border:2px solid #d5dbe8; border-radius:10px; font-size:1.1rem; cursor:pointer; color:var(--fg); }
label.method input { width:auto; }
label.method:has(input:checked) { border-color:var(--accent); background:#e6edff; }
button.pay { min-height:64px; font-size:1.4rem; background:#2e7d32; }
button.pay:disabled { background:#9aa5b8; cursor:not-allowed; }
.sale-done { text-align:center; }
.ticket-number { font-size:2.4rem; font-weight:800; font-family:ui-monospace, monospace; margin:8px 0; }
/* --- ticket imprimible (80 mm) --- */
body.ticket-page { background:#fff; }
.ticket { width:80mm; max-width:100%; margin:0 auto; padding:8px; font:13px/1.35 ui-monospace, monospace; color:#000; }
.ticket h1 { font-size:16px; text-align:center; margin:0 0 4px; }
.ticket header p { margin:0; text-align:center; }
.ticket table { width:100%; border-collapse:collapse; background:transparent; }
.ticket td { border:0; padding:1px 0; }
.ticket-totals .grand td { font-weight:700; border-top:1px dashed #000; padding-top:4px; }
.ticket-void { text-align:center; font-weight:700; border:2px solid #000; padding:4px; }
.ticket-logo { display:block; margin:0 auto 4px; max-width:40mm; max-height:20mm; }
.ticket-copy { text-align:center; font-weight:700; border:1px dashed #000; padding:2px; margin:4px 0; }
.ticket-actions { text-align:center; margin:8px; }
.ticket.ticket-THERMAL_58 { width:58mm; font-size:11px; }
.ticket.ticket-THERMAL_80 { width:80mm; }
.ticket.ticket-A4 { width:190mm; font:14px/1.4 system-ui, sans-serif; }
@media print {
  .noprint, .ticket-actions { display:none !important; }
  .ticket { width:auto; padding:0; }
  body.fmt-THERMAL_58 { margin:0; }
  body.fmt-THERMAL_80 { margin:0; }
}
@media print and (min-width: 0) { body.fmt-THERMAL_58 .ticket { width:58mm; } body.fmt-THERMAL_80 .ticket { width:80mm; } body.fmt-A4 .ticket { width:190mm; } }

/* Factura imprimible (HTML; el PDF se podrá añadir después sobre la misma plantilla) */
.invoice-doc{max-width:820px;margin:1rem auto;padding:1rem}
.invoice-doc table{width:100%;border-collapse:collapse}
.invoice-doc th,.invoice-doc td{padding:.3rem .5rem;border-bottom:1px solid #ccc;text-align:left}
.invoice-doc .num{text-align:right}
.invoice-doc .draft{color:#a00;font-weight:bold}
@media print{.invoice-doc .noprint{display:none}}

/* --- TPV profesional (Fase 19) --- */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
kbd { font:600 .75rem ui-monospace, monospace; border:1px solid var(--muted); border-bottom-width:2px; border-radius:4px; padding:0 4px; background:var(--card); }
.pos-header { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.pos-status { margin-left:auto; }
.badge { display:inline-block; padding:2px 10px; border-radius:999px; font-weight:700; font-size:.8rem; }
.badge-open { background:#d7f5dd; color:#14532d; }
.badge-closed { background:#fde2e2; color:#7f1d1d; }
.categories { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.chip { width:auto; margin:0; padding:8px 14px; border-radius:999px; border:1px solid var(--accent); background:var(--card); color:var(--accent); cursor:pointer; font-weight:600; }
.chip:hover, .chip:focus { background:var(--accent); color:#fff; }
.pos-quick h3 { margin:8px 0 0; font-size:.95rem; color:var(--muted); }
.quick-list li { position:relative; }
.fav-tools { position:absolute; top:4px; right:4px; display:flex; gap:2px; }
.fav-add { position:absolute; top:4px; right:4px; }
a.pay[data-disabled="true"], a.pay[aria-disabled="true"] { opacity:.5; pointer-events:none; }
a.pay, button.pay { display:inline-block; font-size:1.2rem; padding:14px 22px; background:var(--accent); color:#fff; border:0; border-radius:10px; text-decoration:none; cursor:pointer; }
.cart-line:focus, .cart-line[aria-selected="true"] { outline:3px solid var(--accent); outline-offset:-3px; background:rgba(31,94,255,.08); }
.qty-form { display:flex; align-items:center; gap:4px; }
.qty-form .qty { width:4.5em; text-align:center; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:50; }
.modal[hidden] { display:none; }
.modal-card { background:var(--card); color:var(--fg); border-radius:14px; padding:24px; width:min(460px, 94vw); box-shadow:0 10px 40px rgba(0,0,0,.35); }
.pay-total { font-size:1.6rem; }
.blocked { font-weight:800; text-align:center; border:2px solid var(--danger); padding:8px; border-radius:8px; }
.sale-done h2 { color:#14532d; letter-spacing:.04em; }
@media (prefers-color-scheme: dark) { body.pos { background:#11151d; } .badge-open { background:#14532d; color:#d7f5dd; } .badge-closed { background:#7f1d1d; color:#fde2e2; } }

/* Fase 21: preferencia de usuario «TPV compacto» */
body.pos-compact .product-btn, body.pos-compact .results li { padding: .25rem .4rem; }
body.pos-compact .results { gap: .25rem; }
body.pos-compact .cart-line, body.pos-compact #cart td { padding-top: .15rem; padding-bottom: .15rem; }

/* Fase 22 (hallazgos del navegador real): nada desborda la página en móvil/tableta; las tablas anchas se desplazan dentro de su contenedor */
main.wide { overflow-x:auto; }
main.wide table { max-width:100%; }
@media (max-width: 640px) { .filters input, .filters select { flex:1 1 100%; } }
button kbd, a.pay kbd, .btn kbd { color: var(--fg); background:#fff; }  /* Fase 22: el texto de la tecla era blanco sobre blanco dentro de botones */