:root {
  --tinta: #1c2530;
  --tenue: #6b7785;
  --borde: #d8dee6;
  --fondo: #f4f6f9;
  --papel: #ffffff;
  --acento: #1f5f8b;
  --exito: #1c7c54;
  --alerta: #a33a2c;
  --aviso: #8a6116;
}

* { box-sizing: border-box; }

/* La raiz fija el tamano de los rem: asi bajar la escala general es un
   solo numero y todos los paddings/margenes/h1/h2 que estan en rem se
   achican en la misma proporcion, en vez de tener que retocar cada uno
   a mano. Antes no habia font-size en la raiz, asi que los rem quedaban
   pegados al 16px por defecto del navegador aunque el body bajara a 15px:
   con escalado de Windows al 125% eso se veia enorme. */
html { font-size: 13px; }

body {
  margin: 0;
  font: 13px/1.5 "Segoe UI", system-ui, sans-serif;
  color: var(--tinta);
  background: var(--fondo);
}

.barra {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: .75rem 1.5rem;
  background: var(--tinta);
  color: #fff;
}
.barra .marca { font-weight: 600; letter-spacing: .02em; }
.barra nav { display: flex; gap: 1.25rem; }
.barra a { color: #cdd7e2; text-decoration: none; }
.barra a:hover { color: #fff; }

main { max-width: 1180px; margin: 0 auto; padding: 1.5rem; }
/* El editor de pedidos lleva doce columnas por linea: necesita mas ancho
   que el resto de las pantallas. Fluido y con un padding lateral mas
   chico -- nunca un max-width fijo mayor que la ventana, o desborda el
   body en cualquier PC mas angosta que 1560px (el bug original: 1503px
   utiles con la ventana maximizada y escalado Windows al 125%). */
main.ancho { width: 100%; max-width: 1500px; padding: 1.5rem 1rem; }

h1 { font-size: 1.35rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .75rem; }

.panel {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

table { width: 100%; border-collapse: collapse; background: var(--papel); }
th, td { padding: .5rem .6rem; border-bottom: 1px solid var(--borde); text-align: left; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); }
td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; }
td.centro { text-align: center; }
td.centro input[type="checkbox"] { width: auto; }
tbody tr:hover { background: #f8fafc; }

label { display: block; font-size: .8rem; color: var(--tenue); margin-bottom: .2rem; }
input, select, textarea {
  font: inherit;
  padding: .4rem .5rem;
  border: 1px solid var(--borde);
  border-radius: 4px;
  background: #fff;
  width: 100%;
}
textarea { min-height: 5rem; resize: vertical; }

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

.boton {
  display: inline-block;
  padding: .45rem .9rem;
  border: 1px solid var(--acento);
  border-radius: 4px;
  background: var(--acento);
  color: #fff;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.boton:hover { filter: brightness(1.1); }
.boton-tenue { background: #fff; color: var(--acento); }
.boton-riesgo { background: #fff; color: var(--alerta); border-color: var(--alerta); }
.acciones { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }

.aviso { padding: .6rem .9rem; border-radius: 4px; border-left: 4px solid; }
.aviso-exito { background: #eaf5ef; border-color: var(--exito); color: var(--exito); }
.aviso-error { background: #fbecea; border-color: var(--alerta); color: var(--alerta); }
.aviso-atencion { background: #fdf5e3; border-color: var(--aviso); color: var(--aviso); }

.etiqueta { font-size: .72rem; padding: .15rem .5rem; border-radius: 999px; border: 1px solid; }
.estado-BORRADOR { color: var(--tenue); border-color: var(--borde); background: #f2f4f7; }
.estado-ENVIADO_JEFE { color: var(--aviso); border-color: var(--aviso); background: #fdf5e3; }
.estado-APROBADO { color: var(--exito); border-color: var(--exito); background: #eaf5ef; }

.aviso-error h1 { color: var(--alerta); }

/* Editor de pedido */
/* minmax(0,1fr) en la primera columna es lo que evita el desborde: sin el
   0 el minimo implicito de un grid item es "auto", que toma el ancho
   intrinseco de su contenido (el min-width de .tabla-lineas) y empuja el
   grid entero mas alla del viewport. Con el 0 la columna se puede encoger
   todo lo que haga falta y es la tabla, adentro suyo, la que gana un
   scroll horizontal propio (.tabla-ancha). */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 1rem; align-items: start; }
.panel-vivo { position: sticky; top: 1rem; }
.panel-vivo dl { display: grid; grid-template-columns: 1fr auto; gap: .35rem .75rem; margin: 0; }
.panel-vivo dt { color: var(--tenue); font-size: .85rem; }
.panel-vivo dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.panel-vivo .destacado { font-size: 1.25rem; color: var(--acento); }

.linea-BONIFICADA { background: #fbfaf3; }
.buscador { position: relative; }
/* Tarea 3: `position: fixed`, no `absolute`. La casilla vive dentro de
   `.tabla-ancha`, que tiene `overflow-x: auto` -- y un contenedor que
   recorta en un eje recorta en los DOS, asi que una lista `absolute` de
   260px de alto quedaba atrapada ahi adentro y generaba un scroll vertical
   que habia que bajar a mano para ver los productos. `fixed` la saca de
   ese contenedor por completo: flota sobre toda la pagina y ningun
   ancestro con overflow la puede recortar. left/top/width los pone
   pedido.js con getBoundingClientRect() de la casilla al abrirla. */
.sugerencias {
  position: fixed; z-index: 20;
  background: #fff; border: 1px solid var(--borde); border-radius: 4px;
  max-height: 260px; overflow-y: auto; margin: 0; padding: 0; list-style: none;
  box-shadow: 0 4px 10px rgba(28, 37, 48, .15);
}
.sugerencias li { padding: .4rem .6rem; cursor: pointer; font-size: .9rem; }
.sugerencias li:hover, .sugerencias li[aria-selected="true"] { background: #eef4f9; }
.sugerencias .historial { font-weight: 600; }
.sugerencias .detalle { color: var(--tenue); font-size: .8rem; }

/* La tabla de lineas del editor: mas apretada que las demas para que el
   nombre del producto se lea completo. Si la ventana se hace angosta la
   tabla no se estruja: se desliza de lado dentro de su propia caja. */
.tabla-ancha { overflow-x: auto; }
/* El minimo lo manda el desplegable mas apretado, no el nombre del
   producto. Se midio clonando cada <select> en width:auto fuera de
   pantalla y leyendo cuanto ocupa de verdad -- calcular a mano cuanto se
   come la flecha nativa no funciona, Chromium le reserva sitio propio
   ademas del padding que uno declare. La opcion mas larga de "Unidad" es
   "media caja" (91px de ancho natural) y la de "Tipo" es "Bonificada"
   (90px); con esas columnas en 9 % cada una, el minimo tiene que dar
   91 / 0.09 = 1011px. 1150 deja margen y ademas permite que
   "Presentación" muestre entera "bolsa de 60".
   El nombre del producto ya no es la restriccion: necesita 159px
   (146.6 de texto + 12.4 de padding y borde) y con el 21 % se lleva
   241px. Las tres casillas de costo bajan a 7 %: los 62.3px que pide
   "2.992728" caben de sobra en 80px.
   El techo tambien esta atado: con el panel al costado la tabla dispone
   de ~1186px a 1503px de ventana, asi que el minimo NO puede pasar de
   ahi sin devolver el scroll horizontal que esta fase vino a quitar.
   Hay una prueba que fija estos numeros (test_editor_presentaciones.py)
   y otra que los mide de verdad en el navegador, incluidos los
   desplegables (test_layout_responsive.py). */
.tabla-lineas { min-width: 1150px; font-size: 12.5px; }
.tabla-lineas th, .tabla-lineas td { padding: .35rem .3rem; }
.tabla-lineas th:first-child, .tabla-lineas td:first-child { padding-left: 0; }
.tabla-lineas th:last-child, .tabla-lineas td:last-child { padding-right: 0; }
.tabla-lineas input, .tabla-lineas select { padding: .35rem .4rem; }
/* `text-overflow: ellipsis` y NADA de padding-right extra. Un <select>
   ya se reserva solo el sitio de su flecha nativa, asi que un
   padding-right propio no la "esquiva": se SUMA a ese hueco y lo unico
   que hace es encoger el texto. Probado: con 1.35rem de padding-right,
   "Facturada" -- que cabe holgado -- salia "Factur...". Sin el, entra.
   Lo que evita que las letras se metan debajo del triangulito es el
   ellipsis, que corta limpio antes de llegar. "CHORIZO ARGENTINO S/P"
   en "Viene por" no entra en ninguna columna razonable y se corta; al
   desplegarlo el navegador muestra la lista entera a su ancho natural,
   asi que no se pierde informacion. */
.tabla-lineas select { text-overflow: ellipsis; }
.tabla-lineas .quitar { padding: .3rem .5rem; line-height: 1; }
/* La equivalencia es un dato de lectura, no una casilla: se distingue de
   las que se teclean estando más tenue y sin recuadro. */
.tabla-lineas .campo-equivalencia {
  font-variant-numeric: tabular-nums;
  color: var(--tenue);
  font-size: .9rem;
  white-space: nowrap;
}

/* El resumen se apila debajo en ventanas angostas. No es por desborde
   -- de eso ya se encarga minmax(0,1fr) -- sino por reparto de espacio:
   el panel y su gap se comen 253px, y a 1280px eso deja la tabla en
   ~968px, por debajo de los 1150 que necesitan los desplegables, asi
   que aparecia scroll de lado. Apilado, a 1280px la tabla dispone de
   ~1221px y entra entera. El umbral son 1300px: por encima (la ventana
   maximizada de la PC de Gerson da 1503px utiles) el panel se queda al
   costado, que es como se quiere ver. */
@media (max-width: 1300px) {
  .editor { grid-template-columns: minmax(0, 1fr); }
  .panel-vivo { position: static; }
}

.cuadre-ok { color: var(--exito); font-weight: 600; }
.cuadre-mal { color: var(--alerta); font-weight: 600; }