/* ─── Control por voz ─────────────────────────────────────────────────────────
   Botón de micrófono (junto a Settings) + HUD flotante de confirmación.
   Usa los tokens de diseño existentes (--accent, --line, --text*, --radius, etc.)
   y la escala de 5 pasos de tipografía. Sin emojis, look uniforme con el resto. */

/* Micrófono apagado: discreto. Su SVG hereda currentColor del .btn-ghost. */
.kfvc-mic { padding: 5px 9px; }
.kfvc-mic svg { width: 15px; height: 15px; display: block; opacity: .85; }
.kfvc-mic:hover svg { opacity: 1; }

/* Encendido (escuchando): acento + latido. */
.kfvc-mic.kfvc-on {
  color: #000;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(240, 180, 41, .55);
  animation: kfvc-pulse 1.4s infinite;
}
.kfvc-mic.kfvc-on svg { opacity: 1; }
@keyframes kfvc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(240, 180, 41, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(240, 180, 41, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 180, 41, 0); }
}

/* ── HUD flotante ── */
.kfvc-hud {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 340px;
  max-width: calc(100vw - 36px);
  background: var(--bg1, #181818);
  border: 1px solid var(--line, #272727);
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  z-index: 9000;
  opacity: 0;
  transform: translateY(12px) scale(.98);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  font-family: var(--sans);
}
.kfvc-hud.show { opacity: 1; transform: none; pointer-events: auto; }

.kfvc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line, #272727);
}
.kfvc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent, #f0b429);
  box-shadow: 0 0 8px var(--accent, #f0b429);
}
.kfvc-title { font-size: .8125rem; font-weight: 700; color: var(--text, #f1f1f1); }
.kfvc-hf {
  margin-left: auto;
  display: flex; align-items: center; gap: 4px;
  font-size: .6875rem; color: var(--text2, #aaa); cursor: pointer; user-select: none;
}
.kfvc-hf input { accent-color: var(--accent, #f0b429); cursor: pointer; }
.kfvc-x {
  background: transparent; border: none; color: var(--text3, #717171);
  font-size: 1.375rem; line-height: 1; cursor: pointer; padding: 0 2px;
}
.kfvc-x:hover { color: var(--text, #f1f1f1); }

.kfvc-body { padding: 14px 14px 16px; }
.kfvc-state { display: flex; flex-direction: column; gap: 10px; }

/* Estado escuchando */
.kfvc-listen { align-items: center; text-align: center; }
.kfvc-pulse {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #000; background: var(--accent, #f0b429);
  animation: kfvc-pulse 1.4s infinite;
}
.kfvc-pulse svg { width: 26px; height: 26px; }
.kfvc-hint { font-size: .75rem; color: var(--text2, #aaa); }
.kfvc-live {
  width: 100%;
  min-height: 38px;
  padding: 9px 11px;
  background: var(--bg0, #101010);
  border: 1px solid var(--line, #272727);
  border-radius: var(--radius, 10px);
  font-size: .8125rem; color: var(--text, #f1f1f1);
  line-height: 1.4; text-align: left;
}
.kfvc-stopbtn { align-self: center; }

/* Lo dictado + lo que la IA entendió */
.kfvc-said {
  font-size: .8125rem; color: var(--text2, #aaa); font-style: italic;
  line-height: 1.4;
}
.kfvc-say {
  font-size: .9375rem; font-weight: 600; color: var(--text, #f1f1f1);
  line-height: 1.4;
}
.kfvc-acts {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 5px;
}
.kfvc-acts li {
  font-size: .8125rem; color: var(--text, #f1f1f1);
  padding: 7px 10px;
  background: var(--bg0, #101010);
  border: 1px solid var(--line, #272727);
  border-left: 3px solid var(--accent, #f0b429);
  border-radius: var(--radius, 10px);
  line-height: 1.35;
}
.kfvc-res li.ok  { border-left-color: #22c55e; }
.kfvc-res li.bad { border-left-color: var(--red, #ef4444); color: var(--text2, #aaa); }

.kfvc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.kfvc-actions .btn { flex: 1 1 auto; justify-content: center; }
.kfvc-go { font-weight: 700; }

.kfvc-thinking, .kfvc-done, .kfvc-err {
  font-size: .875rem; display: flex; align-items: center; gap: 8px;
}
.kfvc-done { font-weight: 700; color: #22c55e; }
.kfvc-err { color: var(--red, #ef4444); }
.kfvc-muted { color: var(--text3, #717171); }

.kfvc-spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--line, #333);
  border-top-color: var(--accent, #f0b429);
  animation: kfvc-spin .7s linear infinite;
}
@keyframes kfvc-spin { to { transform: rotate(360deg); } }

.kfvc-help .kfvc-acts li { border-left-color: var(--text3, #717171); }

/* En móvil el HUD ocupa el ancho disponible abajo. */
@media (max-width: 480px) {
  .kfvc-hud { left: 12px; right: 12px; bottom: 12px; width: auto; }
}