:root{
  --bg:#191b20; --panel:#1e2229; --line:#2c2f38; --ink:#f3f1ea; --mut:#a7a49b;
  --green:#3A9BE6; --nuevo:#e0533d; --gestion:#e0a53d; --resuelto:#3d9e6b;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
#app{display:flex;height:100vh}
#side{width:340px;flex:0 0 340px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column}
#brand{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:11px}
#brand-logo{width:34px;height:34px;border-radius:8px;flex:none}
#brand b{font-size:15px}
#brand span{display:block;color:var(--mut);font-size:12px;margin-top:2px}
#filters{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.fbtn{font-size:12px;padding:5px 9px;border-radius:20px;border:1px solid var(--line);background:transparent;color:var(--mut);cursor:pointer}
.fbtn.on{background:var(--green);color:#fff;border-color:var(--green)}
#list{flex:1;overflow:auto}
.card{padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.card:hover{background:#232733}
.card.sel{background:#1c2735;border-left:3px solid var(--green)}
.card .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.card .id{font-size:11px;color:var(--mut);font-family:monospace}
.badge{font-size:10px;padding:2px 7px;border-radius:20px;color:#fff;text-transform:uppercase;letter-spacing:.3px}
.b-nuevo{background:var(--nuevo)} .b-gestion{background:var(--gestion)} .b-resuelto{background:var(--resuelto)}
.card .cat{font-size:13px;font-weight:600;margin:4px 0 2px}
.card .txt{font-size:12px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#main{flex:1;position:relative}
#map{position:absolute;inset:0;background:#0d0f13;z-index:0}  /* z-index:0 = stacking context propio; contiene los panes/controles de Leaflet */
.pin{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.5);font-size:0}
.pin.nuevo{background:var(--nuevo)} .pin.gestion{background:var(--gestion)} .pin.resuelto{background:var(--resuelto)}
#detail{position:absolute;top:0;right:0;width:360px;height:100%;background:var(--panel);border-left:1px solid var(--line);transform:translateX(100%);transition:.2s;z-index:1000;display:flex;flex-direction:column}
#detail.open{transform:none}
#detail .hd{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
#detail .bd{padding:14px;overflow:auto;flex:1}
#detail .fotos img{width:100%;border-radius:8px;margin-bottom:8px;display:block;cursor:zoom-in;aspect-ratio:3/2;object-fit:cover}
#detail .fotos.grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
#detail .fotos.grid img{margin-bottom:0;aspect-ratio:1/1;object-fit:cover;height:100%}
#lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:9999;display:none}
#lightbox.open{display:block}
#lb-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
#lb-img{max-width:94vw;max-height:92vh;border-radius:6px;box-shadow:0 8px 40px rgba(0,0,0,.6);transform-origin:center center;transition:transform .08s ease-out;user-select:none;-webkit-user-drag:none}
#lb-ctl{position:absolute;top:14px;right:16px;z-index:2;display:flex;gap:8px}
#lb-ctl button{width:40px;height:40px;border:1px solid rgba(255,255,255,.55);border-radius:9px;background:rgba(0,0,0,.6);color:#fff;font-size:20px;line-height:1;cursor:pointer;backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(0,0,0,.4)}
#lb-ctl button:hover{background:rgba(0,0,0,.8)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:52px;height:72px;border:1px solid rgba(255,255,255,.55);border-radius:10px;background:rgba(0,0,0,.6);color:#fff;font-size:38px;line-height:1;cursor:pointer;backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(0,0,0,.4);display:none}
.lb-nav:hover{background:rgba(0,0,0,.8)}
#lightbox.multi .lb-nav{display:block}
#lb-prev{left:16px} #lb-next{right:16px}
#lb-count{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:2;color:#fff;font-size:13px;background:rgba(0,0,0,.5);padding:4px 12px;border-radius:20px;display:none}
#lightbox.multi #lb-count{display:block}
#detail h3{margin:0 0 2px;font-size:16px}
#detail .meta{color:var(--mut);font-size:12px;margin-bottom:10px}
#detail p{font-size:14px;line-height:1.45}
.est{display:flex;gap:6px;margin-top:12px}
.est button{flex:1;padding:8px;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:8px;cursor:pointer;font-size:12px}
.est button.on{color:#fff;border:none}
.wa-send{width:100%;margin-top:10px;padding:11px;border:none;border-radius:8px;background:#25d366;color:#0a2e1a;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.wa-send:hover{background:#2ee27a}
.x{cursor:pointer;color:var(--mut);font-size:20px;line-height:1}
#empty{padding:30px 16px;color:var(--mut);font-size:13px;text-align:center}

/* ===== barra mobile (oculta en desktop) ===== */
#mbar{display:none}

@media (max-width:820px){
  #app{height:100vh}
  /* barra superior con nombre + toggle */
  #mbar{display:flex;align-items:center;justify-content:space-between;gap:10px;
    position:fixed;top:0;left:0;right:0;height:52px;padding:0 12px;z-index:500;
    background:var(--panel);border-bottom:1px solid var(--line)}
  #mbar-logo{width:28px;height:28px;border-radius:6px;flex:none}
  #mbar-name{flex:1;min-width:0;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #mtoggle{display:flex;gap:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;flex:0 0 auto}
  #mtoggle button{padding:7px 12px;border:none;background:transparent;color:var(--mut);font-size:13px;cursor:pointer}
  #mtoggle button.on{background:var(--green);color:#fff}

  /* mapa: siempre full-screen detrás (mantiene su tamaño → Leaflet ok) */
  #main{position:fixed;inset:52px 0 0 0}
  /* lista: overlay por encima del mapa, se muestra/oculta con la clase del body */
  #side{position:fixed;inset:52px 0 0 0;width:auto;flex:none;z-index:100;
    transform:translateY(0);transition:transform .2s;border-right:none}
  #brand{display:none}                 /* el nombre ya está en la #mbar */
  /* modo mapa: la lista se oculta pero los FILTROS quedan como barra sobre el mapa */
  body.m-map #side{bottom:auto;height:auto}
  body.m-map #list{display:none}
  body.m-map #filters-cat{border-bottom:1px solid var(--line)}
  /* controles de Leaflet corridos debajo de la barra de filtros (altura medida en mView) */
  body.m-map .leaflet-top{top:var(--fbar,0px)}
  /* detalle: full-screen (fixed al viewport) encima de todo */
  #detail{position:fixed;inset:0;width:100%;height:100%;z-index:10}
  body.detail-open #main{z-index:600}   /* saca a #main (y su #detail) por encima de mbar/lista */
  /* lightbox: controles más grandes y separados del notch en mobile */
  #lb-ctl{top:max(14px,env(safe-area-inset-top));right:12px;gap:10px}
  #lb-ctl button{width:46px;height:46px;font-size:22px}
  .lb-nav{width:44px;height:64px;font-size:32px}
  #lb-prev{left:8px} #lb-next{right:8px}
}

/* ===== ingest: prioridad + corroboración + zona + aportes ===== */
:root{ --alta:#d64545; --media:#c98a2b; --baja:#5f7186; }
.card .top{gap:6px}
.chips{display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.prio{font-size:10px;padding:2px 7px;border-radius:20px;border:1px solid;white-space:nowrap;letter-spacing:.2px}
.p-alta{color:#ffb0a6;border-color:var(--alta);background:rgba(214,69,69,.18)}
.p-media{color:#f0c675;border-color:var(--media);background:rgba(201,138,43,.14)}
.p-baja{color:#9fb0c4;border-color:var(--baja);background:transparent}
.corrob{font-size:10px;padding:2px 7px;border-radius:20px;font-weight:700;color:#ffe0a8;background:rgba(224,165,61,.20);border:1px solid var(--media);white-space:nowrap}
#detail .dmeta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
#detail .zona{font-size:12.5px;color:#d9c48a;background:rgba(201,138,43,.10);border:1px solid var(--line);border-radius:8px;padding:7px 10px;margin:0 0 10px}
.aportes{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.aportes-h{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--mut);margin-bottom:6px}
.aporte{font-size:12.5px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 9px;margin-bottom:5px}

/* notas del caso (timeline fechado con autor) */
.notas{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.nota{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 9px;margin-bottom:5px}
.nota-meta{font-size:11px;color:var(--mut);margin-bottom:2px}
.nota-txt{font-size:12.5px;color:var(--ink);white-space:pre-wrap}
.nota.n-cierre{border-color:rgba(61,158,107,.45);background:rgba(61,158,107,.08)}
.nota.n-cierre .nota-meta{color:#8fd3ad}
.nota .nota-fotos{margin-top:6px;margin-bottom:2px}

/* fotos adjuntas en forms (nota / cierre): botón + thumbnails con quitar */
.adj{margin-top:6px}
.adj-th{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 2px}
.adj-t{position:relative;display:inline-block}
.adj-t img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.adj-t button{position:absolute;top:-6px;right:-6px;width:18px;height:18px;line-height:16px;border-radius:50%;border:none;background:#b3453a;color:#fff;font-size:12px;cursor:pointer;padding:0}
.adj-st{font-size:11px;color:var(--mut);margin-left:8px}

/* form inline de cierre (nota + foto de prueba + confirmación) */
.cierre-form{margin-top:12px;border:1px solid rgba(61,158,107,.45);background:rgba(61,158,107,.08);border-radius:10px;padding:9px 10px}

/* prueba de resolución (fotos de cierre + quién/cuándo cerró) */
#detail .cierre{margin-top:12px;border:1px solid rgba(61,158,107,.45);background:rgba(61,158,107,.08);border-radius:10px;padding:9px 10px 2px}
#detail .cierre-h{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#8fd3ad;font-weight:700;margin-bottom:4px}
#detail .cierre-meta{font-size:12px;color:var(--mut);margin-bottom:8px}

/* toast de auto-refresh ("nuevo aviso") */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  background:#141821;color:#eaf1fb;border:1px solid #2b6da3;border-radius:999px;
  padding:10px 18px;font-weight:600;font-size:14px;box-shadow:0 6px 24px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:9999}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:820px){#toast{bottom:76px}}

/* filtro por categoría (select) */
#filters-cat{padding:0 12px 10px;border-bottom:1px solid var(--line)}
#fcat{width:100%;font-size:12px;padding:6px 9px;border-radius:8px;border:1px solid var(--line);
  background:#161a22;color:var(--fg,#eaf1fb);cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%237fa4cf'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center}
#fcat:focus{outline:none;border-color:var(--green)}

/* edición de descripción (admin) */
.edit-desc{margin-top:6px;font-size:12px;padding:3px 8px;border-radius:6px;border:1px solid var(--line);
  background:transparent;color:var(--mut);cursor:pointer}
.edit-desc:hover{border-color:var(--green);color:var(--fg,#eaf1fb)}
.desc-edit{width:100%;box-sizing:border-box;font:inherit;font-size:14px;line-height:1.4;
  background:#161a22;color:var(--fg,#eaf1fb);border:1px solid var(--green);border-radius:8px;padding:8px 10px;resize:vertical}
.desc-actions{display:flex;gap:8px;margin-top:8px}
.db-save{background:var(--green);color:#fff;border:none;border-radius:8px;padding:7px 16px;font-weight:600;cursor:pointer}
.db-cancel{background:transparent;color:var(--mut);border:1px solid var(--line);border-radius:8px;padding:7px 14px;cursor:pointer}

/* ===== Panel Enviar al encargado ===== */
#encpanel{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:10000;display:none;align-items:center;justify-content:center;padding:16px}
#encpanel.open{display:flex}
.enc-card{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden;max-height:88vh;display:flex;flex-direction:column}
.enc-hd{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.enc-hd b{font-size:15px}
.enc-sub{padding:10px 16px 4px;color:var(--mut);font-size:12.5px;line-height:1.45}
#enc-list{padding:6px 12px;overflow-y:auto;flex:1}
.enc-empty{padding:18px 6px;color:var(--mut);font-size:13px;text-align:center;line-height:1.5}
.enc-row{display:flex;align-items:center;gap:8px;padding:9px 6px;border-bottom:1px solid var(--line)}
.enc-row:last-child{border-bottom:none}
.enc-row.editing{flex-wrap:wrap}
.enc-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.enc-nom{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.enc-tel{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}
.enc-acts{display:flex;align-items:center;gap:6px;flex-shrink:0}
.enc-send{padding:7px 12px;border:none;border-radius:7px;background:#25d366;color:#0a2e1a;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:4px;white-space:nowrap}
.enc-send:hover{background:#2ee27a}
.enc-send:disabled{opacity:.5;cursor:default}
.enc-icon{background:transparent;border:1px solid var(--line);border-radius:7px;padding:6px 8px;font-size:13px;cursor:pointer;line-height:1}
.enc-icon:hover{border-color:var(--green)}
.enc-icon:disabled{opacity:.4;cursor:default}
.enc-fields{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.enc-in{background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:8px 10px;color:var(--ink);font-size:13.5px;width:100%;box-sizing:border-box}
.enc-in:focus{outline:none;border-color:var(--green)}
.enc-save{padding:8px 14px;border:none;border-radius:7px;background:var(--green);color:#fff;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.enc-save:hover{filter:brightness(1.1)}
#enc-add{padding:10px 12px 14px;border-top:1px solid var(--line)}
.enc-addbtn{width:100%;padding:10px;border:1px dashed var(--line);border-radius:8px;background:transparent;color:var(--green);font-size:13.5px;font-weight:600;cursor:pointer}
.enc-addbtn:hover{border-color:var(--green);background:rgba(58,155,230,.06)}
@media(max-width:820px){.enc-card{max-width:none;border-radius:12px}}

/* labels de localidades (barrios geo: partido en satelital) */
.loc-label{ background:rgba(4,12,20,.72); border:1px solid rgba(233,236,242,.18); color:#f3f1ea;
  font-size:11px; padding:2px 7px; border-radius:6px; box-shadow:none; }
.loc-label::before{ display:none; }

/* botón de capa activo (todas las capas usan capa-on; anegamiento conserva agua-on) */
.leaflet-bar a.capa-on, .leaflet-bar a.agua-on{ background:#3A9BE6; color:#fff; }

/* tooltip instantáneo de los botones de capa (el title nativo tarda ~1 s por el SO) */
.leaflet-bar a[data-tip]{ position:relative; }
.leaflet-bar a[data-tip]:hover::after{
  content:attr(data-tip); position:absolute; left:calc(100% + 9px); top:50%; transform:translateY(-50%);
  background:rgba(10,16,24,.94); color:#e8eef4; border:1px solid rgba(255,255,255,.18);
  border-radius:8px; padding:4px 10px; font-size:12px; font-weight:400; white-space:nowrap;
  z-index:900; pointer-events:none; box-shadow:0 4px 12px rgba(0,0,0,.4); }

/* atribución del basemap: crédito mínimo obligatorio, discreto */
.leaflet-container .leaflet-control-attribution{ background:rgba(11,14,20,.4); color:rgba(243,241,234,.5);
  font-size:9px; padding:1px 6px; border-radius:4px 0 0 0; margin:0; }
.leaflet-container .leaflet-control-attribution a{ color:inherit; text-decoration:none; }