/* ============================================================
   KIT-FLANDES · PIEZA 11 · INSIGHTS — estilos
   Pareja de kit/insights.js.
   ============================================================ */

.kit-ins__fab {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0));
  z-index: 9350;
  appearance: none;
  border: 0;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--k-marca);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: grab;
  box-shadow: var(--k-sombra-marca);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  transition: transform .14s ease;
  -webkit-tap-highlight-color: transparent;
}
.kit-ins__fab:hover { transform: scale(1.06); }
.kit-ins__fab:active { transform: scale(.94); }
.kit-ins__fab[hidden] { display: none; }
/* 4.9 · la vista tiene un boton fijo abajo (Siguiente, Guardar): el robot
   sube para no taparlo. Si la persona ya lo movio, manda donde lo dejo. */
.kit-ins__fab--alto:not(.kit-ins__fab--puesto) { bottom: calc(92px + env(safe-area-inset-bottom, 0)); }
/* 4.9 · clic sostenido: se "despega" antes de poder arrastrarlo */
.kit-ins__fab--mueve {
  cursor: grabbing;
  transform: scale(1.16);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .32), 0 0 0 6px rgba(var(--k-marca-rgb), .22);
  transition: transform .12s ease, box-shadow .12s ease;
}

/* ── panel ── */

.kit-ins__hoja { width: min(520px, 100%); }
.kit-ins__robot { font-size: 19px; }
.kit-ins__t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kit-ins__cuerpo { display: flex; flex-direction: column; gap: 16px; }

.kit-ins__guia {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: rgba(var(--k-marca-rgb), .07);
  border: 1px solid rgba(var(--k-marca-rgb), .18);
  border-radius: var(--k-r-md);
  padding: 13px 14px;
}
.kit-ins__guia-ico { color: var(--k-marca); flex: 0 0 auto; margin-top: 1px; }
:root[data-tema="oscuro"] .kit-ins__guia-ico { color: var(--k-marca-clara); }
.kit-ins__guia p { margin: 0; font: 400 14px/1.6 var(--k-fuente); color: var(--k-tinta); }
.kit-ins__guia b { font-weight: 700; }

/* el boton de la voz: siempre a mano, y en rojo suave mientras suena */
.kit-ins__voz {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--k-linea);
  background: var(--k-papel-2);
  color: var(--k-tinta);
  border-radius: var(--k-r-pill);
  padding: 6px 12px;
  font: 600 12.5px/1 var(--k-fuente);
  cursor: pointer;
  flex: 0 0 auto;
}
.kit-ins__voz[hidden] { display: none; }
.kit-ins__voz--on { background: var(--k-malo-fondo); border-color: var(--k-malo); color: var(--k-malo); }
.kit-ins__preg--on { background: var(--k-marca); color: #fff; border-color: var(--k-marca); }

.kit-ins__salida { display: flex; flex-direction: column; gap: 16px; }

/* ── medidas ── */

.kit-ins__medidas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.kit-ins__medida {
  background: var(--k-papel-2);
  border: 1px solid var(--k-linea);
  border-radius: var(--k-r-md);
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.kit-ins__medida b { font: 800 19px/1.15 var(--k-fuente-titulo); color: var(--k-marca); word-break: break-word; }
:root[data-tema="oscuro"] .kit-ins__medida b { color: var(--k-marca-clara); }
.kit-ins__medida span { font: 500 11px/1.3 var(--k-fuente); color: var(--k-apagado); }

/* ── reparto (barras) ── */

.kit-ins__reparto {
  grid-column: 1 / -1;
  background: var(--k-papel-2);
  border: 1px solid var(--k-linea);
  border-radius: var(--k-r-md);
  padding: 13px 14px;
}
.kit-ins__reparto > b { font: 600 12px/1 var(--k-fuente); color: var(--k-tinta-2); display: block; margin-bottom: 10px; }
.kit-ins__reparto ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.kit-ins__reparto li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 44px;
  align-items: center;
  gap: 9px;
  font: 500 12px/1.3 var(--k-fuente);
}
.kit-ins__reparto li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--k-tinta); }
.kit-ins__reparto li i {
  display: block;
  height: 7px;
  border-radius: var(--k-r-pill);
  background: var(--k-marca);
  min-width: 3px;
}
.kit-ins__reparto li b { text-align: right; color: var(--k-apagado); font-weight: 700; }

/* ── botones de pregunta y respuesta ── */

.kit-ins__botones { display: flex; flex-wrap: wrap; gap: 7px; }

.kit-ins__respuesta {
  margin: 0;
  background: rgba(var(--k-marca-rgb), .07);
  border-left: 3px solid var(--k-marca);
  border-radius: var(--k-r-sm);
  padding: 13px 15px;
  font: 400 14px/1.6 var(--k-fuente);
  color: var(--k-tinta);
  white-space: pre-wrap;
  min-height: 24px;
}

.kit-ins__pie-nota {
  margin: 0;
  font: 400 11px/1.5 var(--k-fuente);
  color: var(--k-apagado);
  border-top: 1px dashed var(--k-linea);
  padding-top: 11px;
}
.kit-ins__pie-nota b { color: var(--k-tinta-2); font-weight: 700; }

.kit-ins__vacio {
  margin: 0;
  text-align: center;
  padding: 26px 14px;
  font: 400 14px/1.5 var(--k-fuente);
  color: var(--k-apagado);
}

@media (prefers-reduced-motion: reduce) {
  .kit-ins__fab { transition: none; }
}

/* 4.9 · las preguntas pueden ser largas: que partan linea en vez de salirse */
.kit-ins__preg { white-space: normal; text-align: left; line-height: 1.3; }