/* =========================================
   SISTEMA MAESTRO DE MODALES Y SLIDE-BARS
   ========================================= */

/* 1. FONDOS Y MODALES DE ESCRITORIO */
.modal-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.5); display: none; justify-content: center; 
    align-items: center; z-index: 1000; opacity: 0; visibility: hidden; 
    transition: opacity 0.3s ease, visibility 0.3s ease; 
}
.modal-overlay.open { display: flex; opacity: 1; visibility: visible; }
.modal-content { 
    background: white; border-radius: 12px; padding: 20px; 
    min-width: 400px; max-width: 90%; position: relative; 
    transform: translateY(-20px); transition: transform 0.3s ease; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); display: flex; 
    flex-direction: column; max-height: 80vh; 
}
.modal-overlay.open .modal-content { transform: translateY(0); }
.modal-close-btn { 
    position: absolute; top: 15px; right: 15px; background: none; 
    border: none; font-size: 20px; cursor: pointer; color: #888; z-index: 2;
}

/* 2. BARRAS DESLIZANTES MÓVILES (SLIDE-BAR) */
.slide-bar { 
    position: fixed; bottom: 0; left: 0; right: 0; 
    transform: translateY(100%); transition: transform 0.3s ease-in-out; 
    background: #fff; border-top-left-radius: 15px; border-top-right-radius: 15px; 
    box-shadow: 0 -5px 15px rgba(0,0,0,0.1); z-index: 2500; display: flex; 
    flex-direction: column; max-height: 85vh; overflow-y: hidden; 
}
.slide-bar.open { transform: translateY(0); }
/* CABECERA MAESTRA (A prueba de errores) */
/* CABECERA MAESTRA (Título a la izquierda, Botón a la derecha) */
.slide-bar-header { 
    position: sticky; 
    top: 0; 
    background: #fff; 
    padding: 15px 20px; 
    border-bottom: 1px solid #eee; 
    display: flex; 
    justify-content: space-between; /* Empuja un elemento a la izquierda y otro a la derecha */
    align-items: center; 
    z-index: 1; 
    border-top-left-radius: 15px; 
    border-top-right-radius: 15px;
}

.slide-bar-header h3 { 
    margin: 0; 
    font-size: 18px; 
    text-align: left; /* Asegura que el texto mire a la izquierda */
}

.slide-bar-header .close-btn { 
    background: none; 
    border: none; 
    font-size: 24px; 
    cursor: pointer; 
    color: #888; 
    padding: 0;
    margin: 0;
}
.slide-bar.comments-bar { height: 85vh; }

/* 3. CAJA DE COMENTARIOS */
.comment-modal-body { display: flex; flex-direction: column; height: 500px; overflow: hidden; padding-bottom: 0; }
.comments-container { padding: 15px; flex: 1; overflow-y: auto; max-height: none; }
.comment { display: flex; gap: 10px; margin-bottom: 15px; align-items: flex-start; }
/* Solo afecta a la imagen que es hija directa del enlace de perfil */
.comment > a > img { 
    width: 35px; 
    height: 35px; 
    border-radius: 50%; 
    object-fit: cover; 
}
.comment-content { flex: 1; background: var(--comment-bg, #f0f2f5); border-radius: 18px; padding: 8px 12px; display: flex; flex-direction: column; }
.comment-user { font-weight: bold; font-size: 14px; color: black; }
.comment-text { font-size: 14px; color: #333; margin-top: 2px; }
.comment-input-area { 
    display: flex; padding: 10px 15px; background: #fff; 
    border-top: 1px solid #ddd; align-items: center; flex-shrink: 0; 
    position: sticky; bottom: 0; z-index: 10; 
}
.comment-input-area input { flex: 1; border: none; background: var(--comment-bg, #f0f2f5); border-radius: 20px; padding: 10px 15px; outline: none; }
.comment-input-area button { background: none; border: none; color: var(--primary-color); margin-left: 10px; font-size: 20px; cursor: pointer; transition: color 0.3s; }
.comment-input-area button:hover { color: #d18f99; }
.del-com-btn { background: none; border: none; color: #ccc; font-size: 12px; cursor: pointer; padding: 0 5px; }
.del-com-btn:hover { color: var(--primary-color); }

/* 4. MODALES DE COMPARTIR Y OPCIONES (3 PUNTOS) */
.share-modal-body { text-align: center; padding: 20px 0; }
.share-modal-body button { 
    width: 100%; padding: 15px; background: var(--primary-color); 
    color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; 
}
.post-options-dropdown { 
    position: absolute; top: 40px; right: 10px; background: white; 
    border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); z-index: 5; 
    min-width: 150px; display: none; 
}
.post-options-dropdown button { 
    display: block; width: 100%; padding: 12px 15px; border: none; 
    background: none; text-align: left; cursor: pointer; font-size: 15px; 
}
.post-options-dropdown button:hover { background: #f0f0f0; }
.options-menu { padding: 10px 0; }
.options-menu button { 
    display: block; width: 100%; text-align: left; padding: 15px 20px; 
    border: none; background: transparent; font-size: 16px; cursor: pointer; 
}
.options-menu button:hover { background: #f0f0f0; }

/* RESPONSIVO GENERAL PARA MODALES */
/* Ocultar el menú desplegable de escritorio en la versión móvil */
@media (max-width: 800px) {
    .post-options-dropdown { display: none !important; }
}
/* ================= MENÚ COMPARTIR TIPO TIKTOK (ANTI-ADBLOCK) ================= */
.sh-slide-bar {
    background: #fff;
    z-index: 4000;
    display: flex;
    flex-direction: column;
}

@media (max-width: 800px) {
    .sh-slide-bar {
        position: fixed; bottom: 0; left: 0; right: 0;
        border-top-left-radius: 20px; border-top-right-radius: 20px;
        transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
        padding-bottom: 20px;
    }
    .sh-slide-bar.open { transform: translateY(0); }
}

@media (min-width: 801px) {
    .sh-slide-bar {
        position: fixed; top: 50%; left: 50%;
        width: 400px; max-width: 90%; border-radius: 20px;
        transform: translate(-50%, -50%) scale(0.9); opacity: 0; visibility: hidden;
        transition: all 0.3s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }
    .sh-slide-bar.open { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; }
}

.sh-menu-container { padding: 15px 0 5px 0; display: flex; flex-direction: column; gap: 15px; }
.sh-menu-row { display: flex; gap: 15px; overflow-x: auto; padding: 0 20px; scrollbar-width: none; }
.sh-menu-row::-webkit-scrollbar { display: none; }

.sh-bubble { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; min-width: 65px; }
.sh-bubble img { width: 55px; height: 55px; border-radius: 50%; object-fit: cover; border: 1px solid #eee; }
.sh-bubble .sh-icon-box { 
    width: 55px; height: 55px; border-radius: 50%; display: flex; justify-content: center; 
    align-items: center; font-size: 24px; color: #333; background: #f0f2f5; transition: transform 0.2s; 
}
.sh-bubble:hover .sh-icon-box, .sh-bubble:hover img { transform: scale(1.05); }

/* Colores de las esferas */
.sh-bubble .sh-icon-box.sh-dl { background: #e6f2ff; color: #0066ff; }
.sh-bubble .sh-icon-box.sh-wa { background: #25D366; color: white; }
.sh-bubble .sh-icon-box.sh-fb { background: #1877F2; color: white; }
.sh-bubble .sh-icon-box.sh-tw { background: #000000; color: white; }
.sh-bubble .sh-icon-box.sh-cp { background: #e4e6e9; color: #1c1e21; }
.sh-bubble .sh-icon-box.sh-del { background: #ffe6e9; color: #ff304f; }
.sh-bubble .sh-icon-box.sh-rep { background: #fff3cd; color: #856404; }

.sh-bubble span { font-size: 11px; color: #555; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70px; font-weight: 500; }
.sh-divider { height: 1px; background: #eee; margin: 0 20px; flex-shrink: 0; }