/* ==========================================================================
   mascotas.css — RescueMe: exclusivo de mascotas-perdidas.html y
   mascotas-en-adopcion.html (listados en vivo + popup + FAQ).
   Carga junto a base.css (que trae .store-note, .faq-list usa sus propios
   tokens/--radius así que no depende de nada más).
   ========================================================================== */

/* ============ MASCOTAS PERDIDAS / EN ADOPCIÓN (listados en vivo) ============ */
.pets-filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:36px 0 8px;}
.pets-count{font-size:.82rem;color:var(--muted);margin-left:4px;}

/* Grilla tipo "collection view": 4 columnas en escritorio, tarjetas cuadradas
   mínimas (foto + nombre) — el detalle completo vive en el popup. */
.pets-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:28px;}
.pet-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;}
.pet-photo{position:relative;aspect-ratio:1/1;background:linear-gradient(150deg,var(--sky),var(--deep));}
.pet-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.pet-photo--missing{display:flex;align-items:center;justify-content:center;}
.pet-photo--missing::after{content:'🐾';font-size:2.2rem;opacity:.7;}
/* Insignia (se busca / en adopción) superpuesta sobre la esquina de la foto */
/* Especificidad ".pet-photo img.pet-photo-badge" a propósito: debe ganarle
   a ".pet-photo img{width:100%;height:100%}" (si no, la insignia hereda el
   alto al 100% del contenedor y sale estirada en vez de un círculo). */
.pet-photo img.pet-photo-badge{position:absolute;top:6px;left:6px;width:25%;height:auto;max-width:60px;min-width:18px;aspect-ratio:1/1;border-radius:50%;background:#fff;padding:3px;box-shadow:0 4px 10px rgba(0,0,0,.28);object-fit:contain;box-sizing:border-box;}
.pet-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1;}
.pet-body h3{font-size:.96rem;margin:0;text-transform:capitalize;}
.pet-tags-line{font-size:.78rem;color:var(--muted);margin:0;}
.pet-viewmore-btn{margin-top:auto;text-align:center;font-size:.82rem;padding:9px 14px;}
.pets-loading,.pets-empty,.pets-error{grid-column:1/-1;text-align:center;padding:48px 20px;color:var(--muted);font-size:.94rem;}
.pets-error{display:flex;flex-direction:column;align-items:center;gap:14px;}
.pets-loadmore-wrap{display:flex;justify-content:center;margin-top:36px;}
@media (max-width:1100px){
  .pets-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:760px){
  .pets-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
  .pets-grid{grid-template-columns:1fr;}
}

/* ---- Popup con el detalle completo de una publicación ---- */
body.pet-modal-open{overflow:hidden;}
.pet-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;}
.pet-modal[hidden]{display:none;}
.pet-modal-backdrop{position:absolute;inset:0;background:rgba(10,26,38,.62);}
.pet-modal-card{position:relative;background:var(--surface);border-radius:var(--radius-lg);max-width:480px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);}
.pet-modal-close{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;border:none;font-size:1.4rem;line-height:1;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center;}
.pet-modal-close:hover{background:rgba(0,0,0,.7);}
.pet-modal-photo{position:relative;width:100%;aspect-ratio:4/3;background:linear-gradient(150deg,var(--sky),var(--deep));}
.pet-modal-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.pet-modal-photo.pet-photo--missing::after{font-size:3rem;}
.pet-modal-photo .pet-photo-badge{width:42px;height:42px;top:12px;left:12px;}
.pet-modal-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:12px;}
.pet-modal-body h3{font-size:1.2rem;margin:0;text-transform:capitalize;}
.pet-modal-body .pet-tags{display:flex;flex-wrap:wrap;gap:6px;}
.pet-modal-body .pet-tag{font-size:.72rem;font-weight:700;background:var(--bg-tint);color:var(--deep);padding:4px 10px;border-radius:100px;}
.pet-modal-body .pet-desc{font-size:.92rem;color:var(--ink);line-height:1.6;margin:0;}
.pet-modal-body .pet-date{font-size:.78rem;color:var(--muted);margin:0;}
.pet-modal-body .pet-contact-btn{margin-top:6px;text-align:center;}

/* ============ FAQ (mascotas perdidas / en adopción) ============ */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.faq-list details{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px 22px;}
.faq-list summary{cursor:pointer;font-weight:700;color:var(--ink);font-size:1rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{content:'+';font-size:1.4rem;color:var(--sky);flex:none;line-height:1;}
.faq-list details[open] summary::after{content:'–';}
.faq-list details p{margin-top:12px;color:var(--muted);font-size:.94rem;line-height:1.6;}