/* Angisa Ventas — base global fiel al prototipo real (Angisa Ventas v2).
   La mayoría del estilo de cada pantalla vive inline en las vistas PHP,
   copiado literalmente del markup del prototipo, para evitar que una capa
   de utilidades propia se desvíe del original. Este archivo solo cubre el
   reset global, el modal/toast (posicionados fixed, compartidos por todas
   las pantallas) y la impresión de tickets. */

* { box-sizing: border-box; }
body {
  margin: 0;
  background: #eff1ec;
  font-feature-settings: 'tnum' 1, 'cv05' 1;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: #161a17;
  -webkit-font-smoothing: antialiased;
}
a { color: #2b6233; }
a:hover { color: #24522a; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 15px; }
img { max-width: 100%; display: block; }

/* ---------- Modal (idéntico al prototipo: overlay + caja blanca radius 4px) ---------- */

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(16,22,18,.5);
  display: grid; place-items: center; padding: 24px; z-index: 60;
}
.modal {
  width: 100%; background: #fff; border-radius: 4px; max-height: 88vh; overflow: auto;
  display: flex; flex-direction: column;
}
.modal-header {
  padding: 20px 24px; border-bottom: 1px solid #e8ebe4; display: flex;
  align-items: flex-start; justify-content: space-between; gap: 14px;
}
.modal-title { font: 600 19px/1.3 'IBM Plex Sans', sans-serif; }
.modal-sub { font: 400 14px/1.4 'IBM Plex Sans', sans-serif; color: #5e6b62; margin-top: 3px; }
.modal-close {
  border: none; background: #f7f8f5; border-radius: 4px; width: 36px; height: 36px;
  font: 600 17px/1 'IBM Plex Sans', sans-serif; color: #5e6b62;
}
.modal-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.m-row { display: flex; gap: 9px; flex-wrap: wrap; }
.m-label { font: 600 13.5px/1 'IBM Plex Sans', sans-serif; }
.m-input {
  height: 48px; border: 1.5px solid #c9cfc6; border-radius: 5px; padding: 0 14px;
  outline: none; width: 100%; background: #fff;
}
.m-field { display: flex; flex-direction: column; gap: 6px; }
.m-err {
  background: #fbeae4; border: 1px solid #eecbbd; color: #8c3416; border-radius: 5px;
  padding: 12px 14px; font: 500 14px/1.4 'IBM Plex Sans', sans-serif;
}
.m-btn {
  height: 50px; border-radius: 5px; padding: 0 20px; font: 600 15.5px/1 'IBM Plex Sans', sans-serif;
  border: 1.5px solid #c9cfc6; background: #fff; color: #333c36;
}
.m-btn-primary { flex: 1; border: none; background: #326e3a; color: #fff; }
.m-btn-primary:disabled { background: #dde1d9; color: #5b645c; cursor: not-allowed; }
.m-btn-danger { border-color: #eecbbd; color: #b4461f; }
.m-btn-danger-fill { flex: 1; border: none; background: #b4461f; color: #fff; }

/* ---------- Toast ---------- */

.toast {
  position: fixed; left: 50%; top: 22px; transform: translateX(-50%);
  background: #326e3a; color: #fff; border-radius: 5px; padding: 14px 22px;
  font: 600 15px/1.3 'IBM Plex Sans', sans-serif; z-index: 80;
  box-shadow: 0 8px 24px rgba(16,22,18,.18);
}
.toast.err { background: #8c3416; }

/* ---------- Responsive: sidebar off-canvas en pantallas angostas ---------- */

.mobile-toggle { display: none; border: none; background: transparent; font-size: 20px; padding: 6px; }

@media (max-width: 900px) {
  /* !important: el <aside> trae position:sticky inline (para el layout de escritorio);
     esta regla debe ganarle en pantallas angostas para volverse un menú off-canvas. */
  .app-sidebar { position: fixed !important; left: 0; top: 0; z-index: 90; transform: translateX(-100%); transition: transform .18s ease; }
  .app-sidebar.open { transform: translateX(0); }
  .mobile-toggle { display: inline-flex; }
  .app-main { width: 100%; }
}

/* ---------- Impresión de tickets (58/80mm térmico) ---------- */

@media print {
  body * { visibility: hidden; }
  .ticket, .ticket * { visibility: visible; }
  .ticket { position: absolute; left: 0; top: 0; width: 100%; }
  .no-print { display: none; }
}
.ticket { width: 80mm; margin: 0 auto; font: 400 12px/1.4 'IBM Plex Mono', monospace; padding: 8px; }
.ticket.w58 { width: 58mm; }
.ticket h1 { font-size: 14px; text-align: center; margin: 0 0 6px; }
.ticket hr { border: none; border-top: 1px dashed #999; margin: 8px 0; }
.ticket .row { display: flex; justify-content: space-between; gap: 8px; }
.ticket .total { font-weight: 700; font-size: 14px; }