/* Diseño primero para celular (375 px). Sin marcos externos.
   Mismo lenguaje que la ficha de taller: blanco y negro para todo, y el color reservado
   para los triángulos y sus vigas. En negro lleno va lo que cambia de un domo a otro. */

:root {
  --fondo: #ffffff;
  --superficie: #ffffff;
  --texto: #111111;
  --suave: #555555;
  --borde: #111111;
  --linea: #bbbbbb;
  --acento: #111111;
  --acento-texto: #ffffff;
  --cota: #aa3333;
  --error: #aa3333;
  --error-fondo: #fbf1ef;
  --ok: #111111;
  --ok-fondo: #f6f6f6;
  --aviso-fondo: #f6f6f6;
  --madera: #f1e3c6;
  --radio: 2px;
  --toque: 48px;
  --mono: Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

[hidden] { display: none !important; }

.asistente, .panel {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px 120px;
}

/* Cabecera: el bloque negro de la ficha. */
.cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin: 0 -16px 12px;
  padding: 12px 16px;
  background: var(--acento);
  color: var(--acento-texto);
}
.marca { margin: 0; font-weight: 700; font-size: 20px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.1; }
.marca { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; font-size: clamp(15px, 4.4vw, 20px); letter-spacing: .1em; }
.marca .voluta { width: 36px; height: 36px; flex: 0 0 auto; }
.marca small { display: block; font-weight: 400; font-size: 10px; letter-spacing: .04em; text-transform: none; color: #dddddd; }
.contador {
  margin: 0;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto);
  background: #ffffff;
  padding: 2px 8px;
  border-radius: var(--radio);
}
.progreso { flex-basis: 100%; height: 4px; background: #555555; overflow: hidden; }
.barra { height: 100%; width: 20%; background: #ffffff; transition: width .2s; }

h1 { font-size: 24px; line-height: 1.15; margin: 16px 0 14px; letter-spacing: .01em; }
h2 { font-size: 19px; margin: 0 0 8px; }
h3 {
  font-size: 13px;
  margin: 22px 0 6px;
  padding-top: 5px;
  border-top: 2.5px solid var(--borde);
  text-transform: uppercase;
  letter-spacing: .09em;
}

.campo { margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.campo > label, legend, #tab-pdf label {
  display: block;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
  padding: 0;
}
#tab-pdf label { margin-top: 10px; }

input[type="text"], input[type="number"], select {
  display: block;
  width: 100%;
  min-height: var(--toque);
  padding: 10px 12px;
  font: inherit;
  font-family: var(--mono);
  font-weight: 700;
  color: inherit;
  background: var(--superficie);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio);
}
select { font-family: inherit; font-weight: 400; }
#tab-pdf input { margin-bottom: 10px; }
input[type="text"]:focus, input[type="number"]:focus, select:focus, input[type="range"]:focus-visible, .boton:focus-visible,
[role="tab"]:focus-visible, .opcion:focus-within {
  outline: 3px solid color-mix(in srgb, var(--cota) 55%, transparent);
  outline-offset: 2px;
}
[aria-invalid="true"] { border-color: var(--error) !important; }

input[type="range"] {
  display: block;
  width: 100%;
  min-height: var(--toque);
  margin: 8px 0 0;
  accent-color: var(--acento);
}
.escala { display: flex; justify-content: space-between; color: var(--suave); font-size: 13px; font-family: var(--mono); }

.error { color: var(--error); font-size: 15px; margin: 4px 0 0; }
.error:empty { display: none; }
.ayuda { color: var(--suave); font-size: 15px; margin: 6px 0 12px; }

.opciones { display: flex; gap: 8px; }
.opcion {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--toque);
  padding: 8px 12px;
  background: var(--superficie);
  border: 1.5px solid var(--linea);
  border-radius: var(--radio);
  cursor: pointer;
}
.opcion:has(input:checked) { border-color: var(--acento); background: var(--acento); color: var(--acento-texto); }
.opcion input { width: 20px; height: 20px; margin: 0; accent-color: #ffffff; }

.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Datos: rótulo chico arriba y el valor en negro lleno, como los largos de la ficha. */
.datos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 16px; }
.datos > div {
  background: var(--superficie);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio);
  padding: 8px 10px 10px;
  min-width: 0;
}
.datos dt { color: var(--suave); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.datos dd {
  display: inline-block;
  margin: 0;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  background: var(--acento);
  color: var(--acento-texto);
  padding: 1px 8px 2px;
  border-radius: 3px;
}
#resumen { display: block; background: var(--superficie); border: 1.5px solid var(--borde); border-radius: var(--radio); padding: 2px 12px; }
#resumen > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--linea);
}
#resumen > div:last-child { border-bottom: 0; }
#resumen dt { font-size: 11px; margin: 0; }
#resumen dd { font-size: 15px; text-align: right; background: none; color: var(--texto); padding: 0; }

.resultado {
  background: var(--ok-fondo);
  border: 1.5px solid var(--borde);
  border-left-width: 7px;
  border-radius: var(--radio);
  padding: 10px 12px;
  margin: 0;
}
.resultado:empty { display: none; }
.resultado.problema { background: var(--error-fondo); color: var(--error); border-color: var(--error); }

.perfil { background: var(--superficie); border: 1.5px solid var(--borde); border-radius: var(--radio); padding: 12px; }
.perfil ul, .avisos, .problemas, .revisiones { margin: 0; padding-left: 20px; }
.perfil li, .avisos li, .problemas li, .revisiones li { margin-bottom: 6px; }
.perfil .ayuda { margin: 0; }

.verificacion { font-weight: 700; border: 1.5px solid var(--borde); border-left-width: 7px; border-radius: var(--radio); padding: 10px 12px; margin: 0 0 12px; }
.verificacion:empty { display: none; }
.verificacion.ok { background: var(--ok-fondo); color: var(--ok); }
.verificacion.mal { background: var(--error-fondo); color: var(--error); border-color: var(--error); }
.problemas { color: var(--error); margin-bottom: 12px; }
.avisos:not(:empty) {
  background: var(--error-fondo);
  border: 1.3px solid var(--cota);
  border-left-width: 6px;
  border-radius: var(--radio);
  padding: 12px 12px 6px 32px;
  margin-top: 12px;
}

.navegacion {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--fondo);
  border-top: 2.5px solid var(--borde);
}
/* En pantalla ancha los botones van con la columna de la app, justo bajo lo que se está llenando (Lobo, 2026-10-30: «quedan como a 3 cuadras»). */
@media (min-width: 700px) {
  .asistente { padding-bottom: 32px; }
  .navegacion { position: sticky; margin: 24px -16px 0; }
}
.boton {
  flex: 1;
  min-height: var(--toque);
  padding: 10px 16px;
  font: inherit;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--acento-texto);
  background: var(--acento);
  border: 1.5px solid var(--acento);
  border-radius: var(--radio);
  cursor: pointer;
}
.boton.secundario { color: var(--acento); background: var(--superficie); }
.cabecera .boton { flex: 0 0 auto; min-height: 40px; padding: 6px 12px; font-size: 14px; border-color: #ffffff; }
#tab-pdf .boton { width: 100%; }

/* Las cuatro pestañas: el menú principal del domo. Grande, y se queda arriba mientras se baja por el contenido. */
.rotulo-pestanas { margin: 18px 0 6px; padding-top: 5px; border-top: 2.5px solid var(--borde); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
.pestanas { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; border: 2.5px solid var(--borde); background: var(--superficie); }
[role="tab"] {
  position: relative;
  min-height: 84px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font: inherit;
  font-size: clamp(12.5px, 3.5vw, 15px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: 6px 2px;
  color: var(--acento);
  background: var(--superficie);
  border: 0;
  border-right: 1.5px solid var(--borde);
  border-radius: 0;
  cursor: pointer;
}
/* El dibujo va arriba, en la tinta de la pestaña: negro sobre blanco, blanco sobre negro. */
[role="tab"] svg { order: -1; width: 36px; height: 24px; margin-bottom: 1px; }
[role="tab"] small { font-size: 10.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--suave); }
[role="tab"]:last-child { border-right: 0; }
[role="tab"]:hover { background: var(--ok-fondo); }
[role="tab"][aria-selected="true"] { color: var(--acento-texto); background: var(--acento); }
[role="tab"][aria-selected="true"] small { color: #dddddd; }
/* La pestaña elegida apunta a su contenido. */
[role="tab"][aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 0; height: 0; margin-left: -9px; border: 9px solid transparent; border-bottom: 0; border-top-color: var(--acento); }
.contenido { background: var(--superficie); border: 2.5px solid var(--borde); border-top: 0; border-radius: 0; padding: 20px 14px 14px; }
.visor { height: 300px; margin: 0 0 10px; border: 1.5px solid var(--borde); border-radius: 0; overflow: hidden; }
#tab-armado svg { width: 100%; height: auto; }
.tipos-triangulo { list-style: none; padding: 0; margin: 0; }
.tipos-triangulo li { margin: 0 0 8px; }
.sello { display: inline-block; padding: 2px 8px; border: 1.5px solid var(--borde); font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }

/* Tarjeta de viga: bloque de su color arriba, con la letra y el largo en negro. */
.tarjeta-tipo { border: 1.5px solid var(--borde); border-radius: 0; padding: 0 12px 12px; margin: 0 0 12px; }
.tarjeta-tipo .cab-viga { display: flex; align-items: center; gap: 10px; margin: 0 -12px 10px; padding: 8px 12px; }
.tarjeta-tipo h2 { margin: 0; color: #ffffff; font-size: 22px; text-shadow: 0 0 3px #000, 0 0 1px #000; }
.tarjeta-tipo .largo-viga {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  background: var(--acento);
  color: var(--acento-texto);
  padding: 3px 8px 4px;
  border-radius: 3px;
}
.tarjeta-tipo .largo-viga i { font-style: normal; font-size: 12px; font-weight: 400; color: #cccccc; margin-left: 3px; }
.tarjeta-tipo .cuantas { margin-left: auto; font-family: var(--mono); font-weight: 700; color: #ffffff; text-shadow: 0 0 3px #000, 0 0 1px #000; }
.tarjeta-tipo svg { width: 100%; height: auto; }
.aviso-prueba { font-weight: bold; margin: 8px 0 0; border-top: 1px solid var(--linea); padding-top: 8px; }

/* Muestras de triángulos (las mismas que abren la ficha). */
.triangulos-panel:empty { display: none; }
.triangulos-panel { margin: 10px 0 0; }
.triangulos-panel .titulo, .esquema figcaption { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 4px; }
.resumen { display: grid; gap: 6px; }
.chip { border: 1.5px solid var(--borde); background: #ffffff; display: flex; flex-direction: column; min-width: 0; }
.chip .bloq { padding: 5px 6px 2px; flex: 1; }
.chip .bloq svg.tri { width: 100%; height: auto; display: block; }
svg.tri text { font-family: Arial, sans-serif; } svg.tri .let { font-size: 40px; font-weight: bold; } svg.tri .pt { font-size: 30px; fill: var(--cota); }
.chip .sw { display: flex; height: 26px; border-top: 1.5px solid var(--borde); border-bottom: 1.5px solid var(--borde); }
.chip .sw span { flex: 1; display: flex; align-items: center; justify-content: center; color: #ffffff; font-weight: 700; font-size: 14px; text-shadow: 0 0 3px #000, 0 0 1px #000; }
.chip .rot { padding: 3px 6px 5px; font-size: 11px; line-height: 1.25; }
.chip .rot b { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.chip .rot .x { font-family: var(--mono); font-size: 15px; font-weight: 700; }

/* Esquemas de los pasos: dibujo lineal con cotas rojas, como en la ficha. */
.esquema { margin: 0 0 16px; border: 1.5px solid var(--borde); padding: 8px 10px 6px; }
.esquema:empty, .esquema:has(> div:empty) { display: none; }
.esquema svg { width: 100%; height: auto; display: block; max-height: 190px; }
.sierra { display: grid; grid-template-columns: 1fr; gap: 6px; }
.fijcaja { border: 1px solid #777777; padding: 4px 6px; font-size: 12px; line-height: 1.2; text-align: center; }
.fijcaja svg { margin-bottom: 2px; }
.esquema small { color: var(--suave); font-size: 12px; }
@media (min-width: 520px) { .sierra { grid-template-columns: repeat(3, 1fr); } }

/* Material: lo que se compra, a dónde va cada metro y cómo se corta cada pieza. */
.titulo-seccion { margin: 18px 0 6px; padding-top: 5px; border-top: 2.5px solid var(--borde); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
.titulo-seccion:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.largo-compra { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 12px; font-size: 14px; }
.largo-compra label { font-weight: 700; }
.largo-compra input { width: 5.5em; min-height: 44px; padding: 0 10px; border: 1.5px solid var(--borde); border-radius: 2px; font-family: var(--mono); font-weight: 700; font-size: 18px; background: #ffffff; color: inherit; }
.largo-compra .error { flex-basis: 100%; margin: 0; }
.compra { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 10px; font-size: 15px; }
.var.grande { font-size: 24px; padding: 2px 10px 4px; }
.uso { display: flex; height: 26px; border: 1.5px solid var(--borde); }
.uso span { min-width: 3px; }
.domo { background: var(--madera); }
.despunte { background: repeating-linear-gradient(135deg, #ffffff 0 4px, #999999 4px 5.5px); border-left: 1.5px solid var(--borde); }
.reserva { background: #ffffff; border-left: 1.5px dashed var(--borde); }
.leyenda { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; display: flex; flex-direction: column; gap: 3px; }
.leyenda i { display: inline-block; width: 16px; height: 12px; margin-right: 7px; border: 1.5px solid var(--borde); vertical-align: -1px; }
.leyenda i.reserva { border-style: dashed; }
.acomodo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.tabla-corte { display: flex; align-items: center; gap: 8px; }
.tabla-corte .cuantas { flex: 0 0 44px; font-family: var(--mono); font-weight: 700; font-size: 14px; text-align: right; }
.barra-corte { flex: 1; display: flex; height: 24px; border: 1.5px solid var(--borde); min-width: 0; }
.barra-corte .tramo { display: flex; align-items: center; justify-content: center; color: #ffffff; font-weight: 700; font-size: 13px; text-shadow: 0 0 3px #000, 0 0 1px #000; border-right: 1.5px solid var(--borde); min-width: 0; }
.barra-corte .sobra { min-width: 4px; background: repeating-linear-gradient(135deg, #ffffff 0 4px, #999999 4px 5.5px); }
.barra-corte .tramo:last-of-type { border-right: 1.5px solid var(--borde); }
.tabla-corte .resto { flex: 0 0 52px; font-family: var(--mono); font-size: 12px; color: var(--suave); white-space: nowrap; }
.tabla-corte .cuantas { flex-basis: 36px; }

/* Inicio: las cuatro rutas sueltas, en zigzag, cada una más grande que la anterior; sin cajas. */
.inicio { max-width: 560px; margin: 0 auto; padding: 0 16px 110px; }
.inicio h1 { font-size: 34px; line-height: 1.02; margin: 14px 0 4px; letter-spacing: -.01em; }
.inicio > .ayuda { margin: 0 0 6px; }
.rutas { display: flex; flex-direction: column; }
.ruta { display: flex; align-items: flex-start; gap: 8px; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ruta.der { flex-direction: row-reverse; text-align: right; }
.ruta + .ruta { margin-top: -26px; }
.ruta img { display: block; flex: 0 0 auto; height: auto; }
.ruta[data-ruta="casita"] img { width: 44%; }
.ruta[data-ruta="invernadero"] img { width: 54%; }
.ruta[data-ruta="glamping"] img { width: 59%; }
.ruta[data-ruta="cabana"] img { width: 61%; }
.ruta[data-ruta="invernadero"] { margin-top: -2px; }
.ruta svg { flex: 0 0 auto; width: 30px; height: 18px; margin-top: 34%; }
.ruta[data-ruta="casita"] svg { margin-top: 8%; }
.ruta .rotulo { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 22%; }
.ruta[data-ruta="casita"] .rotulo { padding-top: 2%; }
.ruta.der .rotulo { align-items: flex-end; }
.ruta .rotulo b { font-size: 18px; line-height: 1.05; }
.ruta .chips { display: flex; flex-wrap: nowrap; gap: 5px; align-items: center; }
.ruta .frec { font-family: var(--mono); font-weight: 700; font-size: 12px; border: 1.5px solid var(--borde); padding: 0 5px; border-radius: 3px; white-space: nowrap; }
.ruta .var { font-size: 12px; padding: 1px 6px; }
.ruta:focus-visible { outline: 3px solid color-mix(in srgb, var(--cota) 55%, transparent); outline-offset: 2px; }
.var { display: inline-block; font-family: var(--mono); font-weight: 700; font-size: 13px; background: var(--acento); color: var(--acento-texto); padding: 1px 7px 2px; border-radius: 3px; white-space: nowrap; }
.ruta-nota { margin: 0 0 14px; font-size: 15px; }

/* Los tres tamaños de triángulo, con su domo. El <select> queda detrás, como dato. */
.frecuencias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 6px; }
.frecuencias button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 92px; padding: 6px 6px 5px; font: inherit; color: var(--texto); background: var(--superficie); border: 1.5px solid var(--linea); border-radius: var(--radio); cursor: pointer; }
.frecuencias button img { display: block; width: 100%; height: 52px; object-fit: contain; object-position: center bottom; }
.frecuencias .cod { font-family: var(--mono); font-weight: 700; font-size: 13px; padding: 0 6px; border-radius: 3px; }
.frecuencias .que { font-size: 12px; color: var(--suave); }
.frecuencias button[aria-pressed="true"] { border: 3px solid var(--acento); padding: 4.5px 4.5px 3.5px; }
.frecuencias button[aria-pressed="true"] .cod { background: var(--acento); color: var(--acento-texto); }
.frecuencias button[aria-pressed="true"] .que { color: var(--texto); font-weight: 700; }

/* Tu domo: el croquis en tinta junto a sus datos, bajo el visor 3D. */
.tu-domo:empty { display: none; }
.tu-domo { display: flex; gap: 10px; align-items: center; margin: 0 0 4px; }
.tu-domo .croquis { flex: 0 0 46%; min-width: 0; }
.tu-domo .croquis svg { display: block; width: 100%; height: auto; }
.tu-domo .datos-domo { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; min-width: 0; }
.tu-domo .titulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin: 0; }
.tu-domo .ayuda { margin: 0; font-size: 13px; }

/* La ficha mostrada encima de la app, cuando el navegador no abre una pestaña nueva. */
/* La hoja de compra de una ficha Paso a paso. */
.compra-ficha { position: fixed; inset: 0; z-index: 30; background: rgba(17, 17, 17, .55); display: flex; align-items: flex-end; justify-content: center; }
.compra-ficha .hoja { width: 100%; max-width: 560px; max-height: 100%; overflow-y: auto; background: #ffffff; border: 2.5px solid var(--borde); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.compra-ficha .hoja > * { margin: 0; }
.compra-ficha .pronto { font-size: 18px; font-weight: 700; border: 1.5px solid var(--cota); border-left-width: 6px; background: var(--error-fondo); padding: 8px 12px; }
.compra-ficha .nombre { font-size: 22px; font-weight: 700; line-height: 1.15; }
.compra-ficha .var.grande { align-self: flex-start; }
.compra-ficha .boton { width: 100%; text-decoration: none; text-align: center; }
.compra-ficha label { font-weight: 700; margin-top: 8px; padding-top: 10px; border-top: 1.5px solid var(--borde); }
.compra-ficha input { min-height: var(--toque); padding: 0 10px; border: 1.5px solid var(--borde); border-radius: 2px; font-family: var(--mono); font-size: 15px; width: 100%; }
@media (min-width: 600px) { .compra-ficha { align-items: center; } }
.visor-ficha { position: fixed; inset: 0; z-index: 20; background: #ffffff; display: flex; flex-direction: column; }
.visor-ficha .cabecera { margin: 0; flex: 0 0 auto; }
.visor-ficha iframe { flex: 1; width: 100%; border: 0; background: #ffffff; }

/* ---------- Impresión (PDF) ---------- */
.solo-impresion { display: none; }

@media print {
  #inicio, #asistente, .cabecera, .visor, .rotulo-pestanas, .pestanas, #contenido, .triangulos-panel, .tu-domo { display: none !important; }
  body { background: #fff; color: #000; }
  .solo-impresion { display: block; font-size: 10pt; }
  .solo-impresion h1 { font-size: 16pt; margin: 0 0 4px; }
  .solo-impresion p, .solo-impresion li { margin: 2px 0; }
  .solo-impresion dl { margin: 6px 0; }
  .solo-impresion dl div { display: flex; gap: 8px; }
  .solo-impresion dt { font-weight: bold; min-width: 130px; }
  .solo-impresion dd { margin: 0; }
  .solo-impresion table { width: 100%; border-collapse: collapse; margin: 8px 0; }
  .solo-impresion th, .solo-impresion td { border: 1px solid #888; padding: 2px 6px; text-align: left; }
  .solo-impresion tr { break-inside: avoid; }
}