/* ciudadano.css */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',Arial,sans-serif;background:#F4F6F9;font-size:13px;}

 
.ciud-header{background:#B11816;color:#fff;padding:12px 24px;}
.ciud-header-top{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.hdr-left{display:flex;align-items:center;gap:14px;}
.hdr-logo{height:40px;border-radius:4px;}
.ciud-header h1{font-size:14px;font-weight:900;letter-spacing:.2px;line-height:1.3;}
.hdr-sub{font-size:10px;opacity:.75;margin-top:2px;}
.hdr-right{display:flex;align-items:center;gap:6px;white-space:nowrap;text-align: right;
  font-size:11px;opacity:.85;}
.icon-clock{opacity:.8;flex-shrink:0;}

 
.kpi-strip{
  PADDING-TOP: 4PX;
  background:#fff;
  border-bottom:1px solid #E2E5EA;
  display:flex;gap:0;
}
.kpi-box{flex:1;text-align:center;padding:14px 12px;
  border-right:1px solid #E2E5EA;}
.kpi-box:last-child{border-right:none;}
.kpi-val{font-size:30px;font-weight:900;color:#B11816;line-height:1;}
.kpi-lbl{font-size:9px;font-weight:800;color:#9ca3af;
  text-transform:uppercase;letter-spacing:.8px;margin-top:5px;}
.kpi-note{font-size:8px;color:#b0b7c3;margin-top:4px;line-height:1.4;
  max-width:200px;margin-left:auto;margin-right:auto;}

 
@keyframes shimmer{
  0%{background-position:-400px 0}
  100%{background-position:400px 0}
}
.skeleton{
  background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
  background-size:800px 100%;
  animation:shimmer 1.5s infinite;
  border-radius:4px;
  color:transparent !important;
  min-width:60px;
  display:inline-block;
}
.sk-row td{padding:10px 12px;}
.sk-line{height:14px;border-radius:6px;
  background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);
  background-size:800px 100%;
  animation:shimmer 1.5s infinite;
  width:100%;}

 
.ciud-main{padding:20px 24px;}

 
.mapa-card{background:#fff;border-radius:12px;
  box-shadow:0 2px 12px rgba(0,0,0,.07);
  overflow:hidden;margin-bottom:18px;}
.mapa-hdr{padding:12px 16px;display:flex;align-items:center;
  justify-content:space-between;border-bottom:1px solid #f0f0f0;}
.mapa-lbl{font-size:11px;font-weight:800;color:#B11816;
  text-transform:uppercase;letter-spacing:.8px;}
.mapa-controles{display:flex;gap:8px;}
.ui-select-sm{padding:6px 10px;border:1.5px solid #E2E5EA;border-radius:7px;
  font-size:11px;font-family:inherit;outline:none;background:#fff;cursor:pointer;}
.ui-select-sm:focus{border-color:#B11816;}
.mapa-canvas{height:420px;width:100%;}

 
.bubble-pais{
  display:flex;align-items:center;justify-content:center;
  background:#B11816;color:#fff;border-radius:50%;
  font-weight:800;border:2px solid rgba(255,255,255,.4);
  box-shadow:0 2px 8px rgba(177,24,22,.4);
  cursor:pointer;transition:transform .15s;
}
.bubble-pais:hover{transform:scale(1.1);}

 
.filtros-bar{background:#fff;border-radius:10px;padding:14px 18px;
  margin-bottom:14px;box-shadow:0 1px 6px rgba(0,0,0,.06);
  display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;}
.filtro-group{display:flex;flex-direction:column;gap:4px;flex:1;min-width:160px;}
.filtro-group label{font-size:9px;font-weight:800;color:#9ca3af;
  text-transform:uppercase;letter-spacing:.7px;}
.filtro-group select{padding:9px 12px;border:1.5px solid #E2E5EA;
  border-radius:7px;font-size:12px;font-family:inherit;outline:none;
  background:#fff;cursor:pointer;}
.filtro-group select:focus{border-color:#B11816;}
.btn-limpiar{padding:9px 18px;background:#F7F8FA;border:1.5px solid #E2E5EA;
  border-radius:7px;font-size:12px;font-weight:700;cursor:pointer;
  font-family:inherit;color:#374151;transition:all .2s;align-self:flex-end;}
.btn-limpiar:hover{background:#E2E5EA;}
.contador{font-size:11px;color:#9ca3af;margin-bottom:10px;font-weight:600;}

 
.tabla-wrap{background:#fff;border-radius:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);overflow:hidden;}
.tabla-wrap table{width:100%;border-collapse:collapse;}
.tabla-wrap thead tr{background:#F7F8FA;position:sticky;top:0;z-index:1;}
.tabla-wrap th{padding:10px 12px;text-align:left;font-size:9px;font-weight:800;
  color:#6B7280;border-bottom:2px solid #E2E5EA;text-transform:uppercase;
  letter-spacing:.5px;white-space:nowrap;}
.tabla-wrap td{padding:9px 12px;border-bottom:1px solid #f3f4f6;
  color:#374151;font-size:12px;}
.tabla-wrap tr:hover td{background:#FFF8F8;}
.tabla-wrap tr:last-child td{border-bottom:none;}

.tag-cont{display:inline-block;padding:2px 8px;border-radius:20px;
  font-size:9px;font-weight:800;text-transform:uppercase;}
.tag-cont.africa{background:#FEF3C7;color:#92400E;}
.tag-cont.america{background:#DBEAFE;color:#1E40AF;}
.tag-cont.asia{background:#FDE8FF;color:#7E22CE;}
.tag-cont.europa{background:#D1FAE5;color:#065F46;}
.tag-cont.oceania{background:#E0F2FE;color:#0369A1;}
.tag-cont.default{background:#F3F4F6;color:#6B7280;}

.btn-detalle{background:none;border:1.5px solid #B11816;border-radius:6px;
  padding:5px 12px;font-size:10px;font-weight:700;color:#B11816;
  cursor:pointer;white-space:nowrap;transition:all .2s;}
.btn-detalle:hover{background:#B11816;color:#fff;}

 
.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);
  z-index:9000;align-items:center;justify-content:center;padding:20px;}
.modal-backdrop.open{display:flex;}
.modal-box{background:#fff;border-radius:14px;width:100%;max-width:680px;
  max-height:90vh;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.3);}
.modal-hdr{background:#B11816;color:#fff;padding:14px 20px;
  display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0;}
.modal-hdr h2{font-size:13px;font-weight:800;line-height:1.3;}
.mhdr-sub{font-size:10px;opacity:.8;margin-top:3px;}
.modal-close{background:rgba(255,255,255,.2);border:none;color:#fff;
  width:28px;height:28px;border-radius:50%;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  margin-left:12px;}
.modal-close:hover{background:rgba(255,255,255,.35);}
.modal-body{padding:20px;overflow-y:auto;flex:1;}

.hora-pills-modal{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.hora-pill-m{padding:8px 16px;border:2px solid #E2E5EA;border-radius:20px;
  font-size:11px;font-weight:700;cursor:pointer;transition:all .2s;color:#6B7280;}
.hora-pill-m:hover{border-color:#B11816;color:#B11816;}
.hora-pill-m.active{background:#B11816;border-color:#B11816;color:#fff;}

.rep-card{background:#F7F8FA;border-radius:10px;padding:16px;margin-top:4px;}
.rep-section{font-size:9px;font-weight:800;color:#B11816;
  text-transform:uppercase;letter-spacing:.8px;
  margin:12px 0 6px;padding-bottom:4px;border-bottom:1px solid #fdecea;}
.rep-section:first-child{margin-top:0;}
.rep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:4px;}
.rep-item label{font-size:9px;color:#9ca3af;text-transform:uppercase;
  letter-spacing:.5px;display:block;}
.rep-item span{font-size:12px;font-weight:700;color:#374151;}
.rep-empty{padding:32px;text-align:center;color:#9ca3af;font-size:12px;}
.tag-enviado{display:inline-block;padding:2px 8px;border-radius:20px;
  font-size:9px;font-weight:800;background:#EFF9F0;color:#158E38;}
.tag-borrador{display:inline-block;padding:2px 8px;border-radius:20px;
  font-size:9px;font-weight:800;background:#FFF3CD;color:#856404;}
.pers-table{width:100%;border-collapse:collapse;font-size:11px;margin-top:6px;}
.pers-table th{padding:5px 8px;background:#F0F2F5;font-size:9px;font-weight:800;
  color:#6B7280;border-bottom:1px solid #E2E5EA;text-align:left;}
.pers-table td{padding:4px 8px;border-bottom:1px solid #f3f4f6;}

 
.leaflet-jne-popup .leaflet-popup-content-wrapper{
  border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.15);padding:0;}
.leaflet-jne-popup .leaflet-popup-content{margin:0;}

@media(max-width:768px){
  .kpi-strip{flex-wrap:wrap;}
  .kpi-box{min-width:45%;border-right:none;border-bottom:1px solid #E2E5EA;padding:10px;}
  .ciud-main{padding:12px;}
  .rep-grid{grid-template-columns:1fr 1fr;}
  .mapa-canvas{height:280px;}
  .hdr-logo{display:none;}
}

#main-placeholder svg{
  max-width: 300px;
}


 
.adcon-main{padding:20px;overflow-y:auto;}

.main-placeholder {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 65vh; text-align: center;
}
.placeholder-icon {
  width: 58px; height: 58px; color: #cbd5e1; margin-bottom: 16px;
}
.main-placeholder h2 {
  font-size: 15px; font-weight: 800; color: #374151;
  text-transform: uppercase; letter-spacing: -0.3px; margin-bottom: 6px;
}
.main-placeholder p {
  font-size: 12px; color: #6b7280; max-width: 420px; line-height: 1.5;
}


.rep-loading{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:180px;
  color:#5f6b7a;
  font-size:14px;
  font-weight:500; 
}

.rep-spinner{
  width:42px;
  height:42px;
  border:3px solid rgba(0,0,0,.08);
  border-top:3px solid #1e5aa8;
  border-radius:50%;
  animation:rep-spin .8s linear infinite;
}
 
@keyframes rep-spin{
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
}


.hora-pills-modal{
   display: none;
  }

  .tag-enviado{
   display: none;
  }



  #k-locales {
  display: none;
}

#k-locales ~ .kpi-lbl {
  display: none;
}


.ciud-header {
    background: whitesmoke;
    color: black;
    padding: 12px 24px;
}




/* ── TABLA RESPONSIVE ── */
@media (max-width: 768px) {
  .tabla-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tabla-wrap table {
    min-width: 600px;
  }
  .tabla-wrap th,
  .tabla-wrap td {
    padding: 7px 8px;
    font-size: 11px;
    white-space: nowrap;
  }
  .tag-cont {
    font-size: 8px;
    padding: 1px 6px;
  }
  .btn-detalle {
    padding: 4px 8px;
    font-size: 9px;
  }
}

@media (max-width: 480px) {
  .tabla-wrap table {
    min-width: 500px;
  }
  .tabla-wrap th,
  .tabla-wrap td {
    padding: 6px 6px;
    font-size: 10px;
  }
}