/*
 * Neutra — la piel del BoilerPlate de Lin-ia, en CSS plano (sin Tailwind) para esta demo.
 * Tokens copiados de BoilerPlate/packages/ui/src/tokens.css (claro y «Obsidiana» oscuro);
 * medidas de componentes de Button, Input, Badge, Table, Modal y Sidebar. Fuente Geist en local.
 */
@font-face { font-family:"Geist"; font-weight:400; font-display:swap; src:url(fuentes/geist-latin-400-normal.woff2) format("woff2") }
@font-face { font-family:"Geist"; font-weight:500; font-display:swap; src:url(fuentes/geist-latin-500-normal.woff2) format("woff2") }
@font-face { font-family:"Geist"; font-weight:600; font-display:swap; src:url(fuentes/geist-latin-600-normal.woff2) format("woff2") }
@font-face { font-family:"Geist"; font-weight:700; font-display:swap; src:url(fuentes/geist-latin-700-normal.woff2) format("woff2") }
@font-face { font-family:"Geist Mono"; font-weight:400; font-display:swap; src:url(fuentes/geist-mono-latin-400-normal.woff2) format("woff2") }
@font-face { font-family:"Geist Mono"; font-weight:500; font-display:swap; src:url(fuentes/geist-mono-latin-500-normal.woff2) format("woff2") }

:root {
  --canvas:#eceef2; --surface:#fff; --surface-2:#f1f3f6; --input:#fff; --border:#dde1e7; --border-strong:#92959b; --border-control:#87898d;
  --row-hover:color-mix(in srgb,var(--accent) 6%,transparent); --row-selected:color-mix(in srgb,var(--accent) 10%,transparent);
  --tint-head:color-mix(in srgb,var(--accent) 6%,var(--surface)); --tint-section:color-mix(in srgb,var(--accent) 3%,var(--surface-2));
  --backdrop:rgba(15,20,35,.45);
  --text-primary:#09090b; --text-sec:#52525b; --text-ter:#6b6b74;
  --ink:#18181b; --ink-fg:#fafafa;
  --accent:#3355ff; --accent-fg:#fff; --accent-text:#2a45d6; --accent-soft:color-mix(in srgb,var(--accent) 8%,transparent); --ring:color-mix(in srgb,var(--accent) 16%,transparent);
  --ok-soft:#e7f6ec; --ok-text:#147c3b; --warn-soft:#fdf3dc; --warn-text:#9f5b07; --bad-soft:#fdecec; --bad-text:#c8261e; --bad-solid:#d34247;
  --info-soft:#eaeeff; --info-text:#2a45d6; --neutral-soft:#edeff3; --neutral-text:#52525b;
  --bad-line:color-mix(in srgb,var(--bad-text) 40%,transparent);
  --sidebar-bg:#12141a; --sidebar-text:#b4bac4; --sidebar-strong:#fff; --sidebar-muted:#828995; --sidebar-line:rgba(255,255,255,.07); --sidebar-soft:rgba(255,255,255,.06);
  --sidebar-active:#3355ff; --sidebar-active-fg:#fff; --sidebar-active-text:#5470ff; --sidebar-track:rgba(255,255,255,.33);
  --c2:#008e7f; --c2-soft:#e3f4f2; --c2-text:#0b6e63; --c3:#cf7100; --c3-soft:#fdf1e0; --c3-text:#8f4c06; --c4-soft:#f8ebf5; --c4-text:#982284; --c1-soft:#eaeeff; --c1-text:#2a45d6;
  --ai:#006464; --ai-fg:#fff; --ai-soft:#e6f0f0; --ai-text:#004552;
  --elev-xs:0 1px 2px rgba(16,24,40,.07); --elev-card:0 1px 2px rgba(16,24,40,.05),0 2px 6px rgba(16,24,40,.04);
  --elev-pop:0 16px 40px rgba(9,9,11,.14),0 2px 6px rgba(9,9,11,.06),0 0 0 1px rgba(9,9,11,.05);
  --elev-primary:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(9,9,11,.18);
  --font-sans:"Geist",system-ui,sans-serif; --font-mono:"Geist Mono",ui-monospace,monospace;
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:14px; --r-2xl:18px;
  color-scheme:light;
}
html.dark {
  --canvas:#09090b; --surface:#111113; --surface-2:#19191c; --input:#0c0c0e; --border:#26262a; --border-strong:#606065; --border-control:#606063;
  --row-selected:color-mix(in srgb,var(--accent) 15%,transparent); --row-hover:color-mix(in srgb,var(--accent) 9%,transparent);
  --tint-head:color-mix(in srgb,var(--accent) 10%,var(--surface)); --tint-section:color-mix(in srgb,var(--accent) 6%,var(--surface-2));
  --backdrop:rgba(0,0,0,.6); --text-primary:#fafafa; --text-sec:#a1a1aa; --text-ter:#8b8b94;
  --ink:#fafafa; --ink-fg:#09090b;
  --accent:#6f8bff; --accent-fg:#09090b; --accent-text:#8fa4ff; --accent-soft:color-mix(in srgb,var(--accent) 12%,transparent); --ring:color-mix(in srgb,var(--accent) 22%,transparent);
  --ok-soft:rgba(74,222,128,.12); --ok-text:#4ade80; --warn-soft:rgba(251,191,36,.12); --warn-text:#fbbf24; --bad-soft:rgba(248,113,113,.12); --bad-text:#f87171;
  --info-soft:rgba(111,139,255,.14); --info-text:#8fa4ff; --neutral-soft:#19191c; --neutral-text:#a1a1aa;
  --sidebar-bg:#131317; --sidebar-text:#a1a1aa; --sidebar-strong:#fafafa; --sidebar-muted:#87878f; --sidebar-line:rgba(255,255,255,.06); --sidebar-soft:rgba(255,255,255,.05);
  --sidebar-active:#6f8bff; --sidebar-active-fg:#09090b; --sidebar-active-text:#6f8bff;
  --c2-soft:rgba(45,212,191,.12); --c2-text:#5eead4; --c3-soft:rgba(251,191,36,.12); --c3-text:#fbbf24; --c4-soft:rgba(232,121,249,.12); --c4-text:#f0abfc; --c1-soft:rgba(111,139,255,.14); --c1-text:#a5b6ff;
  --ai:#3fb8b8; --ai-fg:#04292b; --ai-soft:rgba(63,184,184,.13); --ai-text:#7fd6d6;
  --elev-pop:0 16px 40px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);
  color-scheme:dark;
}

* { box-sizing:border-box }
html, body { height:100% }
body { margin:0; font:14px/1.55 var(--font-sans); color:var(--text-primary); background:var(--canvas); -webkit-font-smoothing:antialiased }
button, input, select, textarea { font:inherit; color:inherit }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
svg.i { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
svg.i.m { width:18px; height:18px } svg.i.g { width:20px; height:20px } svg.i.xl { width:28px; height:28px }
.micro { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; line-height:1.2 }
.mono { font-family:var(--font-mono) }

/* ───────── Armazón: barra lateral grafito + contenido ───────── */
.shell { display:flex; height:100dvh; overflow:hidden }
.side { width:248px; flex:none; background:var(--sidebar-bg); color:var(--sidebar-text); display:flex; flex-direction:column; padding:14px 10px 12px; gap:6px }
.marca { display:flex; align-items:center; gap:10px; padding:4px 8px 14px }
.marca .sim { width:32px; height:32px; border-radius:10px; background:var(--sidebar-active); color:var(--sidebar-active-fg); display:grid; place-items:center; flex:none }
.marca .sim svg { width:18px; height:18px; fill:currentColor }
.marca b { display:block; font-size:16px; font-weight:700; line-height:1.15; letter-spacing:-.01em; color:var(--sidebar-strong) }
.marca small { display:block; font-size:12px; color:var(--sidebar-muted) }
.side .seccion { padding:10px 10px 4px; color:var(--sidebar-muted) }
.side nav { display:flex; flex-direction:column; gap:2px; flex:1; overflow:auto }
.fila-menu { display:flex; align-items:center; gap:10px; width:100%; min-height:36px; padding:0 10px; border:0; border-radius:9px; background:transparent; color:var(--sidebar-text); font-weight:500; font-size:14px; text-align:left; cursor:pointer; transition:background .15s }
.fila-menu svg { color:var(--sidebar-muted) }
.fila-menu:hover { background:var(--sidebar-soft) }
.fila-menu.act { background:var(--sidebar-active); color:var(--sidebar-active-fg); font-weight:600; box-shadow:inset 0 1px 0 rgb(255 255 255/.18),0 2px 8px color-mix(in srgb,var(--sidebar-active) 35%,transparent) }
.fila-menu.act svg { color:var(--sidebar-active-fg) }
.fila-menu .cont { margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:99px; background:var(--sidebar-soft); color:var(--sidebar-text); font-size:11px; font-weight:700; display:grid; place-items:center; font-variant-numeric:tabular-nums }
.fila-menu .cont.alerta { background:var(--bad-solid); color:#fff }
.fila-menu.act .cont { background:rgba(255,255,255,.22); color:inherit }
.agente { margin:6px 2px 4px; padding:12px; border:1px solid var(--sidebar-line); border-radius:12px; background:var(--sidebar-soft) }
.agente .t { display:flex; align-items:center; gap:8px; color:var(--sidebar-strong); font-weight:600; font-size:13px }
.agente .t svg { color:#5fd0d0 }
.agente p { margin:6px 0 0; font-size:12px; color:var(--sidebar-text) }
.pie-lateral { display:flex; gap:6px; align-items:center; padding:6px 4px 0; border-top:1px solid var(--sidebar-line); margin-top:4px; color:var(--sidebar-muted); font-size:12px }
.pie-lateral .esp { flex:1 }
.pie-lateral button { display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:8px; background:transparent; color:var(--sidebar-text); cursor:pointer }
.pie-lateral button:hover { background:var(--sidebar-soft) }
.punto { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--sidebar-muted); margin-right:6px; flex:none }
.punto.on { background:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,.18) }
.demo { background:#facc15; color:#3b2f00; font-weight:700; font-size:10.5px; letter-spacing:.08em; padding:2px 8px; border-radius:99px; margin-left:auto }

.contenido { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden }
.pagina { flex:1; min-height:0; overflow:auto; padding:24px 28px 32px }
.pagina.chatpag { overflow:hidden; display:flex; flex-direction:column; padding:20px 24px 24px }
.cab-pagina { display:flex; align-items:flex-end; gap:12px; margin-bottom:18px; flex-wrap:wrap }
.cab-pagina h1 { margin:0; font-size:20px; font-weight:700; letter-spacing:-.01em; line-height:1.3 }
.cab-pagina p { margin:2px 0 0; color:var(--text-sec); font-size:13px }
.cab-pagina .esp, .barra .esp { flex:1 }
.barra { display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap }
.movil-cab, .barra-inf { display:none }

/* ───────── Botones, campos, etiquetas ───────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:36px; padding:0 14px; border:0; border-radius:var(--r-md); background:var(--accent); color:var(--accent-fg); font-weight:600; font-size:14px; cursor:pointer; box-shadow:var(--elev-primary); transition:background .15s,transform .1s; white-space:nowrap }
.btn:hover { background:color-mix(in srgb,var(--accent) 90%,transparent) }
.btn:active { transform:scale(.97) }
.btn.sec { background:var(--surface); color:var(--text-primary); font-weight:500; border:1px solid var(--border-control); box-shadow:var(--elev-xs) }
.btn.sec:hover { background:var(--surface-2); border-color:var(--border-strong) }
.btn.ghost { background:transparent; box-shadow:none; color:var(--text-sec); font-weight:500 }
.btn.ghost:hover { background:var(--accent-soft); color:var(--accent-text) }
.btn.peligro { background:transparent; color:var(--bad-text); border:1px solid var(--bad-line); box-shadow:none }
.btn.peligro:hover { background:var(--bad-soft); border-color:var(--bad-text) }
.btn.ia { background:var(--ai); color:var(--ai-fg); box-shadow:var(--elev-primary) }
.btn.sm { height:30px; padding:0 12px; font-size:12.5px; border-radius:var(--r-sm) }
.btn.cuadro { width:36px; padding:0 } .btn.cuadro.sm { width:30px }
.btn:disabled { cursor:not-allowed; background:var(--surface-2); color:var(--text-ter); box-shadow:none; border:1px solid var(--border); transform:none }

label { display:block; font-size:12.5px; font-weight:500; color:var(--text-sec); margin:12px 0 4px }
input, select, textarea { width:100%; height:36px; padding:0 12px; border:1px solid var(--border-control); border-radius:var(--r-md); background:var(--input); color:var(--text-primary); font-size:14px; outline:none; transition:border-color .15s,box-shadow .15s }
input::placeholder, textarea::placeholder { color:var(--text-ter) }
input:focus, select:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--ring) }
input:disabled, select:disabled, textarea:disabled { background:var(--surface-2); color:var(--text-ter); border-color:var(--border); cursor:not-allowed }
textarea { height:auto; min-height:72px; padding:8px 12px; resize:vertical; line-height:1.5 }
select { appearance:none; padding-right:30px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 9px center }
input[type=checkbox] { width:16px; height:16px; padding:0; accent-color:var(--accent); cursor:pointer }
input[type=file] { height:auto; padding:4px; font-size:13px; color:var(--text-sec) }
input[type=file]::file-selector-button { height:28px; margin-right:10px; padding:0 12px; border:1px solid var(--border-control); border-radius:var(--r-sm); background:var(--surface); color:var(--text-primary); font:500 12.5px var(--font-sans); cursor:pointer; box-shadow:var(--elev-xs) }
input[type=file]::file-selector-button:hover { background:var(--surface-2) }
.falta { border-color:var(--bad-text) !important; background:var(--bad-soft) !important }
.error { color:var(--bad-text); font-size:13px; font-weight:500 }
.nota { font-size:12.5px; color:var(--text-ter); margin-top:4px }

.etq { display:inline-flex; align-items:center; gap:5px; border-radius:var(--r-xs); padding:2px 8px; font-size:12px; font-weight:600; white-space:nowrap; background:var(--neutral-soft); color:var(--neutral-text) }
.etq.borrador, .etq.supervisado, .etq.aviso-e { background:var(--warn-soft); color:var(--warn-text) }
.etq.confirmado, .etq.automatico, .etq.verde { background:var(--ok-soft); color:var(--ok-text) }
.etq.duda, .etq.bloqueado { background:var(--bad-soft); color:var(--bad-text) }
.etq.info, .etq.operador { background:var(--info-soft); color:var(--info-text) }
.etq.ia, .etq.auto { background:var(--ai-soft); color:var(--ai-text) }
.etq.tipo { background:var(--c4-soft); color:var(--c4-text) }

.tarjeta-ui, .tabla-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--elev-card) }
.tabla-wrap { overflow:hidden }
table { border-collapse:collapse; width:100% }
th { background:var(--tint-head); color:var(--text-sec); text-align:left; padding:10px 14px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; border-bottom:2px solid color-mix(in srgb,var(--border-strong) 40%,transparent); white-space:nowrap }
td { padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:top; font-size:14px }
tbody tr:last-child td { border-bottom:0 }
tbody tr.fila { cursor:pointer } tbody tr.fila:hover { background:var(--row-hover) }
.vacio { padding:44px 20px; text-align:center; color:var(--text-sec); background:var(--surface); border:1px dashed var(--border-control); border-radius:var(--r-lg) }
.vacio svg { color:var(--text-ter); margin-bottom:6px }

.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:16px }
.tabs button { background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; padding:9px 14px; font-weight:500; color:var(--text-sec); cursor:pointer; font-size:14px }
.tabs button:hover { color:var(--text-primary) }
.tabs button.act { color:var(--accent-text); border-bottom-color:var(--accent); font-weight:600 }
.tabs + .barra { margin-top:-4px }

/* Catálogo */
.rejilla { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px }
.tarjeta { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--elev-card); overflow:hidden; cursor:pointer; transition:box-shadow .24s,border-color .24s,transform .24s }
.tarjeta:hover { border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); box-shadow:0 6px 18px rgba(16,24,40,.1); transform:translateY(-1px) }
.tarjeta img { width:100%; height:150px; object-fit:cover; display:block; background:var(--surface-2) }
.tarjeta .c { padding:12px 14px 14px }
.tarjeta .ref { font-size:12px; color:var(--text-ter); font-family:var(--font-mono) }
.tarjeta .nom { font-weight:600; margin-top:1px }
.tarjeta .meta { color:var(--text-sec); font-size:12.5px; margin-top:4px }
.chips { display:flex; gap:4px; flex-wrap:wrap; margin-top:8px }
.chip { background:var(--surface-2); border:1px solid var(--border); border-radius:99px; padding:0 8px; font-size:11.5px; color:var(--text-sec) }

/* ───────── Modales (nunca paneles laterales) ───────── */
dialog { border:0; padding:0; background:var(--surface); color:var(--text-primary); border-radius:var(--r-2xl); box-shadow:var(--elev-pop); width:calc(100vw - 32px); max-height:90vh; overflow:hidden; margin:auto }
dialog[open] { display:flex; flex-direction:column; animation:entra .18s ease-out }
dialog::backdrop { background:var(--backdrop); backdrop-filter:blur(2px) }
dialog.xs { max-width:400px } dialog.sm { max-width:480px } dialog.md { max-width:560px } dialog.lg { max-width:720px } dialog.xl { max-width:900px } dialog.auto { width:auto; max-width:96vw; background:transparent; box-shadow:none }
@keyframes entra { from { opacity:0; transform:translateY(8px) scale(.985) } to { opacity:1; transform:none } }
.m-cab { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border); background:linear-gradient(to bottom,var(--tint-head),var(--surface)); flex:none }
.m-cab .ico { width:40px; height:40px; border-radius:12px; background:var(--accent); color:var(--accent-fg); display:grid; place-items:center; flex:none }
.m-cab .ico.ia { background:var(--ai); color:var(--ai-fg) }
.m-cab h3 { margin:0; font-size:17px; font-weight:700; line-height:1.3; letter-spacing:-.01em }
.m-cab .sub { color:var(--text-sec); font-size:12.5px }
.m-cab .tit { flex:1; min-width:0 } .m-cab .ex { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:3px }
.m-cab .x { width:36px; height:36px; border:0; border-radius:var(--r-md); background:var(--surface-2); color:var(--text-ter); display:grid; place-items:center; cursor:pointer; flex:none }
.m-cab .x:hover { background:var(--border); color:var(--text-primary) }
.mc { padding:18px 20px; overflow:auto; flex:1; min-height:0; outline:none }
.pie { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:14px 20px; border-top:1px solid var(--border); background:var(--surface-2); flex:none }
.pie .esp { flex:1 } .pie .error { max-width:520px }
.fila2 { display:grid; grid-template-columns:1fr 1fr; gap:12px } .fila3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px } .fila4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px }
.fila2 label:first-child, .fila3 label:first-child, .fila4 label:first-child { margin-top:12px }
.checks { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:4px } .checks label { display:flex; gap:7px; align-items:center; margin:0; font-size:13.5px; color:var(--text-primary); font-weight:400 }
.check1 { display:flex !important; gap:8px; align-items:center; color:var(--text-primary) !important; font-weight:400 !important; height:36px; margin:0 !important }
.sec-form { margin:18px 0 4px; padding:8px 12px; border-radius:var(--r-md); background:var(--tint-section); border-left:3px solid var(--accent); color:var(--text-sec) }
.foto-prod { width:100%; height:190px; object-fit:cover; border-radius:var(--r-lg); background:var(--surface-2); display:block; margin-bottom:6px }
pre.json { background:#0d0f14; color:#d6e2ee; padding:14px; border-radius:var(--r-md); overflow:auto; max-height:60vh; font:12.5px/1.55 var(--font-mono); margin:10px 0 0 }

/* Pedido */
.aviso { display:flex; gap:10px; background:var(--warn-soft); color:var(--warn-text); padding:10px 12px; font-size:13px; border-radius:var(--r-md); margin-bottom:10px }
.aviso svg { margin-top:2px } .aviso > div { flex:1 }
.aviso.rojo { background:var(--bad-soft); color:var(--bad-text) } .aviso.verde { background:var(--ok-soft); color:var(--ok-text) } .aviso.ia { background:var(--ai-soft); color:var(--ai-text) }
.aviso ul { margin:4px 0 0; padding-left:18px }
.lcard { border:1px solid var(--border); border-radius:var(--r-lg); padding:12px 14px; margin-bottom:12px; background:var(--surface); box-shadow:var(--elev-xs) }
.lcard .cab2 { display:grid; grid-template-columns:2.2fr 1fr 1fr .7fr auto; gap:10px; align-items:end }
.lcard label { margin:8px 0 3px }
.lcard .attr { display:grid; grid-template-columns:repeat(4,1fr); gap:0 10px }
.lcard .meta2 { color:var(--text-ter); font-size:12px; margin-top:10px }
.dudas { margin-top:6px; color:var(--bad-text); font-size:12.5px }
.conf-baja { color:var(--bad-text); font-weight:600 }

/* ───────── Chat: lista + conversación, con el «agente vivo» ───────── */
.chatwrap { flex:1; min-height:0; display:flex; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--elev-card); overflow:hidden }
.chats { width:330px; flex:none; border-right:1px solid var(--border); display:flex; flex-direction:column; min-height:0 }
.chats .top { padding:12px 14px; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:10px; background:var(--tint-head) }
.chats .top b { font-weight:600 }
.chats .top .acc2 { display:flex; gap:8px } .chats .top .acc2 .btn:first-child { flex:1 }
.chats .lista { overflow:auto; flex:1 }
.chatitem { display:flex; gap:10px; padding:11px 14px; border-bottom:1px solid var(--border); cursor:pointer; position:relative }
.chatitem:hover { background:var(--row-hover) } .chatitem.act { background:var(--row-selected) }
.chatitem.act::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent) }
.avatar { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:13px; flex:none; background:var(--c1-soft); color:var(--c1-text); position:relative }
.avatar.g { background:var(--c2-soft); color:var(--c2-text) } .avatar.p { background:var(--c3-soft); color:var(--c3-text) } .avatar.s { background:var(--c4-soft); color:var(--c4-text) }
.avatar .viv { position:absolute; right:-2px; bottom:-2px; width:16px; height:16px; border-radius:50%; background:var(--ai); color:var(--ai-fg); display:grid; place-items:center; border:2px solid var(--surface) }
.avatar .viv svg { width:9px; height:9px }
.chatitem .cu { flex:1; min-width:0 }
.chatitem .t { display:flex; gap:6px; align-items:center } .chatitem .t b { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600 }
.chatitem .hr { font-size:11px; color:var(--text-ter) }
.chatitem .u { color:var(--text-sec); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px }
.chatitem .est { display:flex; gap:5px; margin-top:5px; flex-wrap:wrap }
.leyendo { display:inline-flex; align-items:center; gap:5px; color:var(--ai-text); background:var(--ai-soft); border-radius:var(--r-xs); padding:1px 7px; font-size:11.5px; font-weight:600 }
.leyendo svg { animation:pulso 1.2s ease-in-out infinite }
@keyframes pulso { 0%,100% { opacity:.45; transform:scale(.85) } 50% { opacity:1; transform:scale(1.1) } }
.puntos::after { content:""; animation:puntos 1.4s steps(4,end) infinite }
@keyframes puntos { 0% { content:"" } 25% { content:"." } 50% { content:".." } 75%,100% { content:"..." } }

.conv { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--surface-2) }
.conv .cab { background:var(--surface); padding:10px 16px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--border); flex-wrap:wrap }
.conv .cab .quien { min-width:0 } .conv .cab .quien b { display:block; font-size:15px; font-weight:600; line-height:1.25 }
.conv .cab .quien span { font-size:12.5px; color:var(--text-sec) }
.conv .cab .esp { flex:1 }
.seg { display:inline-flex; padding:3px; border:1px solid var(--border-control); border-radius:var(--r-md); background:var(--surface-2); gap:2px }
.seg button { display:inline-flex; align-items:center; gap:6px; border:0; background:none; padding:0 12px; height:28px; border-radius:7px; cursor:pointer; font-weight:500; font-size:13px; color:var(--text-sec) }
.seg button.act.auto { background:var(--ai); color:var(--ai-fg); font-weight:600 } .seg button.act.operador { background:var(--accent); color:var(--accent-fg); font-weight:600 }
.franja { display:flex; align-items:center; gap:10px; padding:8px 16px; font-size:13px; border-bottom:1px solid var(--border); flex-wrap:wrap }
.franja.ia { background:var(--ai-soft); color:var(--ai-text) } .franja.atencion { background:var(--warn-soft); color:var(--warn-text) } .franja.info { background:var(--info-soft); color:var(--info-text) }
.franja b { font-weight:600 } .franja .esp { flex:1 } .franja svg.i { animation:none }
.franja.ia svg.vivo { animation:pulso 1.2s ease-in-out infinite }
.msgs { flex:1; overflow:auto; padding:18px 6%; display:flex; flex-direction:column; gap:8px; min-height:0 }
.b { max-width:min(560px,82%); padding:8px 12px 5px; border-radius:var(--r-lg); border:1px solid var(--border); background:var(--surface); box-shadow:var(--elev-xs); word-wrap:break-word; white-space:pre-wrap; font-size:14px }
.b.in { align-self:flex-start; border-top-left-radius:4px }
.b.out { align-self:flex-end; border-top-right-radius:4px; background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 22%,var(--border)) }
.b.out.ia { background:var(--ai-soft); border-color:color-mix(in srgb,var(--ai) 28%,var(--border)) }
.b.sis { align-self:center; background:var(--warn-soft); color:var(--warn-text); border-color:transparent; font-size:12.5px; box-shadow:none; border-radius:var(--r-md) }
.b .au { display:flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--c2-text); margin-bottom:1px }
.b .au.ia { color:var(--ai-text) } .b .au.op { color:var(--accent-text) }
.b .h { font-size:11px; color:var(--text-ter); text-align:right; margin-top:2px }
.b img.med { max-width:100%; max-height:300px; border-radius:var(--r-sm); display:block; cursor:zoom-in; margin:3px 0 }
.b video, .b audio { max-width:100%; display:block; margin:3px 0 }
.b .doc { display:flex; align-items:center; gap:8px; padding:9px 11px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm); margin:3px 0; text-decoration:none; color:inherit; font-weight:500 }
.b .acc { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap }
.b .acc button { display:inline-flex; align-items:center; gap:5px; height:26px; font-size:12px; font-weight:500; border:1px solid var(--border-control); background:var(--surface); border-radius:var(--r-sm); padding:0 9px; cursor:pointer }
.b .acc button:hover { background:var(--surface-2) }
.comp { background:var(--surface); padding:10px 14px 12px; display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--border) }
.comp .f { display:flex; gap:8px; align-items:center }
.comp input[type=file] { width:auto; flex:none; max-width:300px }
.comp .sim { border:1px dashed var(--border-control); border-radius:var(--r-md); padding:8px 10px; background:var(--tint-section) }
.comp .sim summary { color:var(--text-sec); font-weight:500; font-size:12.5px; display:flex; gap:6px; align-items:center; cursor:pointer; list-style:none }
.comp .sim summary::-webkit-details-marker { display:none }
.sinchat { flex:1; display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; color:var(--text-ter) }
.volver { display:none }
.toasts { position:fixed; inset:auto 18px 18px auto; margin:0; padding:0; border:0; background:none; overflow:visible; color:inherit; width:auto; height:auto; flex-direction:column; gap:8px }
.toasts:popover-open { display:flex }
.toast { background:var(--ink); color:var(--ink-fg); padding:10px 14px; border-radius:var(--r-md); box-shadow:var(--elev-pop); font-size:13.5px; max-width:380px; animation:entra .18s ease-out; display:flex; gap:8px; align-items:center }
.toast.mal { background:var(--bad-solid); color:#fff }
.lista-aut { margin-top:14px; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden }
.lista-aut .it { display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--border) } .lista-aut .it:last-child { border-bottom:0 }
.lista-aut .it b { flex:1 }

@media (max-width:800px) {
  .shell { flex-direction:column }
  .side { display:none }
  .movil-cab { display:flex; align-items:center; gap:10px; background:var(--sidebar-bg); color:var(--sidebar-strong); padding:10px 14px; flex:none }
  .movil-cab .sim { width:28px; height:28px; border-radius:9px; background:var(--sidebar-active); color:var(--sidebar-active-fg); display:grid; place-items:center }
  .movil-cab .sim svg { width:16px; height:16px; fill:currentColor }
  .movil-cab .tema-movil { display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:8px; background:transparent; color:var(--sidebar-text) }
  .movil-cab b { font-weight:700 } .movil-cab .estado { margin-left:auto; font-size:12px; color:var(--sidebar-text); display:flex; align-items:center }
  .barra-inf { display:flex; background:var(--sidebar-bg); border-top:1px solid var(--sidebar-line); flex:none; padding-bottom:env(safe-area-inset-bottom) }
  .barra-inf button { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 0 7px; border:0; background:none; color:var(--sidebar-text); font-size:11px; font-weight:500; cursor:pointer; position:relative }
  .barra-inf button.act { color:var(--sidebar-active-text) } .barra-inf button svg { width:20px; height:20px }
  .barra-inf .cont { position:absolute; top:3px; left:calc(50% + 6px); min-width:16px; height:16px; border-radius:99px; background:var(--bad-solid); color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center; padding:0 4px }
  .pagina { padding:14px 12px 20px } .pagina.chatpag { padding:0 }
  .chatwrap { border:0; border-radius:0; box-shadow:none }
  .chats { width:100%; border-right:0 } .conv { display:none }
  .chatpag.abierto .chats { display:none } .chatpag.abierto .conv { display:flex }
  .volver { display:inline-flex }
  .conv .cab .quien span { display:none }
  .conv .cab { padding:8px 10px; gap:8px; flex-wrap:nowrap }
  .conv .cab .avatar, .conv .cab .esp, .conv .cab > .btn.sm:last-child { display:none }
  .conv .cab .quien { flex:1; min-width:0 } .conv .cab .quien b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px }
  .seg button { padding:0 9px; font-size:12.5px } .seg button svg { display:none }
  .franja { padding:6px 10px; font-size:12.5px; gap:8px; flex-wrap:nowrap } .franja .det { display:none }
  .comp { padding:8px 10px 10px }
  .msgs { padding:12px 10px } .b { max-width:90% }
  .comp .sim .f { flex-wrap:wrap } .comp input[type=file] { max-width:100% }
  .rejilla { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) } .tarjeta img { height:110px }
  .tabla-wrap { overflow-x:auto }
  dialog { width:100vw; max-width:100vw !important; height:100dvh; max-height:100dvh; border-radius:0 }
  .fila2, .fila3, .fila4, .lcard .attr, .lcard .cab2 { grid-template-columns:1fr 1fr }
  .mc { padding:14px }
  .toasts { inset:auto 12px 70px 12px }
}
@media (prefers-reduced-motion:reduce) { *, ::before, ::after { animation:none !important; transition:none !important } }

/* ───────── Ampliación: panel, clientes, historial, documentos, alcance ───────── */
[hidden] { display:none !important }
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px }
.kpi { display:flex; gap:14px; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--elev-card); padding:16px 18px }
.kpi .k-ico { width:44px; height:44px; border-radius:12px; background:var(--accent-soft); color:var(--accent-text); display:grid; place-items:center; flex:none }
.kpi.ok .k-ico { background:var(--ok-soft); color:var(--ok-text) } .kpi.warn .k-ico { background:var(--warn-soft); color:var(--warn-text) } .kpi.ia .k-ico { background:var(--ai-soft); color:var(--ai-text) }
.k-val { font-size:26px; font-weight:700; line-height:1.1; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.k-et { font-size:13px; font-weight:500; color:var(--text-sec); margin-top:2px } .k-sub { font-size:12px; color:var(--text-ter) }
.kpis.tres { grid-template-columns:repeat(3,1fr) }
.panel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.panel-card { padding:16px 18px; margin-bottom:14px } .panel-grid .panel-card { margin-bottom:0 }
.panel-card h3 { display:flex; align-items:center; gap:8px; margin:0 0 12px; font-size:14px; font-weight:600 } .panel-card h3 svg { color:var(--text-ter) }
.barra-h { display:grid; grid-template-columns:96px 1fr 30px; gap:10px; align-items:center; margin:9px 0; font-size:13px }
.barra-h .bt { height:10px; background:var(--surface-2); border-radius:99px; overflow:hidden } .barra-h .bf { display:block; height:100%; border-radius:99px; background:var(--accent); min-width:2px }
.bf.ok { background:var(--ok-text) } .bf.warn { background:var(--c3) } .bf.bad { background:var(--bad-solid) } .bf.info { background:var(--accent) } .bf.neutro { background:var(--border-strong) }
.barra-h b { text-align:right; font-variant-numeric:tabular-nums }
.lista-mini { display:flex; flex-direction:column } .lista-mini > * { display:flex; align-items:center; gap:10px; padding:9px 4px; border:0; border-bottom:1px solid var(--border); background:none; text-align:left; font-size:13.5px; color:var(--text-primary); cursor:default }
.lista-mini > *:last-child { border-bottom:0 } .lista-mini > button { cursor:pointer; width:100% } .lista-mini > button:hover { background:var(--row-hover) }
.lista-mini .fila-m { justify-content:space-between } .lista-mini small { color:var(--text-ter) } .lista-mini .corto { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.lista-mini > button svg:last-child { margin-left:auto; color:var(--text-ter) } .rojo { color:var(--bad-text) }
.der { text-align:right; font-variant-numeric:tabular-nums } td.bajo { color:var(--bad-text); font-weight:600 } .sin { color:var(--text-ter) }
.avatar.m { background:var(--info-soft); color:var(--info-text) }
.chip-cli { max-width:240px; overflow:hidden; text-overflow:ellipsis }
.fila4 .col2 { grid-column:span 2 }
.tabs-m { margin:-4px 0 14px }
.imp { display:flex; gap:10px; align-items:baseline; justify-content:flex-end; margin-top:10px; padding-top:8px; border-top:1px dashed var(--border); font-size:12.5px; color:var(--text-sec) }
.imp b { font-size:15px; color:var(--text-primary); font-variant-numeric:tabular-nums } .imp s { color:var(--text-ter) } .imp .sin { font-style:italic }
.totales { margin:14px 0 4px auto; max-width:340px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--tint-section) }
.tot-f { display:flex; justify-content:space-between; gap:12px; padding:3px 0; font-size:13.5px; font-variant-numeric:tabular-nums } .tot-f.total { margin-top:6px; padding-top:8px; border-top:1px solid var(--border-strong); font-size:16px }
.sin-precio { color:var(--warn-text); font-size:12.5px; margin-bottom:6px }
.timeline { display:flex; flex-direction:column; border-left:2px solid var(--border); margin-left:6px }
.tl-f { display:grid; grid-template-columns:96px 84px 1fr; gap:10px; align-items:start; padding:9px 0 9px 14px; position:relative; font-size:13.5px } .tl-f::before { content:""; position:absolute; left:-6px; top:15px; width:10px; height:10px; border-radius:50%; background:var(--surface); border:2px solid var(--accent) }
.tl-h { color:var(--text-ter); font-size:12px; font-family:var(--font-mono); padding-top:2px } .tl-f .etq { justify-self:start }
.docs-g { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px } .docs-g figure { margin:0; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface-2) }
.docs-g img, .docs-g video { width:100%; height:170px; object-fit:cover; display:block; cursor:zoom-in } .docs-g audio { width:100%; margin:34px 0 } .docs-g figcaption { padding:7px 10px; font-size:12px; color:var(--text-sec); background:var(--surface) }
.doc-a { display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center; height:170px; text-decoration:none; color:var(--accent-text); font-weight:600 }
.chip.adj { display:inline-flex; align-items:center; gap:6px; padding:3px 6px 3px 10px; font-size:12.5px } .chip.adj button { border:0; background:none; width:18px; height:18px; display:grid; place-items:center; cursor:pointer; color:var(--text-ter); border-radius:50%; padding:0 } .chip.adj button:hover { background:var(--border) }
.chip.adj svg { width:14px; height:14px }
.alcance { margin-bottom:14px } .al-cab { display:flex; gap:8px; align-items:center; padding:11px 16px; font-weight:600; background:var(--tint-head); border-bottom:2px solid color-mix(in srgb,var(--border-strong) 40%,transparent) } .al-cab svg { color:var(--accent-text) }
.alcance td { vertical-align:middle } .al-t { font-weight:500; width:38% } .al-e { width:170px } .al-p { color:var(--text-sec); font-size:13px }
.lista-n { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:7px; font-size:13.5px; color:var(--text-sec) } .lista-n b { color:var(--text-primary) }
@media (max-width:1200px) { .panel-grid { grid-template-columns:repeat(2,1fr) } .kpis { grid-template-columns:repeat(2,1fr) } }
@media (max-width:800px) {
  .kpis, .panel-grid { grid-template-columns:1fr } .kpi { padding:12px 14px }
  .chip-cli { display:none } .fila4 .col2 { grid-column:span 2 }
  .tl-f { grid-template-columns:70px 1fr } .tl-f > div { grid-column:1 / -1 } .al-t, .al-e { width:auto } .alcance .al-p, .alcance th:nth-child(3) { display:none } .kpis.tres { grid-template-columns:1fr }
  .barra-inf button { font-size:10px } .tabs { overflow-x:auto; overflow-y:hidden; scrollbar-width:none }
  .tabla-wrap.cli th:nth-child(n+4):not(:nth-child(7)):not(:nth-child(8)), .tabla-wrap.cli td:nth-child(n+4):not(:nth-child(7)):not(:nth-child(8)) { display:none }
  .tabla-wrap.ped th:nth-child(3), .tabla-wrap.ped td:nth-child(3), .tabla-wrap.ped th:nth-child(4), .tabla-wrap.ped td:nth-child(4), .tabla-wrap.ped th:nth-child(5), .tabla-wrap.ped td:nth-child(5), .tabla-wrap.ped th:nth-child(9), .tabla-wrap.ped td:nth-child(9) { display:none }
}
.nowrap { white-space:nowrap }

/* Visualizador: la foto del cliente con el producto puesto (comparador antes/después) */
.viz { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr); gap:16px; align-items:start }
.viz-foto { padding:14px }
.viz-caja { --p:50%; position:relative; border-radius:var(--r-lg); overflow:hidden; background:#000; line-height:0; user-select:none }
.viz-caja img { width:100%; max-height:72vh; object-fit:contain; display:block; background:#111 }
.viz-caja .viz-antes { position:absolute; inset:0; height:100%; clip-path:inset(0 calc(100% - var(--p)) 0 0) }
.viz-asa { position:absolute; top:0; bottom:0; left:var(--p); width:3px; margin-left:-1.5px; background:#fff; box-shadow:0 0 6px rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; pointer-events:none }
.viz-asa svg { background:#fff; color:#333; border-radius:50%; padding:5px; width:30px; height:30px; flex:none }
.viz-et { position:absolute; top:10px; background:rgba(0,0,0,.55); color:#fff; font-size:12px; padding:3px 9px; border-radius:99px; line-height:1.4 }
.viz-et.izq { left:10px } .viz-et.der { right:10px }
.viz-rango { width:100%; margin:10px 0 2px; accent-color:var(--accent) }
.viz-panel h3 { display:flex; align-items:center; gap:8px; margin:0 0 8px; font-size:15px }
.viz-chips { display:flex; flex-wrap:wrap; gap:8px }
.viz-chip { border:1px solid var(--border); background:var(--surface); color:var(--text-primary); border-radius:99px; padding:7px 13px; cursor:pointer; font-size:13.5px }
.viz-chip:hover { border-color:var(--accent) }
.viz-chip.act { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600 }
.viz-ficha { margin-top:14px; padding:12px 14px; border-radius:var(--r-md); background:var(--surface-2, rgba(127,127,127,.08)) }
.viz-como { margin-top:16px; font-size:13.5px } .viz-como ol { margin:6px 0 0; padding-left:20px; color:var(--text-sec) } .viz-como li { margin:3px 0 }
.viz-ejemplo { margin-top:14px; display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:var(--text-sec) } .viz-ejemplo svg { flex:none; margin-top:1px }
@media (max-width: 900px) { .viz { grid-template-columns:1fr } }
.viz-caja { width:fit-content; max-width:100%; margin:0 auto }
.viz-caja img.viz-despues { width:auto; max-width:100%; max-height:70vh }
.viz-caja img.viz-antes { object-fit:fill }

.salir-demo { position:fixed; right:14px; bottom:12px; z-index:50; font-size:12.5px; color:var(--text-sec); background:var(--surface); border:1px solid var(--border); border-radius:99px; padding:5px 12px; text-decoration:none }
.salir-demo:hover { color:var(--text-primary); border-color:var(--accent) }
.login-pag { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:var(--bg, #eef0f5) }
.login-caja { width:100%; max-width:380px; padding:28px 26px }
.login-caja h1 { margin:0 0 4px; font-size:21px } .login-caja p { margin:0 0 18px; color:var(--text-sec); font-size:14px }
.login-caja label { display:block; margin:12px 0 5px; font-size:13px; font-weight:600 }
.login-caja input { width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--border); border-radius:var(--r-md, 10px); font-size:15px; background:var(--surface); color:var(--text-primary) }
.login-caja button { width:100%; margin-top:18px; padding:11px; border:0; border-radius:var(--r-md, 10px); background:var(--accent); color:#fff; font-size:15px; font-weight:600; cursor:pointer }
.login-error { color:#c0392b; font-size:13.5px; margin-top:12px; min-height:18px }