/*
 * ui.css — hoja de estilos del sistema, construida sobre tokens.css.
 *
 * Diseño "Shadcn Claro (Zinc)" (project-docs/docs/DESIGN-SYSTEM.md). Convive con el
 * styles.css viejo mientras dura la migración: cuando todas las pantallas estén
 * migradas, el viejo se elimina y esta pasa a ser la única.
 *
 * Las clases son compartidas: una pantalla NO define estilos propios. Si algo se ve
 * distinto en una pantalla, es porque usa otra clase, no porque tenga CSS aparte.
 */

/* -------------------------------------------------------------------- base */

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  /* Cifras de ancho fijo: las columnas de guaraníes quedan alineadas. */
  font-variant-numeric: tabular-nums;
}

/* Foco siempre visible: accesibilidad, no decoración. */
:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

a {
  color: var(--acc);
}

/* ------------------------------------------------------------------- shell */

.shell {
  display: flex;
  min-height: 100dvh;
}

.side {
  position: sticky;
  top: 0;
  flex-shrink: 0;
  width: 232px;
  height: 100dvh;
  padding: 14px 10px;
  overflow-y: auto;
  background: var(--card);
  border-right: 1px solid var(--bd);
}

.side__logo {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 12px 14px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
}

.side__sq {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 12px;
  color: var(--pri-ink);
  background: var(--pri);
  border-radius: 6px;
}

.side__grp {
  padding: 12px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--mut2);
}

.nv {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r-sm);
  opacity: 0.86;
}

.nv:hover {
  background: var(--soft);
  opacity: 1;
}

.nv.is-active {
  font-weight: 600;
  background: var(--soft);
  opacity: 1;
}

/* El cuadradito del ícono: geometría, no una librería de íconos de 40 KB. */
.nv i {
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1.6px solid currentcolor;
  border-radius: 4px;
  opacity: 0.7;
}

.main {
  flex: 1;
  min-width: 0;
}

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

.top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 10px 22px;
  background: var(--card);
  border-bottom: 1px solid var(--bd);
}

.crumb {
  font-size: 13.5px;
  color: var(--mut);
}

.crumb b {
  color: var(--ink);
}

.spacer {
  flex: 1;
}

/* --------------------------------------------------------------- controles */

.ctrl {
  display: flex;
  gap: 7px;
  align-items: center;
  min-height: 38px;
  padding: 7px 12px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  background: var(--card);
  border: 1px solid var(--bd2);
  border-radius: var(--r-sm);
}

.ctrl:hover {
  background: var(--soft);
}

.ctrl__v {
  color: var(--mut);
}

/* Los <select> y <input> de los controles heredan la misma piel. */
.ctrl select,
.ctrl input {
  font: inherit;
  font-size: 13.5px;
  color: var(--mut);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

.ctrl select:focus,
.ctrl input:focus {
  outline: none;
}

/* Los controles globales son un solo formulario, pero se ven como piezas sueltas. */
.ctrl-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.seg {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--bd2);
  border-radius: var(--r-sm);
}

.seg a,
.seg button {
  padding: 7px 13px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--mut);
  text-decoration: none;
  cursor: pointer;
  background: var(--card);
  border: 0;
}

.seg a:hover,
.seg button:hover {
  background: var(--soft);
}

.seg .is-active {
  font-weight: 600;
  color: var(--ink);
  background: var(--soft);
}

.btn {
  min-height: 38px;
  padding: 8px 16px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pri-ink);
  text-decoration: none;
  cursor: pointer;
  background: var(--pri);
  border: 0;
  border-radius: var(--r-sm);
}

.btn:hover {
  opacity: 0.9;
}

.btn--ghost {
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--bd2);
}

.btn--ghost:hover {
  background: var(--soft);
  opacity: 1;
}

.btn--sm {
  min-height: 32px;
  padding: 5px 11px;
  font-size: 12.5px;
}

/* -------------------------------------------------------------- contenido */

.wrap {
  max-width: 1280px;
  padding: 20px 22px 40px;
}

h1 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.sub {
  margin-bottom: 16px;
  font-size: 13.5px;
  color: var(--mut);
}

.card {
  padding: 16px 18px;
  margin-bottom: 14px;
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.card h2,
.card__title {
  margin-bottom: 4px;
  font-size: 14.5px;
  font-weight: 600;
}

.hint {
  margin-bottom: 10px;
  font-size: 12.5px;
  color: var(--mut);
}

.muted {
  color: var(--mut);
}

/* ------------------------------------------------------------------ chips */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0 0 14px;
}

.chips__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--mut2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.chip {
  padding: 3px 11px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  background: var(--soft);
  border: 1px solid var(--bd);
  border-radius: 99px;
}

.chip:hover {
  border-color: var(--acc);
}

.chip__x {
  margin-left: 5px;
  color: var(--mut);
}

.chip--clear {
  background: none;
  border-style: dashed;
  color: var(--mut);
}

/* -------------------------------------------------------------------- KPI */

.kgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.k {
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.k h3,
.k__label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--mut);
}

.k__v {
  margin: 3px 0 1px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.k__d {
  font-size: 12px;
  font-weight: 600;
  color: var(--mut);
}

.k__d--up {
  color: var(--ok);
}

.k__d--dn {
  color: var(--bad);
}

.k svg {
  width: 100%;
  height: 26px;
  margin-top: 6px;
}

/* ----------------------------------------------------------------- grillas */

.grid2 {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.grid2--even {
  grid-template-columns: 1fr 1fr;
}

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

.table-wrap {
  overflow-x: auto;
}

table,
.table {
  width: 100%;
  font-size: 13.5px;
  border-collapse: collapse;
}

.table th {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--mut);
  text-align: left;
  border-bottom: 1px solid var(--bd);
}

.table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--soft);
}

/* Sin zebra: el hover alcanza y no ensucia la lectura de las cifras. */
.table tbody tr:hover td {
  background: var(--bg);
}

.table .num,
.table th.num {
  text-align: right;
}

.table--clickable tbody tr {
  cursor: pointer;
}

/* Filas de totalización. */
.row--subtotal td {
  background: var(--soft);
  border-top: 1px solid var(--bd2);
}

.row--total td {
  font-size: 14.5px;
  background: var(--soft);
  border-top: 2px solid var(--bd2);
}

.row--on td {
  box-shadow: inset 2px 0 0 var(--acc);
}

.row--off td {
  opacity: 0.55;
}

/* ----------------------------------------------------------------- badges */

.bdg {
  display: inline-block;
  padding: 2px 9px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 99px;
}

.b-ok {
  color: var(--ok);
  background: var(--ok-bg);
  border-color: var(--ok-bd);
}

.b-bad {
  color: var(--bad);
  background: var(--bad-bg);
  border-color: var(--bad-bd);
}

.b-warn {
  color: var(--warn);
  background: var(--warn-bg);
  border-color: var(--warn-bd);
}

/* Estados en texto suelto (dentro de una celda). */
.ok {
  color: var(--ok);
}

.warn {
  color: var(--warn);
}

.bad,
.error {
  color: var(--bad);
}

/* ----------------------------------------------------------------- alertas */

.alert {
  padding: 10px 13px;
  margin-bottom: 14px;
  font-size: 13.5px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
}

.alert--error {
  color: var(--bad);
  background: var(--bad-bg);
  border-color: var(--bad-bd);
}

.alert--ok {
  color: var(--ok);
  background: var(--ok-bg);
  border-color: var(--ok-bd);
}

.alert--warn {
  color: var(--warn);
  background: var(--warn-bg);
  border-color: var(--warn-bd);
}

/* Nota explicativa: contexto de negocio, no una advertencia. */
.note {
  max-width: 92ch;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--mut);
  background: var(--card);
  border: 1px solid var(--bd);
  border-left: 3px solid var(--acc);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

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

.chart {
  width: 100%;
  height: 210px;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--mut);
}

.legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  vertical-align: -1px;
  border-radius: 2px;
}

/* Barra de proporción dentro de una tabla (mix por canal, desgloses). */
.pbar {
  height: 8px;
  background: var(--soft);
  border-radius: 99px;
}

.pbar i {
  display: block;
  height: 8px;
  background: var(--d1);
  border-radius: 99px;
}

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

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.field__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--mut);
}

.field input,
.field select,
.form-grid input,
.form-grid select {
  min-height: 38px;
  padding: 8px 11px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--bd2);
  border-radius: var(--r-sm);
}

.field input:disabled {
  color: var(--mut);
  background: var(--soft);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px 18px;
}

.form-grid .field--wide {
  grid-column: 1 / -1;
}

fieldset.field {
  padding: 0;
  margin: 0;
  border: 0;
}

.check {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-bottom: 6px;
  font-size: 13.5px;
  cursor: pointer;
}

.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 12.5px;
  color: var(--mut);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.inline {
  display: inline;
}

/* ------------------------------------------------------------------ modal */

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 20;
  display: none;
  width: min(900px, 92vw);
  max-height: min(88vh, 900px);
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgb(9 9 11 / 18%);
  transform: translate(-50%, -50%);
}

.modal[open] {
  display: flex;
  flex-direction: column;
}

.modal::backdrop {
  background: rgb(9 9 11 / 40%);
}

.modal__head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--bd);
}

.modal__title {
  font-size: 15px;
  font-weight: 600;
}

.modal__body {
  padding: 16px 18px;
  overflow-y: auto;
}

/* ----------------------------------------------------------- estado vacío */

.empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--mut);
}

.empty__icon {
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto 10px;
  border: 2px solid var(--bd2);
  border-radius: var(--r);
  opacity: 0.8;
}

/* --------------------------------------------------------- barra móvil */

.mobnav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
  display: none;
  justify-content: space-around;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  background: var(--card);
  border-top: 1px solid var(--bd);
}

.mobnav a {
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--mut);
  text-align: center;
  text-decoration: none;
}

.mobnav a.is-active {
  color: var(--ink);
}

.mobnav span {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto 2px;
  border: 1.7px solid currentcolor;
  border-radius: 5px;
  opacity: 0.75;
}

/* ------------------------------------------------------------------ móvil */

@media (max-width: 920px) {
  .side {
    display: none;
  }

  .grid2,
  .grid2--even {
    grid-template-columns: 1fr;
  }

  .top {
    padding: 10px 14px;
  }

  .wrap {
    /* Espacio para que la barra inferior no tape el final del contenido. */
    padding: 16px 14px calc(76px + env(safe-area-inset-bottom));
  }

  .mobnav {
    display: flex;
  }

  /* 16px evita que iOS haga zoom al enfocar un campo. */
  .field input,
  .field select,
  .form-grid input,
  .form-grid select,
  .ctrl select,
  .ctrl input {
    font-size: 16px;
  }

  .btn,
  .ctrl {
    min-height: 44px;
  }
}

/* ------------------------------------------------------------- heatmap */

/*
 * Hora × día. La intensidad va en la opacidad del fondo y el número queda visible
 * encima: el color solo no permite comparar dos celdas parecidas.
 */
.heat th,
.heat td {
  padding: 5px 6px;
  font-size: 12px;
}

.heat__c {
  min-width: 26px;
  border-radius: 3px;
}

/* Sin esto el hover de la tabla pisa el color de la celda. */
.heat tbody tr:hover td.heat__c {
  background-blend-mode: multiply;
}

/* =============================================== exportación e impresión */

.report-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Visible solo en el papel. */
.print-only {
  display: none;
}

/*
 * IMPRESIÓN / PDF
 * ---------------
 * El botón "PDF" abre el diálogo del navegador y el usuario elige "Guardar como
 * PDF". Cero dependencias, y los gráficos SVG salen vectoriales.
 *
 * Regla: el papel SIEMPRE en claro. Alguien con el tema oscuro que imprima no puede
 * gastar un cartucho en fondos negros, así que acá se fuerzan los tokens claros.
 */
@page {
  size: A4;
  margin: 14mm 12mm 16mm;
}

@media print {
  /* Tokens claros pase lo que pase, incluso con data-theme="dark". */
  :root,
  :root[data-theme='dark'],
  :root[data-theme='light'] {
    --bg: #ffffff;
    --card: #ffffff;
    --bd: #cbcbd0;
    --bd2: #b4b4bb;
    --soft: #f2f2f4;
    --ink: #000000;
    --mut: #444448;
    --mut2: #666670;
    --acc: #1d4ed8;
    --ok: #15803d;
    --bad: #b91c1c;
    --warn: #a16207;
    /*
     * Los fondos suaves también, o imprimir desde el tema oscuro saca bloques
     * negros: en oscuro --acc-soft es #172033. El navegador no cambia de tema al
     * imprimir, así que el @media print tiene que pisar TODOS los tokens de color,
     * no solo los de texto.
     */
    --acc-soft: #eff6ff;
    --ok-bg: #f0fdf4;
    --ok-bd: #bbf7d0;
    --bad-bg: #fef2f2;
    --bad-bd: #fecaca;
    --warn-bg: #fffbeb;
    --warn-bd: #fde68a;
    --d1: #1d4ed8;
    --d2: #0369a1;
    --d3: #6d28d9;
    --d4: #b45309;
    --d5: #71717a;
    --shadow: none;
  }

  body {
    font-size: 10pt;
    background: #fff;
  }

  /* Fuera todo lo que no es contenido. */
  .side,
  .top,
  .mobnav,
  .no-print,
  .report-actions,
  .chips,
  .fbar,
  .subnav,
  dialog,
  .pagination {
    display: none !important;
  }

  .print-only {
    display: block;
  }

  .shell,
  .main {
    display: block;
  }

  .wrap {
    max-width: none;
    padding: 0;
  }

  /* Las tarjetas se leen mejor sin sombra ni fondo en el papel. */
  .card,
  .k {
    padding: 8pt 0;
    margin-bottom: 8pt;
    break-inside: avoid;
    border: 0;
    border-bottom: 1px solid var(--bd);
    border-radius: 0;
    box-shadow: none;
  }

  .kgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6pt;
  }

  .grid2,
  .grid2--even {
    display: block;
  }

  /*
   * Tablas largas: el encabezado se repite en cada página y ninguna fila se parte
   * al medio. Sin esto, la segunda página de una tabla es ilegible.
   */
  .table thead {
    display: table-header-group;
  }

  .table tfoot {
    display: table-footer-group;
  }

  .table tr,
  .table td,
  .table th {
    break-inside: avoid;
  }

  .table-wrap {
    overflow: visible !important;
  }

  .table th {
    border-bottom: 1px solid var(--bd2);
  }

  /* En papel no hay hover: las líneas guían la lectura. */
  .table td {
    border-bottom: 1px solid #e6e6ea;
  }

  h1 {
    font-size: 15pt;
  }

  .card h2,
  .card__title {
    font-size: 11pt;
    break-after: avoid;
  }

  a {
    color: #000;
    text-decoration: none;
  }

  /* Los SVG son vectoriales: se imprimen tal cual, solo se acotan de alto. */
  .chart {
    max-height: 70mm;
  }

  /* Encabezado del informe: solo en el papel. */
  .print-header {
    padding-bottom: 6pt;
    margin-bottom: 10pt;
    border-bottom: 2px solid #000;
  }

  .print-header__brand {
    font-size: 9pt;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .print-header__title {
    margin: 2pt 0 6pt;
    font-size: 16pt;
  }

  .print-header__meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1pt 8pt;
    font-size: 9pt;
  }

  .print-header__meta dt {
    font-weight: 600;
    color: #444;
  }
}

/* Título de pantalla con sus botones de exportación al costado. */
.page-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 4px;
}

/* ------------------------------------------------------------- heatmap (spec §5) */

/*
 * "Se lee sin leer": la mancha se ve antes que los números. La intensidad va en el
 * fondo, con escala continua hacia --acc; el número queda como confirmación.
 */
.heat-wrap {
  overflow-x: auto;
}

.heat {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
}

.heat th {
  padding: 2px 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--mut);
  text-align: center;
  border: 0;
}

.heat tbody th {
  text-align: right;
}

.heat__c {
  min-width: 30px;
  padding: 6px 4px;
  font-size: 11.5px;
  color: var(--ink);
  text-align: center;
  background: var(--soft);
  border: 0;
  border-radius: 6px;
}

.heat__c--empty {
  color: transparent;
  background: var(--soft);
}

/* Sobre el azul fuerte, el texto oscuro no se lee: se invierte. */
.heat__c--strong {
  color: #fff;
  font-weight: 600;
}

/* El máximo se señala con un anillo, no con otro color. */
.heat__c--max {
  box-shadow: 0 0 0 2px var(--ink);
}

/* El hover de la tabla no debe pisar el color de la celda. */
.heat tbody tr:hover td {
  background-color: inherit;
}

.heat-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  font-size: 12px;
  color: var(--mut);
}

.heat-legend__bar {
  width: 120px;
  height: 9px;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--acc) 12%, transparent),
    var(--acc)
  );
  border-radius: 99px;
}

.heat-legend__max {
  margin-left: auto;
}

/* ------------------------------------------------------------------- login */

.login-body {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 20px;
  background: var(--bg);
}

.login {
  width: 100%;
  max-width: 380px;
}

.login__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px;
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

.login__title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.login__title span {
  color: var(--acc);
}

.login__subtitle {
  margin-top: -8px;
  font-size: 13px;
  color: var(--mut);
}

.login .field__input,
.login input[type='email'],
.login input[type='password'] {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--bd2);
  border-radius: var(--r-sm);
}

.login .btn {
  width: 100%;
}

/* ===================================================================
 * COMPONENTES RESCATADOS de la hoja anterior, retokenizados.
 *
 * Al eliminar styles.css quedaron sin estilo ~50 clases que SÍ se usan
 * (las tarjetas de contraparte de Grupo, la paginación, los widgets de
 * administración). Se traen acá con los tokens nuevos: mismo aspecto,
 * mismo vocabulario de color, y ahora responden al tema.
 * =================================================================== */

.datalist {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 10px 16px;
}

.datalist dt {
  font-size: 12px;
  color: var(--mut2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.datalist dd {
  font-size: 13.5px;
}

/* Botón de tema: mismo lugar que en el prototipo, arriba a la derecha. */
.theme-toggle {
  padding: 6px 12px;
  font: inherit;
  font-size: 12.5px;
  color: var(--mut);
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--bd2);
  border-radius: 6px;
}

.theme-toggle:hover {
  color: var(--ink);
  border-color: var(--acc);
}

.datalist {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }

.datalist dd {
    margin-bottom: 10px;
  }

/* Barra de contexto: sucursal y período persisten al cambiar de pantalla. */
.context {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--bd);
}

.context__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.context__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--mut2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.context select,
.context input {
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--bd2);
  border-radius: 6px;
}

/* Gráfico mensual con dos series (compras y ventas) enfrentadas por mes. */
.chart-months {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  height: 180px;
  padding: 10px 0;
}

.chart-months__col {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  height: 100%;
}

.chart-months__bars {
  display: flex;
  flex: 1;
  gap: 3px;
  align-items: flex-end;
  justify-content: center;
}

.chart-months__bar {
  width: 42%;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
}

.chart-months__bar--buy {
  background: var(--acc);
}

.chart-months__bar--sell {
  background: var(--d3);
}

.chart-months__label {
  font-size: 11px;
  color: var(--mut2);
  text-align: center;
}

.legend--buy {
  background: var(--acc);
}

.legend--sell {
  background: var(--d3);
}

.unit-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  max-width: 62ch;
}

.unit-picker__item {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

/* Lo no identificado se ve, pero se lee como lo que es: un residuo. */
.unit-picker__item--muted span {
  color: var(--mut2);
}

/*
 * La tabla resumen es la pieza central de la pantalla: números tabulares para que
 * las columnas se lean alineadas dígito a dígito.
 */
.table--exec {
  font-variant-numeric: tabular-nums;
}

.table--exec tbody tr[data-href] {
  cursor: pointer;
}

.table--exec tbody tr[data-href]:hover td,
.table--exec tbody tr[data-href]:focus-visible td {
  background: var(--soft);
}

.card--hero {
  border-color: var(--bd2);
}

/*
 * Color semántico del vencimiento, consistente en toda la pantalla: por vencer en
 * neutro, y después ámbar → naranja → rojo según se envejece la deuda.
 */
.aging--w1 {
  color: var(--warn);
}

.aging--w2 {
  color: var(--warn);
}

.aging--w3 {
  color: var(--bad);
}

.aging-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  background: currentcolor;
  border-radius: 50%;
  /* El tramo "por vencer" no lleva color propio: es el estado normal. */
  opacity: 0.85;
}

.aging-dot:not([class*='aging--']) {
  background: var(--mut2);
}

/* ------------------------------------------------------------- badges */
.badge--hq {
  color: var(--warn);
  background: var(--warn-bg);
}

.badge--bad {
  color: var(--bad);
  background: var(--bad-bg);
}

/* El contexto de sucursal y período no se quita: se cambia en la barra de arriba. */
.chip--fixed {
  color: var(--mut);
  background: var(--soft);
  border-style: solid;
}

/*
 * Una tarea pendiente para el gerente, no un error del sistema: se distingue del
 * panel de calidad (que sí lista cosas para corregir en Odoo) y de las tarjetas.
 */
.card--todo {
  border-color: var(--warn);
}

/* Un destino confirmado a mano NO es lo mismo que uno resuelto por la base. */
.badge--conf {
  color: var(--d3);
  background: var(--ok-bg);
}

.check-col {
  width: 34px;
  text-align: center;
}

.destino-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin: 14px 0 10px;
}

.destino-actions .field--grow {
  flex: 1;
  min-width: 220px;
}

.destino-actions select,
.destino-actions input[type='text'] {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--bd2);
  border-radius: 6px;
}

/* Informativo, no protagonista: vive al pie y no compite con los números. */
.card--quiet {
  background: none;
  border-style: dashed;
}

.quality {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 6px;
}

.quality__item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--soft);
  border-radius: var(--r);
}

.quality__count {
  font-size: 24px;
  font-weight: 600;
  color: var(--warn);
  font-variant-numeric: tabular-nums;
}

.quality__item small {
  display: block;
  margin-top: 2px;
}

/* Subnavegación de las pantallas de administración. */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bd);
}

.subnav__link {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--mut);
  text-decoration: none;
  border-radius: 6px;
}

.subnav__link:hover {
  color: var(--ink);
  background: var(--soft);
}

.subnav__link.is-active {
  color: var(--acc);
  background: var(--soft);
  font-weight: 600;
}

/* La contraseña temporal se muestra UNA vez: tiene que poder dictarse sin errores. */
.card--highlight {
  border-color: var(--warn);
  background: var(--warn-bg);
}

.password-temp {
  margin: 8px 0;
  padding: 12px 16px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 22px;
  letter-spacing: 0.12em;
  color: var(--ink);
  background: var(--card);
  border: 1px dashed var(--bd2);
  border-radius: var(--r);
  /* Para poder seleccionarla de un doble clic. */
  user-select: all;
}

/* Matriz de permisos: un bloque por módulo. */
.perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.perm-module {
  padding: 10px 12px;
  border: 1px solid var(--bd);
  border-radius: var(--r);
}

.perm-module legend {
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--mut2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* El detalle JSON de la auditoría no debe estirar la tabla. */
.detail-cell {
  max-width: 340px;
  font-size: 12px;
}

/*
 * El filtro de contraparte ES esto: cada tarjeta muestra sus propios números y al
 * tocarla filtra la pantalla. Reemplaza a los checkboxes, que no decían nada de lo
 * que había detrás de cada opción.
 */
.cp-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.cp {
  display: block;
  padding: 13px 15px;
  color: inherit;
  text-decoration: none;
  background: var(--card);
  border: 2px solid var(--bd);
  border-radius: 12px;
}

.cp:hover {
  border-color: var(--acc);
}

.cp:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

.cp.is-active {
  background: var(--acc-soft);
  border-color: var(--acc);
}

.cp__name {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 7px;
  font-size: 15px;
  font-weight: 700;
}

.cp__line {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  font-size: 13.5px;
  color: var(--mut);
}

.cp__line b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.cp__n {
  font-size: 12px;
  color: var(--mut2);
}

.cp__overdue {
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bad);
}

.cp__overdue--ok {
  font-weight: 600;
  color: var(--ok);
}

/* ==================================== KPIs con desglose (v3) */
.kwrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.khead {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: baseline;
}

.khead__label {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--mut2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.khead__total {
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.kmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 8px 0 12px;
  font-size: 13.5px;
  color: var(--mut);
}

.kmeta b {
  display: block;
  font-size: 16px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.kmeta__bad b {
  color: var(--bad);
}

/* Desglose por contraparte, con barras de proporción. */
.bk {
  padding-top: 10px;
  border-top: 1px solid var(--bd);
}

.bk__row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 5px 6px;
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
}

.bk__row:hover {
  background: var(--acc-soft);
}

.bk__who {
  width: 150px;
  font-size: 14px;
  font-weight: 600;
}

.bk__bar {
  flex: 1;
  height: 9px;
  overflow: hidden;
  background: var(--soft);
  border-radius: 99px;
}

.bk__bar i {
  display: block;
  height: 100%;
  background: var(--acc);
}

.bk__amt {
  width: 120px;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bk__pct {
  width: 44px;
  font-size: 12.5px;
  color: var(--mut2);
  text-align: right;
}

.kwrap {
    grid-template-columns: 1fr;
  }

/* ------------------------------------------------- filtros y acciones de tabla */
.filters {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  width: fit-content;
}

.filters__item {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mut);
  text-decoration: none;
  border-radius: 6px;
}

.filters__item:hover {
  color: var(--ink);
  background: var(--soft);
}

.filters__item.is-active {
  color: #fff;
  background: var(--acc);
}

/* Barra de filtros de una pantalla (no la de contexto global). */
.context--filters {
  margin-bottom: 18px;
  border: 1px solid var(--bd);
  border-bottom: 1px solid var(--bd);
  border-radius: var(--r);
}

.context--filters input[type='search'] {
  min-width: 220px;
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--bd2);
  border-radius: 6px;
}

.modal__body .datalist {
  grid-template-columns: 150px 1fr;
  margin-bottom: 18px;
}

/* -------------------------------------------------------------- paginación */
.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 2px 2px;
  font-size: 13px;
}

.pager__status {
  color: var(--mut);
}

.pager__sizes {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--mut);
}

.pager__size {
  padding: 2px 8px;
  color: var(--mut);
  text-decoration: none;
  border: 1px solid var(--bd);
  border-radius: 6px;
}

.pager__size:hover {
  color: var(--ink);
  border-color: var(--bd2);
}

.pager__size.is-active {
  color: var(--bg);
  background: var(--acc);
  border-color: var(--acc);
}

.pager__nav {
  display: flex;
  gap: 10px;
  align-items: center;
}

.pager__page {
  color: var(--mut);
}

.button.is-disabled {
  cursor: default;
  opacity: 0.4;
}

/* Canal presunto: marca discreta, no una alarma. El dato es utilizable; solo
   conviene saber que se dedujo del tipo de caja y no vino cargado de Odoo. */
.presumed {
  /*
   * Iba `var(--s4)`, un token que NO existe en el proyecto: el color caía a `unset`
   * y el asterisco quedaba del mismo color que el texto, o sea que la marca de
   * "canal presunto" no se distinguía de un canal real. Es justo lo que la regla de
   * oro 3 no permite: una presunción tiene que verse como presunción.
   *
   * Va el mismo `--warn` que usa `.pres`, que es la clase equivalente y sí estaba
   * bien. Las dos hacen lo mismo y ahora se ven igual.
   */
  color: var(--warn);
  cursor: help;
  border: 0;
  text-decoration: none;
}

/* Facturas canceladas por un pago: varias por celda, separadas y clicables. */
.link-invoice {
  display: inline-block;
  margin: 0 6px 2px 0;
  color: var(--acc);
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px dotted currentcolor;
}

.link-invoice:hover {
  color: var(--ink);
}
/* ------------------------------------------- rescates que cambiaron de nombre */

/* La paginación usa .button/.button--ghost del vocabulario viejo. */
.pager .button,
.button {
  min-height: 32px;
  padding: 5px 11px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  background: var(--card);
  border: 1px solid var(--bd2);
  border-radius: var(--r-sm);
}

.button:hover {
  background: var(--soft);
}

.button--ghost {
  background: var(--card);
}

/* Subtítulo dentro de una tarjeta (ficha del vendedor). */
.card__subtitle {
  margin-bottom: 10px;
  font-size: 12.5px;
  color: var(--mut);
}

/* Mini-barra dentro de una celda de tabla (spec §5: mini-barras en tablas). */
.bar-cell {
  width: 120px;
}

.bar {
  height: 8px;
  overflow: hidden;
  background: var(--soft);
  border-radius: 99px;
}

.bar i,
.bar span {
  display: block;
  height: 100%;
  background: var(--d1);
  border-radius: 99px;
}

/* La casilla de la confirmación masiva de destinos. */
.destino-check {
  cursor: pointer;
}

/* Atajo para limpiar filtros, en las pantallas que no llevan chips. */
.filters-clear {
  margin-bottom: 16px;
}

/* Las palabras "Menos" y "Más" de la leyenda del heatmap. */
.heat-legend__label {
  font-size: 12px;
  color: var(--mut);
}

/* ------------------------------------------------- ficha de sucursal (hero) */

/*
 * Los tres números grandes. Son la primera lectura de la ficha: tienen que verse
 * antes que nada y decir su contexto sin que haya que buscarlo.
 */
.hero-nums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.hero-num {
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.hero-num h3 {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hero-num__v {
  margin: 6px 0 4px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.hero-num__d {
  font-size: 12.5px;
  color: var(--mut);
}

/* El resultado es el número que se mira primero: se distingue del resto. */
.hero-num--result {
  border-color: var(--bd2);
  background: var(--soft);
}

@media (max-width: 640px) {
  .hero-num__v {
    font-size: 25px;
  }
}

/* -------------------------------------------------------------- inventario */

.search-form {
  display: grid;
  gap: 14px;
}

.search-main {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.branch-box {
  padding: 12px 14px;
  margin: 0;
  background: var(--soft);
  border: 1px solid var(--bd);
  border-radius: var(--r);
}

.selector-head {
  margin-bottom: 8px;
}

.attribute-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.attribute-grid input,
.attribute-grid select,
.search-main input {
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--bd2);
  border-radius: var(--r-sm);
}

/*
 * La matriz puede tener 10+ columnas de depósito. La primera columna queda fija
 * al hacer scroll horizontal para no perder de vista de qué variante es cada fila.
 */
.inv-matrix th,
.inv-matrix td {
  padding: 7px 9px;
  font-size: 13px;
  white-space: nowrap;
}

.inv-matrix tbody td:first-child,
.inv-matrix thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--card);
}

.inv-matrix tbody tr:hover td:first-child {
  background: var(--bg);
}

/* Negativo en rojo, cero en ámbar: se ve el problema antes de leer el número. */
.inv-neg {
  font-weight: 700;
  color: var(--bad);
  background: var(--bad-bg);
}

.inv-cero {
  color: var(--warn);
  background: var(--warn-bg);
}

@media (max-width: 640px) {
  .search-main {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------- inventario v2 (color y foco) */

/*
 * El dueño vio la pantalla "muy gris". El color se suma SIN salir del sistema:
 * degradé suavísimo en las tarjetas y semáforo con los tokens semánticos de
 * siempre. Ningún hex suelto: todo sale de tokens.css, así que el tema oscuro
 * sigue funcionando sin tocar nada.
 */
.k--soft {
  background: linear-gradient(180deg, var(--card), var(--acc-soft));
}

/*
 * Semáforo de sucursal. El borde ACOMPAÑA al texto de la tarjeta ("N negativas a
 * revisar", "N variantes sin stock"), no lo reemplaza: un estado que se comunica
 * solo por color no existe para quien no distingue rojo de verde. Si alguna vez se
 * saca ese texto, hay que reemplazarlo por otro, no dejar el borde solo.
 */
.k--ok {
  border-left: 3px solid var(--ok);
}

.k--warn {
  border-left: 3px solid var(--warn);
}

.k--bad {
  border-left: 3px solid var(--bad);
}

/* Las tarjetas de depósito son de segundo nivel: más chicas y sin degradé. */
.kgrid--depots {
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  margin-top: 12px;
}

.k--depot {
  padding: 11px 13px;
  background: var(--soft);
  box-shadow: none;
}

.k--depot .k__v {
  font-size: 19px;
}

.kgrid--5 {
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
}

.kgrid--2 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* La barra de proporción dentro de la tarjeta de sucursal. */
.k .bar {
  margin-top: 10px;
}

/* Mini-barra bajo el total de una fila: se lee el peso relativo de un vistazo. */
.bar--inline {
  display: block;
  width: 54px;
  height: 3px;
  margin-top: 4px;
  margin-left: auto;
}

/* Encabezado de sucursal en la matriz: agrupa visualmente sus depósitos. */
.th-branch {
  background: var(--acc-soft);
}

/* El cuadradito de color, solo cuando el nombre está en el diccionario. */
.swatch {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 6px;
  vertical-align: -1px;
  border: 1px solid var(--bd2);
  border-radius: 3px;
}

/* -------------------------------------------- bloque colapsable (desglose) */

.drawer {
  margin-top: 6px;
  border-top: 1px solid var(--bd);
}

.drawer__summary {
  padding: 12px 2px 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--acc);
  cursor: pointer;
}

.drawer__summary:hover {
  text-decoration: underline;
}

/* ------------------------------------------ disponibilidad de una variante */

.chips--faltantes {
  gap: 7px;
  margin-bottom: 4px;
}

/*
 * Los faltantes son botones, no adornos: se ven accionables y en rojo, porque
 * cada uno es una venta que no se pudo hacer.
 */
.chip--falta {
  font: inherit;
  font-size: 12.5px;
  /* Son <button>: sin esto Safari les deja su propio alto y no alinean con los chips. */
  appearance: none;
  line-height: inherit;
  color: var(--bad);
  cursor: pointer;
  background: var(--bad-bg);
  border-color: var(--bad-bd);
}

.chip--falta:hover {
  border-color: var(--bad);
}

/*
 * El chip elegido. Usa el par semántico --bad/--bad-bg, que está calibrado para los
 * dos temas: --pri-ink es el texto que va sobre --pri, y prestarlo para un fondo
 * --bad daba negro sobre rojo salmón en oscuro.
 *
 * El estado NO se marca solo con color: el botón lleva aria-pressed, que es lo que
 * lee el lector de pantalla y lo que hace visible el estado sin depender de la vista.
 */
.chip--activo {
  font-weight: 600;
  color: var(--bad);
  background: var(--bad-bg);
  border-color: var(--bad);
  box-shadow: inset 0 0 0 1px var(--bad);
}

.disp {
  padding: 14px 16px;
  margin-top: 14px;
  background: var(--soft);
  border: 1px solid var(--bd);
  border-radius: var(--r);
}

.disp__head {
  margin-bottom: 10px;
}

.disp__tip {
  margin-top: 10px;
  margin-bottom: 0;
  font-weight: 500;
  color: var(--ink);
}

/*
 * En móvil los faltantes se tocan con el dedo, no se apuntan con un mouse. Un chip
 * de 26px es un objetivo que se falla; se sube a 36px, que es el compromiso entre
 * el mínimo cómodo y no convertir una lista de cien chips en una pantalla de scroll.
 */
@media (max-width: 920px) {
  .chip--falta {
    min-height: 36px;
    padding-block: 8px;
  }
}

/* ------------------------------------------------------- cobros (finanzas) */

/*
 * Barra bicolor efectivo/electrónico. El efectivo va en ámbar porque es el que
 * tiene riesgo de caja; el resto queda en el azul de datos. No es un estado de
 * error: es una proporción que conviene mirar.
 */
.bar--split {
  background: var(--d1);
}

.bar__cash {
  background: var(--warn);
}

/* Los medios crudos cuelgan de su familia: la sangría lo dice sin más texto. */
.cell-indent {
  padding-left: 28px;
}

.row-method {
  cursor: pointer;
}

.row-method:hover td {
  background: var(--soft);
}

/* Los atajos de período activos, dentro del .seg que ya existía. */
.seg a[aria-current='true'] {
  font-weight: 600;
}

/* ------------------------------------------- landing de Vendedores (equipo) */

/*
 * El hero de la sucursal y las cabeceras de bloque van en el DEGRADÉ AZUL de los
 * mockups aprobados. Es el único lugar del sistema con un fondo de color fuerte:
 * marca "estás mirando esta plaza" antes de leer una palabra.
 *
 * Los azules salen de los tokens de datos (--d1) y del acento, así que el tema
 * oscuro los acompaña sin reglas aparte.
 */
.hero {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  margin-bottom: 16px;
  color: #fff;
  background: linear-gradient(100deg, #1e40af, #2563eb);
  border-radius: var(--r-lg);
}

.hero__t {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.hero__s {
  margin-top: 3px;
  font-size: 13px;
  color: var(--on-accent);
}

.hero__tot {
  text-align: right;
}

.hero__tot b {
  font-size: 26px;
  font-weight: 800;
}

.hero__tot span {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--on-accent);
}

/* La variación dentro del hero: hereda el claro, no el verde/rojo del tema. */
.hero__tot .up,
.hero__tot .dn {
  color: #fff;
}

/* ------------------------------------------------- bloque de sucursal */

.suc {
  margin-bottom: 18px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: var(--r-lg);
}

.suc__h {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  color: #fff;
  background: linear-gradient(90deg, #1d4ed8, #2563eb);
}

.suc__t {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: 0.02em;
}

/* El número de orden: el ranking de la plaza, visible sin leer montos. */
.suc__n {
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 700;
  background: rgb(255 255 255 / 18%);
  border-radius: 7px;
}

.suc__tot {
  font-size: 19px;
  font-weight: 750;
  text-align: right;
}

.suc__tot small {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--on-accent);
}

.suc__tot .up,
.suc__tot .dn {
  color: #fff;
}

.suc__k {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--bd);
}

.suc__k > div {
  padding: 14px 18px;
  border-right: 1px solid var(--bd);
}

.suc__k > div:last-child {
  border-right: 0;
}

.suc__k .l {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.suc__k .v {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 750;
}

/* El nombre del top vendedor no es una cifra: entra más chico para que quepa. */
.suc__k .v--name {
  font-size: 15px;
}

.suc__k .d {
  margin-top: 3px;
  font-size: 12px;
  color: var(--mut2);
}

.suc__b {
  padding: 8px 18px 14px;
}

.suc__more {
  margin-top: 8px;
  font-size: 12.5px;
}

/*
 * Lo que NO es una persona, dicho al pie del top de cada plaza. Se ve, pero en
 * segundo plano: es un dato a corregir en Odoo, no un vendedor del equipo.
 */
.suc__sin {
  margin-top: 8px;
  padding: 7px 10px;
  border-left: 3px solid var(--warn);
  border-radius: 0 6px 6px 0;
  background: var(--warn-soft, rgba(180, 120, 10, 0.07));
  color: var(--mut2);
  font-size: 12.5px;
}

/* La tarjeta de un pendiente de calidad de dato: se distingue sin gritar. */
.card--warn {
  border-left: 3px solid var(--warn);
}

.insight--warn {
  border-left-color: var(--warn);
  background: var(--warn-soft, rgba(180, 120, 10, 0.07));
}

/* --------------------------------------------------- KPIs de la landing */

.kgrid--6 {
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}

/* Borde izquierdo de color: el semáforo del mockup. */
.k--hero {
  background: linear-gradient(180deg, var(--card), var(--acc-soft));
  border-left: 4px solid var(--acc);
}

.k--acc {
  border-left: 4px solid var(--acc);
}

.k--bad {
  border-left: 4px solid var(--bad);
}

.k--good {
  border-left: 4px solid var(--ok);
}

/* Los KPIs clickeables se ven pulsables y marcan cuál filtra. */
a.k {
  display: block;
  color: inherit;
  text-decoration: none;
}

a.k:hover {
  border-color: var(--acc);
}

.k--on {
  outline: 2px solid var(--acc);
  outline-offset: -1px;
}

/* ------------------------------------------------------ etiquetas (chips) */

/*
 * Los chips de canal y de señal. Son `tg` y no `chip` porque el chip del sistema es
 * un filtro clickeable y estos son sólo rótulos: mismo aspecto, otra semántica.
 */
.tg {
  display: inline-block;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 5px;
}

.tg--tpv {
  color: var(--tpv);
  background: var(--tpv-bg);
}

.tg--min {
  color: var(--acc);
  background: var(--acc-soft);
}

.tg--may {
  color: var(--may);
  background: var(--may-bg);
}

.tg--ok {
  color: var(--ok);
  background: var(--ok-bg);
}

.tg--bad {
  color: var(--bad);
  background: var(--bad-bg);
}

.tg--warn {
  color: var(--warn);
  background: var(--warn-bg);
}

/* El asterisco del canal presunto: ámbar, para que se note que es una presunción. */
.pres {
  font-weight: 700;
  color: var(--warn);
}

/* Los guiones de "no aplica": presentes pero apagados, nunca un cero. */
.mut {
  color: var(--mut2);
}

.up {
  font-weight: 600;
  color: var(--ok);
}

.dn {
  font-weight: 600;
  color: var(--bad);
}

/* La fila de la sucursal que se está mirando, en las tablas comparativas. */
.row--me td {
  background: var(--ok-bg);
}

/* Título de sección numerado, como en los mockups. */
.sec {
  margin: 24px 0 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--acc);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* --------------------------------------------------- barras horizontales */

.qbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 9px 0;
}

.qbar__nm {
  width: 130px;
  font-size: 13px;
  font-weight: 600;
}

.qbar__nm small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--mut2);
}

.qbar__w {
  flex: 1;
  min-width: 0;
}

.qbar__b {
  height: 26px;
  background: var(--d1);
  border-radius: 7px;
}

/* La sucursal seleccionada, en verde: se encuentra sin leer los rótulos. */
.qbar__b--sel {
  background: var(--ok);
}

.qbar__v {
  width: 110px;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

/* ------------------------------------------------------ venta día a día */

.days {
  position: relative;
}

/*
 * El promedio del período, punteado: la referencia contra la que se lee cada día.
 *
 * OJO CON LA GEOMETRÍA. El `left` en % lo resuelve el navegador contra el ANCHO
 * COMPLETO de la fila, pero las barras solo ocupan la columna del medio: a la
 * izquierda está la etiqueta del día (74px) y a la derecha el monto (145px + gaps).
 * Posicionar la línea directo en la fila la corría a la derecha —el dueño la vio caer
 * fuera de la barra el 08/08/2026—, porque un 61% de la fila no es un 61% de la barra.
 *
 * Se resuelve con `calc()`: se reserva el espacio de las dos columnas fijas y el
 * porcentaje se aplica solo a lo que queda, que es exactamente el riel de las barras.
 * Las medidas salen de .day__l (74px), .day__v (145px) y los dos gap de 10px.
 */
.days__avg {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 0;
  border-left: 2px dashed var(--warn);
}

.day {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 7px 0;
}

.day__l {
  width: 74px;
  font-size: 13px;
  font-weight: 600;
}

.day__l small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--mut2);
}

.day__w {
  flex: 1;
  min-width: 0;
}

.day__b {
  height: 22px;
  background: var(--d1);
  border-radius: 6px;
}

/* Domingo en gris y el máximo en verde: los dos datos que se buscan de un vistazo. */
.day__b--dom {
  background: var(--bd2);
}

.day__b--max {
  background: var(--ok);
}

.day__v {
  width: 145px;
  font-size: 13px;
  font-weight: 650;
  text-align: right;
}

/* ------------------------------------------------------------- canales */

/*
 * Los canales: UNA columna por canal, de ancho proporcional a su porcentaje, con el
 * segmento y su etiqueta adentro. Así la etiqueta queda siempre debajo de su
 * segmento — antes eran dos filas sueltas y no se correspondían.
 */
.canales {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.canales__col {
  min-width: 0;
}

.canales__seg {
  padding: 12px 14px;
  overflow: hidden;
  font-size: 16px;
  font-weight: 750;
  color: #fff;
  border-radius: 9px;
}

.canales__t {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--mut);
}

.canales__t b {
  display: block;
  font-size: 14px;
  color: var(--ink);
}

.canales__tk {
  margin-top: 2px;
  font-weight: 700;
}

@media (max-width: 920px) {
  .suc__k {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero__t {
    font-size: 22px;
  }

  /* En móvil las barras necesitan el ancho: los rótulos se achican. */
  .qbar__nm,
  .day__l {
    width: 92px;
  }

  .qbar__v,
  .day__v {
    width: 96px;
    font-size: 12px;
  }

  .segrow {
    flex-wrap: wrap;
  }
}

/* La columna de totales del heatmap: suma cada día sin tener que contar celdas. */
.heat__sum {
  padding-left: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--mut);
  text-align: right;
}

/*
 * Los segmentos de canal no pueden aplastarse por debajo de su texto: con un canal de
 * 2% el flex proporcional le daba una caja más angosta que "2,0%" y desbordaba.
 */
.segrow__s {
  min-width: 68px;
  overflow: hidden;
}

/*
 * La lectura de un bloque: la conclusión en palabras, generada por regla. Va con
 * borde izquierdo para que se lea como una nota y no como un dato más.
 */
.insight {
  padding: 11px 14px;
  margin-top: 12px;
  font-size: 13px;
  background: var(--acc-soft);
  border-left: 4px solid var(--acc);
  border-radius: var(--r-sm);
}

/* ------------------------------------------- desvíos (tabla fina · propuesta A) */

/*
 * Filas de ~28px: la tabla de desvíos tiene que entrar entera sin scroll, así que
 * cada vendedor ocupa una línea y no una tarjeta.
 */
.table--fine td {
  padding: 5px 10px;
}

.table--fine .small {
  font-size: 11px;
}

/* El encabezado de cada plaza, dentro de la misma tabla. */
.row--group td {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--soft);
}

.row--click {
  cursor: pointer;
}

.row--click:hover td {
  background: var(--acc-soft);
}

.spark {
  width: 108px;
  padding-right: 0 !important;
}

/* El chip del desvío: ancho fijo para que la columna quede alineada. */
.chip-var {
  display: inline-block;
  min-width: 58px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  border-radius: 6px;
}

.chip-var--up {
  color: var(--ok);
  background: var(--ok-bg);
}

.chip-var--dn {
  color: var(--bad);
  background: var(--bad-bg);
}

/* La aclaración del título de sección, en minúscula y sin el espaciado del rótulo. */
.sec__nota {
  font-weight: 500;
  color: var(--mut2);
  text-transform: none;
  letter-spacing: 0;
}

/* En móvil los canales se apilan: un 24% de ancho no entra en 390px. */
@media (max-width: 720px) {
  .canales {
    grid-template-columns: 1fr !important;
  }
}

/* =====================================================================
 * NIVEL 3 · LA FICHA DEL VENDEDOR
 *
 * El hero de la ficha reusa .hero y le agrega el avatar, el puesto en el
 * canal y el badge de desvío. Lo demás son cuatro piezas: la tendencia de
 * meses, las barras de participación, la evolución diaria y el grid 3/2.
 * ===================================================================== */

.hero--v {
  align-items: flex-start;
}

.hero__left {
  display: flex;
  gap: 14px;
  align-items: center;
}

/* Las iniciales. Sin foto: RRHH no expone imágenes al dashboard. */
.avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 54px;
  height: 54px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}

/* El puesto en el canal, al medio del hero. */
.rankbox {
  padding: 8px 14px;
  text-align: center;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 10px;
}

.rankbox b {
  display: block;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
}

.rankbox span {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.82);
}

/* El desvío personal: verde sube, rojo baja, y siempre legible sobre el azul. */
/*
 * LAS TRES MEDIDAS DE VENTA, bajo el total del hero.
 *
 * Siempre visibles y en tipografía chica: son para conciliar contra los pivots de
 * Odoo, no para competir con el KPI principal.
 */
.medidas {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.86);
}

.medidas__f {
  display: flex;
  gap: 14px;
  align-items: baseline;
  justify-content: space-between;
  padding: 2px 0;
}

.medidas dt {
  font-weight: 400;
  white-space: nowrap;
}

.medidas dd {
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* La explicación de la brecha: segundo renglón, todavía más discreto. */
.medidas__d {
  display: block;
  margin-top: 1px;
  font-weight: 400;
  font-size: 10.5px;
  opacity: 0.85;
}

/* El ⓘ del cobrado. Es un botón de verdad para que se pueda tabular hasta él. */
.info {
  padding: 0 2px;
  font-size: 11px;
  color: inherit;
  cursor: help;
  background: none;
  border: 0;
}

.info:focus-visible {
  outline: 2px solid #fff;
  border-radius: 3px;
}

@media (max-width: 620px) {
  .medidas__f {
    flex-direction: column;
    gap: 0;
  }

  .medidas dd {
    text-align: left;
  }
}

/* Bruto − NC = neto, siempre bajo el total del hero (pedido del dueño). */
.hero__bn {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.82);
}

.hero__badge {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 999px;
}

.hero__badge--up {
  color: #dcfce7;
  background: rgba(21, 128, 61, 0.55);
}

.hero__badge--dn {
  color: #fee2e2;
  background: rgba(185, 28, 28, 0.55);
}

/* El chip del canal, dentro del título. */
.tg--canal {
  margin-left: 8px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
}

/* Dos columnas que en pantalla chica se apilan. */
.grid32 {
  display: grid;
  gap: 14px;
  grid-template-columns: 1.35fr 1fr;
  margin-bottom: 14px;
}

/* ------------------------------------------ La tendencia de 3 meses */

/*
 * Las barras se dibujan de abajo hacia arriba: por eso la columna se alinea
 * al final. La altura la pone el PHP en px sobre un máximo de 110.
 */
.tre {
  display: flex;
  gap: 18px;
  align-items: flex-end;
  justify-content: space-around;
  min-height: 170px;
  padding: 14px 6px 4px;
}

.tre__m {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  max-width: 110px;
}

.tre__b {
  width: 100%;
  background: linear-gradient(180deg, var(--d2), var(--d1));
  border-radius: 6px 6px 0 0;
}

/* El mes en curso se distingue: todavía no terminó. */
.tre__b--cur {
  background: linear-gradient(180deg, var(--acc), var(--d3));
}

/* Un mes sin migrar NO es una barra de cero: es un hueco, y se ve como hueco. */
.tre__sin {
  display: grid;
  place-items: center;
  width: 100%;
  height: 34px;
  color: var(--mut2);
  background: repeating-linear-gradient(
    45deg, transparent, transparent 5px,
    var(--bd) 5px, var(--bd) 6px
  );
  border-radius: 6px 6px 0 0;
}

.tre__v {
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.tre__l {
  margin-top: 2px;
  font-size: 11px;
  color: var(--mut2);
  text-align: center;
}

/* ------------------------------------------ Participación (3 barras) */

.share {
  margin-bottom: 14px;
}

.share__l {
  margin-bottom: 5px;
  font-size: 12.5px;
  color: var(--mut2);
}

.share__v {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 12px;
}

.share__v b {
  font-size: 14px;
  font-weight: 800;
}

@media (max-width: 820px) {
  .grid32 {
    grid-template-columns: 1fr;
  }

  .day {
    grid-template-columns: 62px 1fr 96px;
  }

  .tre {
    gap: 10px;
  }
}

/* =====================================================================
 * LA FILA DE KPIs, ORDENADA
 *
 * El dueño la vio "encimada": una tarjeta con más texto que las otras
 * estiraba toda la fila, porque el grid iguala alturas al más alto y el
 * resto quedaba con un vacío enorme abajo.
 *
 * Se arregla por estructura y no recortando el contenido: cada tarjeta se
 * ordena en columna con el detalle abajo, el título nunca ocupa dos líneas
 * y el texto secundario no se estira. Así la fila se lee de un vistazo,
 * que es para lo que está.
 * ===================================================================== */

.k {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/*
 * El título en una sola línea. Si no entra, se corta con puntos suspensivos y
 * el nombre completo queda en el tooltip: dos renglones de título desalinean
 * los números de toda la fila, que es lo que se venía a evitar.
 */
.k h3,
.k__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El calificativo del título ("· toda la sucursal") pesa menos que el nombre. */
.k h3 small {
  font-weight: 400;
  opacity: 0.75;
}

/* El detalle se apoya abajo: los números grandes quedan alineados entre sí. */
.k__d {
  margin-top: auto;
  padding-top: 2px;
  line-height: 1.45;
}

/*
 * El segundo renglón del detalle es contexto, no un dato principal: más chico,
 * en una línea y con el detalle completo en el tooltip.
 */
.k__d small {
  display: block;
  overflow: hidden;
  font-size: 11px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Una nota al pie de una sección: explica algo que NO está, así que no compite. */
.hint--nota {
  margin: -6px 0 14px;
  padding: 8px 12px;
  background: var(--soft);
  border-radius: var(--r);
}

/* =====================================================================
 * INVENTARIO v3 · AUDITORÍAS BAJO DEMANDA
 *
 * Cinco botones que NO traen datos: la página abre sin consultar nada y
 * cada uno pide lo suyo recién al hacer clic. Por eso se ven como
 * acciones —cursor de mano, hover con color— y no como tarjetas de KPI:
 * el usuario tiene que entender que ahí hay que apretar.
 * ===================================================================== */

.audits {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, 1fr);
  margin: 10px 0 16px;
}

.abtn {
  display: block;
  padding: 15px 14px;
  color: inherit;
  text-decoration: none;
  background: var(--card);
  border: 1.5px solid var(--bd);
  border-radius: var(--r);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.abtn:hover {
  border-color: var(--acc);
}

.abtn .ic {
  display: block;
  font-size: 19px;
  line-height: 1.1;
}

.abtn .t {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 700;
}

.abtn .d {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--mut2);
}

/* La abierta: se distingue de un vistazo cuál de las cinco estoy mirando. */
.abtn--on {
  background: var(--acc-soft);
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-soft);
}

/*
 * Deshabilitada: "Salud por sucursal" compara plazas entre sí, así que con
 * una sola seleccionada no hay comparación posible. Se ve apagada y NO es
 * un enlace, para que no prometa algo que no puede dar.
 */
.abtn--off {
  cursor: not-allowed;
  opacity: 0.45;
}

/* El estado "todavía no consulté nada", que es como abre la pantalla. */
.skel {
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 12.5px;
  color: var(--mut2);
  text-align: center;
  border: 1.5px dashed var(--bd);
  border-radius: var(--r);
}

.card--audit {
  border-color: var(--acc);
}

.audit__head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

/* Las pestañas de la ventana (30/60/90). Cada una re-consulta al clickearse. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 10px 0 12px;
}

.tab {
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 8px;
}

.tab--on {
  color: var(--acc);
  background: var(--acc-soft);
  border-color: var(--acc);
}

/* El export se va al extremo: es la acción de salida, no una pestaña más. */
.audit__export {
  margin-left: auto;
}

.tg--acc {
  color: var(--acc);
  background: var(--acc-soft);
}

/* Códigos de referencia: tabulares, para poder compararlos de un vistazo. */
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

@media (max-width: 920px) {
  .audits {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .audits {
    grid-template-columns: 1fr;
  }
}

/* El resumen de "¿lo tiene otra sucursal?": la respuesta antes que el detalle. */
.disp__sum {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0 14px;
}

.disp__k {
  flex: 1;
  min-width: 190px;
  padding: 12px 16px;
  background: var(--soft);
  border: 1px solid var(--bd);
  border-radius: 10px;
}

.disp__k b {
  display: block;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
}

.disp__k span {
  font-size: 12px;
  color: var(--mut2);
}

/* El que SÍ se puede resolver: verde, porque es la buena noticia. */
.disp__k--ok {
  background: var(--ok-bg);
  border-color: var(--ok-bd);
}

/* Un talle disponible: es un botón, y se nota que se puede apretar. */
.chip--hay {
  margin: 2px 3px 2px 0;
  color: var(--acc);
  cursor: pointer;
  background: var(--acc-soft);
  border: 1px solid transparent;
}

.chip--hay:hover {
  border-color: var(--acc);
}

/* El tag y el export del panel, juntos a la derecha de la cabecera. */
.audit__acc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/*
 * El resumen por categoría de cada auditoría.
 *
 * Una lista plana de 900 quiebres no se puede mirar: no dice por dónde empezar. Esto va
 * ARRIBA de la tabla y responde "¿dónde está el problema?" antes de que nadie lea una
 * fila.
 */
.catsum {
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--soft);
  border-radius: var(--r);
}

.catsum__t {
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--mut2);
}

.catsum__r {
  display: grid;
  gap: 10px;
  align-items: center;
  grid-template-columns: minmax(120px, 1.1fr) 2fr minmax(120px, auto);
  padding: 3px 0;
}

.catsum__n {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catsum__b {
  height: 14px;
  background: var(--bd);
  border-radius: 4px;
}

.catsum__b i {
  display: block;
  height: 100%;
  background: var(--d1);
  border-radius: 4px;
}

.catsum__v {
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}

.catsum__v small {
  display: block;
  font-size: 10.5px;
  color: var(--mut2);
}

.catsum__mas {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--mut2);
}

/* Texto solo para lectores de pantalla: nombra una columna que se ve por su contenido. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 620px) {
  .catsum__r {
    grid-template-columns: 1fr auto;
  }

  .catsum__b {
    display: none;
  }
}

/*
 * Packaging e insumos al pie de una auditoría: bolsas y cajas no son mercadería de
 * venta, así que se ven aparte y plegadas — están, pero no compiten con lo importante.
 */
.pack {
  padding: 10px 14px;
  margin-top: 14px;
  background: var(--soft);
  border-radius: var(--r);
}

.pack summary {
  font-size: 12.5px;
  color: var(--mut2);
  cursor: pointer;
}

.pack .table-wrap {
  margin-top: 10px;
}

/* La fila explicada en una frase: se lee sin cruzar encabezados. */
.frase {
  font-size: 12px;
  line-height: 1.4;
}

/* La línea de contexto: un monto solo se entiende sobre cuánto es. */
.ctx {
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: var(--mut2);
  background: var(--soft);
  border-radius: var(--r);
}

/* La barra de proporción de las filas más pesadas, dentro de la celda. */
.prop {
  display: block;
  height: 4px;
  margin-top: 4px;
  background: var(--bd);
  border-radius: 2px;
}

.prop i {
  display: block;
  height: 100%;
  background: var(--d1);
  border-radius: 2px;
}

/* El desglose por depósito, debajo de su sucursal: se lee como un sub-nivel. */
.table tr.sub td {
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 12px;
  color: var(--mut2);
  background: var(--soft);
}

.table tr.sub td:first-child {
  padding-left: 22px;
}

/* El comparador de sucursales: A en azul, B en naranja, siempre igual. */
.cmp-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--soft);
  border-radius: var(--r);
}

.dif-a {
  color: var(--acc);
}

.dif-b {
  color: var(--warn);
}

.prop i.prop--a {
  background: var(--acc);
}

.prop i.prop--b {
  background: var(--warn);
}

/* El subtítulo del detalle dentro de un panel. */
.sec--sub {
  margin-top: 18px;
  font-size: 13px;
}

/* Una lista de pendientes dentro de una tarjeta. */
.lista {
  margin: 4px 0 0 18px;
  font-size: 13px;
  line-height: 1.6;
}

.lista li + li {
  margin-top: 6px;
}