: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: con el escalado de Windows al 125%
   de la PC de la distribuidora, dejarlos pegados al 16px del navegador
   se ve enorme. Bajar la escala general es este solo numero. */
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: 0.6rem 1.2rem;
  background: var(--tinta);
  color: var(--papel);
}
.barra .marca { font-weight: 600; }
.barra nav a { color: #c8d4e0; text-decoration: none; margin-right: 1rem; }
.barra nav a:hover { color: var(--papel); }

main { padding: 1.2rem; }

.panel {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 4px;
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}
.panel-error { border-left: 4px solid var(--alerta); }

h1 { font-size: 1.5rem; margin: 0 0 0.8rem; }
h2 { font-size: 1.15rem; margin: 0 0 0.6rem; }

table { border-collapse: collapse; width: 100%; }
th, td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--borde); text-align: left; }
th { font-weight: 600; color: var(--tenue); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* La aclaracion que acompana a un numero sin competirle: por ejemplo
   "de 6 - bodega no mando 2" debajo de lo que el cliente recibio. */
.tenue {
  display: block;
  font-size: 0.8rem;
  color: var(--tenue);
}

input, select, textarea {
  font: inherit;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--borde);
  border-radius: 3px;
}
input.num { text-align: right; width: 6rem; }

.boton {
  display: inline-block;
  font: inherit;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--acento);
  border-radius: 3px;
  background: var(--acento);
  color: var(--papel);
  text-decoration: none;
  cursor: pointer;
}
.boton-tenue { background: var(--papel); color: var(--acento); }
.boton-peligro { background: var(--papel); color: var(--alerta); border-color: var(--alerta); }

.aviso { padding: 0.6rem 0.9rem; border-radius: 3px; margin: 0 0 1rem; }
.aviso-exito { background: #e6f4ee; color: var(--exito); }
.aviso-error { background: #fbeae7; color: var(--alerta); }
/* Ni éxito ni error: algo que hay que saber y no es culpa de nadie. El
   catálogo sin cargar, o una ruta que no lleva nada que empacar. */
.aviso-atencion { background: #fdf3e0; color: var(--aviso); }

/* Los dos botones de imprimir de la ruta, uno al lado del otro. */
.papeles { display: flex; gap: 0.5rem; margin: 0.8rem 0 0; }

/* La pantalla de una ruta: pestañas a la izquierda, cuadre siempre a la
   vista a la derecha. Helvin teclea mirando el numero que va cambiando. */
.con-cuadre { display: grid; grid-template-columns: 1fr 20rem; gap: 1rem; align-items: start; }
@media (max-width: 60rem) { .con-cuadre { grid-template-columns: 1fr; } }

/* Los avisos cruzan las dos columnas. Sin esto un flash se queda con la
   columna ancha y manda la pantalla entera a la de 20rem del cuadre:
   pasaba cada vez que se guardaba algo, que es cuando hay flash. */
.avisos { grid-column: 1 / -1; }

.pestanas { display: flex; gap: 0.3rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
.pestanas a {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--borde);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  background: #e9edf2;
  color: var(--tinta);
  text-decoration: none;
}
.pestanas a.activa { background: var(--papel); font-weight: 600; }

/* Cada ticket de la recepcion se lee como un bloque aparte: Helvin acepta
   o rechaza el ticket entero, y confundir dos tickets del mismo cliente es
   justo el error que hay que evitar. */
.ticket { border: 1px solid var(--borde); border-radius: 4px; padding: 0.8rem; margin-bottom: 1rem; }
.ticket h3 { margin: 0 0 0.6rem; }
.ticket-completo { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.8rem; }
.ticket-completo form { display: flex; gap: 0.3rem; align-items: center; }

/* `hidden` tiene que ganarle a cualquier `display` de mas abajo. Sin
   esto, `.cuadrito { display: grid }` empata en especificidad con el
   `[hidden] { display: none }` del navegador y gana por venir despues:
   el desglose de monedas se veia siempre, con el boton diciendo todavia
   "Desglosar monedas". */
[hidden] { display: none !important; }

/* El cuadrito de efectivo: etiqueta, piezas y subtotal en tres columnas
   fijas. Sin tabla y sin encabezados, porque la etiqueta ya dice todo
   ("Billetes de $20") y lo unico que se teclea es el numero de piezas. */
.cuadrito {
  display: grid;
  grid-template-columns: 1fr 5.5rem 6rem;
  gap: 0 1rem;
  max-width: 28rem;
}
.cuadrito .pieza { display: contents; }
.cuadrito label { padding: 0.35rem 0; }
.cuadrito input {
  width: 100%;
  text-align: right;
  font-size: 1.1rem;
  padding: 0.3rem 0.5rem;
  margin: 0.15rem 0;
}
.cuadrito .subtotal {
  padding: 0.35rem 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--tenue);
}
/* Los billetes y las monedas son dos montones distintos. */
.cuadrito .corte {
  grid-column: 1 / -1;
  border: none;
  border-top: 1px solid var(--borde);
  margin: 0.6rem 0;
  width: 100%;
}

.cuadrito-total {
  max-width: 28rem;
  display: flex;
  justify-content: space-between;
  border-top: 2px solid var(--tinta);
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  font-size: 1.2rem;
}
.cuadrito-total strong { font-variant-numeric: tabular-nums; }

.cuadre .linea { display: flex; justify-content: space-between; padding: 0.2rem 0; }
.cuadre .total { border-top: 1px solid var(--borde); margin-top: 0.4rem; padding-top: 0.4rem; font-weight: 600; }
.cuadre .diferencia { font-size: 1.3rem; font-weight: 700; }
.es-cuadrado { color: var(--exito); }
.es-faltante { color: var(--alerta); }
.es-sobrante { color: var(--aviso); }

/* La lista de clientes de la recepcion. Una ruta trae decenas, asi que la
   lista tiene su propia barra y no estira la pantalla: la referencia es
   un alto fijo, con la busqueda pegada arriba. */
.buscador { max-width: 32rem; margin-bottom: 1.2rem; }
.buscador label { display: block; margin-bottom: 0.3rem; }
.buscador input[type="search"] { width: 100%; padding: 0.45rem 0.6rem; }

.lista-clientes {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  max-height: 16rem;
  overflow-y: auto;
  border: 1px solid var(--borde);
  border-radius: 4px;
}
.lista-clientes li { border-bottom: 1px solid var(--borde); }
.lista-clientes li:last-child { border-bottom: none; }
.lista-clientes a {
  display: block;
  padding: 0.45rem 0.6rem;
  text-decoration: none;
}
.lista-clientes a:hover { background: #e9edf2; }
/* El cliente en el que se esta trabajando se reconoce de un vistazo al
   volver de una devolucion. */
.lista-clientes .es-elegido a { font-weight: 600; }
.lista-clientes .es-elegido { background: #e9edf2; }

/* --- Pagina de instalacion ------------------------------------------
   La abren Gerson y el jefe, que no conocen el sistema: los pasos van
   grandes y con harto aire. */
.instalar { max-width: 46rem; }
.instalar h1 { margin-bottom: .4rem; }
.instalar-intro { color: var(--tenue); font-size: 1.05rem; margin-top: 0; }
.boton-grande {
  display: inline-block;
  padding: .85rem 2.2rem;
  font-size: 1.15rem;
  margin: .6rem 0 1.4rem;
}
.instalar-pasos { line-height: 1.9; padding-left: 1.2rem; }
.instalar-pasos li { margin-bottom: .3rem; }
.instalar-nota {
  color: var(--tenue);
  font-size: .92rem;
  border-top: 1px solid var(--borde);
  padding-top: .8rem;
  margin-top: 1.6rem;
}
.instalar-nota code { word-break: break-all; }