/* ===== Base ===== */
:root{
  --bg:#f7f8fb; --fg:#111; --mut:#6b7280;
  --card:#fff; --bd:#e5e7eb; --pri:#2563eb; --danger:#dc2626; --ok:#059669;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--fg); background:var(--bg);
  font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
}
a{color:var(--pri); text-decoration:none}
.wrap{max-width:1200px; margin:0 auto; padding:16px}
.topbar{background:#fff; border-bottom:1px solid var(--bd)}
.topbar .wrap{display:flex; align-items:center; gap:12px; justify-content:space-between}
.topbar nav{display:flex; gap:8px; flex-wrap:wrap}
.topbar nav a{padding:8px 10px; border-radius:10px}
.topbar nav a:hover{background:#eef2ff}

.btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border:1px solid var(--bd); border-radius:10px;
  background:#fff; color:var(--pri); cursor:pointer
}
.btn.primary{background:var(--pri); color:#fff; border-color:var(--pri)}
.btn.danger{background:var(--danger); color:#fff; border-color:var(--danger)}
.btn.ok{background:var(--ok); color:#fff; border-color:var(--ok)}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.card{background:var(--card); border:1px solid var(--bd); border-radius:14px; padding:14px}
label{display:flex; flex-direction:column; gap:4px; margin:6px 0}
input,select,button{padding:10px; border:1px solid var(--bd); border-radius:10px; background:#fff}
input:focus,select:focus,button:focus{outline:2px solid #dbeafe; outline-offset:2px}
.muted{color:var(--mut)}
.thumb{width:42px; height:42px; object-fit:cover; border-radius:8px; border:1px solid var(--bd)}

/* ===== Tablas reales ===== */
.table-wrap{background:#fff; border:1px solid var(--bd); border-radius:14px; overflow:auto}
table.table{width:100%; border-collapse:separate; border-spacing:0}
.table thead th{
  text-align:left; font-weight:600; font-size:13px; color:#374151;
  background:#f9fafb; position:sticky; top:0; z-index:1;
  border-bottom:1px solid var(--bd); padding:10px
}
.table tbody td{padding:10px; border-bottom:1px solid var(--bd)}
.table tbody tr:hover{background:#fafafa}
.table .num{text-align:right; white-space:nowrap}
.table .actions{white-space:nowrap}
.table caption{caption-side:bottom; padding:8px 10px; color:var(--mut); font-size:12px}

/* Responsive: en pantallas chicas mostrar “card rows” */
@media (max-width: 860px){
  .table thead{display:none}
  .table tbody tr{display:block; border-bottom:1px solid var(--bd); margin:6px; border-radius:12px}
  .table tbody td{display:flex; justify-content:space-between; gap:12px; padding:8px 10px}
  .table tbody td::before{
    content: attr(data-th);
    font-weight:600; color:#374151
  }
}

/* ===== POS ===== */
.pos-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:16px}
@media (max-width:980px){ .pos-grid{grid-template-columns:1fr} }
.result{background:#fff;border:1px solid var(--bd);padding:10px;border-radius:12px;margin:8px 0;display:flex;align-items:center;justify-content:space-between;gap:10px}
.cart-item{display:flex;align-items:center;gap:8px;justify-content:space-between;background:#fff;border:1px solid var(--bd);border-radius:12px;padding:10px;margin:6px 0}
.big-input{padding:14px;font-size:16px}
.big-btn{padding:12px 14px;font-size:16px;border-radius:12px}
.qty{width:86px}

/* ===== Modal ===== */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(17,24,39,.5);
  display:none; align-items:center; justify-content:center; z-index:50;
}
.modal{
  width:min(680px, 92vw); background:#fff; border-radius:16px; border:1px solid var(--bd);
  box-shadow:0 30px 70px rgba(0,0,0,.22);
}
.modal header{padding:14px 16px; border-bottom:1px solid var(--bd); display:flex; justify-content:space-between; align-items:center}
.modal .body{padding:16px; max-height:min(70vh, 560px); overflow:auto}
.modal footer{padding:14px 16px; border-top:1px solid var(--bd); display:flex; gap:8px; justify-content:flex-end}

/* ===== Print ticket dentro de modal ===== */
@media print{
  /* Limitar impresión solo al contenido marcado */
  body *{visibility:hidden !important}
  .print-area, .print-area *{visibility:visible !important}

  /* Tamaño para impresoras térmicas de 80mm (ajusta si usas 58mm) */
  @page{ size: 80mm auto; margin: 0 }

  /* No usar position:fixed (se repite por página al imprimir) */
  .print-area{ position: static; width: 80mm; margin: 0 auto; padding: 0 }

  .ticket{ width: 100%; max-width: none; break-inside: avoid; page-break-inside: avoid }
  .ticket hr{border:none;border-top:1px dashed #000;margin:8px 0}
  .ticket .r{text-align:right}
}