/* ═══════════════════════════════════════════════════════════
   QG INGENIERÍA — Plataforma de Gestión v2
   Design System — mobile-first, professional
   ═══════════════════════════════════════════════════════════ */

/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }

/* ── TOKENS ────────────────────────────────────────────────── */
:root {
  /* Brand green */
  --g900: #1E3A0F; --g800: #2D5518; --g700: #3A6B1F;
  --g600: #4D8229; --g500: #5A8A2F;
  --g200: #C5E0A0; --g100: #EAF4DC; --g50: #F5FAF0;

  /* Danger red */
  --r700: #922B21; --r600: #C0392B; --r500: #E74C3C;
  --r100: #FDEDEC; --r50: #FFF5F4;

  /* Warning */
  --w600: #B7770D; --w500: #F39C12;
  --w100: #FEF9E7; --w50: #FFFDF0;

  /* Info blue */
  --b700: #1A4A7A; --b600: #1A5276; --b500: #2980B9;
  --b200: #A9CCE3; --b100: #D6EAF8;

  /* Purple */
  --p700: #5B2C6F; --p600: #6C3483;
  --p200: #D2B4DE; --p100: #F4ECF7;

  /* Orange */
  --o600: #CB6D11; --o500: #E67E22;
  --o200: #FAD7A0; --o100: #FDEBD0;

  /* Neutrals */
  --n900: #111827; --n800: #1F2937; --n700: #374151;
  --n600: #4B5563; --n500: #6B7280; --n400: #9CA3AF;
  --n300: #D1D5DB; --n200: #E5E7EB;
  --n100: #F3F4F6; --n50: #F9FAFB; --white: #FFFFFF;

  /* Layout */
  --sidebar-w: 230px;
  --topbar-h: 56px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.05);

  /* Typography */
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── BASE ──────────────────────────────────────────────────── */
body {
  font-family: var(--font);
  font-size: 1rem;
  color: var(--n900);
  background: var(--n100);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* ════════════════════════════════════════════════════════════
   AUTH SCREEN
   ════════════════════════════════════════════════════════════ */
#auth-screen {
  position: fixed; inset: 0; z-index: 1000;
  background: linear-gradient(145deg, var(--g900) 0%, var(--g700) 55%, var(--g500) 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.auth-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 40px 36px;
  width: 100%; max-width: 400px;
  box-shadow: var(--shadow-lg);
}
.auth-logo {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 28px;
}
.auth-logo-icon {
  width: 52px; height: 52px; border-radius: var(--radius);
  background: var(--g700); color: var(--white);
  font-size: 28px; font-weight: 900; font-family: Georgia, serif;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.auth-logo-name {
  font-size: 18px; font-weight: 800; color: var(--n900);
}
.auth-logo-sub {
  font-size: 12px; color: var(--n500); margin-top: 2px;
}
.auth-error {
  background: var(--r100); color: var(--r600);
  border: 1px solid #F5B7B1; border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 13px; margin-bottom: 14px;
}
.auth-footer {
  text-align: center; font-size: 11px; color: var(--n400); margin-top: 20px;
}

/* ════════════════════════════════════════════════════════════
   APP LAYOUT
   ════════════════════════════════════════════════════════════ */
#app { display: flex; min-height: 100vh; }

#sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 150;
}
#sidebar-overlay.open { display: block; }

/* ════════════════════════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  background: var(--g800); color: var(--white);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 200; overflow-y: auto;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }

.sidebar-header {
  padding: 18px 16px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}
.sidebar-logo {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--g600); color: var(--white);
  font-size: 20px; font-weight: 900; font-family: Georgia, serif;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sidebar-brand { font-size: 14px; font-weight: 700; color: var(--white); }
.sidebar-tagline { font-size: 10px; color: rgba(255,255,255,.45); margin-top: 1px; }

.sidebar-nav { padding: 8px 0; flex: 1; }

.nav-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
  color: rgba(255,255,255,.35); text-transform: uppercase;
  padding: 14px 18px 4px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px;
  font-size: 13.5px; font-weight: 500;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
  user-select: none;
}
.nav-item:hover {
  background: rgba(255,255,255,.07); color: var(--white);
}
.nav-item.active {
  background: rgba(255,255,255,.12); color: var(--white);
  border-left-color: var(--g200); font-weight: 600;
}
.nav-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }

.sidebar-user {
  margin-top: auto; padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--g600); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 13px; font-weight: 600; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 11px; color: rgba(255,255,255,.5); text-transform: capitalize; }
.logout-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.4); font-size: 18px; padding: 4px;
  line-height: 1; flex-shrink: 0;
  transition: color .15s;
}
.logout-btn:hover { color: var(--white); }

/* ════════════════════════════════════════════════════════════
   TOPBAR + MAIN WRAP
   ════════════════════════════════════════════════════════════ */
.main-wrap {
  margin-left: var(--sidebar-w);
  flex: 1; display: flex; flex-direction: column;
  min-height: 100vh; min-width: 0;
}
.topbar {
  height: var(--topbar-h);
  background: var(--white);
  border-bottom: 1px solid var(--n200);
  padding: 0 24px;
  display: flex; align-items: center; gap: 12px;
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow-sm); flex-shrink: 0;
}
.menu-toggle {
  display: none; background: none; border: none;
  cursor: pointer; color: var(--n600); padding: 4px;
  font-size: 22px; line-height: 1; flex-shrink: 0;
}
.topbar-title {
  font-size: 16px; font-weight: 700; color: var(--g700); flex: 1;
}
.topbar-date { font-size: 12px; color: var(--n400); white-space: nowrap; }

/* ════════════════════════════════════════════════════════════
   CONTENT + PAGES
   ════════════════════════════════════════════════════════════ */
.content { flex: 1; }

.page { display: none; padding: 24px; }
.page.active { display: block; }

.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 20px; gap: 12px; flex-wrap: wrap;
}
.page-title { font-size: 20px; font-weight: 800; color: var(--n900); }

/* ════════════════════════════════════════════════════════════
   KPI GRID
   ════════════════════════════════════════════════════════════ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; margin-bottom: 20px;
}
.kpi {
  background: var(--white); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--n300);
  display: flex; flex-direction: column; gap: 3px;
}
.kpi-icon { font-size: 24px; margin-bottom: 4px; }
.kpi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--n500); }
.kpi-value { font-size: 22px; font-weight: 800; line-height: 1.15; color: var(--n900); }
.kpi-sub { font-size: 12px; color: var(--n400); }

/* KPI color variants */
.kpi-green  { border-left-color: var(--g700); }
.kpi-green  .kpi-value { color: var(--g700); }
.kpi-red    { border-left-color: var(--r600); }
.kpi-red    .kpi-value { color: var(--r600); }
.kpi-blue   { border-left-color: var(--b600); }
.kpi-blue   .kpi-value { color: var(--b600); }
.kpi-orange { border-left-color: var(--o500); }
.kpi-orange .kpi-value { color: var(--o600); }
.kpi-purple { border-left-color: var(--p600); }
.kpi-purple .kpi-value { color: var(--p600); }

/* ════════════════════════════════════════════════════════════
   SCENARIOS (dashboard)
   ════════════════════════════════════════════════════════════ */
.scenario-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 12px;
}
.scenario {
  border-radius: var(--radius); padding: 14px 16px;
}
.scenario-label { font-size: 11px; font-weight: 700; color: var(--n600); margin-bottom: 2px; text-transform: uppercase; letter-spacing: .4px; }
.scenario-desc  { font-size: 11px; color: var(--n400); margin-bottom: 6px; }
.scenario-value { font-size: 22px; font-weight: 800; }

.scenario-red    { background: var(--r100); border: 1px solid #F5B7B1; }
.scenario-red    .scenario-value { color: var(--r600); }
.scenario-yellow { background: var(--w100); border: 1px solid var(--o200); }
.scenario-yellow .scenario-value { color: var(--w600); }
.scenario-green  { background: var(--g100); border: 1px solid var(--g200); }
.scenario-green  .scenario-value { color: var(--g700); }

/* ════════════════════════════════════════════════════════════
   CARDS
   ════════════════════════════════════════════════════════════ */
.card {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
  margin-bottom: 20px;
}
.card-header {
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 700;
  border-bottom: 1px solid var(--n200);
}
.card-body { padding: 16px; }
.card-body.p0 { padding: 0; }

/* Card header color variants */
.card-header-green  { background: var(--g700);  color: var(--white); border: none; }
.card-header-red    { background: var(--r600);  color: var(--white); border: none; }
.card-header-blue   { background: var(--b600);  color: var(--white); border: none; }
.card-header-orange { background: var(--o500);  color: var(--white); border: none; }
.card-header-purple { background: var(--p600);  color: var(--white); border: none; }

/* Two column layout */
.two-col-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px;
}

/* ════════════════════════════════════════════════════════════
   TABLES
   ════════════════════════════════════════════════════════════ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.table thead th {
  padding: 9px 12px; text-align: left;
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--n500);
  background: var(--n50); border-bottom: 2px solid var(--n200);
  white-space: nowrap;
}
.table th.r, .table td.r { text-align: right; }
.table th.c, .table td.c { text-align: center; }

.table tbody td {
  padding: 8px 12px; border-bottom: 1px solid var(--n200);
  vertical-align: middle; color: var(--n800);
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--g50); }

/* Row variants */
.table tr.row-warn  td { background: var(--w50); }
.table tr.row-alert td { background: var(--r50); }
.table tr.row-dud   td { background: var(--r100); color: var(--n600); }
.table tr.row-ok    td { background: var(--g50); }
.table tr.row-sub   td { background: var(--g700) !important; color: var(--white) !important; font-weight: 700; }
.table tr.row-sub-r td { background: var(--r600) !important; color: var(--white) !important; font-weight: 700; }
.table tr.row-sub-n td { background: var(--o500) !important; color: var(--white) !important; font-weight: 700; }

/* ════════════════════════════════════════════════════════════
   BADGES
   ════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.badge-green  { background: var(--g100);  color: var(--g700); }
.badge-red    { background: var(--r100);  color: var(--r600); }
.badge-yellow { background: var(--w100);  color: var(--w600); }
.badge-blue   { background: var(--b100);  color: var(--b600); }
.badge-purple { background: var(--p100);  color: var(--p600); }
.badge-orange { background: var(--o100);  color: var(--o600); }
.badge-gray   { background: var(--n100);  color: var(--n600); }

/* ════════════════════════════════════════════════════════════
   PROGRESS BAR
   ════════════════════════════════════════════════════════════ */
.progress-wrap { height: 6px; background: var(--n200); border-radius: 3px; overflow: hidden; }
.progress-bar  { height: 100%; border-radius: 3px; transition: width .4s; min-width: 2px; }
.progress-bar.verde   { background: var(--g700); }
.progress-bar.naranja { background: var(--o500); }
.progress-bar.rojo    { background: var(--r500); }

/* ════════════════════════════════════════════════════════════
   INLINE EDITING
   ════════════════════════════════════════════════════════════ */
.editable {
  cursor: pointer;
  border-bottom: 1.5px dashed var(--g500);
  padding: 1px 3px; border-radius: 3px;
  transition: background .1s;
}
.editable:hover { background: var(--g100); }
td input.inline-input {
  border: 2px solid var(--g500); border-radius: var(--radius-sm);
  padding: 3px 7px; font-size: 13px; width: 100%; min-width: 80px;
  font-family: var(--font); outline: none; background: var(--white);
  box-shadow: 0 0 0 3px rgba(90,138,47,.15);
}

/* ════════════════════════════════════════════════════════════
   FORMS
   ════════════════════════════════════════════════════════════ */
.form-group { margin-bottom: 14px; }
.form-label {
  display: block; font-size: 12px; font-weight: 700;
  color: var(--n600); margin-bottom: 4px;
  text-transform: uppercase; letter-spacing: .3px;
}
.form-control {
  width: 100%; padding: 9px 12px;
  border: 1.5px solid var(--n300); border-radius: var(--radius-sm);
  font-size: 14px; font-family: var(--font); color: var(--n900);
  background: var(--white); outline: none;
  transition: border .15s, box-shadow .15s;
}
.form-control:focus {
  border-color: var(--g500);
  box-shadow: 0 0 0 3px rgba(90,138,47,.15);
}
.form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}

/* ════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-sm); border: none;
  font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: var(--font);
  transition: filter .12s, transform .1s;
  white-space: nowrap;
}
.btn:active { transform: scale(.98); }
.btn:hover  { filter: brightness(1.07); }
.btn-primary   { background: var(--g700); color: var(--white); }
.btn-secondary { background: var(--b600); color: var(--white); }
.btn-danger    { background: var(--r600); color: var(--white); }
.btn-ghost     { background: var(--n100); color: var(--n700); }
.btn-ghost:hover { background: var(--n200); filter: none; }
.btn-sm  { padding: 5px 10px; font-size: 12px; }
.btn-xs  { padding: 3px 8px;  font-size: 11px; }

/* ════════════════════════════════════════════════════════════
   MODAL
   ════════════════════════════════════════════════════════════ */
.modal {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.55);
  align-items: flex-start; justify-content: center;
  padding: 60px 16px 24px;
  overflow-y: auto;
}
.modal.open { display: flex; }

.modal-box {
  background: var(--white); border-radius: var(--radius-lg);
  width: 100%; max-width: 540px;
  box-shadow: var(--shadow-lg);
  animation: modal-in .2s cubic-bezier(.34,1.56,.64,1);
  flex-shrink: 0;
  align-self: flex-start;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(-16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.modal-header {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--n200);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-title { font-size: 16px; font-weight: 700; color: var(--n900); }
.modal-close {
  background: none; border: none; cursor: pointer;
  font-size: 20px; color: var(--n400); line-height: 1; padding: 2px;
}
.modal-close:hover { color: var(--n700); }
.modal-body { padding: 20px; }
.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--n200);
  display: flex; gap: 8px; justify-content: flex-end;
}

/* ════════════════════════════════════════════════════════════
   DASHBOARD COMPONENTS
   ════════════════════════════════════════════════════════════ */
.alert-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--n200);
  font-size: 13px; color: var(--n700);
}
.alert-item:last-child { border: none; }
.alert-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; margin-top: 5px;
}
.alert-dot.red    { background: var(--r500); }
.alert-dot.yellow { background: var(--w500); }

.histo-item {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--n200);
}
.histo-item:last-child { border: none; }
.histo-time { font-size: 11px; color: var(--n400); white-space: nowrap; margin-top: 2px; flex-shrink: 0; }
.histo-text { font-size: 13px; color: var(--n700); }
.histo-who  { font-weight: 600; color: var(--n900); }

/* ════════════════════════════════════════════════════════════
   BODEGA — STOCK BADGE
   ════════════════════════════════════════════════════════════ */
.stock-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px;
  font-size: 12px; font-weight: 600;
}
.stock-ok  { background: var(--g100); color: var(--g700); }
.stock-low { background: var(--w100); color: var(--w600); }
.stock-out { background: var(--r100); color: var(--r600); }

/* Salida modal info */
.salida-info {
  background: var(--b100); border-radius: var(--radius-sm);
  padding: 10px 14px; margin-bottom: 14px;
  border-left: 3px solid var(--b500);
}

/* ════════════════════════════════════════════════════════════
   TOAST
   ════════════════════════════════════════════════════════════ */
#toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 1000;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--n900); color: var(--white);
  padding: 12px 16px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s, transform .2s;
  pointer-events: auto; max-width: 320px;
}
.toast.show  { opacity: 1; transform: none; }
.toast.ok    { background: var(--g700); }
.toast.error { background: var(--r600); }
.toast.warn  { background: var(--w600); }

/* ════════════════════════════════════════════════════════════
   LOADING OVERLAY
   ════════════════════════════════════════════════════════════ */
#loading {
  display: none; position: fixed; inset: 0; z-index: 900;
  background: rgba(255,255,255,.7);
  align-items: center; justify-content: center;
}
.spinner {
  width: 40px; height: 40px;
  border: 4px solid var(--g100);
  border-top-color: var(--g700);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════
   EMPTY STATE
   ════════════════════════════════════════════════════════════ */
.empty-state {
  padding: 48px 24px; text-align: center; color: var(--n400);
}
.empty-state-icon { font-size: 40px; margin-bottom: 12px; }
.empty-state p { font-size: 14px; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: none; }
  .main-wrap { margin-left: 0; }
  .menu-toggle { display: flex; }
  .two-col-grid { grid-template-columns: 1fr; }
  .scenario-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .page { padding: 14px; }
  .form-row { grid-template-columns: 1fr; }
  .topbar { padding: 0 14px; }
  .topbar-date { display: none; }
  .modal { padding: 20px 12px; }
}

@media (max-width: 400px) {
  .kpi-grid { grid-template-columns: 1fr; }
}