/* =====================================================================
   Dystopia Ventas — breakpoints globales (sidebar).
   Copiado de css/responsive.css de dystopia-seguimiento, sin las reglas
   de tablas y listados (todavía no hay).
   ORDEN DE CARGA (no cambiarlo): base, layout, componentes, responsive.
   ===================================================================== */
/* Notebook 13" (1280–1440px): sidebar más angosta */
@media(max-width:1440px){
  .sidebar{width:216px;}
  .main-inner{padding:var(--sp-6) var(--sp-5) 64px;}
  .sidebar-foot{flex-wrap:wrap;row-gap:var(--sp-1);}
}
@media(max-width:860px){
  #app{flex-direction:column;height:auto;min-height:100vh;}
  .sidebar{width:100%;flex-direction:row;flex-wrap:nowrap;overflow:hidden;border-right:none;border-bottom:1px solid var(--border);align-items:center;}
  .brand{padding:var(--sp-3) var(--sp-4);border-bottom:none;border-right:1px solid var(--border-soft);flex-shrink:0;}
  .nav-list{flex:1;min-width:0;display:flex;align-items:center;overflow-x:auto;padding:var(--sp-2);}
  .nav-eyebrow{display:none;}
  .nav-item{flex-shrink:0;width:200px;margin-bottom:0;}
  /* Tema y "Salir" siempre visibles: el pie queda fijo a la derecha de la barra; el email se oculta. */
  .sidebar-foot{flex-shrink:0;flex-wrap:nowrap;border-top:none;border-left:1px solid var(--border-soft);padding:var(--sp-2) var(--sp-4);}
  .sidebar-foot > #user-email{display:none;}
  .main-inner{padding:var(--sp-4);}
}