/* Gerencia de Corregimientos · Necesidades — identidad de la Alcaldía de Medellín (medellin.gov.co):
   Montserrat para títulos, Work Sans para texto y datos; navy #0F253E, naranja #FF8403 como acento,
   paleta institucional (cian, turquesa, magenta, azules) para distinguir corregimientos en el mapa. */
:root{
  --bg:#ffffff;--bg2:#f4f4f4;--tinta:#1e1e1e;--navy:#0F253E;--azul:#004484;--mut:#5f5f5f;--linea:#dedede;
  --acento:#FF8403;--acento2:#e67600;--cian:#00AEEF;
  --alerta:#c62828;
  --titulo:"Montserrat",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sans:"Work Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:var(--sans);
  --r:6px;--gap:18px;--max:1200px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tinta);font:400 17px/1.6 var(--sans)}
a{color:var(--azul);text-underline-offset:3px}
a:hover{color:var(--acento2)}
::selection{background:var(--acento);color:var(--navy)}
:focus-visible{outline:3px solid var(--cian);outline-offset:2px}
[hidden]{display:none!important}

/* Tipografía */
.display{font:800 clamp(30px,6vw,52px)/1.05 var(--titulo);letter-spacing:-.02em;margin:0;color:var(--navy)}
.h{font:700 clamp(24px,4.5vw,38px)/1.15 var(--titulo);letter-spacing:-.01em;margin:0;color:var(--navy)}
.sub{font:500 clamp(18px,3vw,22px)/1.3 var(--titulo);margin:0}
.lbl{font:600 12px/1.2 var(--titulo);text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.mut{color:var(--mut)}
.mono{font-variant-numeric:tabular-nums}
.cifra{font:700 clamp(30px,6vw,46px)/1 var(--titulo);color:var(--navy);font-variant-numeric:tabular-nums}

/* Estructura */
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
.nav{position:sticky;top:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 16px;background:var(--navy);color:#fff}
.nav .marca{font:700 14px/1.2 var(--titulo);color:#fff;text-decoration:none;text-transform:uppercase;letter-spacing:.04em}
.nav .marca b{font-weight:700;color:var(--acento)}
.nav nav{display:flex;gap:7px;flex-wrap:wrap}
.nav .btn:not(.pri){color:#fff;border-color:rgba(255,255,255,.35)}
.nav .btn:not(.pri):hover{border-color:#fff}
.nav a{color:#fff}
.seccion{padding:48px 0}
.regla{border:0;border-top:1px solid var(--linea);margin:0}
footer{border-top:4px solid var(--acento);background:var(--navy);color:#cfd6df;padding:24px 16px 40px;font:14px/1.5 var(--sans)}

/* Botones y etiquetas */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:12px 18px;border-radius:var(--r);
  border:1.5px solid var(--navy);background:transparent;color:var(--navy);font:600 14px/1 var(--titulo);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--bg2)}
.btn.pri{background:var(--acento);border-color:var(--acento);color:var(--navy)}
.btn.pri:hover{background:var(--acento2);border-color:var(--acento2)}
.btn.sm{min-height:36px;padding:7px 14px;font-size:13px}
.btn:disabled{opacity:.5;cursor:default}
.tag{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:var(--r);border:1px solid var(--linea);font:600 12.5px/1.2 var(--sans);color:var(--tinta);white-space:nowrap;background:var(--bg)}
.tag.lima{background:var(--acento);border-color:var(--acento);color:var(--navy)}
.tag.borde{border-color:var(--acento);color:var(--acento2)}
.tag svg{width:14px;height:14px}

/* Estados: Pendiente = naranja lleno · En proceso = borde naranja · OK = gris */
.est-Pendiente{background:var(--acento);border-color:var(--acento);color:var(--navy)}
.est-En-proceso{border-color:var(--acento);color:#b35600;background:#fff6ec}
.est-OK{border-color:var(--linea);color:var(--mut);background:var(--bg2)}

/* Formularios */
label,.lb{display:block;font:600 13px/1.3 var(--titulo);color:var(--navy);margin:24px 0 7px}
label small,.lb small{display:block;font:400 13px/1.4 var(--sans);color:var(--mut);margin-top:3px}
input[type=text],input[type=tel],input[type=email],input[type=date],input[type=search],select,textarea{
  width:100%;min-height:48px;padding:10px 12px;border:1px solid #c9c9c9;border-radius:var(--r);background:#fff;color:var(--tinta);
  font:400 16px/1.4 var(--sans)} /* ≥16px: iOS no hace zoom */
select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230F253E' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;padding-right:34px}
textarea{min-height:120px;resize:vertical}
input::placeholder,textarea::placeholder{color:#8a8a8a}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--cian);box-shadow:0 0 0 3px rgba(0,174,239,.2)}
.req::after{content:" *";color:var(--alerta)}
.err{color:var(--alerta);font:600 14px/1.4 var(--sans)}

/* Chips de selección múltiple (tipologías) */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips label{margin:0;font:500 14px/1.2 var(--sans);color:var(--tinta)}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:7px 12px;border:1px solid #c9c9c9;border-radius:999px;cursor:pointer;background:#fff}
.chips span svg{width:16px;height:16px;flex:none;color:var(--azul)}
.chips input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.chips input:checked+span svg{color:var(--acento)}
.chips input:focus-visible+span{outline:3px solid var(--cian);outline-offset:2px}

/* Marcadores: ícono de la tipología · relleno = prioridad · estado: Pendiente sólido, En proceso con marca, OK gris con ✓ */
:root{--p-critica:#c62828;--p-alta:#FF8403;--p-media:#F5B700;--p-baja:#43A047;--p-sin:#ffffff}
.mk{position:relative;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:2px solid #fff;background:var(--p-sin);color:var(--navy);box-shadow:0 1px 3px rgba(0,0,0,.45)}
.mk svg{width:16px;height:16px}
.mk.p-Crítica:not(.OK){background:var(--p-critica);color:#fff;width:34px;height:34px}
.mk.p-Alta{background:var(--p-alta);color:var(--navy)}
.mk.p-Media{background:var(--p-media);color:var(--navy)}
.mk.p-Baja{background:var(--p-baja);color:#fff}
.mk.p-Sin-clasificar{border-color:var(--navy)}
.mk.Enproceso::after{content:"";position:absolute;right:-3px;top:-3px;width:11px;height:11px;border-radius:50%;background:var(--navy);border:2px solid #fff}
.mk.OK{background:#9e9e9e!important;color:#fff!important;opacity:.8}
.mk.OK::after{content:"✓";position:absolute;right:-5px;top:-5px;width:15px;height:15px;border-radius:50%;background:#2e7d32;color:#fff;font:700 10px/15px var(--sans);text-align:center;border:1.5px solid #fff}
.mk.sel{outline:3px solid var(--navy);outline-offset:2px}
.pri-dot{display:inline-block;width:11px;height:11px;border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.25);vertical-align:-1px;margin-right:5px}

/* Leaflet */
.leaflet-container{background:#e9eef2;font-family:var(--sans)}
.leaflet-control-layers,.leaflet-bar a{border-radius:var(--r)!important}
.vlab{display:none;transform:translate(-50%,-50%);white-space:nowrap;font:600 11.5px/1 var(--titulo);color:#fff;text-shadow:0 0 3px #000,0 0 2px #000,0 1px 2px #000}
.clab{transform:translate(-50%,-50%);white-space:nowrap;font:800 clamp(11px,1.4vw,15px)/1.1 var(--titulo);text-transform:uppercase;letter-spacing:.05em;color:#fff;
  padding:3px 8px;border-radius:4px;background:color-mix(in srgb,var(--c) 78%,#000);border:1.5px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.z13 .vlab{display:block}.z13 .clab{display:none}
.clab{cursor:pointer}.clab:hover{filter:brightness(1.15)}
/* sin recuadro de foco del navegador al tocar una vereda o un rótulo */
.leaflet-container .leaflet-interactive:focus,.leaflet-container path:focus,.leaflet-marker-icon:focus{outline:none}
.ley{display:inline-flex;align-items:center;gap:6px;font:500 13px/1.3 var(--sans);margin:0 12px 6px 0;white-space:nowrap}
.ley i{width:12px;height:12px;border-radius:3px;flex:none;opacity:.85}
.ley b{font-weight:700;color:var(--navy)}

/* Control de capas plegado: ícono propio (leaflet.css apunta a una imagen que no se publica) */
.leaflet-control-layers-toggle{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F253E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 10 5-10 5L2 7z'/%3E%3Cpath d='m2 17 10 5 10-5'/%3E%3Cpath d='m2 12 10 5 10-5'/%3E%3C/svg%3E") no-repeat center/22px!important;width:40px!important;height:40px!important}
.nav .marca{white-space:nowrap}
.nav .btn{white-space:nowrap}
.solo-movil{display:none}
@media(max-width:480px){.solo-escr{display:none}.solo-movil{display:inline}.nav .marca{font-size:11.5px;letter-spacing:.03em}}
/* Marca: en pantallas angostas se apila en dos líneas (diseñado, no cortado) */
@media(max-width:480px){.nav .marca{display:flex;flex-direction:column;line-height:1.05;font-size:14px}.nav .marca .g{font-size:9.5px;letter-spacing:.12em;opacity:.85}}