/* ============================================================
   PayDesk — Layout
   Importa tokens.css y components.css antes de este archivo
   ============================================================ */

/* ── App shell ───────────────────────────────────────────────────────────── */
.app {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* ── Main area (derecha del sidebar) ─────────────────────────────────────── */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: var(--sidebar-width);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  min-width: 0;
}

/* ── Content scroll area ─────────────────────────────────────────────────── */
.content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-page);
}

/* ── Barras de desplazamiento ─────────────────────────────────────────────
   UNA sola regla para todo lo que scrollea, en vez de siete parches sueltos.

   Que estaba mal:
   · .sidebar, .sidebar-nav y .cart-items tenian width: 0 — la
     barra era INVISIBLE. En el carrito del punto de venta eso significa que el
     cajero no tenia forma de saber que habia mas articulos abajo.
   · .content la tenia de 4px: se ve, pero es casi imposible agarrarla.
   · El tablero de Kanban llevaba las suyas aparte y con OTROS nombres
     (.kb-board 6px, .kb-col-body 3px, .kb-statsbar oculta con height:0). La
     primera version de esta regla apuntaba a .kanban-board / .kanban-cards,
     que no existen en ningun HTML: el Kanban se quedo sin tocar mientras el
     comentario daba por hecho lo contrario.
   · .table-wrapper, .modal y el panel de notificaciones no tenian ninguna, asi
     que salia la del sistema operativo, distinta en cada maquina.
   · Ninguna funcionaba en Firefox, que no entiende ::-webkit-scrollbar.

   Como queda: 10px (agarrable), discreta en reposo y marcada al pasar por
   encima o mientras se arrastra. */

.content,
.sidebar,
.sidebar-nav,
.cart-items,
.cart-footer,
.kb-board,
.kb-col-body,
.kb-statsbar,
.table-wrapper,
.modal,
.notif-panel-list,
.scrollable {
  /* Firefox. Va antes que las de webkit para que un navegador que entienda las
     dos se quede con la mas especifica. */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;

  /* Al llegar al final de esta caja, la rueda NO sigue moviendo la pagina de
     atras. Es lo que hacia que revisar el carrito acabara desplazando el
     catalogo, o que cerrar un modal te dejara en otra parte de la pagina. */
  overscroll-behavior: contain;
}

.content::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar,
.cart-items::-webkit-scrollbar,
.cart-footer::-webkit-scrollbar,
.kb-board::-webkit-scrollbar,
.kb-col-body::-webkit-scrollbar,
.kb-statsbar::-webkit-scrollbar,
.table-wrapper::-webkit-scrollbar,
.modal::-webkit-scrollbar,
.notif-panel-list::-webkit-scrollbar,
.scrollable::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.content::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track,
.sidebar-nav::-webkit-scrollbar-track,
.cart-items::-webkit-scrollbar-track,
.cart-footer::-webkit-scrollbar-track,
.kb-board::-webkit-scrollbar-track,
.kb-col-body::-webkit-scrollbar-track,
.kb-statsbar::-webkit-scrollbar-track,
.table-wrapper::-webkit-scrollbar-track,
.modal::-webkit-scrollbar-track,
.notif-panel-list::-webkit-scrollbar-track,
.scrollable::-webkit-scrollbar-track {
  background: transparent;
}

.content::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb,
.cart-items::-webkit-scrollbar-thumb,
.cart-footer::-webkit-scrollbar-thumb,
.kb-board::-webkit-scrollbar-thumb,
.kb-col-body::-webkit-scrollbar-thumb,
.kb-statsbar::-webkit-scrollbar-thumb,
.table-wrapper::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb,
.notif-panel-list::-webkit-scrollbar-thumb,
.scrollable::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-full);
  /* El borde transparente deja la barra visualmente mas fina que su area de
     click: se ve discreta pero se agarra facil. */
  border: 3px solid transparent;
  background-clip: content-box;
}

.content::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover,
.sidebar-nav::-webkit-scrollbar-thumb:hover,
.cart-items::-webkit-scrollbar-thumb:hover,
.cart-footer::-webkit-scrollbar-thumb:hover,
.kb-board::-webkit-scrollbar-thumb:hover,
.kb-col-body::-webkit-scrollbar-thumb:hover,
.kb-statsbar::-webkit-scrollbar-thumb:hover,
.table-wrapper::-webkit-scrollbar-thumb:hover,
.modal::-webkit-scrollbar-thumb:hover,
.notif-panel-list::-webkit-scrollbar-thumb:hover,
.scrollable::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
  background-clip: content-box;
}

.content::-webkit-scrollbar-button,
.sidebar::-webkit-scrollbar-button,
.sidebar-nav::-webkit-scrollbar-button,
.cart-items::-webkit-scrollbar-button,
.cart-footer::-webkit-scrollbar-button,
.kb-board::-webkit-scrollbar-button,
.kb-col-body::-webkit-scrollbar-button,
.kb-statsbar::-webkit-scrollbar-button,
.table-wrapper::-webkit-scrollbar-button,
.modal::-webkit-scrollbar-button,
.notif-panel-list::-webkit-scrollbar-button,
.scrollable::-webkit-scrollbar-button {
  /* Sin las flechitas de los extremos. Al dar ancho a la barra, Windows las
     dibuja por omision y la dejan con aspecto de aplicacion de escritorio de
     hace veinte años, ademas de robar espacio util al recorrido. */
  display: none;
  width: 0;
  height: 0;
}

/* La esquina donde se cruzan las dos barras, en las tablas anchas. */
.table-wrapper::-webkit-scrollbar-corner { background: transparent; }


/* ── Page header ─────────────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-page);
}

.page-header-left h1 {
  font-size: var(--font-2xl);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.4px;
}

.page-header-left p {
  font-size: var(--font-base);
  color: var(--text-secondary);
  margin-top: 3px;
}

.page-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* ── Section header ──────────────────────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.section-title {
  font-size: var(--font-base);
  font-weight: 500;
  color: var(--text-primary);
}

/* ── Grids ───────────────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }

.grid-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); margin-bottom: var(--space-page); }
.grid-chart-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.grid-half { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }

/* ── POS layout (catálogo + carrito) ─────────────────────────────────────── */
.pos-layout {
  display: flex;
  height: calc(100vh - var(--topbar-height));
  overflow: hidden;
}

.pos-catalog {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-xl);
}

.pos-cart {
  width: clamp(360px, 24vw, 500px);
  flex-shrink: 0;
  background: var(--card);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ── Kanban layout ───────────────────────────────────────────────────────── */
.kanban-board {
  display: flex;
  gap: var(--space-lg);
  overflow-x: auto;
  padding-bottom: var(--space-page);
  height: 100%;
  align-items: flex-start;
}


.kanban-col {
  min-width: 280px;
  max-width: 280px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-height: 100%;
}

.kanban-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xs) var(--space-xs) var(--space-md);
}

.kanban-col-title {
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--text-primary);
}

.kanban-col-count {
  width: 22px; height: 22px;
  border-radius: var(--radius-full);
  background: var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
}

.kanban-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  overflow-y: auto;
  flex: 1;
}


.kanban-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  cursor: grab;
  transition: box-shadow var(--transition), transform var(--transition);
}

.kanban-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.kanban-card:active { cursor: grabbing; }

.kanban-add-col {
  min-width: 240px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  color: var(--text-muted);
  font-size: var(--font-md);
  cursor: pointer;
  padding: var(--space-xl);
  transition: border-color var(--transition), color var(--transition);
  align-self: stretch;
  height: auto;
}

.kanban-add-col:hover { border-color: var(--accent); color: var(--accent); }

/* ── Auth layout (login / registro) ─────────────────────────────────────── */
.auth-layout {
  display: flex;
  /* min-height y no height: el registro tiene diez campos y con 100vh fijo el
     formulario quedaba cortado sin manera de bajar. En el login no se notaba
     porque son dos campos. */
  min-height: 100vh;
  min-height: 100dvh;
}

.auth-panel-left {
  width: 45%;
  background: var(--dark);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px;
  flex-shrink: 0;
  /* Se queda a la vista mientras el formulario de la derecha se desplaza. */
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
}

.auth-panel-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: var(--surface);
  /* Con el formulario largo, align-items:center lo recortaba por arriba: el
     inicio quedaba fuera de la pantalla y no habia forma de alcanzarlo. */
  align-items: safe center;
  min-width: 0;
}

/* En pantallas bajas o angostas los dos paneles se apilan y el izquierdo deja
   de ocupar media pantalla, que en un telefono no dejaba ver el formulario. */
@media (max-width: 860px) {
  .auth-layout { flex-direction: column; }
  .auth-panel-left {
    width: 100%;
    height: auto;
    position: static;
    padding: 32px 24px;
  }
  .auth-panel-right { padding: 32px 24px; }
}

.auth-form-card { width: 100%; max-width: 380px; }

/* ── Spacing utilities ───────────────────────────────────────────────────── */
.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }
.mb-xl  { margin-bottom: var(--space-xl); }
.mb-xxl { margin-bottom: var(--space-xxl); }
.mb-page { margin-bottom: var(--space-page); }

.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }

.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }

/* ── Flex utilities ──────────────────────────────────────────────────────── */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* ── Text utilities ──────────────────────────────────────────────────────── */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-accent    { color: var(--accent); }
.text-danger    { color: var(--danger); }
.text-success   { color: var(--success); }
.text-sm   { font-size: var(--font-sm); }
.text-md   { font-size: var(--font-md); }
.text-base { font-size: var(--font-base); }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }