/* Marca unificada · Radar de Afectaciones Asocapitales */
:root{
  --midnight:#120A24;
  --eggplant:#21113B;
  --plum:#2D174A;
  --violet:#65428B;
  --lavender:#B889EA;
  --gold:#FFC21C;
  --warm-white:#F8F3F2;
  --soft-lavender:#F2EEF6;
  --deep-purple:#1D0D3A;
  --navy:var(--midnight);
  --navy2:var(--eggplant);
  --blue:var(--violet);
  --green:var(--violet);
  --purple:var(--lavender);
  --orange:var(--gold);
  --red:#9A315D;
  --cyan:var(--lavender);
  --yellow:var(--gold);
  --bg:var(--soft-lavender);
  --ink:var(--deep-purple);
  --muted:#645876;
  --line:#D8CBE5;
  --panel:#FFFDFC;
  --soft:#F8F5FB;
  --soft-blue:#ECE5F3;
  --brand:var(--plum);
  --brand-dark:var(--midnight);
  --accent:var(--violet);
  --danger:#9A315D;
}

body{font-family:Roboto,Arial,sans-serif;color:var(--deep-purple)}

/* Formulario público */
body:has(> header:not(.head)){
  background:
    radial-gradient(circle at 10% 9%,rgba(184,137,234,.34),transparent 24%),
    radial-gradient(circle at 88% 84%,rgba(255,194,28,.17),transparent 26%),
    linear-gradient(135deg,var(--midnight),var(--eggplant));
}
body > header:not(.head){
  background:rgba(18,10,36,.96);
  border-bottom:1px solid rgba(184,137,234,.42);
  box-shadow:0 12px 28px rgba(4,1,12,.24);
}
body > header:not(.head) .brand{border-left-color:rgba(248,243,242,.25)}
body > header:not(.head) .brand h1{color:var(--warm-white);font-family:Archivo,Roboto,sans-serif;letter-spacing:-.02em}
body > header:not(.head) .brand span,
body > header:not(.head) .status{color:#D9C5F0}
body > header:not(.head) .identity img{width:138px;max-height:52px;object-fit:contain}
body > header:not(.head) .progress{background:#34204E}
body > header:not(.head) .progress span{background:linear-gradient(90deg,var(--gold),var(--lavender))}
body > main .card,
body > main .panel{
  border-color:rgba(184,137,234,.42);
  background:rgba(255,253,252,.98);
  box-shadow:0 20px 48px rgba(7,2,20,.22);
}
body > main .card::before{background:linear-gradient(135deg,rgba(184,137,234,.18),transparent 56%)}
body > main .panel-title,
body > main h2,
body > main h3{color:var(--deep-purple)}
body > main button:not(.seg),
body > main .btn{background:var(--plum);border-color:var(--plum);color:var(--warm-white)}
body > main button:not(.seg):hover,
body > main .btn:hover{background:var(--violet);border-color:var(--violet)}
body > main input,
body > main select,
body > main textarea{border-color:#C9B4DA}
body > main input:focus,
body > main select:focus,
body > main textarea:focus{outline-color:var(--lavender);border-color:var(--violet)}

/* Inicio del formulario: tarjetas de tipo de reporte */
body > main .grid .choice{
  min-height:188px;
  padding:22px 20px 18px;
  border:1px solid #D8CBE5;
  border-top:4px solid var(--lavender);
  border-radius:14px;
  background:#FFFDFC;
  color:var(--deep-purple);
  box-shadow:0 10px 24px rgba(29,13,58,.08);
}
body > main .grid .choice:hover,
body > main .grid .choice:focus-visible{
  background:#F8F2FC;
  border-color:var(--violet);
  border-top-color:var(--gold);
  box-shadow:0 16px 30px rgba(29,13,58,.16);
  transform:translateY(-3px);
}
body > main .grid .choice .option-head{gap:11px;padding-bottom:13px;border-bottom-color:#DED2E9}
body > main .grid .choice .icon{width:25px;height:25px;color:var(--violet)}
body > main .grid .choice strong{
  color:var(--deep-purple);
  font-family:Archivo,Roboto,sans-serif;
  font-size:clamp(17px,1.75vw,21px);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.025em;
}
body > main .grid .choice .choice-copy{gap:5px}
body > main .grid .choice .option-role{color:#3B2856;font-size:14px;font-weight:800}
body > main .grid .choice small{color:#695D79;font-size:14px;line-height:1.45}
body > main .grid .choice .option-action{
  color:var(--plum);
  border-top-color:#DED2E9;
  font-size:14px;
  font-weight:800;
}
body > main .grid .choice:hover .option-action{color:#6E3F0B}
body > main .card .eyebrow{color:var(--violet);font-weight:800;letter-spacing:.08em}
body > main .card .lead{color:#625673;line-height:1.48}

/* Tablero institucional */
.app{background:var(--soft-lavender)}
.app .side{
  background:linear-gradient(180deg,var(--midnight) 0%,var(--eggplant) 58%,#170C2C 100%);
  border-right:1px solid rgba(184,137,234,.24);
}
.app .brand-logo{width:164px;filter:none;content:url('/imagenes/LOGO%20ASOCAPITALES%20BLANCO.png')}
.app .side-qr-trigger img{content:url('/imagenes/LOGO%20ASOCAPITALES%20BLANCO.png')}
.app .logo span,.app .nav-title{color:#D9C5F0}
.app .nav button,.app .side-new,.app .side-toggle{color:#F8F3F2}
.app .nav button.active,.app .nav button:hover{background:var(--violet);color:var(--warm-white)}
.app .side-new,.app .side-toggle{border-color:rgba(184,137,234,.42);background:rgba(255,255,255,.06)}
.app .side-new:hover,.app .side-toggle:hover{background:var(--violet)}
.app .main{background:linear-gradient(180deg,#F8F5FB 0%,var(--soft-lavender) 100%)}
.app .head h1{color:var(--deep-purple);font-family:Archivo,Roboto,sans-serif;letter-spacing:-.045em}
.app .head p{color:#695D79}
.app .head-actions .filter,
.app .filterbar{background:var(--plum);border-color:var(--plum);color:var(--warm-white)}
.app .head-actions button,
.app .table-btn,
.app .action,
.app .detail-toggle,
.app .support-btn{border-color:#BFA8D5;color:var(--plum)}
.app .panel,
.app .city-shell,
.app .record-card,
.app .qr-access-card{border-color:#D9CBE7;box-shadow:0 10px 28px rgba(29,13,58,.08)}
.app .panel h2,
.app .city-head h2,
.app .record-head h3,
.app .qr-access-head h3,
.app .detail-item span{color:var(--deep-purple)}
.app .kpi{border-color:#D9CBE7;background:#FFFDFC;box-shadow:0 8px 22px rgba(29,13,58,.07)}
.app .kpi b,.app .state b,.app .donut-center b,.app .big b{color:var(--plum)}
.app .kpi span,.app .state span,.app .head-actions,.app .detail-item b{color:#6C607A}
.app .chip{background:#3A2159;border-color:rgba(255,255,255,.28)}
.app .chip.active,.app .chip:hover{background:var(--gold);border-color:var(--gold);color:var(--midnight)}
.app th{background:#EDE4F4;color:var(--deep-purple)}
.app td{color:#342047}
.app .table-wrap,.app .detail-item,.app .photo-card{border-color:#E0D4EA}
.app .record-modal,.app .qr-access-modal{background:rgba(18,10,36,.7)}
.app .full,.app .close,.app .qr-modal-actions .primary{background:var(--plum);border-color:var(--plum)}
.app .city-tab.active,.app .date-btn.active{background:var(--plum);border-color:var(--plum)}
.app .city-option:hover,.app .city-option.active{background:var(--violet);border-color:var(--violet)}
.app .map{height:360px;background:#FAF8FC}
.app .colombia-map{background-color:#FAF8FC;background-image:linear-gradient(rgba(101,66,139,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(101,66,139,.09) 1px,transparent 1px)}
.app .dept{fill:#A7B9C8;stroke:#FFFDFC}
.app .dept.affected{fill:#B889EA}
.app .dept-label{display:none}
.app svg.city-scoped .dept-label{display:block;fill:#2D174A}
.app .city-count{stroke:#2D174A}
.app .city-pin{fill:#FFC21C;stroke:#2D174A;stroke-width:2.4;filter:drop-shadow(0 3px 5px rgba(45,23,74,.3))}
.app .epicenter{fill:#9A315D}
.app .epicenter-ring{stroke:#9A315D}
.app .map-legend{border-color:#D9CBE7;color:#3B2A50;background:rgba(255,253,252,.96)}
.app .zoom-ui button{border-color:#CDBCE0;background:#FFFDFC;color:var(--plum)}

@media(max-width:760px){
  body > header:not(.head) .bar{align-items:flex-start}
  body > header:not(.head) .identity img{width:104px}
  body > header:not(.head) .brand{padding-left:10px}
  body > header:not(.head) .brand h1{font-size:14px}
}