/* HONIRA · chat: cabecera, registro de burbujas, dock de respuesta */

/* ---- cabecera fija ---- */
.cabecera {
  position: fixed; top: var(--banner-h); left: 0; right: 0; z-index: 40;
  background: var(--bg); border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
  transition: box-shadow .25s var(--suave);
}
.cabecera.desplazada { box-shadow: 0 12px 20px -20px var(--ink); }
.cabecera-inner { max-width: var(--col); margin: 0 auto; padding: var(--e2) var(--gutter) var(--e1); }
.cabecera .fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e1); flex-wrap: wrap; row-gap: var(--e1); }
.cabecera .marca { display: inline-flex; align-items: center; gap: var(--e2); min-width: 0; }
.cabecera .acciones { display: flex; align-items: center; gap: var(--e1); margin-left: auto; }
.cabecera .pill { flex: 1 1 100%; order: 3; }

/* indicador de voz: ecualizador de cuatro barras, solo mientras suena */
.voz { display: none; align-items: flex-end; gap: 2px; height: 14px; width: 14px; }
.voz i { display: block; width: 2px; height: 3px; background: var(--ink); animation: onda .9s ease-in-out infinite alternate; }
.voz i:nth-child(2) { animation-delay: .12s; }
.voz i:nth-child(3) { animation-delay: .24s; }
.voz i:nth-child(4) { animation-delay: .36s; }
body.sonando .voz { display: inline-flex; }
@keyframes onda { from { height: 3px; } to { height: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .voz i { animation: none; height: 14px; }
}

.btn-sonido {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--toque); padding: var(--e0) var(--e2);
  border: 1px solid var(--line); border-radius: var(--radio-chip); background: var(--bg);
  font-size: 14px; font-weight: 600; color: var(--ink);
  transition: border-color .2s, color .2s;
}
.btn-sonido .estado { font-weight: 400; color: var(--muted); }
.btn-sonido.apagado { border-color: var(--ink); color: var(--muted); }
.btn-sonido .icono { width: 14px; height: 14px; display: inline-block; flex: 0 0 auto; }
.btn-sonido .icono .tachado { display: none; }
.btn-sonido.apagado .icono .onda-icono { display: none; }
.btn-sonido.apagado .icono .tachado { display: block; }
.pill {
  min-height: var(--toque); padding: var(--e0) var(--e3); font-size: 14px; font-weight: 700;
  border: 0; border-radius: var(--radio-chip); background: var(--ink); color: var(--inverso);
}

.camino { list-style: none; display: flex; gap: var(--e1); padding: 0; margin: var(--e1) 0 var(--e1); align-items: center; }
.camino li {
  display: flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0;
  font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden;
  transition: color .3s;
}
.camino .letra {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--muted); display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: var(--muted); background: var(--bg);
  transition: color .3s, background-color .3s, border-color .3s;
}
.camino .nombre { overflow: hidden; text-overflow: ellipsis; }
.camino li.activo { color: var(--ink); }
.camino li.activo .letra { background: var(--ink); color: var(--inverso); border-color: var(--ink); }
.camino li.hecho { color: var(--muted); }
.camino li.hecho .letra { border-color: var(--ink); color: var(--ink); }
.camino li.hecho .letra::after { content: "✓"; font-size: 13px; }
.camino li.hecho .letra span { display: none; }
@media (max-width: 359px) { .camino .nombre { display: none; } }
@media (min-width: 640px) { .camino { max-width: 440px; } }

/* progreso por bloques: tres tramos (6 · 5 · 4 preguntas) con un hueco entre ellos */
.progreso { display: flex; gap: 4px; width: 100%; height: 4px; }
.progreso i { display: block; flex: var(--n, 1) 1 0; height: 100%; background: var(--line); border-radius: 2px; overflow: hidden; }
.progreso i b {
  display: block; height: 100%; width: 100%; background: var(--ink); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--suave);
}
.progreso-texto { margin-top: var(--e1); font-size: 14px; color: var(--muted); }

/* ---- registro ---- */
.log {
  max-width: var(--col); margin: 0 auto;
  padding: 150px var(--gutter) 220px;   /* se ajusta por JS a la altura real de cabecera y dock */
  display: flex; flex-direction: column; gap: var(--e2);
}
/* marca de agua con la letra del pilar en curso: dos capas que se funden al cambiar (app.js) */
.marca-agua { position: fixed; right: -.06em; bottom: calc(var(--dock-h) + var(--e2)); z-index: -1; pointer-events: none; user-select: none; }
.marca-agua span {
  position: absolute; right: 0; bottom: 0;
  font-size: min(44vw, 300px); font-weight: 800; line-height: .8; letter-spacing: -.06em;
  color: var(--ink); opacity: 0; transition: opacity .6s var(--suave);
}
.marca-agua span.visible { opacity: .035; }

@keyframes entrar { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.burbuja, .intro-card, .nota-log { animation: entrar .22s var(--suave) both; transform-origin: bottom left; }
.burbuja.mia { transform-origin: bottom right; }

.burbuja {
  max-width: 88%; padding: var(--e3) var(--e3); border-radius: 16px;
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
  align-self: flex-start; border-bottom-left-radius: 4px;
  font-size: var(--texto); line-height: 1.45; overflow-wrap: anywhere;
}
.burbuja.pregunta { font-size: var(--pregunta); font-weight: 600; line-height: 1.35; }
.burbuja .qnum {
  display: block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); margin-bottom: var(--e1);
}
.burbuja.mia {
  align-self: flex-end; background: var(--ink); color: var(--inverso); border-color: var(--ink);
  border-bottom-left-radius: 16px; border-bottom-right-radius: 4px;
  font-weight: 600; text-align: right; min-height: var(--toque);
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--e0);
}
button.burbuja.mia { font: inherit; font-weight: 600; }
.burbuja.mia .etiqueta-editado { font-size: 12px; font-weight: 400; opacity: .75; letter-spacing: .08em; text-transform: uppercase; }
.burbuja.mia.editando { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ink); }

/* acuse: sin tarjeta, solo texto */
.burbuja.ack { background: transparent; border: 0; padding: 2px 6px; color: var(--muted); font-size: 15px; }

/* hito y nota: separadores centrados con filete a los lados */
.burbuja.hito, .nota-log {
  align-self: stretch; max-width: none; display: grid; align-items: center; column-gap: var(--e2);
  grid-template-columns: minmax(16px, 1fr) fit-content(44ch) minmax(16px, 1fr);
  background: transparent; border: 0; border-radius: 0; padding: var(--e1) 0; text-align: center;
}
.burbuja.hito::before, .burbuja.hito::after, .nota-log::before, .nota-log::after {
  content: ""; display: block; height: 1px; background: var(--line);
}
.burbuja.hito { font-weight: 700; color: var(--ink); font-size: 17px; line-height: 1.35; }
.nota-log { font-size: 14px; color: var(--muted); }

/* apertura de capítulo: la letra del pilar en contorno, a todo el ancho, con un filete encima */
.intro-card {
  align-self: stretch; display: flex; gap: var(--e3); align-items: center;
  padding: var(--e3) 0 var(--e1); margin: var(--e2) 0 0; border-top: 1px solid var(--line);
}
.intro-card .letra { font-size: 84px; font-weight: 800; line-height: .9; letter-spacing: -.04em; flex: 0 0 auto; min-width: 64px; text-align: center; }
@supports (-webkit-text-stroke: 1px black) {
  .intro-card .letra { -webkit-text-stroke: 1.5px var(--ink); color: transparent; }
}
.intro-card .nombre { font-weight: 700; font-size: 19px; display: block; letter-spacing: -.01em; }
.intro-card .texto { color: var(--muted); font-size: 16px; }

/* escribiendo */
.escribiendo { display: inline-flex; gap: 5px; align-items: center; min-height: 40px; }
.escribiendo i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); display: block; animation: latido 1s infinite ease-in-out; }
.escribiendo i:nth-child(2) { animation-delay: .15s; }
.escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes latido { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .escribiendo i { animation: none; opacity: .6; } }

/* ---- dock ---- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--bg); border-top: 1px solid var(--line);
  padding: var(--e2) var(--gutter) calc(var(--e2) + env(safe-area-inset-bottom));
  transition: box-shadow .25s var(--suave);
}
.dock.desbordado { box-shadow: 0 -12px 20px -20px var(--ink); }
.dock.ocupado { pointer-events: none; }
.dock form, .dock fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.dock-inner {
  max-width: var(--col); margin: 0 auto; display: flex; flex-direction: column; gap: var(--e2);
  max-height: 45vh; overflow-y: auto; overscroll-behavior: contain;
}
.dock .grupo { display: flex; flex-direction: column; gap: var(--e2); width: 100%; }
.dock .rotulo { font-size: 14px; color: var(--muted); }
.dock .rotulo b { color: var(--ink); font-weight: 600; }
.dock .ayuda-campo { font-size: 13px; color: var(--muted); margin: calc(-1 * var(--e0)) 0 0; }

.chips { display: flex; flex-wrap: wrap; gap: var(--e1); }
.chip {
  min-height: var(--chip); padding: var(--e1) var(--e3); border-radius: var(--radio-chip);
  border: 1px solid var(--ink); background: var(--bg); color: var(--ink);
  font-weight: 600; font-size: 17px; line-height: 1.2; flex: 1 1 auto; max-width: 100%;
  transition: transform .09s, background-color .12s, color .12s;
}
.chip:active, .escala .num:active { transform: scale(.955); }
.chip.sel, .chip[aria-checked="true"] { background: var(--ink); color: var(--inverso); }
.chip.suave { border-color: var(--line); color: var(--muted); font-weight: 500; }
.chips.horas .chip { flex: 1 1 calc(20% - 8px); padding-left: var(--e1); padding-right: var(--e1); min-width: 56px; }
.chips.columna { flex-direction: column; }
.chips.columna .chip { text-align: left; justify-content: flex-start; display: flex; align-items: center; }

.escala { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e1); }
.escala .num {
  min-height: 52px; border: 1px solid var(--ink); border-radius: var(--radio); background: var(--bg);
  font-weight: 700; font-size: 20px; color: var(--ink); padding: 0;
  transition: transform .09s, background-color .12s, color .12s;
}
.escala .num:nth-child(11) { grid-column: span 2; }
.escala .num.sel, .escala .num[aria-checked="true"] { background: var(--ink); color: var(--inverso); }
.anclas { display: flex; justify-content: space-between; gap: var(--e2); font-size: 14px; color: var(--muted); }
@media (max-width: 360px) {
  .dock { padding-left: var(--e2); padding-right: var(--e2); }
  .escala { gap: var(--e0); }
}

.stepper { display: flex; align-items: center; gap: var(--e2); }
.stepper .mas, .stepper .menos {
  width: 56px; height: 56px; font-size: 28px; font-weight: 700;
  border: 1px solid var(--ink); border-radius: var(--radio); background: var(--bg); padding: 0;
}
.stepper output { flex: 1; text-align: center; font-size: 30px; font-weight: 800; letter-spacing: -.02em; }

.dock input[type="text"] {
  width: 100%; min-height: var(--chip); padding: var(--e1) var(--e3);
  border: 1px solid var(--ink); border-radius: var(--radio); background: var(--bg);
}
.dock textarea {
  width: 100%; min-height: 96px; padding: var(--e2) var(--e3);
  border: 1px solid var(--ink); border-radius: var(--radio); background: var(--bg); resize: vertical;
}
.dock .contador { font-size: 13px; color: var(--muted); text-align: right; }
.dock .fila-botones { display: flex; gap: var(--e1); }
.dock .fila-botones .btn { flex: 1; min-height: var(--chip); }