/* ===== AFA - Medellin - NEON HDR v3 ===== */
:root{
  --primary:#00FF9D;--secondary:#00E5FF;--deep:#07110C;--ink:#EAFBF2;--paper:#05090B;
  --muted:#7FA891;--accent:#00E5FF;--amb:#00FF9D;--amb2:#00E5FF;
  --bg:#05090B;--card:#0C1512;--line:#15372A;--red:#FF3D71;--yel:#FFD166;--blue:#00E5FF;--tig:#00FF9D;
  --glow:0 0 18px rgba(0,255,157,.35),0 0 42px rgba(0,255,157,.12);
  --glow2:0 0 18px rgba(0,229,255,.35),0 0 42px rgba(0,229,255,.12);
  --grad:linear-gradient(135deg,#00FF9D 0%,#00E5FF 100%);
  --r:18px;--r-sm:13px;
}
body{margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;background:radial-gradient(1200px 500px at 50% -120px,#0B2A1D 0%,#05090B 60%) fixed,var(--paper);color:var(--ink);letter-spacing:0;-webkit-font-smoothing:antialiased}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#0C1512;color:#fff;padding:8px;z-index:9999}

/* --- cabecera: neon dark --- */
.hero{background:transparent;color:#fff;display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:34px 22px 26px;gap:8px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:-20%;top:-60%;width:140%;height:120%;background:radial-gradient(closest-side,rgba(0,255,157,.16),transparent 70%);pointer-events:none}
.hero .mark{display:flex;align-items:center;gap:12px;margin-bottom:10px;position:relative;z-index:1}
.hero .mark img,.hero .mark svg{width:46px;height:46px;background:#06130D;border:1px solid rgba(0,255,157,.5);border-radius:14px;padding:6px;box-sizing:border-box;box-shadow:var(--glow)}
.wordmark{font-family:Inter,system-ui,sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.14em;color:#6FE8B4;line-height:1.35;text-transform:uppercase}
.wordmark b{display:block;font-size:19px;font-weight:800;letter-spacing:.01em;color:#fff;text-transform:none}
.hero h1{font-family:Inter,system-ui,sans-serif;font-weight:900;font-size:clamp(32px,7vw,50px);line-height:1.02;margin:6px 0 6px;letter-spacing:-.03em;position:relative;z-index:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 14px rgba(0,255,157,.35))}
.sub{color:#05090B;letter-spacing:.16em;font-weight:800;font-size:10.5px;margin:0 0 2px;text-transform:uppercase;padding:6px 14px;background:var(--grad);border-radius:999px;display:inline-block;position:relative;z-index:1;box-shadow:var(--glow)}
.lead{color:#A9D9BF;font-size:14.5px;max-width:52ch;margin:0;line-height:1.55;position:relative;z-index:1}
.dept-rule{height:2px;background:var(--grad);border:0;margin:0;opacity:.7;box-shadow:var(--glow)}
.eye,.flag,.afa,.tiger,.tigerband,.diamond{display:none!important}

/* --- foto de ciudad --- */
.city-hero{position:relative;margin:0;max-height:200px;overflow:hidden;border-bottom:1px solid var(--line)}
.city-hero img{width:100%;height:200px;object-fit:cover;filter:saturate(1.35) contrast(1.1);display:block}
.city-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,9,11,.55) 0%,rgba(5,9,11,0) 35%,rgba(5,9,11,.85) 100%)}
.city-hero .cap{position:absolute;left:20px;bottom:14px;color:#fff;text-shadow:0 0 12px rgba(0,255,157,.5);z-index:1}
.city-hero .cap .n{font-family:Inter,system-ui,sans-serif;font-weight:900;font-size:1.6rem;letter-spacing:-.02em}
.city-hero .cap .a{font-size:.78rem;opacity:.92;font-weight:500;color:#9FE8C6}

main{max-width:1100px;margin:0 auto;padding:18px 16px 32px}
.bar{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;justify-content:space-between}

/* --- tarjeta total --- */
.total{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;font-weight:700;font-size:11px;display:flex;gap:12px;align-items:center;box-shadow:0 0 0 1px rgba(0,255,157,.06),0 8px 24px rgba(0,0,0,.4);color:var(--muted);letter-spacing:.1em;text-transform:uppercase;flex:1;min-width:230px}
.total b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;border-radius:0;padding:0;font-size:30px;font-family:Inter,sans-serif;font-weight:900;letter-spacing:-.02em;margin-left:auto;filter:drop-shadow(0 0 10px rgba(0,255,157,.45))}
.city{font-size:12px;font-weight:600;display:flex;gap:6px;align-items:center;color:var(--ink);flex-wrap:wrap;flex:1;min-width:230px}
.city input{width:auto;flex:1;min-width:150px;padding:11px 14px}
select,input,textarea{font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:#0A1310;color:var(--ink);width:100%;transition:border-color .15s,box-shadow .15s}
select:focus,input:focus,textarea:focus{border-color:var(--primary);outline:none;box-shadow:var(--glow)}

/* --- boton principal --- */
.big{color:#04110A;display:block;width:100%;margin:16px 0;padding:17px;font-family:Inter,system-ui,sans-serif;font-weight:900;font-size:15px;letter-spacing:.05em;background:var(--grad);border:0;border-radius:16px;cursor:pointer;box-shadow:var(--glow);transition:transform .1s,box-shadow .15s,filter .15s;text-transform:uppercase}
.big:hover{filter:brightness(1.12);box-shadow:0 0 26px rgba(0,255,157,.55),0 0 60px rgba(0,229,255,.2)}.big:active{transform:translateY(1px)}

/* --- herramientas --- */
.tools{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.sq{width:48px;height:48px;font-size:18px;background:var(--card);border:1px solid var(--line);border-radius:14px;cursor:pointer;color:#9FE8C6;box-shadow:0 2px 8px rgba(0,0,0,.35);transition:border-color .15s,box-shadow .15s}
.sq:hover{border-color:var(--primary);box-shadow:var(--glow)}
.sq[aria-pressed=true]{background:var(--grad);color:#04110A;border-color:transparent;box-shadow:var(--glow)}
button:focus-visible,select:focus-visible,#map:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

#map{height:58vh;min-height:360px;border:1px solid var(--line);border-radius:20px;background:#0A1310;box-shadow:0 0 0 1px rgba(0,255,157,.08),0 12px 36px rgba(0,0,0,.5)}
.note{font-size:12px;color:var(--muted)}

/* --- pines --- */
.pin{width:32px;height:32px;background:#0A1310;border:2.5px solid var(--primary);outline:0;border-radius:50%;transform:none;display:grid;place-items:center;box-shadow:0 0 12px rgba(0,255,157,.6)}
.pin i{transform:none;font-style:normal;font-size:14px}
.pin.pendiente{border-color:var(--red);box-shadow:0 0 12px rgba(255,61,113,.6)}.pin.proceso{border-color:var(--yel);box-shadow:0 0 12px rgba(255,209,102,.6)}.pin.resuelto{border-color:var(--primary)}

/* --- hoja modal --- */
.sheet{position:fixed;inset:0;background:rgba(2,6,5,.7);backdrop-filter:blur(6px);z-index:2000;display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet-inner{background:#0C1512;color:var(--ink);width:100%;max-width:560px;max-height:88vh;overflow:auto;border-radius:24px 24px 0 0;padding:22px 20px;position:relative;border:1px solid var(--line);box-shadow:0 -10px 60px rgba(0,255,157,.12)}
.sheet-inner::before{content:"";display:block;width:44px;height:4px;border-radius:99px;background:var(--grad);margin:0 auto 14px;box-shadow:var(--glow)}
@media(min-width:800px){.sheet{align-items:center}.sheet-inner{border-radius:24px}.sheet-inner::before{display:none}}
.close{position:absolute;right:14px;top:14px;border:1px solid var(--line);background:#0A1310;border-radius:50%;width:36px;height:36px;font-size:15px;cursor:pointer;color:var(--ink)}
.sheet h2{font-family:Inter,system-ui,sans-serif;font-weight:900;margin:0 40px 14px 0;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cats button{border:1px solid var(--line);background:#0A1310;border-radius:var(--r-sm);padding:10px 4px;font-size:12px;cursor:pointer;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.cats button:hover{border-color:var(--primary);box-shadow:var(--glow)}
.cats button[aria-pressed=true]{background:var(--grad);color:#04110A;border-color:transparent;font-weight:800;box-shadow:var(--glow)}
.row{margin:12px 0}.row label{font-weight:700;font-size:13px;display:block;margin-bottom:5px;color:#9FE8C6}
.primary{width:100%;padding:16px;background:var(--grad);color:#04110A;border:0;border-radius:16px;font-weight:900;font-size:15px;cursor:pointer;letter-spacing:.04em;box-shadow:var(--glow);text-transform:uppercase}
.secondary{padding:11px 16px;background:#0A1310;border:1px solid var(--line);border-radius:var(--r-sm);font-weight:600;cursor:pointer;color:var(--ink)}
.preview{width:100%;max-height:240px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line)}

/* --- listas --- */
.item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer;align-items:center}
.item img,.item .ph{width:56px;height:56px;border-radius:var(--r-sm);object-fit:cover;background:#0A1310;display:grid;place-items:center;font-size:24px;flex:0 0 auto;border:1px solid var(--line)}
.item div{flex:1;min-width:0}.item small{color:var(--muted)}
.badge{display:inline-block;font-size:10.5px;font-weight:800;padding:3px 10px;border-radius:99px;background:#122018;margin-right:4px;color:#9FE8C6;letter-spacing:.04em;border:1px solid var(--line)}
.badge.ej{background:var(--grad);color:#04110A;border-color:transparent}
.st-pendiente{background:rgba(255,61,113,.14);color:#FF7AA0;border-color:rgba(255,61,113,.4)}.st-proceso{background:rgba(255,209,102,.12);color:#FFD166;border-color:rgba(255,209,102,.4)}.st-resuelto{background:rgba(0,255,157,.12);color:#5CFFBE;border-color:rgba(0,255,157,.4)}
.heart{border:1.5px solid var(--primary);background:transparent;color:var(--primary);border-radius:99px;padding:9px 16px;font-weight:800;cursor:pointer;transition:box-shadow .15s}
.heart:hover{box-shadow:var(--glow)}
.heart[aria-pressed=true]{background:var(--grad);color:#04110A;border-color:transparent;box-shadow:var(--glow)}
.seg{display:flex;gap:6px;margin-bottom:10px}.seg button{flex:1}
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#0C1512;color:#5CFFBE;border:1px solid rgba(0,255,157,.5);padding:12px 20px;border-radius:14px;opacity:0;transition:.3s;z-index:3000;pointer-events:none;font-weight:700;font-size:14px;box-shadow:var(--glow)}
#toast.on{opacity:1}

/* --- pestanas segmentadas --- */
.tabs{display:flex;gap:4px;margin-bottom:14px;flex-wrap:nowrap;background:#0A1310;border:1px solid var(--line);border-radius:999px;padding:4px;width:fit-content;max-width:100%;overflow-x:auto}
.tabs button{background:transparent;border:0;border-radius:999px;padding:9px 15px;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--muted);white-space:nowrap;transition:color .15s}
.tabs button[aria-selected=true]{background:var(--grad);color:#04110A;border-color:transparent;box-shadow:var(--glow)}

.st-h h3{margin:0;font-family:Inter,system-ui,sans-serif;font-weight:900;font-size:20px;letter-spacing:-.02em;color:var(--ink)}
.kpis b{font-size:24px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-family:Inter,sans-serif;font-weight:900;letter-spacing:-.02em;filter:drop-shadow(0 0 8px rgba(0,255,157,.4))}.kpis span{font-size:11px;color:var(--muted);line-height:1.2}
.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{background:rgba(0,255,157,.25)!important}
.marker-cluster div{background:#00CC7E!important;color:#04110A!important;font-weight:800}
.leaflet-container{background:#0A1310}
.leaflet-tile{filter:saturate(1.25) contrast(1.06)}
.side .note a,.note a{color:var(--secondary);font-weight:700}
@media(min-width:900px){main{display:grid;grid-template-columns:330px 1fr;gap:18px;align-items:start}#map{grid-column:2;grid-row:1/8;height:72vh}.side{grid-column:1}}
@media(max-width:480px){.hero{padding:26px 18px 22px}}