/* ===========================================================================
   Estilos del cotizador. Aparte de estilos.css por lo mismo que cotizador.js
   va aparte de app.js: otras sesiones tocan aquel archivo.

   Todo va por clases y nada con style="" en linea: la politica de contenido
   del panel es `style-src 'self'`, y un estilo en linea lo bloquea el navegador.
   ========================================================================= */

.rejilla.arriba { margin-top: 1.2rem; }
.rejilla.junto { margin: .6rem 0 0; }
.arriba-poco { margin-top: .6rem; }

/* Las celdas editables de la tabla de la cotizacion. */
.celda {
  width: 7.5rem; padding: 5px 8px; font: inherit; font-size: 14px;
  border: 1px solid var(--linea); border-radius: 6px; background: #fff;
}
.celda.corta { width: 4rem; }
.celda:focus { outline: 2px solid var(--azul); outline-offset: 1px; }

/* La hoja que se imprime: lo que recibe el cliente. */
.hoja-cotizacion {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 28px; max-width: 900px;
}
.hoja-cabeza { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.hoja-cabeza h2 { margin: 0 0 4px; }
.hoja-cabeza p { margin: 0; color: var(--gris); }
.hoja-vendedor { text-align: right; font-size: 14px; color: var(--gris); }
.hoja-totales { margin: 14px 0 14px auto; border-collapse: collapse; }
.hoja-totales td { padding: 5px 14px; text-align: right; }
.hoja-cotizacion .tabla { white-space: normal; }

/* Al imprimir sale SOLO la hoja: ni el menu, ni la cabecera, ni los botones. */
@media print {
  .lateral, .lateral-velo, .cabecera, .aviso, .velo, .no-imprimir { display: none !important; }
  .armazon, .contenido { display: block !important; margin: 0 !important; padding: 0 !important; }
  .hoja-cotizacion { border: 0; padding: 0; max-width: none; }
  body { background: #fff; }
}

/* El chat del asistente. */
.chat {
  display: flex; flex-direction: column; gap: 8px;
  height: min(60vh, 560px); overflow-y: auto; padding: 14px; margin: 12px 0;
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
}
.globo {
  max-width: 85%; padding: 9px 13px; border-radius: 14px;
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.45;
}
.globo.suyo { align-self: flex-start; background: var(--fondo); color: var(--tinta); border-bottom-left-radius: 4px; }
.globo.mio { align-self: flex-end; background: var(--azul); color: #fff; border-bottom-right-radius: 4px; }
.globo.mal { border: 1px solid var(--rojo); }
.globo.pensando { color: var(--gris2); }
.globo-opciones { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; max-width: 100%; }

/* El precio de un renglon de lista trae el rotulo del proveedor («CALA
   Distributor (EXW LA) · USD») y su equivalente en pesos: en un celular, con
   white-space: nowrap, empujaba la pagina 70 px a la derecha (05-10-2026). Aqui
   se deja partir la letra pequena; el numero grande sigue en una sola linea. */
.ficha-precio { min-width: 0; max-width: 55%; }
.ficha-precio small { display: block; white-space: normal; overflow-wrap: anywhere; }

/* Logos de Elenst y VYXTA (05-10-2026, encargo 5). Solo en la instancia de
   Elenst. Sin origen se ven los dos con la nota; con ?origen=vyxta, solo VYXTA;
   con ?origen=elenst, solo Elenst. Lo legal (quién factura, quién responde por
   los datos) sigue diciendo Elenst S.A.S. en los textos: el logo no lo cambia. */
.sello-elenst { display: none; }
html[data-empresa="elenst"] .sello-elenst {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px;
}
/* LAS DOS MARCAS SIEMPRE (07-10-2026). Jhonatan: «no que solo aparezca Elenst:
   que sea el que más resalte pero que también aparezca VYXTA, para que se
   entienda que es de ambos». Un cliente de VYXTA que solo ve Elenst se confunde,
   y al revés. Elenst principal; VYXTA al 60 % de su altura, en la entrada, el
   registro y el panel, venga de donde venga (el ?origen= solo cambia el fondo
   y el color del botón). */
.sello-elenst .logo-elenst { height: 76px; width: auto; }
.sello-elenst .logo-vyxta { height: 46px; width: auto; }
.sello-elenst .logo-nota { flex-basis: 100%; font-size: 11px; color: var(--gris2); }
html[data-empresa="elenst"] #marca-entrar,
html[data-empresa="elenst"] #marca-lateral { display: none; }
.lateral-marca .sello-elenst .logo-elenst { height: 44px; }
.lateral-marca .sello-elenst .logo-vyxta { height: 26px; }
.lateral-marca .sello-elenst { margin-bottom: 4px; gap: 8px; }

/* Términos y condiciones al pie de la hoja del cliente (05-10-2026). Letra
   menor: es el pie del documento, como en el formato de Elenst. */
.hoja-terminos { margin-top: 18px; border-top: 1px solid var(--borde, #e3e7ee); padding-top: 10px; font-size: 12px; }
.hoja-terminos h3 { font-size: 14px; margin: 6px 0; }
.hoja-terminos h4 { font-size: 12.5px; margin: 10px 0 4px; }
.hoja-terminos p { margin: 3px 0; line-height: 1.45; }

/* Pendientes y avisos del tablero (05-10-2026): un recuadro ordenado, no avisos
   sueltos bajo las cifras. */
.pendientes { border-left: 4px solid #E08A1E; }
.pendientes h3 { margin-top: 0; }
.pendientes ol { margin: 6px 0 0; padding-left: 20px; }
.pendientes li { margin: 6px 0; line-height: 1.5; }

/* =========================================================================
   LA PANTALLA DE ENTRADA DE ELENST (05-10-2026). Jhonatan: «un diseño de
   fondo acorde al color naranja o gris, o una foto de tecnología, algo que no
   lo deje ver tan simplón, pero corporativo». Propuesta de la sesión Elenst |
   VYXTA para que las dos marcas no se vean iguales:
   - Elenst (y sin origen): grafito con la ciudad al atardecer, velada, y un
     brillo naranja arriba a la derecha. Tarjeta con franja naranja.
   - VYXTA: azul noche con rejilla técnica y el globo, como su página de GPS.
   Las fotos están copiadas en pwa/marca (las imágenes externas no pasan la
   política de seguridad del panel). En el celular, solo el degradado: carga
   más rápido. Solo la instancia de Elenst: Lexy no cambia.
   ========================================================================= */
html[data-empresa="elenst"] .entrar {
  background:
    radial-gradient(circle at 92% 6%, rgba(240, 122, 26, .38), transparent 42%),
    linear-gradient(160deg, rgba(43, 47, 54, .86), rgba(28, 31, 36, .94)),
    url("marca/fondo-ciudad.webp") center / cover no-repeat,
    #1c1f24;
}
html[data-empresa="elenst"][data-origen="vyxta"] .entrar {
  background:
    radial-gradient(circle at 90% 8%, rgba(244, 144, 12, .32), transparent 40%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 48px),
    linear-gradient(160deg, rgba(7, 18, 31, .84), rgba(18, 48, 77, .9)),
    url("marca/fondo-globo.webp") center / cover no-repeat,
    #07121f;
}
html[data-empresa="elenst"] .tarjeta-entrar { border-top: 4px solid #F07A1A; }
html[data-empresa="elenst"] .entrar .boton-principal { background: #F07A1A; }
html[data-empresa="elenst"] .entrar .boton-principal:hover { background: #d96a10; }
html[data-empresa="elenst"][data-origen="vyxta"] .tarjeta-entrar { border-top-color: #F4900C; }
html[data-empresa="elenst"][data-origen="vyxta"] .entrar .boton-principal { background: #F4900C; color: #1a0f00; }
@media (max-width: 700px) {
  html[data-empresa="elenst"] .entrar {
    background: radial-gradient(circle at 92% 6%, rgba(240, 122, 26, .38), transparent 45%),
                linear-gradient(160deg, #2b2f36, #1c1f24);
  }
  html[data-empresa="elenst"][data-origen="vyxta"] .entrar {
    background: radial-gradient(circle at 90% 8%, rgba(244, 144, 12, .3), transparent 45%),
                linear-gradient(160deg, #07121f, #12304d);
  }
}

html[data-empresa="elenst"] .entrar .boton-secundario { border-color: #F07A1A; color: #b8560a; }
html[data-empresa="elenst"][data-origen="vyxta"] .entrar .boton-secundario { border-color: #F4900C; color: #9a5a05; }

/* LAS LICENCIAS DEL CLIENTE (07-10-2026, licencias.js): una ficha por licencia,
   con su semáforo y una barra de cuánto del periodo ya corrió. */
.ficha.licencia { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: start; }
.licencia-tiempo { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 200px; }
.licencia-documentos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.barra-licencia { width: 200px; height: 8px; border-radius: 4px; background: #E6E9EE; overflow: hidden; }
.barra-licencia span { display: block; height: 100%; background: var(--verde); }
.barra-licencia span.atencion { background: #D98B00; }
.barra-licencia span.mal { background: var(--rojo); }
.insignia.atencion { background: #FFF4DE; color: #8A5A00; border-color: #F3D9A4; }
@media (max-width: 640px) {
  .ficha.licencia { grid-template-columns: 1fr; }
  .licencia-tiempo { align-items: flex-start; min-width: 0; }
  .barra-licencia { width: 100%; }
}

/* EL DIMENSIONADOR (07-10-2026, cotizador.js): arriba del chat, con su insignia IA. */
.ficha.dimensionador { margin-bottom: 16px; }
.ficha.dimensionador textarea { width: 100%; box-sizing: border-box; margin: 8px 0; }
.ficha.dimensionador h4 { margin: 12px 0 4px; }
.tabla-desliza { overflow-x: auto; }
.paquetes-dim { margin-top: 12px; padding-top: 10px; border-top: 1px solid #E6E9EE; }
.paquetes-dim div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* EL PRECIO SUGERIDO Y LA CALCULADORA DE SERVICIOS (08-10-2026, cotizador.js:
   «＋ Producto con mi precio», «＋ Equipo de tercero» y «＋ Servicio
   (calculadora)»). Pensado primero para el celular: las filas de personal van
   en tarjetas, y en pantallas angostas el costo por hora baja a su propia fila
   para que el número se lea entero. */
.pista-precio { font-size: 13px; color: var(--gris); margin: -8px 0 14px; }
.serv-fila { border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px 0; margin-bottom: 10px; }
.serv-fila-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.serv-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; }
.serv-tres input { margin-bottom: 10px; }
.serv-resultado { margin: 4px 0 14px; }
.serv-resultado .tabla { width: 100%; display: table; white-space: normal; } /* dos columnas caben: sin desplazar */
.serv-resultado .tabla td:last-child { text-align: right; }
.serv-nota { margin: 6px 0 0; color: var(--gris); line-height: 1.45; }
.enlace-linea {
  border: 0; background: none; padding: 0; font: inherit; font-size: inherit;
  color: var(--azul); text-decoration: underline; cursor: pointer;
}
#dialogo-cuerpo h4 { margin: 14px 0 8px; }
@media (max-width: 480px) {
  .serv-tres { grid-template-columns: 1fr 1fr; }
  .serv-tres .serv-ancho { grid-column: 1 / -1; }
}

/* ===========================================================================
   CUENTA EN REVISIÓN Y «COMPLETAR DOCUMENTOS» — 08-10-2026
   La franja de arriba de «Buscar precios» y el cuadro para subir los documentos
   que faltan. Botón grande y a todo el ancho en el celular: es lo que el
   cliente tiene que encontrar sin que nadie se lo explique.
   =========================================================================== */
.banda-revision { border-left: 4px solid var(--azul); margin-bottom: 1rem; }
.banda-revision .boton { width: 100%; max-width: 22rem; }
.doc-fila { margin: .8rem 0; }
.doc-fila label { display: block; margin-bottom: .3rem; font-weight: 600; }
.doc-fila input[type=file] { width: 100%; max-width: 100%; }
#cuadro-documentos .boton { width: 100%; max-width: 22rem; }
#cuadro-documentos details { margin-top: 1rem; }
#cuadro-documentos summary { cursor: pointer; font-weight: 600; }
.ayuda-recuperar { margin-top: .8rem; font-size: 14px; line-height: 1.45; }

/* ===========================================================================
   COMPARTIR UNA COTIZACIÓN — 08-10-2026
   El encabezado de la versión sin membrete de Elenst (logo del integrador +
   sus datos) y el cuadro del enlace recién creado. Solo clases: la política
   de contenido del panel no deja estilos en línea.
   =========================================================================== */
.hoja-marca { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; }
.hoja-logo { max-height: 64px; max-width: 160px; height: auto; width: auto; }
.opciones-compartir select, .opciones-compartir input, .opciones-compartir textarea { max-width: 100%; }
.enlace-nuevo { border-left: 4px solid var(--azul); margin-top: 1rem; }
.enlace-url { width: 100%; margin: .6rem 0; font: inherit; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 6px; }
.enlace-nuevo .boton { width: 100%; max-width: 22rem; }
@media (max-width: 600px) {
  .hoja-cotizacion { padding: 14px; }
  .hoja-cabeza { flex-direction: column; }
  .hoja-vendedor { text-align: left; }
}

/* ===========================================================================
   PEDIDOS DE JHONATAN DEL 12-10-2026 (hechos el 13-10): la barra superior con
   el menú de la cuenta, la ficha de producto con miniatura y el precio en su
   columna, el catálogo por categorías con filtros, las tarjetas promocionales
   del cliente, Cotizar a dos columnas y el PDF con membrete. Va aquí y no en
   estilos.css (que lo tocan otras sesiones); mismas variables y mismo radio.
   =========================================================================== */

/* -- El menú de la cuenta, arriba a la derecha ---------------------------- */
.cuenta-menu { position: relative; margin-left: 6px; }
.cuenta-boton {
  display: flex; align-items: center; gap: 8px; border: 1px solid transparent; background: none;
  padding: 3px 8px 3px 3px; border-radius: 999px; cursor: pointer; font: inherit; color: var(--tinta);
}
.cuenta-boton:hover, .cuenta-boton[aria-expanded="true"] { background: var(--fondo); border-color: var(--linea); }
.cuenta-boton .inicial { flex: 0 0 34px; height: 34px; font-size: 13px; }
.cuenta-nombre { font-size: 14px; font-weight: 600; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuenta-flecha { font-size: 11px; color: var(--gris2); }
.cuenta-desplegable {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 250px; max-width: calc(100vw - 24px);
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: 0 12px 34px rgba(45, 55, 72, .16); padding: 6px; z-index: 20;
}
.cuenta-quien { display: flex; flex-direction: column; padding: 10px 12px 12px; border-bottom: 1px solid var(--linea); margin-bottom: 6px; min-width: 0; }
.cuenta-quien strong { font-size: 14px; line-height: 1.3; }
.cuenta-quien span { font-size: 12px; color: var(--gris2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuenta-opcion {
  display: flex; width: 100%; align-items: center; gap: 8px; border: 0; background: none; text-align: left;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--gris); padding: 10px 12px; border-radius: 8px;
  cursor: pointer; text-decoration: none;
}
.cuenta-opcion:hover { background: var(--fondo); color: var(--tinta); }
.cuenta-salir { color: var(--rojo); border-top: 1px solid var(--linea); border-radius: 0 0 8px 8px; margin-top: 4px; }
.cuenta-salir:hover { background: #FDECEF; color: var(--rojo); }
#enlace-sitio-menu { display: none; }   /* en el escritorio ya está el enlace de la barra */
@media (max-width: 860px) {
  .cuenta-nombre, .cuenta-flecha { display: none; }
  .cuenta-boton { padding: 2px; }
  #enlace-sitio-menu { display: flex; }
}

/* -- La ficha de producto: miniatura · texto · precio ---------------------- */
.ficha.producto .producto-cabeza {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px 14px; align-items: start; margin-bottom: 12px;
}
.ficha.producto .producto-texto { min-width: 0; }
.ficha.producto .producto-texto strong { display: block; overflow-wrap: anywhere; line-height: 1.35; }
.ficha.producto .ficha-precio { max-width: none; text-align: right; white-space: nowrap; padding-left: 4px; }
.ficha.producto .ficha-precio strong { font-size: 20px; }
.ficha.producto .ficha-precio small { display: block; white-space: normal; }
.producto-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.producto-etiquetas .etiqueta { font-weight: 600; }
.etiqueta.entrega-inmediata { background: #E7F6EC; color: var(--verde); border-color: #BFE6CC; }
.etiqueta.entrega-bajo_pedido { background: #EAF3FA; color: var(--azul); border-color: #C9DFEF; }
.etiqueta.entrega-importacion { background: #FFF4DE; color: #8A5A00; border-color: #F3D9A4; }
.miniatura {
  width: 72px; height: 72px; border-radius: 10px; border: 1px solid var(--linea); background: #fff;
  display: grid; place-items: center; overflow: hidden; position: relative;
}
/* La imagen va encima del marcador y se pide desde el principio: una <img
   loading="lazy"> con display:none nunca entra al viewport y nunca se carga
   (medido el 13-10-2026). Si falla con las cuatro extensiones, app.js la quita
   y queda el marcador; si carga, lo tapa. */
.miniatura-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.miniatura.con-foto .miniatura-vacia { display: none; }
.miniatura-vacia { font-size: 26px; color: #CBD3DE; }
@media (max-width: 560px) {
  .ficha.producto .producto-cabeza { grid-template-columns: 56px minmax(0, 1fr); }
  .miniatura { width: 56px; height: 56px; }
  .ficha.producto .ficha-precio { grid-column: 2; text-align: left; padding-left: 0; }
  .ficha.producto .ficha-precio strong { display: inline; margin-right: 8px; }
  .ficha.producto .ficha-precio small { display: inline; margin-right: 8px; }
}

/* -- El catálogo por categorías ------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.chips-sub { padding-left: 10px; border-left: 3px solid var(--linea); }
.chip {
  border: 1px solid var(--linea); background: #fff; color: var(--gris); font: inherit; font-size: 13px; font-weight: 600;
  padding: 6px 11px; border-radius: 999px; cursor: pointer;
}
.chip small { color: var(--gris2); font-weight: 500; }
.chip:hover { border-color: var(--azul2); color: var(--azul); }
.chip.activa { background: var(--azul); border-color: var(--azul); color: #fff; }
.chip.activa small { color: #D6E7F3; }
.migas-cat { margin: 2px 0 10px; font-size: 13px; color: var(--gris2); }
.filtros { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: end; margin: 6px 0 16px; }
.filtros label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; color: var(--gris2); text-transform: uppercase; letter-spacing: .03em; }
.filtros input, .filtros select { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 8px; background: #fff; min-width: 0; }
.filtros input { width: 9rem; }
.filtros .boton { align-self: end; }
@media (max-width: 560px) {
  .filtros label { flex: 1 1 45%; }
  .filtros input { width: 100%; }
}

/* -- Tarjetas promocionales (ERP y dimensionador) -------------------------- */
.promos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 22px 0 10px; }
.promo { position: relative; border-radius: 16px; padding: 22px 22px 20px; color: #fff; overflow: hidden; box-shadow: 0 10px 28px rgba(10, 87, 139, .18); }
.promo h3 { color: #fff; font-size: 19px; margin: 8px 0 8px; letter-spacing: -.01em; }
.promo p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .92); }
.promo-sello { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: rgba(255, 255, 255, .22); padding: 3px 10px; border-radius: 999px; }
.promo-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.promo .boton { border-color: rgba(255, 255, 255, .55); color: #fff; background: transparent; text-decoration: none; }
.promo .boton.lleno { background: #fff; color: #0A578B; border-color: #fff; }
.promo-erp { background: radial-gradient(circle at 88% 12%, rgba(69, 191, 199, .55), transparent 45%), linear-gradient(145deg, #0A578B, #0E6AB2); }
.promo-dim { background: radial-gradient(circle at 90% 10%, rgba(255, 204, 128, .55), transparent 45%), linear-gradient(145deg, #B8560A, #F07A1A); }
.promo-dim .boton.lleno { color: #8a3f03; }

/* -- Cotizar: el buscador a la izquierda y las líneas a la derecha --------- */
/* Jhonatan (12-10-2026, captura de 1920 px): «La cotización» quedaba debajo
   del buscador y la derecha vacía. En pantallas anchas la caja se ensancha y
   las líneas van al lado; en el celular se apilan como antes. */
.contenido.ancha { max-width: none; }
.cotizar-columnas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 26px; align-items: start; }
@media (min-width: 1180px) {
  .cotizar-columnas { grid-template-columns: minmax(0, 7fr) minmax(0, 8fr); }
  .cotizar-der { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; padding-right: 2px; }
}
.cotizar-der .tabla { font-size: 13px; }
.cotizar-der .tabla th, .cotizar-der .tabla td { padding: 7px 8px; }
.cotizar-der .celda { width: 6.2rem; }
.cotizar-der .celda.corta { width: 3.6rem; }
.cotizar-der .rejilla { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cotizar-der .dato .numero { font-size: 21px; }
.celda-con-recargo { display: block; font-size: 11px; color: var(--gris2); margin-top: 2px; white-space: nowrap; }
.linea-acciones { display: flex; gap: 4px; flex-wrap: nowrap; }
.nota-credito { font-size: 12.5px; color: var(--gris); margin: -6px 0 10px; }

/* -- La hoja con membrete (PDF): logo y datos de Elenst ------------------- */
.hoja-marca-elenst { display: flex; gap: 14px; align-items: flex-start; }
.hoja-marca-elenst img { width: 64px; height: 64px; object-fit: contain; }
.hoja-marca-elenst .hoja-datos-empresa { font-size: 12.5px; line-height: 1.45; color: var(--gris); }
.hoja-marca-elenst .hoja-datos-empresa strong { font-size: 15px; color: var(--tinta); }
.hoja-cotizacion .hoja-numero h2 { margin: 0; font-size: 22px; }
.hoja-cotizacion .hoja-numero p { margin: 2px 0 0; }
.hoja-cotizacion .tabla td.n, .hoja-cotizacion .tabla th.n { text-align: right; white-space: nowrap; }
.hoja-cotizacion .hoja-terminos h3 { margin-top: 10px; }
.nota-impresion { font-size: 12.5px; color: var(--gris2); }
@media print {
  @page { margin: 14mm 12mm; }
  .hoja-cotizacion .tabla { font-size: 12px; }
}