/* SenderWA Admin — basado en el diseño test-UI/index.html (tema oscuro por defecto + tema claro). */
:root{color-scheme:dark;--text:#eef0f7;--muted:#9399aa;--line:#ffffff0c;--accent:#8173d9;--ok:#5fbf8f;--warn:#e0a85a;--danger:#e0707a}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#111116;color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:13px}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button{color:inherit;cursor:pointer;border:0}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #8dbaf4;outline-offset:3px}
button:hover,a.contact:hover,a.nav-item:hover{filter:brightness(1.17)}
.icon{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;flex-shrink:0}
.htmx-indicator{opacity:0;visibility:hidden}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1;visibility:visible;transition:opacity .2s ease-in}

/* ---------- estructura ---------- */
.shell{display:flex;height:100dvh;background:#111116;padding:16px;gap:12px;overflow:hidden}
.nav{width:260px;flex-shrink:0;border:1px solid #ffffff0a;border-radius:10px;background:#181a21;display:flex;flex-direction:column;overflow:hidden}
.nav-top{display:flex;align-items:center;gap:10px;padding:16px;flex-shrink:0;border-bottom:1px solid var(--line);font-size:15px;font-weight:600}
.nav-logo{display:grid;place-items:center;width:34px;height:34px;border-radius:7px;background:#6657a4;color:#fff;font-size:18px;font-weight:700}
.nav-top small{display:block;font-size:10px;font-weight:400;color:var(--muted);margin-top:3px}
.nav-scroll{flex:1;min-height:0;overflow-y:auto;padding:16px 15px;scrollbar-width:thin;scrollbar-color:#ffffff19 transparent}
.label{font-size:11px;color:var(--muted);margin:0 0 8px}
.nav-item{display:flex;align-items:center;gap:9px;width:100%;background:none;padding:10px 9px;border-radius:6px;text-align:left;white-space:nowrap}
.nav-item.selected{background:var(--accent);box-shadow:inset 0 0 0 1px #ffffff15}
.count{margin-left:auto;font-size:10px;background:#ffffff06;border-radius:50%;min-width:16px;text-align:center;color:#bfc3cf}
.count.hot{background:var(--warn);color:#1b1407;font-weight:700;border-radius:8px;padding:1px 5px}
.selected .count{background:#f4f8ff;color:#525b78;font-weight:700}
.nav-account{display:flex;align-items:center;gap:9px;padding:14px 12px;border-top:1px solid var(--line);flex-shrink:0;background:#181a21}
.account-avatar{width:32px;height:34px;background:#637e9b;font-size:11px}
.account-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.account-copy strong{font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis}
.account-copy span{font-size:10px;color:var(--muted)}
.logout{display:grid;place-items:center;width:30px;height:32px;background:transparent;color:var(--muted);border-radius:6px;flex-shrink:0}
.logout:hover{background:#ffffff0b;color:#eee}
.inline-form{display:contents}

.main{flex:1;min-width:0;border:1px solid #ffffff0c;border-radius:10px;overflow:hidden;background:#20232d;display:flex;flex-direction:column}
.topbar{height:65px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--line);flex-shrink:0;gap:10px}
.crumb{font-size:14px}
.crumb span{color:var(--muted);margin-left:10px}
.top-actions{margin-left:auto;display:flex;gap:9px}
.outlined{padding:8px 11px;background:#1b2230;border:1px solid #ffffff0d;border-radius:6px;box-shadow:0 2px 0 #798da84d;display:flex;gap:7px;align-items:center}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.dot.off{background:var(--danger);box-shadow:0 0 8px var(--danger)}
.workspace{display:flex;flex:1;min-height:0}

/* ---------- lista (columna izquierda) ---------- */
.inbox{width:315px;flex-shrink:0;border-right:1px solid var(--line);background:#1b1e26;display:flex;flex-direction:column}
.inbox-head{height:55px;display:flex;align-items:center;gap:6px;padding:0 16px;border-bottom:1px solid var(--line);flex-shrink:0}
h1{font-size:20px;font-weight:500;margin:0 auto 0 0}
.small-button{display:grid;place-items:center;background:#ffffff03;border:1px solid #ffffff15;border-radius:7px;width:25px;height:25px;flex-shrink:0}
.small-button .icon{width:15px;height:15px}
.filter{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;color:var(--muted);font-size:12px}
.search{display:block;margin:0 15px 8px;border:1px solid #ffffff19;background:#131922;padding:9px;border-radius:6px;width:calc(100% - 30px);color:white}
.contacts{overflow:auto;padding:0 8px 12px;scrollbar-width:thin;scrollbar-color:#ffffff16 transparent;flex:1}
.contact{display:flex;align-items:center;gap:10px;width:100%;background:none;text-align:left;border-radius:7px;padding:11px 8px;margin-bottom:3px}
.contact.chosen{background:#333744}
.avatar{width:37px;height:39px;flex-shrink:0;border-radius:5px;display:grid;place-items:center;background:#657b80;color:#fff;font-size:12px;font-weight:650;box-shadow:inset 0 0 0 1px #ffffff15}
.c0{background:#82766a}.c1{background:#63796c}.c2{background:#83748f}.c3{background:#657f79}.c4{background:#637e9b}
.contact-copy{min-width:0;flex:1}
.contact-name{font-size:13px;margin-bottom:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview{color:var(--muted);font-size:12px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.badge{font-size:10px;color:#c6cbd8;background:#ffffff0d;border-radius:5px;padding:3px 6px;white-space:nowrap}
.badge.warn{color:var(--warn)}
.search-form{margin:12px 0 0}
.list-wrap{display:flex;flex-direction:column;flex:1;min-height:0}
.empty{color:var(--muted);text-align:center;padding:30px 12px;line-height:1.6}

/* ---------- detalle (columna derecha) ---------- */
.chat{flex:1;min-width:0;display:flex;flex-direction:column}
.chat-head{height:55px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 16px;gap:10px;flex-shrink:0}
.chat-head .avatar{width:32px;height:34px;font-size:11px}
.chat-name{font-size:13px;margin-bottom:5px}
.meta{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.head-copy{min-width:0}
.pill{margin-left:auto;border-radius:6px;padding:6px 8px;font-size:11px;background:#ffffff12;white-space:nowrap}
.pill.active{color:var(--ok)}
.pill.suspended{color:var(--warn)}
.detail-body{flex:1;overflow:auto;padding:18px 16px;scrollbar-width:thin;scrollbar-color:#ffffff13 transparent}
.section{margin-bottom:22px;max-width:760px}
.section-title{font-size:11px;color:var(--muted);margin:0 0 10px;text-transform:uppercase;letter-spacing:.04em}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stat{background:#ffffff04;border:1px solid var(--line);border-radius:6px;padding:11px 12px}
.stat b{display:block;font-size:20px;font-weight:500;margin-bottom:4px}
.stat span{color:var(--muted);font-size:11px}
.card{background:#121319;border-radius:9px;padding:14px;box-shadow:0 1px 6px #0003}
.card + .card{margin-top:10px}
.card p{margin:0 0 10px;color:var(--muted);line-height:1.5}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.input{flex:1;min-width:180px;border:1px solid #ffffff19;background:#131922;padding:9px 10px;border-radius:6px;color:var(--text)}
.btn{background:#ffffff13;border-radius:7px;padding:8px 13px;font-size:12px;display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.btn .icon{width:14px;height:14px}
.btn-primary{color:#fff;background:var(--accent);box-shadow:inset 0 0 0 1px #ffffff26}
.btn-danger{color:#fff;background:#a8434d}
.btn-warn{color:#1b1407;background:var(--warn)}
.notice,.error{border-radius:7px;padding:10px 12px;margin-bottom:14px;line-height:1.5;max-width:760px}
.notice{background:#5fbf8f1c;border:1px solid #5fbf8f40}
.error{background:#e0707a1c;border:1px solid #e0707a55}
.token-box{border:1px solid #8173d9aa;background:#393444;border-radius:12px;padding:12px;margin-bottom:18px;max-width:760px}
.token-box p{margin:0 0 9px;color:#d0c9df;line-height:1.5}
.row .token{flex:1;min-width:0;width:auto}
.token{display:block;width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:#121217;border-radius:9px;padding:11px;color:#fff;border:0;word-break:break-all}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--muted)}
.form-grid .input{min-width:0;width:100%;font-size:13px;color:var(--text)}
select.input{font-size:13px;color:var(--text)}
.form-grid .full{grid-column:1/-1}
.input-short{flex:0 0 110px;min-width:0}
textarea.input{resize:vertical;min-height:70px;font:inherit}
.kv{display:grid;grid-template-columns:150px 1fr;gap:8px 12px;margin:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0;word-break:break-word}
.tabs{display:flex;gap:6px;padding:12px 16px 0}
.tabs a{padding:6px 10px;border-radius:6px;background:#ffffff0d;color:var(--muted);font-size:12px}
.tabs a.on{background:var(--accent);color:#fff}
body.light .tabs a{background:#dcdce6}
body.light .tabs a.on{background:var(--accent);color:#fff}
.row-label{color:var(--muted);font-size:12px}
.top-gap{margin-top:10px}
.link{color:var(--accent);text-decoration:underline;margin-left:6px}
.check{display:flex;align-items:center;gap:8px;margin:0 0 12px;color:var(--muted)}
.check input{accent-color:var(--danger)}
.placeholder{flex:1;display:grid;place-items:center;color:var(--muted);text-align:center;padding:24px;line-height:1.7}
.placeholder .icon{width:34px;height:34px;margin-bottom:8px;opacity:.6}

/* ---------- login ---------- */
.login{min-height:100dvh;display:grid;place-items:center;padding:16px}
.login-card{width:100%;max-width:360px;background:#181a21;border:1px solid #ffffff0a;border-radius:10px;padding:24px}
.login-card .nav-logo{margin-bottom:14px}
.login-card h1{margin:0 0 4px}
.login-card .sub{color:var(--muted);margin:0 0 20px}
.login-card label{display:block;font-size:11px;color:var(--muted);margin:12px 0 6px}
.login-card .input{width:100%}
.login-card .btn-primary{width:100%;justify-content:center;margin-top:18px;padding:10px}
.login-card code{background:#ffffff12;border-radius:5px;padding:2px 5px}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#222b3c;border:1px solid #ffffff20;color:white;padding:12px 18px;border-radius:7px;box-shadow:0 8px 30px #0003;display:none;z-index:30}
.toast.show{display:block}
.mobile-menu,.mobile-back,.menu-overlay{display:none}

/* ---------- responsive (mismos cortes que el diseño) ---------- */
@media(min-width:1500px){.nav{width:275px}.inbox{width:320px}.contact{padding-top:13px;padding-bottom:13px}}
@media(max-width:1100px){.shell{padding:12px}.nav{width:210px}.nav-scroll{padding:14px 10px}.inbox{width:265px}}
@media(max-width:900px){
  .nav{display:none}.inbox{width:245px}.mobile-menu{display:grid}
  body.menu-open .nav{display:flex;position:fixed;inset:8px auto 8px 8px;width:260px;z-index:20;background:#181a21;box-shadow:8px 0 35px #0005}
  body.menu-open .menu-overlay{display:block;position:fixed;inset:0;background:#0008;z-index:19}
}
@media(max-width:620px){
  .shell{padding:7px;gap:7px}
  .main{border-radius:8px}
  .topbar{height:52px;padding:0 12px}
  .crumb{font-size:12px}
  .outlined{font-size:11px;padding:7px}
  .inbox{display:flex;width:100%;border-right:0}
  .chat{display:none}
  body.detail-open .inbox{display:none}
  body.detail-open .chat{display:flex}
  .mobile-back{display:grid;flex-shrink:0;margin-right:3px}
  .chat-head{padding:0 11px}
  .detail-body{padding:14px 10px}
  .contact{padding:13px 9px}
  .contact .avatar{width:39px;height:41px}
  .contact-name{font-size:14px}
  .avatar{width:30px;height:33px;font-size:10px}
  .engine-label{display:none}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
  .kv dt{margin-top:6px}
}

/* ---------- tema claro (mismo del diseño) ---------- */
body.light{color-scheme:light;--text:#18181f;--muted:#555561;--line:#c7c7d1;--accent:#6545a8;--canvas:#d4d4dc;--surface:#ededf2;--subtle:#e1e1e9;--hover:#dcdce6;--selected:#d8ccea;--accent-text:#452875;--ok:#2f8a5c;--warn:#a5651a;--danger:#b4323e;background:var(--canvas);color:var(--text)}
body.light .shell{background:var(--canvas)}
body.light .main{background:var(--surface);border-color:var(--line)}
body.light .nav,body.light.menu-open .nav{background:#e7e7ee;border-color:var(--line)}
body.light .topbar,body.light .chat-head{background:#e7e7ee;border-color:var(--line)}
body.light .chat{background:var(--surface)}
body.light .nav-account,body.light .inbox,body.light .inbox-head{background:var(--subtle);border-color:var(--line)}
body.light .nav-top{border-color:var(--line)}
body.light .nav-logo{background:var(--accent);color:#fff;box-shadow:none}
body.light .nav-item:hover,body.light .contact:hover,body.light .logout:hover{background:var(--hover);filter:none}
body.light .nav-item.selected,body.light .contact.chosen{background:var(--selected);color:var(--accent-text);box-shadow:none}
body.light .count,body.light .badge{background:#d5d5df;color:#41414f}
body.light .selected .count{background:#bfaadf;color:#38205d}
body.light .outlined,body.light .small-button,body.light .search,body.light .input{background:var(--surface);color:#41414f;border-color:#bdbdca;box-shadow:none}
body.light .pill,body.light .btn{background:#dcdce6;color:#41414f}
body.light .pill.active{color:var(--ok)}
body.light .pill.suspended{color:var(--warn)}
body.light .btn-primary{background:var(--accent);color:#fff;box-shadow:none}
body.light .btn-danger{background:var(--danger);color:#fff}
body.light .btn-warn{background:var(--warn);color:#fff}
body.light .stat{background:#e5e5ec}
body.light .card{background:#e7e7ee;box-shadow:none;border:1px solid var(--line)}
body.light .token-box{background:#d3c7e4;border-color:#6545a888}
body.light .token-box p{color:#443354}
body.light .token{background:var(--surface);color:var(--text)}
body.light .logout{color:var(--muted)}
body.light .toast{background:var(--surface);color:var(--text);border-color:var(--line)}
body.light .login-card{background:#e7e7ee;border-color:var(--line)}
body.light .login-card code{background:#d5d5df}
body.light .contacts,body.light .detail-body,body.light .nav-scroll{scrollbar-color:#aaaaba transparent}
body.light .badge.warn{color:var(--warn)}
/* Listas de modelos y de números dentro de una tarjeta */
.model-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.model-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line);border-radius:6px}
.model-copy{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.model-copy strong{font-weight:500;word-break:break-all}
.model-copy a{color:inherit}
.model-actions{display:flex;gap:6px}
.model-actions form{margin:0}
.btn-sm{padding:5px 9px;font-size:12px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.muted{color:var(--muted)}
.meta a{color:inherit;text-decoration:underline}
/* Casillas en fila dentro de formularios (igual que el panel customer) */
.switch,.form-grid label.check{flex-direction:row!important;align-items:center;gap:8px!important;font-size:12px!important;color:var(--text)!important}
.switch input,.form-grid label.check input{width:16px;height:16px;flex:none;accent-color:var(--accent)}
.pick-list{max-height:360px;overflow:auto;margin-bottom:12px}
.check.pick{margin:0;flex-wrap:wrap;color:var(--text)}
.check.pick input{accent-color:var(--accent)}
#available-models .search{margin:6px 0 4px;width:100%}
.model-row[hidden]{display:none}
/* Proveedores: pestañas de modelos, caja de alto fijo e interruptores */
#models-box .tabs{padding:0;margin-bottom:10px}
.tab{padding:6px 10px;border-radius:6px;background:#ffffff0d;color:var(--muted);font-size:12px;display:inline-flex;gap:6px;align-items:center}
.tab.selected{background:var(--accent);color:#fff}
.tab .count{background:#00000033;border-radius:5px;padding:1px 6px;font-size:11px}
.hint{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.model-search{margin-bottom:8px}
.model-search .search{flex:1;min-width:0}
.scroll-box{max-height:320px;overflow:auto;padding-right:4px;margin:0}
.row-error{color:var(--danger);font-size:11px}
.toggle{position:relative;width:38px;height:22px;border-radius:11px;background:#ffffff26;flex:none;transition:background .15s}
.toggle span{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.toggle.on{background:var(--accent)}
.toggle.on span{left:19px}
.toggle:disabled{opacity:.55;cursor:not-allowed}
body.light .toggle{background:#c7c7d1}
body.light .toggle.on{background:var(--accent)}
body.light .tab{background:#dcdce6;color:#41414f}
body.light .tab.selected{background:var(--accent);color:#fff}
label.stack{display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--muted)}
.temp-key{margin-bottom:6px}.temp-key .input{flex:1;min-width:0}
/* Fila de número: nombre · estado / teléfono · agente activo (igual que en el cliente) */
.number-lines .line{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.number-lines .line>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.number-lines .line .badge{flex-shrink:0}
.number-lines .contact-name{margin-bottom:0}
.number-lines .line+.line{margin-top:4px}
.number-lines .agent{flex-shrink:0;max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}