/* ════════════════════════════════════════════════════════════
   JABIJ MOTOS — Sistema de Gestión
   Design system · paleta profesional Slate + Azul corporativo
   ════════════════════════════════════════════════════════════ */

/* ── Design tokens ────────────────────────────────────────── */
:root {
  /* Marca */
  --primary:        #2563eb;   /* azul corporativo  */
  --primary-dark:   #1d4ed8;
  --primary-soft:   #eff6ff;   /* fondos suaves      */
  --accent:         #2563eb;   /* alias de primary   */
  --accent-dark:    #1d4ed8;

  /* Superficies */
  --bg:             #f1f5f9;   /* slate-100 fondo app */
  --surface:        #ffffff;
  --surface-alt:    #f8fafc;   /* slate-50            */

  /* Sidebar */
  --sidebar-bg:     #1e293b;   /* slate-800           */
  --sidebar-bg-2:   #0f172a;   /* slate-900           */

  /* Texto */
  --text:           #0f172a;   /* slate-900           */
  --text-body:      #334155;   /* slate-700           */
  --text-muted:     #64748b;   /* slate-500           */
  --text-faint:     #94a3b8;   /* slate-400           */

  /* Bordes y líneas */
  --border:         #e2e8f0;   /* slate-200           */
  --border-strong:  #cbd5e1;   /* slate-300           */

  /* Semánticos (desaturados, sobrios) */
  --success:        #15803d;
  --success-soft:   #dcfce7;
  --danger:         #b91c1c;
  --danger-soft:    #fee2e2;
  --warning:        #b45309;
  --warning-soft:   #fef3c7;
  --info:           #1d4ed8;
  --info-soft:      #dbeafe;

  /* Radios y sombras */
  --radius-sm: 6px;
  --radius:    8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --shadow:    0 1px 3px rgba(15,23,42,.08), 0 4px 12px rgba(15,23,42,.05);
  --shadow-lg: 0 12px 32px rgba(15,23,42,.14);
  --ring:      0 0 0 3px rgba(37,99,235,.18);

  --sidebar-w: 244px;
  --sidebar-w-collapsed: 64px;
}

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { color: var(--text); letter-spacing: -0.01em; }
a { color: var(--primary); text-decoration: none; }

/* ── Utilities ────────────────────────────────────────────── */
.hidden { display: none !important; }
.w-full { width: 100%; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.ml-auto { margin-left: auto; }
.relative { position: relative; }
.text-muted { color: var(--text-muted); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary, .btn-accent, .btn-outline, .btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.55rem 1.05rem; border-radius: var(--radius);
  font-size: 0.875rem; font-weight: 600; line-height: 1; cursor: pointer;
  border: 1px solid transparent; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn-primary:focus-visible, .btn-accent:focus-visible,
.btn-outline:focus-visible, .btn-danger:focus-visible { outline: none; box-shadow: var(--ring); }

.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-accent { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-accent:hover { background: var(--accent-dark); }
.btn-accent:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-outline { background: var(--surface); color: var(--text-body); border-color: var(--border-strong); }
.btn-outline:hover { background: var(--surface-alt); border-color: var(--text-faint); }
.btn-outline:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #991b1b; }
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); border: 1px solid var(--border); padding: 1.5rem;
}
.card-sm { padding: 1rem; }

/* ── Inputs ───────────────────────────────────────────────── */
.input, select.input, textarea.input {
  width: 100%; font-size: 0.875rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 0.55rem 0.8rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: var(--text-faint); }
.input:hover { border-color: var(--text-faint); }
.input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.input:disabled { background: var(--surface-alt); color: var(--text-muted); cursor: not-allowed; }

.label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-body); margin-bottom: 0.35rem; }
.form-group { margin-bottom: 1rem; }

/* ── Badges ───────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; padding: 0.2rem 0.6rem;
  border-radius: 9999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.badge-verde    { background: var(--success-soft); color: var(--success); border-color: #bbf7d0; }
.badge-rojo     { background: var(--danger-soft);  color: var(--danger);  border-color: #fecaca; }
.badge-amarillo { background: var(--warning-soft); color: var(--warning); border-color: #fde68a; }
.badge-azul     { background: var(--info-soft);    color: var(--info);    border-color: #bfdbfe; }
.badge-gris     { background: #f1f5f9; color: var(--text-muted); border-color: var(--border); }

/* ── Tables ───────────────────────────────────────────────── */
.table-container { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead { background: var(--surface-alt); border-bottom: 1px solid var(--border); }
th {
  text-align: left; padding: 0.7rem 1rem; font-size: 0.72rem; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em;
}
td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); color: var(--text-body); }
tbody tr { transition: background .12s ease; }
tbody tr:hover td { background: var(--surface-alt); }
tbody tr:last-child td { border-bottom: none; }

/* ── Login ────────────────────────────────────────────────── */
.login-bg {
  min-height: 100vh; padding: 1rem;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--sidebar-bg-2) 0%, var(--sidebar-bg) 60%, #243043 100%);
}
.login-card {
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); width: 100%; max-width: 400px; overflow: hidden;
  border: 1px solid var(--border);
}
.login-header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  padding: 2rem; text-align: center; color: #fff;
}
.login-icon { font-size: 2.75rem; }
.login-logo { max-width: 210px; max-height: 84px; width: auto; height: auto; display: block; margin: 0 auto; }
.login-header h1 { color: #fff; font-size: 1.4rem; font-weight: 700; margin-top: 0.5rem; letter-spacing: 0.02em; }
.login-header p { font-size: 0.85rem; opacity: 0.88; margin-top: 0.5rem; }
.login-body { padding: 2rem; }
.error-msg { color: var(--danger); font-size: 0.85rem; margin-top: 0.75rem; text-align: center; }

/* ── Layout ───────────────────────────────────────────────── */
.layout { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
  border-right: 1px solid rgba(255,255,255,.06);
  transition: width 0.22s ease;
  overflow: hidden;
}
.sidebar.collapsed { width: var(--sidebar-w-collapsed); }

/* ── Brand ─────────────────────────────────────────────────── */
.sidebar-brand {
  padding: 0.85rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: row; align-items: center;
  justify-content: space-between; gap: 0.5rem;
  flex-shrink: 0;
}
.sidebar-logo {
  max-height: 44px; height: auto; width: auto; max-width: 160px;
  object-fit: contain; display: block; flex-shrink: 1;
  transition: opacity .2s ease, max-width .22s ease;
}
.sidebar.collapsed .sidebar-logo { opacity: 0; max-width: 0; overflow: hidden; }
.sidebar.collapsed .sidebar-brand { justify-content: center; padding: 0.85rem 0; }

/* Toggle button */
.sidebar-toggle {
  background: none; border: none;
  color: rgba(255,255,255,.5); cursor: pointer;
  padding: 0.3rem 0.5rem; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s;
}
.sidebar-toggle:hover { color: #fff; background: rgba(255,255,255,.1); }

/* ── Nav ───────────────────────────────────────────────────── */
.sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0.6rem 0.5rem; }

/* Accordion group */
.nav-group { margin-bottom: 0.1rem; }

.nav-group-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 0.65rem 0.3rem;
  color: rgba(255,255,255,.32); font-size: 0.64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: color .15s ease;
  border-radius: var(--radius-sm);
}
.nav-group-header:hover { color: rgba(255,255,255,.6); background: rgba(255,255,255,.04); }

.nav-group-chevron {
  flex-shrink: 0; width: 12px; height: 12px;
  transition: transform 0.2s ease;
}
.nav-group.closed .nav-group-chevron { transform: rotate(-90deg); }

.nav-group-body {
  overflow: hidden;
  max-height: 400px;
  transition: max-height 0.24s ease, opacity 0.2s ease;
  opacity: 1;
}
.nav-group.closed .nav-group-body { max-height: 0; opacity: 0; }

/* In collapsed sidebar: hide headers, always show all items */
.sidebar.collapsed .nav-group-header { display: none; }
.sidebar.collapsed .nav-group-body { max-height: 400px !important; opacity: 1 !important; }
.sidebar.collapsed .nav-group { margin-bottom: 0; }

/* Nav items */
.nav-item {
  display: flex; align-items: center; gap: 0.7rem; width: 100%;
  padding: 0.55rem 0.65rem; margin-bottom: 1px;
  border: none; background: transparent; border-radius: var(--radius);
  color: rgba(255,255,255,.65); font-size: 0.875rem; font-weight: 500;
  text-decoration: none; cursor: pointer; text-align: left;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap; overflow: hidden;
}
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.active {
  background: var(--primary); color: #fff; font-weight: 600;
  box-shadow: 0 2px 8px rgba(37,99,235,.32);
}
.nav-label { transition: opacity .15s ease, width .15s ease; }
.sidebar.collapsed .nav-label { opacity: 0; width: 0; overflow: hidden; }
.sidebar.collapsed .nav-item {
  justify-content: center; padding: 0.6rem 0;
}
.nav-item .nav-badges { margin-left: auto; display: flex; gap: 0.25rem; align-items: center; flex-shrink: 0; }
.nav-item .nav-badge {
  background: var(--danger); color: #fff;
  font-size: 0.65rem; font-weight: 700; padding: 0.1rem 0.42rem; border-radius: 9999px;
  flex-shrink: 0;
}
.nav-item .nav-badge.warn   { background: var(--warning); color: #fff; }
.nav-item .nav-badge.danger { background: var(--danger);  color: #fff; }
.sidebar.collapsed .nav-item .nav-badges { display: none; }

/* Tooltip en modo colapsado */
.sidebar.collapsed .nav-item { position: relative; }
.sidebar.collapsed .nav-item::after {
  content: attr(title);
  position: absolute; left: calc(var(--sidebar-w-collapsed) - 4px); top: 50%;
  transform: translateY(-50%);
  background: var(--sidebar-bg); color: rgba(255,255,255,.9);
  font-size: 0.8rem; font-weight: 500; white-space: nowrap;
  padding: 0.3rem 0.7rem; border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 2px 4px 12px rgba(0,0,0,.35);
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease;
  z-index: 100;
}
.sidebar.collapsed .nav-item:hover::after { opacity: 1; }

/* ── User area ─────────────────────────────────────────────── */
.sidebar-user {
  padding: 0.9rem 1rem; border-top: 1px solid rgba(255,255,255,.08);
  transition: opacity .2s ease;
  flex-shrink: 0;
}
.sidebar.collapsed .sidebar-user { opacity: 0; pointer-events: none; height: 0; padding: 0; overflow: hidden; }
.sidebar-nombre { color: rgba(255,255,255,.9); font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.sidebar-rol { color: rgba(255,255,255,.45); font-size: 0.7rem; text-transform: capitalize; margin-bottom: 0.6rem; }
.btn-logout {
  background: none; border: none; color: rgba(255,255,255,.55);
  cursor: pointer; font-size: 0.8rem; padding: 0; transition: color .15s ease;
  display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
}
.btn-logout:hover { color: #fff; }

.main-content { flex: 1; overflow-y: auto; background: var(--bg); }

/* ── Page content ─────────────────────────────────────────── */
.page { padding: 1.75rem; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.5rem; gap: 1rem; }
.page-title { font-size: 1.4rem; font-weight: 700; color: var(--text); }
.page-sub { font-size: 0.875rem; color: var(--text-muted); margin-top: 0.2rem; }
.filters { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }

/* ── POS ──────────────────────────────────────────────────── */
.pos-layout { display: flex; height: 100%; }
.pos-left { flex: 1; display: flex; flex-direction: column; border-right: 1px solid var(--border); overflow: hidden; }
.pos-right { width: 330px; display: flex; flex-direction: column; background: var(--surface); }
.pos-section { padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); }
.pos-cart { flex: 1; overflow-y: auto; }
.pos-totals { flex: 1; overflow-y: auto; padding: 1rem; }
.pos-actions { padding: 1rem; border-top: 1px solid var(--border); }
.pos-total-row { display: flex; justify-content: space-between; font-size: 0.875rem; margin-bottom: 0.4rem; color: var(--text-muted); }
.pos-total-final {
  font-size: 1.25rem; font-weight: 700; color: var(--primary);
  padding-top: 0.6rem; border-top: 1px solid var(--border); margin-top: 0.5rem;
}
.tipo-btn {
  padding: 0.45rem 0.8rem; border-radius: var(--radius); border: 1px solid var(--border-strong);
  font-size: 0.8rem; font-weight: 500; cursor: pointer; background: var(--surface);
  color: var(--text-body); transition: all .15s ease;
}
.tipo-btn:hover { border-color: var(--primary); color: var(--primary); }
.tipo-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.autocomplete { position: relative; }
.autocomplete-list {
  position: absolute; z-index: 50; left: 0; right: 0; top: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); max-height: 280px; overflow-y: auto; margin-top: 4px;
}
.autocomplete-item {
  padding: 0.6rem 1rem; cursor: pointer; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.autocomplete-item:hover { background: var(--primary-soft); }
.autocomplete-item:last-child { border-bottom: none; }

.pago-btn {
  padding: 0.5rem; border-radius: var(--radius); border: 1px solid var(--border-strong);
  font-size: 0.75rem; font-weight: 600; cursor: pointer; background: var(--surface);
  color: var(--text-body); flex: 1; text-align: center; transition: all .15s ease;
}
.pago-btn:hover { border-color: var(--primary); color: var(--primary); }
.pago-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.success-screen { text-align: center; padding: 3rem 2rem; }
.success-screen h2 { font-size: 1.5rem; font-weight: 700; color: var(--success); margin: 1rem 0 0.5rem; }

/* ── Modal ────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  backdrop-filter: blur(2px);
}
.modal {
  background: var(--surface); border-radius: var(--radius-lg); padding: 1.75rem;
  max-width: 500px; width: 100%; box-shadow: var(--shadow-lg); border: 1px solid var(--border);
  max-height: 90vh; overflow-y: auto;
}
.modal h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; color: var(--text); }
.modal-actions { display: flex; gap: 0.7rem; margin-top: 1.5rem; }

/* ── Stat cards ───────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.stat-card {
  background: var(--surface); border-radius: var(--radius-lg); padding: 1.3rem;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, transform .15s ease;
}
.stat-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.stat-card p:first-child {
  font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.45rem;
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.stat-value { font-size: 1.7rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.stat-sub { font-size: 0.75rem; color: var(--text-faint); margin-top: 0.3rem; }
.stat-verde    { color: var(--success); }
.stat-rojo     { color: var(--danger); }
.stat-azul     { color: var(--primary); }
.stat-amarillo { color: var(--warning); }

/* ── Charts ───────────────────────────────────────────────── */
.chart-bar-wrap { display: flex; align-items: flex-end; gap: 5px; height: 140px; padding: 0 0.5rem; }
.chart-bar {
  flex: 1; background: var(--primary); border-radius: 4px 4px 0 0;
  opacity: .85; min-width: 20px; transition: opacity .15s ease, background .15s ease;
}
.chart-bar:hover { opacity: 1; background: var(--primary-dark); }
.chart-labels { display: flex; gap: 5px; padding: 0.25rem 0.5rem 0; }
.chart-label { flex: 1; text-align: center; font-size: 0.65rem; color: var(--text-faint); overflow: hidden; }

/* ── Toast ────────────────────────────────────────────────── */
#toast-container { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.toast {
  padding: 0.75rem 1.2rem; border-radius: var(--radius); color: #fff;
  font-size: 0.875rem; font-weight: 500; box-shadow: var(--shadow-lg);
  animation: slideIn 0.25s ease; max-width: 340px; border-left: 4px solid rgba(255,255,255,.35);
}
.toast-success { background: var(--success); }
.toast-error   { background: var(--danger); }
.toast-info    { background: var(--primary); }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Loading ──────────────────────────────────────────────── */
.loading-spinner { text-align: center; padding: 4rem; color: var(--text-faint); }

/* ── Pagination ───────────────────────────────────────────── */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem; border-top: 1px solid var(--border);
  font-size: 0.875rem; color: var(--text-muted);
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ── Iconos (SVG lineal, monocromo · heredan color y tamaño) ── */
.ico { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }
/* Iconos dentro de botones: alineados con el texto vía gap del flex */
.btn-primary .ico, .btn-accent .ico, .btn-outline .ico, .btn-danger .ico { vertical-align: middle; }
/* Icono de navegación */
.nav-item .ico { width: 18px; height: 18px; }
/* Botón "solo icono" (editar, eliminar, cerrar) */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; padding: 0.25rem;
  color: var(--text-muted); border-radius: var(--radius); transition: color .15s ease, background .15s ease;
}
.icon-btn:hover { background: var(--surface-alt); }
.icon-btn.edit  { color: var(--primary); }
.icon-btn.danger { color: var(--danger); }

/* ── Buscador con icono de lupa ──────────────────────────────── */
.input-search {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 0.7rem center; padding-left: 2.2rem;
}

/* ── Toast con icono ─────────────────────────────────────────── */
.toast { display: flex; align-items: center; gap: 0.55rem; }
.toast .ico { width: 18px; height: 18px; }