/* ============================================================
   JLOG ERP - Estilos personalizados
   ============================================================ */

:root {
  --sidebar-width: 240px;
  --topbar-height: 56px;
}

/* ── Layout general ────────────────────────────────────────── */
body { background-color: #f4f6f9; font-size: 0.875rem; }

.topbar { height: var(--topbar-height); z-index: 1030; }

.sidebar {
  width: var(--sidebar-width);
  min-height: calc(100vh - var(--topbar-height));
  transition: width 0.2s ease;
  overflow-y: auto;
  flex-shrink: 0;
}

.sidebar.collapsed { width: 0; overflow: hidden; }

.main-content {
  min-height: calc(100vh - var(--topbar-height));
  overflow-x: hidden;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Sidebar links ─────────────────────────────────────────── */
.sidebar .nav-link {
  color: #adb5bd;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background 0.15s;
  font-size: 0.85rem;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  color: #fff;
  background-color: rgba(255,255,255,0.1);
}

/* ── Login ─────────────────────────────────────────────────── */
.bg-login { background: #000000 !important; }
.bg-login .card { background: #1a1a1a; color: #fff; }
.bg-login .card .form-control { background: #2d2d2d; border-color: #444; color: #fff; }
.bg-login .card .form-control::placeholder { color: #888; }
.bg-login .card .form-label { color: #ccc; }
.bg-login .card .text-muted { color: #888 !important; }
.login-input { background: #2d2d2d !important; border-color: #444 !important; color: #fff !important; }
.login-input::placeholder { color: #888 !important; }
.login-input:focus { background: #333 !important; border-color: #c9a84c !important; box-shadow: 0 0 0 0.2rem rgba(201,168,76,0.25) !important; }

/* ── Tarjetas ──────────────────────────────────────────────── */
.card { border: none; border-radius: 8px; }
.card-header { border-bottom: 1px solid rgba(0,0,0,.08); }

/* ── Tablas ────────────────────────────────────────────────── */
.table th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.table td { vertical-align: middle; }

/* ── Botones extra pequeños ─────────────────────────────────── */
.btn-xs {
  padding: 0.15rem 0.4rem;
  font-size: 0.75rem;
  border-radius: 3px;
}

/* ── Modal ─────────────────────────────────────────────────── */
.modal-xl { max-width: 1200px; }

/* Centrado del modal de operaciones respecto a toda la ventana */
#modalOp {
  padding-left: 0 !important;
}
#modalOp .modal-dialog {
  margin: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  max-height: 90vh;
  width: 95%;
  max-width: 1200px;
}

/* Centrado del modal de cotizaciones respecto a toda la ventana */
#modalCot {
  padding-left: 0 !important;
}
#modalCot .modal-dialog {
  margin: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  max-height: 90vh;
  width: 95%;
  max-width: 900px;
}

/* ── DataTables overrides ──────────────────────────────────── */
div.dataTables_wrapper div.dataTables_filter input { font-size: 0.82rem; }
div.dataTables_wrapper div.dataTables_length select { font-size: 0.82rem; }

/* ── Badges de estado ──────────────────────────────────────── */
.badge-estado { font-size: 0.73rem; padding: 0.3em 0.6em; }

/* ── Responsive ajustes ─────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar { width: 0; position: fixed; z-index: 1020; height: 100%; }
  .sidebar.open { width: var(--sidebar-width); }
  .main-content { margin-left: 0 !important; }
}