:root { --sidebar-w: 240px; --sidebar-w-compact: 64px; --primary: #2563eb; }
body { background: #f0f2f5; font-family: 'Segoe UI', system-ui, sans-serif; }

/* Sidebar */
.sidebar {
  width: var(--sidebar-w); height: 100vh; background: #1a1d23;
  position: fixed; top: 0; left: 0; z-index: 200; transition: width .2s, transform .3s;
  overflow-y: auto; overflow-x: hidden;
}
.sidebar .brand { padding: 1.2rem 1rem; border-bottom: 1px solid #2d3139;text-align: center; }
.sidebar .brand h5 { color: #fff; margin: 0; font-weight: 700; }
.sidebar .brand small { color: #6c757d; font-size: .75rem; }
.sidebar .nav-link { color: #9ca3af; padding: .55rem 1rem; border-radius: 6px; margin: 1px 8px; font-size: .875rem; display: flex; align-items: center; gap: .5rem; }
.sidebar .nav-link:hover, .sidebar .nav-link.active { color: #fff; background: var(--primary); }
.sidebar .nav-link i { width: 18px; text-align: center; }
.sidebar .nav-section { color: #4b5563; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .75rem 1rem .25rem; }

/* ── Menú compacto (solo íconos) ── */
.sidebar-toggle{
  position: absolute; top: .6rem; right: .5rem; z-index: 2;
  width: 1.8rem; height: 1.8rem; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: #2d3139; border: none; border-radius: 6px; color: #9ca3af;
  transition: transform .2s;
}
.sidebar-toggle:hover{ background: var(--primary); color: #fff; }
.sidebar.compact{ width: var(--sidebar-w-compact); }
.sidebar.compact .sidebar-toggle{ position: static; margin: .5rem auto 0; }
.sidebar.compact .sidebar-toggle i{ transform: rotate(180deg); }
.sidebar.compact .brand{ padding: .6rem .25rem .8rem; }
.sidebar.compact .brand small,
.sidebar.compact .brand h5,
.sidebar.compact .nav-section,
.sidebar.compact .collapse{ display: none; }
.sidebar.compact .sidebar-logo{ max-width: 34px; }
/* Trunco el texto de cada link a tamaño 0 (queda invisible, sin ocupar
   layout) y le devuelvo su tamaño solo al ícono — así no hace falta tocar
   el markup de cada uno de los ~25 links para envolver el texto aparte. */
.sidebar.compact .nav-link{ font-size: 0; justify-content: center; padding: .65rem .3rem; gap: 0; }
.sidebar.compact .nav-link i{ font-size: 1.15rem; width: auto; }
.sidebar.compact .nav-link .badge,
.sidebar.compact .nav-link .kbd-badge,
.sidebar.compact .nav-link .kbd-badge-inv{ display: none; }

/* Main */
.main { margin-left: var(--sidebar-w); padding: 1.5rem; min-height: 100vh; transition: margin-left .2s; }
.sidebar.compact ~ .main{ margin-left: var(--sidebar-w-compact); }
.topbar {
  background: #fff; border-radius: 10px; padding: .7rem 1.25rem; margin-bottom: 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0,0,0,.07);
}

/* Cards */
.card { border: none; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.card-header { background: #fff; border-bottom: 1px solid #f0f0f0; border-radius: 12px 12px 0 0 !important; font-weight: 600; padding: .85rem 1.25rem; }

/* Stat cards */
.stat-card { background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; border-radius: 12px; padding: 1.25rem; }
.stat-card .stat-label { font-size: .8rem; opacity: .85; }
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; margin-top: .2rem; }

/* Tables */
.table th { font-size: .775rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; font-weight: 600; border-top: none; white-space: nowrap; }
.table td { vertical-align: middle; }

/* Badges IVA */
.badge-exento { background: #e5e7eb; color: #374151; }
.badge-5 { background: #fef3c7; color: #92400e; }
.badge-10 { background: #dbeafe; color: #1e40af; }

/* Buttons */
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: #ffac20; border-color: #ffac20; }

/* Forms */
.form-control, .form-select { border-radius: 8px; }
.form-label { font-size: .875rem; }

/* Alerts */
.alert { border: none; border-radius: 10px; }

/* Modal */
.modal-content { border-radius: 12px; border: none; box-shadow: 0 20px 60px rgba(0,0,0,.15); }

/* Stock */
.stock-low { color: #dc2626; font-weight: 600; }
.stock-ok { color: #059669; }

/* KuDE */
.kude-box { font-family: 'Courier New', monospace; background: #fff; border: 2px solid #e5e7eb; border-radius: 8px; }
.kude-cdc { letter-spacing: .12em; font-size: .9rem; font-weight: 700; word-break: break-all; }
.kude-header { border-bottom: 2px solid #e5e7eb; }
.kude-footer { border-top: 2px solid #e5e7eb; background: #f9fafb; }

/* Estado badges */
.badge-borrador { background: #e5e7eb; color: #374151; }
.badge-pendiente { background: #fef3c7; color: #92400e; }
.badge-aprobado { background: #d1fae5; color: #065f46; }
.badge-rechazado { background: #fee2e2; color: #991b1b; }
.badge-cancelado { background: #fee2e2; color: #991b1b; }

/* ── Responsive ──────────────────────────────────────────────────────── */

/* Pantallas medianas: reducir sidebar y padding */
@media (max-width: 1400px) and (min-width: 769px) {
  html { font-size: 14px; }
  :root { --sidebar-w: 210px; }
  .main { padding: 1rem 1.25rem; }
  .topbar { padding: .5rem 1rem; }
}

/* Pantallas pequeñas-medianas (ej: 1024px): comprimir más */
@media (max-width: 1200px) and (min-width: 769px) {
  html { font-size: 13px; }
  :root { --sidebar-w: 190px; }
  .main { padding: .75rem 1rem; }
  .sidebar .nav-link { padding: .4rem .75rem; }
  .sidebar .brand { padding: .8rem .75rem; }
}

/* Pantallas muy pequeñas (ej: 900px) */
@media (max-width: 1024px) and (min-width: 769px) {
  html { font-size: 12px; }
  :root { --sidebar-w: 175px; }
  .main { padding: .5rem .75rem; }
  .topbar { margin-bottom: .75rem; }
}

/* Móvil: sidebar colapsable — el panel deslizante (fuera de pantalla salvo
   que esté .open) ya resuelve el espacio, así que el modo compacto (pensado
   para desktop, donde el sidebar sigue ocupando lugar fijo) no aplica acá:
   al abrirse en celular siempre se ve completo, con texto. */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  /* ".sidebar.compact ~ .main" (regla de desktop, más arriba) tiene más
     especificidad que un simple ".main" — sin repetirla acá con el mismo
     selector, seguía ganando y le dejaba a .main el margen de 64px del
     modo compacto de escritorio aunque el sidebar esté oculto en celular.
     Eso corría todo el contenido (y el header) hacia la derecha, angostaba
     el espacio real disponible y sacaba texto del header. */
  .main,
  .sidebar.compact ~ .main { margin-left: 0; padding: 1rem; }
  .sidebar.compact { width: var(--sidebar-w); }
  .sidebar.compact .sidebar-toggle{ display: none; }
  .sidebar.compact .brand{ padding: 1.2rem 1rem; }
  .sidebar.compact .brand small,
  .sidebar.compact .brand h5,
  .sidebar.compact .nav-section{ display: block; }
  /* Mismo motivo: ".sidebar.compact .sidebar-logo{max-width:34px}" (regla
     de desktop) no tenía contraparte acá, así que el logo se veía chico
     incluso con el sidebar ya "expandido" visualmente en celular. */
  .sidebar.compact .sidebar-logo{ max-width: 140px; }
  .sidebar.compact .nav-link{ font-size: .875rem; justify-content: flex-start; padding: .55rem 1rem; gap: .5rem; }
  .sidebar.compact .nav-link i{ font-size: 1rem; width: 18px; }
  .sidebar.compact .nav-link .badge,
  .sidebar.compact .nav-link .kbd-badge,
  .sidebar.compact .nav-link .kbd-badge-inv{ display: inline-block; }
  /* Solo se reactiva si Bootstrap lo tiene abierto (.show); si no, se deja
     que Bootstrap lo siga ocultando normalmente (colapsado). */
  .sidebar.compact .collapse.show{ display: block; }

  .sidebar-backdrop{
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45);
    z-index: 150; /* debajo del sidebar (200), encima del contenido normal */
  }
  .sidebar.open ~ .sidebar-backdrop{ display: block; }
}
/* Fuera de celular no hay modo "abierto" del sidebar (queda siempre fijo
   en pantalla), así que el fondo nunca debe aparecer ahí. */
.sidebar-backdrop{ display: none; }

/* Print */
@media print {
  .sidebar, .topbar, .btn, .no-print { display: none !important; }
  .main { margin-left: 0 !important; padding: 0 !important; }
  .kude-box { border: 1px solid #000; }
}

.sidebar-logo {
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto 4px auto;
}