/**
 * admin.css — la ventana de administración del mostrador.
 *
 * DENSA A PROPÓSITO, Y SOLO AQUÍ. La caja usa botones de 96 px porque se toca
 * con el dedo y con prisa. Esta ventana usa filas de 26 px, etiquetas alineadas
 * y marcos con título, porque se lee y se rellena con calma, con teclado y
 * ratón. Son dos usos distintos; aplicarles la misma densidad estropea uno.
 *
 * El aspecto es deliberadamente sobrio: nada de tarjetas, sombras ni animación.
 * Un formulario de gestión se juzga por lo rápido que se rellena, y para eso lo
 * que importa es que los campos estén alineados y que el orden del tabulador
 * sea el que uno espera.
 */

.admin-ventana {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgb(2 6 23 / .55);
}

.av-caja {
  display: flex;
  flex-direction: column;
  /* Grande de entrada, y se agranda o achica arrastrando la esquina inferior
     derecha. Los topes impiden perderla fuera de la pantalla o dejarla tan
     pequeña que el índice y el contenido se pisen. */
  width: min(1280px, 100%);
  height: min(860px, 100%);
  min-width: min(640px, 100%);
  min-height: min(420px, 100%);
  max-width: 100%;
  max-height: 100%;
  resize: both;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* ------------------------------------------------------------ barra título */

.av-titulo {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .6rem;
  background: var(--bg-2);
  color: var(--text-invert);
  border-bottom: 1px solid var(--border-dark);
  font-size: .85rem;
}
.av-titulo .av-t     { font-weight: 700; }
.av-titulo .av-quien { flex: 1; color: var(--text-invert-2); font-size: .78rem; }
.av-x {
  width: 24px; height: 22px;
  border: 1px solid var(--border-dark); border-radius: 3px;
  background: transparent; color: var(--text-invert);
  font-size: .75rem; line-height: 1; cursor: pointer;
}
.av-x:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.av-x[data-maximizar]:hover { background: var(--primary); border-color: var(--primary); }

/* Maximizada: toda la pantalla, sin esquina de arrastre. Gana a un tamaño
   guardado a mano, que vive en el estilo en línea. */
.av-caja.maximizada {
  width: 100% !important;
  height: 100% !important;
  resize: none;
}
.admin-ventana:has(.av-caja.maximizada) { padding: .5rem; }

/* ------------------------------------------------------------- dos columnas */

.av-cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
}

/* El índice NO desaparece al abrir una sección: cambiar de sitio es un clic, no
   cerrar y volver a abrir. Ese era el defecto principal del menú anterior. */
.av-arbol {
  border-right: 1px solid var(--border);
  background: var(--surface);
  overflow-y: auto;
  padding: .35rem 0;
  min-width: 0;
}
.av-arbol:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.av-grupo {
  padding: .5rem .6rem .2rem;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-weight: 700;
}

.av-item {
  display: block;
  width: 100%;
  padding: .3rem .6rem .3rem 1.1rem;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: .82rem;
  line-height: 1.5;
  cursor: pointer;
}
.av-item:hover  { background: var(--border); }
.av-item.activo { background: var(--primary); color: #fff; font-weight: 600; }

.av-panel {
  overflow-y: auto;
  padding: .8rem;
  min-width: 0;
}

/* ------------------------------------------------------- marcos y campos */

/* El marco con título de toda la vida. Agrupa lo que va junto y da al ojo un
   punto de referencia sin necesidad de colores. */
.av-marco {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .6rem .8rem .8rem;
  margin: 0 0 .8rem;
  min-width: 0;
}
.av-marco > legend {
  padding: 0 .4rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
}

/* Etiqueta a la izquierda alineada a la derecha, campo a la derecha. Con la
   columna de etiquetas fija, el ojo baja en línea recta por los campos. */
.av-fila {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: center;
  gap: .5rem;
  margin-bottom: .3rem;
}
.av-lbl {
  text-align: right;
  font-size: .8rem;
  color: var(--text);
}
.av-ctl { display: flex; align-items: center; gap: .5rem; min-width: 0; }

.av-campo {
  height: 26px;
  padding: 0 .4rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: .82rem;
  min-width: 0;
  flex: 1 1 auto;
}
.av-campo.corto { flex: 0 0 auto; width: 130px; }
.av-campo:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.av-campo:disabled { background: var(--surface); color: var(--text-muted); }

select.av-campo { height: 26px; }

.av-dato  { font-size: .82rem; font-weight: 600; }
.av-ayuda { font-size: .72rem; color: var(--text-muted); }

.av-nota {
  margin: .5rem 0 0;
  font-size: .75rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.av-sub {
  margin: .8rem 0 .3rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
}

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

.av-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
}
.av-tabla th, .av-tabla td {
  padding: .22rem .45rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.av-tabla thead th {
  background: var(--surface);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-dark);
}
.av-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.av-tabla tbody tr:nth-child(even) { background: rgb(148 163 184 / .07); }
.av-tabla tfoot th {
  border-top: 1px solid var(--border-dark);
  border-bottom: 0;
  font-weight: 700;
}

/* -------------------------------------------------------------- resultados */

.av-zona { min-width: 0; }

.av-cargando, .av-vacio {
  padding: .8rem;
  font-size: .8rem;
  color: var(--text-muted);
}

.av-ok, .av-error, .av-aviso {
  padding: .45rem .6rem;
  margin: .5rem 0;
  border-radius: 3px;
  font-size: .8rem;
  border: 1px solid;
}
.av-ok    { background: #f0fdf4; border-color: #86efac; color: #14532d; }
.av-error { background: #fef2f2; border-color: #fca5a5; color: #7f1d1d; }
.av-aviso { background: #fffbeb; border-color: #fcd34d; color: #713f12; }

/* -------------------------------------------------------------- botonera */

.av-barra {
  display: flex;
  gap: .4rem;
  margin-top: .6rem;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
}

.av-pie {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .6rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.av-hueco { flex: 1 1 auto; }

.av-btn {
  min-height: 26px;
  padding: .2rem .7rem;
  border: 1px solid var(--border-dark);
  border-radius: 3px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
}
.av-btn:hover:not(:disabled) { background: var(--border); }
.av-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.av-btn:disabled { opacity: .45; cursor: default; }
.av-btn.principal { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.av-btn.principal:hover:not(:disabled) { background: var(--primary-dark); }
.av-btn.peligro { border-color: var(--danger); color: var(--danger); }
.av-btn.peligro:hover { background: var(--danger); color: #fff; }

/* ============================== IMPRESIÓN ================================= */
/*
 * `impresion.css` esconde `.modal-backdrop` al imprimir, y con razón: un
 * diálogo impreso sale como una caja gris a media página. Pero esta ventana NO
 * es un diálogo pasajero, es el documento que se quiere en papel — así que
 * tiene su propia clase y sus propias reglas.
 *
 * `body.con-admin` la pone la ventana al abrirse: sirve para tapar la caja que
 * hay detrás, que si no saldría impresa debajo del informe.
 */
@media print {
  body.con-admin #root,
  body.con-admin #modal-root,
  body.con-admin #toast-root { display: none !important; }

  .admin-ventana {
    position: static !important;
    display: block !important;
    padding: 0;
    background: #fff;
  }

  .av-caja, .av-caja.maximizada {
    /* !important: un tamaño arrastrado a mano vive en el estilo en línea, y en
       el papel no pinta nada. */
    width: auto !important; height: auto !important;
    min-width: 0; min-height: 0; max-width: none; max-height: none;
    resize: none;
    border: 0; box-shadow: none; border-radius: 0;
    display: block;
    overflow: visible;
  }

  /* Fuera del papel todo lo que solo sirve para navegar o teclear. Un botón
     «Consultar» impreso es ruido que además confunde a quien lea la hoja. */
  .av-titulo, .av-arbol, .av-pie, .av-barra,
  .admin-ventana .no-imprimir { display: none !important; }

  .av-cuerpo { display: block; }
  .av-panel  { overflow: visible; padding: 0; }

  /* Los filtros SÍ se imprimen —qué fechas y qué sucursal se consultaron es
     parte del informe—, pero sin marco ni fondo, como una línea de texto. */
  .av-marco {
    border: 0;
    padding: 0;
    margin: 0 0 6mm;
    break-inside: avoid;
  }
  .av-marco > legend {
    font-size: 10pt;
    color: #000;
    padding: 0;
    margin-bottom: 1.5mm;
    border-bottom: 1px solid #000;
    width: 100%;
  }

  .av-fila { grid-template-columns: 42mm minmax(0, 1fr); margin-bottom: .5mm; }
  .av-lbl, .av-dato, .av-nota, .av-ayuda { font-size: 9pt; color: #000; }
  .av-campo {
    border: 0;
    height: auto;
    padding: 0;
    font-size: 9pt;
    background: transparent;
    /* Un desplegable impreso con su flecha parece que se puede tocar. */
    appearance: none;
    -webkit-appearance: none;
  }

  .av-tabla { font-size: 9pt; }
  .av-tabla thead { display: table-header-group; }   /* se repite en cada hoja */
  .av-tabla tr { break-inside: avoid; }
  .av-tabla tbody tr:nth-child(even) { background: transparent; }
  .av-tabla th, .av-tabla td { border-bottom: 1px solid #999; }

  .av-ok, .av-error, .av-aviso {
    border: 1px solid #999;
    background: transparent !important;
    color: #000;
  }
}

/* --------------------------------------------- rejilla maestro-detalle */

/* Filas que se pueden tocar para bajar el artículo a la ficha. El cursor y el
   realce al pasar por encima son lo único que lo anuncia: sin ellos nadie
   descubre que la tabla es interactiva. */
.av-clicable tbody tr { cursor: pointer; }
.av-clicable tbody tr:hover { background: rgb(37 99 235 / .10); }
.av-clicable tbody tr.sel,
.av-clicable tbody tr.sel:hover {
  background: rgb(37 99 235 / .18);
  box-shadow: inset 3px 0 0 var(--primary);
}

/* Datos secundarios dentro de una celda: la marca junto al nombre, el origen.
   Se distinguen por tono y no por otra columna, que haría la tabla más ancha. */
.av-tenue { color: var(--text-muted); font-size: .74rem; }

.av-panel .mono {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .76rem;
}

@media print {
  /* En papel no hay nada que tocar: fuera el cursor y el realce de selección,
     que además gastaría tinta en una banda azul sin significado. */
  .av-clicable tbody tr,
  .av-clicable tbody tr:hover,
  .av-clicable tbody tr.sel {
    cursor: auto;
    background: transparent !important;
    box-shadow: none !important;
  }
  .av-tenue { color: #333; }
}

/* ------------------------------------------------ muestra de color */

/* El color de una tarjeta, visible sin abrirla. En la lista es un cuadradito
   junto a la etiqueta; junto al desplegable es más grande, porque ahí es lo que
   confirma la elección: hay navegadores que no pintan el fondo de las opciones
   de un <select>, y sin la muestra habría que adivinar qué se está eligiendo. */
.av-muestra {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 3px;
  border: 1px solid rgb(15 23 42 / .25);
  vertical-align: middle;
}
.av-muestra.grande { width: 26px; height: 22px; flex: 0 0 auto; }

@media print {
  /* En blanco y negro un cuadrado de color solo es un cuadrado gris que gasta
     tinta y no distingue nada. El nombre del color va en la columna de al lado. */
  .av-muestra { display: none; }
}

/* ------------------------------------------------------------- fotos */

/* Miniaturas en fila. Se guardan a 512 px, así que a 64 px se ven nítidas y
   caben las tres sin empujar el resto de la ficha hacia abajo. */
.av-fotos {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  min-height: 34px;
}

.av-foto {
  position: relative;
  margin: 0;
  width: 64px; height: 64px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface);
}
.av-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* La cruz de quitar vive DENTRO de la miniatura y solo aparece al pasar por
   encima: siempre visible, tres cruces rojas competirían por la atención con
   los campos del formulario, que es donde hay que mirar. */
.av-foto-x {
  position: absolute;
  top: 2px; right: 2px;
  width: 18px; height: 18px;
  border: 0; border-radius: 3px;
  background: rgb(15 23 42 / .55);
  color: #fff;
  font-size: .65rem; line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s;
}
.av-foto:hover .av-foto-x,
.av-foto-x:focus-visible { opacity: 1; }
.av-foto-x:hover { background: var(--danger); }

/* El hueco para añadir desaparece solo al llegar a tres: así el límite se ve
   en vez de anunciarse con un error después de elegir el archivo. */
.av-foto-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border: 2px dashed var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 1.3rem;
  cursor: pointer;
}
.av-foto-add:hover { border-color: var(--primary); color: var(--primary); }

@media print {
  /* En el papel la foto se queda: es lo que hace reconocible un artículo
     cuando el nombre no basta. Lo que sobra es el botón de quitarla y el hueco
     de añadir, que ahí no hacen nada. */
  .av-foto-x, .av-foto-add { display: none !important; }
  .av-foto { border: 1px solid #999; }
}

/* ------------------------------- cuadre en vivo -------------------------- */
/* Lo primero de la pantalla y en grande: es la pregunta que se hace todo el
   día —cuánto debería haber en el cajón— y hasta ahora había que cerrar la
   caja para responderla. */

.av-cuadre {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  padding: .7rem .9rem;
  margin-bottom: .7rem;
  border: 1px solid var(--primary);
  border-left-width: 4px;
  border-radius: 4px;
  background: #eff6ff;
}

.av-cuadre-cifra {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* -------------------------- filtros en una sola fila --------------------- */
/* Dos filtros ocupaban dos líneas y un recuadro. La pantalla es ancha y el
   sitio hace falta abajo, donde está lo que se mira de verdad. */

.av-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.1rem;
  padding: .5rem .1rem .6rem;
}

.av-filtro {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
}
.av-filtro > span {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.av-filtro .av-campo { width: auto; min-width: 8rem; }

/* ------------------------- casillas de «qué quiero ver» ------------------ */
/* Cuatro bloques plegados uno debajo de otro eran cuatro líneas ocupadas para
   decir que hay cuatro cosas que no se están mirando. En una fila se ve todo lo
   disponible de un vistazo y se enciende justo lo que se quiere. */

.av-casillas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  padding: 0 .1rem .7rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .7rem;
}

.av-casillas-lbl {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-right: .3rem;
}

.av-casilla {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: .78rem;
  cursor: pointer;
  color: var(--text-muted);
}
.av-casilla:hover { border-color: var(--primary); color: var(--primary); }

.av-casilla[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}

/* Hueco fijo: sin él, la fila entera se mueve al marcar una casilla. */
.av-tic { display: inline-block; width: .7em; text-align: center; }

/* ------------------------- rejilla de desgloses -------------------------- */
/* Se llena sola: con uno encendido ocupa una columna, con cuatro se reparten.
   Apilados, cada uno se llevaba una franja entera para enseñar cuatro cifras. */

.av-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .6rem;
  margin-bottom: .9rem;
}

.av-tarjeta {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .5rem .6rem;
  background: var(--surface-2);
  min-width: 0;
}
.av-tarjeta > h4 {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin: 0 0 .35rem;
}

/* En el papel se imprimen todos los que estén encendidos, a dos columnas. */
@media print {
  .av-casillas { display: none; }
  .av-rejilla { grid-template-columns: 1fr 1fr; }
}

.av-cuadre-txt { flex: 1; min-width: 12rem; }

/* Las cifras del día al otro extremo del mismo recuadro: son la respuesta a la
   otra pregunta que se hace mirando esto —cuánto se vendió— y merecían sitio,
   no un bloque aparte. */
.av-cuadre-lado {
  text-align: right;
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.5;
  white-space: nowrap;
}

/* ------------------------------ el neto del día -------------------------- */
/* Arriba a la derecha, en la misma fila que las casillas: es la cifra que se
   busca al abrir esta pantalla, y estaba al final de todo. */

.av-neto {
  margin-left: auto;
  text-align: right;
  line-height: 1.1;
  padding-left: 1rem;
}

.av-neto-lbl {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}

.av-neto-cifra {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--success);
  font-variant-numeric: tabular-nums;
}

/* Gastar más de lo que entró tiene que verse distinto, no solo con un signo. */
.av-neto-cifra.malo,
.av-neto-total.malo { color: var(--danger); }

/* ---------------------------- la resta, al pie --------------------------- */
/* Escrita entera: un número suelto obliga a recordar de dónde salía. */

.av-neto-pie {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .5rem .8rem;
  padding: .6rem .8rem;
  margin-top: .5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-2);
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
}

.av-neto-op { color: var(--text-muted); }

.av-neto-total {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--success);
}

/* ---------------------------- cierres anteriores ------------------------- */

/* La acción arriba, en una franja: antes esta pantalla gastaba una ventana
   entera para decir «no hay turno abierto». */
.av-cierre-accion {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .55rem .7rem;
  margin-bottom: .8rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-2);
  font-size: .85rem;
}

/* Cuadrar es la respuesta buena y merece verse; sobrar y faltar no son lo
   mismo y no pueden leerse igual. */
.av-dif { font-weight: 700; font-variant-numeric: tabular-nums; }
.av-dif.ok    { color: var(--success); font-weight: 600; }
.av-dif.mas   { color: var(--warning); }
.av-dif.menos { color: var(--danger); }

/* El detalle se abre bajo su propia fila, no en otra pantalla: así se sigue
   viendo contra qué se compara. */
.av-detalle > td {
  background: var(--surface);
  padding: .8rem;
  border-left: 3px solid var(--primary);
}

.av-tabla tr.sel > td { background: #eff6ff; font-weight: 600; }

/* ------------------------ imprimir un solo cierre ------------------------ */
/* La hoja de un cierre se archiva o se entrega. Sacar además la barra de
   acción, el aviso de descuadres y la tabla de los otros treinta cierres no era
   solo feo: hacía dudar de cuál era la hoja buena. */

.av-impresion { display: none; }

.av-hoja-titulo { font-size: 1rem; margin: 0 0 .2rem; }
.av-hoja-sub { font-size: .85rem; color: var(--text-muted); margin: 0 0 .8rem; }

/* Dos líneas para firmar. Un cierre con diferencia se entrega en mano, y una
   hoja sin firma no prueba que se entregara. */
.av-firmas {
  display: flex;
  gap: 3rem;
  margin-top: 14mm;
  font-size: 9pt;
}
.av-firmas > div { flex: 1; }
.av-firmas span {
  display: block;
  border-top: 1px solid #000;
  margin-bottom: 1.5mm;
}

@media print {
  /* Modo «una sola fila»: fuera la lista y la acción, dentro la copia. */
  .admin-ventana.av-solo-fila #av-resultado,
  .admin-ventana.av-solo-fila .av-cierre-accion,
  .admin-ventana.av-solo-fila .av-sub { display: none !important; }

  .admin-ventana.av-solo-fila .av-impresion { display: block !important; }

  /* Las tres tarjetas del detalle, a lo ancho del papel y sin partirse. */
  .av-impresion .av-rejilla { grid-template-columns: 1fr 1fr 1fr; gap: 4mm; }
  .av-impresion .av-tarjeta { border: 1px solid #000; break-inside: avoid; }
  .av-impresion .av-detalle > td { border-left: 0; padding: 0; }
}

/* ------------------------------ existencias ------------------------------ */

/*
 * Cuántas hay es de lo primero que se mira en un catálogo. Antes el número iba
 * pegado al nombre de la sucursal —«Matriz Colinas del Norte 11»— y por eso no
 * se veía: un número al final de un nombre largo se lee como parte del nombre.
 *
 * Cuatro estados y cada uno pide algo distinto, así que se distinguen sin leer.
 */
.stock-hay  { font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* Cero no es una alarma: es una respuesta. Gris y sin ruido. */
.stock-cero { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Bajo mínimo es lo único de esta pantalla que pide una acción hoy. */
.stock-bajo {
  font-size: 1.05rem;
  color: #b45309;
  font-variant-numeric: tabular-nums;
}

/* Negativo NO es una existencia: es un error de registro. Se vendió algo que
   el sistema creía no tener, y eso hay que ir a mirarlo. */
.stock-mal {
  font-size: 1.05rem;
  color: var(--danger);
  font-variant-numeric: tabular-nums;
}

/* ------------------------- la ayuda que se despliega ---------------------- */

/*
 * Plegada por omisión y sin colores de alarma: es una explicación, no un aviso.
 * Quien ya sabe cuadrar una caja no necesita leerla cada día, y un texto largo
 * siempre visible se vuelve decorado — arrastrando con él al aviso de al lado
 * que sí importa.
 */
.av-ayuda-plegable {
  margin-top: 1.1rem;
  border-top: 1px solid var(--border);
  padding-top: .7rem;
}

.av-ayuda-plegable > summary {
  cursor: pointer;
  font-size: .82rem;
  color: var(--text-muted);
  list-style: none;
  user-select: none;
  padding: .25rem 0;
}
.av-ayuda-plegable > summary::-webkit-details-marker { display: none; }

/* El triángulo se dibuja aquí para que gire al abrir: el del navegador no se
   puede animar y en algunos ni siquiera se ve. */
.av-ayuda-plegable > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: .45rem;
  transition: transform .15s ease;
}
.av-ayuda-plegable[open] > summary::before { transform: rotate(90deg); }

.av-ayuda-plegable > summary:hover { color: var(--text); }

.av-ayuda-plegable > div {
  font-size: .85rem;
  line-height: 1.6;
  color: var(--text-muted);
  padding: .3rem 0 .2rem 1.1rem;
  max-width: 46rem;
}

.av-ayuda-plegable p { margin: 0 0 .7rem; }
.av-ayuda-plegable b { color: var(--text); }

/* La fórmula, apartada del texto: es lo que alguien va a volver a mirar. */
.av-formula {
  font-family: ui-monospace, Menlo, monospace;
  background: var(--bg-2, rgba(0, 0, 0, .04));
  border-radius: var(--radius);
  padding: .55rem .8rem;
  font-size: .84rem;
  color: var(--text);
}

.av-ayuda-fin {
  border-left: 3px solid var(--border-dark, var(--border));
  padding-left: .7rem;
  margin-bottom: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .av-ayuda-plegable > summary::before { transition: none; }
}

/* ------------------------- renglones de una factura ---------------------- */

/*
 * El detalle adicional y el código van DEBAJO de la descripción, no en columnas
 * propias. Es donde el proveedor pone el color o el tamaño, así que pertenecen
 * al nombre del artículo — y en una tabla que ya tiene seis columnas, dos más
 * se leen peor que un renglón de dos líneas.
 */
.fc-detalle {
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.3;
}

/* El código del proveedor: lo que hace que la próxima factura suya no cueste
   nada. Se enseña porque es lo que explica por qué un renglón se emparejó solo. */
.fc-codigo {
  font-size: .72rem;
  color: var(--text-muted);
  opacity: .8;
  line-height: 1.3;
}

/*
 * La casilla de «preguntar el valor», dentro de la ficha de una tarjeta.
 *
 * La etiqueta envuelve a la casilla para que se pueda tocar el texto y no solo
 * el cuadradito: en una ventana que se abre sobre el mostrador, apuntar a doce
 * píxeles con prisa falla más veces de las que parece.
 */
.av-check {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  cursor: pointer;
  user-select: none;
}
.av-check input { width: 1.05rem; height: 1.05rem; cursor: pointer; }