/* Acelerador de IA · Coonector. Boceto v2.
   Estructura tomada de las referencias de Álvaro (reels "Greta": ProjectFlow, ClientHub,
   Acme CRM, BizPulse, NeuraFlow). Marca Coonector: negro, lima #C3E500, morado #8349E9, Inter. */

:root{
  --lima:#C3E500; --lima-2:#A3C100; --morado:#8349E9; --morado-2:#9D6CF0;
  --verde:#22C55E; --ambar:#F59E0B; --rojo:#EF4444; --azul:#3B82F6; --cian:#22D3EE;
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --t:150ms cubic-bezier(.215,.61,.355,1);
  --fuente:'Inter', ui-sans-serif, system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
}
html[data-tema="oscuro"]{
  --fondo:#09090B; --lateral:#0C0C0F; --panel:#121216; --panel-2:#17171C; --hundido:#0E0E12;
  --borde:#23232B; --borde-2:#2E2E38;
  --texto:#F4F4F6; --texto-2:#B4B4BF; --suave:#8A8A97;
  --morado-txt:#B794F6; --lima-txt:#D4F542; --sombra:0 1px 0 rgba(255,255,255,.03) inset;
  --velo-lima:rgba(195,229,0,.12); --velo-morado:rgba(131,73,233,.16);
  --velo-verde:rgba(34,197,94,.14); --velo-ambar:rgba(245,158,11,.15); --velo-rojo:rgba(239,68,68,.15); --velo-azul:rgba(59,130,246,.15);
  --verde-txt:#4ADE80; --ambar-txt:#FBBF24; --rojo-txt:#F87171; --azul-txt:#60A5FA;
  --rejilla:rgba(255,255,255,.06);
  color-scheme: dark;
}
html[data-tema="claro"]{
  --fondo:#F5F5F7; --lateral:#0C0C0F; --panel:#FFFFFF; --panel-2:#FAFAFB; --hundido:#F3F3F6;
  --borde:#E6E6EB; --borde-2:#D6D6DE;
  --texto:#111114; --texto-2:#4A4A55; --suave:#6E6E7A;
  --morado-txt:#6A2FD6; --lima-txt:#4F5E00; --sombra:0 1px 2px rgba(16,16,24,.04), 0 4px 16px rgba(16,16,24,.05);
  --velo-lima:#F2F9CF; --velo-morado:#F1EAFE;
  --velo-verde:#E7F7ED; --velo-ambar:#FEF3E2; --velo-rojo:#FDECEC; --velo-azul:#E8F0FE;
  --verde-txt:#15803D; --ambar-txt:#B45309; --rojo-txt:#B91C1C; --azul-txt:#1D4ED8;
  --rejilla:rgba(0,0,0,.06);
  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; background:var(--fondo); color:var(--texto); font-family:var(--fuente); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; font-feature-settings:"cv11","ss01"; }
::selection{ background:var(--morado); color:#fff; }
:focus-visible{ outline:2px solid var(--morado); outline-offset:2px; }
*{ scrollbar-width:thin; scrollbar-color:var(--borde-2) transparent; }
h1,h2,h3,p{ margin:0; }
button{ font:inherit; color:inherit; }
.num{ font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.mono{ font-family:var(--mono); font-size:12px; }
.suave{ color:var(--suave); }
.chico{ font-size:12px; }
[data-lucide]{ width:16px; height:16px; stroke-width:1.75; flex:none; }

/* ---------- Armazón ---------- */
.app{ display:grid; grid-template-columns:248px minmax(0,1fr); min-height:100vh; }
.lateral{ background:var(--lateral); border-right:1px solid #1C1C22; padding:22px 14px 16px; display:flex; flex-direction:column; gap:18px; position:sticky; top:0; height:100vh; overflow:auto; color:#E9E9EE; }
.logo{ padding:2px 10px 6px; }
.logo img{ height:20px; display:block; }
.logo span{ display:block; margin-top:8px; font-size:11px; color:#8A8A97; letter-spacing:.01em; }
.nav-grupo{ font-size:11px; color:#71717E; padding:8px 10px 4px; }
.nav{ display:grid; gap:2px; }
.nav a{ display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; color:#B9B9C4; text-decoration:none; font-size:13px; transition:background var(--t), color var(--t); }
.nav a:hover{ background:#17171C; color:#fff; transition-duration:0ms; }
.nav a .n{ width:20px; height:20px; border-radius:6px; display:grid; place-items:center; font-size:11px; font-weight:600; background:#1A1A21; color:#9A9AA6; }
.nav a.hecha .n{ background:rgba(195,229,0,.14); color:var(--lima); }
.nav a.activa{ background:linear-gradient(90deg, rgba(131,73,233,.28), rgba(131,73,233,.08)); color:#fff; }
.nav a.activa .n{ background:var(--morado); color:#fff; }
.nav a .e{ font-size:11px; color:#71717E; }
.nav a.hecha .e{ color:#9DB800; }
.claude-card{ margin-top:auto; border:1px solid #23232B; border-radius:14px; padding:12px; background:#111115; display:grid; gap:8px; }
.claude-card .fila{ display:flex; align-items:center; gap:10px; }
.claude-card .ico{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:rgba(217,119,87,.16); color:#E8916F; }
.claude-card b{ font-size:13px; display:block; color:#fff; }
.claude-card small{ color:#8A8A97; font-size:11px; }
.punto{ width:7px; height:7px; border-radius:50%; background:var(--lima); box-shadow:0 0 0 3px rgba(195,229,0,.15); }
.usuario{ display:flex; align-items:center; gap:10px; padding:4px 6px; }
.avatar{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:600; background:#2A2340; color:#D9C9FF; flex:none; }
.usuario b{ display:block; font-size:12px; color:#fff; font-weight:600; }
.usuario small{ color:#8A8A97; font-size:11px; }

.principal{ min-width:0; display:flex; flex-direction:column; }
.barra{ display:flex; align-items:center; gap:14px; padding:14px 28px; border-bottom:1px solid var(--borde); background:color-mix(in srgb, var(--fondo) 88%, transparent); backdrop-filter:blur(8px); position:sticky; top:0; z-index:5; }
.buscar{ flex:1; max-width:420px; display:flex; align-items:center; gap:8px; height:36px; padding:0 12px; border:1px solid var(--borde); border-radius:10px; background:var(--panel); color:var(--suave); font-size:13px; }
.buscar kbd{ margin-left:auto; font-family:var(--mono); font-size:11px; border:1px solid var(--borde-2); border-radius:6px; padding:1px 6px; color:var(--suave); }
.barra .der{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.icono-btn{ width:36px; height:36px; border-radius:10px; border:1px solid var(--borde); background:var(--panel); display:grid; place-items:center; cursor:pointer; color:var(--texto-2); position:relative; transition:border-color var(--t); }
.icono-btn:hover{ border-color:var(--borde-2); transition-duration:0ms; }
.icono-btn .badge{ position:absolute; top:6px; right:7px; width:7px; height:7px; border-radius:50%; background:var(--lima); }

.lienzo{ padding:24px 28px 56px; max-width:1480px; width:100%; }

/* Encabezado de fase + avance */
.saludo{ font-size:13px; color:var(--suave); }
.cabeza{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:4px 0 18px; }
.cabeza h1{ font-size:28px; font-weight:700; letter-spacing:-.025em; line-height:1.15; }
.cabeza .bajada{ color:var(--morado-txt); font-size:13px; font-weight:500; margin-top:4px; }
.cabeza .acciones{ display:flex; gap:8px; flex:none; }
.avance{ display:grid; grid-template-columns:repeat(8,1fr); gap:6px; margin-bottom:22px; }
.avance a{ text-decoration:none; color:var(--suave); font-size:11px; display:grid; gap:7px; }
.avance i{ display:block; height:4px; border-radius:4px; background:var(--borde-2); }
.avance a.hecha i{ background:var(--lima); }
.avance a.activa i{ background:linear-gradient(90deg,var(--morado),var(--lima)); }
.avance a.activa{ color:var(--texto); font-weight:600; }
.avance a.hecha{ color:var(--texto-2); }

/* Botones */
.btn{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; border-radius:10px; border:1px solid var(--borde); background:var(--panel); color:var(--texto); font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; transition:background var(--t), border-color var(--t); white-space:nowrap; }
.btn:hover{ border-color:var(--borde-2); background:var(--panel-2); transition-duration:0ms; }
.btn.lima{ background:var(--lima); border-color:var(--lima); color:#0B0B0C; }
.btn.lima:hover{ background:var(--lima-2); }
.btn.morado{ background:var(--morado); border-color:var(--morado); color:#fff; }
.btn[aria-disabled="true"]{ opacity:.45; pointer-events:none; }

/* Rejillas */
.g{ display:grid; gap:16px; }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-21{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
.g-12{ grid-template-columns:minmax(0,1fr) minmax(0,2fr); }
.g-11{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-lienzo{ grid-template-columns:200px minmax(0,1fr) 300px; }
.mt{ margin-top:16px; }

/* Paneles */
.panel{ background:var(--panel); border:1px solid var(--borde); border-radius:var(--r-lg); padding:18px 20px; box-shadow:var(--sombra); min-width:0; }
.panel-cab{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.panel-cab h2{ font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; }
.panel-cab h2 [data-lucide]{ color:var(--suave); }
.ver{ font-size:12px; color:var(--morado-txt); text-decoration:none; font-weight:500; display:inline-flex; align-items:center; gap:4px; }
.pie{ font-size:11px; color:var(--suave); margin-top:12px; }

/* KPI */
.kpi{ display:grid; grid-template-columns:auto 1fr auto; gap:4px 14px; align-items:center; padding:16px 18px; }
.kpi .ic{ grid-row:span 3; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; align-self:start; }
.kpi .ic [data-lucide]{ width:18px; height:18px; }
.kpi .et{ font-size:12px; color:var(--suave); }
.kpi .v{ font-size:26px; font-weight:700; line-height:1.1; }
.kpi .t{ font-size:11px; color:var(--suave); display:flex; align-items:center; gap:4px; }
.kpi .t b{ font-weight:600; }
.kpi svg.spark{ grid-row:1 / span 3; grid-column:3; width:84px; height:38px; align-self:center; }
.c-morado{ background:var(--velo-morado); color:var(--morado-txt); }
.c-lima{ background:var(--velo-lima); color:var(--lima-txt); }
.c-verde{ background:var(--velo-verde); color:var(--verde-txt); }
.c-ambar{ background:var(--velo-ambar); color:var(--ambar-txt); }
.c-rojo{ background:var(--velo-rojo); color:var(--rojo-txt); }
.c-azul{ background:var(--velo-azul); color:var(--azul-txt); }

/* Píldoras de estado */
.pil{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:3px 8px; border-radius:999px; white-space:nowrap; }
.pil [data-lucide]{ width:12px; height:12px; }

/* Tablas */
.tabla{ width:100%; border-collapse:collapse; font-size:13px; }
.tabla th{ text-align:left; font-size:11px; font-weight:500; color:var(--suave); padding:0 10px 10px; border-bottom:1px solid var(--borde); }
.tabla td{ padding:12px 10px; border-bottom:1px solid var(--borde); vertical-align:middle; }
.tabla tr:last-child td{ border-bottom:0; }
.tabla tr.sel td{ background:var(--velo-morado); }
.tabla tr.sel td:first-child{ border-radius:10px 0 0 10px; } .tabla tr.sel td:last-child{ border-radius:0 10px 10px 0; }
.tabla .nom{ display:flex; align-items:center; gap:10px; font-weight:600; }
.tabla .nom small{ display:block; font-weight:400; color:var(--suave); font-size:12px; }
.cuadro{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; flex:none; font-size:11px; font-weight:700; }
.barrita{ width:90px; height:6px; border-radius:6px; background:var(--hundido); overflow:hidden; display:inline-block; vertical-align:middle; margin-right:8px; }
.barrita span{ display:block; height:100%; border-radius:6px; background:var(--morado); }

/* Guía de la fase + prompt para Claude */
.guia{ position:relative; overflow:hidden; }
.guia::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--morado),var(--lima)); }
.pasos{ list-style:none; margin:0; padding:0; display:grid; gap:12px; counter-reset:p; }
.pasos li{ display:grid; grid-template-columns:24px 1fr; gap:10px; font-size:13px; color:var(--texto-2); }
.pasos li::before{ counter-increment:p; content:counter(p); width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; background:var(--hundido); color:var(--texto-2); border:1px solid var(--borde); }
.pasos li.ok::before{ content:"✓"; background:var(--velo-lima); color:var(--lima-txt); border-color:transparent; }
.pasos li.ahora::before{ background:var(--morado); color:#fff; border-color:var(--morado); }
.pasos li b{ color:var(--texto); font-weight:600; display:block; }
.prompt{ margin-top:14px; border:1px solid var(--borde-2); border-radius:12px; background:var(--hundido); overflow:hidden; }
.prompt-cab{ display:flex; align-items:center; gap:8px; padding:8px 10px 8px 12px; border-bottom:1px solid var(--borde); font-size:11px; color:var(--suave); }
.prompt-cab .cl{ width:18px; height:18px; border-radius:5px; display:grid; place-items:center; background:rgba(217,119,87,.18); color:#E8916F; }
.prompt-cab .cl [data-lucide]{ width:12px; height:12px; }
.copiar{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; border:0; background:var(--panel); border:1px solid var(--borde); border-radius:7px; padding:3px 8px; font-size:11px; font-weight:600; cursor:pointer; color:var(--texto-2); }
.copiar [data-lucide]{ width:12px; height:12px; }
.prompt p{ padding:12px; font-size:13px; line-height:1.55; color:var(--texto); }
.vivo{ display:grid; gap:0; margin-top:14px; }
.vivo-cab{ font-size:11px; color:var(--suave); display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.vivo-cab .punto{ width:6px; height:6px; box-shadow:none; animation:latido 1.6s ease-in-out infinite; }
@keyframes latido{ 50%{ opacity:.35; } }
.vivo div{ display:grid; grid-template-columns:16px 1fr auto; gap:8px; padding:7px 0; font-size:12px; color:var(--texto-2); border-top:1px dashed var(--borde); }
.vivo div [data-lucide]{ width:14px; height:14px; margin-top:2px; color:var(--morado-txt); }
.vivo div.bloq [data-lucide]{ color:var(--ambar-txt); }
.vivo time{ font-family:var(--mono); font-size:11px; color:var(--suave); }

/* Campos */
.campo{ display:grid; gap:6px; }
.campo + .campo{ margin-top:14px; }
.campo-cab{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.campo label, .etq{ font-size:12px; font-weight:600; color:var(--texto-2); }
.quien{ display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--suave); }
.quien [data-lucide]{ width:12px; height:12px; }
.quien.cl{ color:var(--morado-txt); }
.valor{ border:1px solid var(--borde); border-radius:10px; padding:10px 12px; background:var(--hundido); font-size:13px; color:var(--texto); }
.valor.de-claude{ border-color:color-mix(in srgb, var(--morado) 35%, var(--borde)); background:color-mix(in srgb, var(--velo-morado) 55%, var(--hundido)); }
textarea.valor{ width:100%; resize:vertical; min-height:76px; font:inherit; font-size:13px; }
textarea.valor:focus{ outline:2px solid var(--morado); outline-offset:-1px; }
.contador{ font-family:var(--mono); font-size:11px; color:var(--suave); text-align:right; }
.contador.falta{ color:var(--ambar-txt); }

/* Puerta de avance */
.puerta{ margin-top:16px; display:flex; align-items:center; gap:14px 22px; flex-wrap:wrap; padding:14px 18px; border:1px solid var(--borde); border-radius:var(--r-lg); background:var(--panel); }
.puerta .req{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--texto-2); }
.puerta .req [data-lucide]{ width:15px; height:15px; }
.puerta .req.ok [data-lucide]{ color:var(--lima-txt); }
.puerta .req.no [data-lucide]{ color:var(--ambar-txt); }
.puerta .btn{ margin-left:auto; }

/* Lista de pendientes / actividad */
.lista{ list-style:none; margin:0; padding:0; }
.lista li{ display:grid; grid-template-columns:32px 1fr auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--borde); }
.lista li:last-child{ border-bottom:0; }
.lista .ic{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; }
.lista b{ font-size:13px; font-weight:600; display:block; }
.lista small{ font-size:12px; color:var(--suave); }

/* Preguntas */
.hilo{ display:grid; gap:14px; }
.q{ display:grid; grid-template-columns:32px 1fr; gap:12px; }
.q .av{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; }
.q .burbuja{ border:1px solid var(--borde); border-radius:4px 14px 14px 14px; padding:10px 14px; background:var(--hundido); }
.q.claude .burbuja{ border-color:color-mix(in srgb, var(--morado) 35%, var(--borde)); background:color-mix(in srgb, var(--velo-morado) 50%, var(--hundido)); }
.q .meta{ font-size:11px; color:var(--suave); margin-bottom:3px; display:flex; gap:8px; }
.q .meta b{ color:var(--texto-2); font-weight:600; }
.q p{ font-size:13px; }
.reto-final{ font-size:18px; font-weight:700; letter-spacing:-.015em; line-height:1.35; }
.tachado{ text-decoration:line-through; text-decoration-color:var(--borde-2); color:var(--suave); font-size:13px; }

/* Editor de flujo (AS-IS / TO-BE) */
.paleta{ display:grid; gap:4px; align-content:start; }
.paleta .t{ font-size:11px; color:var(--suave); padding:8px 4px 4px; }
.paleta div.it{ display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--borde); border-radius:10px; font-size:12px; background:var(--panel-2); cursor:grab; }
.paleta div.it [data-lucide]{ width:14px; height:14px; }
.canvas{ position:relative; border:1px solid var(--borde); border-radius:var(--r-lg); background-color:var(--hundido); background-image:radial-gradient(var(--rejilla) 1px, transparent 1px); background-size:18px 18px; min-height:560px; overflow:hidden; }
.canvas-barra{ position:absolute; top:12px; left:12px; right:12px; display:flex; justify-content:space-between; z-index:2; }
.canvas-barra .grupo{ display:flex; gap:6px; }
.canvas-barra .pz{ height:30px; padding:0 10px; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--borde); border-radius:8px; background:var(--panel); font-size:12px; color:var(--texto-2); }
.nodos{ position:absolute; inset:0; }
.nodo{ position:absolute; width:200px; border:1px solid var(--borde-2); border-radius:12px; background:var(--panel); padding:10px 12px; box-shadow:0 4px 18px rgba(0,0,0,.18); }
.nodo .top{ display:flex; align-items:center; gap:8px; }
.nodo .ic{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; flex:none; }
.nodo .ic [data-lucide]{ width:14px; height:14px; }
.nodo b{ font-size:12px; font-weight:600; line-height:1.3; }
.nodo small{ display:block; font-size:11px; color:var(--suave); margin-top:6px; }
.nodo .tiempo{ position:absolute; top:-9px; right:10px; font-family:var(--mono); font-size:10px; padding:1px 6px; border-radius:6px; background:var(--panel-2); border:1px solid var(--borde-2); color:var(--texto-2); }
.nodo.cuello{ border-color:color-mix(in srgb, var(--ambar) 70%, transparent); box-shadow:0 0 0 3px var(--velo-ambar), 0 4px 18px rgba(0,0,0,.18); }
.nodo.cuello .tiempo{ color:var(--ambar-txt); border-color:color-mix(in srgb, var(--ambar) 60%, transparent); }
.nodo.sel{ border-color:var(--morado); box-shadow:0 0 0 3px var(--velo-morado), 0 4px 18px rgba(0,0,0,.18); }
.nodo.ia{ border-color:color-mix(in srgb, var(--morado) 60%, transparent); }
svg.lineas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
svg.lineas path{ fill:none; stroke:var(--borde-2); stroke-width:1.5; stroke-dasharray:4 4; }
svg.lineas circle{ fill:var(--morado); }
.etq-rama{ position:absolute; font-size:10px; font-weight:600; padding:2px 7px; border-radius:6px; }
.mini{ position:absolute; right:12px; bottom:12px; width:120px; height:78px; border:1px solid var(--borde); border-radius:10px; background:var(--panel); padding:8px; }
.mini i{ position:absolute; height:6px; border-radius:2px; background:var(--borde-2); }
.inspector .tabs{ display:flex; gap:16px; border-bottom:1px solid var(--borde); margin:-4px 0 14px; font-size:12px; }
.inspector .tabs span{ padding:8px 0; color:var(--suave); }
.inspector .tabs span.on{ color:var(--texto); border-bottom:2px solid var(--morado); font-weight:600; }
.switch{ display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--texto-2); padding:6px 0; }
.switch i{ width:30px; height:18px; border-radius:999px; background:var(--lima); position:relative; display:block; }
.switch i::after{ content:""; position:absolute; top:2px; right:2px; width:14px; height:14px; border-radius:50%; background:#0B0B0C; }
.switch i.off{ background:var(--borde-2); }
.switch i.off::after{ left:2px; right:auto; background:var(--panel); }
.tip{ margin-top:14px; border-radius:10px; padding:10px 12px; background:var(--velo-lima); color:var(--lima-txt); font-size:12px; display:flex; gap:8px; }
.tip [data-lucide]{ width:14px; height:14px; margin-top:2px; }

/* Gráficas */
.dona-fila{ display:grid; grid-template-columns:150px 1fr; gap:18px; align-items:center; }
.leyenda{ list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:12px; }
.leyenda li{ display:grid; grid-template-columns:10px 1fr auto; gap:8px; align-items:center; color:var(--texto-2); }
.leyenda i{ width:8px; height:8px; border-radius:50%; display:block; }
.leyenda b{ font-weight:600; color:var(--texto); }
.barras-h{ display:grid; gap:10px; }
.barras-h div{ display:grid; grid-template-columns:150px 1fr 54px; gap:12px; align-items:center; font-size:12px; color:var(--texto-2); }
.barras-h .pista{ height:10px; border-radius:6px; background:var(--hundido); overflow:hidden; }
.barras-h .pista span{ display:block; height:100%; border-radius:6px; background:var(--morado); }
.barras-h .pista span.alerta{ background:var(--ambar); }
.barras-h em{ font-style:normal; text-align:right; font-variant-numeric:tabular-nums; color:var(--texto); font-weight:600; }

/* Matriz */
.matriz{ position:relative; height:330px; margin:4px 0 22px 22px; border-left:1px solid var(--borde-2); border-bottom:1px solid var(--borde-2); }
.matriz .q{ position:absolute; width:50%; height:50%; padding:10px 12px; font-size:11px; color:var(--suave); display:block; }
.matriz .q1{ left:0; top:0; background:linear-gradient(135deg, var(--velo-lima), transparent 80%); color:var(--lima-txt); font-weight:600; border-radius:0 0 12px 0; }
.matriz .q2{ right:0; top:0; } .matriz .q3{ left:0; bottom:0; } .matriz .q4{ right:0; bottom:0; }
.matriz .pt{ position:absolute; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; background:var(--panel); border:1.5px solid var(--morado); color:var(--morado-txt); }
.matriz .pt.el{ background:var(--lima); border-color:var(--lima); color:#0B0B0C; box-shadow:0 0 0 6px var(--velo-lima); }
.matriz .pt.mal{ border-color:var(--rojo); color:var(--rojo-txt); }
.matriz .ey{ position:absolute; left:-22px; top:50%; transform:rotate(-90deg) translateX(-50%); transform-origin:left top; font-size:11px; color:var(--suave); }
.matriz .ex{ position:absolute; bottom:-22px; left:50%; transform:translateX(-50%); font-size:11px; color:var(--suave); }
.idea{ display:grid; grid-template-columns:28px 1fr auto; gap:10px; align-items:start; padding:11px 0; border-bottom:1px solid var(--borde); }
.idea:last-child{ border-bottom:0; }
.idea .k{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; background:var(--hundido); border:1px solid var(--borde-2); }
.idea.el .k{ background:var(--lima); color:#0B0B0C; border-color:var(--lima); }
.idea b{ font-size:13px; font-weight:600; display:block; line-height:1.35; }
.idea small{ font-size:12px; color:var(--suave); }
.ambicion{ display:flex; gap:6px; }
.ambicion span{ flex:1; text-align:center; padding:8px; border-radius:10px; border:1px solid var(--borde); font-size:12px; color:var(--suave); }
.ambicion span.on{ border-color:var(--morado); background:var(--velo-morado); color:var(--texto); font-weight:600; }
.carril{ display:grid; grid-template-columns:110px 1fr; gap:12px; align-items:stretch; }
.carril + .carril{ margin-top:10px; }
.carril .nom{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--texto-2); }
.carril .pasos-h{ display:flex; gap:22px; }
.carril .ph{ position:relative; flex:1; border:1px solid var(--borde); border-radius:12px; padding:10px 12px; background:var(--hundido); font-size:12px; }
.carril .ph:not(:last-child)::after{ content:""; position:absolute; right:-23px; top:50%; width:22px; border-top:1.5px dashed var(--borde-2); }
.carril .ph b{ display:block; font-weight:600; font-size:12px; line-height:1.35; }
.carril .ph small{ color:var(--suave); font-size:11px; }
.carril .ph.ia{ border-color:color-mix(in srgb, var(--morado) 50%, var(--borde)); background:color-mix(in srgb, var(--velo-morado) 60%, var(--hundido)); }
.carril .ph.vacio{ border-style:dashed; background:transparent; color:var(--suave); display:grid; place-items:center; }

/* Maqueta */
.dispositivo{ border:1px solid var(--borde-2); border-radius:16px; overflow:hidden; background:#FFFFFF; color:#111114; box-shadow:0 20px 50px rgba(0,0,0,.25); }
.dispositivo .bar{ display:flex; align-items:center; gap:6px; padding:9px 12px; background:#F3F3F6; border-bottom:1px solid #E6E6EB; font-size:11px; color:#6E6E7A; }
.dispositivo .bar i{ width:9px; height:9px; border-radius:50%; background:#DADAE0; display:block; }
.dispositivo .url{ margin-left:10px; flex:1; background:#fff; border:1px solid #E6E6EB; border-radius:6px; padding:2px 8px; }
.app-mq{ display:grid; grid-template-columns:220px 1fr; min-height:330px; }
.app-mq .lst{ border-right:1px solid #ECECF0; padding:12px; display:grid; gap:8px; align-content:start; background:#FAFAFB; }
.app-mq .lst div{ border:1px solid #ECECF0; background:#fff; border-radius:10px; padding:8px 10px; font-size:12px; }
.app-mq .lst div.on{ border-color:#8349E9; box-shadow:0 0 0 3px #F1EAFE; }
.app-mq .lst small{ color:#6E6E7A; display:block; font-size:11px; }
.app-mq .det{ padding:16px; display:grid; gap:12px; align-content:start; font-size:13px; }
.app-mq .borr{ border:1px solid #E6E6EB; border-radius:12px; padding:12px; background:#FCFCFD; }
.app-mq .cita{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.app-mq .cita span{ font-size:11px; background:#F1EAFE; color:#6A2FD6; padding:2px 8px; border-radius:999px; }
.app-mq .b{ display:inline-flex; height:32px; align-items:center; padding:0 12px; border-radius:8px; font-size:12px; font-weight:600; border:1px solid #E6E6EB; background:#fff; }
.app-mq .b.p{ background:#111114; color:#fff; border-color:#111114; }

/* Documento y pitch */
.doc-sec{ display:grid; grid-template-columns:28px 1fr auto; gap:12px; align-items:center; padding:11px 0; border-bottom:1px solid var(--borde); font-size:13px; }
.doc-sec:last-child{ border-bottom:0; }
.doc-sec .ic{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; }
.linea-pitch{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.linea-pitch div{ border:1px solid var(--borde); border-radius:12px; padding:10px; font-size:12px; background:var(--hundido); }
.linea-pitch div b{ display:block; font-size:12px; margin:6px 0 2px; }
.linea-pitch div small{ color:var(--suave); font-size:11px; }
.linea-pitch .seg{ font-family:var(--mono); font-size:10px; color:var(--suave); }

.vista{ display:none; }
.vista.on{ display:block; animation:entra .32s cubic-bezier(.22,1,.36,1) both; }
@keyframes entra{ from{ transform:translateY(6px); } to{ transform:none; } }
.aviso{ margin-top:26px; font-size:11px; color:var(--suave); display:flex; align-items:center; gap:6px; }

/* Responsivo */
@media (max-width:1200px){ .g-lienzo{ grid-template-columns:minmax(0,1fr) 280px; } .paleta{ display:none; } .g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px){
  .app{ grid-template-columns:1fr; }
  .lateral{ position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; padding:12px 14px; gap:10px; }
  .lateral .nav-grupo, .lateral .claude-card, .lateral .usuario, .logo span{ display:none; }
  .nav{ display:flex; overflow-x:auto; width:100%; }
  .nav a{ grid-template-columns:22px auto; flex:none; }
  .nav a .e{ display:none; }
  .barra{ padding:10px 14px; } .buscar{ display:none; }
  .lienzo{ padding:18px 14px 40px; }
  .cabeza{ flex-direction:column; align-items:flex-start; }
  .avance{ grid-template-columns:repeat(8,1fr); } .avance a span{ display:none; }
  .g-4,.g-3,.g-21,.g-12,.g-11,.g-lienzo{ grid-template-columns:1fr; }
  .dona-fila{ grid-template-columns:1fr; }
  .canvas{ min-height:auto; } .nodos{ position:static; padding:56px 12px 12px; display:grid; gap:10px; } .nodo{ position:static; width:auto; } svg.lineas,.etq-rama,.mini{ display:none; }
  .carril{ grid-template-columns:1fr; } .carril .pasos-h{ flex-direction:column; gap:8px; } .carril .ph::after{ display:none; }
  .app-mq{ grid-template-columns:1fr; } .linea-pitch{ grid-template-columns:1fr 1fr; }
  .barras-h div{ grid-template-columns:110px 1fr 44px; }
  .btn{ height:44px; }
}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }

/* ---------- Ajustes tras la primera pasada visual ---------- */
.app{ background:linear-gradient(90deg, var(--lateral) 248px, transparent 248px); }
.kpi{ grid-template-columns:auto 1fr; grid-template-rows:auto auto auto; position:relative; gap:2px 14px; }
.kpi .ic{ grid-column:1; grid-row:1 / span 3; }
.kpi .et, .kpi .v, .kpi .t{ grid-column:2; }
.kpi .v{ margin:2px 0; }
.kpi svg.spark{ position:absolute; right:16px; top:50%; transform:translateY(-50%); }
.campo{ align-content:start; }
.ambicion{ align-items:flex-start; }
.tabla-env{ overflow-x:auto; margin:0 -4px; padding:0 4px; }
.tabla-env .tabla{ min-width:560px; }
.canvas{ min-height:640px; }
.nodos{ left:50%; top:44px; width:640px; height:580px; transform:translateX(-50%); }
svg.lineas{ inset:auto; left:50%; top:44px; width:640px; height:580px; transform:translateX(-50%); }
svg.lineas path{ stroke:var(--suave); stroke-opacity:.6; }
.nodo{ width:190px; }
@media (max-width:900px){
  .app{ background:none; }
  .nodos{ transform:none; width:auto; height:auto; left:auto; top:auto; }
}

/* ---------- Prototipo funcional ---------- */
.nav a.cerrada{ opacity:.5; }
.nav a.cerrada .n{ background:#15151A; }
input.valor{ width:100%; font:inherit; font-size:13px; }
input.valor:focus, select.valor:focus{ outline:2px solid var(--morado); outline-offset:-1px; }
select.valor{ font:inherit; font-size:13px; width:100%; }
.valor.vacio{ color:var(--suave); font-style:italic; border-style:dashed; }
.vacio-estado{ border:1px dashed var(--borde-2); border-radius:14px; padding:28px 20px; text-align:center; color:var(--suave); font-size:13px; display:grid; gap:8px; justify-items:center; }
.vacio-estado [data-lucide]{ width:22px; height:22px; color:var(--morado-txt); }
.vacio-estado b{ color:var(--texto); font-size:14px; }
.btn.chico{ height:30px; padding:0 10px; font-size:12px; border-radius:8px; }
.fila-acciones{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.guardado{ font-size:11px; color:var(--suave); }
.toast{ position:fixed; right:22px; bottom:22px; z-index:40; max-width:380px; background:var(--panel); border:1px solid var(--borde-2); border-radius:14px; padding:14px 16px; box-shadow:0 20px 50px rgba(0,0,0,.18); display:grid; gap:10px; font-size:13px; animation:entra .3s cubic-bezier(.22,1,.36,1); }
.toast.error{ border-color:color-mix(in srgb, var(--rojo) 50%, var(--borde)); }
.toast .fila-acciones{ margin:0; }
.velo{ position:fixed; inset:0; background:rgba(9,9,11,.45); z-index:50; display:grid; place-items:center; padding:20px; }
.dialogo{ width:min(620px,100%); max-height:90vh; overflow:auto; background:var(--panel); border:1px solid var(--borde); border-radius:18px; padding:22px 24px; box-shadow:0 30px 80px rgba(0,0,0,.3); }
.dialogo h2{ font-size:18px; font-weight:700; letter-spacing:-.015em; margin-bottom:6px; }
.dialogo h3{ font-size:13px; font-weight:600; margin:18px 0 6px; }
.dialogo ol{ margin:6px 0 0; padding-left:18px; color:var(--texto-2); font-size:13px; display:grid; gap:4px; }
.copia{ display:flex; gap:8px; align-items:center; border:1px solid var(--borde); background:var(--hundido); border-radius:10px; padding:8px 8px 8px 12px; font-family:var(--mono); font-size:12px; word-break:break-all; }
.copia span{ flex:1; }
.menu-pruebas{ position:absolute; right:0; top:44px; width:260px; background:var(--panel); border:1px solid var(--borde); border-radius:14px; padding:8px; box-shadow:0 20px 50px rgba(0,0,0,.18); z-index:30; display:grid; gap:2px; }
.menu-pruebas button{ text-align:left; border:0; background:none; padding:9px 10px; border-radius:8px; font-size:13px; cursor:pointer; display:flex; gap:8px; align-items:center; }
.menu-pruebas button:hover{ background:var(--hundido); }
.menu-pruebas hr{ border:0; border-top:1px solid var(--borde); margin:4px 0; }
.rel{ position:relative; }
.rol-chip{ font-size:11px; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--velo-morado); color:var(--morado-txt); }
.idea .acc{ display:flex; gap:6px; align-items:center; }
.radio{ width:18px; height:18px; border-radius:50%; border:2px solid var(--borde-2); display:inline-grid; place-items:center; cursor:pointer; background:none; padding:0; }
.radio.on{ border-color:var(--lima-2); background:var(--lima); }
.idea.desc b{ text-decoration:line-through; color:var(--suave); }
.iframe-maqueta{ width:100%; height:520px; border:0; background:#fff; display:block; }
.seccion-doc{ border-bottom:1px solid var(--borde); padding:12px 0; }
.seccion-doc:last-child{ border-bottom:0; }
.seccion-doc summary{ display:grid; grid-template-columns:28px 1fr auto; gap:12px; align-items:center; cursor:pointer; list-style:none; font-size:13px; }
.seccion-doc summary::-webkit-details-marker{ display:none; }
.seccion-doc p{ margin:10px 0 0 40px; font-size:13px; color:var(--texto-2); white-space:pre-wrap; }
.entregado{ border:1px solid var(--lima-2); background:var(--velo-lima); color:var(--lima-txt); border-radius:14px; padding:14px 16px; font-weight:600; display:flex; gap:10px; align-items:center; }
.cerrada-aviso{ display:grid; place-items:center; gap:10px; text-align:center; padding:60px 20px; color:var(--suave); }
.cerrada-aviso [data-lucide]{ width:28px; height:28px; }
.cerrada-aviso b{ color:var(--texto); font-size:16px; }
.menu-pruebas[hidden]{ display:none; }
.g > .campo + .campo{ margin-top:0; }