.inicio-page{padding-top:8px}
.feed-title-row{display:flex;align-items:end;justify-content:space-between;margin:2px 0 10px}
.feed-title-row h2{margin:2px 0 0;font-size:1rem}
.mini-kicker{font-size:.66rem;text-transform:uppercase;letter-spacing:.11em;color:var(--coral);font-weight:850}
.compact-feed{display:grid;gap:10px}
@media(min-width:1024px){.compact-feed{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}}
.compact-card{
  min-height:118px;display:grid;grid-template-columns:108px 1fr;
  position:relative;overflow:hidden;background:#fff;border:1px solid var(--border);
  border-radius:17px;box-shadow:0 5px 14px rgba(33,72,67,.05)
}
.compact-photo{height:118px;background:#e9eeec}
.compact-photo img{height:100%;object-fit:cover}
.compact-content{padding:10px 32px 10px 11px;min-width:0}
.compact-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.badge{font-size:.56rem;font-weight:900;border-radius:999px;padding:4px 7px;color:#fff;letter-spacing:.03em}
.badge.lost{background:var(--coral)}.badge.found{background:var(--found)}
.badge.abandoned{background:var(--gold);color:#fff}.badge.adoption{background:var(--purple)}.badge.sighting{background:var(--blue)}
.time{font-size:.62rem;color:var(--muted)}
.compact-card h3{font-size:.9rem;margin:6px 0 3px}
.location{font-size:.66rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compact-card p{font-size:.69rem;line-height:1.35;margin:6px 0 0;color:#40504e}
.save-btn{position:absolute;right:7px;bottom:7px;border:0;background:transparent;color:var(--primary);font-size:1.2rem}

/* ==========================================================
   Reportes reales: extensiones sobre el diseño aprobado.
   ========================================================== */

.compact-photo{
  width:108px;
  padding:0;
  border:0;
  overflow:hidden
}
.compact-photo img{
  width:100%;
  display:block
}
.feed-photo-frame{
  position:relative;
  width:100%;
  height:100%
}
.feed-photo-frame img{
  width:100%;
  height:100%;
  object-fit:cover
}
.lost-watermark{
  position:absolute;
  left:-24px;
  top:50%;
  width:160px;
  transform:translateY(-50%) rotate(-33deg);
  padding:5px 0;
  background:rgba(209,88,81,.78);
  color:#fff;
  text-align:center;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.18em;
  text-shadow:0 1px 1px rgba(0,0,0,.2);
  pointer-events:none;
  backdrop-filter:blur(1px)
}

.feed-photo-placeholder{
  width:100%;
  height:100%;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center
}
.feed-photo-placeholder.lost{background:var(--coral)}
.feed-photo-placeholder.found{background:var(--found)}
.feed-photo-placeholder.abandoned{background:var(--gold)}
.feed-photo-placeholder.adoption{background:var(--purple)}
.feed-photo-placeholder.sighting{background:var(--blue)}
.feed-photo-placeholder.sheltered{background:var(--sheltered)}

.badge.sheltered{background:var(--sheltered)}

.feed-card-more{
  margin-top:5px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--primary);
  font-size:.64rem;
  font-weight:850
}

.feed-empty,.feed-loading{
  min-height:240px;
  padding:28px 20px;
  border:1px solid var(--border);
  border-radius:20px;
  background:#fff;
  color:var(--muted);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center
}
.feed-empty>span{
  width:56px;
  height:56px;
  border-radius:18px;
  background:var(--primary-soft);
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center
}
.feed-empty strong{
  color:var(--text);
  font-size:.82rem
}
.feed-empty p,.feed-loading p{
  max-width:280px;
  margin:0;
  font-size:.7rem;
  line-height:1.45
}
.feed-loading>span{
  width:28px;
  height:28px;
  border:3px solid var(--primary-soft);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:feed-spin .7s linear infinite
}
@keyframes feed-spin{to{transform:rotate(360deg)}}

/* Ficha completa del reporte */
body.feed-report-open{overflow:hidden}
.feed-report-overlay{
  position:fixed;
  inset:0;
  z-index:170;
  display:flex;
  align-items:flex-end;
  justify-content:center
}
.feed-report-backdrop{
  position:absolute;
  inset:0;
  padding:0;
  border:0;
  background:rgba(18,36,33,.42)
}
.feed-report-sheet{
  position:relative;
  z-index:1;
  width:min(100%,500px);
  max-height:92vh;
  overflow-y:auto;
  padding:8px 14px 26px;
  border-radius:26px 26px 0 0;
  background:#fff;
  box-shadow:0 -20px 48px rgba(20,49,45,.25)
}
.feed-report-handle{
  width:42px;
  height:5px;
  margin:0 auto 9px;
  border-radius:999px;
  background:#d7e0de
}
.feed-report-header{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.feed-report-header>div{min-width:0}
.feed-report-header h2{
  margin:6px 0 0;
  font-size:1.05rem;
  line-height:1.2
}
.feed-report-close{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  color:var(--primary);
  font-size:1.2rem
}

.feed-report-images{
  display:grid;
  grid-template-columns:1fr;
  gap:5px;
  margin:5px -2px 0
}
.feed-report-images.multiple{grid-template-columns:2fr 1fr}
.feed-report-image-button{
  padding:0;
  border:0;
  background:transparent;
  display:block
}
.feed-report-images img{
  width:100%;
  height:220px;
  border-radius:18px;
  object-fit:cover
}
.feed-report-images.multiple .feed-report-image-button:not(:first-child) img{height:106px}
.feed-report-images.multiple .feed-report-image-button:first-child{grid-row:span 2}
.feed-image-hint{
  margin:7px 2px 0;
  color:var(--muted);
  font-size:.62rem;
  text-align:right
}

.feed-report-no-image{
  height:180px;
  margin-top:5px;
  border-radius:18px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center
}
.feed-report-no-image.lost{background:var(--coral)}
.feed-report-no-image.found{background:var(--found)}
.feed-report-no-image.abandoned{background:var(--gold)}
.feed-report-no-image.adoption{background:var(--purple)}
.feed-report-no-image.sighting{background:var(--blue)}
.feed-report-no-image.sheltered{background:var(--sheltered)}

.feed-report-body{padding-top:13px}
.feed-report-author{
  display:flex;
  align-items:center;
  gap:9px
}
.feed-author-avatar{
  width:40px;
  height:40px;
  flex:0 0 40px;
  overflow:hidden;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:.78rem;
  font-weight:900
}
.feed-author-avatar img{
  width:100%;
  height:100%;
  object-fit:cover
}
.feed-report-author>div{display:grid;gap:2px}
.feed-report-author strong{font-size:.74rem}
.feed-report-author small{
  color:var(--muted);
  font-size:.61rem
}
.feed-report-summary{
  margin:13px 0;
  color:#3e4f4c;
  font-size:.74rem;
  line-height:1.48
}
.feed-location-card{
  padding:10px 11px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#f8fbfa;
  display:flex;
  gap:8px;
  color:var(--primary)
}
.feed-location-card.protected{background:var(--primary-soft)}
.feed-location-card>div{display:grid;gap:2px}
.feed-location-card strong{
  color:var(--text);
  font-size:.69rem
}
.feed-location-card small{
  color:var(--muted);
  font-size:.62rem;
  line-height:1.35
}
.feed-report-data{margin-top:16px}
.feed-report-data h3{
  margin:0 0 8px;
  font-size:.82rem
}
.feed-report-row{
  min-height:45px;
  padding:9px 3px;
  border-bottom:1px solid var(--border);
  display:grid;
  grid-template-columns:42% minmax(0,1fr);
  gap:10px;
  align-items:center
}
.feed-report-row span{
  color:var(--muted);
  font-size:.65rem
}
.feed-report-row strong{
  font-size:.69rem;
  line-height:1.35;
  text-align:right
}
.feed-no-details{
  color:var(--muted);
  font-size:.68rem
}

/* Visor de imagen completa */
body.feed-image-viewer-open{overflow:hidden}
.feed-image-viewer{
  position:fixed;
  inset:0;
  /*
    600 y no 190: este visor también se abre desde el modal del Mapa
    ("Ver reporte completo"), que vive dentro de #real-map-shell con
    z-index hasta 540 (y el propio Leaflet usa 400). Tiene que quedar
    por encima de ambos.
  */
  z-index:600;
  display:flex;
  align-items:center;
  justify-content:center
}
.feed-image-viewer-backdrop{
  position:absolute;
  inset:0;
  padding:0;
  border:0;
  background:rgba(9,17,16,.86)
}
.feed-image-viewer-sheet{
  position:relative;
  z-index:1;
  width:min(100%,540px);
  max-width:100%;
  padding:10px 14px 18px
}
.feed-image-viewer-top{
  height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#fff
}
.feed-image-viewer-top span{
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.02em
}
.feed-image-viewer-close{
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:12px;
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:1.2rem
}
.feed-image-viewer-body{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:60vh
}
.feed-image-viewer-body img{
  width:100%;
  max-width:100%;
  max-height:78vh;
  object-fit:contain;
  border-radius:18px;
  background:#111
}


/* V31: ubicación de la ficha abre el reporte directamente en el mapa */
.feed-location-link{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  text-align:left
}

.feed-location-link:hover{
  border-color:rgba(13,127,118,.35);
  background:#f4faf8
}

.feed-location-link:active{
  transform:scale(.995)
}

.feed-location-arrow{
  margin-left:auto;
  padding-left:6px;
  color:var(--primary);
  font-size:1.2rem;
  font-weight:700;
  line-height:1
}


/* ==========================================================
   V42 — Guardar reportes
   ========================================================== */

.report-save-button{
  position:absolute;
  right:8px;
  bottom:7px;
  z-index:3;
  width:29px;
  height:29px;
  padding:0;
  border:1px solid rgba(214,224,221,.92);
  border-radius:10px;
  background:rgba(255,255,255,.94);
  color:#687775;
  display:grid;
  place-items:center;
  box-shadow:0 2px 8px rgba(27,58,53,.08);
  cursor:pointer;
  transition:
    color .16s ease,
    background .16s ease,
    border-color .16s ease,
    transform .12s ease;
}

.report-save-button:hover{
  color:var(--primary);
}

.report-save-button:active{
  transform:scale(.94);
}

.report-save-button.is-saved{
  color:var(--primary);
  border-color:rgba(46,143,134,.28);
  background:var(--primary-soft);
}

.report-save-button.is-saving{
  opacity:.58;
}

.report-save-button:disabled{
  cursor:default;
}

html[data-theme="dark"] .report-save-button{
  border-color:#30433f;
  background:rgba(20,32,30,.94);
  color:#a7b5b2;
}

html[data-theme="dark"] .report-save-button.is-saved{
  border-color:#356b64;
  background:#19322f;
  color:#65c8bd;
}