/* HipotecaIA — Asistente (guided conversation)
   ----------------------------------------------------------------
   Decision tree styled as a chat: bot bubbles append, user picks
   options (rendered as buttons), leaf nodes show link cards. */

.asistente-hero {
  padding-top: var(--space-m);
  padding-bottom: var(--space-l);
  max-width: 70ch;
}
.asistente-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin: 0 0 var(--space-s);
}
.asistente-hero h1 {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1.05;
  margin: 0 0 var(--space-m);
  color: var(--ink-100, #f3ede2);
}
.asistente-lede {
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink-300, #c9bfae);
  margin: 0 0 var(--space-m);
}
.asistente-lede strong { color: var(--gold-300); font-weight: 500; }
.asistente-rules {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-400);
}
.asistente-rules strong {
  color: var(--gold-300);
  font-weight: 500;
}

/* Chat shell -------------------------------------------------------------- */

.asistente-shell {
  display: grid;
  gap: var(--space-m);
  padding-bottom: var(--space-2xl, 4rem);
}

.asistente-chat {
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: 14px;
  padding: var(--space-m);
  min-height: 400px;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

/* Message bubbles */
.asistente-msg {
  font-size: var(--step-0);
  line-height: 1.55;
  max-width: 100%;
}
.asistente-msg p { margin: 0; }
.asistente-msg--user {
  align-self: flex-end;
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-radius: 12px 12px 4px 12px;
  padding: var(--space-s) var(--space-m);
  color: var(--ink-100, #f3ede2);
  max-width: 80%;
}
.asistente-msg--bot {
  align-self: flex-start;
  color: var(--ink-200, #ddd1bd);
  max-width: 100%;
}
.asistente-msg--bot::before {
  content: "HipotecaIA · guía";
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: var(--space-xs);
}

/* Options (decision tree choices) ---------------------------------------- */

.asistente-options {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-xs);
  max-width: 60ch;
}
.asistente-option {
  width: 100%;
  text-align: left;
  background: var(--ink-850);
  border: 1px solid var(--ink-700);
  color: var(--ink-200, #ddd1bd);
  border-radius: 10px;
  padding: var(--space-s) var(--space-m);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 120ms, color 120ms, background 120ms, transform 80ms;
}
.asistente-option:hover {
  border-color: var(--gold-500);
  color: var(--gold-300);
  background: var(--ink-800);
}
.asistente-option:active {
  transform: translateY(1px);
}
.asistente-option::before {
  content: "→ ";
  color: var(--ink-500);
  font-family: var(--font-mono);
  margin-right: 0.25rem;
}
.asistente-option:hover::before { color: var(--gold-400); }

/* Link cards (leaf payload) ---------------------------------------------- */

.asistente-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-s);
}
.asistente-link__card {
  display: grid;
  gap: var(--space-2xs);
  background: var(--ink-850);
  border: 1px solid var(--ink-700);
  border-left: 3px solid var(--gold-500);
  border-radius: 8px;
  padding: var(--space-s) var(--space-m);
  text-decoration: none;
  color: var(--ink-200, #ddd1bd);
  transition: border-color 120ms, background 120ms, transform 80ms;
}
.asistente-link__card:hover {
  border-color: var(--gold-400);
  border-left-color: var(--gold-300);
  background: var(--ink-800);
}
.asistente-link__card:active { transform: translateY(1px); }
.asistente-link__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.2;
  color: var(--gold-300);
  font-weight: 500;
}
.asistente-link__path {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  color: var(--ink-500);
}
.asistente-link__note {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-300, #c9bfae);
  margin-top: var(--space-2xs);
}

/* Controls (back / restart) --------------------------------------------- */

.asistente-controls {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
  flex-wrap: wrap;
}
.asistente-control {
  background: transparent;
  border: 1px solid var(--ink-600);
  color: var(--ink-400);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 120ms, color 120ms;
}
.asistente-control:hover {
  border-color: var(--gold-500);
  color: var(--gold-300);
}

.asistente-disclosure {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink-500);
  line-height: 1.55;
  margin: 0;
  max-width: 70ch;
}
.asistente-disclosure a {
  color: var(--ink-400);
  border-bottom: 1px dotted var(--ink-600);
  text-decoration: none;
}
.asistente-disclosure a:hover { color: var(--gold-400); }