/*
  LA IA EN LOS CONTRATOS (js/iaContrato.js): la conversación, la propuesta con su vista previa y la lista de cláusulas guardadas.
  REGLA: solo variables de tema.css (nada de colores ni tipografías escritas aquí). Prefijo de clases: ia-.
  La hoja de la vista previa es la de siempre (contrato-hoja.css).
*/

.ia-dialogo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  min-width: 0;
}
.ia-conversacion {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  min-width: 0;
}

/* ============================================================ Mensajes */
.ia-aviso {
  padding-bottom: var(--espacio-2);
  border-bottom: 1px solid var(--color-borde);
}
.ia-registro {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  min-width: 0;
}
.ia-burbuja {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  max-width: 100%;
  min-width: 0;
  padding: var(--espacio-3);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
  background: var(--color-superficie-alt);
}
.ia-burbuja-persona {
  align-self: flex-end;
  max-width: min(100%, 38rem);
  border-color: var(--color-primario);
  background: var(--color-info-fondo);
}
.ia-burbuja-ia {
  align-self: stretch;
}
.ia-quien {
  color: var(--color-texto-suave);
  font-weight: var(--peso-fuerte);
}
.ia-texto {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* ============================================================ Caja para escribir (queda a la vista mientras se baja por la conversación) */
.ia-entrada {
  position: sticky;
  bottom: calc(-1 * var(--espacio-4));
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  margin: 0 calc(-1 * var(--espacio-4)) calc(-1 * var(--espacio-4));
  padding: var(--espacio-3) var(--espacio-4) var(--espacio-4);
  border-top: 1px solid var(--color-borde);
  background: var(--color-superficie);
}
.ia-entrada-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2) var(--espacio-4);
}
.ia-entrada-acciones > p {
  flex: 1 1 16rem;
}
.ia-estado:empty {
  display: none;
}
.ia-ejemplos {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
}
.ia-ejemplos-lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}
.ia-ejemplo {
  text-align: left;
  white-space: normal;
}

/* ============================================================ Lo que propone la IA */
.ia-propuesta {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  min-width: 0;
  padding: var(--espacio-3);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio);
  background: var(--color-superficie);
}
.ia-propuesta-vieja {
  opacity: 0.75;
}
.ia-propuesta-vieja .ia-hoja {
  max-height: 8rem;
}
.ia-propuesta-titulo {
  margin: 0;
  font-size: var(--tam-base);
}
.ia-hoja {
  max-height: 28rem;
  overflow: auto;
  padding: var(--espacio-3);
  border-radius: var(--radio);
  background: var(--color-superficie-alt);
}
.ia-hoja .hoja-contrato {
  box-shadow: none;
}
.ia-avisos > .aviso {
  margin: 0;
}
.ia-lista {
  margin: var(--espacio-1) 0 0;
  padding-left: var(--espacio-5);
}
.ia-datos p {
  margin-bottom: var(--espacio-1);
}
.ia-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2) var(--espacio-3);
}
.ia-acciones > p {
  flex: 1 1 14rem;
}

/* ============================================================ Cada cambio que propone la IA (antes tachado, después resaltado) */
.ia-cambios {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.ia-cambio {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  padding: var(--espacio-3);
  border: 1px solid var(--color-borde);
  border-left-width: 4px;
  border-radius: var(--radio);
  background: var(--color-superficie);
}
.ia-cambio-nuevo {
  border-left-color: var(--color-exito);
}
.ia-cambio-cambia {
  border-left-color: var(--color-info);
}
.ia-cambio-borra {
  border-left-color: var(--color-peligro);
}
.ia-cambio-cita {
  border-left-color: var(--color-borde-fuerte);
}
.ia-cambio-titulo {
  margin: 0;
  font-size: var(--tam-base);
}
.ia-cambio-etiqueta {
  color: var(--color-texto-suave);
  font-weight: var(--peso-fuerte);
  text-transform: uppercase;
}
.ia-antes,
.ia-despues {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  padding: var(--espacio-2) var(--espacio-3);
  border-radius: var(--radio);
}
.ia-antes {
  background: var(--color-peligro-fondo);
}
.ia-antes .ia-parrafo {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.ia-despues {
  background: var(--color-exito-fondo);
}
.ia-parrafo {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* ============================================================ Cláusulas guardadas */
.ia-guardadas {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.ia-guardada {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  padding: var(--espacio-3);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
}
.ia-guardada-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2) var(--espacio-3);
}
.ia-guardada-nombre {
  display: flex;
  flex: 1 1 14rem;
  flex-direction: column;
  min-width: 0;
}
.ia-guardada-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
}
.ia-guardada-detalle {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.ia-guardada-detalle[hidden] {
  display: none;
}

/* ============================================================ Celular: la caja para escribir ocupa lo mínimo (la pista de Ctrl + Enter no sirve con el dedo) */
@media (max-width: 47.99rem) {
  .ia-entrada-acciones {
    justify-content: flex-end;
  }
  .ia-entrada-acciones > p {
    display: none;
  }
  .ia-entrada textarea {
    min-height: 3.5rem;
  }
}