/* =====================================================================
   El agente de TakeData para asistentes de IA: la sección de la portada
   (#tu-ia), asistentes-ia.html y sus guías (asistentes-ia-*.html).
   Solo lo propio; el resto sale de components.css (tokens, botones,
   tarjetas, cabecera y pie) y de paginas.css (cabecera de página).
   ===================================================================== */

/* ---------- Con qué asistentes funciona ---------- */
.compatibles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.compatibles__item { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px;
  padding: var(--sp-2) var(--sp-4); border: 1px solid var(--line-200); border-radius: 999px;
  background: #fff; color: var(--ink-900); font-weight: 600; text-decoration: none; }
a.compatibles__item:hover { border-color: var(--teal-700); color: var(--teal-700); }
a.compatibles__item:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; }
/* Hueco para el logotipo de cada asistente, si algún día hay permiso para usarlo */
.compatibles__item img { display: block; height: 20px; width: auto; }
.compatibles__item--otros { font-weight: 500; color: var(--ink-700); background: transparent; border-style: dashed; }
.compatibles__titulo { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-500);
  text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Conversación de ejemplo ---------- */
.dialogo-ia { margin: 0; display: grid; gap: var(--sp-3); padding: var(--sp-5); background: #fff;
  border: 1px solid var(--line-200); border-radius: var(--r-4, 12px); box-shadow: 0 8px 24px rgb(11 39 64 / .08); }
.dialogo-ia__msg { margin: 0; max-width: 92%; padding: var(--sp-3) var(--sp-4); border-radius: 14px; font-size: var(--fs-sm); line-height: 1.5; }
.dialogo-ia__msg--tu { justify-self: end; background: var(--navy-700, #1A4D6D); color: #fff; border-bottom-right-radius: 4px; }
.dialogo-ia__msg--ia { justify-self: start; background: var(--surface-1, #F4F7F9); color: var(--ink-900); border-bottom-left-radius: 4px; }
.dialogo-ia__quien { display: block; font-size: var(--fs-xs); font-weight: 600; opacity: .8; margin-bottom: 2px; }
.dialogo-ia__mapa { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border: 1px dashed var(--teal-500); border-radius: 10px; background: var(--teal-50, #EAF4F5); color: var(--ink-900); }
.dialogo-ia__mapa .ic { color: var(--teal-700); flex: none; }
.dialogo-ia figcaption { font-size: var(--fs-xs); color: var(--ink-500); }

/* ---------- Sección de la portada ---------- */
.tu-ia__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--sp-8); align-items: center; }
.tu-ia__texto { display: grid; gap: var(--sp-4); align-content: start; }
.tu-ia__etiqueta { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; color: var(--teal-700); }
.tu-ia__lead { font-size: 1.0625rem; color: var(--ink-700); max-width: var(--measure); }
.tu-ia__puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.tu-ia__puntos li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--sp-3); align-items: start; color: var(--ink-700); }
.tu-ia__puntos .ic { width: 20px; height: 20px; color: var(--teal-700); margin-top: 2px; }
.tu-ia__acciones { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
.tu-ia__lado { display: grid; gap: var(--sp-5); }
@media (max-width: 900px) {
  .tu-ia__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
}
@media (max-width: 520px) {
  .tu-ia__acciones .btn { width: 100%; }
}

/* ---------- Guías de instalación ---------- */
.direccion-mcp { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin: 0; }
.codigo, .direccion-mcp code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-sm);
  background: var(--surface-1, #F4F7F9); border: 1px solid var(--line-200); border-radius: var(--r-2, 6px);
  padding: var(--sp-2) var(--sp-3); overflow-wrap: anywhere; color: var(--ink-900); }
.codigo--bloque { display: block; white-space: pre-wrap; flex: 1 1 18rem; min-width: 0; }
code.codigo:not(.codigo--bloque) { padding: 1px 6px; }
.direccion-mcp code.codigo--bloque, .direccion-mcp code { padding: var(--sp-2) var(--sp-3); }
.copiar { display: inline-flex; align-items: center; gap: 6px; }
.guias { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.guias .card { display: grid; gap: var(--sp-3); align-content: start; height: 100%; }
.guias .card p { margin: 0; color: var(--ink-700); }
.guias .card__title a { color: inherit; text-decoration: none; }
.guias .card__title a:hover { color: var(--teal-700); }
.guias .card .btn { justify-self: start; margin-top: auto; }
/* El texto de las guías, a una medida de lectura pero alineado con la cabecera de la página */
.guia > * { max-width: 46rem; }
.guia h2 { margin-top: var(--sp-7); }
.guia h2.primero { margin-top: 0; }
.guia > ul:not(.compatibles) { display: grid; gap: var(--sp-2); padding-left: 1.2em; color: var(--ink-700); }
.guia ol.pasos-guia ul { margin: var(--sp-2) 0 0; padding-left: 1.2em; display: grid; gap: var(--sp-2); }
.guia h3 { margin-top: var(--sp-5); }
.guia ol.pasos-guia { counter-reset: paso; list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: var(--sp-4); }
.guia ol.pasos-guia > li { counter-increment: paso; position: relative; padding-left: 44px; }
.guia ol.pasos-guia > li::before { content: counter(paso); position: absolute; left: 0; top: -2px; width: 30px; height: 30px;
  border-radius: 50%; background: var(--navy-700, #1A4D6D); color: #fff; font-weight: 700; font-size: var(--fs-sm);
  display: grid; place-items: center; }
.guia ol.pasos-guia p { margin: var(--sp-2) 0 0; }
.ruta { font-weight: 600; color: var(--ink-900); }
.guia-volver { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--sp-3); }
.guia > :is(ol, ul) + p, .guia > p + p { margin-top: var(--sp-4); }