/* Slide «chat»: un chat oscuro (Claude, en su naranja) y, fuera de él, el panel de DalIA, el segundo cerebro, que cada vez que se pregunta se activa, busca, elige, extrae los
   fragmentos exactos y se los «lanza» al chat. js/demos/chat.js dirige la secuencia. Todas las clases llevan el prefijo cd- para no chocar con el resto de la web. */
@media (min-width: 861px) {
  .slide--chat .wrap { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
}
/* La escena y, debajo de ella a la derecha, sus controles: dos iconos pequeños (reiniciar y pausar o continuar). Van FUERA del flujo (absolutos), así que no suman altura a la slide
   —con una fila propia la slide se pasaba de la pantalla y tapaba la flecha «siguiente»— y, a la derecha, no chocan con esa flecha, que va en el centro. */
.cd-stage { position: relative; display: grid; gap: 12px; min-width: 0; padding-top: 22px; }   /* 22 px: lo que sobresalen las etiquetas de los cerebros */
.cd-controls { position: absolute; right: 0; top: 100%; display: flex; gap: 10px; margin-top: 4px; }
.cd-controls[hidden] { display: none; }
.cd-ctl { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--bg2); color: var(--muted); cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.cd-ctl:hover, .cd-ctl[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.cd-ctl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cd-ctl svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cd-ctl .ic-play { fill: currentColor; stroke: none; }
.cd-ctl[aria-pressed="false"] .ic-play, .cd-ctl[aria-pressed="true"] .ic-pause { display: none; }

.cd-demo { --cd-h: 510px; position: relative; display: grid; grid-template-columns: minmax(0, 0.78fr) 56px minmax(0, 1fr); gap: 0; height: var(--cd-h); }
/* Cada bloque del demo ocupa su celda: el panel de DalIA, el enlace MCP y el chat (así las etiquetas de arriba pueden compartir celda con ellos) */
/* Las etiquetas de los cerebros se superponen al borde superior de cada caja; el encabezado de cada caja lleva más relleno arriba para no quedar pegado a la etiqueta */
.cd-dalia { grid-column: 1; grid-row: 1; }
.cd-link { grid-column: 2; grid-row: 1; }
.cd-chat { grid-column: 3; grid-row: 1; }

/* ---------- Panel de DalIA (sigue el tema de la web) ---------- */
.cd-dalia {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 24px 14px 14px 38px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bg);
  box-shadow: var(--shadow);
  transition: box-shadow 0.4s, border-color 0.4s;
  /* Inclinado, como una pieza aparte que está fuera de Claude */
  transform: perspective(1300px) rotateY(8deg) rotate(-1deg);
}
.cd-dalia.is-awake { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 18px 44px -14px color-mix(in srgb, var(--accent) 55%, transparent); }
.cd-dhead { display: flex; align-items: center; gap: 8px; }
.cd-brain svg { display: block; width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cd-dhead b { color: var(--accent); font: 800 1.05rem "Plus Jakarta Sans", sans-serif; }
.cd-dhead small { color: var(--muted); font-size: 0.72rem; font-weight: 700; }
.cd-dot { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: var(--line); transition: background 0.3s; }
.is-awake .cd-dot { background: #1f9d55; animation: cd-pulse 1.2s ease-in-out infinite; }
@keyframes cd-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(31, 157, 85, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(31, 157, 85, 0); } }
.cd-status { margin: 0; min-height: 1.4em; color: var(--muted); font-size: 0.78rem; font-weight: 700; line-height: 1.4; transition: color 0.3s; }
.is-awake .cd-status { color: var(--accent); }

.cd-docs { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; margin: 0; padding: 0; list-style: none; }
.cd-docs li { display: flex; align-items: center; gap: 8px; padding: 3px 8px; border: 1px solid transparent; border-radius: 8px; color: var(--ink); font-size: 0.72rem; font-weight: 600; transition: background 0.3s, opacity 0.3s, border-color 0.3s; }
.cd-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-score { display: none; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, #1f9d55 18%, transparent); color: color-mix(in srgb, #1f9d55 80%, var(--ink)); font-size: 0.66rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cd-docs li.is-seen { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.cd-docs li.is-pick { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); }
.cd-docs li.is-pick .cd-score { display: inline-block; }
.cd-docs li.is-dim { opacity: 0.32; }
/* Barrido de la búsqueda sobre la lista */
.cd-docs li.cd-scanbar { position: absolute; left: 0; right: 0; top: -34px; height: 34px; padding: 0; border: 0; background: linear-gradient(transparent, color-mix(in srgb, var(--accent) 38%, transparent), transparent); opacity: 0; pointer-events: none; }
.is-scanning .cd-scanbar { opacity: 1; animation: cd-scan 1.8s ease-in-out forwards; }
@keyframes cd-scan { from { top: -34px; } to { top: 100%; } }

/* Los fragmentos que DalIA extrae de los documentos elegidos: en alto relieve, y listos para lanzarse al chat */
.cd-extract { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; min-height: 0; }
.cd-xfrag { padding: 6px 9px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease; }
.cd-xt { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--muted); font-size: 0.64rem; font-weight: 800; }
.cd-xx { color: var(--ink); font-size: 0.72rem; line-height: 1.42; }
.cd-xx mark { padding: 1px 5px; border-radius: 5px; background: #ffe066; color: #1b2333; box-shadow: 0 2px 0 #d6b400, 0 5px 12px rgba(15, 23, 42, 0.3); transform: translateY(-1px); display: inline-block; font-weight: 700; }
.cd-xfrag.is-lift { transform: translateY(-5px) scale(1.04); box-shadow: 0 16px 34px -8px color-mix(in srgb, var(--accent) 65%, transparent), 0 0 0 2px var(--accent); }
.cd-xfrag.is-gone { opacity: 0.22; transform: none; box-shadow: none; }
.cd-puff { position: absolute; z-index: 5; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid var(--accent); border-radius: 50%; pointer-events: none; animation: cd-puff 0.75s ease-out forwards; }
@keyframes cd-puff { from { transform: scale(0.4); opacity: 1; } to { transform: scale(4.2); opacity: 0; } }
/* El lago de datos y archivos del que DalIA extrae: el significado de las siglas, siempre en inglés, en una franja vertical que se lee de abajo hacia arriba (270°) */
.cd-lake { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 24px; border-right: 1px solid var(--line); border-radius: 17px 0 0 17px; background: color-mix(in srgb, var(--accent) 6%, var(--bg2)); transition: background 0.4s; }
.cd-lake span { color: var(--muted); font: 600 0.62rem/1 "Plus Jakarta Sans", sans-serif; letter-spacing: 0.08em; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); transition: color 0.4s; }
.cd-lake mark { padding: 0; background: none; color: var(--teal); font-weight: 800; }
.is-awake .cd-lake { background: color-mix(in srgb, var(--accent) 12%, var(--bg2)); }
.is-awake .cd-lake span { color: var(--ink); }
/* El enlace MCP entre Claude y DalIA: una línea de puntos con la etiqueta «MCP»; los puntos viajan a la izquierda cuando Claude pide el contenido y a la derecha cuando DalIA responde */
.cd-link { position: relative; align-self: start; height: 44px; margin-top: 0; pointer-events: none; }
.cd-link-tag { position: absolute; left: 50%; top: 0; padding: 2px 8px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 800 0.62rem/1.3 "Plus Jakarta Sans", sans-serif; letter-spacing: 0.06em; transform: translateX(-50%); }
.cd-link-line { position: absolute; left: 4px; right: 4px; top: 31px; border-top: 2px dashed color-mix(in srgb, var(--muted) 45%, transparent); transition: border-color 0.3s; }
.cd-link i { position: absolute; left: 4px; top: 28px; width: 8px; height: 8px; border-radius: 50%; opacity: 0; }
.cd-link.is-left .cd-link-line { border-color: rgba(217, 119, 87, 0.65); }
.cd-link.is-right .cd-link-line { border-color: color-mix(in srgb, var(--accent) 65%, transparent); }
.cd-link.is-left i { background: #d97757; animation: cd-dots-left 1s linear infinite; }
.cd-link.is-right i { background: var(--accent); animation: cd-dots-right 1s linear infinite; }
.cd-link i:nth-of-type(2) { animation-delay: 0.2s; }
.cd-link i:nth-of-type(3) { animation-delay: 0.4s; }
.cd-link i:nth-of-type(4) { animation-delay: 0.6s; }
@keyframes cd-dots-right { 0% { transform: translateX(0); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateX(40px); opacity: 0; } }
@keyframes cd-dots-left { 0% { transform: translateX(40px); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }

/* Las dos etiquetas: «Cerebro 1: piensa» (Claude) y «Cerebro 2: recuerda» (DalIA), como pestañas que cabalgan el borde superior de cada caja. Se encienden cuando le toca a cada uno. */
.cd-tag { --c: var(--accent); grid-row: 1; align-self: start; justify-self: center; z-index: 8; display: inline-flex; align-items: center; gap: 6px; margin-top: -20px; padding: 5px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); box-shadow: var(--shadow); white-space: nowrap; transition: border-color 0.3s, box-shadow 0.3s; }
.cd-tag--2 { grid-column: 1; --c: var(--accent); }
.cd-tag--1 { grid-column: 3; --c: #d97757; }
.cd-tag b { color: var(--muted); font: 800 0.74rem "Plus Jakarta Sans", sans-serif; letter-spacing: 0.04em; transition: color 0.3s; }
.cd-tag span { color: var(--c); font: 800 0.86rem "Plus Jakarta Sans", sans-serif; }
.cd-tag.is-on { border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
.cd-tag.is-on b { color: var(--ink); }
.cd-tag sup { font-size: 0.62em; line-height: 0; vertical-align: 0.45em; }

/* Íconos de tipo de contenido */
.cd-ico { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 6px; background: var(--ic); color: #fff; font: 800 0.42rem "Plus Jakarta Sans", sans-serif; letter-spacing: 0.02em; }
.cd-ico svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.cd-ico--pdf { --ic: #e5484d; }
.cd-ico--audio { --ic: #e0568a; }
.cd-ico--image { --ic: #f59e0b; }
.cd-ico--db { --ic: #0ea5b7; }
.cd-ico--whatsapp { --ic: #22a559; }

/* ---------- El chat (siempre oscuro) ---------- */
.cd-chat, .cd-fly { --k-bg: #262624; --k-surface: #30302e; --k-card: #2b2a27; --k-line: #3d3b37; --k-ink: #f5f4ed; --k-text: #e8e6dc; --k-muted: #b8b6aa; --k-orange: #d97757; }
.cd-chat { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border: 1px solid #1a1918; border-radius: 18px; background: var(--k-bg); color: var(--k-text); box-shadow: 0 24px 56px -22px rgba(0, 0, 0, 0.65); }
.cd-chead { display: flex; align-items: center; gap: 8px; padding: 20px 16px 11px; border-bottom: 1px solid #353330; color: var(--k-orange); }
.cd-chead b { font: 600 1.18rem/1 Georgia, "Times New Roman", serif; letter-spacing: -0.01em; }
.cd-spark svg { display: block; width: 20px; height: 20px; fill: var(--k-orange); }
.cd-msgs { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; overflow-y: auto; scrollbar-width: none; }
.cd-msgs::-webkit-scrollbar { display: none; }
.cd-user { align-self: flex-end; max-width: 86%; padding: 8px 13px; border-radius: 14px; background: #3a3935; color: var(--k-ink); font-size: 0.86rem; line-height: 1.4; }
.cd-asst { display: flex; align-items: flex-start; gap: 9px; }
.cd-ai { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.cd-ai svg { display: block; width: 20px; height: 20px; fill: var(--k-orange); }
.cd-body { display: grid; grid-template-columns: minmax(0, 1fr); flex: 1; gap: 8px; min-width: 0; }

/* La consulta a DalIA por MCP: espera con un círculo que gira y, al llegar los fragmentos, queda en «entregó» */
.cd-tool { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--k-line); border-radius: 10px; background: var(--k-surface); color: var(--k-muted); font-size: 0.74rem; font-weight: 600; }
.cd-check { position: relative; flex: none; width: 14px; height: 14px; border: 2px solid rgba(217, 119, 87, 0.3); border-top-color: var(--k-orange); border-radius: 50%; animation: cd-spin 0.8s linear infinite; }
.cd-tool.is-done .cd-check { border: 0; background: #2ea66a; animation: none; }
.cd-tool.is-done .cd-check::after { content: ""; position: absolute; left: 4.5px; top: 2px; width: 3px; height: 6.5px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cd-tool.is-done { color: var(--k-text); }
.cd-tool.is-land { animation: cd-land 0.8s ease-out; }
@keyframes cd-spin { to { transform: rotate(360deg); } }
@keyframes cd-land { 0% { box-shadow: 0 0 0 0 rgba(111, 149, 255, 0.8); } 100% { box-shadow: 0 0 0 14px rgba(111, 149, 255, 0); } }

/* Los fragmentos que entregó DalIA, como tarjetas en el mensaje de Claude (también es la forma de la tarjeta que vuela) */
.cd-frag { display: flex; align-items: flex-start; gap: 9px; padding: 7px 10px; border: 1px solid var(--k-line); border-left: 3px solid var(--c, var(--k-orange)); border-radius: 10px; background: var(--k-card); color: var(--k-text); transition: box-shadow 0.25s, border-color 0.25s; }
.cd-frag--pdf { --c: #e5484d; }
.cd-frag--audio { --c: #e0568a; }
.cd-frag--image { --c: #f59e0b; }
.cd-frag--db { --c: #0ea5b7; }
.cd-frag--whatsapp { --c: #22a559; }
.cd-frag > div { min-width: 0; }
.cd-frag b { display: block; color: var(--k-ink); font-size: 0.72rem; font-weight: 700; line-height: 1.3; }
.cd-frag > div > span { display: block; color: var(--k-muted); font-size: 0.72rem; line-height: 1.4; }
.cd-frag mark { padding: 0 2px; border-radius: 3px; background: rgba(250, 204, 21, 0.22); color: #fde68a; }
.cd-frag.is-hidden { visibility: hidden; }
.cd-frag.is-on { border-color: var(--k-orange); box-shadow: 0 0 0 2px rgba(217, 119, 87, 0.35); }
.cd-answer { margin: 0; color: var(--k-text); font-size: 0.88rem; line-height: 1.55; }
.cd-ref { display: inline-grid; place-items: center; width: 16px; height: 16px; margin: 0 2px; border-radius: 50%; background: var(--k-orange); color: #fff; font-size: 0.6rem; font-weight: 800; line-height: 1; vertical-align: 0.12em; cursor: pointer; }
.cd-in { animation: cd-in 0.4s ease-out both; }
@keyframes cd-in { from { opacity: 0; transform: translateY(8px); } }

/* La caja de texto: la pregunta se teclea aquí y, al enviarla, pasa a la conversación */
.cd-input { position: relative; display: flex; align-items: center; min-height: 20px; margin: 0 14px 14px; padding: 11px 50px 11px 14px; border: 1px solid #4a4843; border-radius: 16px; background: var(--k-surface); color: var(--k-ink); font-size: 0.86rem; line-height: 1.3; }
.cd-placeholder { color: #8f8d84; }
.cd-input.has-text .cd-placeholder { display: none; }
.cd-input.is-typing .cd-typed::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; background: var(--k-orange); vertical-align: -0.15em; animation: cd-caret 0.9s steps(1) infinite; }
@keyframes cd-caret { 50% { opacity: 0; } }
.cd-send { position: absolute; right: 8px; top: 50%; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px; background: var(--k-orange); color: #fff; transform: translateY(-50%); transition: transform 0.12s; }
.cd-send svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cd-send.is-press { transform: translateY(-50%) scale(0.86); }

/* El fragmento que vuela de DalIA al chat («¡fum!»): una copia de la tarjeta, fija sobre la página, con una estela azul */
.cd-fly { position: fixed; left: 0; top: 0; z-index: 2000; margin: 0; pointer-events: none; transform-origin: 0 0; box-shadow: 0 0 0 1px rgba(111, 149, 255, 0.75), 0 10px 34px rgba(79, 123, 255, 0.65); }

@media (min-width: 861px) and (max-width: 1180px) {
  .cd-demo { --cd-h: 550px; }
}
@media (max-width: 860px) {
  .cd-demo { grid-template-columns: 1fr; height: auto; gap: 34px; }
  .cd-dalia { transform: none; grid-column: 1; grid-row: 1; }
  .cd-link { display: none; }
  .cd-chat { grid-column: 1; grid-row: 2; height: 440px; }
  .cd-tag--2 { grid-column: 1; grid-row: 1; }
  .cd-tag--1 { grid-column: 1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .cd-in, .cd-tool.is-land, .cd-puff, .is-scanning .cd-scanbar, .is-awake .cd-dot { animation: none; }
  .cd-xfrag, .cd-dalia, .cd-docs li { transition: none; }
  .cd-link i { animation: none; }
  .cd-tag, .cd-tag b { transition: none; }
}