/* ===========================================================================
   MAGUS — capa de aplicación
   ---------------------------------------------------------------------------
   Clases de los componentes de la interfaz. Se carga TERCERA:

     1. css/nocturne.css       tokens base (--space-*, --radius-*, --shadow-*)
     2. css/magus-theme.css    retinte de marca (colores, tipografías)
     3. css/magus-app.css      este archivo

   El diseño original tenía los estilos inline en cada elemento. Acá están
   como clases para que los templates queden legibles y un cambio de espaciado
   o de color se haga en un solo lugar.

   Todo valor viene de los tokens. No hay hex sueltos salvo en las dos
   superficies que el sistema no nombra (el degradado del pie y el velo de los
   diálogos).
   =========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.1px;
}

a { color: var(--color-accent-300); text-decoration: none; }
a:hover { color: var(--color-accent-200); }

*:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--color-neutral-800); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

.u-num { font-variant-numeric: tabular-nums; }
.u-right { text-align: right; }
.u-push { margin-left: auto; }
.u-nowrap { white-space: nowrap; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-muted { color: var(--color-neutral-500); }
.u-dim { color: var(--color-neutral-600); }

/* Plata a favor y en contra en el cierre de caja: el signo tiene que
   leerse de un vistazo, sin ponerse a sacar la cuenta. Verde/rojo
   propios, no el acento de la marca — acá el color significa una cosa
   concreta (le deben / debe), no "esto es importante". */
.u-haber { color: #6cc48f; }
.u-debe { color: #e0705f; }

/* Etiqueta de sección: mayúsculas chicas con tracking. Se repite mucho. */
.eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-neutral-500);
}

/* ---------------------------------------------------------------- estructura */

/*
  1440px de mínimo, no un layout que se comprime. Con el panel de venta fijo
  en 384px y las columnas de la tabla, por debajo de eso la descripción del
  producto queda ilegible; es preferible scroll horizontal.
*/
.app {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  height: 100vh;
  min-height: 760px;
  min-width: 1440px;
}

.main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;  /* sin esto la fila de contenido crece con el contenido y el pie se va de pantalla */
}

.screen { overflow: auto; min-height: 0; }
.screen--split { display: grid; grid-template-columns: minmax(0, 1fr) 384px; overflow: hidden; }
.screen--split-left { display: grid; grid-template-columns: 312px minmax(0, 1fr); overflow: hidden; }
.screen--pad { padding: var(--space-6) var(--space-8) var(--space-8); }

.pane { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; overflow: auto; }
.pane--pos { padding: var(--space-6) var(--space-8) 0; gap: var(--space-4); }
.pane--aside { gap: var(--space-4); padding: var(--space-6) var(--space-8) var(--space-6) 0; }
.pane--aside-right { gap: var(--space-4); padding: var(--space-6) var(--space-8) var(--space-8) 0; }
.pane--list { padding: var(--space-6) var(--space-6) var(--space-8); border-right: 1px solid var(--color-neutral-800); }

/* -------------------------------------------------------------------- marca */

.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-4);
  border-right: 1px solid var(--color-neutral-800);
  background: var(--color-bg);
}

.brand { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-2) var(--space-2) 0; }

/* Isologotipo: dos reglas gruesas encerrando el logotipo, como el manual. */
/*
  Proporciones del manual: la regla superior es la gruesa, la inferior la fina,
  y el logotipo se apoya en la línea de base entre las dos. Las reglas se
  estiran al ancho del bloque, no al del texto.
*/
.brand-lockup { display: flex; flex-direction: column; gap: 4px; min-width: 0; text-decoration: none; }
.brand-rule { height: 3px; background: var(--color-neutral-200); }
.brand-rule--thin { height: 1px; background: var(--color-neutral-600); }
.brand-words { display: flex; align-items: baseline; gap: 5px; padding: 2px 0 3px; }
.brand-words span { font-family: var(--font-logo); font-style: italic; color: var(--color-accent); line-height: 1; }
.brand-cerrajeria { font-weight: 600; font-size: 13px; letter-spacing: 0.4px; }
.brand-magus { font-weight: 700; font-size: 27px; letter-spacing: -0.5px; }
.brand-lockup:hover .brand-magus { color: var(--color-accent-400); }
.brand-sucursal { font-size: 9.5px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--color-neutral-600); }

/* --------------------------------------------------------------- navegación */

/*
  Menú lateral. Se llama .sidenav y no .nav a propósito: Nocturne ya define
  .nav como barra de encabezado horizontal (display:flex, align-items:center)
  y su regla `.nav a` tiene más especificidad que una clase suelta, así que
  reusar el nombre rompe el menú.
*/
.sidenav { display: flex; flex-direction: column; gap: 2px; }

.sidenav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-neutral-400);
  font: inherit;
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.sidenav-item:hover { background: var(--color-neutral-900); color: var(--color-text); }
.sidenav-item i { font-size: 17px; }

.sidenav-item.is-active { background: var(--color-accent-900); color: var(--color-accent-200); font-weight: 500; }
.sidenav-item.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 9px; bottom: 9px;
  width: 2px;
  border-radius: 2px;
  background: var(--color-accent);
}
.sidenav-item.is-active i { color: var(--color-accent); }

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-4); }

.caja-chip {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-md);
  background: var(--color-neutral-900);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.caja-chip:hover { border-color: var(--color-neutral-700); }
.caja-chip .eyebrow { display: flex; align-items: center; gap: var(--space-2); }
.caja-chip-value { font-family: var(--font-heading); font-size: 16px; font-variant-numeric: tabular-nums; }

.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent); }

.user { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-2); }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--color-neutral-800); display: grid; place-items: center; font-size: 11px; color: var(--color-neutral-300); }

/* ------------------------------------------------------------------ topbar */

.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--color-neutral-800);
}
.topbar-meta { margin-left: auto; display: flex; align-items: center; gap: var(--space-6); font-size: 12px; color: var(--color-neutral-500); }
.topbar-meta span { display: flex; align-items: center; gap: var(--space-2); }
.topbar-meta i { font-size: 15px; }

.search { position: relative; flex: 1; min-width: 0; max-width: 640px; }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--color-neutral-500); pointer-events: none; }
.search input { width: 100%; padding: 10px 76px 10px 34px; font-size: 13.5px; }
.search-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }

.kbd {
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: 0.4px;
  padding: 2px 7px;
  border: 1px solid var(--color-neutral-700);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  color: var(--color-neutral-400);
  background: var(--color-neutral-900);
}
.kbd--flat { border-bottom-width: 1px; font-size: 10px; padding: 1px 6px; color: var(--color-neutral-500); }

/* Resultados del buscador — RF-04.1, operable por teclado */
.results {
  position: absolute;
  z-index: 40;
  left: 0; right: 0; top: calc(100% + 6px);
  border: 1px solid var(--color-neutral-700);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.result {
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 96px 108px;
  align-items: center;
  gap: var(--space-4);
  padding: 9px var(--space-4) 9px var(--space-6);
  border-top: 1px solid var(--color-neutral-800);
  cursor: pointer;
}
.result:hover,
.result.is-active { background: color-mix(in srgb, var(--color-accent) 10%, transparent); box-shadow: inset 2px 0 0 var(--color-accent); }
.result-sku { font-size: 11.5px; color: var(--color-neutral-500); font-variant-numeric: tabular-nums; }
.result-desc { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-stock { font-size: 11px; color: var(--color-neutral-500); }
.result-precio { font-size: 12.5px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* En el buscador de la barra de arriba los resultados son links: que se vean igual que en Ventas. */
a.result, a.result:hover { color: inherit; }
.results-hint {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 7px var(--space-6);
  border-top: 1px solid var(--color-neutral-800);
  background: var(--color-neutral-900);
  font-size: 10.5px; color: var(--color-neutral-500);
}

/* ---------------------------------------------------------- encabezados */

.page-head { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.page-title { margin: 0; font-family: var(--font-heading); font-weight: 500; font-size: 19px; }
.page-sub { font-size: 12px; color: var(--color-neutral-500); }
.page-actions { margin-left: auto; display: flex; gap: var(--space-3); flex-wrap: wrap; }

.section-title { margin: 0; font-family: var(--font-heading); font-weight: 500; font-size: 16px; }

/* --------------------------------------------------------------- tarjetas */

.card {
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.card-head { display: flex; align-items: baseline; gap: var(--space-3); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.grid-wide { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-4); }

/* ----------------------------------------------------------------- tablas */

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
  text-align: left;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-neutral-500);
  font-weight: 500;
  padding: var(--space-3);
}
/*
  `.table th` fija text-align:left con especificidad 0,1,1 y le gana a
  `.u-right` (0,1,0): sin este selector los encabezados de las columnas
  numéricas quedan a la izquierda mientras los números van a la derecha, que es
  lo que descuadraba la grilla del catálogo.
*/
.table th.u-right { text-align: right; }
.table th.u-center { text-align: center; }
.table td.u-right { text-align: right; }
.table thead tr { border-bottom: 1px solid var(--color-neutral-800); }
.table tbody tr { border-top: 1px solid var(--color-neutral-800); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.table tbody tr.is-clickable { cursor: pointer; }
.table td { padding: var(--space-4) var(--space-3); vertical-align: top; }
.table td.is-tight { padding: var(--space-4) 0; }

.cell-stack { display: flex; flex-direction: column; gap: 5px; }
.cell-sku { font-size: 11.5px; color: var(--color-neutral-500); font-variant-numeric: tabular-nums; }
.cell-desc { font-size: 13.5px; }
.cell-meta { font-size: 11px; color: var(--color-neutral-600); }
.cell-importe { font-size: 14px; }
/* Los importes y los stocks no se parten en dos líneas al angostar la columna. */
.table .u-num { white-space: nowrap; }
.cell-rubro { display: flex; }

/* ---------------------------------------------------------------------------
   Cuadro del reparto (caja/_reparto.html)

   Mismas columnas que la planilla que el cliente ya usa: una por persona,
   los conceptos como filas y el saldo abajo de todo. No usa .table: acá
   las celdas son números en grilla, no un listado — se leen en columna y
   necesitan ir apretadas, sin el padding ni el hover de una tabla de
   registros.

   Facu y Mamá comparten un porcentaje, así que las filas de abajo van con
   colspan sobre sus dos columnas; .reparto-grupo es el encabezado que
   agrupa las dos y hace evidente por qué el saldo es uno solo.
   --------------------------------------------------------------------------- */
.reparto { width: 100%; border-collapse: collapse; font-size: 12px; }
.reparto th,
.reparto td { padding: 6px var(--space-3); text-align: right; white-space: nowrap; }
.reparto thead th {
  font-weight: 400; font-size: 10.5px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--color-neutral-500);
}
.reparto .reparto-grupo {
  text-align: center; color: var(--color-neutral-400);
  border-bottom: 1px solid var(--color-neutral-800);
}
.reparto .reparto-grupo + .reparto-grupo,
.reparto tbody td + td { border-left: 1px solid var(--color-neutral-800); }
.reparto tbody th {
  text-align: left; font-weight: 400; white-space: normal;
  color: var(--color-neutral-500);
}
.reparto tbody td { font-variant-numeric: tabular-nums; }
.reparto tbody tr.reparto-sub th,
.reparto tbody tr.reparto-sub td { border-top: 1px solid var(--color-neutral-800); }
/* El saldo es el número por el que se mira todo el cuadro: más grande
   que el resto y separado por una línea, para que no se lea como una
   fila más. */
.reparto tbody tr.reparto-saldo th,
.reparto tbody tr.reparto-saldo td {
  border-top: 1px solid var(--color-neutral-700);
  padding-top: 9px; font-size: 15px;
}
.reparto tbody tr.reparto-saldo th { color: var(--color-text); }

/* Stepper de cantidad. 26px de alto: es lo mínimo cómodo con mouse en mostrador. */
.qty {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-md);
  background: var(--color-neutral-900);
  padding: 2px;
}
.qty button {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-neutral-400);
  font-size: 13px;
  cursor: pointer;
}
.qty button:hover { background: var(--color-neutral-800); color: var(--color-text); }
.qty output { min-width: 30px; text-align: center; font-size: 13.5px; font-variant-numeric: tabular-nums; }

.icon-btn {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-neutral-600);
  font-size: 14px;
  cursor: pointer;
}
.icon-btn:hover { background: var(--color-neutral-800); color: var(--color-accent-300); }

.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3);
  padding: 64px 0;
  border: 1px dashed var(--color-neutral-800);
  border-radius: var(--radius-md);
  color: var(--color-neutral-600);
}
.empty i { font-size: 26px; }

/* ------------------------------------------------------------------ botones */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-primary { border-color: var(--color-accent); color: var(--color-accent-200); }
.btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.btn-secondary { border-color: var(--color-neutral-800); background: var(--color-neutral-900); color: var(--color-neutral-300); }
.btn-secondary:hover { border-color: var(--color-neutral-700); color: var(--color-text); }
.btn-ghost { color: var(--color-neutral-400); }
.btn-ghost:hover { background: var(--color-neutral-900); color: var(--color-text); }
.btn-block { width: 100%; }
.btn-lg { padding: 14px; font-size: 14.5px; gap: var(--space-3); }
.btn-lg i { font-size: 18px; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn i { font-size: 14px; }
.btn .kbd { border-color: currentColor; background: transparent; opacity: 0.6; }

/* -------------------------------------------------------- formas de pago */

.pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.pay {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: var(--space-4);
  min-height: 66px;
  border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-md);
  background: var(--color-neutral-900);
  color: var(--color-text);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.pay:hover { border-color: var(--color-neutral-700); }
.pay i { font-size: 19px; color: var(--color-neutral-400); }
.pay.is-active { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
/*
  La tilde de la opción activa se pone en el marcado con
  <i class="ph-fill ph-check-circle" class="pay-check">, no con un ::after y un
  codepoint escrito a mano: los valores del área privada de Phosphor cambian
  entre versiones y un icono equivocado no da error, simplemente dibuja otra
  cosa.
*/
/* `.pay i` fija tamaño y color del icono principal, así que la tilde necesita
   un selector más específico para no heredar esos valores. */
.pay .pay-check { position: absolute; top: 8px; right: 8px; font-size: 14px; color: var(--color-accent); }

/* ---------------------------------------------------------------- resumen */

.summary-row { display: flex; align-items: center; gap: var(--space-3); font-size: 13px; }
.summary-row > span:first-child { color: var(--color-neutral-400); }
.rule { height: 1px; background: var(--color-neutral-800); }
.total-row { display: flex; align-items: flex-end; justify-content: space-between; }
.total-value { font-family: var(--font-heading); font-weight: 500; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.total-value--sm { font-size: 28px; }
.total-value--xs { font-size: 26px; }

.discount { display: flex; align-items: center; border: 1px solid var(--color-neutral-800); border-radius: var(--radius-sm); background: var(--color-neutral-900); overflow: hidden; }
.discount input { width: 56px; padding: 5px 8px; border: 0; background: transparent; color: var(--color-text); font: inherit; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.discount span { font-size: 11.5px; color: var(--color-neutral-600); }
.discount span:first-child { padding-left: 8px; }
.discount span:last-child { padding-right: 8px; }
.discount-amount { min-width: 86px; text-align: right; color: var(--color-accent-300); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ formularios */

.input, .select {
  width: 100%;
  padding: 9px 12px;
  background: var(--color-neutral-900);
  border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
}
.input::placeholder { color: var(--color-neutral-600); }
.input:hover, .select:hover { border-color: var(--color-neutral-700); }

.field-icon { position: relative; }
.field-icon > i:first-child { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--color-neutral-500); pointer-events: none; }
.field-icon .select, .field-icon .input { padding-left: 32px; }
.field-icon .select { appearance: none; padding-right: 30px; cursor: pointer; }
.field-icon .caret { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--color-neutral-500); pointer-events: none; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 5px 11px;
  border: 1px solid var(--color-neutral-800);
  border-radius: 99px;
  background: var(--color-neutral-900);
  color: var(--color-neutral-400);
  font: inherit; font-size: 11.5px;
  text-decoration: none;
  cursor: pointer;
}
.chip:hover { border-color: var(--color-neutral-700); color: var(--color-text); }
.chip.is-active { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent-200); }

.seg { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md); background: var(--color-neutral-900); }
.seg a, .seg button {
  padding: 5px 13px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-neutral-400);
  font: inherit; font-size: 11.5px; text-decoration: none; cursor: pointer;
}
.seg .is-active { background: var(--color-accent-800); color: var(--color-accent-100); }

/* ------------------------------------------------------------------ avisos */

.notice {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-neutral-900);
  font-size: 11.5px; line-height: 1.45;
  color: var(--color-neutral-400);
}
.notice i { font-size: 14px; margin-top: 1px; flex: none; }
.notice--alert { border: 1px solid var(--color-accent-700); background: var(--color-accent-900); color: var(--color-accent-200); }
.notice--wide { padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); font-size: 12.5px; align-items: center; }

.fineprint { margin: 0; display: flex; align-items: flex-start; gap: var(--space-3); font-size: 11px; line-height: 1.5; color: var(--color-neutral-600); }
.fineprint i { font-size: 14px; margin-top: 1px; flex: none; }
.fineprint strong { color: var(--color-neutral-400); font-weight: 500; }

.tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 99px; font-size: 10.5px; }
.tag--alert { background: var(--color-accent-800); color: var(--color-accent-100); }
.tag--outline { border: 1px solid var(--color-neutral-700); color: var(--color-neutral-400); }
.tag--warn { border: 1px solid var(--color-accent-600); color: var(--color-accent-300); white-space: nowrap; }
.tag--sm { font-size: 10px; padding: 1px 7px; }

/* ------------------------------------------------------------- gráficos */

/* Barra de progreso: stock sobre mínimo, egresos sobre ingresos. */
.bar { height: 4px; border-radius: 99px; background: var(--color-neutral-900); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 99px; background: var(--color-accent-500); }
.bar--md { height: 6px; }
.bar--lg { height: 8px; }
.bar--xl { height: 14px; border-radius: var(--radius-sm); }
.bar--xl > span { border-radius: var(--radius-sm); }
.bar > span.is-soft { background: var(--color-accent-700); }
.bar > span.is-neutral { background: var(--color-neutral-600); }

/* Barra apilada: mix de cobros por medio de pago. */
.stack { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--color-neutral-900); }
.stack--md { height: 12px; }
.stack > span { display: block; }

.legend { display: flex; flex-direction: column; gap: 6px; }
.legend-row { display: flex; align-items: center; gap: var(--space-3); font-size: 12px; }
/* El importe manda: nunca se parte en dos líneas. Lo que cede es la etiqueta,
   que ya lleva .u-truncate. */
.legend-row .u-num { white-space: nowrap; flex: none; }
.legend-row .u-truncate { min-width: 0; }
.swatch { width: 7px; height: 7px; border-radius: 2px; flex: none; }

.kpi-head { display: flex; align-items: center; gap: var(--space-3); }
.kpi-head i { font-size: 15px; color: var(--color-neutral-600); }
.kpi-value { font-family: var(--font-heading); font-weight: 500; font-size: 23px; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-foot { display: flex; align-items: flex-end; gap: var(--space-3); }
.spark { margin-left: auto; width: 90px; height: 24px; overflow: visible; }
.spark polyline { fill: none; stroke: var(--color-accent-500); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }

/*
  Barras de ventas por día. En HTML y no en SVG: las etiquetas de valor y de
  día heredan la tipografía y el color de la página, y el hover es CSS.
*/
.chart { display: flex; flex-direction: column; gap: var(--space-3); }
.chart-values, .chart-labels { display: flex; gap: var(--space-2); }
.chart-values span, .chart-labels span { flex: 1; text-align: center; font-size: 10.5px; color: var(--color-neutral-500); }
.chart-values { align-items: flex-end; height: 26px; }
.chart-values span { font-variant-numeric: tabular-nums; }
.chart-plot { position: relative; height: 118px; }
.chart-plot::before,
.chart-plot::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--color-neutral-900); }
.chart-plot::before { top: 0; }
.chart-plot::after { top: 50%; }
/*
  z-index explícito: las tres cajas son posicionadas con z-index:auto, así que
  el orden de pintado es el del DOM y un ::after pinta DESPUÉS de los hijos del
  elemento. Sin esto la línea del 50% cruza por encima de las barras y cada una
  se lee partida en dos. Las guías van detrás del dato.
*/
.chart-bars { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; gap: var(--space-2); border-bottom: 1px solid var(--color-neutral-800); }
.chart-bars > span { flex: 1; display: flex; justify-content: center; }
.chart-bars > span > span { width: 60%; max-width: 44px; border-radius: 3px 3px 0 0; background: var(--color-accent-600); cursor: pointer; }
.chart-bars > span > span:hover { background: var(--color-accent-400); }

.donut { position: relative; flex: none; width: 124px; height: 124px; }
.donut svg { width: 124px; height: 124px; transform: rotate(-90deg); }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.donut-total { font-family: var(--font-heading); font-size: 14px; font-variant-numeric: tabular-nums; }
.donut-label { font-size: 9.5px; color: var(--color-neutral-500); letter-spacing: 0.4px; text-transform: uppercase; }

.rank-row { display: flex; align-items: center; gap: var(--space-4); font-size: 12px; }
.rank-row .u-truncate { width: 180px; }
.rank-row .bar { flex: 1; }
.rank-row output { width: 44px; text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- selección */

.pick {
  position: relative;
  display: flex; flex-direction: column; gap: 5px;
  padding: var(--space-4);
  border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-md);
  background: var(--color-neutral-900);
  color: var(--color-text);
  font: inherit; text-align: left; text-decoration: none;
  cursor: pointer;
}
.pick:hover { border-color: var(--color-neutral-700); }
.pick.is-active { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.pick-head { display: flex; align-items: center; gap: var(--space-3); }
.pick-name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-meta { font-size: 11px; color: var(--color-neutral-600); }

/* -------------------------------------------------------------- paginación */

.pager { display: flex; align-items: center; gap: var(--space-4); padding-top: var(--space-2); }
.pager-nav { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.pager-count { min-width: 96px; text-align: center; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pager .btn-secondary[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* -------------------------------------------------------------------- pie */

.shortcuts {
  display: flex; align-items: center; gap: var(--space-8);
  padding: var(--space-3) var(--space-8);
  border-top: 1px solid var(--color-neutral-800);
  background: #17191f;             /* un paso por debajo del fondo: el pie se hunde */
  font-size: 11px; color: var(--color-neutral-600);
}
.shortcuts span { display: flex; align-items: center; gap: 6px; }
.shortcuts .kbd { border-color: var(--color-neutral-800); border-bottom-width: 1px; }

/* --------------------------------------------------------------- diálogos */

.dialog-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(10, 11, 18, 0.72); }
.dialog {
  width: 412px;
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: var(--space-6);
}
.dialog--wide { width: 520px; }
.dialog--md { width: 470px; }
.dialog-brand { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 2px solid var(--color-neutral-700); }
.dialog-brand-magus { font-family: var(--font-logo); font-style: italic; font-weight: 700; font-size: 17px; line-height: 1; color: var(--color-accent); }
.dialog-brand-note { font-size: 8.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--color-neutral-500); }
.dialog-head { display: flex; align-items: center; gap: var(--space-4); }
.dialog-glyph { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--color-accent-600); border-radius: var(--radius-md); color: var(--color-accent); font-size: 18px; flex: none; }
.dialog-title { font-family: var(--font-heading); font-weight: 500; font-size: 16px; }
.dialog-sub { font-size: 11.5px; color: var(--color-neutral-500); }
.dialog-rows { display: flex; flex-direction: column; gap: var(--space-3); font-size: 12.5px; }
.dialog-rows > div { display: flex; justify-content: space-between; }
.dialog-note { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--color-neutral-900); font-size: 11px; line-height: 1.5; color: var(--color-neutral-500); }
.dialog-actions { display: flex; gap: var(--space-3); justify-content: flex-end; }
.dialog-actions--fill .btn { flex: 1; }

.check {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-md);
  background: var(--color-neutral-900);
  color: var(--color-neutral-400);
  font: inherit; font-size: 11.5px; line-height: 1.5; text-align: left;
  cursor: pointer;
}
.check:hover { border-color: var(--color-neutral-700); }
.check-box { position: relative; flex: none; width: 16px; height: 16px; margin-top: 1px; border: 1px solid var(--color-neutral-600); border-radius: 4px; display: grid; place-items: center; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check input:checked + .check-box { border-color: var(--color-accent); background: var(--color-accent-800); color: var(--color-accent-100); }
.check-box i { font-size: 11px; opacity: 0; }
.check input:checked + .check-box i { opacity: 1; }

/* -------------------------------------------------------------- impresión */

@media print {
  .sidebar, .topbar, .shortcuts, .page-actions, .pager { display: none; }
  .app { display: block; min-width: 0; height: auto; }
  body { background: #fff; color: #111; }
}