/* Qué lleva este auto.

   Arriba una barra flaca para elegir el auto. Abajo, la respuesta a
   todo el ancho. Las listas para elegir no necesitan lugar; el
   resultado sí, que es lo que hay que leer con el auto en el elevador.

   Se respeta lo que hace confiable al buscador: los sellos bien
   visibles y el motivo escrito cuando falta un dato. */

/* ------------------------------------------------------- la barra */

.bs-barra {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.bs-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bs-campo label {
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tenue, #8d96a3);
  font-weight: 700;
}
.bs-campo .ip { padding: 7px 9px; font-size: 14px; }
.bs-campo-texto { position: relative; flex: 0 0 230px; }

/* Cada lista es una caja donde se escribe. Las desplegables del
   navegador solo saltan a la primera letra y despues vuelven a
   empezar: con 220 marcas eso no sirve. */
.bs-combo { position: relative; }
.bs-combo .ip { width: 210px; padding-right: 26px; }
.bs-campo-chico .bs-combo .ip { width: 120px; }
.bs-combo .ip:disabled { background: #f6f7f9; color: var(--tenue, #a9b0ba); }
.bs-flecha {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--tenue, #a9b0ba);
  pointer-events: none;
}
.bs-opts {
  display: none;
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  min-width: 100%;
  max-width: 330px;
  z-index: 30;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--linea, #e4e7ec);
  border-radius: 9px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .13);
  max-height: 320px;
  overflow-y: auto;
}
.bs-opts.abierto { display: block; }
.bs-opts li {
  padding: 6px 9px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1.3;
}
.bs-opts li b { display: block; font-size: 14px; font-weight: 600; }
.bs-opts li small {
  display: block;
  font-size: 11.5px;
  color: var(--tenue, #8d96a3);
}
.bs-opts li.marcada { background: rgba(30, 142, 62, .12); }
.bs-opts li.elegida b { color: #1e8e3e; }
.bs-opts li.nada { color: var(--tenue, #8d96a3); cursor: default; font-size: 13px; }
.bs-campo-estado { flex: 1 1 auto; align-items: flex-end; padding-bottom: 7px; }

.bs-sug {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  background: #fff;
  border: 1px solid var(--linea, #e4e7ec);
  border-radius: 9px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .13);
  max-height: 320px;
  overflow-y: auto;
  min-width: 290px;
}
.bs-sug.abierto { display: block; }
.bs-sug div { padding: 8px 11px; cursor: pointer; font-size: 14px; }
.bs-sug div:hover { background: #f3f4f6; }

.bs-arranque { padding: 42px 18px; }

/* ------------------------------------------------- el auto elegido */

.bs-cab {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px 16px;
}
.bs-cab h2 { margin: 0 0 2px; font-size: 21px; }

/* La respuesta corta, al lado del nombre del auto: que aceite y que
   codigos. Para la mayoria de las consultas, con esto alcanza. */
.bs-resumen {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  flex: 1 1 420px;
  padding: 9px 12px;
  background: #f5f6f8;
  border-radius: 9px;
}
.bs-resumen-ac { font-size: 17px; white-space: nowrap; }
.bs-resumen-ac b { font-size: 20px; }
.bs-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.bs-chip {
  font-size: 12px;
  color: var(--suave, #5b6472);
  background: #fff;
  border: 1px solid var(--linea, #e4e7ec);
  border-radius: 6px;
  padding: 3px 7px;
  white-space: nowrap;
}
.bs-chip b { font-size: 13px; color: var(--tinta, #1a1d21); }
.bs-chip.vacio-chip { opacity: .6; }

.bs-titulo {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tenue, #8d96a3);
  font-weight: 700;
  margin: 20px 0 8px;
}

/* --------------------------------------------- los filtros, en tarjetas

   Cuatro tarjetas en fila, con el codigo grande. El que atiende no lee
   un parrafo: busca un numero y lo compara con la caja. */

.bs-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 12px;
  align-items: start;
}
.ft { padding: 14px 15px; }
.ft-tit {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tenue, #8d96a3);
  font-weight: 700;
  margin-bottom: 8px;
}
.ft-sin { background: #fbfbfc; }
.ft-cod { font-size: 18px; font-weight: 700; }
.ft-apagado { color: var(--tenue, #c3c9d2); }
.ft-pie {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--linea, #eceff3);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.bs-cod { font-size: 17px; font-weight: 700; word-break: break-word; }
.bs-cod.bs-segundo {
  margin-top: 5px;
  font-size: 14px;
  color: var(--suave, #5b6472);
}
.bs-marca {
  font-size: 10px;
  letter-spacing: .05em;
  color: #4a7fb5;
  font-weight: 700;
  margin-right: 4px;
  vertical-align: 2px;
}
.bs-sep { color: var(--tenue, #c3c9d2); margin: 0 6px; }
.bs-et {
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tenue, #8d96a3);
  font-weight: 700;
}
.bs-nota { font-size: 12.5px; color: var(--tenue, #8d96a3); margin-top: 4px; }
.bs-falta { color: #a86a00; }
.bs-falta-bloque { padding: 18px; font-size: 13.5px; color: var(--suave, #5b6472); }

/* Lo que hay en el mostrador. Es lo unico que el catalogo no sabe, y
   es lo que decide la venta. */
.bs-stock {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-top: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
}
.bs-stock.si  { background: #e8f5ec; }
.bs-stock.sin { background: #fdf3e2; }
.bs-stock.no  { background: #f3f4f6; color: var(--suave, #5b6472); }
.bs-stock .bt { flex: 0 0 auto; padding: 5px 11px; font-size: 13px; }
.bs-stock .mini { margin-top: 2px; }

/* Los otros codigos que lista el catalogo: cerrados por defecto. La
   pantalla tiene que contestar una cosa, no volcar la lista cruda. */
.bs-ver {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  color: var(--tenue, #8d96a3);
  text-decoration: underline dotted;
}
.bs-ver:hover { color: var(--suave, #5b6472); }
.bs-escondido { display: none; width: 100%; }
.bs-escondido.abierto { display: block; }
.bs-opcion {
  margin-top: 10px;
  padding-left: 10px;
  border-left: 2px solid var(--linea, #e4e7ec);
}

/* ------------------------------------- los aceites y fluidos, en tabla */

.bs-tabla { padding: 4px 14px 10px; overflow-x: auto; }
.bs-fl {
  display: grid;
  grid-template-columns: 190px 100px minmax(200px, 1fr) 80px 200px;
  gap: 10px 14px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--linea, #eceff3);
  font-size: 13.5px;
  min-width: 780px;
}
.bs-fl:last-child { border-bottom: none; }
.bs-fl-cab {
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tenue, #8d96a3);
  font-weight: 700;
  padding: 10px 0 6px;
}
.bs-fl-que { font-weight: 600; }
.bs-fl-vis b { font-size: 16px; }
.bs-fl-prod { color: var(--suave, #5b6472); }
.bs-fl-lt b { font-size: 15px; }
.bs-fl-int { color: var(--tenue, #8d96a3); font-size: 12.5px; }
.bs-fl-stock { grid-column: 2 / -1; font-size: 12.5px; }
.bs-fl-si { color: #1e8e3e; }
.bs-fl-no { color: var(--tenue, #8d96a3); }
.bs-fl-motor { background: rgba(30, 142, 62, .05); }
.bs-fl-motor .bs-fl-que { font-size: 15px; }

.bs-pie {
  margin-top: 14px;
  font-size: 12px;
  color: var(--tenue, #8d96a3);
}

/* Los sellos: esto es lo que no hay que perder. Dicen de donde sale
   cada dato, que es lo que hace que se le pueda creer. */
.bs-sello {
  flex: 0 0 auto;
  font-size: 10.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}
.bs-sello.ok    { background: #e8f5ec; color: #1e8e3e; border: 1px solid #c9e6d3; }
.bs-sello.medio { background: #fdf3e2; color: #a86a00; border: 1px solid #f0ddb8; }
.bs-sello.duda  { background: #f3f4f6; color: #6b7483; border: 1px solid #e4e7ec; }
.bs-sello.anio  { background: #eaf1fb; color: #2f6cb0; border: 1px solid #cfe0f5; }

/* ---------------------------------------------------- equivalencias

   El codigo de un lado, lo que hay en el mostrador del otro. La
   pregunta es "no tengo ese, cual me sirve": las dos cosas tienen que
   verse de un vistazo. */
.eq-fila {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px 2px;
  border-bottom: 1px solid var(--linea, #eceff3);
}
.eq-fila:last-of-type { border-bottom: none; }
.eq-fila b { font-size: 15px; }
.eq-este { background: rgba(30, 142, 62, .07); border-radius: 7px; padding: 10px 9px; }
.eq-stock { text-align: right; flex: 0 0 auto; }
.eq-stock .bt { margin-top: 5px; }

/* ------------------------------------------------- pantallas chicas */

@media (max-width: 760px) {
  .bs-barra { gap: 9px; }
  .bs-campo, .bs-campo-texto { flex: 1 1 100%; }
  .bs-combo .ip, .bs-campo-chico .bs-combo .ip { width: 100%; }
  .bs-opts { max-width: none; }
  .bs-campo-estado { display: none; }
  .bs-tabla { padding-left: 10px; padding-right: 10px; }
}

/* Las salidas de cuando el auto no está en el catálogo. */
.bs-salidas { margin: 10px 0; }
.bs-salidas .bt { margin-bottom: 5px; }
.bs-salidas .mini { line-height: 1.45; }

/* Las dos cantidades, cuando el mismo motor viene en dos versiones.
   Chico y en dos renglones: no es un dato que falte, son dos datos. */
.bs-fl-dos { font-size: 11px; line-height: 1.3; font-weight: 600; }

/* El renglón de la caja automática: va pegado al de caja y se
   distingue con un borde, para que no se confundan los dos. */
.bs-fl-caja { border-left: 3px solid var(--border-strong); }
.bs-fl-caja .bs-fl-vis b { font-size: 12px; line-height: 1.3; display: block; }

/* Lo que puso Esteban a mano. Se marca a proposito: es el
   unico dato de la pantalla que no sale de un catalogo, y el
   que lo lee tiene que saber de donde viene. */
.bs-sello.suyo {
  background: #eef2fb;
  color: #3d5e8c;
  border: 1px solid #d3deef;
}
.bs-suyo {
  margin-top: 7px;
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
}
.bs-corregir { margin-left: auto; }
/* La segunda recomendacion, pegada abajo de la primera y un
   poco corrida: se lee como lo que es, una alternativa. */
.bs-fl-segunda {
  background: rgba(61, 94, 140, .04);
  border-bottom-style: dashed;
}
.bs-fl-segunda .bs-fl-que { font-weight: 500; padding-left: 12px; }

/* El boton de agregar el aceite, adentro del renglon de la tabla. Es
   chico a proposito: el renglon ya esta lleno y lo que importa leer es
   la viscosidad y los litros. */
.bs-sumar {
  margin-left: 7px;
  padding: 2px 8px;
  border: 1px solid var(--linea-dura, #cfd7de);
  background: var(--papel, #fff);
  border-radius: 999px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: #1e8e3e;
  cursor: pointer;
  white-space: nowrap;
}
.bs-sumar:hover { background: #e8f5ec; }

/* El WIX equivalente: el mismo tamano que el MANN -- Esteban elige cual
   agregar, asi que los dos tienen que leerse igual de bien -- pero con
   la marquita de "equivalente", porque no sale del catalogo del auto
   sino del de Pagano. */
.bs-marca-wix { color: #8a5a1f; }
.bs-et-eq {
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7483;
  vertical-align: 2px;
}

/* Las aclaraciones que empiezan con OJO son avisos nuestros, no datos
   del catalogo: que un codigo esta descatalogado, o que MANN lo publica
   para este auto pero en el resto del catalogo lo usa en otra cosa. Van
   marcadas para que no se lean como un renglon mas. */
.bs-nota.bs-ojo {
  color: #a86a00;
  font-weight: 600;
}

/* Los casos de la caja: uno por renglon, tocables.

   Antes esto era un solo texto metido en la columna del numero, que
   mide 80 pixeles. Lo marco Esteban con una foto: no se podia leer. */
.bs-casos { margin-top: 7px; }
.bs-casos-tit {
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tenue, #8d96a3);
  font-weight: 700;
  margin-bottom: 4px;
}
.bs-caso {
  display: flex;
  width: 100%;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 8px;
  margin-bottom: 3px;
  border: 1px solid var(--linea, #e4e7ec);
  border-radius: 6px;
  background: var(--papel, #fff);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.bs-caso:hover:not(:disabled) {
  border-color: #1e8e3e;
  background: #e8f5ec;
}
.bs-caso:disabled { cursor: default; }
.bs-caso b { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* "Ninguno de esos, pongo yo los litros". Va con los otros porque es
   una respuesta mas a la misma pregunta, pero punteado y en gris: no
   es un dato de la guia, es escribirlo a mano. */
.bs-caso-mano {
  border-style: dashed;
  background: transparent;
  color: var(--tenue, #8d96a3);
}
.bs-caso-mano b { font-weight: 600; }

/* UNA OPCION DE CAJA, armada como una tarjeta de filtro: que lleva,
   cuanto, y abajo lo que hay en el mostrador con su boton de agregar.
   Lo pidio Emilio: "igual que con los otros". */
.bs-caso2 {
  border: 1px solid var(--linea, #e4e7ec);
  border-radius: 6px;
  padding: 6px 9px;
  margin-bottom: 5px;
}
.bs-caso2-cab { display: flex; gap: 7px; align-items: baseline; }
.bs-caso2-que { flex: 1; font-size: 12.5px; font-weight: 600; }
.bs-caso2-lt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bs-caso2-ac { font-size: 12px; margin-top: 2px; }
.bs-caso2-st { margin-top: 3px; }
/* El segundo aceite de esa opcion, colgado del primero. Se ve que es
   otra cosa y que va al lado, no en lugar de. */
.bs-caso2-seg {
  margin-top: 5px;
  padding-left: 9px;
  border-left: 2px solid var(--linea, #e4e7ec);
}
.bs-caso2-mas { margin-top: 5px; }
/* "Tenes 9 ATF, cual le ponés": que se note que es un boton y no un
   cartel mas. */
.bs-cual { color: #1e8e3e; text-decoration-style: solid; }
.bs-cual-lista { max-height: 340px; overflow-y: auto; margin-bottom: 10px; }
.bs-caso-lapiz {
  border: 1px solid var(--linea, #e4e7ec);
  border-radius: 6px;
  background: var(--papel, #fff);
  margin-bottom: 3px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.bs-caso-lapiz:hover { border-color: #1e8e3e; background: #e8f5ec; }

/* El renglon de un fluido que este auto NO lleva. Se ve apagado pero se
   ve: que diga "no lleva" contesta la pregunta; esconderlo la deja
   abierta y al otro dia la vuelve a hacer. */
.bs-fl-nolleva { opacity: .62; }

/* Un boton chiquito, de texto, al lado de un dato de la cabecera: el
   que arregla los anos del motor. No puede parecer un boton grande:
   es una correccion al pasar, no la accion principal de la pantalla. */
.bs-mini-cor {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--marca-texto, #1d5e8c);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.bs-mini-cor:hover { color: #0f3f61; }