/* ============================================================================
   Modal "Ver cómo funciona" — demo animada del MCP (namespaced .mcpv)
   Autocontenido: dark, no depende del tema de la landing.
   ========================================================================== */
:root{
  --mcpv-ink:#0E1116; --mcpv-ink-2:#161A22;
  --mcpv-line:rgba(255,255,255,.10); --mcpv-line-soft:rgba(255,255,255,.06);
  --mcpv-stroke:rgba(255,255,255,.5);
  --mcpv-title:#FFFFFF; --mcpv-body:#C7CDD9; --mcpv-muted:#8B93A3;
  --mcpv-primary:#3DA9FE; --mcpv-primary-deep:#1565C0; --mcpv-accent:#A855F7;
  --mcpv-spark:#D97757; --mcpv-up:#9BE38B; --mcpv-down:#FF8A80;
}

/* La landing fuerza `* { font-family: Nexa }` — el modal usa su propia tipografía de sistema
   (como fue diseñado) para no verse deformado/agrandado. */
.mcpv-modal, .mcpv-modal *{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
}

/* ---- Modal ---- */
/* Fondo desenfocado + oscurecido SOLO cuando el modal MCP está abierto */
body.mcpv-modal-open .modal-backdrop{ background:#05070B; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
body.mcpv-modal-open .modal-backdrop.show{ opacity:.80; }
.mcpv-modal .modal-dialog{ max-width:740px; flex-direction:column; justify-content:center; }
/* Bootstrap centra con un ::before de alto = viewport; en column rompe el layout.
   Lo anulo porque acá centro con justify-content:center. */
.mcpv-modal .modal-dialog-centered::before{ display:none !important; content:none !important; }
.mcpv-modal .modal-content{ border:0; border-radius:18px; overflow:hidden; background:transparent;
  box-shadow:0 30px 80px rgba(6,9,16,.55);
  display:block; }   /* block (no flex) → la ventana toma su altura de contenido, no se estira */
.mcpv-casewin[hidden]{ display:none !important; }   /* solo se ve el caso activo */

/* Pills para cambiar de caso (debajo del modal) */
.mcpv-caseswitch{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px;
  pointer-events:auto; }   /* clickeable: si no, el click atraviesa al backdrop y cierra el modal */
.mcpv-pill{ border:1px solid var(--mcpv-line); background:var(--mcpv-ink-2); color:var(--mcpv-body);
  font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:999px; cursor:pointer;
  box-shadow:0 6px 18px rgba(6,9,16,.45);
  transition:background .15s ease, border-color .15s ease, color .15s ease; }
.mcpv-pill:hover{ background:#20252f; border-color:rgba(255,255,255,.28); color:#fff; }

/* ---- Ventana del chat ---- */
/* La landing pone `section { padding: 80px 0 }` — la ventana es un <section>, así que
   hay que resetear su padding (con especificidad que le gane a la regla de la landing). */
.mcpv-modal .mcpv-win{ padding:0 !important; margin:0 !important; }
.mcpv-win{ background:var(--mcpv-ink); border:1px solid var(--mcpv-stroke); border-radius:18px;
  overflow:hidden; position:relative; }
.mcpv-winhead{ display:flex; align-items:center; justify-content:space-between; padding:0 16px;
  height:48px; flex:0 0 auto; box-sizing:border-box; position:relative;
  background:var(--mcpv-ink-2); border-bottom:1px solid var(--mcpv-stroke); }
.mcpv-dots{ display:flex; gap:7px; }
.mcpv-dots i{ width:11px; height:11px; border-radius:50%; display:block; background:#4A4F59; }
.mcpv-brand{ position:absolute; left:50%; top:0; bottom:0; transform:translateX(-50%);
  display:flex; align-items:center; gap:9px; }
.mcpv-lockup{ height:23px; width:auto; display:block; flex:0 0 auto; }
.mcpv-tag{ color:#cdd3df; font-size:11px; font-weight:600; border:1px solid var(--mcpv-line);
  padding:2px 7px; border-radius:6px; letter-spacing:.04em; flex:0 0 auto; }
.mcpv-powered{ margin-left:auto; display:flex; align-items:center; gap:7px; color:var(--mcpv-muted);
  font-size:12px; font-weight:600; white-space:nowrap; flex:0 0 auto; }
.mcpv-powered img{ width:20px; height:20px; display:block; }

/* Cuerpo con scroll vertical interno */
.mcpv-body-chat{ padding:24px 20px; display:flex; flex-direction:column; gap:16px;
  height:460px; overflow-y:auto; -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent; }
.mcpv-body-chat::-webkit-scrollbar{ width:8px; }
.mcpv-body-chat::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:8px; }
.mcpv-body-chat::-webkit-scrollbar-track{ background:transparent; }

/* Degradé "hay más ↓" + indicador mouse */
.mcpv-scrollcue{ position:absolute; left:0; right:0; bottom:0; height:60px; pointer-events:none;
  background:linear-gradient(to top, var(--mcpv-ink) 12%, rgba(14,17,22,0)); opacity:1; transition:opacity .25s ease; }
.mcpv-win.at-end .mcpv-scrollcue{ opacity:0; }
.mcpv-scrollmouse{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  pointer-events:none; opacity:1; transition:opacity .25s ease; z-index:4;
  display:flex; align-items:center; justify-content:center; padding:9px 11px;
  background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.1); border-radius:18px;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.mcpv-win.at-end .mcpv-scrollmouse{ opacity:0; }
.mcpv-mouse{ display:block; width:20px; height:30px; border:2px solid rgba(255,255,255,.55);
  border-radius:11px; position:relative; animation:mcpvMouseBob 1.9s ease-in-out infinite; }
.mcpv-wheel{ position:absolute; left:50%; top:5px; width:3px; height:6px; border-radius:2px;
  background:rgba(255,255,255,.9); transform:translate(-50%,0); animation:mcpvWheel 1.9s ease-in-out infinite; }
@keyframes mcpvWheel{ 0%{opacity:0; transform:translate(-50%,0);} 15%{opacity:1;}
  55%{opacity:1; transform:translate(-50%,10px);} 100%{opacity:0; transform:translate(-50%,10px);} }
@keyframes mcpvMouseBob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(3px);} }

/* Mecánica de reveal */
.mcpv-playing .mcpv-rev{ opacity:0; transform:translateY(12px); }
.mcpv-rev.show{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease; }
.mcpv-rev.is-thinkdone{ display:none !important; }

/* Mensaje usuario */
.mcpv-msg{ display:flex; max-width:88%; }
.mcpv-user{ align-self:flex-end; }
.mcpv-bubble{ padding:12px 15px; border-radius:14px; font-size:15px; line-height:1.5; }
.mcpv-bubble p{ margin:0; }
.mcpv-user .mcpv-bubble{ background:linear-gradient(135deg,var(--mcpv-primary),var(--mcpv-primary-deep));
  color:#fff; border-bottom-right-radius:5px; }
.mcpv-caret{ display:inline-block; width:2px; height:1em; background:currentColor; margin-left:1px; vertical-align:text-bottom; }

/* Pasos del asistente + latido del spark */
.mcpv-step{ display:flex; align-items:flex-start; gap:10px; align-self:flex-start; max-width:92%; }
.mcpv-av{ flex:0 0 auto; width:28px; height:28px; border-radius:8px; background:#20140F;
  display:flex; align-items:center; justify-content:center; margin-top:1px; }
.mcpv-av img{ width:18px; height:18px; display:block; transform-origin:center; }
.mcpv-win.mcpv-responding .mcpv-av img{ animation:mcpvBeat 1.35s ease-in-out infinite; }
@keyframes mcpvBeat{
  0%   { transform:scale(1);    opacity:.7; }
  16%  { transform:scale(1.3);  opacity:1;  }
  30%  { transform:scale(1.06); opacity:.9; }
  46%  { transform:scale(1.22); opacity:1;  }
  64%,100%{ transform:scale(1); opacity:.7; }
}
.mcpv-steptext{ color:var(--mcpv-muted); font-size:13.5px; line-height:1.5; padding-top:4px; }
.mcpv-steptext .hl{ color:#cfd5e0; font-weight:600; }

/* Respuesta final (rich) */
.mcpv-answer{ display:flex; align-items:flex-start; gap:10px; align-self:flex-start; max-width:100%; width:100%; }
.mcpv-answer .mcpv-card{ flex:1 1 auto; background:#1A2029; border:1px solid var(--mcpv-line);
  border-radius:14px; border-bottom-left-radius:5px; padding:16px 16px 14px; min-width:0; }
.mcpv-h{ color:#fff; font-weight:700; font-size:14.5px; margin:2px 0 8px; }
.mcpv-h:not(:first-child){ margin-top:20px; }
.mcpv-h .dim{ color:var(--mcpv-muted); font-weight:500; }
.mcpv-subh{ color:var(--mcpv-muted); font-size:12.5px; line-height:1.5; margin:-4px 0 6px; }
.mcpv-p{ font-size:14px; line-height:1.55; color:var(--mcpv-body); margin:8px 0 0; }
.mcpv-p strong{ color:#fff; }
.mcpv-note{ font-size:12.5px; line-height:1.5; color:var(--mcpv-muted); background:rgba(255,255,255,.03);
  border:1px solid var(--mcpv-line-soft); border-radius:8px; padding:8px 10px; margin:8px 0 0; }
.mcpv-list{ margin:12px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.mcpv-list li{ position:relative; padding-left:18px; font-size:13.5px; line-height:1.5; color:var(--mcpv-body); }
.mcpv-list li::before{ content:"●"; position:absolute; left:0; color:var(--mcpv-accent); font-size:10px; top:3px; }
.mcpv-list li b{ color:#fff; }

/* Tablas */
.mcpv-tablewrap{ overflow-x:auto; margin:10px 0 2px; -webkit-overflow-scrolling:touch; }
.mcpv-table{ width:100%; border-collapse:collapse; font-size:13px; white-space:nowrap; }
.mcpv-table th{ text-align:left; font-weight:600; color:var(--mcpv-muted); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.04em; padding:6px 10px 6px 0; border-bottom:1px solid var(--mcpv-line); }
.mcpv-table td{ padding:7px 10px 7px 0; border-bottom:1px solid var(--mcpv-line-soft); color:#E7EAF0; vertical-align:top; }
.mcpv-table tr:last-child td{ border-bottom:0; }
.mcpv-table .num{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.mcpv-pos{ color:#fff; font-weight:700; }
.mcpv-up{ color:var(--mcpv-up); font-weight:600; } .mcpv-down{ color:var(--mcpv-down); font-weight:600; }
.mcpv-flat{ color:var(--mcpv-muted); }
.mcpv-lead{ color:#fff; font-weight:700; }
.mcpv-amt{ color:var(--mcpv-muted); font-size:11.5px; }
.mcpv-table--prod td{ white-space:normal; }
.mcpv-table--prod td.prod{ min-width:180px; color:#fff; }
.mcpv-table--prod .rank{ color:var(--mcpv-muted); font-weight:700; }

/* ---- Enterprise: KPI pills ---- */
.mcpv-kpi-row{ display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 14px; }
.mcpv-kpi{ background:rgba(255,255,255,.04); border:1px solid var(--mcpv-line); border-radius:8px; padding:8px 10px; min-width:0; flex:1 1 auto; }
.mcpv-kpi-val{ display:block; font-size:14px; font-weight:700; color:#fff; line-height:1.2; }
.mcpv-kpi-val.up{ color:var(--mcpv-up); }
.mcpv-kpi-val.red{ color:var(--mcpv-down); }
.mcpv-kpi-lbl{ display:block; font-size:10.5px; color:var(--mcpv-muted); line-height:1.4; margin-top:3px; }

/* ---- Enterprise: horizontal bar chart ---- */
.mcpv-hbar{ display:flex; flex-direction:column; gap:6px; margin:10px 0 0; }
.mcpv-hbar-row{ display:flex; align-items:center; gap:8px; font-size:12.5px; }
.mcpv-hbar-rank{ color:var(--mcpv-muted); font-weight:700; width:14px; text-align:right; flex:0 0 auto; font-size:11px; }
.mcpv-hbar-label{ color:#cdd3df; width:88px; flex:0 0 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mcpv-hbar-track{ flex:1; height:10px; background:rgba(255,255,255,.07); border-radius:4px; overflow:hidden; }
.mcpv-hbar-fill{ height:100%; border-radius:4px; }
.mcpv-hbar-pct{ color:#E7EAF0; font-variant-numeric:tabular-nums; width:38px; text-align:right; flex:0 0 auto; font-size:12px; }
.mcpv-hbar-row.hl .mcpv-hbar-label{ color:#fff; font-weight:700; }

/* ---- Enterprise: line chart SVG ---- */
.mcpv-linechart{ width:100%; margin:10px 0 0; }
.mcpv-linechart svg{ width:100%; height:auto; display:block; overflow:visible; }
.mcpv-chart-legend{ display:flex; gap:18px; margin:0 0 6px 36px; }
.mcpv-legend-item{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--mcpv-muted); }
.mcpv-legend-dot{ width:22px; height:2.5px; border-radius:2px; flex:0 0 auto; }

@media (max-width:575px){ .mcpv-lockup{ height:20px; } .mcpv-body-chat{ padding:18px 14px; } }
@media (max-width:480px){ .mcpv-powered .lbl{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .mcpv-playing .mcpv-rev{ opacity:1 !important; transform:none !important; }
  .mcpv-win .mcpv-av img{ animation:none !important; }
  .mcpv-mouse, .mcpv-wheel{ animation:none !important; }
}