:root{
  --blue:#0f7c8c; --green:#70ad47; --red:#e34948; --orange:#e8a33c;
  --gray:#A6A6A6; --tan:#d9eef1; --text:#222; --muted:#666;
  --head:#0b4f5c; --head2:#083b45;
}
*{box-sizing:border-box;}
body{font-family:Arial, Helvetica, sans-serif; background:#f2f5f5; margin:0; padding:0; color:var(--text);}
.wrap{max-width:760px; margin:0 auto; padding:16px 16px 60px;}
header{background:var(--head); color:#fff; padding:20px 16px; text-align:center;}
header .brand{font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; opacity:.8; margin-bottom:4px;}
header h1{font-size:1.2rem; margin:0;}
.session-bar{max-width:760px; margin:0 auto; background:var(--head2); color:#cfe3e6; font-size:.78rem; padding:8px 16px; display:flex; justify-content:space-between; align-items:center;}
.session-bar button{background:none; border:1px solid #3d7480; color:#cfe3e6; 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:var(--head);}
.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:#f5fafa;}
.opt input{accent-color:var(--blue); width:16px; height:16px; flex-shrink:0;}
.opt:has(input:checked){background:#e6f4f6; border-color:#9fd0d7;}
.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);}
.btn.danger{background:#a12622;}
.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:var(--head);}
.readonly-line{display:flex; justify-content:space-between; gap:12px; 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:var(--head); text-align:right;}
.phone-display{font-size:2rem; font-weight:bold; text-align:center; color:var(--head); background:#eef6f7; 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:#f5fafa;}
.campana-item h3{margin:0 0 4px; font-size:.95rem; color:var(--head);}
.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:var(--head);}
.summary-box .q-text{font-size:.78rem; color:#555; margin:-4px 0 10px;}
.bar-row{display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:.8rem;}
.bar-label{width:200px; flex-shrink:0; color:#444;}
.bar-track{flex:1; background:#eee; border-radius:4px; height:14px; overflow:hidden; min-width:40px;}
.bar-fill{height:100%; background:var(--blue);}
.bar-count{width:70px; text-align:right; color:#666; flex-shrink:0;}
.kpis{display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap;}
.kpi{flex:1; min-width:120px; background:#eef6f7; border-radius:8px; padding:10px; text-align:center;}
.kpi .n{font-size:1.4rem; font-weight:bold; color:var(--head);}
.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.admin-table td.wrap-cell{white-space:normal; min-width:220px;}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:6px;}
.tabs{display:flex; max-width:760px; margin:0 auto; background:var(--head2); flex-wrap:wrap;}
.tabs button{flex:1; min-width:110px; padding:10px; background:none; border:none; color:#cfe3e6; font-size:.8rem; cursor:pointer; border-bottom:3px solid transparent;}
.tabs button.active{color:#fff; border-bottom:3px solid #6cc6d2; font-weight:bold;}
canvas{max-width:100%;}

/* ---- Formulario de encuesta ---- */
.section-title{font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--blue); font-weight:bold; margin:26px 0 0;}
.q{background:#fff; border:1px solid #e0e0e0; border-radius:8px; padding:14px 16px; margin-top:12px; scroll-margin-top:12px;}
.q.missing{border-color:var(--red); box-shadow:0 0 0 2px #f5c2bf;}
.q .q-head{font-size:.9rem; font-weight:bold; margin-bottom:10px; line-height:1.4;}
.q .q-id{display:inline-block; background:var(--head); color:#fff; border-radius:4px; padding:1px 6px; font-size:.72rem; margin-right:6px; vertical-align:1px;}
.q .instr{font-size:.75rem; color:#7a5b00; background:#fff6d6; border-radius:4px; padding:4px 8px; margin:-4px 0 10px; display:inline-block;}
.otro-input{margin:2px 0 8px 28px; width:calc(100% - 28px) !important;}
.leyenda{font-size:.74rem; color:#555; background:#f3f7f8; border-radius:6px; padding:6px 8px; margin-bottom:8px;}
.esc-row{padding:8px 0; border-top:1px solid #f0f0f0;}
.esc-row:first-of-type{border-top:none;}
.esc-row.missing .esc-label{color:var(--red);}
.esc-label{font-size:.85rem; margin-bottom:6px;}
.esc-opts{display:flex; gap:4px; flex-wrap:wrap;}
.esc-opts label{flex:1; min-width:38px; text-align:center; border:1px solid #d4d4d4; border-radius:6px; padding:7px 0; font-size:.85rem; cursor:pointer; user-select:none; background:#fff;}
.esc-opts label.ns{flex:0 0 46px; font-size:.75rem; color:#666;}
.esc-opts input{display:none;}
.esc-opts label:has(input:checked){background:var(--blue); color:#fff; border-color:var(--blue);}
.matriz{width:100%; border-collapse:collapse; font-size:.82rem;}
.matriz th{font-size:.72rem; color:#555; font-weight:bold; padding:4px; text-align:center;}
.matriz td{padding:6px 4px; border-top:1px solid #f0f0f0;}
.matriz td.c{text-align:center; width:74px;}
.matriz input{width:18px; height:18px; accent-color:var(--blue);}
.bloqueo-box{margin-top:10px; padding:12px; border:1px solid #e2b8b8; border-radius:8px; background:#fdecea; font-size:.85rem; color:#7a2018;}
.aviso-box{margin-top:8px; padding:8px 10px; border-radius:6px; background:#fff6d6; font-size:.8rem; color:#6b5200;}
.progress{position:sticky; top:0; z-index:5; background:var(--head2); color:#cfe3e6; font-size:.75rem; padding:6px 16px; display:flex; justify-content:space-between; align-items:center;}
.progress .bar{flex:1; height:6px; background:#20525c; border-radius:3px; margin:0 10px; overflow:hidden;}
.progress .bar div{height:100%; background:#6cc6d2; width:0;}
.esc-table th{white-space:normal;}
@media (max-width:520px){
  .bar-label{width:120px;}
  .two-col{grid-template-columns:1fr;}
}