:root {
  --brand: #0b3f9e;
  --brand-dark: #082c72;
  --brand-light: #e8f0ff;
  --accent: #ffb020;
  --bg: #f2f4f9;
  --surface: #ffffff;
  --text-main: #1c2534;
  --text-muted: #667085;
  --border: #e6e9f0;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --shadow-md: 0 8px 24px rgba(16,24,40,.10);
  --shadow-lg: 0 16px 40px rgba(11,63,158,.16);
}

* { scrollbar-color: #c3cee0 transparent; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#c3cee0; border-radius:8px; }
::-webkit-scrollbar-thumb:hover { background:#9fb0c9; }

body {
  background: var(--bg);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--text-main);
}

h1,h2,h3,h4,h5,h6 { color: var(--text-main); letter-spacing: -.01em; }

/* ---------------------------------------------------------------- navbar */
.app-navbar {
  background: linear-gradient(100deg, #071c40 0%, var(--brand-dark) 45%, var(--brand) 100%) !important;
  box-shadow: 0 2px 16px rgba(7,28,64,.28);
}
.app-navbar .navbar-brand { letter-spacing:.2px; font-size:1.15rem; }
.app-navbar .nav-link {
  color: rgba(255,255,255,.78) !important;
  font-weight: 500;
  border-radius: 8px;
  padding: .45rem .7rem !important;
  margin: 0 .05rem;
  transition: background-color .15s ease, color .15s ease;
}
.app-navbar .nav-link:hover { color:#fff !important; background: rgba(255,255,255,.10); }
.app-navbar .nav-link.active { color:#fff !important; background: rgba(255,255,255,.16); font-weight:700; }
.app-navbar .dropdown-menu { border:none; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); overflow:hidden; }
.app-navbar .dropdown-item:active, .app-navbar .dropdown-item:hover { background: var(--brand-light); color: var(--brand-dark); }

.user-pill {
  display:inline-flex; align-items:center; gap:.4rem;
  background: rgba(255,255,255,.10); border-radius: 999px; padding:.3rem .7rem;
  color:#fff; font-size:.85rem;
}
.role-badge {
  text-transform: uppercase; font-size:.65rem; font-weight:700; letter-spacing:.03em;
  padding:.15rem .5rem; border-radius:999px; color:#fff;
}
.role-badge.role-superadmin { background:#c2410c; }
.role-badge.role-almacen { background:#0e7490; }
.role-badge.role-consulta { background:#4b5563; }

.logo-apodaca { height:34px; background:#fff; padding:3px 8px; border-radius:.5rem; box-shadow: var(--shadow-sm); }
.logo-apodaca-fixed {
  position:fixed; top:14px; left:18px; height:38px; background:#fff;
  padding:5px 12px; border-radius:.6rem; box-shadow: var(--shadow-md); z-index:1050;
}

/* ---------------------------------------------------------------- layout */
@keyframes fadeInUp { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }
.fade-in-up { animation: fadeInUp .35s ease both; }

.app-footer { color: var(--text-muted, #6b7280); letter-spacing:.2px; }

h4.mb-3, h4.mb-0 { font-weight:700; }

/* ---------------------------------------------------------------- cards */
.kpi-card {
  border-radius: var(--radius);
  border:none;
  box-shadow: var(--shadow-sm);
  background: var(--surface);
  transition: transform .18s ease, box-shadow .18s ease;
}
a .kpi-card:hover, .kpi-card.kpi-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.kpi-card h6 { font-weight:700; color:var(--text-main); font-size:.92rem; margin-bottom:.9rem; }
.kpi-value { font-size: 2.1rem; font-weight: 800; letter-spacing:-.02em; color: var(--text-main); }
.card.kpi-card .text-muted.small { text-transform:uppercase; font-size:.72rem; letter-spacing:.05em; font-weight:700; color:var(--text-muted) !important; }

.card.border-danger { border-top:3px solid #dc3545 !important; }
.card.border-warning { border-top:3px solid #f59e0b !important; }

/* ---------------------------------------------------------------- buttons */
.btn { border-radius: var(--radius-sm); font-weight:600; transition: all .15s ease; }
.btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-primary:hover, .btn-primary:focus { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-success { background:#0f9d58; border-color:#0f9d58; }
.btn-success:hover { background:#0c7d46; border-color:#0c7d46; }
.btn:hover { transform: translateY(-1px); }
.btn-sm:hover { transform:none; }

/* ---------------------------------------------------------------- forms */
.form-control, .form-select {
  border-radius: var(--radius-sm); border-color: var(--border);
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(11,63,158,.15);
}

/* ---------------------------------------------------------------- tables */
.table thead th {
  text-transform: uppercase; font-size:.72rem; letter-spacing:.04em;
  color: var(--text-muted); font-weight:700; border-bottom: 2px solid var(--border);
  background: #fafbfd;
}
.table-hover tbody tr { transition: background-color .12s ease; }
.table-hover tbody tr:hover { background-color: var(--brand-light); }
.table-sm td, .table-sm th { vertical-align: middle; }

.badge-stock-ok, .badge-stock-bajo, .badge-stock-alerta, .badge-stock-sin { padding:.42em .75em; border-radius:999px; font-weight:700; font-size:.8rem; }
.badge-stock-ok { background:#0f9d58; }
.badge-stock-bajo { background:#dc3545; }
.badge-stock-alerta { background:#f59e0b; }
.badge-stock-sin { background:#dc3545; }

/* Franja de fila en la lista de Stock segun estado (solo esa lista, no toca el resto) */
.fila-stock-bajo { background: #fff8ec; }
.fila-stock-bajo:hover { background: #fdf0d5 !important; }
.fila-stock-sin { background: #fdecec; }
.fila-stock-sin:hover { background: #fbdada !important; }

/* ---------------------------------------------------------------- alerts */
.alert { border:none; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }

/* ---------------------------------------------------------------- login */
body.login-page {
  min-height:100vh;
  background: radial-gradient(1200px 700px at 15% 10%, #123b8f 0%, #071c40 55%, #050f26 100%);
}
.login-wrap { max-width: 430px; margin: 0 auto; padding-top: 12vh; }
.login-wrap .kpi-card {
  box-shadow: var(--shadow-lg); border-top: 4px solid var(--accent);
  animation: fadeInUp .5s cubic-bezier(.2,.8,.2,1) both;
}
.login-logo { display:block; margin:0 auto 1.1rem; height:52px; }
.login-wrap .text-muted { color: var(--text-muted) !important; }

/* ---------------------------------------------------------------- autocomplete */
.autocomplete-box { position:relative; }
.autocomplete-list { position:absolute; z-index:1000; background:#fff; border:1px solid var(--border); border-radius: var(--radius-sm); width:100%; max-height:260px; overflow-y:auto; box-shadow: var(--shadow-md); margin-top:2px; }
.autocomplete-list div { padding:.4rem .7rem; cursor:pointer; }
.autocomplete-list div:hover { background: var(--brand-light); }

/* ---------------------------------------------------------------- pagination */
.pagination .page-link { border-radius: var(--radius-sm); margin:0 2px; border-color: var(--border); color: var(--brand); }
.pagination .page-item.active .page-link { background: var(--brand); border-color: var(--brand); }