/* Perfil (/perfil, /perfil/:slug, /amigos/:slug). Valores medidos de la demo; reglas genéricas con alcance .profile / .pf-friends. */

/* ---- columna izquierda ---- */
.pf-photo { display: block; margin-bottom: 14px; padding: 3px; background: #fff; border: 1px solid #ccc; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.pf-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.profile .visits { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #666; }
.profile .visits .ico { color: #5a87b8; }
.profile .visits b { color: #333; }
.pf-nets dt { margin-top: 8px; font-size: 11px; font-weight: 700; color: #555; }
.pf-nets dd { margin: 1px 0 0; font-size: 11px; }
.pf-unfriend { margin-top: 18px; font-size: 11px; }
.pf-unfriend .linkbtn { color: #999; }
.pf-unfriend .linkbtn:hover { color: #c0392b; }

/* ---- cabecera ---- */
.pf-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pf-name { font-size: 24px; font-weight: 400; line-height: 1.15; color: #222; }
.pf-rel { margin-top: 2px; font-size: 12px; color: var(--muted); }
.pf-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: 11.5px; }
.pf-links .sep { color: #ccc; }

/* ---- estado ---- */
.pf-status { position: relative; margin-top: 12px; padding: 10px 12px; background: #f3f3f3; border: 1px solid #e2e2e2; border-radius: 4px; }
.pf-status:before { content: ""; position: absolute; top: -7px; left: 22px; border: 7px solid transparent; border-top: 0; border-bottom-color: #e2e2e2; }
.pf-status:after { content: ""; position: absolute; top: -6px; left: 23px; border: 6px solid transparent; border-top: 0; border-bottom-color: #f3f3f3; }
.pf-status .txt { font-size: 16px; color: #333; overflow-wrap: anywhere; }
.pf-status .meta { margin-left: 6px; font-size: 11px; color: var(--muted); }
.pf-statusform { display: flex; align-items: center; gap: 6px; }
.pf-statusform .inp { flex: 1; font-size: 13px; padding: 6px 7px; }
.profile .cmts { margin-top: 6px; padding: 2px 8px; background: #f2f5f8; border-radius: 3px; }
.profile .cmt { display: flex; gap: 7px; padding: 6px 0; font-size: 11.5px; border-bottom: 1px solid #e3e9ef; }
.profile .cmt:last-child { border-bottom: 0; }
.profile .cmt img { width: 28px; height: 28px; }
.profile .cmt .meta { margin-top: 0; font-size: 10.5px; color: var(--muted); }
.profile .cmt-form { display: flex; align-items: flex-start; gap: 6px; padding: 7px 0; }
.profile .cmt-form img { width: 28px; height: 28px; }
.profile .cmt-form .ta { flex: 1; height: 30px; min-height: 30px; font-size: 11.5px; }

/* ---- secciones: espacio personal / tablón ---- */
.profile .pf-sec { margin-top: 22px; }
.profile .pf-sec > h3 { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; padding-bottom: 5px; font-size: 15px; font-weight: 700; color: #333; border-bottom: 1px solid #ddd; }
.profile .pf-sec > h3 a, .profile .pf-sec > h3 button { font-size: 11px; font-weight: 400; }
.profile .entry { padding: 8px 0; border-bottom: 1px solid #eee; }
.profile .entry h4 { font-size: 13px; color: var(--link); }
.profile .entry .meta { margin-left: 6px; font-size: 11px; font-weight: 400; color: var(--muted); }
.profile .entry p { margin: 4px 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.profile .fi-video { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.profile .entry .fi-video { margin-top: 6px; }
.profile .vthumb { position: relative; display: block; flex: none; padding: 2px; background: #fff; border: 1px solid #ccc; }
.profile .vthumb img { width: 120px; height: 68px; object-fit: cover; }
.profile .vthumb .play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.profile .vthumb .play span { display: grid; place-items: center; width: 30px; height: 30px; background: rgba(0,0,0,.55); border: 2px solid #fff; border-radius: 50%; }
.profile .entry-form { display: grid; gap: 6px; margin-bottom: 8px; padding: 10px; background: var(--soft); border: 1px solid var(--line); border-radius: 3px; }
.profile .entry-form[hidden] { display: none !important; }
.profile .wall-form { display: flex; align-items: flex-start; gap: 8px; padding: 8px; background: var(--soft); border: 1px solid var(--line); border-radius: 3px; }
.profile .wall-form img { width: 36px; height: 36px; }
.profile .wall-form .fields { flex: 1; display: grid; gap: 6px; }
.profile .wall-form .fields .row { justify-content: flex-end; }
.profile .wall-post { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eee; }
.profile .wall-post img { width: 40px; height: 40px; }
.profile .wall-post .meta { font-size: 11px; color: var(--muted); }
.profile .wall-post p { margin: 3px 0 0; overflow-wrap: anywhere; }
.profile .wall-post .acts { margin-top: 3px; font-size: 11px; }
/* acciones discretas: solo al pasar el ratón (siempre visibles en táctil) */
.profile .pf-sub { margin-left: 8px; font-size: 11px; font-weight: 400; color: #aaa; opacity: 0; transition: opacity .12s; }
.profile .pf-sub:hover { color: #c0392b; }
.profile .wall-post:hover .pf-sub, .profile .entry:hover .pf-sub, .profile .cmt:hover .pf-sub, .profile .pf-sub:focus { opacity: 1; }
@media (hover: none) { .profile .pf-sub { opacity: 1; } }
.profile .acts .pf-sub:first-of-type { margin-left: 8px; }

/* paginación */
.profile .pager { display: flex; justify-content: flex-end; align-items: center; gap: 4px; padding: 8px 0; font-size: 11px; color: var(--muted); }
.profile .pager button, .profile .pager a { display: inline-flex; justify-content: center; align-items: center; min-width: 22px; height: 20px; padding: 0 5px; font-size: 11px; color: #555; background: linear-gradient(#fff, #ededed); border: 1px solid #d3d3d3; border-radius: 2px; }
.profile .pager a:hover { text-decoration: none; border-color: #b5b5b5; }
.profile .pager button:disabled { opacity: .4; }

/* ---- columna derecha ---- */
.profile .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.profile .grid3 a.ph { display: block; padding: 2px; background: #fff; border: 1px solid #ccc; }
.profile .grid3 a.ph img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.profile .grid3 a.fr { overflow: hidden; font-size: 10.5px; line-height: 1.2; text-align: center; color: var(--link); }
.profile .grid3 a.fr:hover { text-decoration: none; }
.profile .grid3 a.fr img { width: 100%; aspect-ratio: 1; margin-bottom: 2px; padding: 1px; object-fit: cover; background: #fff; border: 1px solid #ccc; }
.profile .seeall { display: block; margin-top: 6px; font-size: 11px; text-align: right; }

/* ---- perfil bloqueado (reconstruido) ---- */
.pf-lockbox { display: flex; align-items: flex-start; gap: 14px; margin-top: 16px; padding: 20px 20px 18px; background: #f3f3f3; border: 1px solid #e2e2e2; border-radius: 4px; }
.pf-lockico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; color: #fff; background: linear-gradient(#a9bdd3, #8aa3be); border-radius: 50%; box-shadow: inset 0 1px rgba(255,255,255,.35); }
.pf-lockmsg h2 { font-size: 16px; font-weight: 700; color: #333; }
.pf-lockmsg p { margin: 6px 0 0; font-size: 12.5px; color: #555; }
.pf-lockact { margin-top: 14px; flex-wrap: wrap; }
.pf-lockact .btn { padding: 7px 16px; font-size: 12px; }

/* ---- /amigos/:slug ---- */
.pf-friends .pf-fname { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 700; color: #333; }
.pf-friends .pf-flinks { display: grid; gap: 6px; font-size: 11.5px; }
.pf-friends .alpha { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 8px; }
.pf-friends .alpha button { padding: 2px 4px; font-size: 11px; color: var(--link); background: none; border: 0; }
.pf-friends .alpha button.on { color: #fff; background: #4a7db5; border-radius: 2px; }
.pf-friends .alpha button:disabled { color: #ccc; cursor: default; }
.pf-friends .friends-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.pf-friends .friends-grid a { font-size: 11px; line-height: 1.25; text-align: center; }
.pf-friends .friends-grid a[hidden] { display: none; }
.pf-friends .friends-grid img { width: 100%; aspect-ratio: 1; margin-bottom: 3px; padding: 2px; object-fit: cover; background: #fff; border: 1px solid #ccc; }

/* ---- modal de vídeo ---- */
.pf-player { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
.pf-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pf-modalnote { margin: 0 0 8px; color: #555; }

/* Tablón: responder / respondido y respuesta anidada; bloquear */
.profile .wall-post { position: relative; }
.profile .pf-reply { position: absolute; right: 0; top: 10px; font-size: 11px; }
.profile .pf-reply .done { color: #999; }
.profile .wall-post .pf-sub.pf-sub:first-child { margin-left: 0; }
.profile .pf-nested { margin: 10px 0 2px; padding-left: 10px; border-left: 3px solid #e6e6e6; color: #888; font-size: 12px; }
.profile .pf-nested .t { overflow-wrap: anywhere; }
.profile .pf-nested .by { margin-top: 4px; font-size: 11px; color: #999; }
.profile .pf-nested .by a { color: #5a87b8; }
.profile .pf-nested .arr { color: #aaa; margin-right: 2px; }
.profile .pf-replying { margin: 0 0 8px; font-size: 11px; color: #777; }
.profile .pf-replying q { color: #555; }
.pf-block { margin-top: 6px; }