/* Avisos serranos: carteles amplios y acciones accesibles en ambos temas. */
.mascotas, .mascotas-modal { color: var(--text-primary); }
.mascotas *, .mascotas-modal * { -webkit-user-select: text; user-select: text; }
.mascotas button, .mascotas-modal button { -webkit-user-select: none; user-select: none; }
.mascotas .mascotas-hero {
  margin-top: 1rem; padding: 1.5rem 1.1rem 1.1rem;
  border: 1px solid var(--border); border-top: 5px solid var(--sun);
  border-radius: 8px 32px 8px 32px; background: var(--accent-soft);
}
.mascotas .mascotas-hero::before { display: none; }
.mascotas-hero h1 span { color: var(--accent); }
.mascotas-hero .label { color: var(--lake); }
.mascotas-hero .dir-search { margin-bottom: 0; }
.mascotas .dir-search input { min-width: 0; }
.mascotas .dir-top { align-items: flex-start; }
.mascotas .dir-top > div { min-width: 0; }
.mascotas .dir-top > .btn { align-self: flex-start; }
.mascotas-chips { padding: 1.25rem 0 .5rem; gap: 0; }
.mascotas-chips .chip { margin-right: .5rem; }
.mascotas .chip, .mascotas .dir-toolbar select { min-height: 44px; }
.mascotas .dir-toolbar .selects { align-items: center; flex-wrap: wrap; }
.mascotas .dir-toolbar select { flex: 1; max-width: 100%; }
.mascotas .dir-toolbar .btn { flex-shrink: 0; }
.mascotas-nota { color: var(--text-secondary); font-size: 14px; margin: .4rem 0 1rem; }
.mascotas .mascotas-grid { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.mascotas .mascota-cartel { border-radius: 8px 28px 8px 28px; border-top: 4px solid var(--sun); }
.mascota-portada { display: block; color: inherit; }
.mascotas .mascota-cartel .media { height: 0; padding-bottom: 75%; }
.mascotas .mascota-cartel .media img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.mascota-ilustracion {
  position: absolute; left: .75rem; bottom: .75rem; padding: .2rem .6rem;
  color: var(--text-primary); background: var(--surface); border-radius: 6px; font-size: 12px; font-weight: 600;
}
.mascotas .mascota-cartel .body { padding: 1rem; gap: 0; }
.mascotas .mascota-cartel .body > * + * { margin-top: .7rem; }
.mascota-cartel h2 { font-size: 24px; margin: 0; word-wrap: break-word; overflow-wrap: anywhere; }
.mascota-cartel h2 a { display: flex; align-items: center; min-height: 44px; color: var(--text-primary); }
.mascota-badge { align-self: flex-start; border: 1px solid currentColor; border-radius: 6px 12px 6px 12px; }
.mascota-badge--perdido { color: var(--danger); background: var(--surface); }
.mascota-badge--encontrado, .mascota-badge--resuelto { color: var(--accent); background: var(--accent-soft); }
.mascota-badge .lucide { width: 16px; height: 16px; }
.mascota-zona { display: flex; align-items: flex-start; gap: .4rem; margin: 0; color: var(--text-secondary); overflow-wrap: anywhere; }
.mascota-zona .lucide { width: 18px; height: 18px; margin-top: .2rem; }
.mascotas .mascota-cartel .desc { margin: 0; padding: 0; color: var(--text-secondary); -webkit-line-clamp: 3; }
.mascota-tiempo { display: flex; align-items: center; gap: .4rem; font-size: 13px; color: var(--text-secondary); }
.mascota-tiempo .lucide { width: 16px; height: 16px; }
.mascota-acciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; margin-top: auto; }
.mascota-acciones .btn { padding-right: .65rem; padding-left: .65rem; }
.mascota-cartel .mascota-ver { display: inline-flex; align-items: center; justify-content: space-between; gap: .4rem; min-height: 44px; text-align: left; }
.mascotas-vacio { grid-column: 1 / -1; }
.mascotas-vacio img { border-radius: 8px 24px 8px 24px; }
.mascotas-error { margin-bottom: 1.5rem; }
.mascotas-modal .modal { width: 100%; max-width: 680px; max-height: 90vh; border-radius: 8px 26px 8px 26px; }
.mascotas-modal .modal-head, .mascotas-modal .modal-footer { flex-shrink: 0; }
.mascotas-modal .modal-head h3 { overflow-wrap: anywhere; }
.mascotas-modal .modal-body { min-height: 0; }
.mascotas-modal .modal-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.mascotas-modal .modal-footer .btn { min-width: 0; white-space: normal; line-height: 1.3; }
.mascotas-modal .mascota-danger { color: var(--danger); }
.mascotas-modal .link-btn { min-height: 44px; }
.mascota-detalle { display: block; }
.mascota-detalle p { margin: 0; }
.mascota-detalle-foto { width: 100%; height: auto; max-height: 420px; object-fit: contain; background: var(--bg-secondary); border-radius: 6px 22px 6px 22px; }
.mascota-descripcion { white-space: pre-wrap; overflow-wrap: anywhere; }
.mascota-detalle .panel { margin: 0; overflow-wrap: anywhere; }
.mascotas-modal .mascota-detalle > * + * { margin-top: 1rem; }
.mascota-dueno { display: flex; align-items: center; }
.mascota-dueno > div { margin-left: .75rem; }
.mascota-dueno small { display: block; color: var(--text-secondary); }
.mascota-detalle-carga { height: 300px; }
.mascota-preview { width: 100%; max-width: 280px; height: 180px; object-fit: contain; margin-top: .75rem; border-radius: 8px 20px 8px 20px; }
.mascotas-modal input[type="file"] { padding: .5rem; min-height: 44px; max-width: 100%; }
.mascota-copiar { position: fixed; top: 0; left: -9999px; font-size: 16px; }
.mascotas :focus, .mascotas-modal :focus { outline: 3px solid var(--lake); outline-offset: 3px; }
@media (min-width: 740px) {
  .mascotas .mascotas-hero { padding: 2rem; }
  .mascotas .mascotas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mascotas .mascota-cartel .body { padding: 1.3rem; }
}
@media (max-width: 600px) {
  .mascotas .dir-toolbar .selects { width: 100%; }
  .mascotas .dir-toolbar select { width: 100%; flex-basis: 100%; }
  .mascotas .dir-search { flex-wrap: wrap; }
  .mascotas .dir-search .input-icon { flex-basis: 100%; }
  .mascotas .dir-search > .btn { width: 100%; }
  .mascotas-modal .modal { max-height: 92vh; border-radius: 20px 20px 0 0; }
  .mascotas-modal .modal-footer { padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .mascotas .com-card, .mascotas .com-card img, .mascotas-modal .modal { transition: none; animation: none; }
  .mascotas .com-card:hover, .mascotas .com-card:hover img { transform: none; }
  .mascotas .skeleton, .mascotas-modal .skeleton { animation: none; }
}