/* --------------------------- */
/*  Botón VOLVER               */
/* --------------------------- */
.volver-container{
    margin-bottom:10px;text-align:left;position:relative;z-index:1000
}
.volver-btn{
    background:#007bff;color:#fff;padding:5px 5px;border-radius:5px;
    text-decoration:none;font-size:14px;transition:.3s;cursor:pointer;
    display:inline-block;position:relative;z-index:1001
}
.volver-btn:hover{background:#0056b3}

/* --------------------------- */
/*  CONTENEDOR PRINCIPAL       */
/* --------------------------- */
#profile-info{
    display:flex;flex-wrap:wrap;justify-content:space-between;
    width:100%;margin:20px auto;padding:20px;
    border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,.1);
    position:relative;z-index:20
}

/* IZQUIERDA (foto + datos) */
.profile-left{display:flex;align-items:center;width:40%;padding-bottom:20px}
.profile-picture img{
    width:150px;height:150px;border-radius:50%;object-fit:cover;
    border:3px solid #007bff;margin-right:20px
}
.profile-details{list-style:none;padding:0;margin:0}
.profile-details li{font-size:16px;margin-bottom:5px}

/* DERECHA (botones) */
.profile-right{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
    width:60%;margin-bottom:15px
}
.profile-btn{
    background:#007bff;color:#fff;border:none;padding:10px 15px;margin:5px;
    font-size:14px;cursor:pointer;border-radius:5px;transition:.3s;
    position:relative;z-index:20
}
.profile-btn:hover{background:#0056b3}

/* --------------------------- */
/*  CONTENIDO DINÁMICO         */
/* --------------------------- */
#profile-content{
    width:100%;min-height:80%;max-height:100%;padding:15px;border-radius:5px;
    text-align:center;font-size:16px;color:#333;
    box-shadow:0 4px 10px rgba(0,0,0,.1)
}

/* --------------------------- */
/*  PUBLICACIONES              */
/* --------------------------- */
.profile-posts-container{
    background:url('/uploads/logos/fondoPubs.png') center/cover no-repeat;
    padding:20px;
    border-radius:10px;
    position:relative;           /* ← FALTABA el punto y coma aquí */
    
    /* bloques en columna y centrados */
    display:flex;
    flex-direction:column;
    align-items:center;
}
.profile-posts-container h3{
    width:100%;
    margin:0 0 20px;              /* espacio bajo el título */
    font-size:2rem;
    font-weight:700;
    color:#9f2241;
    text-align:center;            /* NUEVO: centra el texto */
}
#profile-posts-container,
#archived-posts-container,
#archived-publications-container,
#profile-publications-container{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;       /* ya centrado */
    gap:20px;
    width:100%;
    max-width:1500px;
    position:relative;
    z-index:1;
}

#profile-publications{
    margin-top:40px;   /* ajusta a tu gusto */
}
/*------------------------------------------------------------------
  Tarjetas en la sección “Publicaciones”
  ------------------------------------------------------------------*/
  #profile-publications .post-card{
    /* ⇩⇩  Ajusta a tu gusto  ⇩⇩ */
    flex: 1 1 calc(40% - 20px);   /* ancho base ≈ 40 % del contenedor */
    max-width: 470px;             /* tope absoluto en px             */
    overflow: visible; 
}
/* Texto breve en tarjetas de publicaciones */
.pub-excerpt{
    font-size:19px;
    color:#555;
    margin:8px 0 0;
    line-height:.79em;
    max-height:2.7em;      /* recorte a ~2 líneas */
    overflow:hidden;
    margin-bottom: 10px;
    white-space:pre-line;  /* respeta <br> y \n si las hubiera */
}


/* Tablet horizontal (≤ 1024 px) ―‒ 2 columnas */
@media (max-width:1024px){
    #profile-publications .post-card{
        flex-basis: calc(50% - 20px);
    }
}

/* Móvil (≤ 768 px) ―‒ 1 columna (ya estaba así) */
@media (max-width:768px){
    #profile-publications .post-card{
        flex-basis: calc(100% - 20px);
    }
}
.post-card{
    flex:1 1 calc(25% - 20px);max-width:300px;min-height:320px;
    background:#fff;border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,.1);
    overflow:visible;position:relative;text-align:center;padding:15px;transition:.3s;cursor:pointer;
}
.post-card:hover{transform:scale(1.05); z-index: 500;;}
.post-image-container{position:relative;width:100%;height:200px;overflow:hidden;border-radius:8px}
.post-image{width:100%;height:100%;object-fit:cover}
.post-overlay{
    position:absolute;bottom:0;width:100%;background:rgba(0,0,0,.6);color:#fff;
    text-align:center;padding:5px;font-size:14px;display:flex;justify-content:space-around;
    opacity:0;transition:.3s
}
.post-image-container:hover .post-overlay{opacity:1; z-index: 499;}
.view-post-btn{
    margin-top:10px;padding:8px 12px;background:#007bff;color:#fff;border-radius:5px;
    font-size:14px;transition:.3s;border:none
}
.view-pub-btn{
    margin-top:10px;padding:8px 12px;background:#007bff;color:#fff;border-radius:5px;
    font-size:14px;transition:.3s;border:none
}


.view-post-btn:hover{background:#0056b3}
.view-pub-btn:hover{background:#0056b3}
.pending-approval{background:#fff3cd;border-left:5px solid #ffca2c;padding:10px;margin-top:10px}
.pending-text{font-size:14px;font-weight:700;color:#d39e00}
.no-posts-message{text-align:center;color:#fff;text-shadow:1px 1px 2px #000;font-size:1.2rem}

/* --------------------------- */
/*  COMENTARIOS en vista post  */
/* (se mantienen porque aún     */
/*  se usan dentro de la vista) */
/* --------------------------- */
#post-comments{
    margin-top:20px;width:100%;background:#f8f9fa;padding:15px;border-radius:5px;
    box-shadow:0 4px 10px rgba(0,0,0,.1)
}
#comments-container{
    display:flex;flex-direction:column;max-height:200px;overflow-y:auto;gap:10px;
    margin-bottom:10px
}
.comment-card{
    position:relative;background:#fff;border-radius:8px;padding:10px;
    box-shadow:0 2px 5px rgba(0,0,0,.1)
}
.comment-card p{margin:5px 0}
.comment-date{
    position:absolute;bottom:5px;right:10px;font-size:12px;color:gray;
    white-space:nowrap
}
.delete-comment{
    position:absolute;top:5px;right:5px;background:none;border:none;
    color:red;cursor:pointer;font-size:16px
}

/* Contenedor del dropdown */
.config-container{
    position:relative;      /* ⬅️  referencia para el menú */
    display:inline-block;   /* mantiene el tamaño del botón */
}

/* Menú (cerrado por defecto, fuera del flujo) */
.config-dropdown{
    display:none;
    position:absolute;      /* ⬅️  ya no empuja nada */
    top:100%;               /* justo debajo del botón */
    left:0;
    background:#fff;
    border:1px solid #ddd;
    border-radius:5px;
    box-shadow:0 2px 5px rgba(0,0,0,.15);
    min-width:150px;
    z-index:300;
}

/* Mostrar cuando el contenedor tiene la clase .active */
.config-container.active .config-dropdown{ display:block; }

/* ▾ Crear – contenedor y menú (mismo estilo que Configuración) */
.create-container{ position:relative; display:inline-block; }

.create-dropdown{
    display:none;
    position:absolute;      /* flotante, no desplaza */
    top:100%;
    left:0;
    background:#fff;
    border:1px solid #ddd;
    border-radius:5px;
    box-shadow:0 2px 5px rgba(0,0,0,.15);
    min-width:200px;
    z-index:200;
}
.create-container.active .create-dropdown{ display:block;  }

/*  TRES PUNTITOS   */

.actions-container{position:relative;display:inline-block;z-index: 1500;}
.actions-btn{
    background:#6c757d;color:#fff;border:none;border-radius:4px;
    padding:4px 8px;font-size:18px;cursor:pointer;line-height:1
}
.actions-dropdown{
    position:absolute;right:0;top:105%;display:none;flex-direction:column;
    background:#fff;border:1px solid #ddd;border-radius:6px;
    box-shadow:0 3px 8px rgba(0,0,0,.15);min-width:140px;z-index:1600;
}
.actions-container.active .actions-dropdown{display:flex}
.actions-dropdown .dropdown-item{
    padding:8px 12px;color:#333;font-size:14px;text-decoration:none
}
.actions-dropdown .dropdown-item:hover{background:#f5f5f5}
.delete-item{color:#c82333}


/*  FIN TRES PUNTITOS   */

/* --------  Bandera “Esperando aprobación”  -------- */
.pending-flag{
    position:absolute;
    top:8px;                 /* esquina superior derecha de la tarjeta  */
    right:8px;
    z-index:30;              /* por encima de la imagen */
    background:#fff3cd;
    color:#d39e00;
    border:1px solid #ffecb5;
    border-radius:4px;
    font-size:.99rem;
    font-weight:600;
    padding:3px 6px;
    box-shadow:0 1px 2px rgba(0,0,0,.15);
    pointer-events:none;     /* no estorba al hacer clic en la tarjeta  */
}
    /* FIN BANDERA */


/* --------------------------- */
/*  RESPONSIVE GRID TARJETAS   */
/* --------------------------- */
@media (max-width:1920px){
    .post-card{flex-basis:calc(33.33% - 20px)}
}
@media (max-width:1024px){
    .post-card{flex-basis:calc(50% - 20px)}
}
@media (max-width:768px){
    .post-card{flex-basis:calc(100% - 20px)}
}

/* Ajustes para pantallas medianas */
@media(max-width:1280px){
    #profile-info{flex-direction:column;align-items:center;text-align:center}
    .profile-left,.profile-right{width:100%}
    .profile-left{flex-direction:column;align-items:center}
    .profile-picture img{margin:0 0 10px 0}
    .profile-right{margin-top:15px}
}

/* Ajuste para texto dinámico en resoluciones intermedias */
@media(max-width:1700px){
   #profile-content{width:95%;min-height:40%}
}