/* Climalerta Red — community layer styles.
   Uses ONLY the tokens already declared in app.css (--navy, --orange, --amber,
   --danger, --ok…). No new brand colours: the identity is direction 1A
   "Tormenta" and this layer must read as the same product, not a bolt-on. */

/* ── Barra de acciones ──────────────────────────────── */
.red-acciones {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px;
}
.red-acciones .btn { flex: 0 1 auto; }

.btn-sos {
  position: relative;
  background: var(--danger);
  color: #fff; font-weight: 800; border: 0;
  box-shadow: 0 6px 20px rgba(229, 72, 77, .35);
}
/* El latido es un RESPLANDOR APARTE que sólo cambia de opacidad, no la sombra
   del botón. Animar `box-shadow` obliga al motor a re-pintar el botón —y en el
   shell el botón va fijo ENCIMA del mapa, así que también la franja de mapa que
   tiene debajo— 60 veces por segundo, para siempre. Ese bucle era la mayor
   parte del hilo principal en el trazo de Lighthouse (11,4 s atribuidos al
   documento con 2 ms de scripting). Con opacity sobre una capa propia el
   trabajo se va al compositor y el hilo principal queda libre. Mismo latido. */
.btn-sos::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 6px 28px rgba(229, 72, 77, .65);
  opacity: 0; pointer-events: none; will-change: opacity;
  animation: sosLatido 2.4s ease-in-out infinite;
}
.btn-sos:hover { background: #f4595e; }
.btn-sos:disabled { opacity: .7; }
.btn-sos:disabled::after { animation: none; opacity: 0; }
@keyframes sosLatido {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}
/* Respeta a quien pide menos movimiento: el SOS sigue siendo rojo y grande. */
@media (prefers-reduced-motion: reduce) {
  .btn-sos::after { animation: none; opacity: 0; }
}

.btn-sm { padding: 8px 14px; font-size: .9rem; }

/* ── Resumen / KPIs ─────────────────────────────────── */
.red-resumen {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px;
}
.red-kpi {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: 999px; padding: 6px 14px;
  font-family: var(--font-label); font-size: .82rem; color: var(--muted);
}
.red-kpi b { color: var(--ink); font-size: 1rem; margin-right: 4px; }
.red-kpi.urgente { border-color: var(--danger); color: #ffc9cb; }
.red-kpi.urgente b { color: var(--danger); }

.red-estado {
  font-family: var(--font-label); font-size: .78rem;
  color: var(--muted); margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px;
}
.red-estado::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--faint);
}
.red-estado.ok::before { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.red-estado.off::before { background: var(--danger); }

/* ── Filtros ────────────────────────────────────────── */
.red-filtros {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px;
}
.red-filtros select, .red-campo select, .red-campo input, .red-campo textarea {
  background: var(--navy-2); color: var(--ink);
  border: 1px solid var(--card-border); border-radius: 10px;
  padding: 9px 12px; font-family: var(--font-body); font-size: .92rem;
  width: 100%;
}
.red-filtros select { width: auto; min-width: 150px; }
.red-campo textarea { min-height: 76px; resize: vertical; }
.red-campo input:focus, .red-campo select:focus, .red-campo textarea:focus {
  outline: 2px solid var(--orange); outline-offset: 1px;
}

/* ── Pines del mapa ─────────────────────────────────── */
.red-pin span {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  background: var(--navy-deep);
  border: 2px solid var(--pin, var(--orange));
  border-radius: 50%;
  font-size: 15px; line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.red-pin-sos span {
  font-size: 20px;
  border-width: 3px;
  animation: pinLatido 1.8s ease-in-out infinite;
  will-change: transform;
}
@keyframes pinLatido {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .red-pin-sos span { animation: none; }
}

/* ── Popups ─────────────────────────────────────────── */
.red-popup { font-family: var(--font-body); min-width: 190px; }
.red-popup h4 { margin: 6px 0 4px; font-size: 1rem; color: var(--ink); }
.red-popup p { margin: 0 0 4px; font-size: .88rem; }
.red-popup .red-meta { color: var(--muted); font-size: .78rem; }
.red-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-family: var(--font-label); font-size: .7rem; color: #fff;
}
.red-tipo { font-family: var(--font-label); font-size: .78rem; color: var(--muted); }
.red-popup-acciones {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
  align-items: center;
}
.red-popup-acciones a, .red-popup-acciones button {
  font-family: var(--font-label); font-size: .76rem;
  background: var(--navy-3); color: var(--ink);
  border: 0; border-radius: 8px; padding: 5px 10px; cursor: pointer;
}
.red-popup-acciones a:hover, .red-popup-acciones button:hover { background: var(--orange); }
.red-popup-acciones .red-flag { background: transparent; color: var(--faint); }
.red-popup-acciones .red-flag:hover { background: var(--danger); color: #fff; }

/* ── Lista de reportes ──────────────────────────────── */
.red-lista { display: grid; gap: 8px; }
.red-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 10px 12px;
  color: var(--ink); text-align: left; cursor: pointer;
  font-family: var(--font-body);
}
.red-item:hover { border-color: var(--orange); background: rgba(251, 94, 18, .08); }
.red-item-ico {
  flex: 0 0 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; background: var(--navy-2);
  border: 2px solid var(--pin, var(--orange)); font-size: 16px;
}
.red-item-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.red-item-txt b { font-size: .95rem; }
.red-item-txt span {
  font-family: var(--font-label); font-size: .76rem; color: var(--muted);
}

/* ── Desaparecidos ──────────────────────────────────── */
.red-personas { display: grid; gap: 12px; }
.red-persona {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 14px;
}
.red-persona.pendiente { border-left: 3px solid var(--amber); }
.red-persona.encontrada { border-left: 3px solid var(--ok); opacity: .85; }
.red-persona h4 { margin: 0 0 6px; font-size: 1.02rem; }
.red-persona p { margin: 0 0 6px; font-size: .9rem; }
.red-encontrada { color: var(--ok); font-family: var(--font-label); font-weight: 700; }
.red-persona .red-flag {
  background: transparent; border: 1px solid var(--card-border);
  color: var(--faint); border-radius: 8px; padding: 4px 10px;
  font-family: var(--font-label); font-size: .74rem; cursor: pointer;
}
.red-persona .red-flag:hover { border-color: var(--danger); color: var(--danger); }

/* ── Aviso legal destacado ──────────────────────────── */
.red-aviso {
  background: rgba(255, 176, 32, .10);
  border: 1px solid rgba(255, 176, 32, .35);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius); padding: 12px 14px; margin: 0 0 14px;
  font-size: .88rem; color: #ffe2b0;
}
.red-aviso strong { color: var(--amber); }

/* ── Cuenta ─────────────────────────────────────────── */
.red-cuenta {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  margin: 0 0 12px;
}
.red-cuenta-info { display: flex; flex-direction: column; line-height: 1.2; }
.red-rol {
  font-family: var(--font-label); font-size: .72rem; color: var(--orange-soft);
  text-transform: uppercase;
}

/* ── Chat ───────────────────────────────────────────── */
.chat-caja {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 12px;
  height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
}
.chat-msg {
  background: var(--navy-2); border-radius: 12px; padding: 8px 12px;
  max-width: 85%; align-self: flex-start;
}
.chat-msg.propio { align-self: flex-end; background: rgba(251, 94, 18, .18); }
.chat-msg p { margin: 0 0 2px; font-size: .9rem; word-break: break-word; }
.chat-form { display: flex; gap: 8px; margin-top: 10px; }
.chat-form input { flex: 1 1 auto; }
.bloqueado { opacity: .55; pointer-events: none; }

/* ── Modales ────────────────────────────────────────── */
.red-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(7, 30, 66, .82); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 16px;
  overflow-y: auto;
}
.red-modal.hidden { display: none; }
.red-modal-caja {
  background: var(--navy-deep); border: 1px solid var(--card-border);
  border-radius: 18px; padding: 20px; width: min(560px, 100%);
  max-height: 92vh; overflow-y: auto;
}
.red-modal-caja h3 {
  margin: 0 0 4px; font-family: var(--font-head); font-size: 1.2rem;
}
.red-modal-caja > p.sub {
  color: var(--muted); font-size: .88rem; margin: 0 0 14px;
}
.red-modal-cerrar {
  float: right; background: transparent; border: 0; color: var(--muted);
  font-size: 1.4rem; cursor: pointer; line-height: 1; padding: 0 4px;
}
.red-modal-cerrar:hover { color: var(--orange); }
.red-campo { margin: 0 0 12px; }
.red-campo label {
  display: block; margin: 0 0 5px;
  font-family: var(--font-label); font-size: .8rem; color: var(--muted);
}
.red-campo-fila { display: flex; gap: 10px; }
.red-campo-fila > * { flex: 1 1 0; }
.red-check {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: .86rem; margin: 0 0 14px;
}
.red-check input { margin-top: 3px; flex: 0 0 auto; }

#miniMapa, #miniMapaMascota, #miniMapaAgua {
  height: 240px; border-radius: 12px; margin: 0 0 10px;
  border: 1px solid var(--card-border);
}
.red-buscar { display: flex; gap: 8px; margin: 0 0 10px; }
.red-buscar input { flex: 1 1 auto; }

/* ── Fotos ──────────────────────────────────────────── */
.red-foto {
  display: block; width: 100%; max-height: 160px; object-fit: cover;
  border-radius: 10px; margin: 4px 0 8px;
}
.red-foto-persona {
  float: right; width: 84px; height: 84px; object-fit: cover;
  border-radius: 10px; margin: 0 0 8px 12px;
  border: 1px solid var(--card-border);
}

/* ── Insignia de moderación (flotante) ──────────────── */
.mod-badge {
  position: fixed; right: 16px; bottom: 84px; z-index: 190;
  background: var(--amber); color: #3a2600; border: 0;
  border-radius: 999px; padding: 10px 16px; cursor: pointer;
  font-family: var(--font-label); font-weight: 700; font-size: .85rem;
  box-shadow: 0 8px 24px rgba(255, 176, 32, .45);
}
.mod-badge:hover { filter: brightness(1.06); }
.mod-badge.hidden { display: none; }

/* ── Toast ──────────────────────────────────────────── */
.red-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%);
  background: var(--navy-3); color: var(--ink);
  border: 1px solid var(--card-border); border-radius: 12px;
  padding: 12px 18px; z-index: 300; max-width: min(460px, 92vw);
  font-size: .9rem; text-align: center;
  transition: transform .25s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.red-toast.show { transform: translate(-50%, 0); }
.red-toast.ok  { border-color: var(--ok); }
.red-toast.err { border-color: var(--danger); }

@media (max-width: 560px) {
  .red-acciones .btn { flex: 1 1 100%; }
  .red-campo-fila { flex-direction: column; }
  .chat-caja { height: 240px; }
}

/* ── Puntos de agua ───────────────────────────────────
   El marcador envejece a la vista: un punto confirmado hace poco se ve
   vivo, uno sin confirmar se apaga, y uno agotado queda tachado. Mandar a
   alguien con bidones a un camión que ya se fue es peor que no mostrarlo. */
.red-pin-agua.agua-tibio span { opacity: .75; }
.red-pin-agua.agua-viejo span { opacity: .5; filter: grayscale(.5); }
.red-pin-agua.agua-agotado span { opacity: .55; filter: grayscale(1); }
/* Un punto OFICIAL (Bienes Nacionales) es infraestructura permanente, no el
   avistamiento de un camión: se ve vivo igual que uno recién confirmado y no
   se apaga con las horas. Sólo un aviso de la comunidad puede tacharlo. */
.red-pin-agua.agua-fresco span,
.red-pin-agua.agua-oficial span {
  box-shadow: 0 0 0 3px rgba(56, 182, 255, .35), 0 2px 6px rgba(0, 0, 0, .45);
}
.red-popup-acciones button {
  background: rgba(255, 255, 255, .12); color: inherit;
  border: 1px solid var(--card-border); border-radius: 999px;
  padding: 4px 10px; font-size: .78rem; font-weight: 700; cursor: pointer;
}
.red-popup-acciones button:hover { background: rgba(255, 255, 255, .22); }
.red-popup-acciones button:disabled { opacity: .5; cursor: default; }

/* ── «Estoy bien» + alerta comunal + extras de clima ──────────────────
   (paridad con las apps grandes: I'm Safe de Cruz Roja, alerta localizada
   de FEMA/Watch Duty, AQI de Watch Duty) */
.btn-safe { background: #2fbf71; border-color: #2fbf71; color: #fff; }
.btn-safe:hover { background: #27a862; }

/* Tira de alerta oficial por comuna, bajo las barras de capas. */
.ac-tira {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(20, 32, 60, .94); color: #fff;
  border: 1px solid rgba(229, 72, 77, .55); border-radius: 12px;
  padding: 8px 12px; font-size: .8rem; line-height: 1.35;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.ac-tira.nivel-amarilla { border-color: rgba(245, 165, 36, .55); }
.ac-tira b { font-weight: 800; }
.ac-tira .ac-fuente { color: var(--muted); font-size: .72rem; }
.ac-tira .ac-cerrar {
  margin-left: auto; flex: none; background: none; border: 0;
  color: var(--muted); font-size: .95rem; cursor: pointer; padding: 0 2px;
}
.ac-tira .ac-cerrar:hover { color: #fff; }

/* Línea de alerta + extras (UV / aire) dentro de «Ver qué me afecta». */
.alerta-comunal-linea { margin: 6px 0 2px; font-weight: 800; }
.alerta-comunal-linea.nivel-roja { color: #ff7b81; }
.alerta-comunal-linea.nivel-amarilla { color: #f5c14f; }
.alerta-comunal-linea.nivel-temprana { color: #9fd0ff; }
.alerta-comunal-linea span { font-weight: 400; color: var(--muted); font-size: .74rem; }
.wx-extra { margin: 4px 0 2px; font-size: .78rem; color: var(--muted); }