/* Estilos de la parte «social»: publicaciones, comentarios, historias y destacadas, perfil, explorar, etiquetas y filtros.
   Usa las variables de app.css (--cielo, --tinta, --tarjeta…) para que funcionen el tema oscuro y el alto contraste.
   Los fondos de las historias son colores elegidos por la gente (como .fondo-* de app.css): siempre con texto blanco
   sobre sombra, y en alto contraste pasan a negro. */

/* ------------------------------------------------------------ comunes */
/* «Volver» redondo, como una pastilla blanca. */
.social-volver {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 3rem; padding: 0 1.2rem 0 0.8rem; align-self: flex-start;
  border-radius: 999px; background: var(--tarjeta); border: 1px solid var(--linea); box-shadow: var(--sombra); color: var(--tinta); text-decoration: none;
}
.social-volver:hover { color: var(--tinta); border-color: var(--linea-fuerte); }
.social-volver svg { width: 1.3rem; height: 1.3rem; }
:root[data-contraste='alto'] .social-volver { border-width: 2px; }
.social-fieldset { border: none; padding: 0; margin: 0; min-width: 0; }
.social-chip-input { width: 1.2rem; height: 1.2rem; accent-color: var(--cielo); }
.social-panel-cab { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.social-vista .chip, .chip[data-especie], .social-chip-etiqueta { min-height: 2.75rem; }
.social-vista .chip svg { width: 1.15rem; height: 1.15rem; }
.social-pre { white-space: pre-wrap; }

/* ------------------------------------------------------------ texto con #etiquetas y @menciones */
.social-etiqueta, .social-mencion { font-weight: 800; text-decoration: none; }
.social-etiqueta:hover, .social-mencion:hover { text-decoration: underline; }

/* ------------------------------------------------------------ tarjeta de publicación */
.social-grupo-chip {
  display: flex; align-items: center; gap: 0.45rem; width: fit-content; max-width: calc(100% - 1.7rem); margin: -0.2rem 0.85rem 0.65rem;
  padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--hoja-suave); color: var(--hoja-osc); text-decoration: none; font-size: 0.9rem;
}
.social-grupo-chip:hover { color: var(--hoja-osc); text-decoration: underline; }
.social-grupo-chip svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
:root[data-contraste='alto'] .social-grupo-chip { border: 2px solid var(--hoja); }

/* «Abrazo»: esquinas grandes, la foto con margen y esquinas redondas, y bordes de color según el tipo. */
.post.social-post { border-radius: 2rem; }
.social-post .post-cab { padding: 0.9rem 0.7rem 0.75rem 1rem; }
.social-post .post-fotos { margin: 0 0.75rem; border-radius: 1.5rem; }
.social-post.perdido { border: 3px solid var(--alerta); }
.social-post.encontrado { border: 2px solid var(--canela); }
.social-post.adopcion { border: 2px solid var(--hoja); }

/* Bandas cálidas: frase normal y el icono en un círculo. */
.social-post .post-banda { gap: 0.65rem; padding: 0.6rem 1.1rem; font-size: 1rem; letter-spacing: 0; line-height: 1.25; flex-wrap: nowrap; }
.social-banda-ic { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: rgba(255, 255, 255, 0.24); flex-shrink: 0; }
.social-banda-ic svg { width: 1.25rem; height: 1.25rem; }
.post-banda.encontrado .social-banda-ic { background: rgba(255, 255, 255, 0.5); }
.post-banda.resuelto .social-banda-ic { background: var(--tarjeta); color: var(--hoja); }
.social-banda-txt { min-width: 0; }
.social-banda-extra { font-weight: 700; }
/* En alto contraste la banda resuelta (fondo negro) necesita la letra blanca. */
:root[data-contraste='alto'] .social-post .post-banda.resuelto { color: #fff !important; border-bottom: 2px solid #fff; }
:root[data-contraste='alto'] .social-banda-ic { background: transparent; border: 2px solid currentColor; }

/* Botones en píldora con icono y palabra: arriba la ayuda (Lo he visto, Es mío, Compartir) y debajo mimo y comentar. */
.social-post .post-acciones { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0.55rem; padding: 0.85rem 0.75rem 0.2rem; }
.social-principal, .social-pildoras { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.social-post .post-acciones .btn, .social-post .post-acciones .btn.sec {
  flex: 1 1 auto; flex-direction: row; gap: 0.45rem; min-height: 3rem; padding: 0.4rem 1.1rem; font-size: 0.95rem; line-height: 1.2; text-align: center;
}
@media (min-width: 641px) { .social-post .social-pildoras .btn { flex: 0 1 auto; } }
@media (max-width: 640px) { .social-post .post-acciones .btn, .social-post .post-acciones .btn.sec { font-size: 0.92rem; padding: 0.4rem 0.8rem; } }

/* El mimo: corazón coral; si ya lo has dado, relleno, con fondo coral suave y un pequeño latido. */
.social-mimo svg { color: var(--corazon); }
.social-post .post-acciones .btn.social-mimo[aria-pressed='true'] { background: var(--cielo-suave); border-color: var(--cielo-suave); color: var(--cielo-osc); }
.btn.social-mimo[aria-pressed='true'] svg { fill: var(--corazon); stroke: var(--corazon); animation: social-latido 0.45s ease-out; }
:root[data-contraste='alto'] .social-post .post-acciones .btn.social-mimo[aria-pressed='true'] { border-color: var(--cielo); }
@keyframes social-latido { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
.social-mimos { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; align-self: flex-start; color: var(--tinta); }
.social-mimos svg { width: 1.25rem; height: 1.25rem; fill: var(--corazon); stroke: var(--corazon); flex-shrink: 0; }

/* Adopción: bloque salvia con su nombre, su frase escrita a mano y «Quiero conocerla». */
.social-adopta { margin: 0.85rem 0.75rem 0; padding: 1rem 1.1rem 1.1rem; border-radius: 1.5rem; background: var(--hoja-suave); display: flex; flex-direction: column; gap: 0.55rem; }
.social-adopta-t { font-size: 1.45rem; overflow-wrap: anywhere; }
.social-adopta-nota { font-size: 1.75rem; overflow-wrap: anywhere; }
.social-adopta-nota a { color: inherit; }
.social-adopta-botones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.2rem; }
.social-adopta-botones .btn { flex: 1 1 auto; }
.social-conocer svg { fill: currentColor; }
:root[data-contraste='alto'] .social-adopta { border: 2px solid var(--hoja); }
.btn.social-fav[aria-pressed='true'] { background: var(--canela-suave); border-color: var(--canela); color: var(--tinta); }
.btn.social-fav[aria-pressed='true'] svg { fill: var(--canela); stroke: var(--canela-osc); }

.social-post .post-datos { border-radius: 1.2rem; }
.social-post-pie { display: flex; flex-wrap: wrap; gap: 0.1rem 1.1rem; align-items: center; }
.social-post-pie a { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; text-decoration: none; }
.social-post-pie .boton-texto { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; }
.social-post-pie svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; }
.social-guardar[aria-pressed='true'] svg { fill: currentColor; }

/* ------------------------------------------------------------ miniaturas */
.social-mini a { color: var(--tinta); }
.social-mini-varias { position: absolute; top: 0.35rem; right: 0.35rem; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)); line-height: 0; }
.social-mini-varias svg { width: 1.25rem; height: 1.25rem; }
.social-mini-cifras {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: flex-end; gap: 0.6rem; padding: 1.4rem 0.45rem 0.35rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); color: #fff; font-weight: 800; font-size: 0.86rem; pointer-events: none;
}
.social-mini-cifras span { display: inline-flex; align-items: center; gap: 0.2rem; }
.social-mini-cifras svg { width: 1rem; height: 1rem; }
.social-mini a:hover img, .social-mini a:focus-visible img { opacity: 0.9; }
/* La etiqueta «Adopción» o «Se busca» arriba, para no taparse con las cifras de abajo. */
.social-mini .marca-tipo { top: 0.3rem; bottom: auto; max-width: calc(100% - 0.6rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------ sugerencias al escribir @ o # */
.social-sugerencias { margin-top: 0.3rem; max-height: 19rem; overflow-y: auto; box-shadow: var(--sombra); position: relative; z-index: 5; }
.social-sugerencias button { display: flex; align-items: center; gap: 0.6rem; color: var(--tinta); }
.social-sugerencias button[aria-selected='true'] { background: var(--cielo-suave); box-shadow: inset 4px 0 0 var(--cielo); }
.social-sug-almohadilla {
  width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--canela-suave); color: var(--canela-osc); display: inline-flex;
  align-items: center; justify-content: center; font-weight: 800; font-family: var(--titulos); flex-shrink: 0; font-size: 1.1rem;
}
.social-sug-fila { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.9rem; min-height: 2.9rem; border-bottom: 1px solid var(--linea); color: var(--tinta); text-decoration: none; }
.social-sug-fila:last-child { border-bottom: none; }
.social-sug-fila:hover, .social-sug-fila:focus-visible { background: var(--cielo-suave); color: var(--tinta); }
.social-sug-fila svg { width: 1.35rem; height: 1.35rem; color: var(--tinta-2); flex-shrink: 0; }

/* ------------------------------------------------------------ comentarios (burbujas cálidas) */
.social-comentarios { border-radius: 2rem; padding: 1.2rem 1rem 1.25rem; }
.social-comentarios h2 .suave { font-weight: 600; }
.social-hilo { display: flex; flex-direction: column; gap: 0.55rem; }
.social-hilo + .social-hilo { padding-top: 0.7rem; border-top: 1px dashed var(--linea); }
.social-respuestas { display: flex; flex-direction: column; gap: 0.55rem; margin-left: 2.8rem; padding-left: 0.7rem; border-left: 3px solid var(--cielo-suave); }
.social-respuestas:empty { display: none; }
.social-comentario { scroll-margin-top: 6rem; }
.social-comentario .burbuja { background: var(--gris-suave); border-color: transparent; border-radius: 0.45rem 1.4rem 1.4rem 1.4rem; padding: 0.6rem 1rem 0.2rem; }
.social-comentario.mio .burbuja { background: var(--cielo-suave); }
:root[data-contraste='alto'] .social-comentario .burbuja { border-color: #fff; }
.social-com-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 0.2rem 0.6rem; flex-wrap: wrap; }
.social-com-cab a { color: var(--tinta); text-decoration: none; }
.social-com-cab a:hover { text-decoration: underline; }
.social-com-acciones { display: flex; flex-wrap: wrap; gap: 0 0.9rem; margin-top: 0.15rem; }
.social-com-acciones .boton-texto { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.75rem; padding: 0; color: var(--cielo-osc); }
.social-com-acciones svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.social-com-like svg { color: var(--corazon); }
.social-com-like[aria-pressed='true'] svg { fill: var(--corazon); stroke: var(--corazon); animation: social-latido 0.45s ease-out; }
.social-com-acciones .social-com-n { color: var(--tinta); }
.social-com-n svg { fill: var(--corazon); stroke: var(--corazon); }
.social-sin-com { text-align: center; padding: 0.6rem 0; }
.social-com-form .campo textarea { border-radius: 1.3rem; }
.social-com-enviar { align-self: flex-start; }
.social-com-acciones .social-com-borrar { color: var(--alerta); }
.social-com-acciones .social-com-suave { color: var(--tinta-2); }
.social-comentario.social-resaltado .burbuja { background: var(--canela-suave); border-color: var(--canela); box-shadow: 0 0 0 3px var(--canela-suave); }
.social-respondiendo { align-items: center; flex-wrap: wrap; padding: 0.55rem 0.8rem; }
.social-respondiendo .crece { flex: 1 1 auto; min-width: 0; font-weight: 700; }
@media (max-width: 30rem) { .social-respuestas { margin-left: 1.2rem; } }

/* ------------------------------------------------------------ historias: visor */
.social-historia { overflow: hidden; width: 100%; }
.social-historia.con-foto { background: #000; }
.social-historia .visor-texto { color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); max-width: 36rem; }
.social-historia .visor-texto.sobre-foto { position: absolute; left: 0; right: 0; bottom: 0; max-width: none; padding: 2.8rem 1.2rem 1.2rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent); }
.social-txt-s { font-size: 1.25rem; }
.social-txt-m { font-size: 1.7rem; }
.social-txt-l { font-size: 2.45rem; line-height: 1.12; }
.sobre-foto.social-txt-s { font-size: 1.05rem; }
.sobre-foto.social-txt-m { font-size: 1.3rem; }
.sobre-foto.social-txt-l { font-size: 1.8rem; }
.social-reacciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; padding: 0.5rem 0.8rem 0; }
.social-reacciones button {
  width: 3.1rem; height: 3.1rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.12);
  font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.social-reacciones button:hover { background: rgba(255, 255, 255, 0.25); }
.social-reacciones button[aria-pressed='true'] { background: #fff; border-color: #fff; box-shadow: 0 0 0 3px var(--canela); }
.social-visor-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.6rem 0.8rem 0; }
.social-visor-acciones:empty { display: none; }
.social-visor-acciones .btn { flex: 1 1 9rem; }
.social-visor .visor-pie .btn[disabled] { opacity: 0.4; }
.social-reaccion-vista { font-size: 1.6rem; margin-left: auto; flex-shrink: 0; }

/* Fondos de las historias. */
.social-fondo-cielo { background: linear-gradient(160deg, #D04A35, #8E2A17); }
.social-fondo-mar { background: linear-gradient(160deg, #0F7C8A, #0A4A5C); }
.social-fondo-hoja { background: linear-gradient(160deg, #1E7A4C, #0F4A2D); }
.social-fondo-canela { background: linear-gradient(160deg, #E08A1E, #A9500F); }
.social-fondo-atardecer { background: linear-gradient(160deg, #E0661F, #9B1D5A); }
.social-fondo-rosa { background: linear-gradient(160deg, #C2417A, #7A1E48); }
.social-fondo-lavanda { background: linear-gradient(160deg, #6D4BC2, #3B2380); }
.social-fondo-tierra { background: linear-gradient(160deg, #8A4A06, #4A2600); }
.social-fondo-noche { background: linear-gradient(160deg, #3B2420, #120A08); }
:root[data-contraste='alto'] [class*='social-fondo-'] { background: #000 !important; border: 2px solid #fff; }

/* ------------------------------------------------------------ historias: nueva */
.social-hn { display: grid; gap: 1rem; }
.social-hn-vista {
  position: relative; width: min(100%, 18rem); margin: 0 auto; aspect-ratio: 9 / 14; border-radius: 1.3rem; overflow: hidden;
  background: #000; color: #fff; display: flex; box-shadow: var(--sombra);
}
.social-hn-vista .visor-cuerpo { width: 100%; height: 100%; }
.social-hn-vista .visor-cuerpo img { width: 100%; height: 100%; object-fit: cover; }
.social-hn-vista .social-txt-s { font-size: 1rem; }
.social-hn-vista .social-txt-m { font-size: 1.3rem; }
.social-hn-vista .social-txt-l { font-size: 1.85rem; }
.social-hn-vista .visor-texto { padding: 1rem; }
.social-subiendo { position: absolute; top: 0.6rem; left: 0.6rem; right: 0.6rem; padding: 0.4rem 0.7rem; border-radius: 999px; background: rgba(0, 0, 0, 0.75); color: #fff; font-weight: 800; text-align: center; font-size: 0.9rem; }
@media (min-width: 46rem) {
  .social-hn { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); align-items: start; }
  .social-hn-vista { position: sticky; top: 5rem; }
}
.social-muestras { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(6.2rem, 100%), 1fr)); gap: 0.5rem; }
.social-muestra {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem; padding: 0.4rem; min-height: 2.75rem; border-radius: var(--r-btn);
  border: 2px solid var(--linea); background: var(--tarjeta); color: var(--tinta); font-weight: 700; cursor: pointer; font-size: 0.9rem;
}
.social-muestra span { height: 2.6rem; border-radius: 0.6rem; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.4rem; font-weight: 800; }
.social-muestra[aria-pressed='true'] { border-color: var(--cielo); box-shadow: inset 0 0 0 2px var(--cielo); font-weight: 800; }
.social-muestra[aria-pressed='true'] span::after { content: '✓'; }

/* ------------------------------------------------------------ destacadas */
.social-destacadas { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.8rem, 1fr)); gap: 1.1rem 0.6rem; }
.social-destacada { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; text-align: center; min-width: 0; }
.social-destacada-aro { width: 5.6rem; height: 5.6rem; border-radius: 50%; padding: 3px; border: 2px solid var(--linea-fuerte); background: var(--tarjeta); cursor: pointer; }
.social-destacada-aro:hover { border-color: var(--cielo); }
.social-destacada-aro > img, .social-destacada-aro > span { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; color: #fff; }
.social-destacada-aro > span svg { width: 1.8rem; height: 1.8rem; }
.social-destacada-t { font-weight: 800; margin-top: 0.3rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-destacada .boton-texto { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 2.75rem; }
.social-destacada .boton-texto svg { width: 1rem; height: 1rem; }

/* ------------------------------------------------------------ perfil */
.social-perfil { padding: 0; overflow: hidden; }
.social-portada {
  height: 7.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='96' viewBox='0 0 120 96'%3E%3Cg fill='%23fff' fill-opacity='.2'%3E%3Ccircle cx='20' cy='20' r='4.2'/%3E%3Ccircle cx='29.5' cy='14.5' r='4.2'/%3E%3Ccircle cx='39' cy='20' r='4.2'/%3E%3Cellipse cx='29.5' cy='31' rx='7.5' ry='6.3'/%3E%3Ccircle cx='80' cy='64' r='4.2'/%3E%3Ccircle cx='89.5' cy='58.5' r='4.2'/%3E%3Ccircle cx='99' cy='64' r='4.2'/%3E%3Cellipse cx='89.5' cy='75' rx='7.5' ry='6.3'/%3E%3C/g%3E%3C/svg%3E"), var(--tono);
  background-size: 120px 96px, cover;
}
.social-tono-cielo { --tono: linear-gradient(120deg, var(--cielo), var(--cielo-osc)); }
.social-tono-hoja { --tono: linear-gradient(120deg, var(--hoja), var(--hoja-osc)); }
.social-tono-canela { --tono: linear-gradient(120deg, var(--canela), var(--canela-osc)); }
/* En oscuro, del tono suave (oscuro) al vivo, para que la portada no deslumbre. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']):not([data-contraste='alto']) .social-tono-cielo { --tono: linear-gradient(120deg, var(--cielo-suave), var(--cielo)); }
  :root:not([data-tema='claro']):not([data-contraste='alto']) .social-tono-hoja { --tono: linear-gradient(120deg, var(--hoja-suave), var(--hoja)); }
  :root:not([data-tema='claro']):not([data-contraste='alto']) .social-tono-canela { --tono: linear-gradient(120deg, var(--canela-suave), var(--canela)); }
}
:root[data-tema='oscuro']:not([data-contraste='alto']) .social-tono-cielo { --tono: linear-gradient(120deg, var(--cielo-suave), var(--cielo)); }
:root[data-tema='oscuro']:not([data-contraste='alto']) .social-tono-hoja { --tono: linear-gradient(120deg, var(--hoja-suave), var(--hoja)); }
:root[data-tema='oscuro']:not([data-contraste='alto']) .social-tono-canela { --tono: linear-gradient(120deg, var(--canela-suave), var(--canela)); }
:root[data-contraste='alto'] .social-portada { background: #000; border-bottom: 2px solid #fff; }
.social-perfil-cuerpo { padding: 0 1rem 1.15rem; display: flex; flex-direction: column; gap: 0.9rem; }
.social-perfil-avatar { position: relative; width: max-content; margin-top: -3.9rem; border-radius: 50%; }
.social-perfil-avatar .avatar { border: 4px solid var(--tarjeta); background-color: var(--cielo-suave); }
.social-perfil-avatar > button { display: block; padding: 4px; border: none; border-radius: 50%; cursor: pointer; background: conic-gradient(from 200deg, var(--canela), var(--corazon), var(--canela)); }
.social-perfil-avatar.vista > button { background: var(--linea-fuerte); }
.social-nueva {
  position: absolute; left: 50%; bottom: -0.3rem; transform: translateX(-50%); padding: 0.05rem 0.6rem; border-radius: 999px;
  background: var(--canela); color: #3B2420; font-weight: 800; font-size: 0.82rem; border: 2px solid var(--tarjeta); white-space: nowrap;
}
.social-perfil-nombre { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 1.7rem; overflow-wrap: anywhere; }
.social-perfil-nombre .verif { width: 1.4rem; height: 1.4rem; }
.social-lugar svg { width: 1.1rem; height: 1.1rem; }
.social-bio { white-space: pre-wrap; }
.social-te-sigue { align-self: flex-start; }
.social-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(7.2rem, 100%), 1fr)); gap: 0.5rem; }
.social-cifra {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.05rem; min-height: 4.3rem; padding: 0.5rem;
  border-radius: 1rem; background: var(--tarjeta-2); border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; font: inherit; cursor: pointer; text-align: center;
}
.social-cifra:hover { border-color: var(--linea-fuerte); color: var(--tinta); }
.social-cifra b { font-family: var(--titulos); font-size: 1.4rem; font-weight: 600; line-height: 1.1; }
.social-cifra span { font-size: 0.86rem; color: var(--tinta-2); }
.social-pestanas { display: flex; flex-wrap: wrap; }
.social-pestanas button { flex: 1 1 auto; }
.social-dato-org { align-items: flex-start; }
.social-dato-org svg { flex-shrink: 0; margin-top: 0.15rem; }
.social-ficha-org h2 svg { width: 1.4rem; height: 1.4rem; color: var(--cielo); }

.social-mascotas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr)); gap: 0.75rem; }
.social-mascota { display: flex; flex-direction: column; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--tinta); }
.social-mascota:hover { border-color: var(--linea-fuerte); color: var(--tinta); }
.social-mascota-foto { aspect-ratio: 1; background: var(--cielo-suave); color: var(--cielo); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.social-mascota-foto img { width: 100%; height: 100%; object-fit: cover; }
.social-mascota-foto svg { width: 3rem; height: 3rem; opacity: 0.65; }
.social-mascota-datos { padding: 0.6rem 0.75rem 0.8rem; display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.3; }
.social-mascota-datos b { font-size: 1.05rem; display: flex; align-items: center; gap: 0.25rem; }
.social-mascota-datos b svg { width: 1.1rem; height: 1.1rem; }
.social-mascota-datos span { color: var(--tinta-2); font-size: 0.86rem; }
.social-mascota.nueva { border: 2px dashed var(--cielo); }
.social-mascota.nueva .social-mascota-foto svg { opacity: 1; width: 2.6rem; height: 2.6rem; }

/* ------------------------------------------------------------ seguidores */
.social-persona-fila .persona { flex: 1 1 auto; }

/* ------------------------------------------------------------ publicar: fotos y filtros */
.social-foto.elegida { outline: 3px solid var(--cielo); outline-offset: 2px; }
.foto-elegida.social-foto .social-foto-filtro { top: auto; right: auto; bottom: 0.3rem; left: 0.3rem; display: inline-flex; align-items: center; gap: 0.25rem; }
.social-foto-filtro svg { width: 1rem; height: 1rem; }
.foto-elegida.social-foto .social-foto-filtro[aria-pressed='true'] { background: var(--cielo); color: var(--sobre-cielo); }
.social-filtros { border-top: 1px solid var(--linea); padding-top: 0.9rem; }
.social-filtros h3 svg { width: 1.3rem; height: 1.3rem; color: var(--cielo); }
.social-filtro-grande { width: 100%; max-height: 24rem; object-fit: contain; border-radius: 1rem; background: var(--gris-suave); }
.social-filtro-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(4.7rem, 100%), 1fr)); gap: 0.45rem; }
.social-filtro {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.3rem 0.3rem 0.4rem; border: 2px solid var(--linea); border-radius: var(--r-btn);
  background: var(--tarjeta); color: var(--tinta); font-weight: 700; font-size: 0.86rem; line-height: 1.15; text-align: center; cursor: pointer; min-height: 2.75rem;
}
.social-filtro img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0.5rem; }
.social-filtro[aria-pressed='true'] { border-color: var(--cielo); background: var(--cielo-suave); font-weight: 800; }
.social-filtro[aria-pressed='true'] span::before { content: '✓ '; }

/* ------------------------------------------------------------ explorar */
.social-buscar { position: relative; }
.social-buscar .sugerencias { margin-top: 0.3rem; box-shadow: var(--sombra); }
.social-chip-etiqueta { gap: 0.45rem; }
.social-chip-etiqueta .suave { font-weight: 700; font-size: 0.82rem; }
.social-chip-etiqueta:hover { border-color: var(--linea-fuerte); color: var(--tinta); }
.social-cuentas-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 0.8rem; }
.social-cuenta { display: flex; flex-direction: column; gap: 0.75rem; }
.social-cuenta-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; border-radius: 0.8rem; overflow: hidden; }
.social-cuenta-fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--gris-suave); }
.social-cuenta .btn[aria-pressed='true'] { background: var(--tarjeta); color: var(--tinta); border-color: var(--linea); }

/* ------------------------------------------------------------ etiqueta */
.social-etq-cab { display: flex; align-items: center; gap: 0.9rem 1rem; flex-wrap: wrap; }
.social-etq-cab h1 { overflow-wrap: anywhere; }
.social-etq-icono {
  width: 4rem; height: 4rem; border-radius: 1.1rem; background: var(--canela-suave); color: var(--canela-osc); display: flex; align-items: center;
  justify-content: center; font-family: var(--titulos); font-size: 2.3rem; font-weight: 600; flex-shrink: 0;
}
:root[data-contraste='alto'] .social-etq-icono { border: 2px solid var(--canela); }
.social-etq-cab > .btn { flex: 1 1 100%; }
@media (min-width: 40rem) { .social-etq-cab > .btn { flex: 0 0 auto; } }

/* ------------------------------------------------------------ avisos («Abrazo») */
.social-avisos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.social-aviso {
  display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 0.95rem; border-radius: 1.5rem; background: var(--tarjeta);
  border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; box-shadow: var(--sombra);
}
.social-aviso:hover { color: var(--tinta); border-color: var(--linea-fuerte); }
/* Los nuevos, en coral suave (y con la palabra «Nuevo», que el color solo no basta). */
.social-aviso.nuevo { background: var(--cielo-suave); border-color: var(--cielo-suave); }
.social-aviso.nuevo .social-aviso-frase { font-weight: 800; }
:root[data-contraste='alto'] .social-aviso { border-width: 2px; }
:root[data-contraste='alto'] .social-aviso.nuevo { border-color: #FFE14D; }
.social-aviso-cara { position: relative; flex-shrink: 0; width: 3.2rem; height: 3.2rem; }
.social-aviso-cara .avatar { width: 3.2rem; height: 3.2rem; }
/* El punto de color según el tipo, sobre el avatar. */
.social-aviso-punto {
  position: absolute; right: -0.35rem; bottom: -0.25rem; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--tarjeta);
}
.social-aviso.nuevo .social-aviso-punto { border-color: var(--cielo-suave); }
.social-aviso-punto svg { width: 0.95rem; height: 0.95rem; }
.social-aviso-icono { width: 3.2rem; height: 3.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.social-aviso-icono svg { width: 1.6rem; height: 1.6rem; }
.social-aviso-punto.coral, .social-aviso-icono.coral { background: var(--cielo); color: var(--sobre-cielo); }
.social-aviso-punto.lavanda, .social-aviso-icono.lavanda { background: var(--lavanda); color: var(--sobre-cielo); }
.social-aviso-punto.miel, .social-aviso-icono.miel { background: var(--canela); color: #3B2420; }
.social-aviso-punto.salvia, .social-aviso-icono.salvia { background: var(--hoja); color: var(--sobre-cielo); }
.social-aviso-punto.rojo, .social-aviso-icono.rojo { background: var(--alerta); color: var(--sobre-cielo); }
.social-aviso-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.social-aviso-frase { line-height: 1.35; }
.social-aviso-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.6rem; }
.social-aviso-nuevo { padding: 0.05rem 0.6rem; border-radius: 999px; background: var(--cielo); color: var(--sobre-cielo); font-size: 0.82rem; font-weight: 800; }
:root[data-contraste='alto'] .social-aviso-nuevo { color: #000; }
.social-avisos-calma .nota { color: var(--lavanda-osc); }
.social-solicitudes-seguir .fila { flex-wrap: wrap; }
.social-solicitudes-seguir .fila .persona { flex: 1 1 12rem; }

/* ------------------------------------------------------------ veterinarios y protectoras («Abrazo») */
/* Cabecera salvia: en el móvil llega a los bordes y se curva abajo; en el ordenador, un bloque redondo. */
.dir-cab {
  margin: -1rem -0.85rem 0; padding: 1.3rem 1rem 1.5rem; border-radius: 0 0 2.6rem 2.6rem; background: var(--hoja-suave);
  display: flex; flex-direction: column; gap: 0.85rem;
}
@media (min-width: 720px) { .dir-cab { margin: 0; padding: 2rem 2rem 2.1rem; border-radius: 2.6rem; } }
:root[data-contraste='alto'] .dir-cab { border: 2px solid var(--hoja); }
.dir-cab h1 { font-size: 2.25rem; line-height: 1.02; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.dir-frase { color: var(--hoja-osc); font-size: 1.02rem; }
.dir-buscador input { min-height: 3.2rem; padding-left: 3rem; border-color: var(--hoja); box-shadow: 0 6px 16px rgba(46, 122, 99, 0.14); }
.dir-buscador svg { left: 1rem; }
.dir-botones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(10.5rem, 100%), 1fr)); gap: 0.6rem; }
.dir-botones .btn { min-height: 3.1rem; }
.btn.sec.dir-urg[aria-pressed='true'], .btn.sec.dir-urg[aria-pressed='true']:hover { background: var(--alerta); border-color: var(--alerta); color: var(--sobre-cielo); }
:root[data-contraste='alto'] .btn.sec.dir-urg[aria-pressed='true'] { color: #000; }

/* Fichas de clínica o protectora. */
.dir-lista { gap: 0.9rem; }
.dir-ficha {
  display: flex; flex-direction: column; gap: 0.7rem; padding: 1.1rem 1.1rem 1.2rem; background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: 2rem; box-shadow: var(--sombra);
}
:root[data-contraste='alto'] .dir-ficha { border-width: 2px; }
.dir-ficha .avatar.l { width: 4.2rem; height: 4.2rem; border: 3px solid var(--hoja-suave); }
.dir-ficha .persona .nombre { font-family: var(--titulos); font-size: 1.22rem; line-height: 1.15; overflow-wrap: anywhere; }
.dir-ficha-sellos { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: center; }
.dir-sello { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.8rem; border-radius: 999px; background: var(--hoja-suave); color: var(--hoja-osc); font-weight: 800; font-size: 0.9rem; }
.dir-sello svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
:root[data-contraste='alto'] .dir-sello { border: 2px solid var(--hoja); }
.dir-dato { display: flex; gap: 0.5rem; align-items: flex-start; color: var(--tinta-2); font-size: 0.95rem; }
.dir-dato svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; margin-top: 0.15rem; }
.dir-dato span { white-space: pre-line; min-width: 0; }
.dir-ficha-botones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dir-ficha-botones .btn { flex: 1 1 8rem; }

/* Sin resultados: Perrete y Gatunha con la lupa. */
.dir-vacio {
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1.4rem 1.2rem 1.3rem; text-align: center;
  border-radius: 2.1rem; background: var(--tarjeta); border: 1px solid var(--linea); box-shadow: var(--sombra);
}
:root[data-contraste='alto'] .dir-vacio { border-width: 2px; }
.dir-vacio .personaje { width: min(19rem, 100%); height: auto; }
.dir-vacio h2 { font-size: 1.55rem; }
.dir-vacio p { color: var(--tinta-2); }
.dir-vacio-botones { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.dir-vacio-botones .btn { width: 100%; }
.dir-enlace {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.2rem 0.4rem; border: none; background: none;
  color: var(--cielo); font-weight: 800; text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; text-align: center;
}
.dir-enlace:hover { color: var(--cielo-osc); }

/* ¿Es una urgencia ahora? (rojo: solo para urgencias). */
.dir-urgencia { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.3rem 1.2rem 1.1rem; border-radius: 2rem; background: var(--alerta); color: var(--sobre-cielo); }
.dir-urgencia h2 { display: flex; align-items: center; gap: 0.6rem; font-size: 1.4rem; }
.dir-urgencia h2 svg { width: 1.7rem; height: 1.7rem; flex-shrink: 0; }
.btn.sec.dir-btn-claro { color: var(--alerta-osc); border-color: transparent; }
.dir-enlace-claro { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; color: var(--sobre-cielo); font-weight: 800; text-align: center; }
.dir-enlace-claro:hover { color: var(--sobre-cielo); }
:root[data-contraste='alto'] .dir-urgencia { border: 2px solid #fff; }

/* Protectoras: en vez de la urgencia, ir a ver animales en adopción. */
.dir-adoptar { display: flex; flex-direction: column; gap: 0.6rem; border-radius: 2rem; }
.dir-adoptar h2 { font-size: 1.4rem; }
:root[data-contraste='alto'] .dir-adoptar { border: 2px solid var(--hoja); }

/* Guías para estar tranquilos. */
.dir-guias { display: flex; flex-direction: column; gap: 0.6rem; }
.dir-guias h2 { font-size: 1.4rem; }
.dir-guias ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.dir-guia {
  display: flex; align-items: center; gap: 0.9rem; min-height: 3.6rem; padding: 0.7rem 1rem; border-radius: 1.5rem; background: var(--tarjeta);
  border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; font-weight: 800; box-shadow: var(--sombra);
}
.dir-guia:hover { color: var(--tinta); border-color: var(--linea-fuerte); }
.dir-guia > svg { width: 1.3rem; height: 1.3rem; color: var(--tinta-2); flex-shrink: 0; }
.dir-guia-ic { width: 2.7rem; height: 2.7rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dir-guia-ic svg { width: 1.4rem; height: 1.4rem; }
.dir-guia-ic.miel { background: var(--canela-suave); color: var(--canela-osc); }
.dir-guia-ic.coral { background: var(--cielo-suave); color: var(--cielo-osc); }
.dir-guia-ic.salvia { background: var(--hoja-suave); color: var(--hoja-osc); }
:root[data-contraste='alto'] .dir-guia { border-width: 2px; }
:root[data-contraste='alto'] .dir-guia-ic { border: 2px solid currentColor; }

/* ¿Conoces una buena? Bloque lavanda con Gatunha asomándose y una nota a mano. */
.dir-recomendar { display: flex; flex-direction: column; gap: 0.6rem; border-radius: 2rem; }
.dir-rec-t { font-size: 1.85rem; color: var(--lavanda-osc); padding-right: 5.2rem; }
.bloque .personaje-esquina.dir-asoma { top: -0.5rem; right: -0.4rem; bottom: auto; width: 6.2rem; }
.dir-recomendar p:not(.nota) { position: relative; }
.dir-recomendar .btn { position: relative; }
.dir-recomendar .btn svg { fill: currentColor; }
:root[data-contraste='alto'] .dir-recomendar { border: 2px solid var(--lavanda); }

/* ¿Trabajas en una clínica? (borde punteado). */
.dir-alta { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.2rem 1.2rem 0.9rem; border-radius: 2rem; border: 2px dashed var(--linea-fuerte); }
.dir-alta-t { font-size: 1.1rem; }
.dir-alta a { align-self: flex-start; display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 800; }