:root{--navy:#14294f;--blue:#315db7;--bg:#f2f5fb;--border:#dce4f2;--ink:#132849;--muted:#52698d;--green:#15836c;--gold:#ad6d05}*{box-sizing:border-box}body{margin:0;background:var(--bg);font:15px/1.5 system-ui,Segoe UI,Arial;color:var(--ink)}header{background:var(--navy);color:white;padding:18px max(20px,calc((100vw - 1350px)/2));display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}header strong{font-size:26px;letter-spacing:-1px}header small{display:block;color:#a9cef9;font-size:11px;letter-spacing:1px}nav{display:flex;flex-wrap:wrap;gap:6px}nav button{color:white;background:transparent;border:0;border-radius:10px;padding:10px 13px;cursor:pointer;font:inherit}nav button.active{background:#fff;color:var(--navy);font-weight:700}main{max-width:1390px;margin:auto;padding:22px}.notice{background:#fff6e1;border:1px solid #f4d28b;color:#79520d;padding:13px 17px;border-radius:13px;margin-bottom:24px}.top{display:flex;justify-content:space-between;gap:15px;align-items:center;flex-wrap:wrap;margin-bottom:18px}h1{font-size:29px;margin:0 0 4px}h2{font-size:19px;margin:0 0 16px}h3{font-size:16px;margin:0 0 10px}.sub,.muted,.small{color:var(--muted)}.small{font-size:12px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.panel{background:white;border:1px solid var(--border);border-radius:17px;padding:22px;margin-bottom:16px;box-shadow:0 4px 24px #14294f08}.field{margin:9px 0 13px}.field label{display:block;font-weight:650;font-size:13px;margin-bottom:5px}input,select,textarea{width:100%;font:inherit;border:1px solid #cbd8ed;border-radius:10px;background:white;color:var(--ink);padding:10px 12px;min-width:0}textarea{resize:vertical}.filters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.btn{border:0;border-radius:10px;padding:11px 16px;font:inherit;font-weight:650;cursor:pointer;background:var(--blue);color:#fff}.btn.secondary{background:#eaf0fc;color:#244b9c}.btn.light{background:white;color:var(--navy);border:1px solid var(--border)}.btn.warn{background:#fff0e9;color:#9b432a}.btn:disabled{opacity:.5;cursor:not-allowed}.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.tag{display:inline-block;background:#e7f6ef;color:#0d7560;border-radius:99px;padding:4px 9px;font-size:12px;font-weight:700}.tag.gray{background:#eef1f6;color:#516079}.tag.gold{background:#fff3d9;color:#8b600d}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.kpi{background:#f0f4fc;padding:17px;border-radius:12px}.kpi strong{font-size:28px;display:block;line-height:1.2}.kpi span{font-size:13px}.row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #e9eef7;padding:11px 0}.row:last-child{border:0}.hidden{display:none!important}.stat{display:flex;align-items:center;gap:12px;margin:9px 0}.stat label{width:165px;max-width:48%;font-size:13px}.meter{height:10px;flex:1;background:#e9eef8;border-radius:100px;overflow:hidden}.meter b{display:block;height:100%;background:var(--blue);border-radius:100px}.stat strong{width:65px;text-align:right;font-size:12px}.map{background:#edf3f2;border:1px solid #d0dce5;border-radius:15px;overflow:hidden}.map svg{display:block;width:100%;max-height:400px}.sector{cursor:pointer;stroke:#fff;stroke-width:6}.sector.active{stroke:#1c3e80;stroke-width:10}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:10px;text-align:left;border-bottom:1px solid #e9edf4}th{color:#536789;background:#f7f9fc}.chart svg{width:100%;height:auto}.legend{display:flex;gap:15px;flex-wrap:wrap;font-size:12px}.dot{width:10px;height:10px;display:inline-block;border-radius:50%;margin-right:5px}.phone{max-width:450px;margin:auto;border:7px solid #1c3155;border-radius:28px;padding:20px;background:#fff;min-height:440px}.qoption{display:block;padding:9px 12px;border:1px solid #dae3f0;border-radius:9px;margin:8px 0}.qoption input{width:auto;margin-right:8px}.inline{display:flex;gap:9px;align-items:center}.inline input[type=checkbox]{width:auto}.analysis{background:#f5f9fd;border-left:4px solid var(--green);padding:14px 16px;border-radius:8px;margin-bottom:10px}.footer{text-align:center;color:#587092;font-size:12px;margin:30px}.helper{border:1px dashed #b8c8df;background:#f9fbff;padding:13px;border-radius:10px}.selector{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.full{grid-column:1/-1}@media(max-width:950px){.filters,.selector{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:1fr 1fr}.kpis{grid-template-columns:repeat(2,1fr)}}@media(max-width:670px){header{padding:15px}header strong{font-size:23px}main{padding:12px}.grid,.grid3{grid-template-columns:1fr}.panel{padding:15px}.filters,.selector{grid-template-columns:1fr 1fr}h1{font-size:23px}nav button{padding:7px 9px}}
 .risk{color:#a25e00;background:#fff5df;padding:3px 9px;border-radius:8px;font-weight:700}.ok{color:#13735f;background:#e7f6ef;padding:3px 9px;border-radius:8px;font-weight:700}.qfilters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.qc{border-left:4px solid #e0a24a;background:#fffaf0;padding:12px;border-radius:8px;margin:10px 0}.qbar{height:11px;background:#e8edf6;border-radius:8px;overflow:hidden}.qbar>div{height:100%;background:#426ebc}.qbar>div.alert{background:#c88738}@media(max-width:700px){.qfilters{grid-template-columns:1fr}} 
[hidden] { display: none !important; }
body > header { position: sticky; top: 0; z-index: 10; }
.auth, .field-app { max-width: 34rem; margin: 1rem auto; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-size: 1.15rem; font-weight: 700; padding: 0; }
#message:empty { display: none; }
#message { margin-top: 0; }
meter { width: min(16rem, 100%); }
.report-panel { padding: 12px 16px; margin-bottom: 9px; line-height: 1.3; }
.report-panel .field, .report-panel .top { margin-block: 4px 8px; }
.report-panel h2, .report-panel h3, .report-panel p { margin-block: 4px 8px; }
.report-panel .field select { width: min(100%, 42rem); padding: 5px 9px; }
.report-heading .field { display: flex; align-items: center; gap: 8px; }
.report-heading .field label { margin: 0; }
.report-panel .btn { padding: 5px 9px; }
.report-context { display: flex; flex-wrap: wrap; gap: 4px 18px; overflow-wrap: anywhere; }
.report-panel .kpis { gap: 6px; margin-bottom: 8px; }
.report-panel .kpi { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; padding: 6px 9px; }
.report-panel .kpi strong { font-size: 20px; }
.report-panel :is(th, td) { padding: 4px 8px; }
.report-panel .stat { margin-block: 4px; }
.report-route summary { cursor: pointer; font-weight: 650; }
.results-query { margin-bottom: 12px; }
.report-panel .results-query select { width: 100%; }
.results-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 8px; align-items: end; }
.results-filters .btn { margin-bottom: 8px; }
.results-base { color: var(--muted); }
.results-breakdown td { white-space: nowrap; }
.results-bar { display: flex; align-items: center; gap: 8px; }
.results-bar meter { width: min(16rem, 70%); }
.results-bar strong { min-width: 4rem; text-align: right; }
.results-text { padding-left: 1.4rem; overflow-wrap: anywhere; }
.study-sheet dl { margin: 0; }
.study-sheet dl > div { display: grid; grid-template-columns: minmax(12rem, 1fr) 2fr; border-bottom: 1px solid var(--border); }
.study-sheet :is(dt, dd) { margin: 0; padding: 6px 8px; overflow-wrap: anywhere; }
.study-sheet dt { font-weight: 650; background: #f7f9fc; }
.study-waves { display: grid; gap: 5px; margin-bottom: 8px; }
.study-chart { display: block; width: min(100%, 700px); height: auto; }
.study-analysis-text { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 540px) {
  .study-sheet dl > div { grid-template-columns: 1fr; }
}
@media print {
  body:has(.study-sheet) { background: white; }
  body:has(.study-sheet) > header, body:has(.study-sheet) #message, body:has(.study-sheet) #content > h1,
  .study-controls, .study-actions { display: none !important; }
  .study-sheet { border: 0; box-shadow: none; }
  .study-sheet dl > div { break-inside: avoid; }
}
@media (max-width: 780px) {
  .results-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results-filters .btn { justify-self: start; }
}
.review-filters { gap: 6px 14px; margin-bottom: 8px; }
.review-filters .inline { gap: 4px; }
.review-table { max-height: 65vh; }
.review-table thead th { position: sticky; top: 0; z-index: 1; }
.review-form { display: grid; grid-template-columns: max-content minmax(7rem, 1fr) max-content; gap: 4px; }
.review-form :is(select, input) { padding: 4px 7px; }
.review-form .btn { white-space: nowrap; }
.review-reason { margin-top: 3px; overflow-wrap: anywhere; }
[data-quality-settings] { margin-bottom: 8px; }
.quality-settings { align-items: end; }
.quality-settings .field { max-width: 8rem; margin-bottom: 0; }
.field-location { margin: 8px 0; }
@media (max-width: 740px) {
  .review-form { grid-template-columns: minmax(7rem, 1fr) max-content; }
  .review-form input { grid-row: 2; grid-column: 1 / -1; }
}
a.btn { display: inline-block; text-decoration: none; }
.client-section { border-top: 1px solid var(--border); margin: 1.3rem 0; padding: .4rem 0 .8rem; }
.client-section > legend { padding-right: .6rem; }
.client-contact { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; margin: .6rem 0 1rem; padding: 0 .9rem .9rem; }
.client-contact > legend { font-size: .95rem; }
.client-contact input[type="radio"] { width: auto; }
#error-ficha { color: #942b22; }
#error-ficha:empty { display: none; }
.email-warning { display: block; margin-top: 5px; color: #942b22; }
.email-warning:empty { display: none; }
.email-correction { margin-top: 6px; padding: 5px 9px; font-size: .9em; }
.locality-options { border: 1px solid var(--border); border-radius: 10px; margin-top: 4px; overflow: hidden; }
.locality-options button { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--border);
  background: white; color: var(--ink); text-align: left; font: inherit; padding: 8px 12px; cursor: pointer; }
.locality-options button:last-child { border-bottom: 0; }
.locality-options button:hover, .locality-options button:focus-visible { background: #eaf0fc; }
.bank-layout { align-items: start; }
.question-row { align-items: flex-start; overflow-wrap: anywhere; }
.question-row button { flex-shrink: 0; }
.question-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.question-text { margin: 5px 0; white-space: pre-wrap; }
.question-row p:last-child { margin: 4px 0 0; }
.question-history { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 12px; }
.question-history summary { cursor: pointer; font-weight: 650; }
.history-item { margin-top: 8px; padding: 4px 0; overflow-wrap: anywhere; }
.history-item + .history-item { border-top: 1px solid var(--border); }
.form-error { color: #942b22; }
.form-error:empty { display: none; }
.questionnaire-builder { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 20px; }
.route-roster { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.route-notes { white-space: pre-wrap; overflow-wrap: anywhere; }
.campaign-territory {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 12px clamp(12px, 2vw, 28px);
  overflow: auto;
  border: 0;
  border-radius: 0;
  line-height: 1.3;
}
.campaign-territory::backdrop { background: #14294f80; }
.campaign-territory .top { margin-bottom: 6px; }
.campaign-territory :is(h2, h3, h4, p) { margin-block: 6px; }
.campaign-territory .field { margin-block: 6px; }
.campaign-territory .radio-map { margin-block: 8px; }
.campaign-territory .questionnaire-builder { margin-top: 12px; padding-top: 8px; }
.campaign-territory :is(th, td) { padding: 4px 8px; }
.campaign-territory .redatam-table tbody th { position: static; }
.campaign-territory table :is(.btn, select, input[type="number"]) {
  min-height: 32px;
  padding: 4px 8px;
  line-height: 1.25;
}
.campaign-territory .territory-selected > * { background: #edf3ff; }
#ruta-campo:not([hidden]) { margin: 16px 0; }
.questionnaire-items { padding-left: 1.5rem; }
.questionnaire-items li { padding: 10px 0; overflow-wrap: anywhere; }
.questionnaire-items li + li { border-top: 1px solid var(--border); }
.questionnaire-items p { margin: 0 0 6px; }
.redatam-table { max-height: 21rem; margin: .6rem 0; }
.redatam-table th { position: sticky; top: 0; }
.redatam-table input[type="checkbox"] { width: auto; }
.city-strip { display: flex; flex-wrap: nowrap; gap: .6rem; overflow-x: auto; padding: .2rem .2rem .6rem; }
.city-strip button { flex: 0 0 auto; white-space: nowrap; }
.city-strip button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: white; }
.city-census > h2 { margin-bottom: .2rem; }
.city-census > .small { margin-top: 0; }
.radio-map { margin: 1rem 0; }
.radio-map select { max-width: 20rem; }
.radio-map [data-map-view] { margin-top: .6rem; max-width: 760px; }
.radio-map [data-map-caption] { color: var(--ink); font-weight: 650; }
.radio-map svg { display: block; width: 100%; height: auto; background: #edf4f6; border: 1px solid var(--border); border-radius: 10px; }
.radio-outline { fill: #4274b6; fill-opacity: .08; stroke: #507499; stroke-width: 1; cursor: pointer; }
.radio-outline.selected { fill: #f49e37; fill-opacity: .28; stroke: #a14d08; stroke-width: 3; }

/* TERRITORIO 0.8 - Interfaz compacta */
body { line-height: 1.35; }
header { padding-top: 10px; padding-bottom: 10px; gap: 10px; }
nav button { padding: 7px 10px; }
main { padding-top: 14px; padding-bottom: 14px; }
.panel { padding: 15px 18px; margin-bottom: 10px; }
.top { margin-bottom: 10px; }
h1 { font-size: 26px; margin-bottom: 3px; }
h2 { margin-bottom: 10px; }
h3 { margin-bottom: 7px; }
.field { margin: 6px 0 9px; }
.field label { margin-bottom: 3px; }
input, select, textarea { padding: 7px 10px; }
.btn { padding: 8px 12px; }
th, td { padding: 7px 9px; }
.notice { padding: 9px 13px; margin-bottom: 12px; }
.row { padding: 7px 0; }
.grid, .grid3, .filters { gap: 10px; }
@media (max-width: 670px) {
  header { padding: 12px; }
  main { padding: 12px; }
  .panel { padding: 12px; }
}

/* Observatorio: tarjetas de navegacion y demostracion */

.observatory-shell{max-width:1120px;margin:0 auto}.observatory-hero{padding:28px 30px}
.observatory-eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#64748b;font-weight:700}
.observatory-title{margin:8px 0 4px;font-size:28px}.observatory-subtitle{color:#64748b;margin:0 0 20px}
.observatory-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.observatory-shell .observatory-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%;align-items:stretch}
.observatory-card{display:flex;flex-direction:column;text-align:left;align-items:flex-start;gap:12px;
padding:24px;border:1px solid #d8e0eb;background:#fff;border-radius:16px;color:#142b51;min-height:175px}
button.observatory-card{cursor:pointer;font:inherit;width:100%;box-sizing:border-box;appearance:none;background:#e9f0fb;border:1px solid #c6d7ef;border-radius:14px;color:#173761;text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:22px;min-height:165px;box-shadow:none}
button.observatory-card:not(:disabled):hover,button.observatory-card:focus-visible{background:#dce8fa;border-color:#426ab0;box-shadow:0 5px 18px #183e6b20}
.observatory-card h3{margin:0;font-size:19px}.observatory-card p{margin:0;color:#64748b;line-height:1.5}
.observatory-card-icon{font-size:25px;line-height:1}.observatory-shell button.observatory-card:disabled{cursor:not-allowed;opacity:.65;background:#e9f0fb;color:#173761}
.observatory-card small{margin-top:auto;color:#64748b}.observatory-demo-heading{margin:26px 0 12px}
@media(max-width:680px){.observatory-shell .observatory-cards{grid-template-columns:1fr}.observatory-hero{padding:20px}}


/* Observatorio demo: consultas compactas y graficos */
.demo-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.demo-head h2{margin:0}
.demo-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 12px;align-items:end;margin:10px 0}
.demo-filters .field{margin:0}
.demo-filters #demo-pregunta-wrap{grid-column:span 2}
.demo-radio-control button{width:100%;text-align:left}
.demo-question{margin:12px 0;padding:18px 20px}
.demo-question-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.demo-question-grid table{font-size:13px}
.demo-chart{display:block;width:100%;min-width:0;padding:6px 4px}
.demo-bar-item{display:block;width:100%;min-width:0;margin-bottom:14px}
.demo-bar-label{display:flex;justify-content:space-between;gap:8px;font-size:13px;margin-bottom:3px}
.demo-bar-track{display:block;width:100%!important;min-width:0;height:15px;border-radius:8px;background:#e9eef7;overflow:hidden}
.demo-bar-fill{display:block;height:100%;background:#3764ba;border-radius:8px}
.demo-bar-progress{display:block;appearance:none;-webkit-appearance:none;width:100%;height:17px;border:0;border-radius:9px;overflow:hidden;background:#e9eef7}
.demo-bar-progress::-webkit-progress-bar{background:#e9eef7;border-radius:9px}
.demo-bar-progress::-webkit-progress-value{background:#3764ba;border-radius:9px}
.demo-bar-progress::-moz-progress-bar{background:#3764ba;border-radius:9px}
.demo-chart .demo-bar-svg{display:block;width:100%;height:17px;max-width:none;overflow:visible}
.demo-dialog{border:1px solid #cbd8ed;border-radius:16px;padding:22px;width:min(520px,calc(100vw - 32px));color:var(--ink);box-shadow:0 16px 50px #14294f30}
.demo-dialog::backdrop{background:#12244880}
.demo-radio-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:50vh;overflow:auto;margin:15px 0}
.demo-radio-check{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid #e1e8f3;border-radius:8px}
.demo-radio-check input{width:auto}
@media(max-width:850px){.demo-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-question-grid{grid-template-columns:1fr}}
@media(max-width:520px){.demo-filters{grid-template-columns:1fr}.demo-filters #demo-pregunta-wrap{grid-column:auto}}

/* Barras del demo: porcentajes mediante CSS externo, compatible con CSP estricta. */
.demo-chart .demo-bar-track{display:block;width:100%;height:15px;background:#e9eef7;border-radius:8px;overflow:hidden}
.demo-chart .demo-bar-fill{display:block;height:100%;background:#3764ba;border-radius:8px}
.demo-chart .demo-pct-0{width:0%}
.demo-chart .demo-pct-1{width:1%}
.demo-chart .demo-pct-2{width:2%}
.demo-chart .demo-pct-3{width:3%}
.demo-chart .demo-pct-4{width:4%}
.demo-chart .demo-pct-5{width:5%}
.demo-chart .demo-pct-6{width:6%}
.demo-chart .demo-pct-7{width:7%}
.demo-chart .demo-pct-8{width:8%}
.demo-chart .demo-pct-9{width:9%}
.demo-chart .demo-pct-10{width:10%}
.demo-chart .demo-pct-11{width:11%}
.demo-chart .demo-pct-12{width:12%}
.demo-chart .demo-pct-13{width:13%}
.demo-chart .demo-pct-14{width:14%}
.demo-chart .demo-pct-15{width:15%}
.demo-chart .demo-pct-16{width:16%}
.demo-chart .demo-pct-17{width:17%}
.demo-chart .demo-pct-18{width:18%}
.demo-chart .demo-pct-19{width:19%}
.demo-chart .demo-pct-20{width:20%}
.demo-chart .demo-pct-21{width:21%}
.demo-chart .demo-pct-22{width:22%}
.demo-chart .demo-pct-23{width:23%}
.demo-chart .demo-pct-24{width:24%}
.demo-chart .demo-pct-25{width:25%}
.demo-chart .demo-pct-26{width:26%}
.demo-chart .demo-pct-27{width:27%}
.demo-chart .demo-pct-28{width:28%}
.demo-chart .demo-pct-29{width:29%}
.demo-chart .demo-pct-30{width:30%}
.demo-chart .demo-pct-31{width:31%}
.demo-chart .demo-pct-32{width:32%}
.demo-chart .demo-pct-33{width:33%}
.demo-chart .demo-pct-34{width:34%}
.demo-chart .demo-pct-35{width:35%}
.demo-chart .demo-pct-36{width:36%}
.demo-chart .demo-pct-37{width:37%}
.demo-chart .demo-pct-38{width:38%}
.demo-chart .demo-pct-39{width:39%}
.demo-chart .demo-pct-40{width:40%}
.demo-chart .demo-pct-41{width:41%}
.demo-chart .demo-pct-42{width:42%}
.demo-chart .demo-pct-43{width:43%}
.demo-chart .demo-pct-44{width:44%}
.demo-chart .demo-pct-45{width:45%}
.demo-chart .demo-pct-46{width:46%}
.demo-chart .demo-pct-47{width:47%}
.demo-chart .demo-pct-48{width:48%}
.demo-chart .demo-pct-49{width:49%}
.demo-chart .demo-pct-50{width:50%}
.demo-chart .demo-pct-51{width:51%}
.demo-chart .demo-pct-52{width:52%}
.demo-chart .demo-pct-53{width:53%}
.demo-chart .demo-pct-54{width:54%}
.demo-chart .demo-pct-55{width:55%}
.demo-chart .demo-pct-56{width:56%}
.demo-chart .demo-pct-57{width:57%}
.demo-chart .demo-pct-58{width:58%}
.demo-chart .demo-pct-59{width:59%}
.demo-chart .demo-pct-60{width:60%}
.demo-chart .demo-pct-61{width:61%}
.demo-chart .demo-pct-62{width:62%}
.demo-chart .demo-pct-63{width:63%}
.demo-chart .demo-pct-64{width:64%}
.demo-chart .demo-pct-65{width:65%}
.demo-chart .demo-pct-66{width:66%}
.demo-chart .demo-pct-67{width:67%}
.demo-chart .demo-pct-68{width:68%}
.demo-chart .demo-pct-69{width:69%}
.demo-chart .demo-pct-70{width:70%}
.demo-chart .demo-pct-71{width:71%}
.demo-chart .demo-pct-72{width:72%}
.demo-chart .demo-pct-73{width:73%}
.demo-chart .demo-pct-74{width:74%}
.demo-chart .demo-pct-75{width:75%}
.demo-chart .demo-pct-76{width:76%}
.demo-chart .demo-pct-77{width:77%}
.demo-chart .demo-pct-78{width:78%}
.demo-chart .demo-pct-79{width:79%}
.demo-chart .demo-pct-80{width:80%}
.demo-chart .demo-pct-81{width:81%}
.demo-chart .demo-pct-82{width:82%}
.demo-chart .demo-pct-83{width:83%}
.demo-chart .demo-pct-84{width:84%}
.demo-chart .demo-pct-85{width:85%}
.demo-chart .demo-pct-86{width:86%}
.demo-chart .demo-pct-87{width:87%}
.demo-chart .demo-pct-88{width:88%}
.demo-chart .demo-pct-89{width:89%}
.demo-chart .demo-pct-90{width:90%}
.demo-chart .demo-pct-91{width:91%}
.demo-chart .demo-pct-92{width:92%}
.demo-chart .demo-pct-93{width:93%}
.demo-chart .demo-pct-94{width:94%}
.demo-chart .demo-pct-95{width:95%}
.demo-chart .demo-pct-96{width:96%}
.demo-chart .demo-pct-97{width:97%}
.demo-chart .demo-pct-98{width:98%}
.demo-chart .demo-pct-99{width:99%}
.demo-chart .demo-pct-100{width:100%}

/* Comparaciones descriptivas del observatorio de demostracion. */
.comparison-table{width:100%;margin-bottom:18px}
.comparison-legend{display:flex;flex-wrap:wrap;gap:20px;margin:14px 0}
.comparison-legend span{display:inline-flex;align-items:center;gap:7px;font-size:13px}
.comparison-key{display:inline-block;width:14px;height:14px;border-radius:4px}
.comparison-key-a{background:#3764ba}
.comparison-key-b{background:#dc873b}
.comparison-row{margin:14px 0 20px}
.comparison-row>strong{display:block;margin-bottom:6px;font-size:14px}
.comparison-bars{display:grid;gap:5px}
.comparison-bar-line{display:grid;grid-template-columns:minmax(0,1fr) 62px;gap:10px;align-items:center;font-size:13px}
.comparison-bar-line>span{text-align:right;font-variant-numeric:tabular-nums}
.comparison-bar-track{width:100%;height:15px;border-radius:8px;background:#e9eef7;overflow:hidden}
.comparison-bar-fill{height:100%;border-radius:8px}
.comparison-bar-a{background:#3764ba}
.comparison-bar-b{background:#dc873b}

/* Reutilizar la escala 0-100 del demo tambien en las barras comparativas. */
.comparison-bar-fill.demo-pct-0{width:0%}
.comparison-bar-fill.demo-pct-1{width:1%}
.comparison-bar-fill.demo-pct-2{width:2%}
.comparison-bar-fill.demo-pct-3{width:3%}
.comparison-bar-fill.demo-pct-4{width:4%}
.comparison-bar-fill.demo-pct-5{width:5%}
.comparison-bar-fill.demo-pct-6{width:6%}
.comparison-bar-fill.demo-pct-7{width:7%}
.comparison-bar-fill.demo-pct-8{width:8%}
.comparison-bar-fill.demo-pct-9{width:9%}
.comparison-bar-fill.demo-pct-10{width:10%}
.comparison-bar-fill.demo-pct-11{width:11%}
.comparison-bar-fill.demo-pct-12{width:12%}
.comparison-bar-fill.demo-pct-13{width:13%}
.comparison-bar-fill.demo-pct-14{width:14%}
.comparison-bar-fill.demo-pct-15{width:15%}
.comparison-bar-fill.demo-pct-16{width:16%}
.comparison-bar-fill.demo-pct-17{width:17%}
.comparison-bar-fill.demo-pct-18{width:18%}
.comparison-bar-fill.demo-pct-19{width:19%}
.comparison-bar-fill.demo-pct-20{width:20%}
.comparison-bar-fill.demo-pct-21{width:21%}
.comparison-bar-fill.demo-pct-22{width:22%}
.comparison-bar-fill.demo-pct-23{width:23%}
.comparison-bar-fill.demo-pct-24{width:24%}
.comparison-bar-fill.demo-pct-25{width:25%}
.comparison-bar-fill.demo-pct-26{width:26%}
.comparison-bar-fill.demo-pct-27{width:27%}
.comparison-bar-fill.demo-pct-28{width:28%}
.comparison-bar-fill.demo-pct-29{width:29%}
.comparison-bar-fill.demo-pct-30{width:30%}
.comparison-bar-fill.demo-pct-31{width:31%}
.comparison-bar-fill.demo-pct-32{width:32%}
.comparison-bar-fill.demo-pct-33{width:33%}
.comparison-bar-fill.demo-pct-34{width:34%}
.comparison-bar-fill.demo-pct-35{width:35%}
.comparison-bar-fill.demo-pct-36{width:36%}
.comparison-bar-fill.demo-pct-37{width:37%}
.comparison-bar-fill.demo-pct-38{width:38%}
.comparison-bar-fill.demo-pct-39{width:39%}
.comparison-bar-fill.demo-pct-40{width:40%}
.comparison-bar-fill.demo-pct-41{width:41%}
.comparison-bar-fill.demo-pct-42{width:42%}
.comparison-bar-fill.demo-pct-43{width:43%}
.comparison-bar-fill.demo-pct-44{width:44%}
.comparison-bar-fill.demo-pct-45{width:45%}
.comparison-bar-fill.demo-pct-46{width:46%}
.comparison-bar-fill.demo-pct-47{width:47%}
.comparison-bar-fill.demo-pct-48{width:48%}
.comparison-bar-fill.demo-pct-49{width:49%}
.comparison-bar-fill.demo-pct-50{width:50%}
.comparison-bar-fill.demo-pct-51{width:51%}
.comparison-bar-fill.demo-pct-52{width:52%}
.comparison-bar-fill.demo-pct-53{width:53%}
.comparison-bar-fill.demo-pct-54{width:54%}
.comparison-bar-fill.demo-pct-55{width:55%}
.comparison-bar-fill.demo-pct-56{width:56%}
.comparison-bar-fill.demo-pct-57{width:57%}
.comparison-bar-fill.demo-pct-58{width:58%}
.comparison-bar-fill.demo-pct-59{width:59%}
.comparison-bar-fill.demo-pct-60{width:60%}
.comparison-bar-fill.demo-pct-61{width:61%}
.comparison-bar-fill.demo-pct-62{width:62%}
.comparison-bar-fill.demo-pct-63{width:63%}
.comparison-bar-fill.demo-pct-64{width:64%}
.comparison-bar-fill.demo-pct-65{width:65%}
.comparison-bar-fill.demo-pct-66{width:66%}
.comparison-bar-fill.demo-pct-67{width:67%}
.comparison-bar-fill.demo-pct-68{width:68%}
.comparison-bar-fill.demo-pct-69{width:69%}
.comparison-bar-fill.demo-pct-70{width:70%}
.comparison-bar-fill.demo-pct-71{width:71%}
.comparison-bar-fill.demo-pct-72{width:72%}
.comparison-bar-fill.demo-pct-73{width:73%}
.comparison-bar-fill.demo-pct-74{width:74%}
.comparison-bar-fill.demo-pct-75{width:75%}
.comparison-bar-fill.demo-pct-76{width:76%}
.comparison-bar-fill.demo-pct-77{width:77%}
.comparison-bar-fill.demo-pct-78{width:78%}
.comparison-bar-fill.demo-pct-79{width:79%}
.comparison-bar-fill.demo-pct-80{width:80%}
.comparison-bar-fill.demo-pct-81{width:81%}
.comparison-bar-fill.demo-pct-82{width:82%}
.comparison-bar-fill.demo-pct-83{width:83%}
.comparison-bar-fill.demo-pct-84{width:84%}
.comparison-bar-fill.demo-pct-85{width:85%}
.comparison-bar-fill.demo-pct-86{width:86%}
.comparison-bar-fill.demo-pct-87{width:87%}
.comparison-bar-fill.demo-pct-88{width:88%}
.comparison-bar-fill.demo-pct-89{width:89%}
.comparison-bar-fill.demo-pct-90{width:90%}
.comparison-bar-fill.demo-pct-91{width:91%}
.comparison-bar-fill.demo-pct-92{width:92%}
.comparison-bar-fill.demo-pct-93{width:93%}
.comparison-bar-fill.demo-pct-94{width:94%}
.comparison-bar-fill.demo-pct-95{width:95%}
.comparison-bar-fill.demo-pct-96{width:96%}
.comparison-bar-fill.demo-pct-97{width:97%}
.comparison-bar-fill.demo-pct-98{width:98%}
.comparison-bar-fill.demo-pct-99{width:99%}
.comparison-bar-fill.demo-pct-100{width:100%}

/* Bases y recuentos de las comparaciones. */
.comparison-base-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:10px 0}
.comparison-base-card{display:flex;flex-direction:column;gap:3px;border:1px solid #d9e3f4;border-left:4px solid #3764ba;border-radius:9px;padding:10px 14px}
.comparison-base-card span{font-size:14px}
.comparison-base-card small{font-size:12px;color:#49617d}
.comparison-base-critical{border-left-color:#b45309;background:#fff7ed}
.comparison-base-caution{border-left-color:#c18b2d;background:#fffbeb}
.comparison-base-notice{border-left:3px solid #c18b2d;padding:8px 12px;background:#fffbeb}
.comparison-bar-line{grid-template-columns:minmax(0,1fr) 145px}
@media(max-width:650px){.comparison-base-summary{grid-template-columns:1fr}.comparison-bar-line{grid-template-columns:minmax(0,1fr) 125px}}

/* Selector territorial en ventana amplia, apto para presentaciones. */
.demo-map-dialog{width:min(1100px,95vw);max-width:95vw;max-height:92vh;overflow:auto;padding:24px;border:1px solid #cbd9ef;border-radius:16px}
.demo-map-dialog::backdrop{background:rgba(9,27,59,.65)}
.demo-map-dialog #demo-dialog-map .radio-map{width:100%;max-width:none}
.demo-map-dialog #demo-dialog-map [data-map-view]{width:100%;max-width:none}
.demo-map-dialog #demo-dialog-map svg{display:block;width:100%;height:auto;max-height:64vh}
.demo-map-dialog #demo-radio-checks{max-height:110px;overflow:auto}
.demo-map-dialog #demo-radio-summary{font-weight:700;color:#17345f}

/* Referencias de cobertura para el selector de radios del observatorio. */
.radio-map-legend{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:8px 0;font-size:13px;font-weight:600;color:#27405f}
.radio-map-legend span{display:inline-flex;gap:7px;align-items:center}
.radio-map-swatch{display:inline-block;width:15px;height:15px;border:1px solid #49617d;border-radius:3px}
.radio-map-with-cases{background:#f59e0b}
.radio-map-selected{background:#2563eb}
.radio-map-empty{background:transparent}

/* Modal territorial de pantalla completa: mapa y acciones siempre accesibles. */
.demo-map-dialog{box-sizing:border-box;width:calc(100vw - 24px);max-width:calc(100vw - 24px);height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);margin:auto;padding:18px 24px;overflow:auto}
.demo-map-dialog #demo-dialog-map svg{max-height:none}
.demo-map-dialog #demo-dialog-map [data-map-view] svg{height:min(52vh,550px);width:100%}
.demo-map-dialog #demo-radio-checks{max-height:145px}
.demo-map-dialog .demo-radio-locate{margin-left:auto;padding:3px 9px;font-size:12px}
.demo-map-dialog .demo-radio-check{display:flex;align-items:center;gap:8px}
.demo-map-dialog > .actions:last-child{position:sticky;bottom:-18px;z-index:3;background:var(--surface,#fff);padding:12px 0 4px;border-top:1px solid #d8e4f4}

/* Buscador de barrios del observatorio: ubicacion geográfica, sin asignacion automatica. */
.demo-neighborhood-tools{display:grid;grid-template-columns:minmax(170px,1fr) minmax(200px,2fr);gap:8px 14px;align-items:center;margin:10px 0 14px}
.demo-neighborhood-tools label{font-weight:700}
.demo-neighborhood-tools input,.demo-neighborhood-tools select{width:100%;min-width:0;padding:9px;border:1px solid #cbd8ed;border-radius:8px}
.demo-neighborhood-tools p{grid-column:1/-1;margin:0}
.radio-outline.neighborhood-outline{fill:#16a34a!important;fill-opacity:.2!important;stroke:#15803d!important;stroke-width:3!important;pointer-events:none}
@media(max-width:700px){.demo-neighborhood-tools{grid-template-columns:1fr}}

.demo-barrio-actions{display:flex;gap:8px;flex-wrap:wrap}
.demo-barrios-elegidos{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;align-items:center;min-height:30px}
.demo-barrios-elegidos [data-quitar-barrio]{border:1px solid #15803d;background:#dcfce7;color:#14532d}

.demo-barrio-list{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:5px 12px;max-height:170px;overflow-y:auto;padding:9px;border:1px solid #cbd8ed;border-radius:9px;background:#f8fafc}
.demo-barrio-option{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;font-weight:400!important}
.demo-barrio-option:hover{background:#e2e8f0}
.demo-barrio-option:has(input:checked){background:#dcfce7;color:#14532d}
.demo-barrio-option input{width:16px;height:16px;flex:0 0 16px;accent-color:#15803d}

/* Selector de barrios flotante: permite explorar el mapa sin ocupar su altura. */
.demo-map-dialog{position:relative}
.demo-map-dialog .demo-neighborhood-tools{position:absolute;top:88px;left:28px;z-index:15;display:block;width:min(390px,calc(100% - 56px));max-height:min(70vh,620px);overflow:hidden;margin:0;padding:0;background:#fff;border:1px solid #a8bddb;border-radius:12px;box-shadow:0 8px 28px rgba(17,39,73,.25)}
.demo-barrio-panel-header{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#e9f0fc;border-bottom:1px solid #cbd8ed;cursor:grab;touch-action:none;user-select:none}
.demo-barrio-panel-header:active{cursor:grabbing}
.demo-barrio-panel-header strong{font-size:14px;white-space:nowrap}
.demo-barrio-panel-hint{font-size:11px;color:#64748b;margin-left:auto}
.demo-barrio-panel-header button{flex-shrink:0}
.demo-barrio-panel-contenido{display:grid;gap:8px;padding:12px;max-height:min(60vh,540px);overflow-y:auto}
.demo-neighborhood-tools .demo-barrio-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:220px}
.demo-neighborhood-tools .demo-barrio-option{font-size:13px;padding:5px 3px}
.demo-neighborhood-tools .demo-barrios-elegidos{grid-column:auto}
.demo-neighborhood-tools .demo-barrio-panel-contenido p{font-size:12px}
.demo-neighborhood-tools.collapsed .demo-barrio-panel-contenido{display:none}
.demo-neighborhood-tools.collapsed{width:min(330px,calc(100% - 56px))}
@media(max-width:650px){.demo-map-dialog .demo-neighborhood-tools{left:12px;top:70px;width:min(340px,calc(100% - 24px))}.demo-barrio-panel-hint{display:none}}

/* Barrios clicables: relleno transparente para capturar clic en todo el poligono. */
.radio-outline.neighborhood-outline{pointer-events:all;cursor:pointer;fill:transparent;stroke:#64748b;stroke-width:1.2}
.radio-outline.neighborhood-outline:hover{fill:#86efac!important;fill-opacity:.35!important;stroke:#166534!important;stroke-width:2!important}
.radio-outline.neighborhood-outline[style*="fill:"]{fill:#16a34a!important;fill-opacity:.22!important;stroke:#15803d!important;stroke-width:2.5!important}

/* Los barrios sin seleccionar no deben parecer seleccionados. */
.radio-outline.neighborhood-outline:not([style*="fill:"]){fill:transparent!important;fill-opacity:0!important;stroke:#64748b!important;stroke-width:.9!important}
.radio-outline.neighborhood-outline:not([style*="fill:"]):hover{fill:#86efac!important;fill-opacity:.28!important;stroke:#166534!important;stroke-width:2!important}
.demo-map-dialog #demo-dialog-map [data-map-view]{cursor:grab}
.demo-map-dialog #demo-dialog-map [data-map-view]:active{cursor:grabbing}

/* El mapa es el selector principal: ocultar el listado redundante de radios.
   Se conserva en el DOM para mantener la sincronizacion y los filtros existentes. */
.demo-map-dialog .demo-radio-checks{display:none!important}
.demo-map-dialog #demo-dialog-map{min-height:490px}

.demo-source-switch{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0}
.demo-source-switch[hidden],.demo-municipal-reference[hidden]{display:none!important}
.demo-source-switch label{font-weight:700}
.demo-source-switch select{padding:8px 10px;max-width:100%;border:1px solid #b9c8de;border-radius:8px;background:white}
.demo-municipal-reference{padding:10px 12px;margin:8px 0;border:1px solid #cbd8ed;border-radius:10px;background:#f8fafc}
.demo-municipal-reference p{margin:5px 0 10px;font-size:13px}
.demo-municipal-zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:5px}
.demo-municipal-zone{font-size:12px;padding:6px 8px;background:white;border:1px solid #e2e8f0;border-radius:6px}

/* Selector flotante alterna barrios y zonas municipales sin mezclar unidades. */
.demo-map-dialog #demo-municipal-picker[hidden],.demo-map-dialog #demo-barrio-picker[hidden]{display:none!important}
.demo-map-dialog #demo-municipal-picker,.demo-map-dialog #demo-barrio-picker{display:grid;gap:8px;min-width:0}
.demo-map-dialog #demo-municipal-picker input[type="search"]{width:100%;padding:9px;border:1px solid #cbd8ed;border-radius:8px}
.demo-map-dialog .demo-zona-lista{display:grid;gap:5px;max-height:260px;overflow-y:auto;padding:8px;border:1px solid #cbd8ed;border-radius:8px;background:#f8fafc}
.demo-map-dialog .demo-zona-lista .demo-barrio-option{font-size:12px}
.demo-map-dialog #demo-zonas-elegidas{font-size:12px;color:#14532d}

/* Referencia municipal: mapa censal solo de orientacion, sin controles de radios. */
#demo-dialog-map.municipal-reference-only .radio-map>h3,
#demo-dialog-map.municipal-reference-only [data-map-caption],
#demo-dialog-map.municipal-reference-only .radio-map-legend{display:none!important}
#demo-dialog-map.municipal-reference-only .radio-outline:not(.neighborhood-outline){pointer-events:none!important;fill:transparent!important;fill-opacity:0!important;stroke:#94a3b8!important;stroke-width:.6!important}
#demo-dialog-map.municipal-reference-only .neighborhood-outline{pointer-events:none!important;fill:transparent!important;fill-opacity:0!important;stroke:transparent!important}
#demo-radio-todos[hidden],#demo-radio-ninguno[hidden]{display:none!important}

.demo-draft-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 12px;margin:6px 0;border:1px solid #c4b5fd;border-radius:9px;background:#faf5ff}
.demo-draft-tools[hidden]{display:none!important}
.demo-draft-tools strong{color:#5b21b6}
.demo-draft-tools label{font-size:13px;display:flex;gap:5px;align-items:center}
.demo-draft-tools .sub{flex-basis:100%;margin:0;font-size:12px}
.demo-draft-tools button{padding:6px 9px}

/* Prioridad a la cartografia en la consulta por area libre. */
.demo-draft-tools{padding:7px 10px;gap:6px;align-items:center}
.demo-draft-tools strong{font-size:13px}
.demo-draft-tools .sub{font-size:11px}
.demo-draft-tools #demo-gps-info{flex-basis:auto;font-size:12px}
.demo-map-dialog #demo-area-resultado:not([hidden]){padding:7px 10px;margin:5px 0;border-left:3px solid #7c3aed;background:#f5f3ff;font-size:13px}
.demo-map-dialog #demo-area-resultado p{margin:3px 0}
.demo-map-dialog #demo-dialog-map .radio-map{margin-top:4px}
.demo-map-dialog #demo-dialog-map [data-map-view]{min-height:540px}

/* Exploracion territorial: un unico metodo de seleccion por poligono. */
.demo-map-dialog #demo-source-switch,
.demo-map-dialog #demo-municipal-reference,
.demo-map-dialog #demo-barrio-panel,
.demo-map-dialog .demo-barrio-panel,
.demo-map-dialog #demo-radio-summary,
.demo-map-dialog #demo-radio-guardar,
.demo-map-dialog #demo-radio-todos,
.demo-map-dialog #demo-radio-ninguno,
.demo-map-dialog #demo-draft-export,
.demo-map-dialog #demo-area-campana-label,
.demo-map-dialog .radio-map > p.small.muted,
.demo-map-dialog .radio-map > h3,
.demo-map-dialog .radio-map-legend { display:none!important; }
.demo-map-dialog > h3 { margin:0 0 8px; white-space:normal; }
.demo-map-dialog .demo-draft-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:10px 12px; }
.demo-map-dialog .demo-draft-tools > strong { flex:0 0 auto; }
.demo-map-dialog .demo-draft-tools .demo-draft-instruction { flex:1 1 320px; }
.demo-map-dialog .demo-draft-tools .demo-draft-instruction input { display:none; }
.demo-map-dialog .demo-draft-tools > p.sub { flex-basis:100%; margin:0; }
.demo-map-dialog #demo-gps-info { flex-basis:100%; }
.demo-map-dialog #demo-draft-count { white-space:nowrap; }
.demo-map-dialog #demo-radio-cancelar { margin-left:auto; }

/* Sector libre: encabezado compacto para dar prioridad al mapa. */
.demo-map-dialog #demo-map-instructions{display:none!important}
.demo-map-dialog #demo-draft-tools{padding:6px 10px;row-gap:3px;margin:3px 0 5px}
.demo-map-dialog #demo-draft-count{order:10;font-size:12px;white-space:nowrap}
.demo-map-dialog #demo-gps-info{order:11;font-size:12px;white-space:nowrap}
.demo-map-dialog #demo-draft-tools>p.sub{order:12;font-size:11px;margin:0;flex-basis:100%}
.demo-map-dialog #demo-dialog-map{margin-top:2px}

/* Mapa de sectores: aprovechar la altura disponible de la ventana. */
.demo-map-dialog #demo-dialog-map [data-map-view] svg{height:clamp(620px,72vh,900px);max-height:none}
.demo-map-dialog #demo-dialog-map [data-map-view]{min-height:620px}

/* Consulta de sectores GPS reales en resultados de campanas. */
.real-sector-panel{margin:14px 0;padding:12px;border:1px solid #cbd9ef;border-radius:12px;background:#f8fbff}
.real-sector-panel h4{margin:0 0 6px}
.real-sector-panel .radio-map>h3,.real-sector-panel .radio-map [data-map-caption],.real-sector-panel .radio-map-legend{display:none}
.real-sector-panel #real-sector-map{margin-top:10px}
.real-sector-panel #real-sector-map .radio-map{max-width:none;width:100%}
.real-sector-panel #real-sector-map [data-map-view]{max-width:none;width:100%;cursor:crosshair}
.real-sector-panel #real-sector-map svg{width:100%;height:clamp(550px,70vh,850px);max-height:none}
.real-sector-panel #real-sector-map .radio-outline{pointer-events:none;fill:transparent!important;fill-opacity:0!important;stroke:#94a3b8;stroke-width:.5}
.real-sector-panel #real-sector-map .neighborhood-outline{pointer-events:none;stroke:transparent!important}