/* ============================================================
   PERFIL PÚBLICO vp-* — layout tipo OnlyFans/Instagram
   Agregar al final de assets/css/main.css
   ============================================================ */

/* ══ WRAPPER GENERAL ══════════════════════════════════════════ */
.vp-wrap {
    background: var(--gris-100);
    min-height: 100vh;
    padding-bottom: 3rem;
}

/* ══ BANNER ═══════════════════════════════════════════════════ */
.vp-banner {
    width: 100%;
    height: 300px;
    background: linear-gradient(135deg, var(--verde-oscuro), var(--verde-medio));
    position: relative;
    overflow: hidden;
}
.vp-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}
.vp-banner-vacio {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--verde-oscuro) 0%, var(--verde-medio) 60%, var(--dorado) 100%);
}

/* ══ COLUMNA CENTRAL (máx 700px, márgenes a los lados) ════════ */
.vp-central {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ══ CABECERA ══════════════════════════════════════════════════ */
.vp-cabecera {
    background: var(--blanco);
    border-radius: 0 0 var(--radio-xl) var(--radio-xl);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    box-shadow: var(--sombra-sm);
}
.vp-cabecera-top {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.vp-avatar-wrap {
    flex-shrink: 0;
}
.vp-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 4px solid var(--blanco);
    object-fit: cover;
    display: block;
    background: var(--verde);
    box-shadow: var(--sombra);
}
.vp-avatar--iniciales {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--verde);
    color: var(--blanco);
    font-size: 2.2rem;
    font-weight: 800;
}

.vp-nombre {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--gris-900);
    margin-bottom: .2rem;
}
.vp-estado {
    font-size: .85rem;
    color: var(--gris-600);
    display: block;
    margin-bottom: .4rem;
}
.vp-descripcion {
    font-size: .9rem;
    color: var(--gris-700);
    line-height: 1.55;
    margin-bottom: .5rem;
    white-space: pre-line;
}
.vp-reacciones {
    font-size: .8rem;
    color: var(--gris-500);
    display: block;
    margin-bottom: .9rem;
}

/* Botones de acción */
.vp-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

/* ══ RRSS ROW ══════════════════════════════════════════════════ */
.vp-rrss-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}
.vp-rrss-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .95rem .4rem .7rem;
    background: var(--blanco);
    border: 1px solid var(--gris-200);
    border-radius: var(--radio-pill);
    font-size: .82rem;
    font-weight: 500;
    color: var(--gris-700);
    text-decoration: none;
    transition: all .15s;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.vp-rrss-btn:hover {
    background: var(--gris-100);
    border-color: var(--gris-400);
    color: var(--gris-900);
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.vp-rrss-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ══ FORMULARIO RÁPIDO ════════════════════════════════════════ */
.vp-form-card {
    background: var(--blanco);
    border-radius: var(--radio-xl);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--sombra-sm);
}
.vp-form-trigger-row {
    display: flex;
    gap: .75rem;
    align-items: center;
}
.vp-form-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--verde);
}
.vp-form-avatar--iniciales {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--verde);
    color: var(--blanco);
    font-weight: 700;
    font-size: 1rem;
}
.vp-form-trigger {
    flex: 1;
    background: var(--gris-100);
    border: 1.5px solid var(--gris-300);
    border-radius: var(--radio-pill);
    padding: .55rem 1.1rem;
    text-align: left;
    color: var(--gris-500);
    font-size: .9rem;
    cursor: pointer;
    transition: all .15s;
}
.vp-form-trigger:hover {
    border-color: var(--verde);
    background: var(--verde-fondo);
}

/* Tabs tipo/formato */
.vp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .9rem 0 .65rem;
}
.vp-tab {
    background: var(--gris-100);
    border: 1px solid var(--gris-300);
    border-radius: var(--radio);
    padding: .3rem .7rem;
    font-size: .78rem;
    cursor: pointer;
    color: var(--gris-600);
    transition: all .15s;
}
.vp-tab--activo {
    background: var(--verde);
    color: var(--blanco);
    border-color: var(--verde);
}
.vp-tab:hover:not(.vp-tab--activo) {
    background: var(--verde-fondo);
    border-color: var(--verde);
}

/* Textarea del form */
.vp-textarea {
    width: 100%;
    min-height: 90px;
    border: 1.5px solid var(--gris-300);
    border-radius: var(--radio-lg);
    padding: .65rem .9rem;
    font-size: .9rem;
    resize: vertical;
    font-family: var(--fuente);
    color: var(--gris-900);
    background: var(--blanco);
    box-sizing: border-box;
    transition: border-color .15s;
}
.vp-textarea:focus { border-color: var(--verde); outline: none; }

.vp-contador {
    font-size: .75rem;
    color: var(--gris-500);
    text-align: right;
    margin: .2rem 0 .4rem;
}

.vp-upload-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 2px dashed var(--gris-300);
    border-radius: var(--radio-lg);
    padding: 1.4rem;
    cursor: pointer;
    color: var(--gris-600);
    font-size: .875rem;
    transition: all .15s;
}
.vp-upload-label:hover {
    border-color: var(--verde);
    background: var(--verde-fondo);
}

.vp-url-input {
    width: 100%;
    border: 1.5px solid var(--gris-300);
    border-radius: var(--radio-lg);
    padding: .6rem .9rem;
    font-size: .9rem;
    font-family: var(--fuente);
    background: var(--blanco);
    color: var(--gris-900);
    box-sizing: border-box;
    transition: border-color .15s;
}
.vp-url-input:focus { border-color: var(--verde); outline: none; }

.vp-desc-input {
    width: 100%;
    border: 1.5px solid var(--gris-200);
    border-radius: var(--radio);
    padding: .5rem .85rem;
    font-size: .875rem;
    font-family: var(--fuente);
    background: var(--blanco);
    color: var(--gris-900);
    box-sizing: border-box;
    margin: .5rem 0;
    transition: border-color .15s;
}
.vp-desc-input:focus { border-color: var(--verde); outline: none; }

.vp-form-btns {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .4rem;
}

/* ══ FEED DE PUBLICACIONES ════════════════════════════════════ */
.vp-feed {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.vp-sin-posts {
    background: var(--blanco);
    border-radius: var(--radio-xl);
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--gris-500);
    font-size: .95rem;
    box-shadow: var(--sombra-sm);
}

/* ── Post card ─────────────────────────────────────────────── */
.vp-post {
    background: var(--blanco);
    border-radius: var(--radio-xl);
    overflow: hidden;
    box-shadow: var(--sombra-sm);
    border: 1px solid var(--gris-200);
}
.vp-post-header {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .9rem 1.1rem .6rem;
}
.vp-post-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--verde);
}
.vp-post-avatar--ini {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--verde);
    color: var(--blanco);
    font-weight: 700;
    font-size: .9rem;
}
.vp-post-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.vp-post-autor { font-weight: 700; font-size: .88rem; color: var(--gris-900); }
.vp-post-fecha { font-size: .72rem; color: var(--gris-500); }

.vp-post-del { margin-left: auto; }
.vp-del-btn {
    background: none;
    border: none;
    color: var(--gris-400);
    cursor: pointer;
    font-size: .85rem;
    padding: .25rem .4rem;
    border-radius: var(--radio);
    transition: all .15s;
    line-height: 1;
}
.vp-del-btn:hover { color: var(--color-error); background: #fee2e2; }

.vp-post-desc {
    padding: 0 1.1rem .35rem;
    font-size: .85rem;
    color: var(--gris-600);
    margin: 0;
}
.vp-post-body { padding: 0 1.1rem 1.1rem; }

.vp-post-texto {
    font-size: .95rem;
    line-height: 1.62;
    color: var(--gris-800);
    white-space: pre-line;
    margin: 0;
}
.vp-post-img {
    width: 100%;
    border-radius: var(--radio-lg);
    display: block;
    max-height: 500px;
    object-fit: cover;
}
.vp-video-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: var(--radio-lg);
    overflow: hidden;
}
.vp-video-wrap iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
}
.vp-link-card {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1rem;
    background: var(--gris-100);
    border: 1px solid var(--gris-200);
    border-radius: var(--radio-lg);
    text-decoration: none;
    color: var(--gris-800);
    font-size: .88rem;
    transition: background .15s;
}
.vp-link-card:hover { background: var(--verde-fondo); }

/* ── Ver más ──────────────────────────────────────────────── */
.vp-ver-mas {
    text-align: center;
    padding: 1rem 0 .5rem;
}

/* ══ RESPONSIVE ════════════════════════════════════════════════ */
@media (max-width: 740px) {
    .vp-central { padding: 0 .5rem; }
    .vp-banner  { height: 200px; }
    .vp-avatar  { width: 80px; height: 80px; }
    .vp-nombre  { font-size: 1.25rem; }
    .vp-cabecera { padding: 1rem; }
}
@media (max-width: 480px) {
    .vp-banner  { height: 150px; }
    .vp-avatar  { width: 64px; height: 64px; }
    .vp-nombre  { font-size: 1.1rem; }
    .vp-acciones { gap: .35rem; }
    .vp-tabs    { gap: .25rem; }
    .vp-tab     { font-size: .72rem; padding: .25rem .5rem; }
}

/* ══ INTERACCIONES DE POSTS ═══════════════════════════════════ */
.vp-post-stats {
    display: flex;
    gap: 1rem;
    padding: .4rem 1.1rem;
    font-size: .8rem;
    color: var(--gris-500);
    border-top: 1px solid var(--gris-100);
}
.vp-likes-count, .vp-coms-count { cursor: default; }

.vp-post-acciones {
    display: flex;
    align-items: center;
    border-top: 1px solid var(--gris-100);
    padding: .25rem .5rem;
}
.vp-accion-btn {
    flex: 1;
    background: none;
    border: none;
    padding: .55rem .5rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--gris-600);
    cursor: pointer;
    border-radius: var(--radio);
    transition: background .15s, color .15s;
    text-align: center;
    text-decoration: none;
    display: block;
}
.vp-accion-btn:hover {
    background: var(--gris-100);
    color: var(--gris-900);
}
.vp-like-btn--activo {
    color: var(--verde) !important;
    font-weight: 700;
}
.vp-accion-btn--ghost {
    color: var(--gris-400);
    cursor: default;
}
.vp-accion-btn--ghost:hover { background: none; color: var(--gris-400); }

/* Share dropdown */
.vp-share-wrap { flex: 1; position: relative; text-align: center; }
.vp-share-dropdown {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--blanco);
    border: 1px solid var(--gris-200);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-lg);
    min-width: 160px;
    z-index: 50;
    overflow: hidden;
}
.vp-share-opt {
    display: block;
    width: 100%;
    padding: .65rem 1rem;
    font-size: .85rem;
    color: var(--gris-800);
    text-decoration: none;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background .12s;
    font-family: var(--fuente);
}
.vp-share-opt:hover { background: var(--gris-100); }

/* Comentarios */
.vp-comentarios {
    border-top: 1px solid var(--gris-100);
    padding: .75rem 1.1rem;
    background: var(--gris-100);
}
.vp-com-item {
    padding: .5rem .75rem;
    background: var(--blanco);
    border-radius: var(--radio-lg);
    margin-bottom: .5rem;
    font-size: .875rem;
}
.vp-com-autor {
    font-weight: 700;
    color: var(--gris-900);
    margin-right: .4rem;
}
.vp-com-texto { color: var(--gris-800); }
.vp-com-fecha {
    display: block;
    font-size: .72rem;
    color: var(--gris-500);
    margin-top: .2rem;
}
.vp-com-respondido {
    display: block;
    font-size: .75rem;
    color: var(--verde);
    margin-top: .2rem;
    font-style: italic;
}
.vp-com-enviado {
    display: block;
    font-size: .72rem;
    color: var(--gris-500);
    margin-top: .15rem;
    font-style: italic;
}
.vp-com-form { margin-top: .5rem; }
.vp-com-input-row { display: flex; gap: .5rem; align-items: center; }
.vp-com-input {
    flex: 1;
    border: 1.5px solid var(--gris-300);
    border-radius: var(--radio-pill);
    padding: .45rem .9rem;
    font-size: .875rem;
    background: var(--blanco);
    font-family: var(--fuente);
    color: var(--gris-900);
    transition: border-color .15s;
}
.vp-com-input:focus { border-color: var(--verde); outline: none; }
.vp-login-wall {
    font-size: .85rem;
    color: var(--gris-600);
    padding: .5rem 0;
    text-align: center;
}
.vp-login-wall a { color: var(--verde); font-weight: 600; }

/* Responsive fixes */
@media (max-width: 480px) {
    .vp-accion-btn  { font-size: .78rem; }
    .vp-cabecera    { padding: .75rem; }
}

/* ══ LOGIN WALL INLINE (debajo de post) ════════════════════════════════════════ */
.vp-login-wall-inline {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .6rem 1.1rem;
    background: var(--verde-fondo);
    border-top: 1px solid var(--gris-200);
    font-size: .85rem;
    color: var(--gris-700);
}

/* ══ CONFIRMACIÓN COMENTARIO ═══════════════════════════════════════════════════ */
.vp-com-confirmacion {
    margin: .5rem 0 0;
    padding: .6rem .85rem;
    background: #d1fae5;
    border-left: 3px solid var(--color-exito);
    border-radius: var(--radio);
    font-size: .85rem;
    color: #065f46;
}

/* ══ ACCIONES DE COMENTARIO ════════════════════════════════════════════════════ */
.vp-com-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}
.vp-com-body { flex: 1; }
.vp-com-acciones {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding-top: .1rem;
}
.vp-com-accion {
    background: none;
    border: none;
    font-size: .72rem;
    color: var(--gris-400);
    cursor: pointer;
    padding: .1rem .3rem;
    border-radius: 4px;
    transition: color .12s, background .12s;
    font-family: var(--fuente);
    white-space: nowrap;
}
.vp-com-accion:hover { color: var(--gris-700); background: var(--gris-100); }
.vp-com-accion--peligro:hover { color: var(--color-error); background: #fee2e2; }

/* Wrap form input */
.vp-com-form-wrap {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin-top: .6rem;
}
.vp-com-login-btn {
    display: block;
    width: 100%;
    padding: .55rem;
    background: var(--gris-100);
    border: 1.5px dashed var(--gris-300);
    border-radius: var(--radio-lg);
    font-size: .85rem;
    color: var(--gris-600);
    cursor: pointer;
    text-align: center;
    margin-top: .5rem;
    font-family: var(--fuente);
    transition: all .15s;
}
.vp-com-login-btn:hover { border-color: var(--verde); color: var(--verde); }

/* ══ COMENTARIOS SIEMPRE VISIBLES ═══════════════════════════════════════════════ */
.vp-comentarios {
    border-top: 1px solid var(--gris-100);
    background: var(--gris-100);
    padding: .75rem 1.1rem;
}

/* Franja "mostrar comentarios" */
.vp-mostrar-coms {
    display: block;
    width: 100%;
    padding: .55rem 1rem;
    margin-bottom: .6rem;
    background: #eef6f0;
    border: none;
    border-radius: var(--radio-lg);
    font-size: .85rem;
    font-weight: 600;
    color: var(--verde);
    cursor: pointer;
    text-align: center;
    letter-spacing: .01em;
    transition: background .15s;
    font-family: var(--fuente);
}
.vp-mostrar-coms:hover { background: var(--verde-claro); }

/* Comentarios ocultos (solo los primeros N se muestran) */
.vp-com-oculto { display: none; }

/* Share icon sizing */
.vp-share-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    vertical-align: middle;
}