:root{
  --blue:#2a78d6; --green:#70ad47; --red:#e34948; --orange:#e8a33c;
  --gray:#A6A6A6; --tan:#FBE4A5; --text:#222; --muted:#666;
}
*{box-sizing:border-box;}
body{font-family:Arial, Helvetica, sans-serif; background:#f4f4f2; margin:0; padding:0; color:var(--text);}
.wrap{max-width:720px; margin:0 auto; padding:16px 16px 60px;}
header{background:#1f3b57; color:#fff; padding:20px 16px; text-align:center;}
header .brand{font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; opacity:.75; margin-bottom:4px;}
header h1{font-size:1.2rem; margin:0;}
.session-bar{max-width:720px; margin:0 auto; background:#16283b; color:#cfd8e3; font-size:.78rem; padding:8px 16px; display:flex; justify-content:space-between; align-items:center;}
.session-bar button{background:none; border:1px solid #3d5876; color:#cfd8e3; border-radius:5px; padding:4px 8px; font-size:.72rem; cursor:pointer;}
.card{background:#fff; border:1px solid #e0e0e0; border-radius:8px; padding:16px; margin-top:16px;}
.card h2{font-size:1rem; margin:0 0 4px; color:#1f3b57;}
.card .sub{font-size:.8rem; color:var(--muted); margin-bottom:12px;}
label.field-label{display:block; font-weight:bold; font-size:.85rem; margin:14px 0 6px;}
select, input[type=text], input[type=password], input[type=date], input[type=file], input[type=number], textarea{
  width:100%; padding:9px 10px; border:1px solid #ccc; border-radius:6px; font-size:.9rem; font-family:inherit; background:#fff;
}
textarea{resize:vertical; min-height:60px;}
.opt{display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid #e2e2e2; border-radius:6px; margin-bottom:6px; cursor:pointer; font-size:.88rem;}
.opt:hover{background:#f7f9fb;}
.opt input{accent-color:var(--blue); width:16px; height:16px; flex-shrink:0;}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.note{font-size:.78rem; color:var(--muted); font-style:italic; margin-bottom:8px;}
.btn{display:block; width:100%; padding:13px; background:var(--blue); color:#fff; border:none; border-radius:8px; font-size:1rem; font-weight:bold; cursor:pointer; margin-top:10px;}
.btn:active{opacity:.85;}
.btn.secondary{background:#eee; color:#333;}
.btn.call-ok{background:var(--green);}
.msg{padding:12px; border-radius:8px; margin-top:14px; font-size:.9rem; text-align:center;}
.msg.ok{background:#e8f5e9; color:#256029; border:1px solid #b7dfb9;}
.msg.err{background:#fdecea; color:#a12622; border:1px solid #f5c2bf;}
.req{color:var(--red);}
.loading{text-align:center; padding:30px; color:#888; font-size:.85rem;}
.script-box{background:#fffbea; border:1px solid #f0dfa0; border-radius:8px; padding:16px; font-size:.95rem; line-height:1.5; color:#3a2f00;}
.script-box b{color:#1f3b57;}
.readonly-line{display:flex; justify-content:space-between; font-size:.85rem; padding:6px 0; border-bottom:1px solid #eee;}
.readonly-line span:first-child{color:#666;}
.readonly-line span:last-child{font-weight:bold; color:#1f3b57;}
.phone-display{font-size:2rem; font-weight:bold; text-align:center; color:#1f3b57; background:#f4f7fb; border-radius:8px; padding:16px; letter-spacing:1px;}
.campana-item{border:1px solid #e2e2e2; border-radius:8px; padding:12px; margin-bottom:10px; cursor:pointer;}
.campana-item:hover{background:#f7f9fb;}
.campana-item h3{margin:0 0 4px; font-size:.95rem; color:#1f3b57;}
.campana-item .meta{font-size:.78rem; color:#777;}
.summary-box{background:#fff; border:1px solid #e0e0e0; border-radius:8px; padding:14px; margin-top:14px;}
.summary-box h3{margin:0 0 8px; font-size:.92rem; color:#1f3b57;}
.bar-row{display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:.8rem;}
.bar-label{width:140px; flex-shrink:0; color:#444;}
.bar-track{flex:1; background:#eee; border-radius:4px; height:14px; overflow:hidden;}
.bar-fill{height:100%; background:var(--blue);}
.bar-count{width:30px; text-align:right; color:#666; flex-shrink:0;}
.kpis{display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap;}
.kpi{flex:1; min-width:110px; background:#f4f7fb; border-radius:8px; padding:10px; text-align:center;}
.kpi .n{font-size:1.4rem; font-weight:bold; color:#1f3b57;}
.kpi .l{font-size:.72rem; color:#666;}
table.admin-table{width:100%; border-collapse:collapse; font-size:.82rem; margin-top:10px; white-space:nowrap;}
table.admin-table th{background:var(--tan); text-align:left; padding:6px 8px; border:1px solid var(--gray);}
table.admin-table td{padding:6px 8px; border:1px solid #eee;}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:6px;}
.tabs{display:flex; max-width:720px; margin:0 auto; background:#16283b; flex-wrap:wrap;}
.tabs button{flex:1; min-width:120px; padding:10px; background:none; border:none; color:#cfd8e3; font-size:.8rem; cursor:pointer; border-bottom:3px solid transparent;}
.tabs button.active{color:#fff; border-bottom:3px solid var(--blue); font-weight:bold;}
canvas{max-width:100%;}