/* La identidad del panel.
 *
 * Lo que sigue vigente del comentario anterior ("feo a proposito"): NO se pule lo que
 * todavia no uso nadie ocho horas seguidas. Densidad de la lista, tamaños de los botones y
 * atajos de teclado se ajustan cuando haya un vendedor real quejandose, no antes.
 *
 * Lo que si se define ahora es la IDENTIDAD, que no depende de datos de uso: paleta,
 * tipografia y jerarquia. Dos decisiones deliberadas de no parecerse a lo de al lado:
 *
 *   - El cromado va OSCURO. Los competidores (ManyChat y compañia) son SaaS celeste sobre
 *     blanco; una barra de tinta con acento calido se reconoce de lejos y no se confunde.
 *   - La burbuja del bot NO es verde. El verde de salida es de WhatsApp Web, y copiarlo
 *     hace que el panel parezca un WhatsApp trucho en vez de una herramienta propia.
 *
 * Modo claro unico, a proposito y no por olvido: es una herramienta de trabajo diurno, y un
 * modo oscuro que sirva se elige color por color (no se invierte), que es trabajo real para
 * un beneficio que nadie pidio todavia. Por eso `color-scheme: light` explicito: sin eso,
 * el navegador de alguien con el sistema en oscuro pinta los `select` e `input` en negro
 * sobre nuestras superficies claras.
 */

:root {
  color-scheme: light;

  /* Cromado */
  --tinta: #16191f;
  --tinta-2: #232832;
  --tinta-3: #333a47;

  /* Acento de marca. Es tambien la serie 2 de los graficos: la paleta del tablero sale de
     la marca en vez de ser un set aparte. Validada contra ceguera al color junto con
     `--serie-1` (ΔE 26.0 protan / 26.3 tritan, sobre un objetivo de 8). */
  --acento: #c2691f;
  --acento-fuerte: #a2540f;
  --acento-tenue: #fdf1e7;

  /* Series de datos */
  --serie-1: #2a78d6;
  --serie-2: #c2691f;

  /* Superficies */
  --papel: #ffffff;
  --fondo: #f4f5f7;
  --borde: #e3e5ea;
  --borde-fuerte: #cfd3db;

  /* Texto */
  --texto: #16191f;
  --tenue: #5c6270;
  --mudo: #8b91a0;

  /* Burbujas del hilo */
  --nuestro: #eef3fb;
  --nuestro-borde: #d3e0f3;
  --humano: #fdf1e7;
  --humano-borde: #f2ddc9;

  /* Estados. Reservados: nunca se usan como color de serie. */
  --alerta: #b42318;
  --bien: #067647;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font:
    15px/1.45 system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  color: var(--texto);
  background: var(--fondo);
  /* Los numeros del tablero y las horas de la lista se leen en columna: sin esto, un 1 y
     un 8 tienen anchos distintos y las cifras bailan al refrescar. */
  font-variant-numeric: tabular-nums;
}

.oculto {
  display: none !important;
}

.tenue {
  color: var(--tenue);
  font-size: 13px;
}

.error {
  color: var(--alerta);
  margin: 6px 0 0;
  min-height: 1.2em;
  font-size: 13px;
}

button {
  font: inherit;
  padding: 6px 12px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 7px;
  background: var(--papel);
  color: var(--texto);
  cursor: pointer;
}

button:hover:not(:disabled) {
  border-color: var(--mudo);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* La accion principal de cada formulario. */
button[type="submit"] {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
  font-weight: 500;
}

button[type="submit"]:hover:not(:disabled) {
  background: var(--acento-fuerte);
  border-color: var(--acento-fuerte);
}

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* --- Login --------------------------------------------------------------- */

.login {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: var(--tinta);
}

.tarjeta {
  display: grid;
  gap: 12px;
  width: min(340px, 90vw);
  padding: 28px;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 12px;
}

.tarjeta h1 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.tarjeta label {
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--tenue);
}

input,
textarea,
select {
  font: inherit;
  padding: 8px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 7px;
  background: var(--papel);
  color: var(--texto);
  width: 100%;
}

/* --- Panel --------------------------------------------------------------- */

.panel {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
}

.barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  min-height: 52px;
  background: var(--tinta);
  color: #fff;
}

.marca {
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-right: 4px;
}

/* El punto de acento al lado del nombre: la marca mas barata que existe y la que hace que
   la pestaña se reconozca entre veinte. */
.marca::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--acento);
  vertical-align: baseline;
}

.barra .separador {
  flex: 1;
}

.barra .tenue {
  color: #9aa1b0;
}

.barra button {
  background: transparent;
  border-color: var(--tinta-3);
  color: #d5d9e0;
}

.barra button:hover:not(:disabled) {
  background: var(--tinta-2);
  border-color: var(--tinta-3);
  color: #fff;
}

.barra select {
  width: auto;
  background: var(--tinta-2);
  border-color: var(--tinta-3);
  color: #d5d9e0;
  padding: 5px 8px;
}

/* Las solapas. Van en la barra oscura y la activa se marca con el acento abajo: es la
   navegacion, no un boton mas. */
.solapas {
  display: flex;
  gap: 2px;
}

.solapa {
  padding: 6px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #9aa1b0;
}

.solapa:hover:not(.activa) {
  background: var(--tinta-2);
  color: #fff;
  border-color: transparent;
}

.solapa.activa {
  background: var(--tinta-2);
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--acento);
}

.columnas {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  min-height: 0;
}

.lista {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  background: var(--papel);
  border-right: 1px solid var(--borde);
}

.lista li {
  padding: 10px 14px;
  border-bottom: 1px solid var(--borde);
  cursor: pointer;
  /* La franja de la activa se reserva siempre para que elegir no corra el texto. */
  border-left: 3px solid transparent;
}

.lista li:hover {
  background: var(--fondo);
}

.lista li.activa {
  background: var(--acento-tenue);
  border-left-color: var(--acento);
}

.lista .fila {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

/* La excepcion: alguien del equipo la esta atendiendo. Se marca con el ambar del hilo, el
   mismo color que la burbuja de un humano, para que las dos pantallas digan lo mismo. */
.lista .derivada {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 7px;
  border-radius: 9px;
  background: var(--humano);
  border: 1px solid var(--humano-borde);
  font-size: 12px;
  color: #7a4a12;
}

.vacio {
  display: grid;
  place-items: center;
  color: var(--tenue);
}

/* --- Hilo ---------------------------------------------------------------- */

.hilo {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-height: 0;
}

.cabecera-hilo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px;
  background: var(--papel);
  border-bottom: 1px solid var(--borde);
}

.etiqueta {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--fondo);
  font-size: 12px;
  color: var(--tenue);
}

.mensajes,
.traza {
  margin: 0;
  padding: 16px;
  list-style: none;
  overflow-y: auto;
  min-height: 0;
}

/* La columna del hilo se centra y se topea. En una pantalla ancha, con las burbujas
   pegadas a cada borde, entre una pregunta y su respuesta quedan 600 px de nada y hay que
   barrer la cabeza de lado a lado para seguir la charla. El `max()` deja el padding minimo
   de 16 px cuando la ventana es angosta, asi que no hace falta un media query. */
.mensajes {
  padding-inline: max(16px, calc((100% - 900px) / 2));
}

.mensajes li {
  /* `fit-content` es lo que hace que la burbuja ABRACE el texto. Un `li` es un bloque:
     sin esto se estira hasta el `max-width` y "ok gracias" ocupa media pantalla.
     El tope en ch y no solo en % es el ancho de lectura — una linea de 100 caracteres
     obliga a barrer la cabeza de lado a lado para seguir el renglon. */
  width: fit-content;
  max-width: min(70%, 62ch);
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--papel);
  border: 1px solid var(--borde);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* La esquina cortada del lado de quien habla: da el sentido de la conversacion sin
   depender del color, que es lo unico que ve alguien que imprime esto en blanco y negro. */
.mensajes li.entrante {
  border-bottom-left-radius: 4px;
}

.mensajes li.saliente {
  margin-left: auto;
  background: var(--nuestro);
  border-color: var(--nuestro-borde);
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 12px;
}

/* Que se distinga de un vistazo quien escribio: es la pregunta que se hace el vendedor
   que abre una conversacion que venia atendiendo otro. */
.mensajes li.saliente.humano {
  background: var(--humano);
  border-color: var(--humano-borde);
}

.mensajes .quien {
  display: block;
  font-size: 11px;
  color: var(--tenue);
  margin-bottom: 2px;
}

.traza li {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--borde);
  overflow-wrap: anywhere;
}

.responder {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px 16px;
  background: var(--papel);
  border-top: 1px solid var(--borde);
}

/* Alineado abajo y del alto que le corresponde. Estirado a los dos renglones del textarea
   queda un bloque naranja de 60 px que pesa mas que el mensaje que se esta escribiendo. */
.responder button {
  align-self: end;
}

.responder .error {
  grid-column: 1 / -1;
}

/* En una clase y no en un `style=` del HTML: la CSP prohibe el script inline, y no tener
   estilos sueltos es lo que permitiria endurecer tambien `style-src` el dia de mañana. */
.ancho-completo {
  grid-column: 1 / -1;
}

.parametros {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
}

.parametros label {
  display: grid;
  grid-template-columns: 3em 1fr;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--tenue);
}

#vista-previa {
  grid-column: 1 / -1;
  margin: 0;
  padding: 8px;
  background: var(--fondo);
  border-radius: 6px;
  white-space: pre-wrap;
}

/* --- Etiquetas ------------------------------------------------------------ */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

/* El color lo pone `panel.js` desde la fila, asi que el texto tiene que leerse sobre
   cualquiera de los 16M posibles. El truco barato y suficiente: sombra oscura detras de
   texto blanco, que sobrevive tanto a un amarillo como a un azul marino. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / 55%);
  white-space: nowrap;
}

.quitar-chip {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
}

.quitar-chip:hover {
  opacity: 1;
}

.chips-hilo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--papel);
  border-bottom: 1px solid var(--borde);
}

.chips-hilo .chips {
  margin-top: 0;
}

.chips-hilo select {
  width: auto;
  font-size: 13px;
  padding: 2px 8px;
  border: 1px dashed var(--borde-fuerte);
  border-radius: 10px;
  background: none;
  color: var(--tenue);
}

/* El ABM del vocabulario, encima de todo. */
.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgb(22 25 31 / 55%);
  z-index: 10;
}

.modal .tarjeta {
  width: min(520px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
}

.modal h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.alta-etiqueta {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
}

.alta-etiqueta input[type="color"] {
  width: 44px;
  padding: 2px;
}

.lista-etiquetas {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.lista-etiquetas li {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}

.lista-etiquetas input[type="color"] {
  padding: 2px;
}

.modal h3 {
  margin: 8px 0 0;
  font-size: 15px;
}

.envio {
  display: grid;
  gap: 8px;
}

#envio-previa:not(:empty) {
  margin: 0;
  padding: 8px;
  background: var(--fondo);
  border-radius: 6px;
  white-space: pre-wrap;
}

/* --- Tablero -------------------------------------------------------------- */

.tablero {
  overflow-y: auto;
  padding: 20px;
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
}

/* Sin esto el tablero se sale de la pantalla por la derecha. Un item de grid arranca en
   `min-width: auto` —"no me achico por debajo de mi contenido"—, asi que la grilla de
   fichas se dimensionaba por el texto mas largo que tuviera adentro (el pie de la ficha
   principal) en vez de repartirse el ancho disponible: 2127 px dentro de una ventana de
   1422. Va en los HIJOS y no solo en `.tablero`: cada nivel de grid anidado lo necesita. */
.tablero > * {
  min-width: 0;
}

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

.ficha {
  padding: 14px 16px;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 12px;
}

.ficha .rotulo {
  display: block;
  font-size: 12px;
  color: var(--tenue);
  margin-bottom: 4px;
}

.ficha .numero {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.ficha .pie {
  display: block;
  font-size: 12px;
  color: var(--mudo);
  margin-top: 2px;
}

/* El numero que justifica el abono. Se le da el tamaño que tiene su importancia: es la
   respuesta a "para que pago esto". */
.ficha.principal {
  background: var(--tinta);
  border-color: var(--tinta);
  color: #fff;
  grid-column: span 2;
}

.ficha.principal .rotulo {
  color: #9aa1b0;
}

.ficha.principal .numero {
  font-size: 42px;
  color: var(--acento);
}

.ficha.principal .pie {
  color: #9aa1b0;
}

.panel-grafico {
  padding: 16px;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 12px;
}

.panel-grafico h2 {
  margin: 0 0 2px;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.panel-grafico .subtitulo {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--tenue);
}

/* Leyenda: con dos series la identidad no puede depender solo del color. */
.leyenda {
  display: flex;
  gap: 14px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--tenue);
}

.leyenda span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.leyenda i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.leyenda i.serie-1 {
  background: var(--serie-1);
}

.leyenda i.serie-2 {
  background: var(--serie-2);
}

/* El grafico de barras por dia. Se dibuja con grid y divs y no con una libreria: son
   treinta barras y sumar una dependencia de 90 kB para esto no se paga. */
/* La linea punteada del tope, con su valor a la izquierda. Es la unica referencia de
   escala del grafico: sin ella una barra alta no se puede leer como una cantidad. */
.marco-grafico {
  position: relative;
  padding-left: 26px;
  border-top: 1px dashed var(--borde-fuerte);
}

.marco-grafico .tope {
  position: absolute;
  top: -8px;
  left: 0;
  font-size: 11px;
  color: var(--mudo);
  background: var(--papel);
  padding-right: 4px;
}

.barras {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 140px;
  border-bottom: 1px solid var(--borde-fuerte);
}

.barras .dia {
  /* `flex: 1 1 0` con `min-width: 0`: los treinta dias se reparten el ancho por igual.
     Sin el `min-width` cada columna se planta en su tamaño de contenido y el grafico se
     sale por la derecha, que es el mismo `min-width: auto` de los items de grid. */
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* 2px entre las dos barras del mismo dia: el separador que las despega sin una linea. */
  gap: 2px;
  height: 100%;
  position: relative;
}

.barras .barra {
  width: 45%;
  min-height: 2px;
  /* Punta redondeada arriba y anclada a la base: la barra "sale" del eje. */
  border-radius: 4px 4px 0 0;
  background: var(--serie-1);
}

.barras .barra.derivadas {
  background: var(--serie-2);
}

.barras .dia:hover::after {
  content: attr(data-detalle);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--tinta);
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}

.eje {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: var(--mudo);
}

/* Las listas de magnitud: motivos de derivacion y segmentos. Barra horizontal porque las
   etiquetas son texto largo y en vertical no entran. */
.ranking {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.ranking li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  font-size: 13px;
}

.ranking .via {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 3px;
  background: var(--fondo);
  overflow: hidden;
}

.ranking .relleno {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--serie-2);
}

.ranking .conteo {
  color: var(--tenue);
  font-size: 12px;
}

.dos-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

/* --- Plantillas ----------------------------------------------------------- */

.titulo-con-accion {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.formulario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  align-items: start;
}

.formulario label {
  display: grid;
  gap: 4px;
  font-size: 13px;
}

.formulario label > span {
  font-weight: 500;
}

.formulario small {
  font-size: 12px;
  line-height: 1.35;
}

.formulario code {
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--fondo);
  font-size: 12px;
}

.formulario button[type="submit"] {
  justify-self: start;
}

.rotulo-previa {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}

/* La vista previa con forma de burbuja. Ver el mensaje como lo va a ver el cliente es lo
   que evita mandar a revision una plantilla con un `{{2}}` sin reemplazar: una rechazada
   queda en el historial de la WABA del cliente. */
.previa-whatsapp {
  max-width: 62ch;
  padding: 10px 12px;
  border-radius: 12px;
  border-bottom-left-radius: 4px;
  background: var(--nuestro);
  border: 1px solid var(--nuestro-borde);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.previa-whatsapp.vacia {
  background: var(--fondo);
  border-style: dashed;
  color: var(--mudo);
}

.previa-whatsapp p {
  margin: 0;
}

.previa-whatsapp p + p {
  margin-top: 6px;
}

/* El encabezado y el pie de una plantilla de WhatsApp no se leen como el cuerpo. */
.previa-whatsapp p:first-child:not(:only-child) {
  font-weight: 600;
}

.previa-whatsapp p:last-child:not(:only-child) {
  font-size: 12px;
  color: var(--tenue);
}

.lista-plantillas {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.lista-plantillas li {
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  display: grid;
  gap: 6px;
}

.cuerpo-plantilla {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.acciones {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

/* El estado de la plantilla. Los colores de estado estan RESERVADOS: nunca se usan como
   color de serie en un grafico. Y no van solos — cada uno lleva su texto, porque un
   semaforo sin palabras no lo entiende nadie que no sepa el codigo de colores. */
.insignia {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
}

.insignia.neutro {
  background: var(--fondo);
  color: var(--tenue);
}

.insignia.espera {
  background: #fef3e2;
  color: #92400e;
}

.insignia.bien {
  background: #e7f6ee;
  color: var(--bien);
}

.insignia.mal {
  background: #fdeceb;
  color: var(--alerta);
}

/* Los ejemplos de cada variable. Columna propia y no la de `.parametros`, que esta pensada
   para un rotulo de tres caracteres (`{{1}}`): "Ejemplo de {{1}}" ahi se parte en tres
   renglones y la fila queda de 60 px de alto. */
.ejemplos {
  display: grid;
  gap: 6px;
}

.ejemplos label {
  display: grid;
  grid-template-columns: 10em 1fr;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--tenue);
}

/* --- Pedidos -------------------------------------------------------------- */

.lista-pedidos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.lista-pedidos > li {
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  display: grid;
  gap: 6px;
}

.items-pedido {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--tenue);
}

.total-pedido {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

#filtro-pedidos {
  width: auto;
}

/* El aviso de un cambio de estado no siempre es un error: cuando el mensaje al cliente SI
   salio, se lee como confirmacion. Hereda de `.error` el tamaño y el hueco reservado, pero
   no el rojo — que un "listo" salga en rojo entrena a ignorar el rojo. */
#pedidos-aviso {
  color: var(--tenue);
}

/* --- Catalogo ------------------------------------------------------------- */

.lista-catalogo {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

/* Fila compacta a proposito: esta pantalla se usa para pasar treinta precios de una lista
   de papel, y cada fila que ocupa 60 px es una fila menos que entra sin scrollear. */
.lista-catalogo > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9.5em 7em auto;
  align-items: end;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--borde);
  border-radius: 10px;
}

/* `min-width: 0` porque un item de grid NO se achica por debajo de su contenido: sin esto
   un nombre largo empuja la fila y la pantalla scrollea de costado. Es exactamente el bug
   que tenia el tablero, y solo se ve renderizando. */
.que-es {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.que-es strong,
.que-es span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campo {
  display: grid;
  gap: 2px;
  font-size: 12px;
}

.campo input {
  width: 100%;
  font-variant-numeric: tabular-nums;
}

/* El destello al guardar. Es la UNICA señal de que el cambio llego al servidor: sin boton
   de guardar por fila, el campo tiene que avisar solo. */
.campo input.guardado {
  border-color: var(--bien);
  background: #e7f6ee;
}

.lista-catalogo > li.de-baja {
  background: var(--fondo);
}

.lista-catalogo > li.de-baja .que-es strong {
  color: var(--tenue);
  text-decoration: line-through;
}

#buscar-catalogo {
  width: auto;
  min-width: 16em;
}

/* Pegar una planilla es pegar columnas. La monoespaciada deja ver de una si se pego con
   tabs o si una fila quedo corrida, que es justo lo que hay que mirar antes de importar. */
.planilla {
  width: 100%;
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: 12px;
  white-space: pre;
  overflow-x: auto;
}

/* Mismo caso que `#pedidos-aviso`: "3 listos para cargar" no es un error. Hereda el hueco
   reservado de `.error` pero no el rojo — el rojo es de las filas que quedaron afuera, que
   estan justo abajo, y dos rojos seguidos hacen que no se lea ninguno. */
#planilla-aviso {
  color: var(--tenue);
}

.errores-planilla {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--alerta);
}

/* La previa scrollea DENTRO de su caja: doscientas filas no pueden hacer que scrollee la
   pagina entera. */
.previa-planilla {
  max-height: 320px;
  overflow: auto;
  margin-top: 8px;
}

.previa-planilla table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.previa-planilla th,
.previa-planilla td {
  text-align: left;
  padding: 5px 8px;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}

.previa-planilla th {
  position: sticky;
  top: 0;
  background: var(--papel);
  color: var(--tenue);
  font-weight: 600;
}

/* El precio alineado a la derecha y con cifras de ancho fijo. No es estetica: es la columna
   que hay que revisar, y en una lista alineada un "$ 18" entre "$ 18.000" salta a la vista.
   Ese es el error que la previa existe para atajar. */
.previa-planilla td:nth-child(3) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Angosto: el precio y el stock bajan a su propio renglon en vez de comerse el nombre. */
@media (max-width: 760px) {
  .lista-catalogo > li {
    grid-template-columns: minmax(0, 1fr) 1fr;
  }

  .que-es {
    grid-column: 1 / -1;
  }
}