/* ============================================================
   profile-skin.css — estilo ÚNICO del perfil v2 (clases .pfx-*).
   Cargado por la app (ficha pública) y por el admin (preview) → réplica
   exacta. Autocontenido: solo usa las variables --pfx-* que inyecta
   ProfileRender.vars(). No depende de app.css ni de base.css.
   ============================================================ */
.pfx{background:var(--pfx-bg,#fff);color:var(--pfx-text,#111);font-family:var(--pfx-font,sans-serif);
  padding:0;display:flex;flex-direction:column;gap:var(--pfx-gap,14px)}
.pfx-row{display:grid;gap:var(--pfx-gap,14px);align-items:start}
.pfx-row-heading{padding-left:var(--pfx-pad-heading,16px);padding-right:var(--pfx-pad-heading,16px)}
.pfx-row-heading:first-child{padding-top:var(--pfx-pad-heading,16px)}
.pfx-row-grid{padding-left:var(--pfx-pad-grid,16px);padding-right:var(--pfx-pad-grid,16px)}
.pfx-row-grid:first-child{padding-top:var(--pfx-pad-grid,16px)}
.pfx-row-grid:last-child{padding-bottom:var(--pfx-pad-grid,16px)}
.pfx-row.has-dividers{column-gap:0px;}
.pfx-row.has-dividers>.pfx-cell{padding-left:calc(var(--pfx-gap,14px)/2);padding-right:calc(var(--pfx-gap,14px)/2);}
.pfx-row.has-dividers>.pfx-cell:first-child{padding-left:0;}
.pfx-row.has-dividers>.pfx-cell:last-child{padding-right:0;}
.pfx-row.has-dividers>.pfx-cell:not(:last-child){border-right:var(--pfx-line,1px) solid color-mix(in srgb,var(--pfx-text) 15%,transparent);}
.pfx-cell{min-width:0;display:flex;flex-direction:column;height:100%;justify-content:flex-start;}
.pfx-el-wrap{display:flex;flex-direction:column;width:100%;box-sizing:border-box;}

.pfx-avatar{width:96px;height:96px;object-fit:cover;border-radius:50%;display:block}
.pfx-avatar.sq{border-radius:8px}
.pfx-avatar.ph{display:grid;place-items:center;font-weight:800;font-size:32px;
  background:color-mix(in srgb,var(--pfx-accent,#888) 25%,transparent);color:var(--pfx-accent,#888)}

.pfx-username{margin:0;color:var(--pfx-text);font-size:20px;font-weight:800;word-break:break-word}
.pfx-bio{white-space:pre-wrap;word-break:break-word;line-height:1.5}

.pfx-stats{display:flex;gap:22px;flex-wrap:wrap;width:100%}
.pfx-stats.align-left{justify-content:flex-start}
.pfx-stats.align-center{justify-content:center}
.pfx-stats.align-right{justify-content:flex-end}
.pfx-stats.dir-vertical.align-left{align-items:flex-start;text-align:left}
.pfx-stats.dir-vertical.align-center{align-items:center;text-align:center}
.pfx-stats.dir-vertical.align-right{align-items:flex-end;text-align:right}
.pfx-stats.dir-vertical{flex-direction:column;gap:12px;align-items:flex-start}
.pfx-stats.dir-horizontal{flex-direction:row;gap:22px;align-items:center}
.pfx-stat{display:flex;flex-direction:column;line-height:1.15}
.pfx-stat b{font-size:18px}
.pfx-stat span{font-size:12px;color:color-mix(in srgb,var(--pfx-text) 55%,transparent)}
.pfx-stat[onclick]{cursor:pointer}
.pfx-stat.style-icons{flex-direction:row;align-items:center;gap:8px}
.pfx-stat.style-icons i{font-size:18px;color:color-mix(in srgb,var(--pfx-text) 65%,transparent);display:inline-flex;align-items:center}
.pfx-stat.style-labels{flex-direction:row;align-items:center;gap:6px}
.pfx-stat.style-labels span{font-size:12px;color:color-mix(in srgb,var(--pfx-text) 55%,transparent)}
.pfx-stat[onclick]:hover{opacity:0.8}

.pfx-img{width:100%;height:100%;min-height:120px;object-fit:cover;border-radius:var(--pfx-radius,0);display:block}
.pfx-spacer{min-height:var(--pfx-gap,14px)}

.pfx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--pfx-grid-gap,0px)}
.pfx-gcell{aspect-ratio:1;overflow:hidden;border-radius:var(--pfx-radius,0);cursor:pointer}
.pfx-gcell img{width:100%;height:100%;object-fit:cover;display:block}
.pfx-empty{padding:24px;text-align:center;color:color-mix(in srgb,var(--pfx-text) 55%,transparent)}

/* Estilos de rejilla (posts) para compatibilidad WYSIWYG en admin y renderizado v2 scoped under .pfx */
.pfx .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pfx-grid-gap, 0px); }
.pfx .grid.cols-1, .pfx .cols-1 { grid-template-columns: repeat(1, 1fr) !important; }
.pfx .grid.cols-2, .pfx .cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.pfx .grid.cols-3, .pfx .cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.pfx .grid.cols-4, .pfx .cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
.pfx .grid img { width: 100%; aspect-ratio: 1; object-fit: cover; cursor: pointer; }
.pfx .grid-cell { position: relative; aspect-ratio: 1; overflow: hidden; cursor: pointer; border-radius: var(--pfx-radius, 0); }
.pfx .grid-cell img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; display: block; }
.pfx .grid-multi { position: absolute; top: 6px; inset-inline-end: 6px; color: #fff; font-size: 15px; text-shadow: 0 1px 3px rgba(0,0,0,.7); pointer-events: none; }

.pfx .pf-grid-mosaic .grid { grid-auto-rows: 1fr; grid-auto-flow: dense; }
.pfx .pf-grid-mosaic .grid img { aspect-ratio: auto; height: 100%; min-height: 110px; object-fit: cover; }
.pfx .pf-grid-mosaic .grid > *:nth-child(5n+1) { grid-column: span 2; grid-row: span 2; }

.pfx .pf-grid-polaroid .grid { grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 6px 2px; }
.pfx .pf-grid-polaroid .grid img {
  border: 7px solid #fff; border-bottom-width: 26px;
  box-shadow: 0 3px 10px rgba(0,0,0,.22);
  transform: rotate(-1.5deg);
}
.pfx .pf-grid-polaroid .grid > *:nth-child(2n) { transform: rotate(1.5deg); }

.pfx .pf-grid-isotope .grid { display: block; gap: 0; }
.pfx .pf-grid-isotope .grid-cell { width: 33.333%; aspect-ratio: auto; height: auto; float: left; }
.pfx .pf-grid-isotope .grid-cell img { width: 100%; height: auto; aspect-ratio: auto; object-fit: cover; }