:root{
  --bg: #0f1720;
  --panel: #17222e;
  --panel-2: #1e2b3a;
  --line: #2b3b4d;
  --text: #f4f1ea;
  --text-dim: #9fb0bf;
  --urgent: #c0392b;
  --urgent-2: #e05a45;
  --safe: #2e8b57;
  --info: #3b82c4;
  --warn: #d9a441;
  --radius: 10px;
  --focus: #ffd166;
}

/* Modo claro (opcional, oscuro sigue siendo el de por defecto) */
body.tema-claro{
  --bg: #f4f1ea;
  --panel: #ffffff;
  --panel-2: #eef1f4;
  --line: #d8dde3;
  --text: #1a2430;
  --text-dim: #5b6b7a;
  --urgent: #c0392b;
  --urgent-2: #e05a45;
  --safe: #237a4b;
  --info: #2b6ca3;
  --warn: #a9721a;
  --focus: #b8860b;
}
body.tema-claro .leaflet-popup-content-wrapper{background:#fff; color:#1a2430}
body.tema-claro .leaflet-popup-tip{background:#fff}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--urgent-2)}

button, input, select, textarea{
  font-family:inherit;
  font-size:16px; /* evita zoom automático en iOS */
}

:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
}

/* ---------- Header ---------- */
header.top{
  position:sticky; top:0; z-index:50;
  background:var(--panel);
  border-bottom:1px solid var(--line);
  padding:10px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap;
}
header.top .brand{
  display:flex; align-items:center; gap:10px;
}
header.top .brand .dot{
  width:12px;height:12px;border-radius:50%;background:var(--urgent);
  box-shadow:0 0 0 4px rgba(192,57,43,.25);
}
header.top h1{font-size:16px; margin:0; line-height:1.2}
header.top h1 small{display:block; font-weight:400; font-size:11px; color:var(--text-dim)}

.acciones-header{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}

#estado-conexion{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  white-space:nowrap;
}
#estado-conexion.online{color:#bfe6cf;border-color:var(--safe)}
#estado-conexion.offline{color:#f3c9c2;border-color:var(--urgent)}

.btn-auth{
  font-size:11.5px; padding:5px 10px; border-radius:999px;
  border:1px solid var(--line); background:var(--panel-2); color:var(--text-dim);
  cursor:pointer; white-space:nowrap;
}
.btn-auth:hover{color:var(--text)}
.sesion-admin{
  display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-dim);
  background:var(--panel-2); border:1px solid var(--info); border-radius:999px;
  padding:4px 6px 4px 10px;
}
.sesion-admin[hidden]{display:none}
#sesion-email-corto{
  max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:#a9d3f2;
}
#btn-logout-admin{
  background:none; border:none; color:var(--text-dim); cursor:pointer;
  font-size:13px; padding:2px 4px; line-height:1;
}
#btn-logout-admin:hover{color:var(--text)}


/* ---------- Campanita de notificaciones ---------- */
.campana-notificaciones{position:relative}
.btn-campana{
  position:relative; background:none; border:1px solid var(--line);
  border-radius:999px; width:34px; height:34px; font-size:16px;
  color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.btn-campana:hover{background:var(--panel-2)}
.badge-notificaciones{
  position:absolute; top:-4px; right:-4px; background:var(--urgent); color:#fff;
  font-size:10px; font-weight:700; min-width:16px; height:16px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; padding:0 3px;
  border:2px solid var(--panel);
}
.badge-notificaciones[hidden]{display:none}

.panel-notificaciones{
  position:fixed; top:58px; right:10px; z-index:70;
  width:min(340px, 92vw); max-height:70vh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.panel-notificaciones[hidden]{display:none}
.panel-notificaciones-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--panel);
}
.panel-notificaciones-header strong{font-size:14px}
#btn-cerrar-panel-notificaciones{
  background:none; border:none; color:var(--text-dim); font-size:16px; cursor:pointer; padding:2px 6px;
}
.panel-notificaciones-vacio{
  padding:24px 14px; text-align:center; font-size:13px; color:var(--text-dim); margin:0;
}

.panel-notificaciones-pie{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-top:1px solid var(--line);
  position:sticky; bottom:0; background:var(--panel);
  font-size:12px; color:var(--text-dim);
}
.interruptor-tema{position:relative; display:inline-block; width:38px; height:22px; flex-shrink:0}
.interruptor-tema input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.interruptor-tema-riel{
  position:absolute; inset:0; background:var(--line); border-radius:999px; transition:background .15s;
}
.interruptor-tema-riel::before{
  content:''; position:absolute; top:2px; left:2px; width:18px; height:18px;
  background:#fff; border-radius:50%; transition:transform .15s;
}
.interruptor-tema input:checked + .interruptor-tema-riel{background:var(--info)}
.interruptor-tema input:checked + .interruptor-tema-riel::before{transform:translateX(16px)}

.item-notificacion{
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 14px; border-bottom:1px solid var(--line);
}
.item-notificacion:last-child{border-bottom:none}
.item-notificacion.sismo-fuerte{background:rgba(192,57,43,.08)}
.item-notificacion.sismo-moderado{background:rgba(217,164,65,.08)}
.item-notificacion-icono{font-size:18px; line-height:1; flex-shrink:0; margin-top:1px}
.item-notificacion-texto{flex:1; min-width:0}
.item-notificacion-texto strong{display:block; font-size:13px; color:var(--text); margin-bottom:2px}
.item-notificacion-texto p{margin:0; font-size:12.5px; color:var(--text-dim); line-height:1.4}
.item-notificacion-btn{
  display:inline-block; margin-top:8px; font-size:12px; font-weight:700;
  padding:6px 12px; border-radius:999px; border:none; cursor:pointer;
  background:var(--info); color:#fff; text-decoration:none;
}
.item-notificacion-cerrar{
  background:none; border:none; color:var(--text-dim); font-size:14px;
  cursor:pointer; padding:2px 4px; flex-shrink:0; line-height:1;
}
.item-notificacion-cerrar:hover{color:var(--text)}

/* Marca de sismo en el mapa (no es un reporte comunitario, ver mapa.js) */
.icono-sismo{position:relative}
.punto-sismo{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:18px; line-height:1;
}
.pulso-sismo{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:34px; height:34px; border-radius:50%;
  background:rgba(192,57,43,.45);
  animation:pulso-sismo-anim 1.6s ease-out infinite;
}
@keyframes pulso-sismo-anim{
  0%{ transform:translate(-50%,-50%) scale(0.4); opacity:.9; }
  100%{ transform:translate(-50%,-50%) scale(2.2); opacity:0; }
}

nav.tabs{
  position:sticky; top:53px; z-index:40;
  display:flex; background:var(--panel-2);
  border-bottom:1px solid var(--line);
  overflow-x:auto;
}
nav.tabs button{
  flex:1; min-width:120px;
  background:none; border:none; color:var(--text-dim);
  padding:12px 8px; cursor:pointer; font-size:13px; font-weight:600;
  border-bottom:3px solid transparent;
}
nav.tabs button.active{color:var(--text); border-bottom-color:var(--urgent)}

main{margin:0 auto; padding:14px 14px 90px}

/* El mapa aprovecha todo el ancho de la pantalla; las demás secciones
   (Necesito/Ofrezco ayuda, Desaparecidos) se quedan angostas para que el
   texto siga siendo cómodo de leer, con el mismo límite que antes. */
main > .vista:not(#vista-mapa){max-width:900px; margin:0 auto}
#vista-mapa > h2.titulo-vista,
#vista-mapa > p.subtitulo-vista{max-width:900px}

section.vista{display:none}
section.vista.active{display:block}

h2.titulo-vista{font-size:18px; margin:6px 0 4px}
p.subtitulo-vista{color:var(--text-dim); font-size:13px; margin:0 0 14px}

/* ---------- Mapa ---------- */

/* Grid: en celular es una sola columna (botón, mapa, resumen, lista);
   en pantallas anchas se parte en 2 columnas: izquierda = resumen + mapa
   (el mapa queda "flotando" con position:sticky mientras se hace scroll
   por la lista larga de la derecha), derecha = botón + lista de reportes. */
.mapa-grid{
  display:grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "boton"
    "mapa"
    "resumen"
    "lista";
  gap:4px;
  max-width:1600px;
  margin:0 auto;
}
.mg-boton{grid-area:boton}
.mg-mapa{grid-area:mapa}
.mg-resumen{grid-area:resumen}
.mg-lista{grid-area:lista}

@media (min-width:900px){
  .mapa-grid{
    grid-template-columns: minmax(340px, 1fr) minmax(400px, 1.3fr);
    grid-template-rows: auto auto auto;
    align-items:start;
    gap:20px;
    /* El mapa ocupa las 3 filas de su columna de una sola vez, así su
       altura no depende de la del botón ni la del resumen — evita el
       hueco vacío que quedaba antes entre el botón y la lista. */
    grid-template-areas:
      "mapa boton"
      "mapa resumen"
      "mapa lista";
  }
  .mg-mapa{position:sticky; top:66px}
}

#mapa{
  width:100%; height:340px; border-radius:var(--radius);
  border:1px solid var(--line); margin-bottom:12px;
  background:#111;
  position:relative; z-index:0; /* crea su propio contexto de apilamiento:
    así los controles internos de Leaflet (z-index hasta 1000) nunca quedan
    por encima de elementos fuera del mapa, como el modal */
  isolation:isolate;
}
@media (min-width:900px){
  #mapa{height:min(60vh, 520px)}
}
.leyenda-mapa{
  display:flex; flex-wrap:wrap; gap:8px 14px; font-size:12px; color:var(--text-dim);
  margin-bottom:14px;
}
.leyenda-mapa span{display:inline-flex; align-items:center; gap:6px}
.leyenda-mapa i{width:10px;height:10px;border-radius:50%;display:inline-block}

.tip-mapa{
  font-size:12.5px; color:var(--text-dim); background:var(--panel);
  border:1px dashed var(--line); border-radius:var(--radius);
  padding:8px 10px; margin-bottom:14px;
}

.buscador-direccion{
  display:flex; gap:8px; margin-bottom:8px;
}
.buscador-direccion input{
  flex:1; padding:10px; border-radius:8px; border:1px solid var(--line);
  background:var(--bg); color:var(--text); font-size:14px;
}
.buscador-direccion button{
  border:none; background:var(--info); color:#fff; border-radius:8px;
  width:44px; flex-shrink:0; cursor:pointer; font-size:16px;
}
.buscador-direccion button:disabled{opacity:.6; cursor:default}

.resultados-direccion{
  list-style:none; margin:0 0 12px; padding:0;
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
  background:var(--panel);
}
.resultados-direccion[hidden]{display:none}
.resultados-direccion li button{
  width:100%; text-align:left; padding:10px 12px; font-size:13px;
  background:none; border:none; color:var(--text); cursor:pointer;
  border-bottom:1px solid var(--line);
}
.resultados-direccion li:last-child button{border-bottom:none}
.resultados-direccion li button:hover{background:var(--panel-2)}
.resultados-direccion .sin-resultados{
  padding:10px 12px; font-size:12.5px; color:var(--text-dim);
}

/* ---------- Formularios ---------- */
form.form-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; margin-bottom:18px;
}
form.form-card .fila{margin-bottom:12px}
form.form-card label{display:block; font-size:13px; font-weight:600; margin-bottom:6px}
form.form-card .ayuda-campo{font-size:11.5px; color:var(--text-dim); margin-top:4px}
form.form-card .ayuda-campo.error{color:#f3897d}
form.form-card input[type=text],
form.form-card input[type=tel],
form.form-card input[type=number],
form.form-card textarea,
form.form-card select{
  width:100%; padding:10px; border-radius:8px; border:1px solid var(--line);
  background:var(--bg); color:var(--text);
}
form.form-card textarea{resize:vertical; min-height:70px}

.fila-numeros-afectados{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:8px;
}
.fila-numeros-afectados .label-mini{
  font-size:11.5px; font-weight:600; color:var(--text-dim); margin-bottom:4px;
}
.fila-numeros-afectados input[type=number]{
  text-align:center; padding:8px 6px;
}

.afectacion-tarjeta{
  font-size:12.5px; font-weight:600; color:#f3a79c;
  background:rgba(192,57,43,.12); border:1px solid rgba(192,57,43,.35);
  border-radius:8px; padding:6px 10px; margin:6px 0;
  display:inline-block;
}

.resumen-afectacion{
  background:var(--panel); border:1px solid var(--urgent); border-radius:var(--radius);
  padding:12px 14px; margin-bottom:14px;
}
.resumen-afectacion[hidden]{display:none}
.resumen-afectacion strong{font-size:13px; color:var(--text); display:block; margin-bottom:8px}
.resumen-afectacion-numeros{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:6px;
}
.resumen-afectacion-numeros span{
  font-size:13px; font-weight:700; color:#f3a79c;
  background:rgba(192,57,43,.15); border-radius:8px; padding:6px 10px;
}
.resumen-afectacion-nota{font-size:11px; color:var(--text-dim); margin:0}
form.form-card .chips{display:flex; flex-wrap:wrap; gap:8px}
form.form-card .chip{
  border:1px solid var(--line); background:var(--bg); color:var(--text-dim);
  padding:8px 12px; border-radius:999px; cursor:pointer; font-size:13px;
}
form.form-card .chip[aria-pressed="true"]{
  background:var(--urgent); border-color:var(--urgent); color:#fff;
}
.btn{
  display:inline-block; border:none; border-radius:8px; padding:11px 18px;
  font-weight:700; cursor:pointer;
}
.btn-primario{background:var(--urgent); color:#fff; width:100%}
.btn-primario:disabled{background:#5a4038; cursor:not-allowed}
.btn-secundario{background:var(--panel-2); color:var(--text); border:1px solid var(--line)}
.msg-form{font-size:12.5px; margin-top:8px; min-height:16px}
.msg-form.error{color:#f3897d}
.msg-form.ok{color:#8fd6a8}

/* Botón grande "➕ Agregar ayuda" (Mapa y Comunidad) */
.btn-grande{
  font-size:16px; padding:16px; margin-bottom:16px;
  box-shadow:0 4px 14px rgba(192,57,43,.35);
}

/* Botón chico tipo chip para publicar (Desaparecidos) */
.chip-agregar{
  border:1px solid var(--urgent); background:rgba(192,57,43,.12); color:#f3a79c;
  padding:9px 16px; border-radius:999px; cursor:pointer; font-size:14px; font-weight:700;
  margin-bottom:16px;
}
.chip-agregar:hover{background:rgba(192,57,43,.2)}

/* Botón "🔍 Filtros" colapsable */
.btn-filtros{
  display:flex; align-items:center; gap:6px;
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:9px 14px; margin-bottom:10px; color:var(--text-dim);
  font-size:13px; font-weight:600; cursor:pointer;
}
.btn-filtros.activo{color:var(--text); border-color:var(--info)}
.btn-filtros-flecha{transition:transform .15s}
.btn-filtros.activo .btn-filtros-flecha{transform:rotate(180deg)}
.filtros-colapsables{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:12px; margin-bottom:14px;
}
.filtros-colapsables[hidden]{display:none}
.filtros-colapsables .filtro-inline:last-child,
.filtros-colapsables .filtro-localidad:last-child{margin-bottom:0}

/* ---------- Listas ---------- */
.lista-cabecera{
  display:flex; align-items:center; justify-content:space-between; margin:18px 0 8px;
}
.lista-cabecera h3{font-size:14px; margin:0; color:var(--text-dim); text-transform:uppercase; letter-spacing:.03em}
.filtro-inline{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px}
.filtro-inline button{
  font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--line);
  background:var(--panel); color:var(--text-dim); cursor:pointer;
}
.filtro-inline button.active{background:var(--info); border-color:var(--info); color:#fff}

.filtro-localidad{
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:6px 6px 6px 12px;
}
.filtro-localidad svg, .filtro-localidad .icono{flex-shrink:0; color:var(--text-dim)}
.filtro-localidad input{
  flex:1; border:none; background:transparent; color:var(--text); padding:6px 0;
}
.filtro-localidad input:focus{outline:none}
.filtro-localidad button.limpiar{
  border:none; background:var(--panel-2); color:var(--text-dim);
  border-radius:50%; width:26px; height:26px; cursor:pointer; flex-shrink:0;
}
.filtro-localidad button.limpiar[hidden]{display:none}
.filtro-localidad button.btn-gps{
  border:none; background:var(--info); color:#fff;
  border-radius:50%; width:30px; height:30px; cursor:pointer; flex-shrink:0;
  font-size:14px; display:flex; align-items:center; justify-content:center;
}
.filtro-localidad button.btn-gps:disabled{opacity:.6; cursor:default}

.tarjeta{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; margin-bottom:10px;
}
.tarjeta .fila-top{display:flex; justify-content:space-between; gap:8px; align-items:flex-start}
.tarjeta .etiqueta{
  font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap;
}
.tarjeta .etiqueta.urgente{background:rgba(192,57,43,.2); color:#f3a79c}
.tarjeta .etiqueta.info{background:rgba(59,130,196,.2); color:#a9d3f2}
.tarjeta .etiqueta.resuelto{background:rgba(46,139,87,.2); color:#9fe0ba}
.tarjeta .etiqueta.peticion{background:rgba(192,57,43,.2); color:#f3a79c}
.tarjeta .etiqueta.oferta{background:rgba(46,139,87,.2); color:#9fe0ba}
.tarjeta .etiqueta.alerta{background:rgba(217,164,65,.2); color:#f0d18c}
.tarjeta .etiqueta.verificado{background:rgba(245,197,24,.18); color:#f5c518; border:1px solid #f5c518; font-weight:700}

.tarjeta .etiqueta.disponible{background:rgba(46,139,87,.2); color:#9fe0ba}
.tarjeta .etiqueta.en-atencion{background:rgba(217,164,65,.22); color:#f0d18c; border:1px solid rgba(217,164,65,.5)}
.tarjeta .etiqueta.alta-demanda{background:rgba(155,89,182,.22); color:#d3a9f0; border:1px solid rgba(155,89,182,.5)}
.tarjeta .etiqueta.atendida{background:rgba(46,139,87,.22); color:#9fe0ba; border:1px solid rgba(46,139,87,.5)}
.tarjeta .etiqueta.cancelada{background:rgba(122,138,153,.2); color:var(--text-dim); border:1px solid var(--line)}
.tarjeta .etiqueta.legado{background:rgba(122,138,153,.15); color:var(--text-dim); border:1px dashed var(--line)}
.tarjeta .etiqueta-categoria{
  font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px;
  background:var(--panel-2); color:var(--text-dim); border:1px solid var(--line);
}
.tarjeta.esta-resuelta{opacity:.65}
.tarjeta.verificada{
  border-color:#f5c518;
  box-shadow:0 0 0 1px rgba(245,197,24,.35);
}
.tarjeta.seleccionada{
  border-color:var(--info);
  box-shadow:0 0 0 3px rgba(59,130,196,.35);
  animation:destello-seleccion 1s ease-in-out 1;
}
@keyframes destello-seleccion{
  0%, 100%{background:var(--panel)}
  40%{background:rgba(59,130,196,.15)}
}

/* Coordenadas/localidad clicables dentro de la meta de una tarjeta */
.tarjeta .meta button.meta-clic,
.tarjeta .meta a.meta-clic{
  font:inherit; background:none; border:none; padding:0; margin:0;
  color:var(--text-dim); cursor:pointer; text-decoration:underline;
  text-decoration-style:dotted; text-underline-offset:3px;
}
.tarjeta .meta button.meta-clic:hover,
.tarjeta .meta a.meta-clic:hover{color:var(--info)}

.popup-btn-detalles{
  display:block; width:100%; margin-top:6px; font-size:12px; font-weight:700;
  padding:6px 10px; border-radius:6px; border:none; cursor:pointer;
  background:var(--info); color:#fff;
}

.tarjeta .acciones-tarjeta{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;
  padding-top:10px; border-top:1px solid var(--line);
}
.tarjeta .btn-mini{
  font-size:12px; padding:6px 10px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line); background:var(--panel-2); color:var(--text);
  text-decoration:none; display:inline-block;
}
.tarjeta .btn-mini.resolver{border-color:var(--safe); color:#9fe0ba}
.tarjeta .btn-mini.direccion{border-color:var(--info); color:#a9d3f2}
.tarjeta .btn-mini:disabled{opacity:.6; cursor:default}
.tarjeta .nota-flageada{font-size:11.5px; color:var(--warn); margin-top:4px}

.toggle-mostrar-todo{
  display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-dim);
  margin-bottom:12px; cursor:pointer;
}
.toggle-mostrar-todo input{width:16px; height:16px}
.toggle-mostrar-todo.toggle-verificados{
  color:#f5c518; font-weight:600;
  background:rgba(245,197,24,.08); border:1px solid rgba(245,197,24,.35);
  border-radius:8px; padding:8px 10px;
}
.toggle-mostrar-todo.toggle-verificados input{accent-color:#f5c518}

/* Select con el mismo estilo oscuro que el resto de los formularios */
select.select-oscuro{
  width:100%; padding:10px; border-radius:8px; border:1px solid var(--line);
  background:var(--bg); color:var(--text); font-size:14px;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239fb0bf'><path d='M5.5 7.5l4.5 5 4.5-5z'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; background-size:16px;
  padding-right:32px;
}
select.select-oscuro:focus{outline:2px solid var(--focus); outline-offset:1px}

/* Pestañas internas Buscando / Encontrados */
.tabs-modo{display:flex; gap:8px; margin-bottom:14px}
.tabs-modo button{
  flex:1; padding:10px; border-radius:8px; border:1px solid var(--line);
  background:var(--panel); color:var(--text-dim); font-weight:600; cursor:pointer;
}
.tabs-modo button.active{background:var(--urgent); border-color:var(--urgent); color:#fff}

/* Foto dentro de una tarjeta */
.tarjeta .foto-tarjeta{
  width:100%; max-height:220px; object-fit:cover; border-radius:8px; margin:8px 0;
  border:1px solid var(--line); display:block; background:var(--panel-2);
}
.tarjeta .galeria-fotos{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(90px, 1fr));
  gap:6px; margin:8px 0;
}
.tarjeta .galeria-fotos img{
  width:100%; height:110px; object-fit:cover; border-radius:8px;
  border:1px solid var(--line); background:var(--panel-2); cursor:zoom-in;
}

.items-comunidad{display:flex; flex-direction:column; gap:8px; margin-bottom:8px}
.fila-item-comunidad{display:flex; gap:8px; align-items:center}
form.form-card .fila-item-comunidad input.item-texto{width:auto; flex:1 1 auto; min-width:0}
form.form-card .fila-item-comunidad input.item-cantidad{width:88px; flex:0 0 88px; text-align:center}
.fila-item-comunidad .btn-quitar-item{
  flex-shrink:0; width:34px; height:34px; border-radius:8px;
  border:1px solid var(--line); background:var(--panel-2); color:var(--text-dim);
  cursor:pointer; font-size:14px;
}
.fila-item-comunidad .btn-quitar-item:hover{color:var(--urgent); border-color:var(--urgent)}
.btn-agregar-item{
  font-size:13px; font-weight:600; padding:7px 14px; border-radius:8px;
  border:1px dashed var(--info); background:transparent; color:var(--info); cursor:pointer;
}
.btn-agregar-item:hover{background:rgba(59,130,196,.1)}

.lista-items-comunidad{
  margin:8px 0; padding-left:18px; font-size:13px; color:var(--text);
}
.lista-items-comunidad li{margin-bottom:2px}

.conteo-ayudantes{
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
  padding:10px; margin:8px 0;
}
.conteo-ayudantes-fila{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  flex-wrap:wrap; margin-bottom:8px;
}
.conteo-ayudantes-numero{font-size:13px; font-weight:700; color:var(--text)}
.chips-estado-operativo{display:flex; flex-wrap:wrap; gap:6px}
.chip-mini{
  font-size:11.5px; padding:5px 10px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:var(--bg); color:var(--text-dim);
}
.chip-mini.activo.necesita-personas{background:rgba(192,57,43,.25); border-color:var(--urgent); color:#f3a79c}
.chip-mini.activo.necesita-insumos{background:rgba(217,164,65,.25); border-color:var(--warn); color:#f0d18c}
.chip-mini.activo.lleno{background:rgba(46,139,87,.25); border-color:var(--safe); color:#9fe0ba}

/* Input de archivo (foto) */
form.form-card input[type=file]{
  width:100%; padding:9px; border-radius:8px; border:1px dashed var(--line);
  background:var(--bg); color:var(--text-dim); font-size:13px;
}
.tarjeta p{margin:6px 0; font-size:14px; line-height:1.4}
.tarjeta .meta{font-size:11.5px; color:var(--text-dim); display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}
.tarjeta a.contacto{font-weight:700}

.vacio{
  text-align:center; color:var(--text-dim); font-size:13px; padding:24px 10px;
  border:1px dashed var(--line); border-radius:var(--radius);
}

.cargando{text-align:center; color:var(--text-dim); font-size:13px; padding:10px}

#btn-cargar-mas{width:100%; margin-top:6px}
#btn-cargar-mas[hidden]{display:none}

.aviso-cache{
  font-size:12px; color:var(--warn); background:rgba(217,164,65,.12);
  border:1px solid rgba(217,164,65,.4); border-radius:8px; padding:8px 10px; margin-bottom:12px;
}

/* ---------- Modal ---------- */
.modal-fondo{
  position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:5000;
  display:flex; align-items:flex-end; justify-content:center;
}
.modal-fondo[hidden]{display:none}
.modal-caja{
  background:var(--panel); width:100%; max-width:480px; border-radius:16px 16px 0 0;
  padding:18px; max-height:88vh; overflow-y:auto;
}
@media (min-width:560px){
  .modal-fondo{align-items:center}
  .modal-caja{border-radius:16px}
}

/* Modal del tutorial de bienvenida */
.tutorial-caja{text-align:center; max-width:380px}
.tutorial-icono{font-size:42px; margin-bottom:10px}
.tutorial-titulo{font-size:18px; margin:0 0 10px}
.tutorial-texto{font-size:14px; color:var(--text-dim); line-height:1.5; margin:0 0 18px}
.tutorial-puntos{display:flex; justify-content:center; gap:6px; margin-bottom:18px}
.tutorial-punto{width:7px; height:7px; border-radius:50%; background:var(--line)}
.tutorial-punto.activo{background:var(--urgent); width:18px; border-radius:4px}
.tutorial-botones{display:flex; align-items:center; justify-content:space-between; gap:10px}
.tutorial-botones-nav{display:flex; gap:8px}
.tutorial-botones-nav .btn{width:auto; padding:9px 16px; font-size:13px}
.btn-saltar-tutorial{
  background:none; border:none; color:var(--text-dim); font-size:13px;
  cursor:pointer; text-decoration:underline; text-underline-offset:2px;
}

.leaflet-popup-content-wrapper{background:var(--panel); color:var(--text)}
.leaflet-popup-tip{background:var(--panel)}

footer.pie{
  text-align:center; color:var(--text-dim); font-size:11.5px; padding:20px 14px 90px;
}