/* DSP · perfiles y navegación móvil v15.
   Respeta el ancho real del home y conserva la navegación lateral táctil. *//* El #home tiene márgenes negativos a propósito para ocupar el ancho de la
   pantalla. No se le puede aplicar max-width:100%: recorta el lado derecho. */
#home{
  width: auto !important;
  max-width: none !important;
  min-width: 0;
}/* Categorías: tres botones completos por vista en móvil; desliza por grupos
   sin romper el ancho de la página ni esconder el primer botón. *//* El último bloque deja sitio a una tercera columna vacía cuando hacen falta
   solo dos categorías; así nunca termina con un botón cortado. *//* Snap de tres en tres: los chips de la fila siguiente jamás sobresalen
   en los extremos del estado reposado. *//* Perfil tipo red social: avatar y estadísticas comparten la primera fila.
   Nombre, acciones y galería siguen en filas ordenadas y compactas. */
#profile .profile-hero{
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr) !important;
  grid-auto-rows: auto;
  align-items: center !important;
  column-gap: 14px !important;
  row-gap: 7px !important;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 14px 0 18px !important;
  text-align: left !important;
}
#profile .profile-hero > .avatar{
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  width: 86px !important;
  height: 86px !important;
  margin: 0 !important;
  border: 3px solid #ff984f;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #ff8a321c, 0 8px 24px #0006;
}
#profile .profile-stats{
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: 100%;
  margin: 0 !important;
  padding: 10px 3px !important;
  border: 1px solid #ffffff21;
  border-radius: 16px;
  background: rgba(19, 17, 20, .73);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
#profile .profile-stats[hidden]{ display: none !important; }
#profile .profile-stat{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 60px !important;
  margin: 0 !important;
  padding: 3px 2px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
}
#profile .profile-stat + .profile-stat{ border-left: 1px solid #ffffff25 !important; }
#profile .profile-stat b{
  display: block;
  font-size: clamp(17px, 5vw, 22px) !important;
  line-height: 1.05 !important;
  color: #fff !important;
}
#profile .profile-stat span{
  display: block;
  margin-top: 5px;
  font-size: clamp(9px, 2.5vw, 11px) !important;
  line-height: 1.13 !important;
  font-weight: 600;
  color: #e6d8d1 !important;
  overflow-wrap: normal !important;
  word-break: normal;
}
#profile .profile-hero > h2{
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  align-self: end !important;
  margin: 7px 0 0 !important;
  font-size: clamp(21px, 5.8vw, 27px) !important;
  line-height: 1.12 !important;
  overflow-wrap: anywhere;
}
#profile .profile-hero > p{
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  align-self: start !important;
  margin: 0 0 8px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere;
}
#profile .profile-account-row{
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px;
  width: 100%;
  min-width: 0;
}
#profile .profile-auth-actions{
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-self: stretch !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}
#profile .profile-auth-actions:not(.single){
  grid-column: 1 / -1 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
#profile .profile-auth-actions > button,
#profile .profile-signout,
#profile .profile-tools .small-btn{
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 44px !important;
  max-height: none !important;
  padding: 9px 8px !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  border-radius: 13px !important;
  white-space: normal !important;
  text-align: center;
}
#profile .profile-auth-actions.single{ grid-column: 1 !important; }
#profile .profile-signout{
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  color: #ffd5bc !important;
  background: rgba(29, 26, 27, .90) !important;
  border: 1px solid #8e573c !important;
  box-shadow: none !important;
}
#profile .profile-signout[hidden]{ display: none !important; }
#profile .profile-tools{
  grid-column: 1 / -1 !important;
  grid-row: 5 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  margin: 4px 0 7px !important;
}
#profile .profile-tools[hidden]{ display: none !important; }
#profile .profile-tools .small-btn{ font-size: 12px !important; }
#profile .profile-tools .ui-icon{ flex: 0 0 auto; }
#profile .profile-grid{
  grid-column: 1 / -1 !important;
  grid-row: 6 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: 9px !important;
  border-radius: 18px !important;
  border: 1px solid #76503d66;
  background: linear-gradient(135deg, rgba(30, 24, 26, .81), rgba(10, 10, 13, .84));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 28px #0005;
}
#profile .profile-grid[hidden]{ display: none !important; }
#profile .profile-grid button{
  display: block;
  width: 100%;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #ffffff24;
  border-radius: 12px;
  background: linear-gradient(145deg,#40302d,#171518);
  box-shadow: 0 5px 12px #0008;
}
#profile .profile-grid img{ width: 100%; height: 100%; object-fit: cover; }
.social-post-media{
  overflow: hidden;
  background: linear-gradient(135deg,#302a2b,#171519) !important;
  box-shadow: 0 9px 25px #0005 !important;
  border: 1px solid #8c634b80 !important;
}
#dspPostPreview{ max-width: 100%; object-fit: contain !important; }

@media (max-width: 360px) {
#profile .profile-hero{ grid-template-columns: 74px minmax(0, 1fr) !important; gap: 7px 10px !important; }
#profile .profile-hero > .avatar{ width: 72px !important; height: 72px !important; }
#profile .profile-stat b{ font-size: 17px !important; }
#profile .profile-stat span{ font-size: 9px !important; }
#profile .profile-grid{ gap: 6px !important; padding: 7px !important; }
}
@media (min-width: 700px) {
#profile .profile-hero{ grid-template-columns: 112px minmax(0, 1fr) !important; column-gap: 24px !important; }
#profile .profile-hero > .avatar{ width: 108px !important; height: 108px !important; }
#profile .profile-stats{ max-width: 440px; padding: 15px 8px !important; }
#profile .profile-stat span{ font-size: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
#profile .profile-grid img{ transition: none; } }