/* Control remoto de la tarea: el composer del prompt pegado al pie, el turno en vivo
   y las propuestas de backlog esperando el visto bueno. */

/* ── Composer del prompt ────────────────────────────────────────────────── */
/* Con poco contenido la pantalla no llega al fondo y el composer quedaría flotando a
   media altura: se estira la pantalla y se lo empuja abajo con el margen automático. */
.pantalla:has(> .composer) { min-height: 100%; }

.composer {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-right: calc(var(--borde-x) * -1);
  margin-bottom: calc(var(--sp-8) * -1);
  margin-left: calc(var(--borde-x) * -1);
  padding: var(--sp-2) var(--borde-x); /* el safe-area ya lo cubre la barra de pestañas */
  /* Los controles del composer son más BAJOS que el mínimo táctil general: el campo y
     los dos botones se usan de a uno y con el pulgar apoyado, y en una pantalla de
     teléfono cada píxel de alto acá se lo come a la conversación. */
  --alto-ctl: 36px;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
}

.composer[hidden] { display: none; }

.composer-fila {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-end;
}

.prompt {
  flex: 1;
  min-height: var(--alto-ctl);
  padding: var(--sp-2);
  max-height: 160px;
  resize: none;
  overflow-y: auto;
}

.composer .btn { min-height: var(--alto-ctl); }
.composer .btn.icono { width: var(--alto-ctl); }

.enviar { flex: 0 0 auto; }

/* Bajar el teclado (o borrar lo escrito): es una SALIDA, no una acción del turno, así
   que va sin borde y apagado — tiene que estar a mano sin competir con el enviar.
   Ver js/teclado.js. */
.bajar {
  flex: 0 0 auto;
  border-color: transparent;
  background: transparent;
  color: var(--faint);
}

.bajar[hidden] { display: none; }

/* ── Acciones al pie de la tarea ────────────────────────────────────────── */
/* Todo lo que saca la tarea de "en proceso" vive junto, en botones CHICOS: pausar el
   turno, cancelarla, mandarla a backlog y cerrarla (la única destructiva, de un toque).
   Ver js/accionesTarea.js. */
.acciones-tarea { display: flex; flex-direction: column; gap: var(--sp-2); }

.fila-acciones { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.cerrar-tarea[hidden] { display: none; }

.fila-botones {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
}

/* ── Propuestas de backlog ──────────────────────────────────────────────── */
.card-propuesta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  text-align: left;
}

.titulos-propuestos {
  margin: 0;
  padding-left: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  color: var(--ink);
  font-size: var(--fs-md);
  line-height: 1.4;
}

.titulos-propuestos li::marker { color: var(--accent); }

/* Ficha de cada tarea propuesta: se aprueba sabiendo qué se aprueba. */
.items-propuestos { display: flex; flex-direction: column; gap: var(--sp-2); }

.item-prop {
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--sp-2);
  border-left: 2px solid var(--border-hi);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: color-mix(in srgb, var(--panel2) 60%, transparent);
}

.ip-cab { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.ip-grupo { color: var(--faint); font-size: var(--fs-xs); }
.ip-titulo { font-size: var(--fs-md); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }

.ip-desc {
  margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.ip-desc.entera { display: block; }

.ip-needs { color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.ip-needs b { color: var(--wait); font-weight: 600; }

/* ── Dictado (botón de micrófono) ───────────────────────────────────────── */
/* Sólo aparece si el navegador puede grabar: por HTTP plano no hay micrófono y el
   botón directamente no se monta (ver js/wav.js). */
.mic {
  flex: 0 0 auto;
  gap: var(--sp-1);
  font-variant-numeric: tabular-nums;
  /* Push to talk: el dedo se queda apretado sobre el botón, así que hay que sacarle al
     navegador el scroll/zoom por gesto, la selección de texto y el callout de iOS. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Grabando aparece el reloj al lado del ícono: ahí el botón deja de ser cuadrado. */
.mic:has(.mic-et:not(:empty)) { width: auto; padding: 0 var(--sp-2); }

/* El ícono late con el nivel del micrófono (--nivel, 0..1): sin esa señal no hay forma
   de saber en el teléfono si te está escuchando o grabando silencio. */
.mic svg {
  transform: scale(calc(1 + var(--nivel, 0) * 0.25));
  transition: transform 120ms ease-out;
}

.mic[data-estado='grabando'] { border-color: var(--conflict); color: var(--conflict); }
.mic[data-estado='subiendo'],
.mic[data-estado='transcribiendo'] { border-color: var(--wait); color: var(--wait); opacity: 1; }

/* Soltar el botón no devuelve el texto al instante: sube el WAV y después espera a
   whisper. Sin señal parecía que se había perdido lo dictado, así que el ícono se va y
   queda un spinner con la fase escrita al lado. */
.mic-spin {
  display: none;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}

.mic[data-estado='subiendo'] svg,
.mic[data-estado='transcribiendo'] svg { display: none; }

.mic[data-estado='subiendo'] .mic-spin,
.mic[data-estado='transcribiendo'] .mic-spin { display: block; }

/* Ocupado NO es "muerto": el botón está deshabilitado pero tiene que leerse. */
.mic:disabled { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .mic-spin { animation-duration: 2.4s; }
}

.mic-et { font: 600 var(--fs-sm) / 1 inherit; }
.mic-et:empty { display: none; }

/* Con el micrófono abierto el composer se queda con lo único que se puede hacer: mandar
   lo dictado o tirarlo. El campo y el enviar se van —escribir mientras se habla no tiene
   sentido y en el teléfono el campo invita a tocarlo y abrir el teclado encima— y el mic
   se estira para ocupar la fila, que es el botón al que hay que volver. */
.composer.dictando .prompt,
.composer.dictando .bajar,
.composer.dictando .enviar { display: none; }
.composer.dictando .mic { flex: 1; justify-content: center; }

/* Descartar: sólo existe grabando (lo esconde js/dictado.js). Sin él, con el mic como
   toggle, la única salida de una grabación empezada sin querer era mandarla. */
.descarte { flex: 0 0 auto; border-color: var(--conflict); color: var(--conflict); }
.descarte[hidden] { display: none; }

/* ── Alta de tarea desde el tablero del proyecto ────────────────────────── */
/* El pie del tablero es el mismo composer que el de la tarea, pero lo que se escribe
   ABRE una tarea nueva y arranca sola. No hay alta "a backlog" acá: lo que se pide se
   hace, y si no era para ahora se manda a backlog desde la ficha de la tarea. */

.fila-campos { display: flex; gap: var(--sp-2); }
.fila-campos .input { flex: 1; min-width: 0; }