/* ============================================================
   Click · Perfil modular V8
   - Lienzo único de 24 columnas en PC
   - Todas las tarjetas pueden cambiar de ancho
   - Feed e imágenes siempre oscuros dentro del perfil
   - Fondo artístico de música más visible
   ============================================================ */

@media(min-width:901px){
  body.profile-premium-v396 .profile-modular-layout,
  .profile-premium-v396 .profile-modular-layout{
    display:grid!important;
    grid-template-columns:clamp(285px,21vw,350px) minmax(0,1fr)!important;
    gap:18px!important;
    align-items:start!important;
  }

  body.profile-premium-v396 .profile-modular-fixed-column,
  .profile-premium-v396 .profile-modular-fixed-column{
    grid-column:1!important;
    min-width:0!important;
  }

  body.profile-premium-v396 .profile-modular-workspace,
  .profile-premium-v396 .profile-modular-workspace{
    grid-column:2!important;
    min-width:0!important;
    width:100%!important;
  }

  /* V8 elimina las columnas rígidas antiguas: JS migra todo al lienzo principal. */
  body.profile-premium-v396 .profile-modular-right-column,
  .profile-premium-v396 .profile-modular-right-column,
  body.profile-premium-v396 .profile-modular-zone-left,
  .profile-premium-v396 .profile-modular-zone-left{
    display:none!important;
  }

  body.profile-premium-v396 .profile-modular-zone-main,
  .profile-premium-v396 .profile-modular-zone-main{
    display:grid!important;
    grid-template-columns:repeat(24,minmax(0,1fr))!important;
    grid-auto-flow:dense!important;
    align-items:start!important;
    align-content:start!important;
    gap:14px!important;
    width:100%!important;
    min-width:0!important;
  }

  body.profile-premium-v396 .profile-modular-zone-main>.profile-modular-module,
  .profile-premium-v396 .profile-modular-zone-main>.profile-modular-module{
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    flex:none!important;
    grid-column:span 24!important;
  }

  body.profile-premium-v396 .profile-modular-zone-main>.profile-modular-module[data-module-size="mini"],
  .profile-premium-v396 .profile-modular-zone-main>.profile-modular-module[data-module-size="mini"]{grid-column:span 6!important}
  body.profile-premium-v396 .profile-modular-zone-main>.profile-modular-module[data-module-size="small"],
  .profile-premium-v396 .profile-modular-zone-main>.profile-modular-module[data-module-size="small"]{grid-column:span 8!important}
  body.profile-premium-v396 .profile-modular-zone-main>.profile-modular-module[data-module-size="medium"],
  .profile-premium-v396 .profile-modular-zone-main>.profile-modular-module[data-module-size="medium"]{grid-column:span 12!important}
  body.profile-premium-v396 .profile-modular-zone-main>.profile-modular-module[data-module-size="large"],
  .profile-premium-v396 .profile-modular-zone-main>.profile-modular-module[data-module-size="large"]{grid-column:span 16!important}
  body.profile-premium-v396 .profile-modular-zone-main>.profile-modular-module[data-module-size="xlarge"],
  .profile-premium-v396 .profile-modular-zone-main>.profile-modular-module[data-module-size="xlarge"]{grid-column:span 20!important}
  body.profile-premium-v396 .profile-modular-zone-main>.profile-modular-module[data-module-size="wide"],
  .profile-premium-v396 .profile-modular-zone-main>.profile-modular-module[data-module-size="wide"]{grid-column:span 24!important}

  /* Las tarjetas especiales ya no pueden imponer el viejo grid de 12 columnas. */
  body.profile-premium-v396 .profile-modular-zone-main>.profile-image-module-card[data-module-size],
  .profile-premium-v396 .profile-modular-zone-main>.profile-image-module-card[data-module-size],
  body.profile-premium-v396 .profile-modular-zone-main>.profile-spacer-card[data-module-size],
  .profile-premium-v396 .profile-modular-zone-main>.profile-spacer-card[data-module-size]{
    width:auto!important;
  }

  /* Alturas proporcionadas al ancho nuevo. */
  body.profile-premium-v396 .profile-image-module-card[data-module-size="mini"]{min-height:250px!important}
  body.profile-premium-v396 .profile-image-module-card[data-module-size="small"]{min-height:290px!important}
  body.profile-premium-v396 .profile-image-module-card[data-module-size="medium"]{min-height:340px!important}
  body.profile-premium-v396 .profile-image-module-card[data-module-size="large"]{min-height:390px!important}
  body.profile-premium-v396 .profile-image-module-card[data-module-size="xlarge"]{min-height:420px!important}
  body.profile-premium-v396 .profile-image-module-card[data-module-size="wide"]{min-height:450px!important}

  body.profile-premium-v396 .profile-spacer-card[data-module-size="mini"]{min-height:65px!important}
  body.profile-premium-v396 .profile-spacer-card[data-module-size="small"]{min-height:85px!important}
  body.profile-premium-v396 .profile-spacer-card[data-module-size="medium"]{min-height:110px!important}
  body.profile-premium-v396 .profile-spacer-card[data-module-size="large"]{min-height:140px!important}
  body.profile-premium-v396 .profile-spacer-card[data-module-size="xlarge"]{min-height:165px!important}
  body.profile-premium-v396 .profile-spacer-card[data-module-size="wide"]{min-height:190px!important}

  /* El botón de tamaño ahora muestra 1/4, 1/3, 1/2, etc. */
  body.profile-premium-v396 .profile-module-editor [data-module-size]{
    width:auto!important;
    min-width:38px!important;
    padding:0 7px!important;
    font-size:9px!important;
    letter-spacing:-.02em;
  }
  body.profile-premium-v396 .profile-module-editor [data-module-left],
  body.profile-premium-v396 .profile-module-editor [data-module-right]{display:grid!important}
}

@media(min-width:901px) and (max-width:1180px){
  body.profile-premium-v396 .profile-modular-layout,
  .profile-premium-v396 .profile-modular-layout{
    grid-template-columns:260px minmax(0,1fr)!important;
    gap:14px!important;
  }
  body.profile-premium-v396 .profile-modular-zone-main,
  .profile-premium-v396 .profile-modular-zone-main{gap:12px!important}
  body.profile-premium-v396 .profile-modular-zone-main>.profile-modular-module[data-module-size="mini"]{grid-column:span 8!important}
  body.profile-premium-v396 .profile-modular-zone-main>.profile-modular-module[data-module-size="small"]{grid-column:span 10!important}
}

/* ============================================================
   Perfil siempre oscuro en sus tarjetas de contenido.
   El selector NO depende de data-theme: funciona en modo claro y oscuro.
   ============================================================ */
body.profile-premium-v396 .profile-image-module-card{
  background:linear-gradient(155deg,rgba(40,29,82,.94),rgba(18,14,42,.96))!important;
  border-color:rgba(142,113,224,.28)!important;
  color:#f7f3ff!important;
  box-shadow:0 16px 35px rgba(0,0,0,.22)!important;
}
body.profile-premium-v396 .profile-image-module-card.fit-contain .profile-image-card-stage img{
  background:rgba(10,8,28,.34)!important;
}
body.profile-premium-v396 .profile-image-module-empty{color:#c9bfdd!important}
body.profile-premium-v396 .profile-image-module-empty>span{color:#bca5ff!important}
body.profile-premium-v396 .profile-image-module-empty strong{color:#fff!important}
body.profile-premium-v396 .profile-image-module-empty small{color:#bcb2cf!important}

body.profile-premium-v396 .profile-v396-feed-panel{
  background:linear-gradient(155deg,rgba(50,42,105,.96),rgba(22,18,58,.97))!important;
  border-color:rgba(255,255,255,.10)!important;
  color:#f6f3ff!important;
  box-shadow:0 18px 42px rgba(4,4,20,.24)!important;
}
body.profile-premium-v396 .profile-v396-tabs{
  background:transparent!important;
  border-color:rgba(255,255,255,.09)!important;
}
body.profile-premium-v396 .profile-v396-tabs a{color:#bdb5d2!important}
body.profile-premium-v396 .profile-v396-tabs a.active{
  background:rgba(126,87,235,.24)!important;
  color:#eee8ff!important;
  border-color:#956fff!important;
}
body.profile-premium-v396 .profile-v396-feed-panel .post-card,
body.profile-premium-v396 .profile-v396-post-grid .post-card{
  background:#111329!important;
  border:1px solid rgba(255,255,255,.10)!important;
  color:#f6f3ff!important;
  box-shadow:0 12px 30px rgba(5,5,24,.26)!important;
}
body.profile-premium-v396 .profile-v396-feed-panel .post-head,
body.profile-premium-v396 .profile-v396-feed-panel .post-body{
  background:transparent!important;
  color:#f5f2ff!important;
}
body.profile-premium-v396 .profile-v396-feed-panel .post-author a strong,
body.profile-premium-v396 .profile-v396-feed-panel .post-author strong{color:#fff!important}
body.profile-premium-v396 .profile-v396-feed-panel .post-author span,
body.profile-premium-v396 .profile-v396-feed-panel .post-stats{color:#aaa5bf!important}
body.profile-premium-v396 .profile-v396-feed-panel .post-stats{
  background:#111329!important;
  border-color:rgba(255,255,255,.08)!important;
}
body.profile-premium-v396 .profile-v396-feed-panel .post-actions{
  background:#0d0f22!important;
  border-color:rgba(255,255,255,.08)!important;
}
body.profile-premium-v396 .profile-v396-feed-panel .post-actions button{
  background:transparent!important;
  color:#bcb5d0!important;
}
body.profile-premium-v396 .profile-v396-feed-panel .post-actions button:hover{
  background:rgba(255,255,255,.07)!important;
  color:#fff!important;
}
body.profile-premium-v396 .profile-v396-feed-panel .post-actions .liked{color:#ff7398!important}
body.profile-premium-v396 .profile-v396-feed-panel .comments,
body.profile-premium-v396 .profile-v396-feed-panel .comment-form{
  background:#0d0f22!important;
  border-color:rgba(255,255,255,.08)!important;
}
body.profile-premium-v396 .profile-v396-feed-panel .comment-content{
  background:#1c1d3b!important;
  color:#f4f1ff!important;
  border:1px solid rgba(255,255,255,.07)!important;
}
body.profile-premium-v396 .profile-v396-feed-panel .comment-content strong,
body.profile-premium-v396 .profile-v396-feed-panel .comment-content a strong{color:#fff!important}
body.profile-premium-v396 .profile-v396-feed-panel .comment-content small{color:#aaa5bd!important}
body.profile-premium-v396 .profile-v396-feed-panel .comment-form input{
  background:#171831!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.12)!important;
}
body.profile-premium-v396 .profile-v396-feed-panel .post-delete-button{
  background:#3b2438!important;
  color:#ffb6ca!important;
}
body.profile-premium-v396 .profile-v396-empty,
body.profile-premium-v396 .profile-v396-info-panel{
  background:#111329!important;
  color:#f5f2ff!important;
  border-color:rgba(255,255,255,.09)!important;
}

/* ============================================================
   Música: la imagen elegida debe sentirse como fondo real del reproductor.
   ============================================================ */
body.profile-premium-v396 .profile-music-card.has-artwork .profile-music-card-backdrop{
  opacity:.82!important;
  filter:blur(10px) saturate(1.38) contrast(1.04) brightness(.92)!important;
  transform:scale(1.075)!important;
}
body.profile-premium-v396 .profile-music-card.has-artwork::before{
  background:
    linear-gradient(135deg,rgba(16,8,48,.58),rgba(58,22,122,.47) 54%,rgba(137,54,211,.34)),
    radial-gradient(circle at 84% 14%,rgba(255,255,255,.20),transparent 28%)!important;
}
body.profile-premium-v396 .profile-music-card.has-artwork .profile-music-card-surface{
  padding:10px!important;
  border-radius:22px!important;
  background:linear-gradient(135deg,rgba(16,9,44,.28),rgba(91,41,168,.18))!important;
  border:1px solid rgba(255,255,255,.10)!important;
  backdrop-filter:blur(3px)!important;
  -webkit-backdrop-filter:blur(3px)!important;
}
body.profile-premium-v396 .profile-music-card.has-artwork .profile-music-artwork{
  box-shadow:0 14px 32px rgba(9,5,29,.34),0 0 0 1px rgba(255,255,255,.13)!important;
}
body.profile-premium-v396 .profile-music-card.has-artwork .profile-music-progress-track{
  background:rgba(255,255,255,.18)!important;
}

@media(max-width:900px){
  body.profile-premium-v396 .profile-modular-zone-main,
  .profile-premium-v396 .profile-modular-zone-main{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  body.profile-premium-v396 .profile-modular-zone-main>.profile-modular-module[data-module-size],
  .profile-premium-v396 .profile-modular-zone-main>.profile-modular-module[data-module-size]{
    grid-column:1/-1!important;
    width:100%!important;
  }
}


/* === V8.1 masonry independiente: evita huecos verticales por filas altas === */
@media(min-width:901px){
  body.profile-premium-v396 .profile-modular-zone-main,
  .profile-premium-v396 .profile-modular-zone-main{
    grid-auto-rows:8px!important;
    grid-auto-flow:dense!important;
    align-items:start!important;
    align-content:start!important;
  }
  body.profile-premium-v396 .profile-modular-zone-main>.profile-modular-module,
  .profile-premium-v396 .profile-modular-zone-main>.profile-modular-module{
    align-self:start!important;
    min-height:0;
  }
}

/* V8.1 · Movimiento horizontal seguro dentro del lienzo de 24 columnas. */
@media(min-width:901px){
  body.profile-premium-v396 .profile-module-editor,
  .profile-premium-v396 .profile-module-editor{max-width:min(430px,calc(100% - 16px))!important}
  body.profile-premium-v396 .profile-module-editor [data-module-left],
  body.profile-premium-v396 .profile-module-editor [data-module-right],
  .profile-premium-v396 .profile-module-editor [data-module-left],
  .profile-premium-v396 .profile-module-editor [data-module-right]{display:grid!important}
}

/* ============================================================
   V8.2 · Zona bajo la bio + tarjetas compactas + edición estable
   ============================================================ */
@media(min-width:901px){
  /* Recupera la columna que vive debajo de la tarjeta de identidad. */
  body.profile-premium-v396 .profile-modular-zone-left,
  .profile-premium-v396 .profile-modular-zone-left{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
    align-content:start!important;
    width:100%!important;
    min-width:0!important;
  }

  body.profile-premium-v396 .profile-modular-zone-left>.profile-modular-module,
  .profile-premium-v396 .profile-modular-zone-left>.profile-modular-module{
    width:100%!important;
    max-width:none!important;
    grid-column:1/-1!important;
    grid-row:auto!important;
    min-height:0!important;
  }

  /* En organizar perfil se ve claramente que esta zona acepta tarjetas. */
  body.profile-premium-v396 .profile-v396-shell.is-organizing .profile-modular-zone-left:empty,
  .profile-premium-v396 .profile-v396-shell.is-organizing .profile-modular-zone-left:empty{
    min-height:74px!important;
    border:1px dashed rgba(214,195,255,.42)!important;
    border-radius:16px!important;
    background:rgba(70,41,132,.12)!important;
  }
  body.profile-premium-v396 .profile-v396-shell.is-organizing .profile-modular-zone-left:empty::before,
  .profile-premium-v396 .profile-v396-shell.is-organizing .profile-modular-zone-left:empty::before{
    content:"← Puedes colocar tarjetas debajo de tu bio";
    display:grid;
    place-items:center;
    min-height:74px;
    padding:12px;
    color:rgba(238,229,255,.72);
    font-size:10px;
    font-weight:900;
    text-align:center;
  }

  /* Elimina alturas mínimas heredadas que dejaban grandes huecos visuales. */
  body.profile-premium-v396 .profile-modular-zone-main>.profile-modular-module:not(.profile-spacer-card),
  .profile-premium-v396 .profile-modular-zone-main>.profile-modular-module:not(.profile-spacer-card),
  body.profile-premium-v396 .profile-modular-zone-left>.profile-modular-module:not(.profile-spacer-card),
  .profile-premium-v396 .profile-modular-zone-left>.profile-modular-module:not(.profile-spacer-card){
    min-height:0!important;
    height:auto!important;
  }

  body.profile-premium-v396 .profile-image-module-card:not(.is-empty),
  .profile-premium-v396 .profile-image-module-card:not(.is-empty){
    min-height:0!important;
  }
  body.profile-premium-v396 .profile-image-module-card:not(.is-empty) .profile-image-card-stage,
  .profile-premium-v396 .profile-image-module-card:not(.is-empty) .profile-image-card-stage{
    min-height:0!important;
    height:auto!important;
  }
  body.profile-premium-v396 .profile-image-module-card:not(.is-empty) .profile-image-card-stage img,
  .profile-premium-v396 .profile-image-module-card:not(.is-empty) .profile-image-card-stage img{
    min-height:0!important;
    height:auto!important;
  }

  body.profile-premium-v396 .profile-music-card,
  .profile-premium-v396 .profile-music-card{
    min-height:0!important;
  }

  /* En la zona de bio las flechas horizontales siguen visibles. */
  body.profile-premium-v396 .profile-modular-zone-left .profile-module-editor [data-module-left],
  body.profile-premium-v396 .profile-modular-zone-left .profile-module-editor [data-module-right],
  .profile-premium-v396 .profile-modular-zone-left .profile-module-editor [data-module-left],
  .profile-premium-v396 .profile-modular-zone-left .profile-module-editor [data-module-right]{
    display:grid!important;
  }
}


/* ============================================================
   V8.3 · Columna fija bajo BIO / seguidores
   Esta zona forma parte real del organizador. Todas sus tarjetas
   usan exactamente el ancho de la tarjeta de identidad.
   ============================================================ */
@media(min-width:901px){
  body.profile-premium-v396 .profile-modular-fixed-column,
  .profile-premium-v396 .profile-modular-fixed-column{
    align-content:start!important;
  }

  body.profile-premium-v396 .profile-modular-zone-left,
  .profile-premium-v396 .profile-modular-zone-left{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-flow:row!important;
    grid-auto-rows:auto!important;
    gap:14px!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
  }

  body.profile-premium-v396 .profile-modular-zone-left>.profile-modular-module,
  .profile-premium-v396 .profile-modular-zone-left>.profile-modular-module{
    grid-column:1/-1!important;
    grid-row:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    height:auto!important;
    align-self:start!important;
  }

  /* En esta columna el ancho no se cambia: siempre coincide con BIO. */
  body.profile-premium-v396 .profile-modular-zone-left .profile-module-editor [data-module-size],
  .profile-premium-v396 .profile-modular-zone-left .profile-module-editor [data-module-size]{
    display:none!important;
  }

  /* El área se mantiene identificable mientras se organiza, aun vacía. */
  body.profile-premium-v396 .profile-v396-shell.is-organizing .profile-modular-zone-left,
  .profile-premium-v396 .profile-v396-shell.is-organizing .profile-modular-zone-left{
    min-height:76px!important;
  }
  body.profile-premium-v396 .profile-v396-shell.is-organizing .profile-modular-zone-left:empty,
  .profile-premium-v396 .profile-v396-shell.is-organizing .profile-modular-zone-left:empty{
    border:1px dashed rgba(214,195,255,.48)!important;
    border-radius:16px!important;
    background:rgba(70,41,132,.14)!important;
  }
  body.profile-premium-v396 .profile-v396-shell.is-organizing .profile-modular-zone-left:empty::before,
  .profile-premium-v396 .profile-v396-shell.is-organizing .profile-modular-zone-left:empty::before{
    content:"← Zona para tarjetas debajo de tu bio"!important;
    display:grid!important;
    place-items:center!important;
    min-height:76px!important;
    padding:12px!important;
    color:rgba(242,235,255,.80)!important;
    font-size:10px!important;
    font-weight:900!important;
    text-align:center!important;
  }
}


/* Stable grid: reserve measured rows before allowing the compact layout. */
@media(min-width:901px){
  body.profile-premium-v396 .profile-modular-zone-main:not([data-profile-grid-ready="1"]),
  .profile-premium-v396 .profile-modular-zone-main:not([data-profile-grid-ready="1"]){
    grid-auto-rows:auto!important;
    grid-auto-flow:row dense!important;
  }
  body.profile-premium-v396 .profile-modular-zone-main[data-profile-grid-ready="1"],
  .profile-premium-v396 .profile-modular-zone-main[data-profile-grid-ready="1"]{
    grid-auto-rows:8px!important;
    grid-auto-flow:row!important;
    align-items:start!important;
    align-content:start!important;
  }
  body.profile-premium-v396 .profile-modular-zone-main>.profile-modular-module,
  .profile-premium-v396 .profile-modular-zone-main>.profile-modular-module{
    position:relative!important;
    inset:auto!important;
    height:auto!important;
    margin:0!important;
    box-sizing:border-box!important;
  }
}