/* =========================================================
	   OBSERVATORIO SOCIAL TERRITORIAL - POT/POD NARIÑO
	   Estilo institucional premium
	========================================================= */

	.pla-obs-social-wrap {
		position: relative;
		width: 100%;
		padding: 70px 24px;
		border-radius: 28px;
		overflow: hidden;
		background:
			radial-gradient(circle at top left, rgba(255, 214, 0, 0.22), transparent 32%),
			radial-gradient(circle at top right, rgba(0, 146, 63, 0.22), transparent 34%),
			linear-gradient(135deg, #f8faf7 0%, #ffffff 45%, #eef8f1 100%);
		border: 1px solid rgba(0, 146, 63, 0.16);
		box-shadow: 0 24px 70px rgba(0, 0, 0, 0.10);
	}

	.pla-obs-social-wrap::before {
		content: "";
		position: absolute;
		inset: 0;
		background-image:
			linear-gradient(rgba(0, 146, 63, 0.045) 1px, transparent 1px),
			linear-gradient(90deg, rgba(0, 146, 63, 0.045) 1px, transparent 1px);
		background-size: 34px 34px;
		pointer-events: none;
	}

	.pla-obs-header,
	.pla-obs-panel,
	.pla-obs-result {
		position: relative;
		z-index: 2;
	}

	.pla-obs-header {
		max-width: 950px;
		margin: 0 auto 35px;
		text-align: center;
	}

	.pla-obs-kicker {
		display: inline-flex;
		padding: 8px 18px;
		border-radius: 999px;
		background: rgba(0, 146, 63, 0.10);
		color: #006b35;
		font-weight: 800;
		font-size: 13px;
		letter-spacing: .08em;
		text-transform: uppercase;
		border: 1px solid rgba(0, 146, 63, 0.18);
	}

	.pla-obs-header h2 {
		margin: 18px 0 14px;
		font-size: clamp(30px, 4vw, 48px);
		line-height: 1.08;
		font-weight: 900;
		color: #10251a;
	}

	.pla-obs-header p {
		margin: 0 auto;
		max-width: 820px;
		color: #52645a;
		font-size: 17px;
		line-height: 1.65;
	}

	.pla-obs-panel {
		display: grid;
		grid-template-columns: 1.2fr 1.6fr .6fr auto;
		gap: 16px;
		align-items: end;
		max-width: 1180px;
		margin: 0 auto 30px;
		padding: 22px;
		border-radius: 24px;
		background: rgba(255, 255, 255, 0.78);
		backdrop-filter: blur(18px);
		border: 1px solid rgba(0, 146, 63, 0.16);
		box-shadow: 0 16px 45px rgba(0, 0, 0, 0.08);
	}

	.pla-obs-field label {
		display: block;
		margin-bottom: 8px;
		color: #173b28;
		font-weight: 800;
		font-size: 13px;
	}

	.pla-obs-field select,
	.pla-obs-field input {
		width: 100%;
		height: 48px;
		padding: 0 14px;
		border-radius: 14px;
		border: 1px solid rgba(0, 146, 63, 0.22);
		background: #fff;
		color: #1f2f26;
		outline: none;
		font-size: 15px;
		transition: all .25s ease;
	}

	.pla-obs-field select:focus,
	.pla-obs-field input:focus {
		border-color: #00923F;
		box-shadow: 0 0 0 4px rgba(0, 146, 63, 0.12);
	}

	.pla-obs-btn {
		height: 48px;
		padding: 0 24px;
		border: 0;
		border-radius: 15px;
		background: linear-gradient(135deg, #00923F, #10a84d);
		color: #fff;
		font-weight: 900;
		cursor: pointer;
		box-shadow: 0 12px 28px rgba(0, 146, 63, 0.28);
		transition: all .25s ease;
		white-space: nowrap;
	}

	.pla-obs-btn:hover {
		transform: translateY(-2px);
		box-shadow: 0 18px 38px rgba(0, 146, 63, 0.36);
	}

	.pla-obs-btn:disabled {
		opacity: .55;
		cursor: not-allowed;
		transform: none;
		box-shadow: none;
	}

	.pla-obs-loading {
		max-width: 1180px;
		margin: 0 auto 22px;
		padding: 16px 20px;
		border-radius: 18px;
		background: rgba(255, 214, 0, 0.16);
		border: 1px solid rgba(255, 214, 0, 0.35);
		color: #765c00;
		font-weight: 800;
		text-align: center;
	}

	.pla-obs-result {
		max-width: 1180px;
		margin: 0 auto;
	}

	.pla-obs-cards {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
		margin-bottom: 22px;
	}

	.pla-obs-card {
		padding: 22px;
		border-radius: 22px;
		background: rgba(255, 255, 255, 0.86);
		border: 1px solid rgba(0, 146, 63, 0.14);
		box-shadow: 0 14px 36px rgba(0, 0, 0, 0.07);
	}

	.pla-obs-card span {
		display: block;
		color: #61746a;
		font-size: 13px;
		font-weight: 800;
		margin-bottom: 8px;
	}

	.pla-obs-card strong {
		display: block;
		color: #0d2b1b;
		font-size: 30px;
		font-weight: 950;
	}

	.pla-obs-layout {
		display: grid;
		grid-template-columns: 1fr 1.15fr;
		gap: 22px;
		margin-bottom: 22px;
	}

	.pla-obs-box {
		padding: 24px;
		border-radius: 24px;
		background: rgba(255, 255, 255, 0.88);
		border: 1px solid rgba(0, 146, 63, 0.14);
		box-shadow: 0 16px 42px rgba(0, 0, 0, 0.08);
	}

	.pla-obs-box h3 {
		margin: 0 0 16px;
		color: #10251a;
		font-size: 20px;
		font-weight: 900;
	}

	.pla-obs-table-wrap {
		max-height: 390px;
		overflow: auto;
		border-radius: 18px;
		border: 1px solid rgba(0, 146, 63, 0.12);
	}

	.pla-obs-table {
		width: 100%;
		border-collapse: collapse;
		background: #fff;
	}

	.pla-obs-table th {
		position: sticky;
		top: 0;
		z-index: 2;
		padding: 13px 14px;
		background: linear-gradient(135deg, #00923F, #0c7f3c);
		color: #fff;
		text-align: left;
		font-size: 13px;
		font-weight: 900;
	}

	.pla-obs-table td {
		padding: 13px 14px;
		border-bottom: 1px solid rgba(0, 146, 63, 0.10);
		color: #314139;
		font-size: 14px;
	}

	.pla-obs-table tr:hover td {
		background: rgba(0, 146, 63, 0.045);
	}

	.pla-obs-mapbox {
		margin-top: 0;
	}

	#plaObsMapa {
		border-radius: 20px;
		overflow: hidden;
		border: 1px solid rgba(0, 146, 63, 0.18);
		background: #eef8f1;
	}

	/* Responsive */
	@media (max-width: 1024px) {
		.pla-obs-panel {
			grid-template-columns: 1fr 1fr;
		}

		.pla-obs-btn {
			width: 100%;
		}

		.pla-obs-cards {
			grid-template-columns: repeat(2, 1fr);
		}

		.pla-obs-layout {
			grid-template-columns: 1fr;
		}
	}

	@media (max-width: 680px) {
		.pla-obs-social-wrap {
			padding: 45px 14px;
			border-radius: 20px;
		}

		.pla-obs-panel {
			grid-template-columns: 1fr;
			padding: 18px;
		}

		.pla-obs-cards {
			grid-template-columns: 1fr;
		}

		.pla-obs-card strong {
			font-size: 26px;
		}

		.pla-obs-box {
			padding: 18px;
		}

		.pla-obs-table {
			min-width: 680px;
		}

		#plaObsMapa {
			height: 380px !important;
		}
	}

	.pla-obs-empty-state{
		padding:40px 30px;
		text-align:center;
		background:linear-gradient(135deg,#f8fbff,#eef5ff);
		border:1px solid #dbe8ff;
		border-radius:18px;
	}

	.pla-obs-empty-icon{
		font-size:48px;
		margin-bottom:15px;
		opacity:.85;
	}

	.pla-obs-empty-title{
		font-size:20px;
		font-weight:700;
		color:#0b3d91;
		margin-bottom:10px;
	}

	.pla-obs-empty-text{
		font-size:14px;
		line-height:1.7;
		color:#4f5b6b;
		max-width:700px;
		margin:auto;
	}

/* =========================================================
   OBSERVATORIO SOCIAL TERRITORIAL — CSS PRO INSTITUCIONAL
   Versión visual institucional / geovisor / ESRI
========================================================= */

:root{
  --obs-green:#00923F;
  --obs-green-dark:#006B2E;
  --obs-green-soft:#EAF8EF;
  --obs-yellow:#FFD600;
  --obs-yellow-soft:#FFF8CC;
  --obs-blue:#0066CC;
  --obs-blue-dark:#064B91;
  --obs-ink:#102A1F;
  --obs-muted:#5D6F66;
  --obs-soft:#F6FAF7;
  --obs-white:#FFFFFF;
  --obs-border:rgba(0,146,63,.18);
  --obs-shadow:0 18px 45px rgba(0,66,32,.10);
  --obs-shadow-soft:0 10px 28px rgba(0,66,32,.07);
}

/* CONTENEDOR GENERAL */
.pla-obs-wrapper,
.pla-obs-social,
#plaObsResultado{
  font-family:Inter, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--obs-ink);
}

/* HERO INSTITUCIONAL */
.pla-obs-wrapper{
  position:relative;
  padding:34px 34px 46px;
  border-radius:28px;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,214,0,.20), transparent 32%),
    radial-gradient(circle at 86% 14%, rgba(0,146,63,.16), transparent 36%),
    linear-gradient(135deg,#ffffff 0%,#f5fbf7 55%,#eef8ff 100%);
  border:1px solid rgba(0,146,63,.16);
  box-shadow:var(--obs-shadow);
  overflow:hidden;
}

.pla-obs-wrapper::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(0,146,63,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,146,63,.055) 1px, transparent 1px);
  background-size:32px 32px;
  pointer-events:none;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 85%);
}

.pla-obs-wrapper > *{
  position:relative;
  z-index:1;
}

.pla-obs-wrapper small,
.pla-obs-wrapper .pla-obs-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  padding:7px 15px;
  margin-bottom:10px;
  border-radius:999px;
  background:rgba(0,146,63,.10);
  color:var(--obs-green-dark);
  border:1px solid rgba(0,146,63,.22);
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size:12px;
}

.pla-obs-wrapper h1,
.pla-obs-wrapper h2:first-of-type{
  margin:4px 0 12px;
  color:var(--obs-ink);
  font-weight:900;
  letter-spacing:-.04em;
  line-height:1.05;
  font-size:clamp(30px,4vw,52px);
}

.pla-obs-wrapper p{
  color:var(--obs-muted);
  font-size:16px;
  line-height:1.7;
  max-width:980px;
}

/* TABS POBLACIONALES */
#plaObsTabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:26px 0 18px;
}

#plaObsTabs button{
  border:0;
  padding:13px 20px;
  border-radius:16px;
  background:linear-gradient(135deg,var(--obs-blue),#0783df);
  color:#fff;
  font-weight:850;
  font-size:14px;
  box-shadow:0 10px 24px rgba(0,102,204,.22);
  cursor:pointer;
  transition:all .25s ease;
}

#plaObsTabs button:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(0,102,204,.30);
}

#plaObsTabs button.active{
  background:linear-gradient(135deg,var(--obs-green-dark),var(--obs-green));
  box-shadow:0 16px 34px rgba(0,146,63,.30);
  outline:3px solid rgba(255,214,0,.35);
}

/* PANEL DE FILTROS */
.pla-obs-filtros,
.pla-obs-filter-panel,
.pla-obs-form{
  margin:20px 0 26px;
  padding:24px;
  border-radius:24px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px);
  border:1px solid var(--obs-border);
  box-shadow:var(--obs-shadow-soft);
}

.pla-obs-wrapper label{
  display:block;
  margin:0 0 7px;
  color:#07351d;
  font-size:13px;
  font-weight:900;
}

.pla-obs-wrapper select,
.pla-obs-wrapper input[type="text"],
.pla-obs-wrapper input[type="number"]{
  width:100%;
  min-height:48px;
  border-radius:15px;
  border:1px solid rgba(0,146,63,.25);
  background:#fff;
  padding:0 16px;
  color:var(--obs-ink);
  font-weight:600;
  box-shadow:0 7px 18px rgba(0,66,32,.04);
  outline:none;
  transition:all .22s ease;
}

.pla-obs-wrapper select:focus,
.pla-obs-wrapper input:focus{
  border-color:var(--obs-green);
  box-shadow:0 0 0 4px rgba(0,146,63,.13);
}

#plaObsConsultar{
  min-height:50px;
  padding:0 28px;
  border:0;
  border-radius:16px;
  background:linear-gradient(135deg,var(--obs-green-dark),var(--obs-green));
  color:#fff;
  font-weight:900;
  box-shadow:0 16px 34px rgba(0,146,63,.28);
  cursor:pointer;
  transition:all .25s ease;
}

#plaObsConsultar:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 42px rgba(0,146,63,.35);
}

/* KPIs */
.pla-obs-kpi-grid,
.pla-obs-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(160px,1fr));
  gap:18px;
  margin:24px 0;
}

.pla-obs-kpi,
.pla-obs-kpi-card{
  position:relative;
  padding:22px 22px 20px;
  border-radius:22px;
  background:linear-gradient(180deg,#fff,#fbfffd);
  border:1px solid var(--obs-border);
  box-shadow:var(--obs-shadow-soft);
  overflow:hidden;
}

.pla-obs-kpi::before,
.pla-obs-kpi-card::before{
  content:"";
  position:absolute;
  left:0;
  top:18px;
  bottom:18px;
  width:5px;
  border-radius:999px;
  background:linear-gradient(var(--obs-yellow),var(--obs-green));
}

.pla-obs-kpi span,
.pla-obs-kpi-card span{
  display:block;
  color:var(--obs-muted);
  font-size:13px;
  font-weight:900;
  margin-bottom:10px;
}

.pla-obs-kpi strong,
.pla-obs-kpi-card strong,
#plaObsTotal,
#plaObsBase,
#plaObsCumple,
#plaObsPromedio{
  color:var(--obs-ink);
  font-size:26px;
  font-weight:950;
  letter-spacing:-.03em;
}

/* INTERPRETACIÓN */
.pla-obs-interpretacion{
  margin:22px 0;
  padding:24px 26px;
  border-radius:24px;
  background:
    linear-gradient(135deg,rgba(0,146,63,.09),rgba(255,214,0,.16)),
    #fff;
  border:1px solid rgba(0,146,63,.20);
  box-shadow:var(--obs-shadow-soft);
  color:#173b28;
  font-size:15px;
  line-height:1.7;
}

.pla-obs-interpretacion strong{
  display:block;
  margin-bottom:7px;
  font-size:18px;
  color:#07351d;
}

.pla-obs-semaforo{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  padding:8px 14px;
  border-radius:999px;
  font-weight:900;
  font-size:13px;
}

.pla-obs-semaforo.bajo{background:rgba(0,146,63,.13);color:#006b35;}
.pla-obs-semaforo.medio{background:rgba(255,214,0,.28);color:#6b5700;}
.pla-obs-semaforo.alto{background:rgba(239,108,0,.15);color:#974000;}
.pla-obs-semaforo.critico{background:rgba(198,40,40,.15);color:#951f1f;}

/* SECCIONES PREMIUM */
.pla-obs-card,
.pla-obs-chart-section,
.pla-obs-table-section,
.pla-obs-map-section,
#plaObsResultado > div{
  border-radius:26px;
  background:#fff;
  border:1px solid var(--obs-border);
  box-shadow:var(--obs-shadow-soft);
  overflow:hidden;
}

.pla-obs-wrapper h3,
.pla-obs-card h3,
.pla-obs-chart-section h3,
.pla-obs-table-section h3,
.pla-obs-map-section h3{
  position:relative;
  margin:0;
  padding:20px 24px;
  color:var(--obs-ink);
  font-size:21px;
  font-weight:950;
  background:linear-gradient(90deg,rgba(0,146,63,.12),rgba(255,214,0,.10),transparent);
  border-bottom:1px solid rgba(0,146,63,.13);
}

.pla-obs-wrapper h3::before,
.pla-obs-card h3::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:6px;
  background:linear-gradient(var(--obs-green),var(--obs-yellow));
}

/* GRÁFICA */
.pla-obs-chart-shell{
  position:relative;
  width:100%;
  height:430px;
  min-height:430px;
  max-height:430px;
  padding:22px;
  overflow:hidden;
  background:
    radial-gradient(circle at top right,rgba(0,102,204,.06),transparent 35%),
    #fff;
}

#plaObsChart{
  width:100% !important;
  height:390px !important;
  max-height:390px !important;
}

/* TABLA */
.pla-obs-wrapper table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(0,146,63,.16);
}

.pla-obs-wrapper thead th,
.pla-obs-wrapper table th{
  background:linear-gradient(135deg,var(--obs-green-dark),var(--obs-green));
  color:#fff;
  padding:14px 16px;
  font-size:13px;
  font-weight:900;
  text-align:left;
}

.pla-obs-wrapper tbody td,
.pla-obs-wrapper table td{
  padding:14px 16px;
  border-bottom:1px solid rgba(0,146,63,.10);
  color:#263b31;
  font-size:14px;
}

.pla-obs-wrapper tbody tr:nth-child(even){
  background:#fbfffd;
}

.pla-obs-wrapper tbody tr:hover{
  background:var(--obs-green-soft);
}

/* BOTONES EXPORTACIÓN */
#plaObsExportCsv,
#plaObsExportPrint{
  border:0;
  padding:12px 18px;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(135deg,var(--obs-blue-dark),var(--obs-blue));
  font-weight:900;
  box-shadow:0 10px 22px rgba(0,102,204,.20);
  cursor:pointer;
  transition:all .22s ease;
}

#plaObsExportCsv:hover,
#plaObsExportPrint:hover{
  transform:translateY(-2px);
}

/* MAPA */
#plaObsMapa{
  min-height:430px;
  height:430px;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(0,146,63,.18);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.60);
}

/* LOADING */
#plaObsLoading{
  margin:20px 0;
  padding:18px 22px;
  border-radius:18px;
  background:linear-gradient(135deg,var(--obs-yellow-soft),#fff);
  border:1px solid rgba(255,214,0,.55);
  color:#5e4d00;
  font-weight:900;
  text-align:center;
  box-shadow:var(--obs-shadow-soft);
}

/* ESTADO SIN DATOS */
.pla-obs-empty-state{
  padding:44px 30px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,214,0,.22),transparent 40%),
    linear-gradient(135deg,#ffffff,#f6fbf8);
  border:1px solid rgba(0,146,63,.16);
  border-radius:22px;
  box-shadow:0 12px 28px rgba(0,66,32,.06);
}

.pla-obs-empty-icon{
  width:72px;
  height:72px;
  margin:0 auto 16px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:linear-gradient(135deg,rgba(0,146,63,.12),rgba(255,214,0,.25));
  font-size:38px;
}

.pla-obs-empty-title{
  color:var(--obs-green-dark);
  font-size:21px;
  font-weight:950;
  margin-bottom:8px;
}

.pla-obs-empty-text{
  color:var(--obs-muted);
  font-size:15px;
  line-height:1.7;
  max-width:720px;
  margin:auto;
}

/* RESPONSIVE */
@media (max-width: 900px){
  .pla-obs-wrapper{
    padding:24px 18px 34px;
    border-radius:22px;
  }

  .pla-obs-kpi-grid,
  .pla-obs-kpis{
    grid-template-columns:repeat(2,1fr);
  }

  #plaObsTabs button{
    flex:1 1 180px;
  }

  .pla-obs-chart-shell,
  #plaObsMapa{
    height:360px;
    min-height:360px;
    max-height:360px;
  }

  #plaObsChart{
    height:320px !important;
  }
}

@media (max-width: 560px){
  .pla-obs-wrapper h1,
  .pla-obs-wrapper h2:first-of-type{
    font-size:30px;
  }

  .pla-obs-kpi-grid,
  .pla-obs-kpis{
    grid-template-columns:1fr;
  }

  #plaObsTabs{
    gap:8px;
  }

  #plaObsTabs button{
    width:100%;
  }

  .pla-obs-wrapper table{
    font-size:12px;
  }

  .pla-obs-wrapper tbody td,
  .pla-obs-wrapper table td,
  .pla-obs-wrapper table th{
    padding:10px;
  }
}