/* Lo social: Para ti, Amigos, notificaciones, comentarios con «me gusta» y
   respuestas, actividad del perfil, el botón Seguir y las insignias.
   Con los tokens de estilo.css (capas, espacios, radios y tipos); aquí solo se
   definen los colores propios de esto: el corazón, el punto de «viendo» y los
   niveles de las insignias. */

:root {
  --corazon: color-mix(in srgb, var(--peligro) 55%, #ff3b6b);
  --viendo: var(--bien);
  --nivel-bronce: #c8875a;
  --nivel-plata: #aeb9c9;
  --nivel-oro: #e9b949;
  --nivel-especial: var(--acento);
}

/* ---------------------------------------------------------------- piezas comunes */

.avatar.mediano { width: 40px; height: 40px; }
.avatar.mediano .inicial { font-size: 16px; }
.avatar.aro { box-shadow: 0 0 0 2px var(--fondo), 0 0 0 4px var(--tema-usuario, transparent); }

/* El nombre y sus insignias, alineados por la línea base del nombre (sea cual sea su
   fuente) y bajadas hasta el centro de las minúsculas (≈ 0,27 em sobre la base):
   así no quedan altas con nombres en minúscula ni con fuentes de mucha caja. */
.nombre-marca { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; max-width: 100%; vertical-align: bottom; }
.nombre-marca .nombre-estilo { min-width: 0; }
.nombre-marca > .insignias-nombre { position: relative; top: calc(var(--ins) / 2 - 0.27em); }

.te-sigue { background: var(--elevada); color: var(--texto-2); font-weight: 500; }
.vacio-suave { padding: var(--esp-4) 0; }
.globo {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--peligro); color: var(--sobre-peligro); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.pila-avatares { display: inline-flex; }
.pila-avatares .avatar { box-shadow: 0 0 0 2px var(--superficie); }
.pila-avatares .avatar + .avatar { margin-left: -8px; }

.nota-grande { display: inline-flex; align-items: baseline; gap: 2px; font-variant-numeric: tabular-nums; }
.nota-grande b { font-size: var(--tam-3xl); font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--texto); }
.nota-grande small { font-size: var(--tam-s); color: var(--texto-3); font-weight: 500; }

/* El botón Seguir. */
.boton.seguir { flex: none; }
.boton.seguir .icono { width: 16px; height: 16px; }
.boton.seguir.secundario[data-estado='siguiendo']:hover { color: var(--peligro); }

/* ---------------------------------------------------------------- «me gusta» y respuestas */

.pie-comentario { margin-top: var(--esp-2); }
.pie-fila { display: flex; align-items: center; gap: var(--esp-1); flex-wrap: wrap; }
.pie-boton {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--esp-2); border-radius: var(--radio-pastilla);
  color: var(--texto-3); font-size: var(--tam-s); font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background var(--rapido), color var(--rapido);
}
.pie-boton:hover { background: var(--estado-hover); color: var(--texto); }
.pie-boton:active { background: var(--estado-pulsado); }
.pie-boton .icono { width: 18px; height: 18px; }
.pie-boton.megusta.activo { color: var(--peligro); }
.pie-boton.megusta.activo:hover { background: color-mix(in srgb, var(--corazon) 12%, transparent); }
.pie-boton.peligro:hover { color: var(--peligro); }
.pie-boton span:empty { display: none; }

.hilo { margin: var(--esp-2) 0 0 var(--esp-3); padding-left: var(--esp-4); border-left: 2px solid var(--elevada); display: grid; gap: var(--esp-3); }
.respuestas { display: grid; gap: var(--esp-3); }
.respuesta { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--esp-2); }
.respuesta header { display: flex; align-items: baseline; gap: var(--esp-2); min-width: 0; }
.respuesta-autor { font-weight: 600; font-size: var(--tam-s); min-width: 0; color: var(--texto); text-decoration: none; }
.respuesta-autor:hover { text-decoration: underline; }
.respuesta header time { font-size: var(--tam-xs); flex: none; }
.respuesta-texto { margin: 2px 0 0; color: var(--texto); font-size: var(--tam-m); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.respuesta .pie-boton { height: 28px; }
.respuesta .pie-boton .icono { width: 16px; height: 16px; }
.responder { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--esp-2); align-items: end; }
/* «Ver N respuestas más» / «Ocultar respuestas», con la raya de los hilos de Instagram delante. */
.hilo-ver {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--esp-2); min-height: 32px; padding: 0 var(--esp-2) 0 0;
  color: var(--texto-3); font-size: var(--tam-s); font-weight: 600;
}
.hilo-ver::before { content: ''; width: 24px; height: 1px; background: currentColor; opacity: 0.6; }
.hilo-ver:hover { color: var(--texto); }
.hilo-ver:disabled { opacity: 0.6; }
.responder-a { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; margin: 0; color: var(--texto-3); font-size: var(--tam-xs); }
.responder-a b { color: var(--texto-2); font-weight: 600; }
.responder-a-quitar { width: 24px; height: 24px; }
.responder .campo-area { min-height: 40px; padding: 9px var(--esp-3); }
.comentario-autor { color: inherit; text-decoration: none; min-width: 0; font-weight: 600; }
.comentario-autor:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Para ti */

.para-ti { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-10); }
.para-ti-lado { display: none; }
.para-ti-columna { min-width: 0; max-width: 728px; width: 100%; margin: 0 auto; }
/* En el escritorio ancho, el feed y su columna: lo que estás viendo, tus amigos y gente que quizá conoces. */
@media (min-width: 1240px) {
  .para-ti:has(.para-ti-lado:not(:empty)) { grid-template-columns: minmax(0, 728px) 320px; justify-content: center; }
  @media (min-width: 1600px) { .para-ti:has(.para-ti-lado:not(:empty)) { grid-template-columns: minmax(0, 840px) 380px; gap: var(--esp-12); } .para-ti-columna { max-width: 840px; } }
  .para-ti-lado:not(:empty) { display: grid; gap: var(--esp-4); position: sticky; top: calc(var(--cabecera) + var(--esp-2)); align-self: start; }
  .para-ti:has(.lado-personas, .lado-amigos) .feed-personas { display: none; }
}
.para-ti-cab { display: grid; gap: var(--esp-3); margin: var(--esp-2) 0 var(--esp-5); }
.para-ti-titulo h1 { font-size: var(--tam-3xl); letter-spacing: -0.035em; line-height: 1.1; }
.para-ti.sin-actividad .para-ti-filtros { display: none; }
@media (max-width: 899px) { .para-ti-titulo h1 { font-size: var(--tam-2xl); } }

.feed { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); }
.feed-esq { height: 260px; border-radius: var(--radio-panel); }
.feed-fin { min-height: 1px; margin-top: var(--esp-4); }
.feed-final { display: flex; align-items: center; justify-content: center; gap: var(--esp-3); padding: var(--esp-8) 0; }
.feed-final .mascota { width: 56px; height: auto; color: var(--texto-3); }
.feed-seccion { font-size: var(--tam-s); font-weight: 600; color: var(--texto-2); margin: 0 0 var(--esp-3); }
.feed-titulo { font-size: var(--tam-xl); letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 var(--esp-4); }
.feed-filtro-vacio { display: grid; justify-items: center; gap: var(--esp-3); padding: var(--esp-10) 0; text-align: center; }
.feed-filtro-vacio .mascota { width: 72px; height: auto; color: var(--texto-3); }

/* Sin actividad: el hueco, con la mascota y el texto centrados. */
.vacio.feed-vacio { margin-top: 0; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--esp-2); padding: var(--esp-8) var(--esp-6); text-align: center; }
.vacio.feed-vacio .mascota { grid-row: auto; width: 96px; margin-bottom: var(--esp-2); }
.vacio.feed-vacio h2 { font-size: var(--tam-2xl); }
.vacio.feed-vacio p { margin: 0; }
.vacio.feed-vacio .fila-botones { justify-content: center; margin-top: var(--esp-4); }

/* Rejillas de carátulas: lo más visto entre la gente, o el muro para empezar. */
.descubre { padding-top: var(--esp-6); }
.descubre-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-6) var(--esp-3); }
@media (min-width: 560px) { .descubre-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .descubre-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-8) var(--esp-4); } }
.descubre-obra { display: flex; flex-direction: column; min-width: 0; }
.descubre-portada { display: block; width: 100%; aspect-ratio: 2 / 3; padding: 0; border-radius: var(--radio-tarjeta); overflow: hidden; background: var(--superficie); transition: transform var(--medio) var(--muelle); }
button.descubre-portada:hover { transform: translateY(-2px); }
button.descubre-portada:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.descubre-titulo { margin: var(--esp-2) 0 0; font-family: var(--fuente); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.descubre-linea { margin: 2px 0 var(--esp-3); }
.descubre-anadir, .descubre-tuya { margin-top: auto; align-self: stretch; }
.descubre-tuya { justify-content: center; height: 32px; }

/* Un suceso: quién arriba, la obra con su carátula grande, lo que ha dicho y su pie. */
.suceso-tarjeta { background: var(--superficie); border-radius: var(--radio-panel); padding: var(--esp-4); display: grid; gap: var(--esp-3); min-width: 0; }
.suceso-cab { min-width: 0; }
.suceso-quien { display: flex; align-items: center; gap: var(--esp-3); color: var(--texto); text-decoration: none; min-width: 0; }
.suceso-frase { min-width: 0; display: grid; gap: 1px; }
.suceso-nombre { margin: 0; font-size: var(--tam-m); line-height: 1.25; min-width: 0; }
.suceso-nombre > b, .suceso-nombre .nombre-marca { color: var(--texto); font-weight: 600; }
.suceso-frase .nombre-estilo { max-width: min(320px, 60vw); }
.suceso-meta { font-size: var(--tam-s); color: var(--texto-3); }
.suceso-verbo { color: var(--texto-2); }
.suceso-razon { display: inline-flex; align-items: center; gap: 3px; color: var(--acento); font-weight: 600; }
.suceso-razon .icono { width: 12px; height: 12px; }

.suceso-obra {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--esp-4); align-items: end; text-align: left;
  padding: 0; border-radius: var(--radio-tarjeta); color: inherit; min-width: 0;
}
.suceso-portada { aspect-ratio: 2 / 3; border-radius: var(--radio-tarjeta); overflow: hidden; background: var(--elevada); box-shadow: 0 0 0 1px color-mix(in srgb, var(--texto) 6%, transparent); }
.suceso-portada .cartel img { transition: transform 500ms var(--muelle); }
@media (hover: hover) { .suceso-obra:hover .suceso-portada .cartel img { transform: scale(1.04); } }
.suceso-info { display: grid; gap: var(--esp-2); align-content: end; min-width: 0; padding-bottom: var(--esp-1); }
.suceso-chips { display: flex; flex-wrap: wrap; gap: var(--esp-1); }
.suceso-titulo { font-size: var(--tam-xl); line-height: 1.15; letter-spacing: -0.025em; overflow-wrap: anywhere; margin: 0; }
.suceso-nota { display: flex; align-items: baseline; gap: var(--esp-2); flex-wrap: wrap; }
@media (min-width: 560px) {
  .suceso-obra { grid-template-columns: 148px minmax(0, 1fr); gap: var(--esp-5); }
  .suceso-titulo { font-size: var(--tam-2xl); }
}
.suceso-cita {
  margin: 0; padding: var(--esp-3) var(--esp-4); border-radius: var(--radio-tarjeta); background: var(--elevada);
  font-size: var(--tam-m); line-height: 1.5; color: var(--texto); white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.suceso-tarjeta > .pie-comentario { margin-top: calc(var(--esp-1) * -1); }
.suceso-anadir { justify-self: start; margin-left: calc(var(--esp-2) * -1); }

/* En el perfil, más compacta. */
.suceso-tarjeta.compacta { padding: var(--esp-3); gap: var(--esp-2); }
.suceso-tarjeta.compacta .suceso-obra { grid-template-columns: 72px minmax(0, 1fr); gap: var(--esp-3); align-items: center; }
/* En su propio perfil no hace falta repetir quién: solo qué y cuándo. */
.suceso-tarjeta.compacta .suceso-quien .avatar, .suceso-tarjeta.compacta .suceso-nombre { display: none; }
.suceso-tarjeta.compacta .suceso-titulo { font-size: var(--tam-l); }
.suceso-tarjeta.compacta .nota-grande b { font-size: var(--tam-2xl); }
.actividad-perfil { display: grid; gap: var(--esp-3); }
.sucesos { display: grid; gap: var(--esp-3); align-items: start; }
@media (min-width: 900px) { .sucesos { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } }
.suceso-esq { height: 120px; border-radius: var(--radio-tarjeta); }

/* Lo más valorado o comentado. */
.obra-destacada { border-radius: var(--radio-panel); padding: var(--esp-4); background: color-mix(in srgb, var(--acento) 9%, var(--superficie)); display: grid; gap: var(--esp-3); }
.obra-destacada-cab { display: flex; align-items: center; gap: var(--esp-2); font-size: var(--tam-s); font-weight: 600; color: var(--acento); }
.obra-destacada-cab .icono { width: 16px; height: 16px; }
.obra-destacada-cuerpo { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--esp-4); text-align: left; color: inherit; padding: 0; align-items: end; }
.obra-destacada-portada { aspect-ratio: 2 / 3; border-radius: var(--radio-tarjeta); overflow: hidden; background: var(--elevada); rotate: -2deg; box-shadow: 0 0 0 1px color-mix(in srgb, var(--texto) 8%, transparent); transition: rotate 400ms var(--muelle); }
@media (hover: hover) { .obra-destacada-cuerpo:hover .obra-destacada-portada { rotate: 0deg; } }
.obra-destacada-info { display: grid; gap: var(--esp-2); align-content: end; justify-items: start; min-width: 0; }
.obra-destacada-info h3 { font-size: var(--tam-2xl); letter-spacing: -0.03em; line-height: 1.1; margin: 0; overflow-wrap: anywhere; }
.obra-destacada-gente { display: flex; align-items: center; gap: var(--esp-2); min-width: 0; }
.obra-destacada-gente .sub { min-width: 0; }
.obra-destacada .pila-avatares .avatar { box-shadow: 0 0 0 2px color-mix(in srgb, var(--acento) 9%, var(--superficie)); }
@media (min-width: 560px) { .obra-destacada-cuerpo { grid-template-columns: 168px minmax(0, 1fr); gap: var(--esp-6); } }
@media (max-width: 559px) {
  .obra-destacada-cuerpo { grid-template-columns: 112px minmax(0, 1fr); }
  .obra-destacada-info h3 { font-size: var(--tam-xl); }
  .obra-destacada-gente { align-items: flex-start; }
}

/* Gente a la que seguir. */
.feed-personas { padding: var(--esp-4) 0; }
.tarjetas-persona { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--esp-3); }
.tarjetas-persona.carrusel-fila { display: flex; overflow-x: auto; margin: 0 calc(var(--lado) * -1); padding: 0 var(--lado) var(--esp-1); }
.tarjetas-persona.carrusel-fila .tarjeta-persona { flex: 0 0 168px; }
.tarjeta-persona {
  position: relative; display: grid; justify-items: center; gap: var(--esp-3); padding: 0 var(--esp-3) var(--esp-4);
  border-radius: var(--radio-panel); background: var(--superficie); overflow: hidden; text-align: center; min-width: 0;
}
.tarjeta-persona-banda { height: 52px; width: calc(100% + var(--esp-6)); background: var(--tema-usuario, var(--elevada)); }
.tarjeta-persona-enlace { display: grid; justify-items: center; gap: 2px; margin-top: -40px; color: var(--texto); text-decoration: none; min-width: 0; max-width: 100%; }
.tarjeta-persona-enlace .avatar.grande { box-shadow: 0 0 0 4px var(--superficie); margin-bottom: var(--esp-2); }
.tarjeta-persona-nombre { font-weight: 600; font-size: var(--tam-m); min-width: 0; max-width: 100%; }
.tarjeta-persona-nombre .nombre-estilo { max-width: 130px; }
.tarjeta-persona-detalle { font-size: var(--tam-xs); color: var(--texto-3); margin-top: var(--esp-1); }
.tarjeta-persona .boton.seguir { width: 100%; }

/* La columna de la derecha (escritorio): lo tuyo y gente. */
.lado-caja { background: var(--superficie); border-radius: var(--radio-panel); padding: var(--esp-4); display: grid; gap: var(--esp-1); }
.lado-persona { display: flex; align-items: center; gap: var(--esp-2); padding: var(--esp-2); margin: 0 calc(var(--esp-2) * -1); border-radius: var(--radio-tarjeta); min-width: 0; }
.lado-persona:hover { background: var(--estado-hover); }
.lado-persona-enlace { display: flex; align-items: center; gap: var(--esp-3); flex: 1; min-width: 0; color: var(--texto); text-decoration: none; }
.lado-persona-texto { display: grid; min-width: 0; font-weight: 600; }
.lado-persona-texto .nombre-estilo { max-width: 180px; }
.lado-persona-texto .amigos-linea, .lado-persona-motivo { font-weight: 400; font-size: var(--tam-xs); }
.lado-persona-motivo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lado-persona .boton.seguir { flex: none; }
.lado-caja .punto-viendo { box-shadow: 0 0 0 3px var(--superficie); }
.lado-persona:hover .punto-viendo { box-shadow: 0 0 0 3px color-mix(in srgb, var(--superficie) 94%, var(--texto)); }
.lado-caja > .boton { margin-top: var(--esp-2); }
.lado-titulo { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-2); margin: 0 calc(var(--esp-2) * -1); border-radius: var(--radio-tarjeta); color: var(--texto); text-align: left; min-width: 0; }
.lado-titulo:hover { background: var(--estado-hover); }
.lado-titulo-cartel { display: block; flex: none; width: 36px; aspect-ratio: 2 / 3; border-radius: var(--radio); overflow: hidden; }
.lado-titulo-cartel .cartel-titulo { font-size: 8px; }
.lado-titulo-texto { display: grid; gap: 2px; min-width: 0; }
.lado-titulo-nombre { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- Amigos */

body.dentro #vista > :is(.amigos-cab, .amigos-busca, .amigos-resultados, .amigos-inicio) { max-width: 760px; }
.amigos-cab { margin: var(--esp-2) 0 var(--esp-4); }
.amigos-cab h1 { font-size: var(--tam-3xl); letter-spacing: -0.035em; }
@media (max-width: 899px) { .amigos-cab h1 { font-size: var(--tam-2xl); } }
.amigos-busca { display: flex; align-items: center; position: relative; }
.amigos-busca > .icono { position: absolute; left: var(--esp-3); width: 18px; height: 18px; color: var(--texto-3); pointer-events: none; }
.amigos-busca .campo-texto { width: 100%; padding-left: 40px; background: var(--hundido); }
.amigos-inicio { display: grid; }
.amigos-seccion { min-width: 0; }
.amigos-titulo { font-size: var(--tam-s); font-weight: 600; color: var(--texto-2); margin: var(--esp-6) 0 var(--esp-2); }
.amigos-lista { display: grid; }
.amigos-ver-todos { justify-self: start; margin-top: var(--esp-2); }
.amigos-fila {
  display: flex; align-items: center; gap: var(--esp-3); min-height: 62px; padding: 0 var(--esp-2); margin: 0 calc(var(--esp-2) * -1);
  border-top: 1px solid var(--borde); border-radius: var(--radio-tarjeta); position: relative;
}
.amigos-fila:first-child, .amigos-titulo + .amigos-fila { border-top-color: transparent; }
.amigos-fila:hover { background: var(--estado-hover); border-top-color: transparent; }
.amigos-fila:hover + .amigos-fila { border-top-color: transparent; }
.amigos-persona { display: flex; align-items: center; gap: var(--esp-3); flex: 1; min-width: 0; color: var(--texto); text-decoration: none; padding: var(--esp-2) 0; }
.amigos-avatar { position: relative; flex: none; display: block; }
.punto-viendo { position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border-radius: 50%; background: var(--viendo); box-shadow: 0 0 0 3px var(--fondo); }
.amigos-fila:hover .punto-viendo { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fondo) 94%, var(--texto)); }
.amigos-texto { display: grid; min-width: 0; gap: 1px; }
.amigos-nombre { display: flex; align-items: center; gap: var(--esp-2); min-width: 0; font-weight: 600; font-size: var(--tam-m); }
.amigos-nombre .nombre-estilo { max-width: min(240px, 46vw); }
@media (max-width: 599px) { .amigos-nombre .te-sigue { display: none; } }
.candado-mini { width: 13px; height: 13px; color: var(--texto-3); flex: none; }
.amigos-linea { display: flex; align-items: center; gap: 5px; color: var(--texto-3); font-size: var(--tam-s); min-width: 0; }
.amigos-linea-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.amigos-linea-cuando { flex: none; font-variant-numeric: tabular-nums; }
.amigos-linea-cuando:empty { display: none; }
.amigos-linea-cuando::before { content: '· '; }
.amigos-linea .icono { width: 15px; height: 15px; flex: none; }
.amigos-linea.viendo .icono { color: var(--viendo); }
.amigos-linea b { font-weight: 600; flex: none; }
.amigos-acciones { display: flex; gap: var(--esp-2); flex: none; }
.amigos-redondo {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--elevada); color: var(--texto-2);
  transition: background var(--rapido), color var(--rapido), transform var(--rapido);
}
.amigos-redondo .icono { width: 18px; height: 18px; }
.amigos-redondo:hover { color: var(--texto); background: color-mix(in srgb, var(--elevada) 80%, var(--texto)); }
.amigos-redondo:active { transform: scale(0.92); }
.amigos-fila:hover .amigos-redondo { background: var(--hundido); }
.amigos-fila-esq { height: 52px; margin: 5px 0; }
.amigos-vacio { display: flex; align-items: center; gap: var(--esp-4); padding: var(--esp-3) 0; color: var(--texto-2); }
.amigos-vacio .mascota { width: 72px; height: auto; color: var(--texto-3); flex: none; }
.amigos-vacio p { margin: 0; }

.amigos-menu { display: grid; gap: var(--esp-1); }
.amigos-menu-cab { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--esp-3); align-items: center; padding-bottom: var(--esp-3); margin-bottom: var(--esp-2); border-bottom: 1px solid var(--borde); font-weight: 600; }
.amigos-menu-cab .avatar { grid-row: span 2; }
.amigos-opcion { display: flex; align-items: center; gap: var(--esp-3); height: 44px; padding: 0 var(--esp-3); border-radius: var(--radio-boton); font-weight: 500; color: var(--texto); text-align: left; }
.amigos-opcion:hover { background: var(--estado-hover); }
.amigos-opcion .icono { width: 20px; height: 20px; color: var(--texto-3); }
.amigos-opcion.peligro, .amigos-opcion.peligro .icono { color: var(--peligro); }

/* En el feed del móvil: tus amigos en burbujas, como las historias. */
.feed-personas-amigos { margin-bottom: var(--esp-4); }
.amigos-burbujas { display: flex; gap: var(--esp-3); overflow-x: auto; margin: 0 calc(var(--lado) * -1); padding: var(--esp-1) var(--lado); scrollbar-width: none; }
.amigos-burbujas::-webkit-scrollbar { display: none; }
.amigos-burbuja { display: grid; justify-items: center; gap: var(--esp-1); width: 72px; flex: none; color: var(--texto-2); text-decoration: none; }
.amigos-burbuja .punto-viendo { right: 0; bottom: 0; }
.amigos-burbuja-nombre { max-width: 100%; font-size: var(--tam-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- notificaciones */

.notis-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); margin: var(--esp-2) 0 var(--esp-4); }
.notis-cab h1 { font-size: var(--tam-3xl); letter-spacing: -0.035em; }
@media (max-width: 899px) { .notis-cab h1 { font-size: var(--tam-2xl); } }
body.dentro #vista > :is(.notis-cab, .notis-filtros, .notis, .notis-arriba), body.dentro #vista > .notis + .boton { max-width: min(720px, 100%); }
.notis-filtros { margin-bottom: var(--esp-5); scrollbar-width: none; }
.notis-filtros::-webkit-scrollbar { display: none; }
.notis-filtros .segmento { white-space: nowrap; }
/* Las solicitudes, arriba (solicitudes.mjs): sueltas o, con más de dos, en un grupo que se despliega. */
/* El mismo ancho que las tarjetas de la lista (que salen --esp-3 por cada lado). */
.notis-solicitudes { margin: 0 calc(var(--esp-3) * -1) var(--esp-4); padding: var(--esp-1) var(--esp-3); border-radius: var(--radio-tarjeta); background: var(--superficie); }
.notis-solicitudes-cabeza {
  display: flex; align-items: center; gap: var(--esp-3); width: 100%; padding: var(--esp-2) 0; border: 0; background: none;
  color: var(--texto); font: inherit; text-align: left; cursor: pointer;
}
.notis-solicitudes-cabeza:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: var(--radio); }
.notis-solicitudes-texto { display: grid; flex: 1; min-width: 0; }
.notis-solicitudes-flecha { width: 18px; height: 18px; color: var(--texto-3); transition: transform var(--rapido); }
.notis-solicitudes.abierto .notis-solicitudes-flecha { transform: rotate(45deg); }
.notis-solicitudes-lista { display: grid; gap: 2px; }
.notis-solicitudes-cabeza + .notis-solicitudes-lista { padding-bottom: var(--esp-1); }
.noti.solicitud { overflow: hidden; }
.notis { display: grid; gap: 2px; }
.notis-grupo { font-size: var(--tam-s); font-weight: 600; color: var(--texto-2); margin: var(--esp-5) 0 var(--esp-2); }
.notis-grupo:first-child { margin-top: 0; }
.noti {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--esp-3); align-items: center;
  padding: var(--esp-3); margin: 0 calc(var(--esp-3) * -1); border-radius: var(--radio-tarjeta); cursor: pointer; position: relative;
}
.noti:hover { background: var(--estado-hover); }
.noti:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.noti.nueva { background: var(--seleccion); }
.noti.nueva::before { content: ''; position: absolute; left: -2px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--acento); }
.noti-quien { position: relative; width: 44px; height: 44px; }
.noti-quien .avatar.mediano { width: 44px; height: 44px; }
.noti-marca {
  position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--acento); color: var(--sobre-acento); box-shadow: 0 0 0 3px var(--fondo);
}
.noti.nueva .noti-marca { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fondo) 84%, var(--acento)); }
.noti-marca .icono { width: 13px; height: 13px; }
.noti-marca.megusta { background: var(--corazon); color: #fff; }
.noti-marca.seguidor, .noti-marca.aceptada { background: var(--bien); color: var(--hundido); }
.noti-marca.insignia { background: var(--nivel-oro); color: #1d1503; }
.noti-texto { min-width: 0; display: grid; gap: 2px; }
.noti-texto > p { margin: 0; font-size: var(--tam-m); line-height: 1.35; color: var(--texto-2); }
.noti-texto .nombre-marca { color: var(--texto); font-weight: 600; }
.noti-cita { color: var(--texto-3) !important; font-size: var(--tam-s) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.noti-texto time { font-size: var(--tam-xs); }
.noti-derecha { display: flex; gap: var(--esp-2); align-items: center; }
.noti-caratula { width: 44px; aspect-ratio: 2 / 3; border-radius: var(--radio); overflow: hidden; padding: 0; background: var(--elevada); }
.noti-caratula .cartel-titulo { font-size: 8px; }
.noti-esq { height: 60px; margin: 4px 0; border-radius: var(--radio-tarjeta); }
/* Las novedades de wlst (src/novedades.mjs): en la lista, el logo y su imagen en pequeño; en el tablón «Novedades», enteras. */
.noti-wlst { place-items: end center; overflow: hidden; background: #0b64c6; color: #fff; }
.noti-wlst .mascota { width: 84%; height: auto; margin-bottom: -1px; }
.noti-novedad-mini { width: 64px; aspect-ratio: 16 / 9; border-radius: var(--radio); }
.tablon { display: grid; gap: var(--esp-4); }
.novedad { padding: var(--esp-4); border-radius: var(--radio-tarjeta); background: var(--elevada); scroll-margin-top: var(--esp-16); }
.novedad-imagen { display: block; width: 100%; height: auto; margin-bottom: var(--esp-4); border-radius: var(--radio); background: var(--superficie); }
.novedad-version { margin: 0; font-size: var(--tam-s); color: var(--texto-3); }
.novedad h2 { margin: var(--esp-1) 0 var(--esp-3); font-size: var(--tam-xl); letter-spacing: -0.02em; line-height: 1.15; }
.novedad-puntos { display: grid; gap: var(--esp-3); margin: 0; padding-left: var(--esp-5); font-size: var(--tam-m); line-height: 1.45; color: var(--texto-2); }
.novedad-puntos li::marker { color: var(--acento); }
@media (max-width: 499px) { .noti-derecha .boton.pequeno { padding: 0 var(--esp-2); } .noti { grid-template-columns: auto minmax(0, 1fr); } .noti-derecha { grid-column: 2; } .noti-derecha:has(.noti-caratula, .noti-novedad-mini) { grid-column: 3; grid-row: 1; } .noti:has(.noti-caratula, .noti-novedad-mini) { grid-template-columns: auto minmax(0, 1fr) auto; } }

/* ---------------------------------------------------------------- insignias */

.insignia-baldosa {
  display: grid; place-items: center; flex: none; border-radius: 10px; background: var(--hundido); color: var(--nivel, var(--texto-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nivel, var(--texto)) 22%, transparent); overflow: hidden;
}
.insignia-baldosa img { width: 74%; height: 74%; object-fit: contain; pointer-events: none; }
.insignia-baldosa .icono { width: 58%; height: 58%; }
.insignia-baldosa.mediana { width: 44px; height: 44px; border-radius: 10px; }
.insignia-baldosa.grande { width: 56px; height: 56px; border-radius: 12px; }
.nivel-bronce { --nivel: var(--nivel-bronce); }
.nivel-plata { --nivel: var(--nivel-plata); }
.nivel-oro { --nivel: var(--nivel-oro); }
.nivel-especial { --nivel: var(--nivel-especial); }
.insignia-baldosa.sin-arte { background: color-mix(in srgb, var(--nivel) 14%, var(--hundido)); }
.insignia-baldosa.bloqueada { filter: grayscale(1); opacity: 0.45; }
.pastilla.nivel-bronce, .pastilla.nivel-plata, .pastilla.nivel-oro, .pastilla.nivel-especial { color: var(--nivel); background: color-mix(in srgb, var(--nivel) 14%, transparent); }

/* Junto al nombre: pequeñas, sin baldosa ni borde, en la línea del texto; la
   del sello (Verificado o Afiliado), pegada al nombre. El globo con su nombre y su descripción
   flota sobre la página (ui/js/insignias.mjs lo coloca con --x y --y). */
.insignias-nombre { --ins: 18px; display: inline-flex; align-items: center; gap: 3px; flex: none; vertical-align: middle; }
.insignias-nombre:empty { display: none; }
.insignia-chica { display: grid; place-items: center; flex: none; width: var(--ins); height: var(--ins); color: var(--nivel-especial); }
.insignia-chica img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.insignia-chica .icono { width: 100%; height: 100%; }
.insignia-chica.insignia-sello { margin: 0 2px 0 -2px; }
.insignias-mas {
  height: var(--ins); padding: 0 6px; border-radius: var(--radio-pastilla); background: var(--superficie);
  color: var(--texto-3); font-size: var(--tam-xs); font-weight: 600; line-height: var(--ins); font-variant-numeric: tabular-nums;
}
.insignias-mas:hover { color: var(--texto); background: var(--elevada); }
.insignia-globo {
  position: fixed; left: var(--x); top: var(--y); z-index: 80; translate: -50% calc(-100% - 8px);
  display: grid; gap: 2px; max-width: min(260px, calc(100vw - 16px)); padding: var(--esp-2) var(--esp-3);
  border-radius: var(--radio-boton); background: var(--elevada); box-shadow: inset 0 0 0 1px var(--borde);
  color: var(--texto); font-size: var(--tam-s); line-height: 1.35; pointer-events: none;
}
.insignia-globo.abajo { translate: -50% 8px; }
.insignia-globo b { font-weight: 600; }
.insignia-globo span { color: var(--texto-2); font-size: var(--tam-xs); }

/* En filas (el editor del perfil y la hoja de «+N»): baldosa, nombre y descripción. */
.insignia-texto { display: grid; gap: 2px; flex: 1; min-width: 0; }
.insignia-texto small { color: var(--texto-3); font-size: var(--tam-s); }
.grupo-fila.falta .insignia-texto b { color: var(--texto-2); }
.insignia-fecha { font-size: var(--tam-xs); color: var(--texto-3); }
.elegir-insignias { display: grid; gap: var(--esp-3); }
.elegir-insignias-titulo { margin: var(--esp-3) 0 0; font-size: var(--tam-s); font-weight: 600; color: var(--texto-2); }
.elegir-insignias .interruptor:disabled { opacity: 0.6; }

/* La pestaña Insignias del perfil, como logros: tarjetas con el arte en grande. */
.logros { display: grid; gap: var(--esp-3); }
.logros-titulo { display: flex; align-items: center; gap: var(--esp-2); margin: var(--esp-3) 0 0; font-size: var(--tam-l); }
.logros-titulo:first-child { margin-top: 0; }
.logros-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--esp-2); }
.logro { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--esp-4); align-items: center; padding: var(--esp-4); border-radius: var(--radio-tarjeta); background: var(--superficie); }
.logro .insignia-baldosa.grande { width: 64px; height: 64px; background: none; box-shadow: none; }
.logro .insignia-baldosa img { width: 100%; height: 100%; }
.logro-texto { display: grid; gap: var(--esp-1); min-width: 0; }
.logro-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-2); }
.logro-cabeza h4 { margin: 0; font-size: var(--tam-m); font-weight: 600; }
.logro.falta h4 { color: var(--texto-2); }
.logro-descripcion { margin: 0; color: var(--texto-2); font-size: var(--tam-s); }
.logros-esq { height: 220px; border-radius: var(--radio-tarjeta); }
.insignia-progreso { display: flex; align-items: center; gap: var(--esp-2); margin-top: var(--esp-1); }
.insignia-progreso .sub { font-size: var(--tam-xs); flex: none; font-variant-numeric: tabular-nums; }
.insignia-progreso-pista { flex: 1; height: 6px; border-radius: 3px; background: var(--hundido); overflow: hidden; }
.insignia-progreso-lleno { height: 100%; width: calc(var(--avance, 0) * 100%); background: var(--acento); border-radius: inherit; }

/* Alto contraste: las tarjetas con su borde (ahí las capas son todas negras). */
:root[data-contraste] .suceso-tarjeta, :root[data-contraste] .obra-destacada, :root[data-contraste] .tarjeta-persona,
:root[data-contraste] .lado-caja, :root[data-contraste] .logro,
:root[data-contraste] .suceso-cita, :root[data-contraste] .notis-solicitudes, :root[data-contraste] .amigos-redondo,
:root[data-contraste] .insignia-baldosa { box-shadow: inset 0 0 0 1px var(--borde); }
:root[data-contraste] .noti.nueva { box-shadow: inset 0 0 0 2px var(--acento); }