*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#ffffff;--surface:#f8f8f8;--surface2:#f0f0f0;--surface3:#e8e8e8;
  --border:#e0e0e0;--border2:#d0d0d0;--text:#1a1a1a;--text-muted:#888;--text-dim:#ccc;
  --accent:#ff5a36;--accent-dim:rgba(255,90,54,.08);--accent-glow:rgba(255,90,54,.12);
  --green:#16a34a;--green-dim:rgba(22,163,74,.08);
  --warning:#e08e00;--warning-dim:rgba(224,142,0,.1);
  --danger:#e5484d;--danger-dim:rgba(229,72,77,.1);
  --info:#3b82f6;--info-dim:rgba(59,130,246,.1);
  --pink:#db2777;--pink-dim:rgba(219,39,119,.08);
  --chart-1:#ff5a36;--chart-2:#ffb28f;--chart-3:#a78bfa;
  --sw:220px;--sc:52px;
  --font:'DM Sans',sans-serif;--mono:'DM Mono',monospace;
  --r:12px;--rs:6px;
  /* Escala de radio (base --radius-md = --r, se mantiene por compatibilidad) */
  --radius-xs:4px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:18px;--radius-2xl:20px;--radius-full:999px;
  --shadow-xs:0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:0 4px 12px rgba(0,0,0,.10);
  --shadow-md:0 16px 40px rgba(0,0,0,.16);
  --shadow-lg:0 24px 64px rgba(0,0,0,.14);
}
.dark{
  --bg:#0a0a0a;--surface:#111;--surface2:#181818;--surface3:#1f1f1f;
  --border:#252525;--border2:#2e2e2e;--text:#e8e8e8;--text-muted:#666;--text-dim:#3a3a3a;
  --green:#3ddc84;--green-dim:rgba(61,220,132,.1);
  --warning:#f0a828;--warning-dim:rgba(240,168,40,.14);
  --danger:#ff6b6f;--danger-dim:rgba(255,107,111,.14);
  --info:#6ba8fb;--info-dim:rgba(107,168,251,.14);
  --pink:#f472b6;--pink-dim:rgba(244,114,182,.14);
  --chart-1:#ff7a52;--chart-2:#ffc4a8;--chart-3:#b8a4f9;
  --shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:0 4px 12px rgba(0,0,0,.45);
  --shadow-md:0 16px 40px rgba(0,0,0,.5);
  --shadow-lg:0 24px 64px rgba(0,0,0,.55);
}
body{background:var(--bg);color:var(--text);font-family:var(--font);height:100dvh;display:flex;overflow:hidden;font-size:14px}

/* SIDEBAR */
.sidebar{width:var(--sc);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;transition:width .25s cubic-bezier(.4,0,.2,1);overflow:hidden;flex-shrink:0;z-index:10}
.sidebar:hover,.sidebar.open{width:var(--sw)}
.sidebar:hover .ni-label,.sidebar.open .ni-label{opacity:1;pointer-events:auto}
.sidebar-header{height:56px;padding:0 14px;display:flex;align-items:center;justify-content:center;gap:10px;border-bottom:1px solid var(--border);flex-shrink:0}
.logo-mark{width:30px;height:30px;border-radius:var(--radius-md);background:linear-gradient(135deg,#ff8a5c,var(--accent));color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;flex-shrink:0;box-shadow:var(--shadow-xs)}
/* Logo de marca del cliente (si lo tiene configurado). El logo es blanco (pensado para
   fondo oscuro) — en tema claro se invierte a negro con filter, en tema oscuro se deja
   como viene. Así no hace falta una placa de fondo fija para que se vea bien en ambos.
   Colapsado (sidebar angosto) se ve solo el icono (la "O"), grande y legible; al expandir
   se ve el logo completo — con el wordmark entero comprimido en 52px se veía "una mancha",
   no un logo reconocible. */
.logo-mark.has-logo{width:100%;height:56px;background:transparent;box-shadow:none;position:relative}
.logo-mark.has-logo img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);object-fit:contain;filter:invert(1);transition:opacity .15s}
.logo-mark.has-logo .logo-icon{height:22px;width:22px}
.logo-mark.has-logo .logo-full{height:26px;width:180px;opacity:0;pointer-events:none}
.sidebar:hover .logo-mark.has-logo .logo-icon,.sidebar.open .logo-mark.has-logo .logo-icon{opacity:0}
.sidebar:hover .logo-mark.has-logo .logo-full,.sidebar.open .logo-mark.has-logo .logo-full{opacity:1}
body.dark .logo-mark.has-logo img{filter:none}
body.dark .logo-mark.has-logo img{filter:none}
.sess-wrap{position:relative;margin-left:2px}
.sess-btn{display:flex;align-items:center;gap:8px;padding:9px 15px;border-radius:var(--radius-full);border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;font-family:var(--font);font-size:13px;font-weight:500;transition:all .15s}
.sess-btn:hover{border-color:var(--border2);color:var(--text)}
.sess-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.sess-btn i.fa-clock{font-size:13px}
.sess-chev{font-size:10px;transition:transform .2s}
.sess-btn.active .sess-chev{transform:rotate(180deg)}
.sess-dd{position:absolute;top:calc(100% + 10px);left:0;width:340px;max-height:400px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);z-index:60;display:none;padding:8px}
.sess-dd.open{display:block}
.sess-empty{padding:20px 12px;font-size:12px;color:var(--text-muted);text-align:center}
.sess-item{padding:11px 12px;border-radius:var(--radius-md);cursor:pointer;display:flex;flex-direction:column;gap:3px;transition:background .12s}
.sess-item:hover{background:var(--surface2)}
.sess-item.active{background:var(--accent-dim)}
.sess-item-t{font-size:14px;color:var(--text);display:flex;align-items:center;gap:6px}
.sess-item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.sess-item-d{font-size:12px;color:var(--text-dim)}
.sess-pin-btn{flex-shrink:0;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:6px;border:none;background:transparent;color:var(--text-dim);opacity:.45;cursor:pointer;font-size:11px;transition:opacity .12s,color .12s,background .12s}
.sess-item:hover .sess-pin-btn{opacity:.8}
.sess-pin-btn:hover{background:var(--surface3);color:var(--text);opacity:1}
.sess-pin-btn.pinned{opacity:1;color:var(--accent)}
.nav{flex:1;padding:6px 8px;display:flex;flex-direction:column;gap:1px;overflow:hidden}
.ni{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-md);cursor:pointer;color:var(--text-muted);border:none;background:transparent;font-family:var(--font);font-size:13px;width:100%;text-align:left;position:relative;transition:background .15s,color .15s;white-space:nowrap;overflow:hidden}
.ni:hover{background:var(--surface2);color:var(--text)}
.ni.active{background:var(--accent-dim);color:var(--accent);font-weight:600}
.ni-icon{width:18px;height:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.ni-label{opacity:0;transition:opacity .2s;font-weight:500;pointer-events:none}
.sidebar.open .ni-label{opacity:1;pointer-events:auto}
.sb-footer{padding:10px 8px;border-top:1px solid var(--border);flex-shrink:0}
.logout-btn{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--rs);cursor:pointer;color:var(--text-muted);border:none;background:transparent;font-family:var(--font);font-size:13px;width:100%;text-align:left;transition:background .15s,color .15s;white-space:nowrap;overflow:hidden}
.logout-btn:hover{background:var(--surface2);color:var(--text)}

/* TOASTS (estilo Sonner) */
.toast-container{position:fixed;bottom:20px;right:20px;z-index:300;display:flex;flex-direction:column-reverse;gap:8px;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:12px 16px;box-shadow:var(--shadow-lg);font-size:13px;color:var(--text);max-width:340px;pointer-events:auto;animation:toastIn .25s cubic-bezier(.34,1.56,.64,1)}
.toast.out{animation:toastOut .18s ease forwards}
@keyframes toastIn{from{transform:translateY(8px) scale(.96);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes toastOut{to{transform:translateX(16px);opacity:0}}
.toast-icon{width:19px;height:19px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:11px;font-weight:700}
.toast.error .toast-icon{background:var(--danger-dim);color:var(--danger)}
.toast.success .toast-icon{background:var(--green-dim);color:var(--green)}
.toast.warning .toast-icon{background:var(--warning-dim);color:var(--warning)}
.toast.info .toast-icon{background:var(--info-dim);color:var(--info)}

/* MAIN */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{height:56px;padding:0 20px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-shrink:0}
.tb-title{font-size:14px;font-weight:600}
.tb-sub{font-size:12px;color:var(--text-muted);margin-left:4px}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.status-pill{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-muted);padding:4px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-full)}
.sdot{width:6px;height:6px;border-radius:50%;background:var(--text-dim);transition:background .3s}
.sdot.on{background:var(--green);box-shadow:0 0 4px var(--green)}
.sdot.typing{background:var(--accent);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* PANELS */
.panel{display:none;flex:1;flex-direction:column;overflow:hidden}
.panel.active{display:flex}

/* CHAT */
.messages{flex:1;overflow-y:auto;padding:24px 20px;display:flex;flex-direction:column;gap:20px;scroll-behavior:smooth}
.messages::-webkit-scrollbar{width:3px}
.messages::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--text-muted);text-align:center;padding:40px}
.ei{width:52px;height:52px;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:24px}
.ei.ei-av{width:64px;height:64px;background:transparent;border:none;padding:4px}
.avimg{display:block;overflow:hidden;transition:transform .25s cubic-bezier(.34,1.56,.64,1);backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(0)}
.avimg-inline svg{width:100%;height:100%;display:block}
@keyframes novaJump{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.tb-av.jumping .avimg{animation:novaJump .35s ease-in-out}
.ei.ei-av{overflow:hidden}
.ei.ei-av .avimg{width:100%;height:100%;object-fit:cover;border-radius:16px}
.ei.ei-av:hover .avimg,.tb-av:hover .avimg,.lli:hover .avimg,.nova-av:hover .avimg{transform:scale(1.08)}
.et{font-size:16px;font-weight:600;color:var(--text)}
.es{font-size:13px;line-height:1.6;max-width:260px}
.message{display:flex;flex-direction:column;max-width:72%;animation:fadeUp .2s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.message.user{align-self:flex-end;align-items:flex-end}
.message.agent{align-self:flex-start;align-items:flex-start}
.mb{padding:10px 14px;border-radius:var(--r);font-size:14px;line-height:1.65;white-space:pre-wrap;word-break:break-word}
.message.user .mb{background:var(--surface3);border:1px solid var(--border2);border-bottom-right-radius:3px}
.message.agent .mb{background:var(--surface2);border:1px solid var(--border);border-bottom-left-radius:3px}
.mt{font-size:10px;color:var(--text-dim);margin-top:4px;padding:0 2px;font-family:var(--mono)}
.img-wrap{margin-top:10px;border-radius:var(--rs);overflow:hidden;border:1px solid var(--border);max-width:280px}
.img-wrap img{width:100%;display:block;cursor:pointer}
.aa{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;align-items:flex-start}
.btn-ok,.btn-rg,.btn-dl,.btn-ig{transition:background .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s}
.btn-ok:hover,.btn-rg:hover,.btn-dl:hover,.btn-ig:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn-ok:active,.btn-rg:active,.btn-dl:active,.btn-ig:active{transform:translateY(0)}
.btn-ok{display:flex;align-items:center;gap:5px;padding:6px 13px;background:var(--green-dim);border:1px solid var(--green);border-radius:var(--rs);color:var(--green);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font)}
.btn-ok:hover{background:rgba(61,220,132,.18)}
.btn-rg{display:flex;align-items:center;gap:5px;padding:6px 13px;background:var(--accent-dim);border:1px solid var(--accent);border-radius:var(--rs);color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font)}
.btn-rg:hover{background:var(--accent-glow)}
.btn-dl{display:flex;align-items:center;gap:5px;padding:6px 13px;background:transparent;border:1px solid var(--border2);border-radius:var(--rs);color:var(--text-muted);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font);text-decoration:none}
.btn-dl:hover{border-color:var(--text-muted);color:var(--text)}
.badge-ok{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--green);padding:4px 10px;background:var(--green-dim);border:1px solid rgba(61,220,132,.2);border-radius:var(--radius-full);margin-top:8px}
.regen-wrap{margin-top:8px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;max-width:420px}
.regen-in{flex:1;background:var(--surface3);border:1px solid var(--accent);border-radius:var(--rs);padding:6px 10px;font-size:12px;color:var(--text);font-family:var(--font);outline:none}
.regen-in::placeholder{color:var(--text-dim)}
.regen-ok{padding:6px 12px;background:var(--accent);border:none;border-radius:var(--rs);color:white;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font);box-shadow:var(--shadow-sm);transition:filter .15s,transform .15s,box-shadow .15s}
.regen-ok:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.regen-ok:active{transform:translateY(0)}
.regen-x{padding:6px 10px;background:transparent;border:1px solid var(--border2);border-radius:var(--rs);color:var(--text-muted);font-size:12px;cursor:pointer;font-family:var(--font);transition:all .15s}
.regen-x:hover{border-color:var(--text-muted);color:var(--text)}
.prod-similares{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.prod-similar-card{display:flex;flex-direction:column;align-items:center;gap:6px;width:84px;padding:8px 6px;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius-md);font-size:11px;color:var(--text-muted);text-align:center}
.prod-similar-card img,.prod-similar-noimg{width:56px;height:56px;border-radius:var(--radius-sm);object-fit:cover;background:var(--surface3)}
.prod-similar-noimg{display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:18px}
.prod-similar-card span{line-height:1.3;word-break:break-word}
.nova-status{display:inline-flex;align-items:center;gap:10px;padding:8px 4px;color:var(--text-muted);font-size:14px;font-weight:500;letter-spacing:.2px;line-height:1.4;max-width:100%}
.nova-status-thumb{width:26px;height:26px;border-radius:var(--radius-md);object-fit:cover;flex-shrink:0;border:1px solid var(--border2)}
.nova-status-icon{width:26px;height:26px;border-radius:var(--radius-md);background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;animation:novaStatusPulse 1.4s ease-in-out infinite}
@keyframes novaStatusPulse{0%,100%{opacity:1}50%{opacity:.55}}
.nova-status .nl{line-height:1.4;padding-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nova-status-dots{display:inline-flex;gap:3px;flex-shrink:0}
.nova-status-dots i{width:4px;height:4px;border-radius:50%;background:var(--text-dim);display:inline-block;animation:novaStatusDot 1.2s ease-in-out infinite}
.nova-status-dots i:nth-child(2){animation-delay:.2s}
.nova-status-dots i:nth-child(3){animation-delay:.4s}
@keyframes novaStatusDot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}

/* ACTIONS */
.abar{padding:10px 16px;border-top:1px solid var(--border);background:var(--surface);flex-shrink:0}
.atabs{display:flex;gap:4px;margin-bottom:8px;overflow-x:auto}
.atabs::-webkit-scrollbar{display:none}
.tbtn{background:transparent;border:1px solid var(--border);border-radius:var(--radius-full);padding:4px 12px;font-size:11px;color:var(--text-muted);cursor:pointer;white-space:nowrap;font-family:var(--font);transition:all .15s;font-weight:500}
.tbtn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.tbtn:hover:not(.active){border-color:var(--border2);color:var(--text)}
.agrid{display:flex;flex-wrap:wrap;gap:5px}
.abtn{background:var(--surface2);border:1px solid var(--border);border-radius:var(--rs);padding:5px 11px;font-size:12px;color:var(--text-muted);cursor:pointer;font-family:var(--font);white-space:nowrap;transition:all .15s;font-weight:500}
.abtn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}

/* COMPOSER */
.composer{padding:10px 16px 14px;background:var(--surface);border-top:1px solid var(--border);flex-shrink:0}
.ci{display:flex;align-items:flex-end;gap:8px;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r);padding:8px 8px 8px 14px}
textarea{flex:1;background:transparent;border:none;outline:none;resize:none;font-size:14px;font-family:var(--font);color:var(--text);line-height:1.5;max-height:120px;min-height:22px;overflow-y:auto}
textarea::placeholder{color:var(--text-dim)}
.sbtn{width:32px;height:32px;background:var(--accent);border:none;border-radius:var(--rs);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:white;box-shadow:var(--shadow-sm);transition:filter .15s,transform .1s,box-shadow .15s}
.sbtn:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:var(--shadow-md)}.sbtn:active{transform:scale(.95)}.sbtn:disabled{opacity:.3;cursor:not-allowed;box-shadow:none}
.sbtn svg{width:14px;height:14px;fill:currentColor}
.ci.drag-over{border-color:var(--accent);background:var(--accent-dim)}
.attach-btn{width:28px;height:28px;background:transparent;border:none;border-radius:var(--rs);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text-dim);transition:background .12s,color .12s;margin-bottom:2px}
.attach-btn:hover{background:var(--surface3);color:var(--text)}
.attach-chip{display:flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--rs);padding:6px 10px;margin-bottom:8px;font-size:12.5px;color:var(--text-dim);max-width:fit-content}
.attach-chip img{width:28px;height:28px;object-fit:cover;border-radius:4px}
.attach-chip .ac-name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach-chip .ac-close{cursor:pointer;color:var(--text-dim);flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .12s,color .12s}
.attach-chip .ac-close:hover{background:var(--surface3);color:var(--high,#c23b3b)}

/* DASHBOARD */
.dash{flex:1;display:flex;flex-direction:column;overflow:hidden;gap:0}
.dash::-webkit-scrollbar{width:3px}
.dash::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.dsect{font-size:12px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;margin-top:4px;padding-bottom:8px;border-bottom:1px solid var(--border);display:flex;align-items:center}
.dsect::before{content:'';display:inline-block;width:3px;height:12px;background:var(--accent);border-radius:2px;margin-right:8px}
/* La rayita antes del título toma el color de la sección (mismo acento que sus cards) en vez de
   quedar siempre naranja fijo. */
.dsect.dsect-green::before{background:var(--green)}
.dsect.dsect-purple::before{background:var(--chart-3)}
.dsect.dsect-blue::before{background:var(--info)}
.dsect.dsect-pink::before{background:var(--pink)}
/* Columnas de ANCHO FIJO (no 1fr) con auto-fill: cada card mantiene el tamaño compacto que ya
   funcionaba, pero en vez de dejar un margen enorme fijo a los costados (max-width centrado),
   se repiten tantas columnas de 190px como entren y se centra el conjunto — en pantallas anchas
   entran más de 3 por fila (usa el espacio) y el sobrante que queda es siempre menor a una
   columna, repartido a ambos lados. */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,190px);gap:10px;justify-content:center}
.mc{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:14px 18px;box-shadow:var(--shadow-xs)}
/* "top" en vez de "transform" para el efecto de levantar al hacer hover — un transform en un
   ancestro crea un stacking context nuevo que ATRAPA cualquier tooltip (z-index:100) de las
   filas de adentro, así que al pasar el mouse por una fila (lo que también dispara :hover en la
   card entera, porque :hover cascada al padre) el tooltip quedaba encerrado en ese contexto y
   terminaba pintado DEBAJO de las cards vecinas en vez de encima — position:relative + top no
   crea stacking context, el mismo efecto visual sin el bug. */
.mc-stat{position:relative;top:0;transition:top .15s,box-shadow .15s,border-color .15s}
.mc-stat:hover{top:-2px;box-shadow:var(--shadow-sm);border-color:var(--border2)}
.insight-card{position:relative;top:0;transition:top .15s,box-shadow .15s,border-color .15s;box-shadow:var(--shadow-xs)}
/* Filas de Keywords principales / Oportunidades SEO: el botón de acción solo aparece al pasar
   el mouse por la fila, para no ensuciar la lista con un botón por cada keyword todo el tiempo. */
.seo-row{transition:background .15s}
.seo-row:hover{background:var(--surface3)}
.seo-btn{opacity:0;transition:opacity .15s}
.seo-row:hover .seo-btn{opacity:1}
.insight-card:hover{top:-2px;box-shadow:var(--shadow-sm);border-color:var(--border2)}
.mc-icon{width:20px;height:20px;border-radius:var(--radius-sm);background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mc-value-row{display:flex;align-items:center;gap:8px;margin:6px 0 3px;flex-wrap:wrap}
.kp-pill{display:inline-flex;align-items:center;justify-content:center;min-width:34px;padding:2px 9px;border-radius:var(--radius-full);font-family:var(--mono);font-size:11px;font-weight:700}
.kp-pill.g{background:var(--green-dim);color:var(--green)}
.kp-pill.m{background:var(--warning-dim);color:var(--warning)}
.kp-pill.b{background:var(--surface3);color:var(--text-muted)}
.ml{font-size:11px;color:var(--text-muted);font-weight:500;margin-bottom:4px}
.mv{font-size:24px;font-weight:700;font-family:var(--mono);line-height:1;letter-spacing:-.01em}
.md{font-size:10.5px;margin-top:2px;color:var(--text-muted)}
.kh{display:grid;grid-template-columns:1fr 55px 80px 65px;padding:9px 14px;border-bottom:1px solid var(--border);font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}
.kr{display:grid;grid-template-columns:1fr 55px 80px 65px;padding:9px 14px;border-bottom:1px solid var(--border);font-size:12px;transition:background .15s}
.kr:last-child{border-bottom:none;border-radius:0 0 var(--r) var(--r)}
.kr:hover{background:var(--surface3)}
.kn{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kv{color:var(--text-muted);font-family:var(--mono);font-size:11px}
.kp{display:flex;align-items:center}
.rfbtn{display:flex;align-items:center;gap:6px;padding:6px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--rs);color:var(--text-muted);font-size:11px;font-weight:500;cursor:pointer;font-family:var(--font);transition:all .15s}
.rfbtn:hover{border-color:var(--accent);color:var(--accent)}
.rfbtn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.dload{display:flex;align-items:center;justify-content:center;padding:60px;color:var(--text-muted);font-size:13px;gap:10px}
.spin{width:16px;height:16px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.derr{padding:20px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);color:var(--text-muted);font-size:13px;text-align:center;line-height:1.6;box-shadow:var(--shadow-xs)}

/* HISTORIAL */
.hist{flex:1;overflow-y:auto;padding:24px 20px;display:flex;flex-direction:column;gap:16px}
.hist::-webkit-scrollbar{width:3px}
.hist::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.hem{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:12px;color:var(--text-muted);text-align:center;padding:40px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.pcard{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:border-color .2s,box-shadow .2s;box-shadow:var(--shadow-xs)}
.pcard:hover{border-color:var(--border2)}
.pcard-img{width:100%;aspect-ratio:1;object-fit:cover;display:block;cursor:pointer}
.pcard-body{padding:10px 12px}
.pcard-cap{font-size:12px;line-height:1.55;color:var(--text);margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pcard-meta{display:flex;align-items:center;justify-content:space-between}
.pcard-date{font-size:10px;color:var(--text-dim);font-family:var(--mono)}
.pcard-acts{display:flex;gap:5px}
.pcard-btn{padding:3px 9px;background:transparent;border:1px solid var(--border);border-radius:var(--rs);color:var(--text-muted);font-size:11px;cursor:pointer;font-family:var(--font);transition:all .15s;text-decoration:none;display:inline-block}
.pcard-btn:hover{border-color:var(--accent);color:var(--accent)}
.pcard-btn.del:hover{border-color:var(--danger);color:var(--danger)}

/* INSTAGRAM BTN */
.btn-ig{display:flex;align-items:center;gap:5px;padding:6px 13px;background:linear-gradient(135deg,rgba(131,58,180,.15),rgba(253,29,29,.1),rgba(252,176,69,.1));border:1px solid rgba(131,58,180,.4);border-radius:var(--rs);color:#c13584;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font)}
.btn-ig:hover{background:linear-gradient(135deg,rgba(131,58,180,.25),rgba(253,29,29,.2),rgba(252,176,69,.2));border-color:rgba(131,58,180,.7)}
.btn-ig:disabled{opacity:.4;cursor:not-allowed}

/* THEME TOGGLE */
.theme-btn{width:32px;height:32px;background:transparent;border:1px solid var(--border);border-radius:var(--rs);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all .15s;flex-shrink:0;font-size:14px}
.theme-btn:hover{border-color:var(--border2);color:var(--text);background:var(--surface2)}

/* TOOLTIP */
.tip-wrap{position:relative;display:inline-flex;align-items:center;gap:4px}
.tip-icon{width:14px;height:14px;border-radius:50%;background:var(--border2);color:var(--text-muted);font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;cursor:help;flex-shrink:0;border:1px solid var(--border);transition:all .15s}
.tip-icon:hover{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
.tip-box{position:absolute;top:50%;left:calc(100% + 8px);transform:translateY(-50%);background:var(--surface3);border:1px solid var(--border2);border-radius:var(--rs);padding:7px 14px;font-size:11px;color:var(--text);pointer-events:none;opacity:0;transition:opacity .15s;z-index:100;width:240px;text-align:left;line-height:1.5;box-shadow:var(--shadow-sm)}
.tip-icon:hover + .tip-box,.tip-wrap:hover .tip-box{opacity:1}
/* Para tooltips que viven cerca del borde derecho (ej. la card más a la derecha de una fila) —
   abre hacia la izquierda en vez de hacia la derecha, donde no hay espacio y se corta contra
   el borde de la pantalla/contenedor. */
.tip-wrap.tip-left .tip-box{left:auto;right:calc(100% + 8px)}

/* DASH QUICK ACTIONS */
.dash-quick-actions{display:none}


/* DASH INPUT DESTACADO */
.dash-nova-bar{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;display:flex;gap:8px;align-items:center}
.dash-nova-label{font-size:11px;font-weight:600;color:var(--text-muted);white-space:nowrap;text-transform:uppercase;letter-spacing:.06em}
.dash-nova-input{flex:1;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--rs);padding:8px 12px;font-size:13px;color:var(--text);font-family:var(--font);outline:none;transition:border-color .2s}
.dash-nova-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.dash-nova-btn{padding:8px 14px;background:var(--accent);border:none;border-radius:var(--rs);color:white;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font);white-space:nowrap;box-shadow:var(--shadow-sm);transition:filter .15s,transform .15s,box-shadow .15s}
.dash-nova-btn:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.dash-nova-btn:active{transform:translateY(0)}

/* SCORE */
.score-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--radius-full);font-size:12px;font-weight:500;margin-top:8px;border:1px solid transparent}
.score-pill.hi{background:var(--green-dim);border-color:rgba(61,220,132,.3);color:var(--green)}
.score-pill.md{background:var(--warning-dim);border-color:rgba(224,142,0,.3);color:var(--warning)}
.score-pill.lo{background:var(--danger-dim);border-color:rgba(229,72,77,.3);color:var(--danger)}
.score-bar{width:60px;height:3px;background:var(--border2);border-radius:2px;overflow:hidden}
.score-fill{height:100%;border-radius:2px;transition:width .4s ease}

/* CAMPAÑA */
.camp{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px}
.camp::-webkit-scrollbar{width:3px}
.camp::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.camp-form{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:16px;flex-shrink:0;box-shadow:var(--shadow-xs)}
.camp-step{display:flex;gap:14px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--border)}
.camp-step:last-of-type{border-bottom:none;margin-bottom:0;padding-bottom:0}
.camp-step-num{width:24px;height:24px;border-radius:var(--radius-full);background:var(--accent-dim);color:var(--accent);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.camp-step-body{flex:1;min-width:0}
.camp-step-title{font-size:14px;font-weight:600;color:var(--text);display:block;margin-bottom:8px}
.camp-input-lg{font-size:15px;padding:11px 13px}
.camp-obj-group{display:flex;gap:3px;background:var(--surface3);border-radius:var(--radius-md);padding:3px;width:fit-content}
.camp-obj{padding:7px 14px;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-muted);font-size:12.5px;font-weight:500;cursor:pointer;font-family:var(--font);transition:all .15s}
.camp-obj:hover{color:var(--text)}
.camp-obj.on{background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--shadow-xs)}
.camp-ch-grid{display:flex;flex-wrap:wrap;gap:8px}
.camp-ch-tile{position:relative;display:flex;align-items:center;gap:7px;padding:6px 12px 6px 6px;background:var(--surface3);border:1px solid var(--border);border-radius:var(--radius-full);cursor:pointer;transition:all .15s;user-select:none}
.camp-ch-tile:hover{border-color:var(--border2)}
.camp-ch-tile.on{background:var(--accent-dim);border-color:var(--accent)}
.camp-ch-tile-icon{width:20px;height:20px;border-radius:var(--radius-full);background:var(--surface2);display:flex;align-items:center;justify-content:center;font-size:10.5px;color:var(--text-muted);flex-shrink:0;transition:all .15s}
.camp-ch-tile.on .camp-ch-tile-icon{background:var(--accent);color:#fff}
.camp-ch-tile-label{font-size:12px;font-weight:500;color:var(--text-muted)}
.camp-ch-tile.on .camp-ch-tile-label{color:var(--accent);font-weight:600}
.camp-ch-tile-check{display:none}
.camp-ch-tile.on .camp-ch-tile-check{display:flex;align-items:center;justify-content:center;width:13px;height:13px;border-radius:var(--radius-full);background:var(--accent);color:#fff;font-size:7px;margin-left:1px}
.camp-label{font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:6px}
.camp-input{width:100%;background:var(--surface3);border:1px solid var(--border2);border-radius:var(--rs);padding:8px 10px;font-size:13px;color:var(--text);font-family:var(--font);outline:none;transition:border-color .2s}
.camp-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.camp-btn{width:100%;margin-top:20px;background:var(--accent);border:none;border-radius:var(--rs);padding:10px;font-size:13px;font-weight:600;color:white;cursor:pointer;font-family:var(--font);display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:var(--shadow-sm);transition:filter .15s,transform .15s,box-shadow .15s}
.camp-btn:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.camp-btn:active{transform:translateY(0)}
.camp-btn:disabled{opacity:.4;cursor:not-allowed}
.camp-results{display:flex;flex-direction:column;gap:12px}

/* Selector de producto de campaña — dropdown custom (un <select> nativo no admite imagen/negrita en las opciones) */
.camp-prod-picker{position:relative}
.camp-prod-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--surface3);border:1px solid var(--border2);border-radius:var(--rs);padding:8px 10px;font-size:13px;color:var(--text);font-family:var(--font);cursor:pointer;text-align:left;transition:border-color .2s}
.camp-prod-trigger:hover{border-color:var(--border)}
.camp-prod-trigger:focus-visible,.camp-prod-picker.open .camp-prod-trigger{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.camp-prod-trigger-arrow{font-size:10px;color:var(--text-muted);flex-shrink:0;transition:transform .15s}
.camp-prod-picker.open .camp-prod-trigger-arrow{transform:rotate(180deg)}
.camp-prod-trigger-content{display:flex;align-items:center;gap:8px;overflow:hidden;color:var(--text-dim)}
.camp-prod-trigger-content.has-value{color:var(--text)}
.camp-prod-trigger-content img,.camp-prod-trigger-content .camp-prod-ph{width:22px;height:22px;border-radius:5px;object-fit:cover;flex-shrink:0}
.camp-prod-trigger-content b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.camp-prod-trigger-content .camp-prod-trigger-price{color:var(--text-muted);font-family:var(--mono);font-size:12px;flex-shrink:0}

.camp-prod-menu{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);overflow:hidden}
.camp-prod-picker.open .camp-prod-menu{display:block}
.camp-prod-search{width:100%;border:none;border-bottom:1px solid var(--border);background:var(--surface3);padding:9px 12px;font-size:13px;color:var(--text);font-family:var(--font);outline:none}
.camp-prod-menu-list{max-height:260px;overflow-y:auto;padding:4px}
.camp-prod-opt{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--radius-sm);cursor:pointer;transition:background .1s}
.camp-prod-opt:hover,.camp-prod-opt.hi{background:var(--surface3)}
.camp-prod-opt img,.camp-prod-ph{width:34px;height:34px;border-radius:6px;object-fit:cover;flex-shrink:0;background:var(--surface3)}
.camp-prod-ph{display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:14px}
.camp-prod-opt-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.camp-prod-opt-name{font-size:12.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.camp-prod-opt-price{font-size:11px;color:var(--accent);font-family:var(--mono);font-weight:500}
.camp-prod-opt-empty{padding:14px 10px;text-align:center;font-size:12px;color:var(--text-muted)}
.camp-prod-menu-loading{padding:14px 10px;text-align:center;font-size:12px;color:var(--text-muted);display:flex;align-items:center;justify-content:center;gap:8px}

.camp-result-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-xs)}
.camp-result-head{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--border)}
.camp-result-thumb{width:44px;height:44px;border-radius:var(--radius-md);object-fit:cover;flex-shrink:0;background:var(--surface3)}
.camp-result-thumb.placeholder{display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:17px}
.camp-result-title{font-size:14px;font-weight:600}
.camp-result-sub{font-size:11px;color:var(--text-muted);margin-top:2px}
.camp-tabs{display:flex;gap:3px;padding:10px;overflow-x:auto;background:var(--surface3)}
.camp-tab{display:flex;align-items:center;gap:6px;padding:7px 12px;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-muted);font-size:12.5px;font-weight:500;cursor:pointer;font-family:var(--font);white-space:nowrap;transition:all .15s;flex-shrink:0}
.camp-tab:hover{color:var(--text)}
.camp-tab.active{background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--shadow-xs)}
.camp-tab-panels{padding:16px}
.camp-tab-panel{display:none}
.camp-tab-panel.active{display:block}
.camp-content{background:var(--surface3);border:1px solid var(--border);border-radius:var(--rs);padding:10px 12px;font-size:12px;line-height:1.7;color:var(--text);white-space:pre-wrap;word-break:break-word;margin-bottom:10px;min-height:60px}
.camp-img-btn{width:100%;padding:8px;background:var(--surface3);border:1px dashed var(--border2);border-radius:var(--rs);color:var(--text-muted);font-size:12px;cursor:pointer;font-family:var(--font);transition:all .15s;margin-bottom:10px}
.camp-img-btn:hover{border-color:var(--accent);color:var(--accent)}
.camp-img-wrap{margin-bottom:10px;border-radius:var(--rs);overflow:hidden;border:1px solid var(--border)}
.camp-img-wrap img{width:100%;max-width:280px;display:block;cursor:pointer;max-height:320px;object-fit:contain;border-radius:var(--rs);margin:0 auto}
.camp-btns{display:flex;gap:6px;flex-wrap:wrap}
.camp-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:60px 20px;color:var(--text-muted);text-align:center}

/* HISTORIAL MODAL */
.hm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .2s}
.hm-overlay.show{opacity:1;pointer-events:auto}
.hm{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-xl);width:100%;max-width:640px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-lg)}
.hm-img-wrap{background:var(--surface2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:center;padding:18px;max-height:min(48vh,420px)}
.hm-img{max-width:100%;max-height:min(44vh,384px);width:auto;height:auto;object-fit:contain;display:block;cursor:zoom-in;border-radius:var(--radius-sm)}
.hm-body{padding:20px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;flex:1}
.hm-body::-webkit-scrollbar{width:3px}
.hm-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.hm-label{font-size:12px;font-weight:600;color:var(--text)}
.hm-caption{width:100%;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius-sm);padding:12px 14px;font-size:13px;color:var(--text);font-family:var(--font);outline:none;resize:vertical;min-height:120px;line-height:1.65;transition:border-color .15s,box-shadow .15s}
.hm-caption:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.hm-foot{padding:16px 20px;border-top:1px solid var(--border);display:flex;gap:8px;flex-shrink:0}
.hm-date{font-size:11px;color:var(--text-dim);font-family:var(--mono);margin-left:auto;align-self:center}

/* LOGIN */
#ls{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:100;padding:24px;overflow:hidden}
.lglow{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,90,54,.15) 0%,rgba(255,90,54,0) 70%);top:-140px;pointer-events:none}
.lcard{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-2xl);padding:38px 34px;width:100%;max-width:380px;box-shadow:var(--shadow-lg)}
.llogo{display:flex;align-items:center;gap:11px;margin-bottom:26px}
.lli{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:17px;color:#fff;overflow:hidden}
.lli .avimg{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-md)}
.llt{font-size:20px;font-weight:800;letter-spacing:-.02em}
.lhead{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-bottom:5px}
.lsub{font-size:14px;color:var(--text-muted);margin-bottom:22px;line-height:1.5}
.lf{margin-bottom:14px}
.ll{font-size:12px;font-weight:600;color:var(--text-muted);display:block;margin-bottom:6px}
.lin{width:100%;box-sizing:border-box;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 14px;font-size:14px;color:var(--text);font-family:var(--font);outline:none;transition:border-color .2s,box-shadow .2s}
.lin:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.lbtn{width:100%;background:var(--accent);border:none;border-radius:var(--radius-md);padding:13px;font-size:14px;font-weight:700;color:#fff;cursor:pointer;font-family:var(--font);box-shadow:var(--shadow-sm);transition:filter .15s,transform .1s,box-shadow .15s;margin-top:8px}
.lbtn:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:var(--shadow-md)}.lbtn:active{transform:translateY(0)}.lbtn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.lerr{font-size:13px;color:var(--danger);margin-top:10px;min-height:16px;text-align:center}
.lfoot{margin-top:22px;text-align:center;font-size:12px;color:var(--text-dim)}
.tb-av{width:44px;height:44px;border-radius:13px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.tb-av img{width:100%;height:100%;object-fit:cover}
/* ── CONVERSACIONES ── */
.tb-icon{width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.tb-icon:hover{border-color:var(--accent);color:var(--accent)}
/* ── CEREBRO DE NOVA ── */
.brain{padding:28px 32px 60px;width:100%;box-sizing:border-box}
.brain-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md);padding:13px 16px;cursor:pointer;font-family:var(--font);color:var(--text);transition:border-color .15s;box-shadow:var(--shadow-xs)}
.brain-toggle:hover{border-color:var(--accent)}
.brain-toggle-l{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600}
.brain-toggle i.fa-chevron-down{color:var(--text-muted);transition:transform .2s}
.brain-toggle.open i.fa-chevron-down{transform:rotate(180deg)}
.cap-grid{display:grid;max-height:0;overflow:hidden;transition:max-height .3s ease;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:0}
.cap-grid.open{max-height:900px;margin-top:12px}
.biz-field{margin-bottom:12px}
.biz-field .camp-input{margin-top:2px}
.nova-av{width:74px;height:74px;border-radius:var(--radius-2xl);flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px}
.nova-av .avimg{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-2xl)}
/* Antes subía y bajaba (novaFloat) — ahora respira: escala suave en vez de moverse. Va en el
   .avimg de adentro, no en .nova-av mismo, para no pelearse con el transform que usa
   #nova-brain-av al esconderse/reaparecer (peeking-away). */
.nova-av.alive .avimg{animation:novaPeekBreathe 2.8s ease-in-out infinite}
.tb-av .avimg{animation:novaPeekBreathe 2.8s ease-in-out infinite}
.nova-av.alive::after{content:'';position:absolute;inset:0;border-radius:var(--radius-2xl);animation:novaHalo 2.8s ease-out infinite;pointer-events:none}
@keyframes novaHalo{0%{box-shadow:0 0 0 0 rgba(255,90,54,.45)}70%,100%{box-shadow:0 0 0 16px rgba(255,90,54,0)}}
/* El mismo avatar (misma forma que el central) "descansa" apoyado en el borde de la card bajo
   el ratón — casi todo AFUERA, solo rozando el borde (no adentro, para no tapar texto ni
   botones) — se reparenta DENTRO de ella (appendChild) así que scrollea con la página, pero su
   posición es SIEMPRE la misma para esa card — no depende de por dónde entró el ratón, y no
   tiene por qué ser una esquina: también puede apoyarse en medio de un lado. */
/* Nada de transform:scale() en la entrada — un layer con SVG puesto en su propio compositing
   layer (.avimg usa translateZ(0)) se rasteriza al tamaño de layout y luego un scale() lo
   estira desde ese bitmap ya fijo, dando pixelado. Fundido + un pequeño desplazamiento se ve
   igual de vivo sin re-escalar nada. */
/* Sin sube-y-baja: solo aparece/desaparece (opacity) quieta en su lugar, y "vivo" lo dice el
   mismo pulso/halo naranja que ya usa el avatar central — más simple y más consistente que
   animar la posición. */
/* La sombra debajo es lo que hace que se lea "apoyado" y no "pegado encima" — sin ella, un
   avatar plano flotando sobre un borde nunca termina de sentirse parte de la superficie. Se
   anima junto con la aparición (0.85→1, no desde .4 — un salto de escala tan grande fue lo que
   pixelaba el SVG la vez pasada) y comparte duración con el borde de acento para que ambos
   lean como un mismo gesto de llegada, no dos animaciones sueltas. */
/* La mitad "de adentro" se recorta a mano con clip-path (no depende de que el navegador la
   tape con el fondo de la card vía z-index — eso no estaba funcionando de verdad). Solo 4
   posiciones de lado, cada una con su propio inset() que oculta exactamente la mitad que cae
   sobre la card. */
/* Salida rápida (se define en la base, se usa al QUITAR .show) y llegada más lenta con un
   poco de rebote (se define en .show, se usa al AGREGAR .show) — dos sensaciones distintas
   para "se va" vs "llega", no la misma animación tocada al revés. */
.nova-peek-ball{position:absolute;width:40px;height:40px;pointer-events:none;opacity:0;transform:scale(.8);transition:opacity .2s ease-in,transform .2s ease-in;z-index:1}
.nova-peek-ball.show{opacity:1;transform:scale(1);filter:drop-shadow(0 3px 5px rgba(0,0,0,.22));transition:opacity .5s cubic-bezier(.34,1.56,.64,1),transform .5s cubic-bezier(.34,1.56,.64,1)}
/* Solo arriba y abajo (25%/50%/75% del ancho de la card) — recorta la mitad de abajo (arriba)
   o la mitad de arriba (abajo), dejando ver justo la parte de la cara/ojos. */
.nova-peek-ball.t25,.nova-peek-ball.t50,.nova-peek-ball.t75{top:-20px;clip-path:inset(0 0 50% 0)}
.nova-peek-ball.b25,.nova-peek-ball.b50,.nova-peek-ball.b75{bottom:-20px;clip-path:inset(50% 0 0 0)}
.nova-peek-ball.t25,.nova-peek-ball.b25{left:25%;margin-left:-20px}
.nova-peek-ball.t50,.nova-peek-ball.b50{left:50%;margin-left:-20px}
.nova-peek-ball.t75,.nova-peek-ball.b75{left:75%;margin-left:-20px}
.nova-peek-ball .nova-av{width:100%;height:100%;font-size:15px}
/* Los de abajo muestran la mitad de ABAJO del círculo (donde de verdad está el "afuera" de la
   card) — si no volteamos el dibujo ahí se ven los pies/base, no la cara. Espejado vertical:
   lo que antes era arriba (ojos) pasa a quedar abajo, justo donde recorta clip-path. */
.nova-peek-ball.b25 .nova-av,.nova-peek-ball.b50 .nova-av,.nova-peek-ball.b75 .nova-av{transform:scaleY(-1)}
/* Nada de flotar (novaFloat) ni del pulso/halo naranja — "viva" es la misma respiración lenta
   que ya tiene cualquier avatar de Nova al pasarle el ratón por encima (escala suave), pero
   en bucle en vez de solo al entrar, para que se sienta quieta pero respirando. */
.nova-peek-ball .nova-av.alive{animation:none}
.nova-peek-ball .nova-av.alive::after{display:none}
.nova-peek-ball .nova-av .avimg{animation:novaPeekBreathe 2.8s ease-in-out infinite}
@keyframes novaPeekBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
/* Irse del centro es rápido (.peeking-away, en la base) — volver es un poco más lento y con
   rebote (regla sin .peeking-away, se usa al QUITAR la clase), para que se sienta "llegando
   a casa" y no un simple corte. */
#nova-brain-av{transition:opacity .45s cubic-bezier(.34,1.56,.64,1),transform .45s cubic-bezier(.34,1.56,.64,1)}
#nova-brain-av.peeking-away{opacity:0;transform:scale(.5);transition:opacity .2s ease-in,transform .2s ease-in}
/* El borde de acento arranca desde el punto donde entró el ratón (--ex/--ey, en % de la
   card) y se expande cubriendo todo — así se siente que "Nova llegó por ahí" en vez de un
   simple fundido parejo. clip-path circle() es el truco: nace como un punto y crece. */
.nova-hover-tint{background:var(--accent-dim)!important}
.pers-card::before,.sched-card::before,.map-group::before,.map-card-simple::before,.brain-toggle::before{content:'';position:absolute;inset:0;border-radius:inherit;border:2px solid var(--accent);opacity:0;clip-path:circle(0% at var(--ex,50%) var(--ey,50%));transition:clip-path .55s cubic-bezier(.22,.61,.36,1),opacity .25s;pointer-events:none}
.nova-hover-tint::before{opacity:1;clip-path:circle(140% at var(--ex,50%) var(--ey,50%))}
.pers-card,.sched-card,.map-group,.map-card-simple,.brain-toggle{position:relative;overflow:visible}
.brain-hname{font-size:24px;font-weight:800;letter-spacing:-.02em}
.brain-hsub{font-size:14px;color:var(--text-muted);margin-top:2px}
.brain-edit{margin-top:8px;font-size:12px;color:var(--accent);background:none;border:none;cursor:pointer;font-family:var(--font);padding:0;font-weight:600}
/* Tienda: toggle Productos/Categorías como control segmentado — deliberadamente distinto de
   .tbtn (que se reutiliza en otras partes de la página) para no arrastrar este cambio ahí. */
.store-toggle{display:inline-flex;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md);padding:3px;gap:2px}
.store-toggle-btn{display:flex;align-items:center;gap:6px;padding:7px 16px;border:none;background:transparent;border-radius:var(--radius-sm);color:var(--text-muted);font-size:12.5px;font-weight:600;cursor:pointer;font-family:var(--font);transition:all .18s}
.store-toggle-btn.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-xs)}
.store-toggle-btn:hover:not(.active){color:var(--text)}

/* Tienda: buscador + filtro de categoría */
.prod-filters{display:flex;gap:10px;margin-bottom:18px}
.prod-search-wrap{position:relative;flex:1}
.prod-search-wrap i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-dim);font-size:12px;pointer-events:none}
.prod-search-wrap input{width:100%;padding:9px 12px 9px 32px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text);font-size:13px;font-family:var(--font);transition:border-color .15s}
.prod-search-wrap input:focus{outline:none;border-color:var(--accent)}
.prod-search-wrap input::placeholder{color:var(--text-dim)}
.prod-cat-filter-wrap{position:relative;display:flex;align-items:center}
.prod-cat-filter-wrap select{appearance:none;-webkit-appearance:none;padding:9px 36px 9px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text);font-size:13px;font-family:var(--font);cursor:pointer;max-width:220px;transition:border-color .15s}
.prod-cat-filter-wrap select:focus{outline:none;border-color:var(--accent)}
.prod-cat-filter-wrap::after{content:'';position:absolute;right:15px;top:50%;width:7px;height:7px;border-right:1.5px solid var(--text-dim);border-bottom:1.5px solid var(--text-dim);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.prod-cat-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:18px;height:18px;border:none;background:var(--text-dim);border-radius:50%;color:var(--surface2);align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}
.prod-cat-clear:hover{background:var(--text-muted)}
.prod-opt-link{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--text-muted);cursor:pointer;font-weight:500;transition:color .15s}
.prod-opt-link:hover{color:var(--accent)}
.prod-opt-link i{font-size:10px}

/* Tienda: cards de producto/categoría — foto protagonista, sin ruido de texto */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.prod-card{display:flex;flex-direction:column;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-xs);transition:border-color .18s,box-shadow .18s,transform .18s}
.prod-card:hover{border-color:var(--border2);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.prod-card-img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--surface3)}
.prod-card-noimg{display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:30px}
.prod-card-body{padding:14px 16px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod-card-title{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.prod-card-name{font-size:14px;font-weight:700;color:var(--text);line-height:1.3}
.prod-card-price{font-size:13px;font-weight:700;color:var(--accent);white-space:nowrap;flex-shrink:0}
.prod-card-meta{font-size:11px;color:var(--text-dim);white-space:nowrap;flex-shrink:0}
.prod-card-desc{font-size:12.5px;color:var(--text-muted);line-height:1.5;flex:1}
.prod-card-desc.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod-card-desc.prod-cat-desc.clamped{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.prod-card-acts{display:flex;gap:6px;margin-top:8px;padding-top:10px;border-top:1px solid var(--border)}
.prod-card-act{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 8px;background:transparent;border:1px solid var(--border);border-radius:var(--rs);color:var(--text-muted);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;text-decoration:none;font-family:var(--font)}
.prod-card-act:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.prod-card-act i{font-size:11px}
.brain-sec{margin-bottom:28px}
.brain-sec-t{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:13px;display:flex;align-items:center;gap:8px}
.brain-sec-t::before{content:'';display:inline-block;width:3px;height:12px;background:var(--accent);border-radius:2px}
.cap-icon{width:26px;height:26px;border-radius:var(--radius-md);background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.cap{display:flex;align-items:flex-start;gap:11px;padding:13px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-xs)}
.cap-t{font-size:13px;font-weight:600}
.cap-d{font-size:12px;color:var(--text-muted);line-height:1.4}
.chip-row{display:flex;flex-wrap:wrap;gap:7px}
.lchip{padding:5px 11px;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius-full);font-size:12px;color:var(--text)}
.lchip.accent{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);font-weight:600}
.learn-card{padding:12px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:8px;box-shadow:var(--shadow-xs)}
.post-card{display:flex;gap:10px;padding:8px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:8px;box-shadow:var(--shadow-xs)}
.post-card-img{width:56px;height:56px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0}
.post-card-noimg{display:flex;align-items:center;justify-content:center;background:var(--surface3);color:var(--text-muted);font-size:16px}
.post-card-body{min-width:0}
.post-card-body .learn-x{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.foto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-top:10px}
.foto-card{position:relative;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-xs)}
.foto-card img{width:100%;height:90px;object-fit:cover;display:block}
.foto-card-name{padding:6px 8px;font-size:11.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foto-card-del{position:absolute;top:6px;right:6px;width:22px;height:22px;border:none;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;opacity:0;transition:opacity .12s}
.foto-card:hover .foto-card-del{opacity:1}
.foto-card-del:hover{background:var(--high,#c23b3b)}

.av-card.wide{max-width:760px}
.foto-bulk-drop{border:2px dashed var(--border2);border-radius:var(--radius-md);padding:32px 20px;text-align:center;color:var(--text-dim);cursor:pointer;transition:border-color .15s,background .15s}
.foto-bulk-drop:hover,.foto-bulk-drop.drag-over{border-color:var(--accent);background:var(--accent-dim)}
.foto-bulk-drop i{font-size:26px;color:var(--text-dim);margin-bottom:8px;display:block}
.foto-bulk-drop .fbd-t{font-size:13.5px;font-weight:600;color:var(--text)}
.foto-bulk-drop .fbd-s{font-size:12px;margin-top:2px}
.foto-bulk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:16px;max-height:46vh;overflow-y:auto;padding-right:2px}
.fbulk-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column}
.fbulk-card .fbulk-img-wrap{position:relative;width:100%;height:110px;background:var(--surface3);display:flex;align-items:center;justify-content:center}
.fbulk-card img{width:100%;height:100%;object-fit:cover;display:block}
.fbulk-card .fbulk-del{position:absolute;top:5px;right:5px;width:20px;height:20px;border:none;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:9px}
.fbulk-card .fbulk-del:hover{background:var(--high,#c23b3b)}
.fbulk-card .fbulk-err{position:absolute;inset:0;background:rgba(194,59,59,.9);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10.5px;text-align:center;padding:6px}
.fbulk-card input{width:100%;border:none;border-top:1px solid var(--border);background:transparent;padding:7px 8px;font-size:12px;color:var(--text);font-family:var(--font);outline:none}
.fbulk-card input:focus{background:var(--surface3)}
.fbulk-card input::placeholder{color:var(--text-dim)}
.learn-t{font-size:12px;font-weight:700;color:var(--accent);margin-bottom:3px}
.learn-x{font-size:13px;color:var(--text);line-height:1.5}
.learn-action-btn{width:20px;height:20px;background:transparent;border:1px solid var(--border);border-radius:var(--radius-xs);cursor:pointer;color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-size:10px;transition:all .15s;flex-shrink:0}
.learn-action-btn:hover{border-color:var(--accent);color:var(--accent)}
.brain-empty{font-size:13px;color:var(--text-muted);padding:4px 0}
.brain-stats{display:flex;gap:10px;margin-bottom:2px}
.brain-stat{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:12px 18px;box-shadow:var(--shadow-xs)}
.brain-stat b{font-size:22px;font-weight:800;color:var(--text);font-family:var(--mono);line-height:1}
.brain-stat span{display:block;font-size:11px;color:var(--text-muted);margin-top:4px}
.learn-block{margin-bottom:12px}
.learn-label{font-size:12px;color:var(--text-muted);margin-bottom:6px;font-weight:500}
.map-detail-title{font-size:16px;font-weight:800;margin-bottom:2px;display:flex;align-items:center;gap:8px}
.map-detail-sub{font-size:12.5px;color:var(--text-muted);margin-bottom:14px}

/* ── Perfil de Nova: fila de identidad (Personalidad / Avatar / Programado) ──
   Inspirado en el panel de identidad de Vellum (sliders a un lado, mascota al centro,
   agenda al otro) pero con nuestra propia paleta/tipografía — no es una copia literal. */
.identity-row{position:relative;display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch;margin-bottom:28px}
@media(max-width:900px){.identity-row{grid-template-columns:1fr}}
.pers-card,.sched-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;box-shadow:var(--shadow-xs);transition:transform .18s,box-shadow .18s,border-color .18s}
.pers-card:hover,.sched-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--border2)}
.map-group{transition:transform .18s,box-shadow .18s,border-color .18s}
.map-group:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--border2)}
.pers-card-t{font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:3px}
.pers-card-t i{color:var(--accent)}
.pers-card-sub{font-size:11.5px;color:var(--text-muted);line-height:1.4;margin-bottom:16px}
.pers-trait{margin-bottom:16px}
.pers-labels{display:flex;justify-content:space-between;font-size:11.5px;font-weight:600;color:var(--text-muted);margin-bottom:6px}
.pers-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:var(--radius-full);cursor:pointer;
  background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--val,50%),var(--surface3) var(--val,50%),var(--surface3) 100%);
  transition:box-shadow .15s}
.pers-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.25);cursor:pointer;transition:transform .1s}
.pers-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}
.pers-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.25);cursor:pointer}
.pers-slider::-moz-range-track{background:transparent}
.pers-preview{font-size:12px;color:var(--text);background:var(--accent-dim);border:1px solid var(--accent);border-radius:var(--radius-md);padding:9px 12px;margin-top:4px;margin-bottom:14px;line-height:1.45;transition:opacity .15s}
.identity-center{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;gap:2px;padding:12px 8px}
.identity-center .brain-hname{margin-top:10px}
.identity-center .brain-stats{margin-top:16px}
.nova-slot{position:relative;width:110px;height:110px}
/* El "hueco tibio" que queda cuando el avatar central se va a visitar una card: no es una
   forma geométrica (ni cuadrado ni círculo) — es el MISMO SVG del avatar activo, aplanado a
   silueta plana (brightness(0) vuelve negro cualquier pixel opaco, respetando el alpha real
   del dibujo — el contorno que queda es exactamente la forma del avatar de verdad) con
   sombra y muy transparente. Mismo tamaño y centro exacto, nunca desaparece del todo. */
.nova-ghost{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .25s;filter:brightness(0) drop-shadow(0 6px 10px rgba(0,0,0,.28))}
.nova-ghost .avimg{width:100%;height:100%;object-fit:cover}
.nova-slot.peeking .nova-ghost{opacity:.28;animation:novaGhostPulse 1.8s ease-in-out infinite}
@keyframes novaGhostPulse{0%,100%{opacity:.18}50%{opacity:.34}}
.nova-peek-label{font-size:11.5px;font-weight:600;color:var(--accent);height:15px;opacity:0;transform:translateY(-3px);transition:opacity .2s,transform .2s}
.nova-peek-label.show{opacity:1;transform:translateY(0)}
#pers-save-btn:disabled{opacity:.4;cursor:default}
.sched-row{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--border)}
.sched-row:last-child{border-bottom:none}
.sched-icon{width:32px;height:32px;border-radius:var(--radius-md);background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.sched-info{min-width:0;flex:1}
.sched-name{font-size:13px;font-weight:600;color:var(--text)}
.sched-cadence{font-size:11.5px;color:var(--text-muted);margin-top:1px}
.sched-health{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--warning);margin-top:3px}
.sched-health.bad{color:var(--danger)}
.sched-badge{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:var(--radius-full);flex-shrink:0;border:1px solid transparent;cursor:pointer;font-family:var(--font);transition:opacity .15s}
.sched-badge:hover{opacity:.75}
.sched-badge:disabled{opacity:.5;cursor:default}
.sched-badge.on{background:var(--green-dim);color:var(--green);border-color:rgba(22,163,74,.2)}
.sched-badge.off{background:var(--surface3);color:var(--text-muted)}
.sched-del{width:22px;height:22px;flex-shrink:0;border:none;background:transparent;color:var(--text-dim);border-radius:var(--radius-xs);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:11px;transition:color .15s,background .15s}
.sched-del:hover{color:var(--high,#c23b3b);background:var(--surface3)}

/* ── Perfil de Nova: "Conectado a" (antes el grafo/Mapa de Nova) ── */
.map-groups{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:4px}
.map-group{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;box-shadow:var(--shadow-xs)}
.map-group-t{font-size:12px;font-weight:700;display:flex;align-items:center;gap:7px;margin-bottom:8px}
.map-group-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:padding-left .15s}
.map-group-row:last-child{border-bottom:none}
.map-group-row:hover{padding-left:4px}
.map-row-icon{width:26px;height:26px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.map-row-label{flex:1;min-width:0;font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-row-arrow{font-size:9px;color:var(--text-dim);transition:transform .15s}
.map-group-row:hover .map-row-arrow{transform:translateX(2px);color:var(--accent)}
/* Cards simples de "Conectado a" (estilo Vellum: click en la card entera navega a su sección,
   nada de listas colgando debajo) */
.map-card-simple{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 16px;box-shadow:var(--shadow-xs);cursor:pointer;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;transition:transform .18s,box-shadow .18s,border-color .18s}
.map-card-simple:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--border2)}
.map-card-icon{width:40px;height:40px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:16px}
.map-card-title{font-size:13px;font-weight:700}
.map-card-count{font-size:11.5px;color:var(--text-muted)}
.map-back-bar{margin-bottom:10px}
/* Mapa de Nova — calcado del "Knowledge Brain" de Vellum: solo 3D (sin toggle 2D, sin malla de
   "cerebro" de fondo). Panel BLANCO fijo (no sigue el tema claro/oscuro de la app, a propósito,
   como Vellum) con acento naranja de marca. Las variables se redefinen acá para que
   .mem-side-panel (que ya usa var(--surface2)/var(--text)/etc) herede blanco automáticamente,
   sin tener que duplicar sus reglas. */
.brain-graph-panel{
  --surface2:#fff; --surface3:#f3f3f3; --text:#1a1a1a; --text-muted:#666; --text-dim:#aaa; --border:#e4e4e4; --border2:#d5d5d5;
  margin-top:0;background:#fff;border:1px solid #e4e4e4;border-radius:var(--radius-lg);overflow:hidden;padding:12px;
}
.brain-graph-header{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 10px}
.brain-graph-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;background:rgba(255,90,54,.08);border:1px solid rgba(255,90,54,.25);border-radius:var(--radius-full);font-size:11.5px;font-weight:600;color:#c2410c;font-family:var(--mono)}
.brain-graph-pulse{width:7px;height:7px;border-radius:50%;background:#ff5a36;animation:brainPulseDot 2s ease-in-out infinite}
@keyframes brainPulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
.brain-graph-body{position:relative;display:flex;gap:12px;align-items:stretch}
.brain-graph-viz{position:relative;flex:1;min-width:0;height:680px;border-radius:var(--radius-md);overflow:hidden;background:#e9ebed}
.brain-graph-viz::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(255,90,54,.07) 0%,transparent 70%);pointer-events:none}
/* brain2d.js reemplaza el <svg id="graph-svg"> por un <canvas id="graph-svg-canvas"> real la
   primera vez que se inicializa (técnica real de Vellum: canvas 2D + rotación de cámara, no
   SVG) — el cursor por defecto ya lo pone el propio JS (grab/grabbing/pointer). */
#graph-svg{width:100%;height:100%;display:block}
#graph-svg-canvas{width:100%;height:100%;display:block}
/* Avatar de Nova superpuesto al canvas (no dibujado adentro) — así conserva sus animaciones
   propias (parpadeo) en vez de quedar congelado como una imagen rasterizada. La respiración
   propia del SVG es casi imperceptible (0.8% de escala), así que se suma una nuestra más notoria
   — el keyframe incluye el translate(-50%,-50%) de centrado para no perderlo al animar transform. */
.brain-nova-avatar{position:absolute;top:0;left:0;pointer-events:none;border-radius:50%;overflow:hidden;transform:translate(-50%,-50%);animation:novaAvatarBreathe 2.8s ease-in-out infinite;transition:opacity .2s ease}
.brain-nova-avatar .avimg{width:100%;height:100%;object-fit:cover;display:block}
@keyframes novaAvatarBreathe{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.08)}
}
/* Controles del mapa (zoom in/out, restablecer vista) */
.brain-graph-controls{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:6px;z-index:2}
.brain-graph-controls button{width:30px;height:30px;border-radius:8px;border:1px solid rgba(0,0,0,.1);background:rgba(255,255,255,.92);color:#444;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.12);transition:background .15s ease,color .15s ease}
.brain-graph-controls button:hover{background:#ff5a36;color:#fff}
.brain-graph-tooltip{position:fixed;display:none;flex-direction:column;gap:3px;padding:8px 12px;background:rgba(20,20,20,.92);border:1px solid rgba(255,90,54,.35);border-radius:8px;backdrop-filter:blur(6px);box-shadow:0 8px 20px rgba(0,0,0,.3);pointer-events:none;z-index:9999;max-width:200px;font-size:12px;color:#f0f0f0}
.brain-graph-tooltip.visible{display:flex}
.brain-tt-name{font-weight:700;font-size:13px}
.brain-tt-type{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;color:#ff9a78}
.brain-tt-row{font-size:11.5px;color:#c7c7c7}
.brain-graph-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;padding:10px 4px 2px;font-size:11px;color:#888}
.brain-legend-item{display:flex;align-items:center;gap:6px}
.brain-legend-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.brain-legend-line{width:16px;height:0;border-top:1.5px solid #6b7aa0;display:inline-block}
.brain-legend-line.dashed{border-top-style:dashed;border-color:#c98bda}
/* Drawer de detalle de nodo estilo Vellum: no está siempre visible — es un popup que se desliza
   desde la derecha solo al clickear un nodo, con backdrop clickeable para cerrar (+ Escape). */
/* pointer-events:none en el overlay y el backdrop — que se vean (el tinte encima del canvas)
   pero no bloqueen clicks: antes cualquier click, aunque fuera sobre OTRO nodo, lo interceptaba
   el backdrop y cerraba el drawer en vez de saltar directo al nodo nuevo (2 clicks en vez de 1).
   El propio canvas ya sabe deseleccionar al clickear vacío, así que cerrar-al-click-afuera sigue
   funcionando igual, solo que a través de esa lógica en vez de un backdrop interceptando todo. */
.mem-detail-overlay{position:absolute;inset:0;z-index:20;display:none;pointer-events:none}
.mem-detail-overlay.open{display:block}
.mem-detail-backdrop{position:absolute;inset:0;background:rgba(20,20,20,.14);pointer-events:none}
.mem-side-panel{position:absolute;top:0;right:0;bottom:0;width:360px;max-width:88%;overflow-y:auto;background:var(--surface2);border-left:1px solid var(--border);box-shadow:-10px 0 28px rgba(0,0,0,.14);padding:26px 24px;transform:translateX(100%);transition:transform .22s cubic-bezier(.4,0,.2,1);pointer-events:auto}
.mem-detail-overlay.open .mem-side-panel{transform:translateX(0)}
.mem-detail-close{position:absolute;top:14px;right:14px;z-index:21;width:30px;height:30px;border-radius:9px;border:1px solid var(--border);background:var(--surface2);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;opacity:0;pointer-events:none;transition:opacity .15s ease,color .15s ease,border-color .15s ease}
.mem-detail-overlay.open .mem-detail-close{opacity:1;pointer-events:auto}
.mem-detail-close:hover{color:#ff5a36;border-color:#ff5a36}
.mem-side-cat{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--accent);margin-bottom:6px}
.mem-side-title{font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--text);line-height:1.25;margin-bottom:6px}
.mem-side-sub{font-size:13.5px;color:var(--text-muted);line-height:1.5;margin-bottom:20px}
.mem-side-x{font-size:15px;color:var(--text);line-height:1.65;margin-bottom:22px}
.mem-side-actions{display:flex;gap:8px;margin-bottom:24px}
.mem-side-conn-t{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:12px;padding-top:22px;border-top:1px solid var(--border)}
.mem-side-conn-row{display:flex;align-items:center;gap:12px;padding:9px 10px;margin:0 -10px 3px;font-size:14.5px;font-weight:600;color:var(--text);cursor:pointer;border-radius:var(--radius-md);transition:background .15s ease,color .15s ease}
.mem-side-conn-row:hover{background:var(--accent-dim);color:var(--accent)}
.mem-side-conn-row i{width:30px;height:30px;border-radius:50%;background:var(--surface3);display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:12.5px;flex-shrink:0;margin:0;transition:background .15s ease,color .15s ease}
.mem-side-conn-row:hover i{background:var(--accent-dim);color:var(--accent)}
.mem-side-kv{display:flex;justify-content:space-between;gap:10px;padding:10px 0;font-size:14px;border-bottom:1px solid var(--border)}
.mem-side-kv span{color:var(--text-muted)}
.mem-side-kv b{color:var(--text);font-weight:600;text-align:right}
.mem-side-tags{display:flex;flex-wrap:wrap;gap:8px}
.mem-side-tag{font-size:12.5px;padding:5px 12px;background:var(--surface3);border:1px solid var(--border);border-radius:var(--radius-full);color:var(--text)}
.mem-side-conn-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.mem-side-conn-txt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mem-side-conn-txt small{font-size:12px;color:var(--text-dim);font-weight:400}
/* Las cards de documentos/posts/banners/fotos (.learn-card/.post-card/.foto-grid) son clases
   compartidas con otras partes de la app (feed de aprendizaje, historial) — se agrandan solo
   DENTRO del drawer del mapa, sin tocar su tamaño en el resto de la app. */
.mem-side-panel .learn-card{padding:14px 16px;margin-bottom:10px}
.mem-side-panel .learn-t{font-size:13.5px;margin-bottom:5px}
.mem-side-panel .learn-x{font-size:14.5px;line-height:1.6}
.mem-side-panel .post-card{gap:12px;padding:10px}
.mem-side-panel .post-card-img{width:64px;height:64px}
.mem-side-panel .post-card-body .learn-t{font-size:12.5px}
.mem-side-panel .post-card-body .learn-x{font-size:13.5px}
.mem-side-panel .foto-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.mem-side-panel .foto-card img{height:74px}
.mem-side-panel .foto-card-name{font-size:12px}
.mem-side-panel .brain-empty{font-size:14.5px;padding:8px 0}
/* Grid de stat-tiles (metricCard, el mismo componente del dashboard) para los resúmenes de
   integraciones — 2 columnas, entran cómodas en el ancho del drawer. */
.mem-side-panel .int-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px}
/* Nota con acento de color (del dominio) + ícono — reemplaza el .learn-card plano para
   documentos/banners/estilo visual/cambios pedidos. Posts y catálogo de fotos no se tocan. */
.mem-side-panel .insight-note{position:relative;padding:12px 14px 12px 16px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:10px;overflow:hidden}
.mem-side-panel .insight-note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--nc-accent,var(--accent))}
.mem-side-panel .insight-note-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.mem-side-panel .insight-note-icon{width:24px;height:24px;border-radius:7px;background:color-mix(in srgb,var(--nc-accent,var(--accent)) 15%,transparent);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.mem-side-panel .insight-note-label{font-size:13.5px;font-weight:700;color:var(--text)}
.mem-side-panel .insight-note-meta{font-size:11.5px;color:var(--text-muted);margin-left:auto;white-space:nowrap}
.mem-side-panel .insight-note-body{font-size:14px;line-height:1.6;color:var(--text)}
.map-detail-row{padding:8px 0;border-bottom:1px solid var(--border)}
.map-detail-row:last-child{border-bottom:none}
.map-detail-k{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:2px}
.map-detail-v{font-size:13px;color:var(--text);line-height:1.5}
/* Selector de avatar */
.av-modal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:20px}
.av-modal.on{display:flex}
.av-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:24px;max-width:440px;width:100%;box-shadow:var(--shadow-lg);max-height:82vh;overflow-y:auto}
.av-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0}
.av-p{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}
.av-p-shape{width:100%;aspect-ratio:1;border-radius:var(--radius-lg);border:2px solid transparent;display:flex;align-items:center;justify-content:center;padding:8px;transition:transform .15s,background .15s}
.av-p-shape .avimg{width:100%;height:100%;object-fit:contain}
.av-p:hover .av-p-shape{transform:scale(1.08);background:var(--surface2)}
.av-p.sel .av-p-shape{border-color:var(--text);background:var(--surface2)}
.av-p-name{font-size:11px;color:var(--text-muted);font-weight:600}
.av-p.sel .av-p-name{color:var(--text)}
.av-p.sel{border-color:var(--text)}
@media(max-width:600px){.mgrid{grid-template-columns:1fr 1fr}.message{max-width:86%}}

/* NOTIFICACIONES */
.notif-btn{position:relative;width:32px;height:32px;background:transparent;border:1px solid var(--border);border-radius:var(--rs);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all .15s;flex-shrink:0}
.notif-btn:hover{border-color:var(--border2);color:var(--text);background:var(--surface2)}
.notif-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.nb{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;background:var(--accent);border-radius:8px;font-size:9px;font-weight:700;color:white;display:none;align-items:center;justify-content:center;padding:0 3px;border:2px solid var(--bg);line-height:1}
.np-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50;opacity:0;pointer-events:none;transition:opacity .2s}
.np-overlay.show{opacity:1;pointer-events:auto}
.np{position:fixed;top:0;right:0;bottom:0;width:360px;max-width:100vw;background:var(--surface);border-left:1px solid var(--border);z-index:51;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s cubic-bezier(.4,0,.2,1)}
.np.show{transform:translateX(0)}
.np-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0}
.np-title{font-size:14px;font-weight:600;flex:1}
.np-mark{padding:4px 10px;background:transparent;border:1px solid var(--border);border-radius:var(--rs);color:var(--text-muted);font-size:11px;font-weight:500;cursor:pointer;font-family:var(--font);transition:all .15s}
.np-mark:hover{border-color:var(--border2);color:var(--text)}
.np-close{width:28px;height:28px;background:transparent;border:none;cursor:pointer;color:var(--text-muted);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-xs);transition:all .15s}
.np-close:hover{background:var(--surface2);color:var(--text)}
.np-list{flex:1;overflow-y:auto;padding:10px}
.np-list::-webkit-scrollbar{width:3px}
.np-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.np-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:60px 20px;color:var(--text-muted);text-align:center}
.ni-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;margin-bottom:8px;transition:border-color .15s;position:relative;box-shadow:var(--shadow-xs)}
.ni-card:hover{border-color:var(--border2)}
.ni-card.unread{border-left:3px solid var(--accent)}
.ni-card.unread::after{content:'';position:absolute;top:12px;right:36px;width:6px;height:6px;background:var(--accent);border-radius:50%}
.ni-card-head{display:flex;align-items:flex-start;gap:8px;cursor:pointer}
.ni-card-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;margin-left:auto}
.ni-del-btn{width:22px;height:22px;background:transparent;border:1px solid var(--border);border-radius:var(--radius-xs);cursor:pointer;color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-size:12px;transition:all .15s;flex-shrink:0}
.ni-del-btn:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-dim)}
.ni-save-btn{padding:2px 8px;background:var(--green-dim);border:1px solid rgba(22,163,74,.3);border-radius:var(--radius-xs);cursor:pointer;color:var(--green);font-size:10px;font-weight:600;font-family:var(--font);transition:all .15s;white-space:nowrap}
.ni-save-btn:hover{background:rgba(22,163,74,.15)}
.ni-type{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;padding:2px 8px;border-radius:var(--radius-md);margin-bottom:4px}
.ni-type.reporte{background:var(--info-dim);color:var(--info);border:1px solid rgba(59,130,246,.2)}
.ni-type.alerta{background:var(--warning-dim);color:var(--warning);border:1px solid rgba(224,142,0,.2)}
.ni-type.calendario{background:var(--green-dim);color:var(--green);border:1px solid rgba(22,163,74,.2)}
.ni-type.general{background:var(--accent-dim);color:var(--accent);border:1px solid rgba(255,90,54,.2)}
.ni-name{font-size:13px;font-weight:600;margin-bottom:2px;line-height:1.3}
.ni-ts{font-size:10px;color:var(--text-dim);font-family:var(--mono)}
.ni-preview{font-size:12px;color:var(--text-muted);margin-top:8px;line-height:1.6;background:var(--surface3);border-radius:var(--rs);padding:8px 10px;border:1px solid var(--border);white-space:pre-wrap;word-break:break-word;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.ni-preview.expanded{-webkit-line-clamp:unset}
.nm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;opacity:0;pointer-events:none;transition:opacity .2s}
.nm-overlay.show{opacity:1;pointer-events:auto}
.nm{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-lg);width:100%;max-width:620px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-lg)}
.nm-head{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:12px;flex-shrink:0}
.nm-info{flex:1}
.nm-name{font-size:15px;font-weight:600;margin-bottom:4px}
.nm-ts{font-size:11px;color:var(--text-muted);font-family:var(--mono)}
.nm-close{width:30px;height:30px;background:transparent;border:none;cursor:pointer;color:var(--text-muted);display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .15s;flex-shrink:0}
.nm-close:hover{background:var(--surface2);color:var(--text)}
.nm-body{flex:1;overflow-y:auto;padding:20px;font-size:13px;line-height:1.7}
.nm-body::-webkit-scrollbar{width:3px}
.nm-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.nm-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:8px;flex-shrink:0}

@keyframes novaBreathe{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.14)}}
#nova-splash{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:var(--bg);opacity:0;pointer-events:none;cursor:pointer}
#nova-splash.show{opacity:1;pointer-events:auto}
#nova-splash .glow{position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(255,90,54,.42) 0%,rgba(255,90,54,0) 68%);filter:blur(6px);animation:novaBreathe 2.4s ease-in-out infinite}
#nova-splash .wm{position:relative;display:flex;align-items:flex-end;font-family:var(--font);font-size:64px;font-weight:800;letter-spacing:-.04em;color:var(--text)}
#nova-splash .wm .dot{width:11px;height:11px;border-radius:50%;background:var(--accent);margin:0 0 12px 6px;box-shadow:0 0 14px var(--accent);opacity:0;transform:scale(0);transition:opacity .35s ease,transform .35s ease;transition-delay:.3s}
#nova-splash.show .wm .dot{opacity:1;transform:scale(1)}