/* ---------- Página Mascotas senior ---------- */
.page-senior{
  min-height:100vh;
  background:
    radial-gradient(ellipse 80% 50% at 0% 0%, rgba(46,134,199,.08), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 20%, rgba(4,55,104,.05), transparent 50%),
    var(--bg);
}

.senior-main{
  padding:40px 0 80px;
}

.senior-title{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:clamp(1.75rem, 3.5vw, 2.35rem);
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--ink);
  margin:0 0 32px;
}

.senior-layout{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:36px;
  align-items:stretch;
}

.senior-sidebar{
  align-self:stretch;
}
.senior-sidebar .filters-panel{
  position:sticky;
  top:96px;
  z-index:10;
}

.senior-pager-bar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-top:32px;
  padding-top:8px;
}

.senior-pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px 16px;
  box-shadow:0 4px 18px rgba(11,31,51,.05);
}

.pager-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:none;
  border-radius:10px;
  background:var(--sky-light);
  color:var(--coral);
  cursor:pointer;
  transition:background .2s ease, color .2s ease, opacity .2s ease;
}
.pager-btn:hover:not(:disabled){
  background:var(--coral);
  color:#fff;
}
.pager-btn:disabled{
  opacity:.35;
  cursor:not-allowed;
}

.pager-pages{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
  justify-content:center;
}

.pager-page{
  min-width:32px;
  height:32px;
  padding:0 8px;
  border:none;
  border-radius:8px;
  background:transparent;
  color:var(--ink-soft);
  font-family:inherit;
  font-weight:700;
  font-size:.88rem;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.pager-page:hover{
  background:var(--teal-light);
  color:var(--coral);
}
.pager-page.is-active{
  background:var(--coral);
  color:#fff;
}

.pager-meta{
  margin:0;
  font-size:.82rem;
  font-weight:600;
  color:var(--ink-soft);
  text-align:center;
}

.senior-filters{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.filter-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.filter-label{
  font-size:.95rem;
  font-weight:700;
  color:var(--ink);
}

.filter-check{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.9rem;
  font-weight:500;
  color:var(--ink);
  cursor:pointer;
}
.filter-check input{
  width:16px;
  height:16px;
  accent-color:var(--coral);
  cursor:pointer;
}

.filter-clear{
  margin-top:4px;
  padding:10px 14px;
  border:1.5px solid var(--line);
  border-radius:100px;
  background:transparent;
  font-family:inherit;
  font-size:.85rem;
  font-weight:700;
  color:var(--ink-soft);
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.filter-clear:hover{
  border-color:var(--coral);
  color:var(--coral);
  background:var(--sky-light);
}

.senior-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}

.senior-empty{
  margin:48px 0;
  text-align:center;
  font-weight:600;
  color:var(--ink-soft);
}

.pet-card{
  display:block;
  background:var(--paper);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 6px 24px rgba(11,31,51,.07);
  border:1px solid rgba(212,222,232,.6);
  cursor:pointer;
  text-align:center;
  transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease;
  animation:petCardIn .45s ease both;
}
.pet-card:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 36px rgba(11,31,51,.12);
}
.pet-card:focus-visible{
  outline:2px solid var(--sky);
  outline-offset:3px;
}

.pet-card__photo{
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:var(--teal-light);
}
.pet-card__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.pet-card:hover .pet-card__photo img{
  transform:scale(1.04);
}

.pet-card__body{
  padding:14px 12px 18px;
}

.pet-card__name{
  margin:0;
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:1.05rem;
  font-weight:800;
  color:var(--ink);
  letter-spacing:-.02em;
}
.pet-card__gender{
  font-weight:700;
  margin-left:4px;
}
.pet-card__gender--m{color:var(--sky);}
.pet-card__gender--f{color:#E85A8C;}

.pet-card__attrs{
  margin:6px 0 0;
  font-size:.88rem;
  font-weight:600;
  color:var(--ink-soft);
}

@keyframes petCardIn{
  from{opacity:0; transform:translateY(12px);}
  to{opacity:1; transform:translateY(0);}
}

@media (max-width:1100px){
  .senior-grid{grid-template-columns:repeat(3, 1fr);}
}
@media (max-width:900px){
  .senior-layout{
    grid-template-columns:1fr;
    gap:28px;
  }
  .senior-sidebar{
    position:static;
  }
  .senior-sidebar .filters-panel{
    position:static;
  }
  .senior-filters{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px 24px;
  }
  .filter-clear{grid-column:1 / -1; justify-self:start;}
  .senior-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:560px){
  .senior-main{padding:28px 0 56px;}
  .senior-filters{grid-template-columns:1fr;}
  .senior-grid{grid-template-columns:1fr 1fr; gap:12px;}
  .pet-card__body{padding:10px 8px 14px;}
  .pet-card__name{font-size:.95rem;}
  .pet-card__attrs{font-size:.8rem;}
}

@media (prefers-reduced-motion: reduce){
  .pet-card,
  .pet-card__photo img{
    animation:none !important;
    transition:none !important;
  }
}