/* 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)}

/* ---------- panel customer ---------- */
.label-gap{margin-top:18px}
.count-wide{border-radius:6px;padding:1px 6px;min-width:28px}
.banner{margin:12px 16px 0;max-width:none}
.detail-pad{padding:0 16px 16px}
.tabs-scroll{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.tabs-scroll a{white-space:nowrap}
.badge.st-ok,.pill.st-ok{color:var(--ok)}
.badge.st-warn,.pill.st-warn{color:var(--warn)}
.badge.st-off,.pill.st-off{color:var(--muted)}
.badge.st-err,.pill.st-err{color:var(--danger)}
.hint{color:var(--muted);font-size:12px;line-height:1.5;margin:0 0 12px}
.card-title{color:var(--text)!important;font-weight:600;margin:0 0 10px!important}
.switch{flex-direction:row!important;align-items:center;gap:8px!important;font-size:12px!important;color:var(--text)!important}
.switch input{width:16px;height:16px;accent-color:var(--accent)}
select.input{appearance:auto}
.catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;max-width:760px}
.catalog .card + .card{margin-top:0}
.days{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.day{display:flex;align-items:center;gap:5px;background:#ffffff0d;border-radius:6px;padding:6px 9px;font-size:12px}
.day input{accent-color:var(--accent)}
.qr-box+.btn{margin-top:10px}
.qr-dialog{border:0;padding:20px;margin:auto;width:100vw;height:100vh;max-width:none;max-height:none;background:#fff;color:#1b1b22;text-align:center}
.qr-dialog[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.qr-big{width:min(92vw,80vh);height:min(92vw,80vh);image-rendering:pixelated;background:#fff}
.link-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.steps{margin:0 0 12px;padding-left:18px;color:var(--muted);line-height:1.7}
.qr-box{display:inline-block;background:#fff;border-radius:10px;padding:16px}
.qr{display:block;width:320px;height:320px;max-width:100%;image-rendering:pixelated}
.pair-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:28px;letter-spacing:.12em;background:#121217;border-radius:9px;padding:14px;text-align:center}
.login-wide{max-width:440px}
.login-card textarea.input{width:100%}
.login-card .alt{color:var(--muted);text-align:center;margin:16px 0 0}
.login-card a.btn-primary{display:flex;width:100%;justify-content:center;margin-top:8px;padding:10px}
.draft-text{width:100%;min-height:160px}

/* Conversación (del diseño) */
.messages{flex:1;overflow:auto;padding:15px 16px 8px;scrollbar-width:thin;scrollbar-color:#ffffff13 transparent}
.message-group{display:flex;gap:11px;margin-bottom:5px}
.message-content{max-width:78%}
.sender{margin:2px 0 6px;font-size:12px;color:var(--muted)}
.bubble{width:fit-content;background:#ffffff08;border-radius:6px;padding:9px 11px;line-height:1.5;margin-bottom:4px;font-size:13px;white-space:pre-wrap;word-break:break-word}
.bubble.muted{color:var(--muted);font-style:italic}
.time{color:var(--muted);font-size:10px;margin:3px 0 8px}
.outgoing{flex-direction:row-reverse}
.outgoing .sender,.outgoing .time{text-align:right}
.outgoing .bubble{margin-left:auto;background:#121319;box-shadow:0 1px 6px #0003}
.composer-wrap{margin:12px 16px 16px;padding:5px;border-radius:12px;background:#393444;flex-shrink:0}
.assistant-note{color:#d0c9df;display:flex;align-items:center;padding:6px 9px 9px;gap:6px;font-size:12px}
.assistant-note.note-error{color:#ffb4bb}
.composer{background:#121217;border-radius:9px;padding:13px 12px 10px}
.composer textarea{resize:none;width:100%;height:70px;border:0;background:none;color:#eef0f7;outline:none;line-height:1.5;font-size:13px}
.composer textarea::placeholder{color:#838390}
.compose-tools{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.send{color:#fff;background:var(--accent);padding:8px 13px;border-radius:7px;font-size:12px;display:flex;gap:5px;align-items:center;box-shadow:inset 0 0 0 1px #ffffff26}
.send .icon{width:14px;height:14px}

@media(max-width:620px){
  .link-grid{grid-template-columns:1fr}
  .messages{padding:14px 10px}
  .composer-wrap{margin:8px}
  .message-content{max-width:85%}
  .bubble{font-size:12px}
}

body.light .day{background:#dcdce6}
body.light .pair-code{background:var(--surface)}
body.light .bubble{background:#e5e5ec;color:#22222c}
body.light .outgoing .bubble{background:#6545a8;color:#fff;box-shadow:none}
body.light .composer-wrap{background:#d3c7e4}
body.light .assistant-note{color:#443354}
body.light .composer{background:var(--surface)}
body.light .composer textarea{color:var(--text)}
body.light .send{background:var(--accent);box-shadow:none}
body.light .messages{scrollbar-color:#aaaaba transparent}

/* Formularios de número */
.phone-row{display:flex;gap:8px}
.phone-row .cc{flex:0 0 190px;min-width:0}
.phone-row .input{min-width:0}
.field{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.field-label{font-size:11px;color:var(--muted)}
.field textarea.input{width:100%}
.radios{display:flex;flex-wrap:wrap;gap:6px 18px;margin:4px 0 2px}
.card > .switch{display:flex;margin:8px 0}
.switch input[type=radio]{accent-color:var(--accent)}
details.card summary{cursor:pointer;margin:0!important}
details.card[open] summary{margin-bottom:6px!important}
@media(max-width:620px){.phone-row .cc{flex-basis:130px}}
.sub-block{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.card:has(input[name=reply_scope]:not([value=algunos]):checked) .allow-field{display:none}
.card:has(input[name=reply_scope][value=solo_yo]:checked) .contact-only{display:none}
.reply-options{display:grid;gap:8px;margin:4px 0 10px}
.reply-option{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid #ffffff14;border-radius:8px;cursor:pointer}
.reply-option:has(input:checked){border-color:var(--accent)}
.reply-option input{margin-top:3px}
.reply-option span{display:grid;gap:2px}
.reply-option small{color:var(--muted);font-size:.85em;line-height:1.4}
.card .field:last-child{margin-bottom:0}
/* IA de este número */
label.stack{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}
.agent-lines{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.agent-lines li{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
select:disabled{opacity:.55}
.card-title.ai-agents{margin-top:18px!important;padding-top:14px;border-top:1px solid var(--line)}
/* Detalle del número: pestañas y listas de las pestañas IA Provider y Agent */
.number-tabs{padding:10px 16px;border-bottom:1px solid var(--line)}
.choice-list,.item-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px;max-width:760px}
.choice{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;cursor:pointer;flex-wrap:wrap}
.choice.selected{border-color:var(--accent)}
.choice.off{opacity:.6;cursor:default}
.choice input[type=radio]{width:16px;height:16px;accent-color:var(--accent);flex:none}
.choice-copy{display:flex;flex-direction:column;gap:2px;flex:1;min-width:180px}
.choice-copy span{color:var(--muted);font-size:12px}
.choice-model{width:auto;min-width:220px;max-width:100%}
.item-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:8px}
.item-copy{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.item-copy .muted{color:var(--muted);font-size:12px;flex-basis:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.choice-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:8px}
.choice-row.selected{border-color:var(--accent)}
.choice-row.off{opacity:.65}
.choice-name{min-width:140px}
.choice-opts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.choice-opt{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:7px;font-size:13px;cursor:pointer}
.choice-opt.selected{border-color:var(--accent)}
.choice-opt input[type=radio]{width:16px;height:16px;accent-color:var(--accent)}
.choice-link{font-size:12px;color:var(--muted);text-decoration:underline}
.scheduled-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.scheduled-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.scheduled-row>div{min-width:0}
.scheduled-row .meta{white-space:normal}
/* Selector del número actual (debajo del logo) */
.nav-body{flex:1;min-height:0;display:flex;flex-direction:column}
.picker-wrap{padding:12px 12px 0;flex-shrink:0;position:relative}
.picker{display:block;border:1px solid var(--line);border-radius:8px;background:#ffffff06}
.picker>summary{display:flex;align-items:center;gap:9px;padding:9px 10px;cursor:pointer;list-style:none;border-radius:8px}
.picker>summary::-webkit-details-marker{display:none}
.picker>summary:hover{background:#ffffff08}
.picker .avatar{width:30px;height:32px;font-size:11px}
.picker-copy{display:flex;flex-direction:column;min-width:0;flex:1}
.picker-copy strong{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker-copy small{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.picker-copy .dot{width:7px;height:7px;flex-shrink:0;box-shadow:none}
.dot.st-ok{background:var(--ok)}.dot.st-warn{background:var(--warn)}.dot.st-off{background:var(--muted)}.dot.st-err{background:var(--danger)}
.picker-chevron{color:var(--muted);font-size:12px;transition:transform .15s}
.picker[open] .picker-chevron{transform:rotate(180deg)}
.picker-menu{position:absolute;left:12px;right:12px;top:calc(100% + 4px);z-index:20;background:#20232c;border:1px solid #ffffff14;border-radius:8px;padding:8px;box-shadow:0 12px 32px #0008;max-height:60vh;overflow-y:auto}
.picker-menu .label{margin:2px 6px 6px}
.picker-item{display:flex;align-items:center;gap:9px;padding:7px 6px;border-radius:6px}
.picker-item:hover{background:#ffffff0a}
.picker-item.on{background:var(--accent);color:#fff}
.picker-item.on small{color:#ffffffcc}
.picker-add{color:var(--muted);font-size:13px;border-top:1px solid var(--line);border-radius:0 0 6px 6px;margin-top:6px;padding-top:10px}
.picker-add .icon{width:16px;height:16px}
.picker-empty{display:flex;align-items:center;gap:8px;padding:11px 10px;font-size:13px;color:var(--muted)}
.crumb-number{color:var(--text)!important;font-weight:600}
body.light .picker{background:#fff;border-color:var(--line)}
body.light .picker>summary:hover,body.light .picker-item:hover{background:var(--hover)}
body.light .picker-menu{background:#fff;border-color:#d8d8e2;box-shadow:0 12px 32px #0002}
body.light .picker-item.on{background:var(--selected);color:var(--accent-text)}
body.light .picker-item.on small{color:var(--muted)}
.live-changed{margin-bottom:12px}
/* Fila de número (lista y selector): nombre · estado / teléfono · agente activo */
.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}
.picker-item .number-lines .contact-name{font-size:13px;font-weight:600}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 2px}
.chips-label{font-size:12px;color:var(--muted,#8b90a0)}
.chip{font:inherit;font-size:12px;color:#c6cbd8;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:999px;padding:4px 10px;cursor:pointer}
.chip:hover{background:#ffffff1a}
body.light .chip{background:#dcdce6;color:#41414f;border-color:#c7c7d4}
.thumb{max-width:200px;max-height:200px;border-radius:8px;object-fit:contain;background:#ffffff0d}


/* Recursos en pestañas */
.rtab-bar{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:8px;margin-bottom:2px;border-bottom:1px solid var(--line)}
.rtab{font:inherit;font-size:13px;color:var(--muted,#8b90a0);background:#ffffff0d;border:1px solid transparent;border-radius:8px;padding:7px 12px;cursor:pointer;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.rtab:hover{background:#ffffff1a}
.rtab.on{background:var(--accent);color:#fff}
.rtab-add{border:1px dashed #ffffff33}
.rtab-add.on{border-style:solid}
body.light .rtab{background:#dcdce6;color:#41414f}
body.light .rtab.on{background:var(--accent);color:#fff}
.rpanel{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:start;margin-top:12px}
.rpanel[hidden]{display:none}
.rpanel > .rbody:only-child{grid-column:1 / -1}
.rbody{display:grid;gap:12px;min-width:0}
.rpanel .thumb{width:100%;max-width:200px}
@media (max-width:640px){.rpanel{grid-template-columns:1fr}.rpanel .thumb{max-width:160px}}
.rbody > .inline-form{justify-self:start}
.rbody .btn-primary{justify-self:start}
.fcheck{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;padding:9px 12px;border-radius:10px;border:1px solid transparent;margin-top:-2px}
.fcheck.ok{background:#3ecf8e14;border-color:#3ecf8e55;color:#3ecf8e}
.fcheck.bad{background:#ff6b6b14;border-color:#ff6b6b55;color:#ff8a8a}
.fcheck .fic{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:currentColor}
.fcheck .fic{color:inherit;position:relative}
.fcheck.ok .fic,.fcheck.bad .fic{color:#0b0d12}
.fcheck.ok .fic{background:#3ecf8e}
.fcheck.bad .fic{background:#ff6b6b}
.fcheck .ftxt{flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
.fcheck .ftxt strong{font-weight:600}
.fprev-btn{flex:none;font:inherit;font-size:12px;padding:5px 12px;border-radius:8px;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer}
.fprev-btn:hover{background:#ffffff14}
.fprev{display:block;flex-basis:100%;max-width:260px;max-height:260px;object-fit:contain;border-radius:8px;background:#ffffff0d;border:1px solid var(--line)}
input[type=file].input::file-selector-button{font:inherit;font-size:13px;color:#fff;background:var(--accent);border:0;border-radius:6px;padding:6px 12px;margin-right:12px;cursor:pointer}
body.light .fcheck.ok{color:#14804f}
body.light .fcheck.bad{color:#c43b3b}
.fprev[hidden]{display:none}