:root{
  --canvas:#eef0f7;
  --surface:#ffffff;
  --surface-2:#e8ebf5;
  --border:#dde1ee;
  --text:#15172b;
  --text-soft:#535873;
  --accent:#3646d9;
  --accent-2:#5566ea;
  --accent-soft:#e3e6fb;
  --header:linear-gradient(125deg,#232c73 0%,#3646d9 100%);
  --rojo:#e0322f;
  --ambar:#e08608;
  --verde:#16a34a;
  --rescate:#db2777;
  --shadow:0 1px 2px rgba(20,22,55,.05),0 10px 24px rgba(20,22,55,.09);
  --radius:16px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;width:100%;max-width:100vw;overflow:hidden;position:fixed;left:0;top:0;background:var(--surface);overscroll-behavior:none;
  /* Android/Chrome NO debe "inflar" solo algunos textos (font-boosting/auto-sizing): eso hacía
     que en ciertos teléfonos un botón saliera enorme y otro chico. Lo apagamos → proporción
     pareja en TODO dispositivo, igual que en iPhone. */
  -webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:-apple-system,'Segoe UI',Roboto,'Liberation Sans','DejaVu Sans',sans-serif;
  color:var(--text);
  /* Letra FLUIDA: escala con el ancho real del teléfono, con piso (pantallas de 320px)
     y tope 17.5px = tal como se ve hoy en iPhone. Así se ve proporcionado en cualquiera. */
  font-size:clamp(15px, 4.6vw, 17.5px);line-height:1.45;overscroll-behavior:none;
  /* nada se desliza a los lados: solo scroll vertical en toda la app */
  touch-action:pan-y;overscroll-behavior-x:none;
}
/* La app llena SIEMPRE toda la pantalla (iPhone y Android), sin hueco blanco abajo.
   position:fixed+inset:0 evita el bug de 100dvh que dejaba una franja vacía. */
#app{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--canvas);overflow:hidden;max-width:100vw}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(9px + var(--safe-top)) 16px 9px;
  background:var(--header);color:#fff;flex:none;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand>div{min-width:0}
.logo{
  width:clamp(34px,9.6vw,40px);height:clamp(34px,9.6vw,40px);border-radius:11px;flex:none;
  background:linear-gradient(to bottom,#FCD116 0 50%,#003893 50% 75%,#CE1126 75% 100%);
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);
  display:grid;place-items:center;font-size:clamp(16px,4.8vw,19px);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.brand strong{display:block;font-size:clamp(15.5px,4.6vw,18px);line-height:1.1}
.brand small{display:block;font-size:clamp(11px,3.2vw,12.5px);opacity:.85}
.help-btn{
  background:rgba(255,255,255,.18);color:#fff;border:none;border-radius:20px;
  padding:clamp(8px,2.4vw,9px) clamp(11px,3.4vw,14px);font-size:clamp(12.5px,3.6vw,14px);font-weight:700;flex:none;white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px;line-height:1
}
.help-btn svg{width:18px;height:18px;display:block;flex:none}
.help-btn:active{transform:scale(.96)}

#screens{flex:1;overflow:hidden;position:relative}
.screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:16px;display:none}
/* listas: solo scroll vertical (no se corren de lado). El mapa queda libre para arrastrar. */
#screen-puntos,#screen-entregas,#screen-donar,#screen-info{touch-action:pan-y}
.screen.active{display:block}
#screen-mapa.active{display:block}

.head{padding:16px 16px 4px}
.head h1{margin:0;font-size:clamp(21px,6.4vw,26px);letter-spacing:-.3px}
.head .sub{margin:5px 0 0;color:var(--text-soft);font-size:15px;line-height:1.4}

/* MAPA */
#map{position:absolute;inset:0}
/* Leyenda: arriba-izquierda, DEBAJO del control de zoom (+/-). Así el botón flotante
   de abajo (＋ Avisar) nunca la tapa, en ningún tamaño de pantalla. */
.map-legend{
  position:absolute;left:8px;top:120px;bottom:auto;z-index:500;background:rgba(255,255,255,.96);
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);max-width:62vw;
  padding:9px 11px;display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--text)
}
.map-legend span{white-space:nowrap}
.map-legend strong{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft);margin-bottom:1px}
.map-legend span{display:flex;align-items:center;gap:8px}
.map-ctrls{position:absolute;right:12px;top:12px;z-index:600;display:flex;flex-direction:column;gap:8px}
.map-ctrls button{
  width:clamp(44px,12vw,50px);height:clamp(44px,12vw,50px);border-radius:14px;border:1px solid var(--border);
  background:var(--surface);box-shadow:var(--shadow);font-size:clamp(19px,5.6vw,22px);line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer
}
.map-ctrls button:active{transform:scale(.94)}
/* FILTROS DEL MAPA: barra de chips bajo el buscador para mostrar/ocultar cada tipo y ver solo lo que falta.
   Chip lleno = ese tipo se está viendo; chip apagado = oculto. Así el mapa no se satura. */
.map-filtros{position:absolute;top:66px;left:56px;right:66px;z-index:640;display:flex;gap:6px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x;overscroll-behavior-x:contain;
  padding-bottom:2px;scrollbar-width:none}
.map-filtros::-webkit-scrollbar{display:none}
.mf-chip,.mf-sel{flex:none;border-radius:20px;font-size:13px;font-weight:700;white-space:nowrap;
  padding:8px 13px;box-shadow:var(--shadow);cursor:pointer;line-height:1;
  border:1px solid var(--border);background:rgba(255,255,255,.75);color:var(--text-soft)}
.mf-chip.active{background:var(--accent);border-color:var(--accent);color:#fff}
.mf-sel{-webkit-appearance:none;appearance:none;background:rgba(255,255,255,.98);
  padding-right:26px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1l4 4 4-4' fill='none' stroke='%23667' stroke-width='1.6'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center}
.map-filtros.filtrando .mf-sel{background-color:var(--accent);color:#fff;border-color:var(--accent);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1l4 4 4-4' fill='none' stroke='white' stroke-width='1.6'/></svg>")}
.sw{width:15px;height:15px;border-radius:50%;display:inline-block;flex:none}
.sw.rojo{background:var(--rojo)}.sw.ambar{background:var(--ambar)}
.sw.verde{background:var(--verde)}.sw.rescate{background:var(--rescate)}

.fab{
  position:absolute;right:16px;bottom:calc(16px + var(--safe-bot));z-index:600;max-width:calc(100vw - 32px);
  background:var(--header);color:#fff;border:none;border-radius:28px;white-space:nowrap;
  padding:clamp(13px,3.8vw,16px) clamp(16px,5vw,22px);font-size:clamp(15px,4.4vw,17px);font-weight:800;box-shadow:0 8px 20px rgba(54,70,217,.42);
}
.fab:active{transform:scale(.97)}

/* PANTALLAS DE LISTA (Lugares / Entregas / Donar): cabecera arriba, la lista
   scrollea en el medio, y el botón de acción queda en una BARRA fija abajo que
   NUNCA tapa las tarjetas (antes el botón flotante se montaba encima de la info). */
.screen.haslist{display:none;flex-direction:column;overflow:hidden;padding-bottom:0}
.screen.haslist.active{display:flex}
/* las filas de arriba NUNCA se encogen (así no se cortan los botones en pantallas cortas); solo scrollea .list */
.screen.haslist>.head,.screen.haslist>.seg,.screen.haslist>.filters,.screen.haslist>.resumen{flex:none}
.screen.haslist .list{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:14px}
.addbar{flex:none;background:var(--surface);border-top:1px solid var(--border);
  padding:10px 16px calc(10px + max(0px, calc(var(--safe-bot) - 18px)))}
.fab-full{width:100%;background:var(--header);color:#fff;border:none;border-radius:16px;
  padding:clamp(13px,3.9vw,16px);font-size:clamp(15px,4.4vw,17px);font-weight:800;box-shadow:0 6px 16px rgba(54,70,217,.32)}
.fab-full:active{transform:scale(.99)}

/* video tutorial en Ayuda */
.tuto-video{width:100%;border-radius:14px;background:#000;display:block;max-height:70vh}

/* selector de lugar ya reportado en el formulario de entrega */
.destinos{display:flex;flex-direction:column;gap:8px;max-height:210px;overflow-y:auto;
  -webkit-overflow-scrolling:touch;margin:2px 0 4px;padding:2px}
.destino{display:flex;align-items:center;gap:10px;text-align:left;width:100%;
  background:var(--surface-2);border:1px solid var(--border);border-radius:13px;
  padding:12px 14px;font-size:15.5px;font-weight:600;color:var(--text)}
.destino.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.destino .dot{width:12px;height:12px;border-radius:50%;flex:none}
.destino .dnom{font-weight:800}
.destino .dmeta{color:var(--text-soft);font-weight:600;font-size:13.5px;margin-left:auto}

/* FILTROS */
.filters{display:flex;gap:8px;overflow-x:auto;padding:12px 16px 4px;-webkit-overflow-scrolling:touch;touch-action:pan-x;overscroll-behavior-x:contain}
.chip{
  flex:none;background:var(--surface);border:1px solid var(--border);color:var(--text-soft);
  padding:9px clamp(11px,3.6vw,16px);border-radius:20px;font-size:clamp(13px,3.8vw,15px);font-weight:600;white-space:nowrap
}
.chip.active{background:var(--accent);border-color:var(--accent);color:#fff}

.resumen{display:flex;gap:8px;padding:8px 16px}
.stat{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:13px 6px;text-align:center;box-shadow:var(--shadow)}
.stat b{display:block;font-size:clamp(20px,6.2vw,26px);line-height:1}
.stat.r b{color:var(--rojo)}.stat.g b{color:var(--verde)}.stat.a b{color:var(--ambar)}
.stat small{color:var(--text-soft);font-size:clamp(11px,3.2vw,12.5px)}

/* LISTAS */
.list{padding:8px 16px 96px;display:flex;flex-direction:column;gap:12px}
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px;position:relative;border-left:6px solid var(--border)
}
.card.rojo{border-left-color:var(--rojo)}
.card.ambar{border-left-color:var(--ambar)}
.card.verde{border-left-color:var(--verde)}
.card.rescate{border-left-color:var(--rescate)}
.card h3{margin:0 0 3px;font-size:clamp(17px,4.8vw,19px)}
.card .meta{color:var(--text-soft);font-size:14px;margin-bottom:8px}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.tag{font-size:14px;padding:6px 11px;border-radius:9px;font-weight:600}
.tag.falta{background:#fde8e8;color:#b91c1c}
.tag.sobra{background:#e6f4ea;color:#15803d}
.tag.plain{background:var(--surface-2);color:var(--text-soft)}
.badge{position:absolute;top:13px;right:13px;font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:20px}
.badge.rojo{background:#fde8e8;color:#b91c1c}
.badge.verde{background:#e6f4ea;color:#15803d}
.badge.rescate{background:#fbe0ef;color:#a3166b}
.badge.gris{background:#e9edf2;color:#475569}
.badge.azul{position:static;display:inline-block;margin:0 8px 8px 0;top:auto;right:auto;background:#e0f2fe;color:#0369a1}
/* Personas desaparecidas */
.screen.haslist>.desap-search{flex:none;padding:10px 16px 0}
.desap-search input{width:100%;height:46px;border-radius:13px;border:1px solid var(--border);background:var(--surface);padding:0 14px;font-size:16px;color:var(--text)}
.card.desap.encontrado{opacity:.9}
.card.desap.fallecido{opacity:.82}
.claim{margin:8px 0 2px;padding:9px 12px;border-radius:11px;font-size:14px;line-height:1.4;font-weight:600}
.claim.verde{background:#e6f4ea;color:#15803d}
.claim.gris{background:#eef1f5;color:#475569}
.avlist{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.av{background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:9px 11px;font-size:14px;line-height:1.45;color:var(--text)}
.av .avt{font-weight:700;margin-right:4px}
.av .avd{display:block;margin-top:3px;font-size:12px;color:var(--text-soft)}
/* distintivo "Tú lo creaste": inline (no tapa el badge de estado), para hallar rápido lo propio */
.badge.tuyo{position:static;display:inline-block;margin:0 8px 8px 0;top:auto;right:auto;background:#e0edff;color:#1d4ed8}
.card:has(.badge.tuyo){box-shadow:0 0 0 2px #bcd6ff inset, var(--shadow, 0 1px 3px rgba(0,0,0,.06))}
.card-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.card-photo{width:100%;height:180px;object-fit:cover;border-radius:12px;margin:8px 0;background:var(--surface-2)}
.btn-mini{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:12px clamp(11px,3.6vw,15px);font-size:clamp(13.5px,3.9vw,15px);font-weight:700;color:var(--text)}
.btn-mini.acc{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-mini.ok{background:var(--verde);color:#fff;border-color:var(--verde)}
.only-owner{font-size:13px;color:var(--text-soft);display:inline-flex;align-items:center;gap:6px;padding:6px 2px;font-weight:600}
.only-owner::before{content:"🔒";font-size:13px}
.acct{font-family:'Liberation Mono',ui-monospace,monospace;background:var(--surface-2);padding:11px 12px;border-radius:10px;font-size:16px;margin-top:8px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.empty{text-align:center;color:var(--text-soft);padding:44px 22px;font-size:16px;line-height:1.5}

/* SEGMENT */
.seg{display:flex;gap:6px;padding:12px 16px 0}
.seg-btn{flex:1;min-width:0;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;
  padding:13px clamp(4px,2vw,8px);font-weight:700;color:var(--text-soft);font-size:clamp(12px,3.7vw,15px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15}
.seg-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* INFO */
.info-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:17px;margin:10px 16px}
.info-card h3{margin:0 0 7px;font-size:18px;color:var(--text)}
.info-card p{margin:0;font-size:15.5px;color:var(--text-soft);line-height:1.5}
.info-card.muted{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.btn-sec{background:var(--accent-soft);color:var(--accent);border:none;border-radius:12px;padding:14px 16px;font-weight:800;font-size:15.5px;width:100%}
.btn-sec.big{padding:16px;font-size:17px}
.foot{text-align:center;color:var(--text-soft);font-size:13px;padding:16px 22px 8px}

/* TABBAR — pegada al borde inferior; la zona del gesto del teléfono toma su mismo
   color (no queda franja blanca): el padding inferior es la safe-area y comparte fondo. */
.tabbar{
  display:flex;align-items:flex-end;background:var(--surface);border-top:1px solid var(--border);flex:none;
  /* íconos pegados abajo: solo un colchón mínimo para no chocar con la rayita del gesto del iPhone */
  padding-bottom:max(3px, calc(var(--safe-bot) - 20px))
}
.tab{
  flex:1;min-width:0;background:none;border:none;padding:6px 1px 2px;color:var(--text-soft);
  font-size:clamp(10px,3.1vw,12px);font-weight:700;display:flex;flex-direction:column;align-items:center;gap:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%
}
.tab .ti{display:block;height:clamp(22px,6.2vw,25px)}
.tab .ti svg{width:clamp(22px,6.2vw,25px);height:clamp(22px,6.2vw,25px);display:block}
.tab.active{color:var(--accent)}
.tab.active .ti{transform:scale(1.05)}

/* Enlace Instagram y firma discreta en Info */
.ig-link{display:inline-block;margin-top:9px;color:var(--accent);font-size:15.5px;font-weight:700;text-decoration:none}
.ig-link:active{opacity:.7}
.foot-by{opacity:.7;font-size:12px}

/* MODAL */
.modal{position:fixed;inset:0;z-index:1000;background:rgba(10,20,26,.5);display:flex;align-items:flex-end;justify-content:center}
.modal.hidden,.hidden{display:none!important}
.sheet{background:var(--surface);width:100%;max-width:560px;border-radius:22px 22px 0 0;max-height:92dvh;display:flex;flex-direction:column;animation:up .22s ease}
@keyframes up{from{transform:translateY(30px);opacity:.6}to{transform:translateY(0);opacity:1}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--border)}
.sheet-head h2{margin:0;font-size:20px}
.x{background:var(--surface-2);border:none;width:40px;height:40px;border-radius:50%;font-size:17px;color:var(--text-soft)}
.sheet-body{padding:16px;overflow-y:auto}
label{display:block;font-size:15px;font-weight:700;margin:14px 0 6px;color:var(--text)}
input,select,textarea{
  width:100%;font-size:16.5px;padding:14px;border:1px solid var(--border);border-radius:12px;
  background:var(--surface);color:var(--text);font-family:inherit
}
textarea{min-height:74px;resize:vertical}
.row2{display:flex;gap:10px}.row2>div{flex:1}
.help{font-size:14px;color:var(--text-soft);margin-top:5px;line-height:1.45}
.near-note{font-size:14px;color:var(--text-soft);line-height:1.45;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:11px 13px;margin:0 0 12px}
.near-note.hidden{display:none}
.btn-primary{width:100%;background:var(--accent);color:#fff;border:none;border-radius:14px;padding:17px;font-size:17.5px;font-weight:800;margin-top:18px}
.btn-primary:active{transform:scale(.99)}
.gps-btn{background:var(--accent-soft);color:var(--accent);border:none;border-radius:12px;padding:14px;font-weight:800;width:100%;margin-top:8px;font-size:15.5px}
.photo-prev{width:100%;height:190px;object-fit:cover;border-radius:12px;margin-top:8px;display:none;background:var(--surface-2)}
.multi{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
.opt{padding:12px 16px;border-radius:22px;border:1.5px solid var(--border);background:var(--surface);font-size:15px;font-weight:700;color:var(--text-soft)}
.opt.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.addother{display:flex;gap:8px;margin-top:10px}
.addother-inp{flex:1;font-size:15.5px;padding:12px}
.addother-btn{flex:0 0 auto;white-space:nowrap;background:var(--accent-soft);color:var(--accent);border:none;border-radius:12px;padding:0 16px;font-weight:800;font-size:15px}

/* PREGUNTA SIMPLE (in-app, reemplaza prompt/confirm del navegador) */
.ask-sheet{border-radius:22px;max-width:440px;margin:auto 12px;align-self:center;animation:pop .18s ease}
@keyframes pop{from{transform:scale(.94);opacity:.4}to{transform:scale(1);opacity:1}}
#ask{align-items:center}
#ask .sheet-body h2{margin:2px 0 0;font-size:20px}
.ask-msg{margin:8px 0 0;color:var(--text-soft);font-size:15.5px;line-height:1.45}
.ask-input{margin-top:14px}
.ask-actions{display:flex;gap:10px;margin-top:18px}
.ask-actions .btn-sec{flex:1}
.ask-actions .btn-primary{flex:1.3}

/* BIENVENIDA */
.welcome{position:fixed;inset:0;z-index:3000;background:var(--header);display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto}
.welcome-box{max-width:440px;width:100%;text-align:center;color:#fff;padding:20px 0}
.welcome-logo{width:64px;height:64px;border-radius:18px;background:linear-gradient(to bottom,#FCD116 0 50%,#003893 50% 75%,#CE1126 75% 100%);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);display:inline-grid;place-items:center;font-size:32px;margin-bottom:14px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.welcome-box h1{margin:0;font-size:32px;letter-spacing:-.4px}
.welcome-lead{margin:12px 4px 0;font-size:17px;line-height:1.5;opacity:.95}
.welcome-steps{display:flex;flex-direction:column;gap:12px;margin:24px 0}
.wstep{display:flex;align-items:center;gap:14px;text-align:left;background:rgba(255,255,255,.12);border-radius:16px;padding:15px 16px}
.wstep span{font-size:30px;line-height:1;flex:none}
.wstep div{font-size:15.5px;line-height:1.4}
.wstep b{font-size:17px}
.welcome-net{font-size:15px;font-weight:700;opacity:.95;margin:0 0 18px}
.welcome .btn-primary{background:#fff;color:var(--accent);font-size:19px;padding:18px}

.toast{position:fixed;left:50%;bottom:calc(84px + var(--safe-bot));transform:translateX(-50%);background:#0f1a20;color:#fff;padding:14px 20px;border-radius:12px;font-size:15.5px;z-index:2500;box-shadow:var(--shadow);max-width:88%}
.leaflet-container{background:#dfe6ef}
.leaflet-popup-content{font-size:14.5px}
.leaflet-popup-content b{font-size:15.5px}

/* mini-mapa para elegir ubicación dentro del formulario */
#pickmap{height:220px;border-radius:14px;overflow:hidden;border:1px solid var(--border);margin-top:8px;z-index:0}
#pickmap .leaflet-control-attribution{display:none}

/* ===== v14: marcador propio SVG (reemplaza el icono roto "?" de Leaflet) ===== */
.pin-div{background:none;border:none}
.pin-wrap{position:relative;width:34px;height:46px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.pin-glyph{position:absolute;top:5px;left:0;width:34px;text-align:center;font-size:15px;line-height:22px;pointer-events:none}

/* indicador "Cargando mapa…" en el mini-mapa del formulario */
#pickmap.loading::after{content:"Cargando mapa…";position:absolute;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;background:#dfe6ef;color:#5b6b7d;font-weight:700;font-size:15px}

/* badge de urgencia (inline, no pisa el badge de estado de arriba-derecha) */
.badge.urg{position:static;display:inline-block;margin:0 8px 8px 0;top:auto;right:auto;background:#fff3e0;color:#c2410c}

/* centro de acopio (donaciones físicas) */
.card.acopio{border-left:5px solid #7c3aed}
.badge.acopio{background:#efe7ff;color:#6d28d9}

/* ===== v15: vista POR ZONA (departamentos y ciudades) ===== */
.zona-depto{margin-bottom:6px}
.zona-h{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--header);color:#fff;border-radius:14px;
  padding:13px 16px;margin:14px 0 4px;font-size:18px;font-weight:800;box-shadow:var(--shadow)
}
.zona-h .zona-count{font-size:13px;font-weight:700;opacity:.9;margin-left:auto}
.zona-muni{
  font-size:15px;font-weight:800;color:var(--text-soft);
  padding:10px 4px 2px;letter-spacing:.01em;display:flex;align-items:center;gap:7px
}
.zona-muni::before{content:"🏘️";font-size:15px}

/* Buzón de sugerencias (v17) */
.buzon-card textarea{margin-bottom:10px}
.buzon-card .btn-primary{margin-top:12px}
.sug-ok{color:#15803d;font-weight:800;margin-top:12px;background:#ecfdf3;border:1px solid #b7f0cf;border-radius:12px;padding:12px 14px;line-height:1.4}

.foto-slot{margin:8px 0}
.foto-slot .btn-mini{opacity:.85}

/* ===== v22: proporción pareja en TODO teléfono. El tamaño ya es fluido (clamp) en cada
   componente de arriba, así que no hace falta forzar valores por breakpoint. Solo damos
   un respiro extra de aire en pantallas muy angostas para que nada quede apretado. ===== */
@media (max-width:340px){
  .head{padding:12px 12px 4px}
  .seg,.filters,.resumen,.list{padding-left:12px;padding-right:12px}
  .addbar{padding-left:12px;padding-right:12px}
}

/* ===== v19: vista de ESCRITORIO / PC — la app se centra como un celular, no estirada ===== */
@media (min-width:820px){
  html,body{overflow:auto;position:static;background:#0b1230}
  #app{
    position:fixed;top:0;bottom:0;left:50%;right:auto;transform:translateX(-50%);
    width:460px;max-width:460px;
    box-shadow:0 0 0 1px rgba(255,255,255,.06),0 24px 80px rgba(0,0,0,.55)
  }
  .map-legend{max-width:280px}
}

/* Indicador de conexión en vivo (mapa). Flota arriba-centro; no empuja el layout. */
#netstatus{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:600;
  background:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700;
  color:#334155;box-shadow:0 2px 10px rgba(0,0,0,.18);display:flex;align-items:center;gap:7px;
  max-width:80%;white-space:nowrap;}
#netstatus::before{content:"";width:8px;height:8px;border-radius:50%;background:#cbd5e1;flex:0 0 auto;}
#netstatus.on::before{background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.18);}
#netstatus.off::before{background:#dc2626;}

/* ---- Contador de visitantes (pantalla Ayuda) ---- */
.stats-card .stats-row{display:flex;gap:10px;margin-top:6px}
.stats-card .stat{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:14px 6px;text-align:center;box-shadow:none}
.stats-card .stat-num{font-size:clamp(26px,8vw,34px);font-weight:800;line-height:1;color:var(--accent)}
.stats-card .stat-lab{font-size:clamp(11px,3.2vw,12.5px);color:var(--text-soft);line-height:1.2}
.aporta-card{border-left:5px solid var(--accent)}

/* ===== Buscador del mapa principal (nombre o dirección) ===== */
.map-search{position:absolute;top:12px;left:56px;right:66px;z-index:650}
.map-search input{width:100%;height:46px;border-radius:13px;border:1px solid var(--border);
  background:rgba(255,255,255,.98);box-shadow:var(--shadow);padding:0 14px;font-size:15px;color:var(--text);outline:none}
.map-res{margin-top:6px;background:var(--surface);border:1px solid var(--border);border-radius:13px;
  box-shadow:var(--shadow);overflow:hidden;max-height:52vh;overflow-y:auto;display:none}
.map-res.on{display:block}
.map-hit{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;
  background:none;border:none;border-bottom:1px solid var(--border);padding:11px 13px;font-size:14.5px;color:var(--text);cursor:pointer}
.map-hit:last-child{border-bottom:none}
.map-hit span{color:var(--text-soft);font-size:12.5px}
.map-hit.geo{font-weight:600;color:var(--text-soft)}
.map-hit:active{background:var(--accent-soft)}
.geo-hint{padding:9px 13px;color:var(--text-soft);font-size:12.5px}

/* ===== Buscador de dirección dentro del formulario (geocodificar) ===== */
.geo-search{margin:2px 0 10px}
.geo-row{display:flex;gap:8px}
.geo-row #geo-q{flex:1;min-width:0}
#geo-go{flex:0 0 auto;background:var(--accent-soft);color:var(--accent);border:none;border-radius:12px;
  padding:0 18px;font-weight:800;font-size:15px;cursor:pointer}
.geo-gps{display:block;width:100%;margin-top:8px;background:#16a34a;color:#fff;border:none;border-radius:12px;
  padding:11px 12px;font-weight:800;font-size:14px;cursor:pointer;line-height:1.3}
.geo-gps:active{filter:brightness(.92)}
.geo-res{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.geo-hit{text-align:left;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
  padding:10px 12px;font-size:13.5px;color:var(--text);cursor:pointer;line-height:1.35}
.geo-hit:active{background:var(--accent-soft)}

/* ===== Etiqueta con el nombre sobre el marcador (para ubicarlo de un vistazo) ===== */
.leaflet-tooltip.mk-label{background:rgba(255,255,255,.96);border:1px solid var(--border);border-radius:8px;
  padding:2px 7px;font-weight:800;font-size:11.5px;color:var(--text);box-shadow:0 1px 5px rgba(20,22,55,.18);white-space:nowrap}
.leaflet-tooltip.mk-label:before{display:none}
.leaflet-tooltip.mk-label-acopio{color:#7c3aed;border-color:#cbb6f6}

/* ===== "Cómo llegar" dentro de los globos del mapa ===== */
.popup-go{display:inline-block;margin-top:7px;color:#1a73e8;font-weight:800;text-decoration:none;font-size:14px}

/* ================= CONFIANZA (anclas + votos de la comunidad) ================= */
/* Eje aparte del semáforo: no cambia el color de "qué falta", suma un sello + medidor. */
.trust{margin:10px 0 2px;padding:10px 11px;border:1px solid var(--border);border-radius:13px;background:var(--surface-2)}
.trust-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:7px}
.trust-badge{font-weight:800;font-size:13.5px;display:inline-flex;align-items:center;gap:4px}
.trust-ancla{font-size:12px;color:var(--text-soft);font-weight:700;background:#e0f2fe;border:1px solid #bae6fd;color:#0369a1;border-radius:999px;padding:3px 9px}
.trust-meter{height:8px;border-radius:6px;background:#e6e8f2;overflow:hidden;margin-bottom:9px}
.trust-meter i{display:block;height:100%;border-radius:6px;transition:width .3s ease}
.trust-votes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tv{flex:1;min-width:120px;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;
  padding:11px 10px;font-size:14.5px;font-weight:800;color:var(--text);cursor:pointer}
.tv:active{transform:scale(.96)}
.tv.confia.on{background:#dcfce7;border-color:#16a34a;color:#15803d}
.tv.duda.on{background:#fee2e2;border-color:#dc2626;color:#b91c1c}
.trust-count{font-size:13.5px;font-weight:800;color:var(--text-soft)}
/* Lugar marcado "Dudoso" por la comunidad: se atenúa (no se borra) y baja en la lista */
.card.dudoso{opacity:.72}
.card.dudoso .trust{border-color:#fecaca;background:#fff5f5}
/* swatches de la leyenda del mapa */
.sw.ring-ok{background:transparent;border:3px solid #16a34a}
.sw.ring-bad{background:transparent;border:3px dashed #dc2626}
.sw.ancla{background:rgba(14,165,233,.18);border:1px solid #0ea5e9}
/* botón de anclas apagado */
#btn-anclas.off{opacity:.5}

/* ================= MODO OPERATIVO · ENTIDADES (v40) ================= */
/* Banner en "Lugares" cuando estás logueado como entidad */
.ent-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 16px 8px;
  padding:9px 13px;border-radius:13px;background:linear-gradient(120deg,#e8f0ff,#eef2ff);
  border:1px solid #cdd9fb;color:#1e2a5e;font-size:14.5px}
.ent-banner b{font-weight:800}
/* Badge de atención en las tarjetas de punto (para todos) */
.atn-badge{display:inline-block;color:#fff;font-weight:800;font-size:12px;border-radius:999px;
  padding:3px 10px;margin:0 6px 6px 0;vertical-align:middle}
/* Controles de atención (solo entidades) en la tarjeta */
.atn-ctrls{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px}
.btn-mini.atn{border-color:#c7d2fe;background:#eef2ff;color:#1e2a5e;font-weight:700}
.btn-mini.atn.go{background:#2563eb;border-color:#2563eb;color:#fff}
.btn-mini.atn.done{background:#16a34a;border-color:#16a34a;color:#fff}
/* Botones dentro del popup del mapa */
.popup-atn{display:inline-block;margin:6px 6px 0 0;padding:7px 11px;border-radius:10px;border:none;
  background:#2563eb;color:#fff;font-weight:800;font-size:13px;cursor:pointer}
.popup-atn.done{background:#16a34a}
/* Tarjeta de acceso en la sección Ayuda */
.entidad-card{border-left:5px solid #2563eb}
/* Overlay del modo entidades */
.ent-overlay{position:fixed;inset:0;z-index:1200;background:rgba(15,18,45,.55);
  display:flex;align-items:flex-end;justify-content:center;padding:0}
.ent-overlay.hidden{display:none}
.ent-sheet{position:relative;width:100%;max-width:560px;max-height:92vh;overflow-y:auto;
  background:var(--surface);border-radius:22px 22px 0 0;padding:22px 18px calc(26px + var(--safe-bot));
  box-shadow:0 -8px 40px rgba(20,22,55,.3);-webkit-overflow-scrolling:touch}
@media(min-width:600px){.ent-overlay{align-items:center}.ent-sheet{border-radius:22px}}
.ent-sheet .x{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;
  border:none;background:var(--surface-2);color:var(--text);font-size:18px;cursor:pointer;z-index:2}
.ent-intro h2{margin:2px 40px 8px 0;font-size:22px}
.ent-intro p{margin:0 0 9px;color:var(--text-soft);font-size:15px;line-height:1.45}
.ent-note{background:#eef2ff;border:1px solid #d6def9;border-radius:12px;padding:9px 12px;color:#26356e !important}
.ent-tabs{display:flex;gap:8px;margin:14px 0 12px}
.ent-tab{flex:1;padding:11px;border-radius:12px;border:1px solid var(--border);background:var(--surface);
  font-size:14.5px;font-weight:700;color:var(--text-soft);cursor:pointer}
.ent-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.ent-pane{display:flex;flex-direction:column}
.ent-pane.hidden{display:none}
.ent-pane label{font-size:13.5px;font-weight:700;color:var(--text-soft);margin:10px 0 5px}
.ent-pane input,.ent-pane select{font-size:16px;padding:12px 13px;border-radius:12px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);width:100%;box-sizing:border-box}
.ent-pane .btn-primary{margin-top:16px}
.ent-hint{font-size:13.5px;color:var(--text-soft);margin:9px 0 0;line-height:1.4}
.ent-ok{margin-top:14px;background:#e9f9ef;border:1px solid #b7ebc8;border-radius:12px;padding:13px;
  font-size:14.5px;color:#14532d;line-height:1.5;text-align:center}
.ent-ok.hidden{display:none}
.ent-code{display:inline-block;font-size:30px;font-weight:900;letter-spacing:.14em;color:#14532d;margin:6px 0}
/* Tablero */
.ent-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 14px}
.ent-head h2{margin:0;font-size:20px}
.ent-sub{margin:2px 0 0;color:var(--text-soft);font-size:14px}
.tab-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.tab-cell{background:var(--surface-2);border-radius:14px;padding:13px;text-align:center;display:flex;flex-direction:column;gap:2px}
.tab-cell b{font-size:26px;font-weight:900;color:var(--text)}
.tab-cell small{font-size:12.5px;color:var(--text-soft)}
.tab-cell.crit{background:#fdeceb;border:1px solid #f5c6c3}
.tab-cell.crit b{color:var(--rojo)}
.tab-cell.cam b{color:#2563eb}
.tab-cell.done b{color:var(--verde)}
.ent-mine{background:#eef2ff;border:1px solid #cdd9fb;border-radius:12px;padding:10px 13px;
  font-size:14px;color:#1e2a5e;margin-bottom:6px}
.ent-h3{margin:16px 0 8px;font-size:16px}
.ent-list{display:flex;flex-direction:column;gap:9px}
.tab-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--border);border-left:5px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--surface)}
.tab-row.rojo,.tab-row.rescate{border-left-color:var(--rojo)}
.tab-row.ambar{border-left-color:var(--ambar)}
.tab-row.verde{border-left-color:var(--verde)}
.tr-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.tr-main b{font-size:15px;line-height:1.25}
.tr-main span{font-size:12.5px;color:var(--text-soft)}
.tr-act{display:flex;gap:6px;flex:none}
.ent-munis{display:flex;flex-direction:column;gap:6px}
.muni-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--surface-2);border-radius:10px;padding:9px 12px;font-size:14px}
.muni-row b{font-size:16px;color:var(--accent)}