/* ═══════════════════════════════════════════════════════════
   Demo 03 · Asistente con RAG que cotiza por WhatsApp
   Alcance: #demo-asistente · prefijo de clases .as- · keyframes asist-*
   Composición:
     ≥ 1100 px de contenido (container «demo»): celular | panel «Lo que pasa detrás».
     < 1100 px: un panel a la vez con selector (Celular / Lo que pasa detrás)
               que la animación cambia sola en cada momento clave.
   El interior del panel se adapta a su propio ancho (container «aspanel»):
     base < 540 px · md ≥ 540 px · lg ≥ 860 px.
   ═══════════════════════════════════════════════════════════ */

@keyframes asist-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes asist-spin { to { transform: rotate(360deg); } }
@keyframes asist-pop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes asist-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes asist-stamp-in {
    0% { opacity: 0; transform: rotate(-6deg) scale(1.8); }
    60% { opacity: 1; transform: rotate(-6deg) scale(0.95); }
    100% { opacity: 1; transform: rotate(-6deg) scale(1); }
}

#demo-asistente {
    /* WhatsApp, suavizado hacia el bosque */
    --as-wa: #0F6E58;
    --as-wa-2: #14A07B;
    --as-wa-out: #DDF3D1;
    --as-wa-bg: #ECE8DF;
    --as-wa-ink: #0E1A14;
    --as-wa-muted: #5B6B62;
    --as-wa-line: #E2DED4;
    --as-tick: #4DB3E2;
    --as-tick-off: #8C9A93;
    /* Sobre oscuro */
    --as-mint: #34D399;
    --as-mint-soft: #BDF2DA;
    --as-coral: #F0857B;
    --as-coral-soft: #FBD3CE;
    --as-muted: var(--on-dark-muted);
    --as-soft: rgb(246 244 238 / 0.86);
    --as-card: rgb(255 255 255 / 0.045);
    --as-card-line: rgb(255 255 255 / 0.1);
    --as-inset: rgb(3 20 14 / 0.38);
    --as-phone-w: 300px;
}

/* ── Escenario: rejilla celular | panel ────────────────────── */
#demo-asistente .as-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0.875rem;
    font-family: var(--font-sans);
    color: var(--on-dark);
}
#demo-asistente .as-switch { grid-row: 1; grid-column: 1; display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; min-width: 0; }
#demo-asistente .as-pane-phone,
#demo-asistente .as-pane-panel,
#demo-asistente .as-stamp { grid-row: 2; grid-column: 1; }

#demo-asistente .as-pane { min-width: 0; transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-out), visibility 0s linear 0s; }
#demo-asistente .as-stage[data-pane="phone"] .as-pane-panel,
#demo-asistente .as-stage[data-pane="panel"] .as-pane-phone {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s var(--ease-std), transform 0.45s var(--ease-out), visibility 0s linear 0.3s;
}

@container demo (min-width: 1100px) {
    #demo-asistente .as-stage { grid-template-columns: var(--as-phone-w) minmax(0, 1fr); grid-template-rows: auto; gap: 1.5rem; }
    #demo-asistente .as-switch { display: none; }
    #demo-asistente .as-pane-phone { grid-column: 1; grid-row: 1; }
    #demo-asistente .as-pane-panel { grid-column: 2; grid-row: 1; }
    #demo-asistente .as-stamp { grid-column: 2; grid-row: 1; }
    #demo-asistente .as-stage[data-pane] .as-pane { opacity: 1; visibility: visible; transform: none; }
}

/* Selector de vista (pantallas angostas) */
#demo-asistente .as-seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 9999px;
    background: rgb(255 255 255 / 0.06);
    border: 1px solid rgb(255 255 255 / 0.1);
    min-width: 0;
}
#demo-asistente .as-seg-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 2.125rem;
    padding: 0 0.85rem;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: rgb(246 244 238 / 0.78);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: background-color 0.35s var(--ease-std), color 0.35s var(--ease-std);
}
#demo-asistente .as-seg-btn svg { width: 0.95rem; height: 0.95rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#demo-asistente .as-seg-btn[data-as-pane="panel"] svg { fill: currentColor; stroke: none; }
#demo-asistente .as-seg-btn:hover { color: var(--paper); background: rgb(255 255 255 / 0.06); }
#demo-asistente .as-seg-btn[aria-pressed="true"] { background: var(--paper); color: var(--forest-950); font-weight: 600; }
#demo-asistente .as-seg-btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
@container demo (max-width: 379px) {
    #demo-asistente .as-seg-btn { padding: 0 0.7rem; font-size: 0.78rem; }
    #demo-asistente .as-seg-btn svg { display: none; }
}

/* ── Cronómetro (tarjeta en el panel · píldora en angosto) ── */
#demo-asistente .as-clock { transition: border-color 0.5s var(--ease-std), background-color 0.5s var(--ease-std), box-shadow 0.5s var(--ease-std); }
#demo-asistente .as-clock svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#demo-asistente .as-clock-val { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -0.03em; color: var(--paper); transition: color 0.4s var(--ease-std); white-space: nowrap; }
#demo-asistente .as-clock.is-run { border-color: rgb(212 242 90 / 0.55); box-shadow: 0 0 34px -12px rgb(212 242 90 / 0.6); }
#demo-asistente .as-clock.is-run .as-clock-val { color: var(--lime); }
#demo-asistente .as-clock.is-done { border-color: rgb(52 211 153 / 0.6); background: rgb(52 211 153 / 0.1); box-shadow: 0 0 40px -14px rgb(52 211 153 / 0.65); }
#demo-asistente .as-clock.is-done .as-clock-val { color: var(--as-mint); }
#demo-asistente .as-clock.is-pop { animation: asist-pop 0.5s var(--ease-out); }

#demo-asistente .as-clock--mini {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 2.5rem;
    padding: 0 0.85rem;
    border-radius: 9999px;
    border: 1px solid rgb(255 255 255 / 0.14);
    background: rgb(255 255 255 / 0.05);
    color: var(--as-muted);
}
#demo-asistente .as-clock--mini svg { width: 1rem; height: 1rem; }
#demo-asistente .as-clock--mini .as-clock-val { font-size: 0.95rem; min-width: 3.1em; text-align: right; }

#demo-asistente .as-clock--card {
    display: none;
    flex: none;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 13.25rem;
    padding: 0.6rem 0.95rem 0.65rem;
    border-radius: 1.05rem;
    border: 1px solid rgb(255 255 255 / 0.12);
    background: rgb(255 255 255 / 0.05);
}
@container demo (min-width: 1100px) { #demo-asistente .as-clock--card { display: flex; } }
#demo-asistente .as-clock-lbl { display: flex; align-items: center; gap: 0.4rem; font-size: 0.66rem; line-height: 1; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--as-muted); white-space: nowrap; }
#demo-asistente .as-clock-lbl svg { width: 0.85rem; height: 0.85rem; }
#demo-asistente .as-clock-row { display: flex; align-items: baseline; gap: 0.6rem; }
#demo-asistente .as-clock--card .as-clock-val { font-size: 1.65rem; line-height: 1; min-width: 3.3em; }
#demo-asistente .as-clock-sub { font-size: 0.72rem; line-height: 1.2; color: var(--as-muted); white-space: nowrap; transition: color 0.4s var(--ease-std); }
#demo-asistente .as-clock.is-done .as-clock-lbl,
#demo-asistente .as-clock.is-done .as-clock-sub { color: var(--as-mint-soft); }
#demo-asistente .as-clock.is-run .as-clock-lbl { color: var(--lime); }

/* ── Sello «Respondido en» ─────────────────────────────────── */
#demo-asistente .as-stamp {
    place-self: center;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s var(--ease-std), transform 0.8s var(--ease-out);
}
#demo-asistente .as-stamp-in {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 1rem 1.75rem 1.1rem;
    border-radius: 1.35rem;
    background: rgb(6 35 26 / 0.96);
    border: 4px solid var(--lime);
    box-shadow:
        0 0 0 5px rgb(6 35 26 / 0.96),
        0 0 0 7px rgb(212 242 90 / 0.45),
        0 30px 70px -20px rgb(0 0 0 / 0.7),
        0 0 90px -10px rgb(212 242 90 / 0.45);
    transform: rotate(-6deg);
}
#demo-asistente .as-stamp-k { font-size: 0.78rem; line-height: 1; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lime-soft); }
#demo-asistente .as-stamp-v { font-size: 4.25rem; line-height: 1; font-weight: 700; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: var(--lime); }
#demo-asistente .as-stamp-s { font-size: 0.92rem; line-height: 1.2; font-weight: 500; color: var(--paper); white-space: nowrap; }
#demo-asistente .as-stamp.is-show { opacity: 1; }
#demo-asistente .as-stamp.is-show .as-stamp-in { animation: asist-stamp-in 0.55s var(--ease-out) both; }
#demo-asistente .as-stamp.is-dock { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(0.3); }
@container demo (max-width: 599px) {
    #demo-asistente .as-stamp-in { padding: 0.8rem 1.25rem 0.9rem; }
    #demo-asistente .as-stamp-v { font-size: 3.25rem; }
    #demo-asistente .as-stamp-k { font-size: 0.7rem; }
    #demo-asistente .as-stamp-s { font-size: 0.82rem; }
}

/* ═══════════════════════ Celular ═══════════════════════════ */
#demo-asistente .as-pane-phone { display: flex; flex-direction: column; align-items: center; }
#demo-asistente .as-phonecol { width: min(100%, 318px); }
@container demo (min-width: 600px) { #demo-asistente .as-phonecol { width: 300px; } }
@container demo (min-width: 1100px) { #demo-asistente .as-phonecol { width: 100%; } }
#demo-asistente .as-phonecol .dv-phone { margin-inline: auto; }
#demo-asistente .as-cap { margin-top: 0.7rem; font-size: 0.8rem; line-height: 1.2; color: var(--as-muted); text-align: center; }
#demo-asistente .as-cap b { font-weight: 600; color: var(--paper); }

/* A partir de aquí, medidas en px de la pantalla nativa (390 × 844):
   el motor aplica zoom al .dv-phone. Ningún texto < 14 px. */
#demo-asistente .as-screen { background: var(--as-wa-bg); color: var(--as-wa-ink); }
#demo-asistente .as-sb { position: absolute; left: 0; right: 0; top: 0; background: var(--as-wa); color: #fff; }
#demo-asistente .as-sb-time { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
#demo-asistente .as-sb svg { fill: #fff; }
#demo-asistente .as-batt { position: relative; width: 25px; height: 12px; margin-left: 2px; border: 1.5px solid rgb(255 255 255 / 0.85); border-radius: 4px; padding: 1.5px; }
#demo-asistente .as-batt::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; border-radius: 0 2px 2px 0; background: rgb(255 255 255 / 0.85); }
#demo-asistente .as-batt i { display: block; width: 62%; height: 100%; border-radius: 2px; background: #fff; }

#demo-asistente .as-hd { position: absolute; left: 0; right: 0; top: 54px; z-index: 3; height: 62px; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 6px; background: var(--as-wa); color: #fff; box-shadow: 0 1px 3px rgb(6 35 26 / 0.2); }
#demo-asistente .as-hd-back { width: 26px; height: 26px; flex: none; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#demo-asistente .as-hd-av.esc-logo-mark { width: 40px; height: 40px; flex: none; border-radius: 9999px; box-shadow: 0 0 0 2px rgb(255 255 255 / 0.9); }
#demo-asistente .as-hd-av svg { width: 22px; height: 22px; }
#demo-asistente .as-hd-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-left: 4px; }
#demo-asistente .as-hd-tx b { font-size: 17px; line-height: 1.2; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#demo-asistente .as-hd-sub { font-size: 14px; line-height: 1.25; color: rgb(255 255 255 / 0.85); transition: color 0.3s var(--ease-std); }
#demo-asistente .as-hd-sub.is-typing { color: #CDF5DD; }
#demo-asistente .as-hd-ic { display: flex; gap: 16px; flex: none; }
#demo-asistente .as-hd-ic svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
#demo-asistente .as-hd-ic .as-dots3 { width: 20px; fill: #fff; stroke: none; }

#demo-asistente .as-chat {
    position: absolute;
    left: 0;
    right: 0;
    top: 116px;
    bottom: 84px;
    overflow: hidden;
    background-color: var(--as-wa-bg);
    background-image: radial-gradient(rgb(84 72 48 / 0.07) 1.1px, transparent 1.5px), radial-gradient(rgb(84 72 48 / 0.05) 1px, transparent 1.4px);
    background-size: 22px 22px, 22px 22px;
    background-position: 0 0, 11px 11px;
}
#demo-asistente .as-thread { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 5px; padding: 0 12px 8px; transition: transform 0.5s var(--ease-out); }
#demo-asistente .as-day,
#demo-asistente .as-sys { align-self: center; border-radius: 8px; font-size: 14px; line-height: 1.3; color: var(--as-wa-muted); box-shadow: 0 1px 0.5px rgb(14 26 20 / 0.12); }
#demo-asistente .as-day { margin: 8px 0 4px; padding: 5px 12px; background: #fff; font-weight: 500; }
#demo-asistente .as-sys { margin: 8px 6px 2px; padding: 7px 12px; background: #FFF1D6; text-align: center; }

/* Mensajes */
#demo-asistente .as-m { display: flex; flex-direction: column; opacity: 0; transform: translateY(12px) scale(0.97); transition: opacity 0.35s var(--ease-std), transform 0.5s var(--ease-out); }
#demo-asistente .as-m.is-in { opacity: 1; transform: none; }
#demo-asistente .as-m.as-out { align-items: flex-end; transform-origin: 100% 100%; }
#demo-asistente .as-m.as-inc { align-items: flex-start; transform-origin: 0 100%; }
#demo-asistente .as-b { position: relative; max-width: 300px; padding: 6px 9px 7px 10px; border-radius: 10px; font-size: 17px; line-height: 1.34; color: var(--as-wa-ink); box-shadow: 0 1px 0.5px rgb(14 26 20 / 0.13); }
#demo-asistente .as-b b { font-weight: 600; }
#demo-asistente .as-b p + p,
#demo-asistente .as-b p + .as-q,
#demo-asistente .as-b .as-q + p,
#demo-asistente .as-b .as-cite + p,
#demo-asistente .as-b p + .as-cite { margin-top: 6px; }
#demo-asistente .as-b-out { background: var(--as-wa-out); border-top-right-radius: 0; }
#demo-asistente .as-b-inc { background: #fff; border-top-left-radius: 0; }
#demo-asistente .as-b-out::before,
#demo-asistente .as-b-inc::before { content: ""; position: absolute; top: 0; width: 0; height: 0; border-style: solid; }
#demo-asistente .as-b-out::before { right: -8px; border-width: 0 0 10px 9px; border-color: transparent transparent transparent var(--as-wa-out); }
#demo-asistente .as-b-inc::before { left: -8px; border-width: 0 9px 10px 0; border-color: transparent #fff transparent transparent; }
#demo-asistente .as-wide { width: 316px; max-width: 316px; }
#demo-asistente .as-meta { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 8px -2px -5px 10px; font-size: 14px; line-height: 1; color: var(--as-wa-muted); white-space: nowrap; }
#demo-asistente .as-meta-blk { float: none; display: flex; justify-content: flex-end; margin: 4px -2px -2px 0; }
#demo-asistente .as-from { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--ai-ink); }
#demo-asistente .as-from svg { width: 14px; height: 14px; fill: currentColor; }

/* Doble check */
#demo-asistente .as-tk { display: inline-flex; color: var(--as-tick-off); transition: color 0.35s var(--ease-std); }
#demo-asistente .as-tk svg { width: 17px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#demo-asistente .as-tk .t2 { opacity: 0; transition: opacity 0.25s var(--ease-std); }
#demo-asistente .as-tk.s2 .t2,
#demo-asistente .as-tk.s3 .t2 { opacity: 1; }
#demo-asistente .as-tk.s3 { color: var(--as-tick); }

/* Nota de voz */
#demo-asistente .as-vn { display: flex; align-items: center; gap: 8px; width: 292px; padding: 8px 9px 7px 8px; }
#demo-asistente .as-vn-play { width: 30px; height: 30px; flex: none; display: grid; place-items: center; }
#demo-asistente .as-vn-play svg { width: 26px; height: 26px; fill: var(--as-wa-muted); }
#demo-asistente .as-vn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
#demo-asistente .as-vn-wave { position: relative; display: flex; align-items: center; gap: 2px; height: 28px; }
#demo-asistente .as-vn-wave i { width: 3px; border-radius: 3px; background: #A2B3A8; }
#demo-asistente .as-vn-wave::before { content: ""; position: absolute; left: -3px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 9999px; background: var(--as-tick); }
#demo-asistente .as-vn-foot { display: flex; justify-content: space-between; align-items: center; font-size: 14px; line-height: 1; color: var(--as-wa-muted); }
#demo-asistente .as-vn-foot .as-meta { float: none; margin: 0; }
#demo-asistente .as-vn-av { position: relative; width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 9999px; background: linear-gradient(145deg, #B7794A, #7C4A2A); color: #fff; font-size: 17px; font-weight: 700; }
#demo-asistente .as-vn-mic { position: absolute; left: -4px; bottom: -2px; width: 20px; height: 20px; display: grid; place-items: center; }
#demo-asistente .as-vn-mic svg { width: 18px; height: 18px; fill: var(--as-tick-off); transition: fill 0.35s var(--ease-std); }
#demo-asistente .as-vn.is-played .as-vn-mic svg { fill: var(--as-tick); }

/* «escribiendo…» dentro del chat */
#demo-asistente .as-typing { padding: 12px 16px; color: var(--as-tick-off); }
#demo-asistente .as-typing .dm-typing i { width: 8px; height: 8px; }

/* Cotización y pedido dentro de la burbuja */
#demo-asistente .as-q { margin: 8px -3px 4px; padding: 10px 11px; border-radius: 9px; background: #F4F3EE; border: 1px solid var(--as-wa-line); }
#demo-asistente .as-q-hd { display: flex; justify-content: space-between; align-items: center; padding-bottom: 7px; margin-bottom: 4px; border-bottom: 1px dashed #CFCBBF; font-size: 14px; line-height: 1; font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
#demo-asistente .as-q-hd span { font-weight: 500; letter-spacing: 0; color: var(--as-wa-muted); }
#demo-asistente .as-q-hd .as-ok-tag { font-weight: 600; color: var(--ok-ink); }
#demo-asistente .as-q-row { padding: 5px 0 4px; font-size: 15px; line-height: 1.25; }
#demo-asistente .as-q-row + .as-q-row { border-top: 1px solid #E8E5DC; }
#demo-asistente .as-q-ln { display: flex; justify-content: space-between; align-items: baseline; margin-top: 2px; }
#demo-asistente .as-q-ln small { font-size: 14px; color: var(--as-wa-muted); font-variant-numeric: tabular-nums; }
#demo-asistente .as-q-ln b { white-space: nowrap; font-variant-numeric: tabular-nums; }
#demo-asistente .as-q-sum { margin-top: 5px; padding-top: 6px; border-top: 1px dashed #CFCBBF; }
#demo-asistente .as-q-sum div { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; line-height: 1.6; color: #3B4A42; font-variant-numeric: tabular-nums; }
#demo-asistente .as-q-sum div span:last-child { white-space: nowrap; }
#demo-asistente .as-q-sum .ok { color: var(--ok-ink); }
#demo-asistente .as-q-sum .tot { margin-top: 4px; padding-top: 5px; border-top: 1px solid #CFCBBF; font-size: 17px; line-height: 1.3; font-weight: 700; color: var(--as-wa-ink); }
#demo-asistente .as-q-av { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; line-height: 1.25; font-weight: 500; color: var(--ok-ink); }
#demo-asistente .as-q-av + .as-q-av { margin-top: 3px; }
#demo-asistente .as-q-av svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#demo-asistente .as-q-av.n { color: #3B4A42; }
#demo-asistente .as-o-row { font-size: 15px; line-height: 1.5; }
#demo-asistente .as-pdf { display: flex; align-items: center; gap: 10px; margin: 6px -3px 2px; padding: 9px 10px; border-radius: 9px; background: #F1F0EA; border: 1px solid var(--as-wa-line); }
#demo-asistente .as-pdf-ic { position: relative; width: 32px; height: 38px; flex: none; display: grid; place-items: end center; padding-bottom: 5px; border-radius: 4px; background: var(--bad-500); color: #fff; font-size: 11px; line-height: 1; font-weight: 800; letter-spacing: 0.03em; }
#demo-asistente .as-pdf-ic::before { content: ""; position: absolute; right: 0; top: 0; border-style: solid; border-width: 0 9px 9px 0; border-color: transparent #F1F0EA #E9928B transparent; }
#demo-asistente .as-pdf b { display: block; font-size: 15px; line-height: 1.2; }
#demo-asistente .as-pdf small { font-size: 14px; line-height: 1.2; color: var(--as-wa-muted); }
#demo-asistente .as-btns { display: flex; flex-direction: column; gap: 3px; width: 316px; margin-top: 3px; }
#demo-asistente .as-btns span { display: flex; align-items: center; justify-content: center; gap: 7px; height: 40px; border-radius: 9px; background: #fff; font-size: 16px; line-height: 1; font-weight: 600; color: var(--as-wa); box-shadow: 0 1px 0.5px rgb(14 26 20 / 0.13); }
#demo-asistente .as-btns svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#demo-asistente .as-cite { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 9px; border-radius: 8px; background: var(--ai-tint); border: 1px solid var(--ai-line); font-size: 14px; line-height: 1.2; font-weight: 600; color: var(--ai-ink); }
#demo-asistente .as-cite svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
#demo-asistente .as-warnp { margin-top: 6px; padding: 6px 9px; border-radius: 8px; background: var(--esc-tint); border: 1px solid rgb(242 153 74 / 0.45); font-size: 15px; line-height: 1.3; font-weight: 500; color: var(--esc-700); }

/* Barra de escritura */
#demo-asistente .as-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 84px; display: flex; align-items: flex-start; gap: 6px; padding: 8px 7px 0; background: var(--as-wa-bg); }
#demo-asistente .as-field { position: relative; flex: 1; height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 14px; overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 1px 0.5px rgb(14 26 20 / 0.13); }
#demo-asistente .as-f-ic { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--as-tick-off); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#demo-asistente .as-f-tx { flex: 1; min-width: 0; font-size: 17px; line-height: 1.2; color: var(--as-tick-off); white-space: nowrap; overflow: hidden; }
#demo-asistente .as-field.has-text .as-f-tx { display: flex; justify-content: flex-end; color: var(--as-wa-ink); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px); mask-image: linear-gradient(90deg, transparent 0, #000 28px); }
#demo-asistente .as-rec { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: #fff; opacity: 0; transition: opacity 0.2s var(--ease-std); font-size: 17px; line-height: 1; font-weight: 500; color: #3B4A42; }
#demo-asistente .as-rec-dot { width: 11px; height: 11px; border-radius: 9999px; background: var(--bad-500); animation: asist-pulse 1s ease-in-out infinite; }
#demo-asistente .as-rec-t { min-width: 38px; font-variant-numeric: tabular-nums; }
#demo-asistente .as-rec-hint { margin-left: auto; font-size: 14px; color: var(--as-wa-muted); }
#demo-asistente .as-bar.is-rec .as-rec { opacity: 1; }
#demo-asistente .as-mic { position: relative; width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 9999px; background: var(--as-wa-2); box-shadow: 0 1px 2px rgb(14 26 20 / 0.18); transition: transform 0.35s var(--ease-out); }
#demo-asistente .as-mic svg { position: absolute; width: 24px; height: 24px; transition: opacity 0.2s var(--ease-std), transform 0.3s var(--ease-out); }
#demo-asistente .as-mic-ic { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
#demo-asistente .as-mic-ic rect { fill: #fff; }
#demo-asistente .as-send-ic { fill: #fff; opacity: 0; transform: scale(0.6); }
#demo-asistente .as-bar.is-rec .as-mic { transform: scale(1.2); }
#demo-asistente .as-bar.has-text .as-mic-ic { opacity: 0; transform: scale(0.6); }
#demo-asistente .as-bar.has-text .as-send-ic { opacity: 1; transform: none; }
#demo-asistente .as-screen .dv-home-bar { z-index: 4; }

/* ═══════════════ Panel «Lo que pasa detrás» ═════════════════ */
#demo-asistente .as-panel {
    position: relative;
    container: aspanel / inline-size;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-radius: 1.65rem;
    background: linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.025));
    border: 1px solid var(--as-card-line);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
}
#demo-asistente .as-panel-hd {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.08);
    background: rgb(255 255 255 / 0.02);
}
#demo-asistente .as-ph-l { display: none; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 0.3rem; }
#demo-asistente .as-ph-k { display: none; align-items: center; gap: 0.5rem; font-size: 0.7rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime); white-space: nowrap; }
#demo-asistente .as-ph-k svg { width: 0.9rem; height: 0.9rem; flex: none; fill: currentColor; }
#demo-asistente .as-ph-sub { font-size: 0.8rem; line-height: 1.2; color: var(--as-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container aspanel (min-width: 540px) { #demo-asistente .as-ph-l { display: flex; } }
@container demo (min-width: 1100px) { #demo-asistente .as-ph-k { display: flex; } }

/* Estado (tres píldoras apiladas; solo una visible) */
#demo-asistente .as-status { flex: none; display: grid; justify-items: start; }
@container aspanel (min-width: 540px) { #demo-asistente .as-status { justify-items: end; } }
#demo-asistente .as-status > span {
    grid-area: 1 / 1;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 1.95rem;
    padding: 0 0.8rem;
    border-radius: 9999px;
    font-size: 0.76rem;
    line-height: 1;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
    transition: opacity 0.35s var(--ease-std), transform 0.45s var(--ease-out), visibility 0s linear 0.35s;
}
#demo-asistente .as-status svg { width: 0.9rem; height: 0.9rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#demo-asistente .as-st-idle { background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.12); color: var(--as-soft); }
#demo-asistente .as-st-idle svg { fill: currentColor; stroke: none; }
#demo-asistente .as-st-run { background: rgb(212 242 90 / 0.12); border: 1px solid rgb(212 242 90 / 0.45); color: var(--lime-soft); }
#demo-asistente .as-st-run i { width: 0.55rem; height: 0.55rem; border-radius: 9999px; background: var(--lime); box-shadow: 0 0 10px var(--lime); animation: asist-pulse 1s ease-in-out infinite; }
#demo-asistente .as-st-done { background: rgb(52 211 153 / 0.14); border: 1px solid rgb(52 211 153 / 0.5); color: var(--as-mint-soft); }
#demo-asistente .as-status[data-s="idle"] .as-st-idle,
#demo-asistente .as-status[data-s="run"] .as-st-run,
#demo-asistente .as-status[data-s="done"] .as-st-done { opacity: 1; visibility: inherit; transform: none; transition-delay: 0s; }

/* Vistas (A, B, C, D) superpuestas: el alto del panel nunca cambia */
#demo-asistente .as-views { position: relative; flex: 1 1 auto; min-height: 0; }
#demo-asistente .as-view {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.55rem 0.6rem 0.6rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity 0.45s var(--ease-std), transform 0.6s var(--ease-out), visibility 0s linear 0.45s;
}
#demo-asistente .as-views[data-v="a"] .as-view-a,
#demo-asistente .as-views[data-v="b"] .as-view-b,
#demo-asistente .as-views[data-v="c"] .as-view-c,
#demo-asistente .as-views[data-v="d"] .as-view-d { opacity: 1; visibility: inherit; transform: none; transition-delay: 0.12s, 0.12s, 0s; }

/* ---------- Mensaje entrante (lado del cliente: naranja La Escuadra) ---------- */
#demo-asistente .as-in {
    position: relative;
    flex: none;
    padding: 0.45rem 0.65rem 0.55rem;
    border-radius: 1.05rem;
    background: linear-gradient(180deg, rgb(242 153 74 / 0.13), rgb(242 153 74 / 0.04));
    border: 1px solid rgb(242 153 74 / 0.32);
}
#demo-asistente .as-in-wait { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 1rem; font-size: 0.85rem; font-weight: 500; text-align: center; color: var(--as-muted); transition: opacity 0.3s var(--ease-std); }
#demo-asistente .as-in-wait > span { display: inline-flex; align-items: center; gap: 0.5rem; }
#demo-asistente .as-in-hd,
#demo-asistente .as-view-a .as-in-tx { opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease-std), transform 0.5s var(--ease-out); }
#demo-asistente .as-in.is-on .as-in-wait { opacity: 0; }
#demo-asistente .as-in.is-on .as-in-hd,
#demo-asistente .as-in.is-on .as-in-tx { opacity: 1; transform: none; }
#demo-asistente .as-in-hd { display: flex; align-items: center; gap: 0.5rem; min-width: 0; height: 1.4rem; font-size: 0.85rem; font-weight: 500; color: var(--as-soft); white-space: nowrap; }
#demo-asistente .as-in-hd b { font-weight: 600; color: var(--paper); }
#demo-asistente .as-in-role { display: none; color: var(--as-muted); }
#demo-asistente .as-av { width: 1.6rem; height: 1.6rem; flex: none; display: grid; place-items: center; border-radius: 9999px; background: linear-gradient(145deg, #B7794A, #7C4A2A); font-size: 0.66rem; font-weight: 700; color: #fff; }
#demo-asistente .as-vchip { display: inline-flex; align-items: center; gap: 0.45rem; height: 1.6rem; margin-left: 0.25rem; padding: 0 0.65rem 0 0.5rem; border-radius: 9999px; background: rgb(255 255 255 / 0.07); border: 1px solid rgb(255 255 255 / 0.12); font-size: 0.74rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--as-soft); }
#demo-asistente .as-vchip svg { width: 0.8rem; height: 0.8rem; fill: var(--esc-500); }
#demo-asistente .as-mwave { position: relative; width: 3.5rem; height: 0.8rem; border-radius: 3px; overflow: hidden; background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.28) 0 2px, transparent 2px 4px); }
#demo-asistente .as-mwave-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); background: repeating-linear-gradient(90deg, var(--esc-500) 0 2px, transparent 2px 4px); }
#demo-asistente .as-in-time { display: none; margin-left: auto; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--as-muted); }
#demo-asistente .as-in-tx { position: relative; margin-top: 0.25rem; font-size: 0.7rem; line-height: 1.42; color: var(--as-soft); }
#demo-asistente .as-tr-ghost { visibility: hidden; }
#demo-asistente .as-tr-live { position: absolute; inset: 0; }
#demo-asistente .as-in-lbl { display: inline-block; margin-right: 0.5rem; padding: 0.18rem 0.45rem; border-radius: 0.4rem; vertical-align: 0.08em; background: rgb(212 242 90 / 0.14); font-size: 0.64rem; line-height: 1.2; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime); }
#demo-asistente .as-tr-wait { display: none; align-items: center; gap: 0.5rem; color: var(--as-muted); }
#demo-asistente .as-in.is-tx .as-tr-wait { display: inline-flex; }
#demo-asistente .as-in.is-tx .as-tr:not(:empty) + .as-tr-wait,
#demo-asistente .as-in.is-txdone .as-tr-wait { display: none; }

/* Resaltado de lo que se extrajo */
#demo-asistente .as-hl { border-radius: 4px; padding: 0 2px; margin: 0 -2px; background-repeat: no-repeat; background-size: 0% 100%; transition: background-size 0.55s var(--ease-out), color 0.3s var(--ease-std); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
#demo-asistente .as-hl.is-on { background-size: 100% 100%; color: #fff; }
#demo-asistente .as-hl.c1 { background-image: linear-gradient(rgb(242 153 74 / 0.42), rgb(242 153 74 / 0.42)); }
#demo-asistente .as-hl.c2 { background-image: linear-gradient(rgb(16 185 129 / 0.45), rgb(16 185 129 / 0.45)); }
#demo-asistente .as-hl.c3 { background-image: linear-gradient(rgb(212 242 90 / 0.32), rgb(212 242 90 / 0.32)); }
#demo-asistente .as-hl.c4 { background-image: linear-gradient(rgb(246 244 238 / 0.22), rgb(246 244 238 / 0.22)); }

/* ---------- Pasos ---------- */
#demo-asistente .as-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0.4rem; }
#demo-asistente .as-step {
    position: relative;
    min-width: 0;
    padding: 0.4rem 0.6rem 0.5rem;
    border-radius: 1.05rem;
    background: var(--as-card);
    border: 1px solid rgb(255 255 255 / 0.08);
    opacity: 0.5;
    transition: opacity 0.45s var(--ease-std), border-color 0.45s var(--ease-std), background-color 0.45s var(--ease-std), box-shadow 0.45s var(--ease-std);
}
#demo-asistente .as-step.is-active { opacity: 1; border-color: rgb(212 242 90 / 0.6); background: rgb(212 242 90 / 0.05); box-shadow: 0 0 0 1px rgb(212 242 90 / 0.2), 0 0 40px -14px rgb(212 242 90 / 0.55); }
#demo-asistente .as-step.is-done { opacity: 1; border-color: rgb(255 255 255 / 0.12); }
#demo-asistente .as-st-hd { display: flex; align-items: center; gap: 0.5rem; min-width: 0; height: 1.35rem; margin-bottom: 0.2rem; }
#demo-asistente .as-st-hd > b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 0.86rem; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; color: var(--paper); white-space: nowrap; }
#demo-asistente .as-tus { color: var(--esc-500); }
#demo-asistente .as-st-k { display: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; margin-left: 0.25rem; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--as-muted); white-space: nowrap; }
#demo-asistente .as-st-t { margin-left: auto; flex: none; font-size: 0.76rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--as-mint); white-space: nowrap; opacity: 0; transition: opacity 0.3s var(--ease-std); }
#demo-asistente .as-step.is-done .as-st-t { opacity: 1; }
#demo-asistente .as-num { position: relative; width: 1.45rem; height: 1.45rem; flex: none; display: grid; place-items: center; border-radius: 9999px; background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.16); font-size: 0.7rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--as-soft); transition: background-color 0.3s var(--ease-std), border-color 0.3s var(--ease-std), color 0.3s var(--ease-std); }
#demo-asistente .as-num em { transition: opacity 0.2s var(--ease-std); }
#demo-asistente .as-num svg { position: absolute; width: 0.85rem; height: 0.85rem; fill: none; stroke: var(--forest-950); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(0.4); transition: opacity 0.25s var(--ease-std), transform 0.4s var(--ease-out); }
#demo-asistente .as-step.is-active .as-num { background: rgb(212 242 90 / 0.18); border-color: var(--lime); color: var(--lime); }
#demo-asistente .as-step.is-active .as-num::after { content: ""; position: absolute; inset: -4px; border-radius: 9999px; border: 2px solid transparent; border-top-color: var(--lime); animation: asist-spin 0.8s linear infinite; }
#demo-asistente .as-step.is-done .as-num { background: var(--as-mint); border-color: var(--as-mint); }
#demo-asistente .as-step.is-done .as-num em { opacity: 0; }
#demo-asistente .as-step.is-done .as-num svg { opacity: 1; transform: none; }

/* Paso 1: tabla extraída */
#demo-asistente .as-tbl { width: 100%; border-collapse: collapse; font-size: 0.78rem; line-height: 1.2; color: var(--as-soft); }
#demo-asistente .as-tbl thead { display: none; }
#demo-asistente .as-tbl th { padding: 0 0.3rem 0.35rem; text-align: left; font-size: 0.64rem; line-height: 1; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--as-muted); }
#demo-asistente .as-tbl td { height: 1.4rem; padding: 0 0.3rem; border-top: 1px solid rgb(255 255 255 / 0.07); white-space: nowrap; }
#demo-asistente .as-tbl tr:first-child td { border-top: 0; }
#demo-asistente .as-tbl td:first-child { position: relative; width: 100%; padding-left: 0.8rem; }
#demo-asistente .as-tbl td:first-child::before { content: ""; position: absolute; left: 0; top: 0.4rem; bottom: 0.4rem; width: 0.25rem; border-radius: 4px; background: var(--rc); }
#demo-asistente .as-tbl td:nth-child(2),
#demo-asistente .as-tbl th:nth-child(2) { text-align: right; padding-right: 0.5rem; }
#demo-asistente .as-tbl td:nth-child(2) { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--paper); }
#demo-asistente .as-tbl td:nth-child(3),
#demo-asistente .as-tbl th:nth-child(3) { display: none; }
#demo-asistente .as-tbl td:nth-child(3) { color: var(--as-muted); }
#demo-asistente .as-row { opacity: 0; transition: opacity 0.4s var(--ease-std); }
#demo-asistente .as-row td { transform: translateX(-10px); transition: transform 0.5s var(--ease-out); }
#demo-asistente .as-row.is-on { opacity: 1; }
#demo-asistente .as-row.is-on td { transform: none; }
#demo-asistente .as-row.c1 { --rc: var(--esc-500); }
#demo-asistente .as-row.c2 { --rc: var(--emerald); }
#demo-asistente .as-row.c3 { --rc: var(--lime); }
#demo-asistente .as-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.3rem; }
#demo-asistente .as-tag { display: inline-flex; align-items: center; gap: 0.3rem; height: 1.35rem; padding: 0 0.5rem; border-radius: 9999px; background: rgb(246 244 238 / 0.1); border: 1px solid rgb(246 244 238 / 0.22); font-size: 0.68rem; line-height: 1; font-weight: 600; color: var(--paper); white-space: nowrap; }
#demo-asistente .as-tag svg { width: 0.8rem; height: 0.8rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#demo-asistente .as-tag-v { background: rgb(212 242 90 / 0.12); border-color: rgb(212 242 90 / 0.42); color: var(--lime); }
#demo-asistente .as-s1 .as-tag { opacity: 0; transform: scale(0.9); transition: opacity 0.35s var(--ease-std), transform 0.45s var(--ease-out); }
#demo-asistente .as-s1 .as-tag.is-on { opacity: 1; transform: none; }

/* Paso 2 y B1: fuentes recuperadas */
#demo-asistente .as-srcs { display: flex; flex-direction: column; gap: 0.3rem; }
#demo-asistente .as-src { position: relative; min-width: 0; padding: 0.25rem 0.5rem; border-radius: 0.8rem; background: var(--as-inset); border: 1px solid rgb(255 255 255 / 0.07); opacity: 0.3; transform: translateX(10px); transition: opacity 0.45s var(--ease-std), transform 0.55s var(--ease-out), border-color 0.4s var(--ease-std); }
#demo-asistente .as-src.is-on { opacity: 1; transform: none; border-color: rgb(212 242 90 / 0.24); }
#demo-asistente .as-src-hd { display: flex; align-items: center; gap: 0.45rem; min-width: 0; height: 1.4rem; }
#demo-asistente .as-src-hd b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 0.8rem; line-height: 1.2; font-weight: 600; color: var(--paper); white-space: nowrap; }
#demo-asistente .as-src-ic,
#demo-asistente .as-act-ic { flex: none; display: grid; place-items: center; background: var(--kc); }
#demo-asistente .as-src-ic { width: 1.3rem; height: 1.3rem; border-radius: 0.4rem; }
#demo-asistente .as-src-ic svg,
#demo-asistente .as-act-ic svg { width: 0.8rem; height: 0.8rem; fill: none; stroke: var(--forest-950); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#demo-asistente .k1 { --kc: var(--esc-500); }
#demo-asistente .k2 { --kc: var(--lime); }
#demo-asistente .k3 { --kc: var(--as-mint); }
#demo-asistente .k4 { --kc: var(--paper); }
#demo-asistente .k5 { --kc: #F4A28C; }
#demo-asistente .k6 { --kc: #B9D3C5; }
#demo-asistente .as-src-meta { display: none; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 0.72rem; color: var(--as-muted); white-space: nowrap; }
#demo-asistente .as-fresh { color: var(--as-mint); }
#demo-asistente .as-page { flex: none; display: none; align-items: center; height: 1.15rem; padding: 0 0.4rem; border-radius: 0.35rem; background: rgb(212 242 90 / 0.12); border: 1px solid rgb(212 242 90 / 0.38); font-size: 0.66rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--lime); white-space: nowrap; }
#demo-asistente .as-score { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; font-weight: 700; color: var(--lime); }
#demo-asistente .as-score em { min-width: 2.2em; text-align: right; font-variant-numeric: tabular-nums; }
#demo-asistente .as-sbar { position: relative; width: 2.25rem; height: 0.3rem; overflow: hidden; border-radius: 9999px; background: rgb(255 255 255 / 0.1); }
#demo-asistente .as-sbar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--sc, 0) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--emerald), var(--lime)); }
#demo-asistente .as-frag { display: none; margin-top: 0.2rem; font-size: 0.74rem; line-height: 1.35; color: var(--as-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#demo-asistente .as-frag mark { border-radius: 3px; padding: 0 2px; color: var(--as-muted); background: linear-gradient(rgb(212 242 90 / 0.22), rgb(212 242 90 / 0.22)) no-repeat 0 0 / 0% 100%; transition: background-size 0.6s var(--ease-out) 0.15s, color 0.3s var(--ease-std) 0.15s; }
#demo-asistente .as-src.is-on .as-frag mark { background-size: 100% 100%; color: var(--paper); }

/* En angosto, las 4 fuentes del paso 2 van en rejilla 2 × 2 */
@container aspanel (max-width: 539px) {
    #demo-asistente .as-s2 .as-srcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem; }
    #demo-asistente .as-s2 .as-src { padding: 0.35rem 0.45rem; transform: translateY(6px); }
    #demo-asistente .as-s2 .as-src.is-on { transform: none; }
    #demo-asistente .as-s2 .as-src-hd { height: auto; min-height: 1.85rem; gap: 0.35rem; }
    #demo-asistente .as-s2 .as-src-ic { display: none; }
    #demo-asistente .as-s2 .as-src-hd b { white-space: normal; line-height: 1.15; font-size: 0.74rem; overflow: visible; }
    #demo-asistente .as-s2 .as-score { font-size: 0.7rem; }
    #demo-asistente .as-s2 .as-score em { min-width: 0; }
}

/* Paso 3: redacción */
#demo-asistente .as-s3-body { display: grid; min-height: 1.6rem; }
#demo-asistente .as-skel { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; gap: 0.4rem; transition: opacity 0.3s var(--ease-std); }
#demo-asistente .as-skel i { height: 0.45rem; border-radius: 6px; background: rgb(255 255 255 / 0.08); }
#demo-asistente .as-skel i:nth-child(2) { width: 62%; }
#demo-asistente .as-s3.is-active .as-skel i { background: linear-gradient(90deg, rgb(212 242 90 / 0.08) 0%, rgb(212 242 90 / 0.3) 50%, rgb(212 242 90 / 0.08) 100%); background-size: 200% 100%; animation: asist-shine 1.6s linear infinite; }
#demo-asistente .as-draft { grid-area: 1 / 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.15rem 0.6rem; opacity: 0; transform: translateY(6px); transition: opacity 0.35s var(--ease-std), transform 0.45s var(--ease-out); }
#demo-asistente .as-s3.has-draft .as-skel { opacity: 0; }
#demo-asistente .as-s3.has-draft .as-draft { opacity: 1; transform: none; }
#demo-asistente .as-draft-doc { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; color: var(--as-soft); white-space: nowrap; }
#demo-asistente .as-draft-doc svg { width: 0.9rem; height: 0.9rem; flex: none; fill: none; stroke: var(--lime); stroke-width: 2; stroke-linejoin: round; }
#demo-asistente .as-draft-tot { font-size: 0.68rem; color: var(--as-muted); white-space: nowrap; }
#demo-asistente .as-draft-tot b { margin-left: 0.25rem; font-size: 0.92rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--paper); }

/* Paso 4: verificaciones */
#demo-asistente .as-checks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
#demo-asistente .as-ck { position: relative; display: flex; align-items: center; min-width: 0; height: 1.25rem; padding-left: 1.4rem; font-size: 0.72rem; line-height: 1.1; font-weight: 500; color: var(--as-muted); white-space: nowrap; transition: color 0.3s var(--ease-std); }
#demo-asistente .as-ck::before { content: ""; position: absolute; left: 0; top: 50%; width: 1rem; height: 1rem; margin-top: -0.5rem; border-radius: 0.3rem; border: 1.5px solid rgb(255 255 255 / 0.22); transition: background-color 0.3s var(--ease-std), border-color 0.3s var(--ease-std); }
#demo-asistente .as-ck::after { content: ""; position: absolute; left: 0.34rem; top: 50%; width: 0.3rem; height: 0.52rem; margin-top: -0.34rem; border: solid var(--forest-950); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform 0.35s var(--ease-out); }
#demo-asistente .as-ck.is-on { color: var(--paper); }
#demo-asistente .as-ck.is-on::before { background: var(--as-mint); border-color: var(--as-mint); }
#demo-asistente .as-ck.is-on::after { transform: rotate(45deg) scale(1); }

/* ---------- Vista B ---------- */
#demo-asistente .as-in-q .as-in-hd { height: 1.6rem; }
#demo-asistente .as-in-q .as-q-text,
#demo-asistente .as-in-q .as-tags { opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease-std), transform 0.5s var(--ease-out); }
#demo-asistente .as-in-q.is-on .as-q-text,
#demo-asistente .as-in-q.is-on .as-tags { opacity: 1; transform: none; }
#demo-asistente .as-q-text { margin-top: 0.3rem; font-size: 0.98rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; color: var(--paper); }
#demo-asistente .as-in-q .as-tags { margin-top: 0.45rem; }
#demo-asistente .as-tag-about { display: none; }
#demo-asistente .as-rules { list-style: none; display: flex; flex-direction: column; gap: 0.35rem; }
#demo-asistente .as-rule { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.4rem 0.55rem; border-radius: 0.8rem; background: var(--as-inset); border: 1px solid rgb(255 255 255 / 0.07); font-size: 0.76rem; line-height: 1.3; color: var(--as-soft); opacity: 0.3; transform: translateY(6px); transition: opacity 0.4s var(--ease-std), transform 0.5s var(--ease-out); }
#demo-asistente .as-rule.is-on { opacity: 1; transform: none; }
#demo-asistente .as-rule b { font-weight: 600; color: var(--paper); }
#demo-asistente .as-rule > i { width: 1.1rem; height: 1.1rem; flex: none; display: grid; place-items: center; border-radius: 0.35rem; }
#demo-asistente .as-rule > i svg { width: 0.72rem; height: 0.72rem; fill: none; stroke: var(--forest-950); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
#demo-asistente .as-rule > i.ok { background: var(--as-mint); }
#demo-asistente .as-rule > i.warn { background: var(--esc-500); }
#demo-asistente .as-rule-w { border-color: rgb(242 153 74 / 0.45); background: rgb(242 153 74 / 0.08); }
#demo-asistente .as-cite-prev { display: inline-flex; align-items: center; gap: 0.4rem; max-width: 100%; padding: 0.35rem 0.6rem; border-radius: 0.6rem; background: var(--ai-tint); border: 1px solid var(--ai-line); color: var(--ai-ink); font-size: 0.74rem; line-height: 1.2; font-weight: 600; opacity: 0.3; transform: scale(0.96); transition: opacity 0.4s var(--ease-std), transform 0.5s var(--ease-out); }
#demo-asistente .as-cite-prev svg { width: 0.85rem; height: 0.85rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
#demo-asistente .as-cite-prev.is-on { opacity: 1; transform: none; }
#demo-asistente .as-honest { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; padding: 0.4rem 0.6rem; border-radius: 0.8rem; border: 1px dashed rgb(255 255 255 / 0.22); font-size: 0.74rem; line-height: 1.3; font-weight: 500; color: var(--as-soft); opacity: 0; transition: opacity 0.45s var(--ease-std); }
#demo-asistente .as-honest.is-on { opacity: 1; }
#demo-asistente .as-honest svg { width: 1rem; height: 1rem; flex: none; fill: none; stroke: var(--lime); stroke-width: 2; stroke-linecap: round; }
#demo-asistente .as-b3-list { list-style: none; display: none; flex-direction: column; gap: 0.25rem; margin-top: 0.45rem; }
#demo-asistente .as-b3-list li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.76rem; line-height: 1.25; font-weight: 500; color: var(--as-soft); opacity: 0; transform: translateX(-8px); transition: opacity 0.35s var(--ease-std), transform 0.45s var(--ease-out); }
#demo-asistente .as-b3-list li.is-on { opacity: 1; transform: none; }
#demo-asistente .as-b3-list svg { width: 0.9rem; height: 0.9rem; flex: none; fill: none; stroke: var(--as-mint); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Vista C ---------- */
#demo-asistente .as-acts { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }
#demo-asistente .as-act { display: flex; align-items: center; gap: 0.55rem; min-width: 0; padding: 0.3rem 0.55rem; border-radius: 0.8rem; background: var(--as-inset); border: 1px solid rgb(255 255 255 / 0.07); opacity: 0.25; transform: translateX(-10px); transition: opacity 0.4s var(--ease-std), transform 0.5s var(--ease-out), border-color 0.4s var(--ease-std); }
#demo-asistente .as-act.is-on { opacity: 1; transform: none; border-color: rgb(52 211 153 / 0.3); }
#demo-asistente .as-act-ic { width: 1.4rem; height: 1.4rem; border-radius: 0.45rem; }
#demo-asistente .as-act-ic svg { width: 0.9rem; height: 0.9rem; }
#demo-asistente .as-act > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
#demo-asistente .as-act b { font-size: 0.78rem; line-height: 1.2; font-weight: 600; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#demo-asistente .as-act small { display: none; font-size: 0.7rem; line-height: 1.2; color: var(--as-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#demo-asistente .as-act-ok { width: 1.15rem; height: 1.15rem; flex: none; display: grid; place-items: center; border-radius: 9999px; background: var(--as-mint); transform: scale(0); transition: transform 0.4s var(--ease-out) 0.15s; }
#demo-asistente .as-act-ok svg { width: 0.7rem; height: 0.7rem; fill: none; stroke: var(--forest-950); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#demo-asistente .as-act.is-on .as-act-ok { transform: none; }
#demo-asistente .as-c2 { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }

/* Notificación del CRM (interfaz clara) */
#demo-asistente .as-notif { padding: 0.65rem 0.8rem 0.7rem; border-radius: 1.05rem; background: var(--ui-bg); color: var(--ui-ink); box-shadow: 0 24px 50px -24px rgb(0 0 0 / 0.7); opacity: 0; transform: translateX(30px); transition: opacity 0.45s var(--ease-std), transform 0.6s var(--ease-out); }
#demo-asistente .as-notif.is-on { opacity: 1; transform: none; }
#demo-asistente .as-notif-hd { display: flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; line-height: 1; color: var(--ui-muted); }
#demo-asistente .as-notif-hd b { font-weight: 600; color: var(--ui-ink); }
#demo-asistente .as-notif-hd > span:last-child { margin-left: auto; }
#demo-asistente .as-notif-app.esc-logo-mark { width: 1.2rem; height: 1.2rem; border-radius: 0.35rem; }
#demo-asistente .as-notif-app svg { width: 0.75rem; height: 0.75rem; }
#demo-asistente .as-notif-t { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.45rem; font-size: 0.86rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
#demo-asistente .as-notif-t svg { width: 1rem; height: 1rem; flex: none; fill: none; stroke: var(--esc-600); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#demo-asistente .as-notif-t b { color: var(--esc-700); }
#demo-asistente .as-notif-b { margin-top: 0.3rem; font-size: 0.76rem; line-height: 1.4; color: #34443B; }
#demo-asistente .as-notif-b b { color: var(--ui-ink); }
#demo-asistente .as-notif-f { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }
#demo-asistente .as-notif-f span { padding: 0.25rem 0.45rem; border-radius: 0.45rem; background: var(--ui-bg-2); border: 1px solid var(--ui-line); font-size: 0.68rem; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; color: #34443B; white-space: nowrap; }

#demo-asistente .as-human { flex: 1 1 auto; display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.85rem; border-radius: 1.05rem; background: linear-gradient(135deg, rgb(242 153 74 / 0.18), rgb(16 185 129 / 0.1)); border: 1px solid rgb(242 153 74 / 0.36); opacity: 0; transform: translateY(12px); transition: opacity 0.5s var(--ease-std), transform 0.6s var(--ease-out); }
#demo-asistente .as-human.is-on { opacity: 1; transform: none; }
#demo-asistente .as-human-ic { width: 2.1rem; height: 2.1rem; flex: none; display: grid; place-items: center; border-radius: 0.7rem; background: var(--esc-500); }
#demo-asistente .as-human-ic svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: var(--forest-950); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#demo-asistente .as-human p { font-size: 0.95rem; line-height: 1.15; font-weight: 600; letter-spacing: -0.03em; color: var(--paper); }
#demo-asistente .as-human em { color: var(--lime); }

/* ---------- Vista D: comparativo ---------- */
#demo-asistente .as-view-d { gap: 0.75rem; }
#demo-asistente .as-d-hd { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
#demo-asistente .as-illu { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0.2rem 0.6rem; border-radius: 0.5rem; background: rgb(242 153 74 / 0.12); border: 1px solid rgb(242 153 74 / 0.45); font-size: 0.64rem; line-height: 1.3; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #F7C49A; }
#demo-asistente .as-d-hd h4 { font-size: 1.05rem; line-height: 1.15; font-weight: 600; letter-spacing: -0.03em; color: var(--paper); }

/* Línea de tiempo · variante de lista (angosta) */
#demo-asistente .as-tl { --lh: 1.1rem; position: relative; display: flex; flex-direction: column; gap: 0.7rem; margin-block: auto; }
#demo-asistente .as-tl-axis { order: -2; position: relative; height: 1.15rem; border-bottom: 1px solid rgb(255 255 255 / 0.16); }
#demo-asistente .as-tl-axis span { position: absolute; left: var(--x); top: 0; transform: translateX(-50%); font-size: 0.66rem; line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--as-muted); white-space: nowrap; }
#demo-asistente .as-tl-axis span:first-child { transform: none; }
#demo-asistente .as-tl-axis span:last-child { transform: translateX(-100%); }
#demo-asistente .as-tl-axis span:nth-child(2n) { display: none; }
#demo-asistente .as-tl-closed { order: -1; display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.64rem; line-height: 1; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--as-muted); }
#demo-asistente .as-tl-closed::before { content: ""; width: 1.4rem; height: 0.7rem; border-radius: 0.25rem; border: 1px dashed rgb(255 255 255 / 0.22); background: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.1) 0 4px, rgb(255 255 255 / 0.02) 4px 8px); }
#demo-asistente .as-tl-row { position: relative; }
#demo-asistente .as-tl-lbl { display: block; height: var(--lh); margin-bottom: 0.45rem; font-size: 0.8rem; line-height: var(--lh); font-weight: 600; letter-spacing: -0.01em; }
#demo-asistente .as-tl-bad { --ec: var(--as-coral); }
#demo-asistente .as-tl-good { --ec: var(--as-mint); }
#demo-asistente .as-tl-bad .as-tl-lbl { color: var(--as-coral); }
#demo-asistente .as-tl-good .as-tl-lbl { color: var(--as-mint); }
#demo-asistente .as-tl-track { position: relative; height: 0.5rem; border-radius: 9999px; background: rgb(255 255 255 / 0.07); }
#demo-asistente .as-tl-track::before { content: ""; position: absolute; left: 0; top: -0.35rem; bottom: -0.35rem; width: 72.22%; border-radius: 0.35rem; border: 1px dashed rgb(255 255 255 / 0.14); background: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.05) 0 6px, rgb(255 255 255 / 0.015) 6px 12px); }
#demo-asistente .as-tl-bar { position: absolute; left: 9.44%; top: 0; bottom: 0; width: 0; border-radius: 9999px; background: linear-gradient(90deg, rgb(200 55 45 / 0.75), var(--as-coral)); box-shadow: 0 0 20px -4px rgb(240 133 123 / 0.8); transition: width 1.8s cubic-bezier(0.45, 0.05, 0.3, 1); }
#demo-asistente .as-view-d.is-run .as-tl-bar { width: 80.84%; }
#demo-asistente .as-tl-evs { list-style: none; display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.65rem; }
#demo-asistente .as-tl-ev { display: flex; align-items: center; gap: 0.45rem; min-width: 0; font-size: 0.74rem; line-height: 1.25; color: var(--as-soft); opacity: 0; transition: opacity 0.4s var(--ease-std); }
#demo-asistente .as-tl-ev::before { content: ""; width: 0.45rem; height: 0.45rem; flex: none; border-radius: 9999px; background: var(--ec); }
#demo-asistente .as-tl-ev.is-on { opacity: 1; }
#demo-asistente .as-tl-ev > i { position: absolute; left: var(--x); top: calc(var(--lh) + 0.45rem + 0.25rem); width: 0.8rem; height: 0.8rem; margin: -0.4rem 0 0 -0.4rem; border-radius: 9999px; background: var(--forest-950); border: 3px solid var(--ec); }
#demo-asistente .as-tl-blip > i { width: 1.05rem; height: 1.05rem; margin: -0.525rem 0 0 -0.525rem; border: 0; background: var(--lime); box-shadow: 0 0 0 4px rgb(212 242 90 / 0.28), 0 0 22px var(--lime); }
#demo-asistente .as-tl-ev em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#demo-asistente .as-tl-blip em { font-weight: 700; color: var(--lime-soft); }
#demo-asistente .as-tl-end em { font-weight: 700; color: var(--as-coral-soft); }

#demo-asistente .as-d-cards { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
#demo-asistente .as-d-card { display: flex; flex-direction: column; justify-content: center; padding: 0.65rem 0.85rem; border-radius: 1.05rem; opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ease-std), transform 0.6s var(--ease-out); }
#demo-asistente .as-d-card.is-on { opacity: 1; transform: none; }
#demo-asistente .as-d-bad { background: linear-gradient(180deg, rgb(200 55 45 / 0.18), rgb(200 55 45 / 0.05)); border: 1px solid rgb(240 133 123 / 0.4); }
#demo-asistente .as-d-good { background: linear-gradient(180deg, rgb(16 185 129 / 0.2), rgb(16 185 129 / 0.05)); border: 1px solid rgb(52 211 153 / 0.45); box-shadow: 0 0 50px -20px rgb(52 211 153 / 0.55); }
#demo-asistente .as-d-k { font-size: 0.64rem; line-height: 1; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
#demo-asistente .as-d-bad .as-d-k { color: var(--as-coral); }
#demo-asistente .as-d-good .as-d-k { color: var(--as-mint); }
#demo-asistente .as-d-big { margin-top: 0.35rem; font-size: 1rem; line-height: 1.15; font-weight: 600; letter-spacing: -0.03em; color: var(--paper); }
#demo-asistente .as-d-sm { margin-top: 0.3rem; font-size: 0.74rem; line-height: 1.4; color: var(--as-soft); }

/* ═══════════ Panel medio (≥ 540 px de ancho de panel) ═══════════ */
@container aspanel (min-width: 540px) {
    #demo-asistente .as-panel-hd { padding: 0.75rem 1rem; }
    #demo-asistente .as-view { padding: 0.85rem 1rem 1rem; gap: 0.7rem; }
    #demo-asistente .as-in { padding: 0.65rem 0.95rem 0.75rem; }
    #demo-asistente .as-in-time { display: inline; }
    #demo-asistente .as-in-tx { font-size: 0.82rem; margin-top: 0.35rem; }
    #demo-asistente .as-draft-doc,
    #demo-asistente .as-draft-tot { font-size: 0.74rem; }
    #demo-asistente .as-draft-tot b { font-size: 1.05rem; }
    #demo-asistente .as-act small { display: block; }
    #demo-asistente .as-act { padding: 0.35rem 0.55rem; }
    #demo-asistente .as-act-ic { width: 1.6rem; height: 1.6rem; border-radius: 0.5rem; }
    #demo-asistente .as-grid { gap: 0.6rem; }
    #demo-asistente .as-in-hd { height: 1.7rem; }
    #demo-asistente .as-step { padding: 0.5rem 0.75rem 0.6rem; }
    #demo-asistente .as-st-hd { height: 1.6rem; margin-bottom: 0.3rem; }
    #demo-asistente .as-tbl td { height: 1.55rem; }
    #demo-asistente .as-tag { height: 1.5rem; padding: 0 0.6rem; font-size: 0.72rem; }
    #demo-asistente .as-tags { margin-top: 0.4rem; gap: 0.4rem; }
    #demo-asistente .as-grid-a { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
    #demo-asistente .as-s1 { grid-column: 1; grid-row: 1; }
    #demo-asistente .as-s3 { grid-column: 1; grid-row: 2; }
    #demo-asistente .as-s4 { grid-column: 1; grid-row: 3; align-self: start; }
    #demo-asistente .as-s2 { grid-column: 2; grid-row: 1 / span 3; }
    #demo-asistente .as-tbl thead { display: table-header-group; }
    #demo-asistente .as-srcs { gap: 0.45rem; }
    #demo-asistente .as-src { padding: 0.45rem 0.65rem 0.5rem; }
    #demo-asistente .as-frag { display: block; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    #demo-asistente .as-checks { grid-template-columns: minmax(0, 1fr); }
    #demo-asistente .as-ck { height: 1.3rem; font-size: 0.74rem; }
    #demo-asistente .as-grid-b { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); grid-template-rows: auto 1fr; }
    #demo-asistente .as-b1 { grid-column: 1; grid-row: 1 / span 2; }
    #demo-asistente .as-b2 { grid-column: 2; grid-row: 1; }
    #demo-asistente .as-b3 { grid-column: 2; grid-row: 2; align-self: start; }
    #demo-asistente .as-q-text { font-size: 1.05rem; }
    #demo-asistente .as-tag-about { display: inline-flex; }
    #demo-asistente .as-page { display: inline-flex; padding: 0 0.3rem; font-size: 0.64rem; }
    #demo-asistente .as-src-hd { gap: 0.4rem; }
    #demo-asistente .as-b3-list { display: flex; }
    #demo-asistente .as-grid-c { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
    #demo-asistente .as-human { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.6rem; }
    #demo-asistente .as-human p { font-size: 1.2rem; }
    #demo-asistente .as-d-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #demo-asistente .as-d-hd h4 { font-size: 1.2rem; }
    #demo-asistente .as-tl-axis span:nth-child(2n) { display: inline; }
    #demo-asistente .as-tl { gap: 0.85rem; }
    #demo-asistente .as-tl-evs { gap: 0.3rem; margin-top: 0.75rem; }
}

/* Panel medio-amplio (700–859 px): misma rejilla, tipografía más cómoda */
@container aspanel (min-width: 700px) {
    #demo-asistente .as-in-tx { font-size: 0.88rem; }
    #demo-asistente .as-st-hd > b { font-size: 0.92rem; }
    #demo-asistente .as-tbl { font-size: 0.82rem; }
    #demo-asistente .as-src-hd b { font-size: 0.84rem; }
    #demo-asistente .as-frag { font-size: 0.78rem; }
    #demo-asistente .as-q-text { font-size: 1.15rem; }
    #demo-asistente .as-rule,
    #demo-asistente .as-b3-list li,
    #demo-asistente .as-cite-prev,
    #demo-asistente .as-honest { font-size: 0.8rem; }
    #demo-asistente .as-act b { font-size: 0.84rem; }
    #demo-asistente .as-act small { font-size: 0.74rem; }
    #demo-asistente .as-notif-t { font-size: 0.92rem; }
    #demo-asistente .as-notif-b { font-size: 0.82rem; }
    #demo-asistente .as-human p { font-size: 1.35rem; }
    #demo-asistente .as-d-hd h4 { font-size: 1.35rem; }
    #demo-asistente .as-tl-lbl { font-size: 0.9rem; }
    #demo-asistente .as-tl-ev { font-size: 0.8rem; }
    #demo-asistente .as-d-k { font-size: 0.66rem; }
    #demo-asistente .as-d-big { font-size: 1.3rem; }
    #demo-asistente .as-d-sm { font-size: 0.86rem; }
    #demo-asistente .as-d-card { padding: 0.8rem 1.1rem; }
}

/* ═══════════ Panel grande (≥ 860 px de ancho de panel) ═══════════ */
@container aspanel (min-width: 860px) {
    #demo-asistente .as-panel-hd { padding: 0.85rem 1.25rem; }
    #demo-asistente .as-view { padding: 1rem 1.25rem 1.1rem; gap: 0.8rem; }
    #demo-asistente .as-in { padding: 0.75rem 1.1rem 0.85rem; }
    #demo-asistente .as-in-role { display: inline; }
    #demo-asistente .as-in-tx { font-size: 0.95rem; }
    #demo-asistente .as-mwave { width: 5rem; }
    #demo-asistente .as-grid { gap: 0.6rem 0.8rem; }
    #demo-asistente .as-step { padding: 0.65rem 0.95rem 0.8rem; border-radius: 1.35rem; }
    #demo-asistente .as-st-hd { height: 1.8rem; margin-bottom: 0.45rem; gap: 0.6rem; }
    #demo-asistente .as-st-hd > b { font-size: 1rem; }
    #demo-asistente .as-st-k { display: block; flex: 0 1000 auto; letter-spacing: 0.09em; }
    #demo-asistente .as-st-hd > b { flex-shrink: 0; }
    #demo-asistente .as-num { width: 1.65rem; height: 1.65rem; font-size: 0.78rem; }
    #demo-asistente .as-st-t { font-size: 0.82rem; }
    #demo-asistente .as-tbl { font-size: 0.88rem; }
    #demo-asistente .as-tbl td { height: 1.65rem; }
    #demo-asistente .as-tbl td:nth-child(3),
    #demo-asistente .as-tbl th:nth-child(3) { display: table-cell; }
    #demo-asistente .as-tags { gap: 0.5rem; margin-top: 0.5rem; }
    #demo-asistente .as-tag { height: 1.7rem; padding: 0 0.7rem; font-size: 0.78rem; }
    #demo-asistente .as-srcs { gap: 0.5rem; }
    #demo-asistente .as-src { padding: 0.55rem 0.8rem 0.6rem; border-radius: 1rem; }
    #demo-asistente .as-src-hd { height: 1.5rem; gap: 0.55rem; }
    #demo-asistente .as-src-hd b { font-size: 0.9rem; }
    #demo-asistente .as-page { padding: 0 0.4rem; font-size: 0.66rem; }
    #demo-asistente .as-src-ic { width: 1.45rem; height: 1.45rem; }
    #demo-asistente .as-src-meta { display: block; flex-shrink: 1000; }
    #demo-asistente .as-src-hd b { flex-shrink: 0; }
    #demo-asistente .as-score { font-size: 0.82rem; }
    #demo-asistente .as-sbar { width: 3.25rem; }
    #demo-asistente .as-frag { font-size: 0.84rem; margin-top: 0.3rem; }
    #demo-asistente .as-s3-body { min-height: 2rem; }
    #demo-asistente .as-draft-doc { font-size: 0.82rem; }
    #demo-asistente .as-draft-tot { font-size: 0.82rem; }
    #demo-asistente .as-draft-tot b { font-size: 1.2rem; }
    #demo-asistente .as-checks { grid-template-columns: repeat(2, max-content); justify-content: space-between; gap: 0.3rem 0.75rem; }
    #demo-asistente .as-ck { height: 1.55rem; font-size: 0.79rem; padding-left: 1.5rem; }
    #demo-asistente .as-ck::before { width: 1.1rem; height: 1.1rem; margin-top: -0.55rem; }
    #demo-asistente .as-ck::after { left: 0.38rem; }
    #demo-asistente .as-q-text { font-size: 1.3rem; }
    #demo-asistente .as-in-q .as-tags { margin-top: 0.55rem; }
    #demo-asistente .as-rule { font-size: 0.86rem; padding: 0.5rem 0.7rem; gap: 0.6rem; }
    #demo-asistente .as-rule > i { width: 1.3rem; height: 1.3rem; }
    #demo-asistente .as-b1 .as-src { padding: 0.65rem 0.85rem; }
    #demo-asistente .as-b1 .as-frag { white-space: normal; }
    #demo-asistente .as-honest { margin-top: 0.6rem; padding: 0.55rem 0.75rem; font-size: 0.84rem; }
    #demo-asistente .as-cite-prev { font-size: 0.84rem; padding: 0.45rem 0.75rem; }
    #demo-asistente .as-b3-list { gap: 0.35rem; margin-top: 0.6rem; }
    #demo-asistente .as-b3-list li { font-size: 0.86rem; }
    #demo-asistente .as-acts { gap: 0.4rem; }
    #demo-asistente .as-act { padding: 0.45rem 0.7rem; gap: 0.7rem; border-radius: 0.95rem; }
    #demo-asistente .as-act-ic { width: 1.9rem; height: 1.9rem; border-radius: 0.6rem; }
    #demo-asistente .as-act-ic svg { width: 1.05rem; height: 1.05rem; }
    #demo-asistente .as-act b { font-size: 0.9rem; }
    #demo-asistente .as-act small { font-size: 0.8rem; }
    #demo-asistente .as-act-ok { width: 1.3rem; height: 1.3rem; }
    #demo-asistente .as-notif { padding: 0.85rem 1rem 0.9rem; border-radius: 1.35rem; }
    #demo-asistente .as-notif-hd { font-size: 0.8rem; }
    #demo-asistente .as-notif-t { font-size: 1rem; }
    #demo-asistente .as-notif-b { font-size: 0.88rem; }
    #demo-asistente .as-notif-f span { font-size: 0.76rem; }
    #demo-asistente .as-human { border-radius: 1.35rem; padding: 1rem 1.25rem; }
    #demo-asistente .as-human-ic { width: 2.6rem; height: 2.6rem; border-radius: 0.85rem; }
    #demo-asistente .as-human-ic svg { width: 1.45rem; height: 1.45rem; }
    #demo-asistente .as-human p { font-size: 1.6rem; line-height: 1.1; }

    /* Vista D: línea de tiempo con etiquetas sobre la pista */
    #demo-asistente .as-d-hd h4 { font-size: 1.55rem; }
    #demo-asistente .as-illu { font-size: 0.66rem; }
    #demo-asistente .as-tl { --lw: 8.5rem; display: block; height: 13.5rem; margin-block: 0; padding-left: var(--lw); }
    #demo-asistente .as-d-cards { flex: 1 1 auto; min-height: 0; }
    #demo-asistente .as-tl-closed { position: absolute; left: var(--lw); top: 0; bottom: 1.6rem; width: calc((100% - var(--lw)) * 0.7222); display: block; border-radius: 0.9rem; border: 1px dashed rgb(255 255 255 / 0.12); background: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.035) 0 10px, rgb(255 255 255 / 0.012) 10px 20px); }
    #demo-asistente .as-tl-closed::before { display: none; }
    #demo-asistente .as-tl-closed span { position: absolute; left: 50%; top: 0.6rem; transform: translateX(-50%); white-space: nowrap; }
    #demo-asistente .as-tl-axis { position: absolute; left: var(--lw); right: 0; bottom: 0; height: 1.3rem; border-bottom: 0; border-top: 1px solid rgb(255 255 255 / 0.18); }
    #demo-asistente .as-tl-axis span { top: 0.45rem; font-size: 0.74rem; }
    #demo-asistente .as-tl-row { position: absolute; left: 0; right: 0; height: 5rem; display: flex; align-items: center; }
    #demo-asistente .as-tl-bad { top: 1.9rem; }
    #demo-asistente .as-tl-good { top: 6.9rem; }
    #demo-asistente .as-tl-lbl { flex: none; width: var(--lw); height: auto; margin: 0; padding-right: 1rem; font-size: 1.05rem; line-height: 1.1; }
    #demo-asistente .as-tl-track { flex: 1; height: 0.6rem; }
    #demo-asistente .as-tl-track::before { display: none; }
    #demo-asistente .as-tl-evs { position: absolute; left: var(--lw); right: 0; top: 50%; height: 0; margin: 0; display: block; }
    #demo-asistente .as-tl-ev { position: absolute; left: var(--x); top: 0; width: 0; height: 0; display: block; font-size: 0.84rem; }
    #demo-asistente .as-tl-ev::before { display: none; }
    #demo-asistente .as-tl-ev > i { left: 0; top: 0; width: 1rem; height: 1rem; margin: -0.5rem 0 0 -0.5rem; }
    #demo-asistente .as-tl-blip > i { width: 1.4rem; height: 1.4rem; margin: -0.7rem 0 0 -0.7rem; }
    #demo-asistente .as-tl-ev em { position: absolute; left: -0.75rem; overflow: visible; }
    #demo-asistente .as-tl-ev em.as-ev-up { bottom: 0.95rem; }
    #demo-asistente .as-tl-ev em.as-ev-dn { top: 0.95rem; }
    #demo-asistente .as-tl-ev em.as-ev-r { left: auto; right: -0.75rem; }
    #demo-asistente .as-d-card { padding: 0.9rem 1.25rem; border-radius: 1.35rem; }
    #demo-asistente .as-d-k { font-size: 0.7rem; }
    #demo-asistente .as-d-big { font-size: 1.45rem; margin-top: 0.45rem; }
    #demo-asistente .as-d-sm { font-size: 0.92rem; margin-top: 0.4rem; }
}

/* Barra de relevancia: solo si el panel tiene espacio */
@container aspanel (max-width: 699px) { #demo-asistente .as-sbar { display: none; } }

/* Cabecera del panel en escritorio: textos + estado | cronómetro */
@container demo (min-width: 1100px) {
    #demo-asistente .as-panel-hd { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l clock" "st clock"; gap: 0.45rem 1rem; }
    #demo-asistente .as-ph-l { grid-area: l; }
    #demo-asistente .as-status { grid-area: st; justify-items: start; }
    #demo-asistente .as-clock--card { grid-area: clock; }
}
@container aspanel (min-width: 860px) {
    #demo-asistente .as-panel-hd { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "l st clock"; }
    #demo-asistente .as-status { justify-items: end; }
}
@container aspanel (max-width: 859px) {
    #demo-asistente .as-ph-sub-x { display: none; }
}