/* Santa Fe Te Expone · tarjetas editoriales de reclamos.
   Diseño únicamente; no altera galería en detalle, filtros, datos o moderación. */

/* Collage fotográfico dentro del espacio que ya usa cada tarjeta. */
#reclamos .card-media .report-photo-mosaic{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:grid;
  gap:3px;
  padding:0;
  background:#092339;
  overflow:hidden;
  isolation:isolate;
  font-size:initial;
}
#reclamos .report-photo-mosaic--2{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:minmax(0,1fr);
}
#reclamos .report-photo-mosaic--3{
  grid-template-columns:1.2fr 1fr;
  grid-template-rows:repeat(2,minmax(0,1fr));
}
#reclamos .report-photo-mosaic--3 .report-photo-tile:first-child{grid-row:1 / span 2}
#reclamos .report-photo-mosaic--4{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
}
#reclamos .report-photo-tile{
  position:relative;
  display:block;
  min-width:0;
  min-height:0;
  height:100%;
  width:100%;
  overflow:hidden;
}
#reclamos .card-media .report-photo-tile img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  background:#122638;
}
#reclamos .report-photo-mosaic:after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:45%;
  background:linear-gradient(0deg,rgba(2,9,18,.5),transparent);
  z-index:1;
  pointer-events:none;
}
#reclamos .report-photo-extra{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(4,14,28,.63);
  color:#fff;
  font:900 25px/1 system-ui,sans-serif;
  text-shadow:0 2px 6px #0008;
}
#reclamos .report-photo-count{
  position:absolute;
  right:8px;bottom:8px;
  z-index:2;
  padding:5px 8px;
  border-radius:99px;
  background:rgba(9,21,38,.84);
  color:#fff;
  font:800 11px/1.25 system-ui,sans-serif;
  letter-spacing:.01em;
  border:1px solid #ffffff45;
  box-shadow:0 2px 7px #0005;
}
#reclamos .card-media > .bookmark-button,
#reclamos .card-media > .card-status{z-index:4}

/* Mantener exactamente cuatro tarjetas por grupo y dos columnas en el celular. */
body.v21-quality #reclamos #cards.grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:stretch;
  gap:14px;
}
#reclamos #cards .card{min-width:0}
#reclamos #cards .card-body{min-width:0}
#reclamos #cards .card-body h3{overflow-wrap:anywhere}
#reclamos #cards .card-body .meta{overflow-wrap:anywhere}

#reclamos .report-page-controls:not([hidden]){
  display:flex;
  justify-content:center;
  align-items:center;
  gap:15px;
  margin:18px auto 8px;
  max-width:100%;
  padding:4px 10px;
}
#reclamos #reportPageControls[hidden]{display:none!important}
#reclamos .report-page-btn{
  display:grid;
  place-items:center;
  flex:0 0 46px;
  height:46px;
  width:46px;
  padding:0;
  border:1px solid #33bdcd7a;
  border-radius:50%;
  background:linear-gradient(145deg,#132b47,#24153d);
  color:#f9f2ff;
  box-shadow:0 4px 14px #071a2f28;
  font-size:23px;
  font-weight:750;
  cursor:pointer;
  touch-action:manipulation;
}
#reclamos .report-page-btn:hover{
  border-color:#bd70e9;
  background:linear-gradient(145deg,#26315d,#57247d);
}
#reclamos .report-page-btn:focus-visible{
  outline:3px solid #b46be5;
  outline-offset:3px;
}
#reclamos .report-page-status{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:100px;
  text-align:center;
  gap:3px;
  color:var(--ink,#f5eaff);
}
#reclamos .report-page-status strong{font-size:16px;font-variant-numeric:tabular-nums}
#reclamos .report-page-status small{font-size:11px;color:var(--muted,#c3bacb);font-weight:650}
#reclamos #cards{scroll-margin-top:180px}

@media(max-width:700px){
 body.v21-quality #reclamos #cards.grid{
   grid-template-columns:repeat(2,minmax(0,1fr))!important;
   gap:11px!important;
 }
 #reclamos #cards .card-body{padding:12px!important}
 #reclamos #cards .card-body h3{font-size:clamp(13px,3.8vw,17px);line-height:1.32}
 #reclamos #cards .card-body .meta{font-size:11px;line-height:1.45}
 #reclamos #cards .card-media{height:clamp(155px,40vw,205px)!important}
 #reclamos .report-photo-count{font-size:10px;padding:4px 6px;right:5px;bottom:6px}
 #reclamos #cards .card-num{gap:4px;flex-wrap:wrap}
 #reclamos .report-page-controls:not([hidden]){gap:10px}
}
@media(max-width:355px){
 body.v21-quality #reclamos #cards.grid{gap:8px!important}
 #reclamos #cards .card-body{padding:9px!important}
 #reclamos #cards .card-media{height:142px!important}
 #reclamos .report-page-btn{width:44px;height:44px;flex-basis:44px}
}
@media(prefers-reduced-motion:reduce){
 #reclamos .report-page-btn{transition:none!important}
}