:root{
  --bg:#f4f1ea; --panel:#ffffff; --ink:#1f2430; --mut:#7a828f; --line:#eceae3;
  --bee:#f5b301; --bee2:#f0a500; --ok:#22b07d; --okbg:#e7f6ef; --bad:#e5484d; --badbg:#fdecec;
  --warn:#e8a13a; --warnbg:#fdf3e3; --blue:#3b82f6; --bluebg:#e8f0fe; --purple:#8b5cf6; --purplebg:#f0ebfe;
  --shadow:0 1px 3px rgba(20,20,40,.06),0 1px 2px rgba(20,20,40,.04);
}
*{box-sizing:border-box;} html,body{height:100%;color-scheme:light;}
html{background:#f4f1ea;}
body{margin:0;background:var(--bg);color:var(--ink);font:13.5px/1.5 -apple-system,system-ui,"Segoe UI",Roboto,sans-serif;}
.app{display:grid;grid-template-columns:230px 1fr;height:100vh;}
/* sidebar */
.side{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 14px;}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;padding:6px 8px 18px;}
.logo .b{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--bee),var(--bee2));display:grid;place-items:center;font-size:15px;}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;color:var(--mut);text-decoration:none;font-weight:500;margin-bottom:2px;cursor:pointer;}
.nav a.on{background:#fbf6e6;color:var(--ink);font-weight:600;}
.nav a:hover{background:#f6f4ee;}
.nav .ic{width:17px;text-align:center;opacity:.8;}
.side .prof{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:11px;}
.av{width:30px;height:30px;border-radius:50%;background:#dfe3ea;display:grid;place-items:center;font-size:12px;font-weight:700;color:#6b7280;overflow:hidden;}
/* main */
.main{display:flex;flex-direction:column;min-width:0;}
.top{display:flex;gap:14px;padding:16px 20px;align-items:center;}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:12px 16px;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow);min-width:190px;}
.stat .ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:16px;}
.stat .n{font-size:21px;font-weight:700;line-height:1;}
.stat .l{font-size:12px;color:var(--mut);}
.stat .d{font-size:11px;color:var(--ok);margin-top:2px;}
.live{margin-left:auto;display:flex;align-items:center;gap:7px;color:var(--mut);font-size:12px;}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--okbg);}
.cols{display:grid;grid-template-columns:340px 1fr 360px;gap:14px;padding:0 20px 18px;flex:1;min-height:0;overflow:hidden;}
.box{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;min-height:0;}
.box h2{font-size:14px;margin:0;padding:14px 16px 10px;display:flex;align-items:center;gap:8px;}
.box h2 .cnt{color:var(--mut);font-weight:500;font-size:12px;}
/* lista */
.search{margin:0 14px 10px;display:flex;gap:8px;}
.search input{flex:1;border:1px solid var(--line);background:#faf9f5;border-radius:9px;padding:8px 11px;font-size:13px;}
.tabs{display:flex;gap:6px;padding:0 14px 10px;flex-wrap:wrap;}
.tab{font-size:12px;color:var(--mut);padding:4px 10px;border-radius:20px;cursor:pointer;border:1px solid transparent;}
.tab.on{background:#fbf6e6;color:var(--ink);font-weight:600;}
.list{overflow-y:auto;flex:1;}
.row{display:flex;gap:11px;padding:11px 14px;border-top:1px solid var(--line);cursor:pointer;}
.row:hover{background:#faf9f5;} .row.on{background:#fbf6e6;}
.row .nm{font-weight:600;font-size:13px;} .row .tm{color:var(--mut);font-size:11px;margin-left:auto;}
.row .pv{color:var(--mut);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;}
.badges{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap;}
.bdg{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:20px;}
.bdg.molesto{background:var(--badbg);color:var(--bad);}
.bdg.baja{background:var(--warnbg);color:var(--warn);}
.bdg.bot{background:var(--okbg);color:var(--ok);}
.bdg.humano{background:var(--bluebg);color:var(--blue);}
.bdg.esperando{background:#eef0f3;color:var(--mut);}
.bdg.cerrada{background:#eef0f3;color:var(--mut);}
/* chat */
.chat-h{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);}
.chat-h .nm{font-weight:600;} .chat-h .btn-min{margin-left:auto;}
.btn{border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:7px 13px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--ink);}
.btn:hover{background:#faf9f5;}
.chatbox{overflow:hidden;}
.msgs{flex:1 1 auto;min-height:0;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain;}
.m{max-width:74%;padding:9px 13px;border-radius:14px;white-space:pre-wrap;position:relative;}
.m .t{font-size:10.5px;color:var(--mut);margin-top:4px;text-align:right;}
/* En panel de operador: lo recibido (cliente) va a la IZQUIERDA; lo respondido (bot/operador) a la DERECHA. */
.m.cli{align-self:flex-start;background:#eef0f3;border-bottom-left-radius:4px;}
.m.cli .t{text-align:left;}
.m.bot{align-self:flex-end;background:var(--panel);border:1px solid var(--line);border-bottom-right-radius:4px;}
.m.op{align-self:flex-end;background:var(--bluebg);border:1px solid #d4e3fd;border-bottom-right-radius:4px;}
.botline{display:flex;gap:8px;align-items:flex-start;align-self:flex-end;flex-direction:row-reverse;max-width:80%;}
.botline .bav{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--bee),var(--bee2));display:grid;place-items:center;font-size:13px;flex-shrink:0;}
.alert{align-self:stretch;display:flex;gap:9px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:12.5px;}
.alert .ai{width:20px;text-align:center;}
.alert.baja_confianza{background:var(--warnbg);border-color:#f2e2c2;}
.alert.claim_sin_fuente{background:var(--badbg);border-color:#f6d4d4;}
.alert.compliance_bloqueado{background:var(--purplebg);border-color:#e2d6fb;}
.alert b{font-weight:700;}
.comprow{display:flex;gap:14px;align-items:center;padding:10px 16px 0;flex:0 0 auto;background:var(--panel);}
.rolesw{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:12px;}
.rolesw .ro{padding:5px 11px;cursor:pointer;color:var(--mut);}
.rolesw .ro.on{background:var(--bee);color:#1a1a1a;font-weight:600;}
.composer{display:flex;gap:8px;padding:10px 16px 12px;border-top:0;align-items:center;flex:0 0 auto;background:var(--panel);position:sticky;bottom:0;z-index:2;}
.composer input{flex:1;border:1px solid var(--line);background:#faf9f5;border-radius:10px;padding:9px 12px;}
.iconbtn{width:38px;height:38px;border-radius:9px;border:1px solid var(--bee);background:var(--bee);cursor:pointer;font-weight:700;}
.aitoggle{font-size:11.5px;color:var(--mut);display:flex;gap:4px;align-items:center;cursor:pointer;}
.modesw{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:12px;cursor:pointer;border:1px solid var(--line);border-radius:20px;padding:4px 10px;}
.modesw .dotm{width:8px;height:8px;border-radius:50%;}
.modesw.bot .dotm{background:var(--ok);} .modesw.human .dotm{background:var(--blue);}
.pendbanner{background:var(--warnbg);border:1px solid #f2e2c2;border-radius:10px;padding:9px 12px;margin:0 16px 10px;font-size:12.5px;color:#8a6d1f;display:flex;align-items:center;gap:8px;}
/* operador */
.op-panel{overflow-y:auto;padding:0 0 14px;}
.op-panel h2{justify-content:space-between;}
.sec{padding:13px 16px;border-top:1px solid var(--line);}
.sec .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin-bottom:10px;font-weight:600;}
.stepper{display:flex;align-items:center;}
.step{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;position:relative;}
.step .c{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;background:#eef0f3;color:var(--mut);z-index:1;}
.step.done .c{background:var(--ok);color:#fff;} .step.cur .c{background:var(--bee);color:#1a1a1a;box-shadow:0 0 0 4px #fbf0cf;}
.step .nm{font-size:10px;color:var(--mut);} .step.cur .nm{color:var(--ink);font-weight:600;}
.step:not(:last-child):after{content:"";position:absolute;top:13px;left:50%;width:100%;height:2px;background:#eef0f3;}
.step.done:not(:last-child):after{background:var(--ok);}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.gauge{display:flex;gap:12px;align-items:center;}
.ring{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;}
.ring .in{width:48px;height:48px;border-radius:50%;background:var(--panel);display:grid;place-items:center;font-weight:700;font-size:17px;}
.mini{font-size:12px;} .mini b{display:block;font-size:13px;}
.tag{display:inline-flex;align-items:center;gap:6px;background:#faf9f5;border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:12.5px;width:100%;}
.faltante{display:flex;align-items:center;gap:8px;color:var(--mut);font-size:12.5px;padding:3px 0;}
.sug{background:#faf9f5;border:1px solid var(--line);border-radius:11px;padding:11px;font-size:13px;}
.op-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px;}
.op-actions .primary{background:var(--bee);border-color:var(--bee);}
.op-actions .primary:hover{background:var(--bee2);}
.muted{color:var(--mut);} .hidden{display:none!important;}
.placeholder{padding:40px 20px;text-align:center;color:var(--mut);}
.view{height:100%;display:flex;flex-direction:column;min-height:0;}
.vhead{padding:18px 22px 4px;display:flex;align-items:baseline;gap:12px;}
.vhead h1{font-size:20px;margin:0;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;padding:14px 22px 24px;overflow-y:auto;}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:14px;box-shadow:var(--shadow);}
.pcard .pn{font-weight:600;margin-bottom:3px;}
.pcard .pp{font-size:18px;font-weight:700;color:var(--ink);}
.pcard .meta{font-size:12px;color:var(--mut);margin-top:6px;display:flex;flex-wrap:wrap;gap:5px;}
.chip{font-size:11px;background:#f6f4ee;border:1px solid var(--line);border-radius:20px;padding:2px 9px;color:var(--mut);}
.chip.stock{background:var(--okbg);color:var(--ok);border-color:#cdeede;}
.chip.nostock{background:var(--badbg);color:var(--bad);border-color:#f6d4d4;}
.chip.prio{background:var(--bluebg);color:var(--blue);border-color:#d4e3fd;}
/* descripción recortable en tarjeta de producto */
.pdesc{font-size:12.5px;color:var(--mut);margin-top:6px;cursor:pointer;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pdesc.open{-webkit-line-clamp:unset;}
.pdesc:hover{color:var(--ink);}
/* botón de ayuda "?" — el tooltip flota fijo (no lo recorta el scroll del drawer) */
.help{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:#e4e7ec;color:#5b6472;font-size:10.5px;font-weight:700;margin-left:6px;cursor:help;vertical-align:middle;}
#helptip{position:fixed;display:none;max-width:250px;background:#1f2430;color:#fff;font-size:11.5px;font-weight:400;line-height:1.45;text-align:left;padding:9px 11px;border-radius:9px;box-shadow:0 6px 20px rgba(0,0,0,.28);z-index:100;pointer-events:none;white-space:normal;}
#helptip.rich{max-width:320px;}
#helptip .htab{margin:7px 0;border-top:1px solid rgba(255,255,255,.15);}
#helptip .htab .r{display:grid;grid-template-columns:78px 1fr;gap:6px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.12);align-items:baseline;}
#helptip .htab .r b{color:var(--bee);font-size:11px;}
#helptip .htab .r span{color:#e7e9ee;}
#helptip .htab .r i{color:#aeb4bf;font-style:normal;}
/* chips para elegir géneros/subgéneros existentes (clic para agregar/poner) */
.pickchips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;}
.pickchips:empty{display:none;}
.pchip{font-size:11px;background:#fbf6e6;border:1px solid #efe4bf;color:#8a6d1f;border-radius:20px;padding:2px 9px;cursor:pointer;user-select:none;}
.pchip:hover{background:var(--bee);color:#1a1a1a;border-color:var(--bee);}
.pickhint{font-size:11px;color:var(--mut);margin-top:5px;}
.cfg{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px 22px 24px;overflow-y:auto;}
.cfg .box2{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:16px;box-shadow:var(--shadow);}
.cfg h3{margin:0 0 12px;font-size:13px;}
.cfg .kv2{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line);font-size:13px;}
.cfg .kv2 b{color:var(--mut);font-weight:500;}
.cfg .tags{display:flex;flex-wrap:wrap;gap:6px;}
/* analitica */
.ana{padding:14px 22px 28px;overflow-y:auto;}
.ana-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px;}
.ana-stats .box2{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:14px 16px;box-shadow:var(--shadow);}
.ana-stats .n{font-size:24px;font-weight:700;} .ana-stats .l{font-size:12px;color:var(--mut);}
.ana-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.ana-card{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:16px;box-shadow:var(--shadow);}
.ana-card h3{margin:0 0 14px;font-size:13px;}
.funbar{display:flex;align-items:center;gap:10px;margin:7px 0;font-size:12.5px;}
.funbar .nm{width:80px;color:var(--mut);text-transform:capitalize;}
.funbar .track{flex:1;background:#f1efe8;border-radius:7px;height:20px;overflow:hidden;}
.funbar .fill{height:100%;border-radius:7px;background:linear-gradient(90deg,var(--bee),var(--bee2));}
.funbar .v{width:60px;text-align:right;color:var(--mut);}
.donut-wrap{display:flex;align-items:center;gap:18px;}
.donut{width:120px;height:120px;border-radius:50%;flex-shrink:0;}
.donut-c{width:70px;height:70px;background:var(--panel);border-radius:50%;margin:25px;display:grid;place-items:center;font-weight:700;}
.leg{font-size:12.5px;} .leg div{display:flex;align-items:center;gap:7px;margin:4px 0;}
.leg .sw{width:11px;height:11px;border-radius:3px;}
.qgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.qcard{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:14px;box-shadow:var(--shadow);text-align:center;}
.qcard .ic{font-size:20px;} .qcard .n{font-size:22px;font-weight:700;margin:4px 0;} .qcard .l{font-size:11.5px;color:var(--mut);}
.estbadge{font-size:10px;color:var(--mut);background:#f1efe8;border-radius:10px;padding:1px 6px;}
/* edición / formularios */
.vhead .actions{margin-left:auto;display:flex;gap:8px;}
.btnp{background:var(--bee);border:1px solid var(--bee);border-radius:9px;padding:8px 15px;font-size:13px;font-weight:600;cursor:pointer;color:#1a1a1a;}
.btnp:hover{background:var(--bee2);} .btnp:disabled{opacity:.5;}
.btng{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:8px 13px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--ink);}
.btng:hover{background:#faf9f5;}
.field{margin-bottom:12px;} .field label{display:block;font-size:12px;color:var(--mut);margin-bottom:4px;font-weight:600;}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:#faf9f5;border-radius:8px;padding:8px 10px;font-size:13px;font-family:inherit;}
.field textarea{min-height:60px;resize:vertical;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.picklist{border:1px solid var(--line);background:#faf9f5;border-radius:10px;padding:8px;max-height:230px;overflow-y:auto;display:grid;gap:6px;}
.checkrow{display:flex!important;align-items:flex-start;gap:8px;margin:0!important;padding:8px;border-radius:8px;color:var(--ink)!important;font-weight:500!important;background:#fff;border:1px solid transparent;cursor:pointer;}
.checkrow:hover{border-color:#e1dccf;background:#fffdf8;}
.checkrow input{width:auto!important;margin-top:2px;}
.checkrow span{display:flex;flex-direction:column;gap:2px;min-width:0;}
.checkrow small{font-size:11.5px;color:var(--mut);}
.agenda-toolbar{display:flex;gap:8px;align-items:center;padding:0 22px 12px;}
.agenda-toolbar input[type=date]{border:1px solid var(--line);border-radius:9px;padding:6px 10px;font-size:12.5px;font-family:inherit;}
.agenda-list{padding:14px 22px 24px;overflow-y:auto;min-height:0;}
.agenda-blocks{margin-bottom:14px;display:flex;flex-direction:column;gap:8px;}
.agenda-block{background:var(--badbg);border:1px solid #f6d4d4;border-radius:11px;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.agenda-block a.del{color:var(--bad);font-weight:600;text-decoration:none;font-size:12.5px;cursor:pointer;}
.agenda-table{background:var(--panel);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);overflow:hidden;}
.agenda-row{display:grid;grid-template-columns:210px 1fr 110px 180px 120px;gap:14px;align-items:center;padding:13px 16px;border-top:1px solid var(--line);}
.agenda-row:first-child{border-top:0;}
.agenda-row.cancelada{opacity:.55;}
.agenda-row a{color:var(--blue);font-weight:600;text-decoration:none;}
.agenda-row a.del{color:var(--bad);cursor:pointer;}
.field label.switch,.switch{display:inline-flex!important;align-items:center;gap:8px;cursor:pointer;font-size:13px;}
.switch input{display:none;} .switch .sl{width:38px;height:22px;background:#d6d3ca;border-radius:20px;position:relative;transition:.15s;}
.switch .sl:after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.15s;}
.switch input:checked+.sl{background:var(--ok);} .switch input:checked+.sl:after{left:18px;}
.tageditor{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1px solid var(--line);background:#faf9f5;border-radius:8px;padding:6px;}
.tageditor .tg{background:var(--badbg);color:var(--bad);border-radius:20px;padding:2px 8px;font-size:12px;display:flex;gap:5px;align-items:center;}
.tageditor .tg .x{cursor:pointer;font-weight:700;}
.tageditor input{border:0;background:transparent;flex:1;min-width:90px;outline:none;font-size:13px;}
.pcard .ed{display:flex;gap:8px;margin-top:10px;}
.pcard .ed a{font-size:12px;color:var(--blue);cursor:pointer;font-weight:600;}
.pcard .ed a.del{color:var(--bad);}
.drawer-bg{position:fixed;inset:0;background:rgba(20,20,30,.35);display:none;z-index:40;}
.drawer-bg.on{display:block;}
.drawer{position:fixed;top:0;right:0;width:420px;max-width:92vw;height:100vh;background:var(--panel);box-shadow:-4px 0 24px rgba(0,0,0,.12);transform:translateX(100%);transition:.2s;z-index:41;display:flex;flex-direction:column;}
.drawer.on{transform:translateX(0);}
.drawer .dh{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;}
.drawer .dh h3{margin:0;font-size:15px;} .drawer .dh .x{margin-left:auto;cursor:pointer;font-size:18px;color:var(--mut);}
.drawer .db{padding:16px 18px;overflow-y:auto;flex:1;}
.drawer .df{padding:14px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:10px;font-size:13px;z-index:50;opacity:0;transition:.2s;pointer-events:none;}
.toast.on{opacity:1;}

@media (max-width: 1180px){
  .app{grid-template-columns:76px 1fr;}
  .side{padding:14px 8px;}
  .logo{font-size:0;justify-content:center;padding-bottom:14px;}
  .nav a{justify-content:center;padding:10px 8px;}
  .nav a .ic{width:auto;font-size:16px;}
  .nav a{font-size:0;}
  .side .prof{display:none;}
  .cols{grid-template-columns:280px 1fr;grid-template-rows:minmax(0,1fr) auto;}
  .op-panel{grid-column:1 / -1;max-height:260px;}
}

@media (max-height: 760px){
  .top{padding:8px 12px;gap:8px;}
  .stat{padding:8px 10px;min-width:150px;}
  .stat .ico{width:28px;height:28px;}
  .cols{padding:0 10px 10px;gap:8px;}
  .chat-h{padding:9px 12px;}
  .msgs{padding:12px;gap:9px;}
  .comprow{padding:8px 12px 0;gap:8px;flex-wrap:wrap;}
  .composer{padding:8px 12px 10px;}
  .op-panel .sec{padding:9px 12px;}
}

@media (max-width: 760px){
  .app{grid-template-columns:1fr;}
  .side{display:none;}
  .cols{grid-template-columns:1fr;grid-template-rows:220px minmax(360px,1fr) 260px;}
  .top{overflow-x:auto;}
  .stat{min-width:170px;}
  .m{max-width:88%;}
  .botline{max-width:92%;}
  .agenda-row{grid-template-columns:1fr;gap:6px;}
}