@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

:root {
    --bg-dark: #000000;
    --bg-panel: #000000;
    --bg-hover: rgba(255, 255, 255, 0.03);
    --accent-primary: #1d9bf0; 
    --accent-secondary: #00ba7c; 
    --text-main: #e7e9ea;
    --text-muted: #71767b;
    --border-color: #2f3336;
    --error: #f91880; 
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background-color: var(--bg-dark); color: var(--text-main); overflow-x: hidden;}
.hidden { display: none !important; }

/* === BOTONES GLOBALES === */
.btn-primary { background: var(--accent-primary); color: white; border: none; border-radius: 9999px; font-weight: bold; cursor: pointer; transition: 0.2s; }
.btn-primary:hover { background: #1a8cd8; }
.btn-outline { background: transparent; color: var(--text-main); border: 1px solid var(--border-color); border-radius: 9999px; font-weight: bold; cursor: pointer; transition: 0.2s; padding: 6px 15px; }
.btn-outline:hover { background: rgba(255,255,255,0.1); border-color: var(--text-main); }
.btn-small { padding: 6px 15px; border-radius: 9999px; font-size: 0.9rem; font-weight:bold; cursor:pointer; transition:0.2s; border:none; }
.btn-danger { background: var(--error); color:white; }
.btn-danger:hover { background: #e01471; }
.btn-follow { background: var(--text-main); color: var(--bg-dark); border: none; }
.btn-follow:hover { background: #d7dbdc; }
.following-active { background: transparent !important; color: var(--text-main) !important; border: 1px solid var(--border-color); }
.following-active:hover { border-color: var(--error); color: var(--error) !important; background: rgba(249, 24, 128, 0.1) !important; }

/* === ZOOM Y MODALES === */
.image-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.9); z-index: 9999; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.image-modal img { max-width: 90vw; max-height: 90vh; border-radius: 12px; cursor: default; }
.close-modal { position: absolute; top: 20px; left: 20px; font-size: 1.5rem; color: white; cursor: pointer; transition: 0.2s; width: 40px; height: 40px; border-radius: 50%; display:flex; justify-content:center; align-items:center; background: rgba(255,255,255,0.1);}
.close-modal:hover { background: rgba(255,255,255,0.2); }

/* === AUTENTICACIÓN === */
.auth-container { display: flex; justify-content: center; align-items: center; height: 100vh; background: var(--bg-dark); }
.auth-box { background: var(--bg-dark); padding: 40px; width: 100%; max-width: 450px; text-align: center; }
.auth-tabs { display: flex; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.auth-tabs button { flex: 1; background: none; border: none; padding: 15px; color: var(--text-muted); font-weight: 600; cursor: pointer; transition: 0.3s; }
.auth-tabs button.active { color: var(--text-main); border-bottom: 3px solid var(--accent-primary); }
.avatar-label { display: flex; flex-direction: column; align-items: center; cursor: pointer; margin-bottom: 15px; }
.avatar-label img { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 3px solid var(--border-color); margin-bottom: 5px; transition: 0.2s; }
.avatar-label:hover img { filter: brightness(0.8); }
input[type="text"], input[type="password"] { width: 100%; padding: 15px; margin-bottom: 15px; background: transparent; border: 1px solid var(--border-color); color: white; border-radius: 4px; outline: none; font-size: 1.1rem; }
input:focus { border-color: var(--accent-primary); }
.error-msg { color: var(--error); font-size: 0.9rem; margin-top: 10px; }

/* === APP LAYOUT === */
.app-layout { display: grid; grid-template-columns: 275px minmax(0, 600px) 350px; justify-content: center; max-width: 1265px; margin: 0 auto; min-height: 100vh; transition: 0.3s; }
.app-layout.messages-mode { grid-template-columns: 275px minmax(0, 950px); max-width: 1265px; }

.sidebar { position: sticky; top: 0; height: 100vh; padding: 10px 20px; display: flex; flex-direction: column; align-items: flex-start;}
.logo { font-size: 2rem; color: var(--text-main); margin-bottom: 20px; padding: 10px; border-radius: 50%; transition: 0.2s; display: inline-block;}
.logo:hover { background: rgba(255,255,255,0.1); }
.sidebar nav { display: flex; flex-direction: column; width: 100%; gap: 5px;}
.sidebar nav a { display: inline-flex; align-items:center; padding: 12px 25px 12px 15px; color: var(--text-main); text-decoration: none; font-size: 1.25rem; border-radius: 9999px; transition: 0.2s; width: fit-content; position: relative;}
.sidebar nav a:hover { background: var(--bg-hover); }
.sidebar nav a i { width: 35px; font-size: 1.6rem;}
.sidebar nav a.active { font-weight: bold; }
.badge-notif { background: var(--accent-primary); color: white; font-size: 0.7rem; padding: 2px 6px; border-radius: 50%; position:absolute; left: 25px; top: 5px; font-weight: bold; border: 2px solid var(--bg-dark);}

.user-profile { margin-top: auto; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px; border-radius: 9999px; transition: 0.2s; margin-bottom: 10px; }
.user-profile:hover { background: var(--bg-hover); }
.avatar { width: 40px; height: 40px; background: var(--border-color); border-radius: 50%; display: flex; justify-content: center; align-items: center; overflow: hidden; flex-shrink: 0; cursor: pointer; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-info { display: flex; flex-direction: column; flex: 1; margin-left: 10px; overflow: hidden; }
#btn-logout { background: none; border: none; color: var(--text-main); cursor: pointer; font-size: 1.2rem; padding: 5px; transition: 0.2s; }
#btn-logout:hover { color: var(--error); }

/* === FEED CENTRAL === */
.feed { border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color); min-height: 100vh; position: relative; background: var(--bg-dark);}
.feed-header { padding: 0 15px; height: 53px; border-bottom: 1px solid var(--border-color); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 10; background: rgba(0, 0, 0, 0.65); display: flex; align-items: center; gap: 15px; }
.feed-header h2 { font-size: 1.2rem; font-weight: bold; }
.back-btn { background: none; border: none; color: var(--text-main); font-size: 1.1rem; cursor: pointer; transition: 0.2s; width:35px; height:35px; border-radius:50%; display:flex; justify-content:center; align-items:center;}
.back-btn:hover { background: rgba(255,255,255,0.1); }

.post-creator { display: flex; gap: 15px; padding: 15px 15px 5px 15px; border-bottom: 1px solid var(--border-color); }
.post-input-container { flex: 1; }
#post-content { width: 100%; background: none; border: none; color: white; font-size: 1.25rem; resize: none; outline: none; min-height: 50px; font-family: 'Inter', sans-serif; padding-top: 10px;}

/* SCROLLBAR MENCIONES MODERNO */
.mentions-dropdown { position: absolute; top: 60px; left: 0; background: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 12px; width: 250px; max-height: 200px; overflow-y: auto; box-shadow: 0 0 15px rgba(255,255,255,0.1); z-index: 100; }
.mentions-dropdown::-webkit-scrollbar { width: 6px; }
.mentions-dropdown::-webkit-scrollbar-track { background: transparent; }
.mentions-dropdown::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }
.mentions-dropdown::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.mention-item { padding: 12px 15px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: 0.2s; }
.mention-item:hover { background: var(--bg-hover); }
.mention-item img { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; }

#post-image-preview-container { position: relative; margin-top: 10px; display: inline-block; max-width: 100%; }
#post-image-preview { max-width: 100%; max-height: 300px; border-radius: 16px; border: 1px solid var(--border-color); object-fit: cover; }
#btn-remove-image { position: absolute; top: 5px; right: 5px; background: rgba(15,20,25,0.75); color: white; border: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; transition: 0.2s; backdrop-filter: blur(4px);}
#btn-remove-image:hover { background: rgba(39,44,48,0.75); }

.post-actions { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border-color); padding: 10px 0; margin-top: 10px; }
.upload-img-btn { color: var(--accent-primary); font-size: 1.2rem; cursor: pointer; padding: 8px; transition: 0.2s; border-radius: 50%; display:flex; align-items:center; justify-content:center; width:35px; height:35px;}
.upload-img-btn:hover { background: rgba(29, 155, 240, 0.1); }
.btn-post { padding: 8px 16px; font-size: 0.95rem; }
.btn-post:disabled { opacity: 0.5; cursor: not-allowed; }

.verified-badge { color: var(--accent-primary); margin-left: 2px; font-size: 1.1em; }

/* === PUBLICACIONES === */
.post { padding: 12px 15px; border-bottom: 1px solid var(--border-color); display: flex; gap: 12px; transition: 0.2s; position: relative;}
.post:hover { background: var(--bg-hover); }
.post-body { flex: 1; overflow: hidden; }
.post-header { display: flex; justify-content: flex-start; margin-bottom: 2px; align-items: center;}
.post-author { font-weight: bold; font-size: 0.95rem; cursor: pointer; transition: 0.2s; display:flex; align-items:center; gap:3px; color: var(--text-main);}
.post-author:hover { text-decoration: underline; }
.post-time { color: var(--text-muted); font-size: 0.9rem; margin-left: 5px;}
.post-time::before { content: "· "; }
.post-text { font-size: 0.95rem; line-height: 1.4; margin-bottom: 10px; word-wrap: break-word; white-space: pre-wrap; color: var(--text-main);}
.post-attached-image { width: 100%; max-height: 500px; object-fit: cover; border-radius: 16px; margin-bottom: 10px; border: 1px solid var(--border-color); cursor: pointer; }

.repost-indicator { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; font-weight: bold;}

.hashtag { color: var(--accent-primary); cursor: pointer; }
.hashtag:hover { text-decoration: underline; }
.mention { color: var(--accent-primary); cursor: pointer; }
.mention:hover { text-decoration: underline; }

.post-interactions { display: flex; justify-content: space-between; max-width: 425px; color: var(--text-muted); margin-top: 5px;}
.interaction-btn { background: none; border: none; color: inherit; cursor: pointer; display: flex; align-items: center; gap: 5px; font-size: 0.85rem; transition: 0.2s; padding: 0; }
.interaction-btn i { padding: 8px; border-radius: 50%; transition: 0.2s; }
.interaction-btn:hover { color: var(--accent-primary); }
.interaction-btn:hover i { background: rgba(29, 155, 240, 0.1); }
.interaction-btn.liked { color: var(--error); }
.interaction-btn.liked i { color: var(--error); }
.interaction-btn.reposted { color: var(--accent-secondary); }
.interaction-btn.reposted i { color: var(--accent-secondary); }
.interaction-btn.liked:hover i { background: rgba(249, 24, 128, 0.1); }
.interaction-btn.reposted:hover i { background: rgba(0, 186, 124, 0.1); }
.interaction-btn.delete:hover { color: var(--error); }
.interaction-btn.delete:hover i { background: rgba(249, 24, 128, 0.1); }
.interaction-btn.share:hover { color: var(--accent-primary); }
.interaction-btn.share:hover i { background: rgba(29, 155, 240, 0.1); }

/* === COMENTARIOS === */
.comments-section { margin-top: 10px; display: none; cursor: default;}
.comment-input-box { display: flex; gap: 10px; margin-bottom: 15px; }
.comment-input-box input { flex: 1; background: transparent; border: 1px solid var(--border-color); color: white; padding: 10px 15px; border-radius: 9999px; outline: none; font-size:0.95rem;}
.comment-input-box input:focus { border-color: var(--accent-primary); }
.comment-input-box button { background: var(--accent-primary); color: white; border: none; padding: 0 15px; border-radius: 9999px; cursor: pointer; }
.comment { display: flex; gap: 10px; margin-bottom: 15px; font-size: 0.95rem; position: relative;}
.comment .avatar { width: 35px; height: 35px; }
.comment-author { font-weight: bold; color: var(--text-main); cursor: pointer; }
.comment-author:hover { text-decoration: underline; }
.comment-delete { position:absolute; right:0; top:0; background:none; border:none; color:var(--text-muted); cursor:pointer; padding:5px; border-radius:50%;}
.comment-delete:hover { color: var(--error); background: rgba(249,24,128,0.1); }

/* === PERFIL === */
.profile-banner-bg { background: #333639; height: 200px; width: 100%; }
.profile-info-section { padding: 0 15px 15px 15px; }
.profile-header-banner img { width: 135px; height: 135px; border-radius: 50%; border: 4px solid var(--bg-dark); object-fit: cover; background: var(--bg-dark); }
#profile-view-displayname { font-size: 1.3rem; font-weight: 800; color: var(--text-main); }
.profile-action-btns { display: flex; gap: 10px; }
.profile-follow-stats { display: flex; gap: 20px; font-size: 0.9rem; margin-bottom: 15px; }
.stat-number { color: var(--text-main); font-weight: bold; margin-right: 3px; }

.profile-tabs { display: flex; border-bottom: 1px solid var(--border-color); }
.profile-tabs button { flex: 1; background: none; border: none; padding: 15px; color: var(--text-muted); font-weight: bold; cursor: pointer; transition: 0.2s; position:relative; }
.profile-tabs button:hover { background: rgba(255,255,255,0.05); }
.profile-tabs button.active { color: var(--text-main); }
.profile-tabs button.active::after { content: ''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width: 50px; height: 4px; background: var(--accent-primary); border-radius: 9999px;}

/* === TENDENCIAS Y BUSCADOR (RIGHT PANEL) === */
.right-panel { padding: 10px 20px; transition: 0.3s; display:flex; flex-direction:column; gap:15px;}
.search-bar { background: #202327; border-radius: 9999px; padding: 12px 20px; display:flex; align-items:center; gap:10px; border: 1px solid transparent;}
.search-bar:focus-within { border-color: var(--accent-primary); background: transparent;}
.search-bar input { border:none; background:transparent; padding:0; margin:0; color:var(--text-main); font-size:0.95rem; width: 100%;}
.trends-box { background: #16181c; border-radius: 16px; padding: 15px; border: 1px solid var(--border-color); }
.trends-box h3 { margin-bottom: 15px; font-size: 1.2rem; font-weight: 800;}
.trend { padding: 10px 0; cursor: pointer; transition: 0.2s; width: 100%; overflow: hidden;}
.trend:hover { background: rgba(255,255,255,0.03); }

/* CORRECCIÓN OVERFLOW TENDENCIAS */
.trend span { display: block; font-weight: bold; font-size: 0.95rem; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.trend small { color: var(--text-muted); font-size:0.8rem;}

/* === NOTIFICACIONES === */
.notif-item { padding: 15px 20px; border-bottom: 1px solid var(--border-color); display: flex; gap: 15px; align-items: flex-start; transition: 0.2s; cursor: pointer; }
.notif-item:hover { background: rgba(255,255,255,0.03); }
.notif-icon { font-size: 1.5rem; width: 30px; }
.notif-content { flex: 1; font-size: 0.95rem; line-height: 1.4;}
.notif-content strong { color: var(--text-main); }
.notif-time { font-size: 0.8rem; color: var(--text-muted); display: block; margin-top: 5px; }

/* === HILOS === */
.thread-card { background: transparent; padding: 15px 20px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: 0.2s; }
.thread-card:hover { background: rgba(255,255,255,0.03); }
.thread-card h3 { font-size: 1.1rem; margin-bottom: 5px; }
.thread-card p { color: var(--text-main); font-size: 0.95rem; margin-bottom: 5px; }
.thread-card small { color: var(--text-muted); font-size: 0.85rem; }
.thread-active-header { padding: 0 15px; height: 53px; display: flex; align-items: center; border-bottom: 1px solid var(--border-color); backdrop-filter: blur(12px); background: rgba(0, 0, 0, 0.65);}

/* === CHAT / MENSAJES === */
.twitter-messages-layout { display: flex; height: calc(100vh - 53px); }
.messages-sidebar { width: 350px; border-right: 1px solid var(--border-color); display: flex; flex-direction: column; }
.messages-search-box { padding: 10px 15px; border-bottom: 1px solid var(--border-color); }
.messages-search-box input { width: 100%; background: #202327; border: 1px solid transparent; color: white; padding: 10px 15px; border-radius: 9999px; outline: none; margin:0;}
.messages-search-box input:focus { border-color: var(--accent-primary); background: transparent; }
.chat-users-list { flex: 1; overflow-y: auto; }

.chat-contact-item { display: flex; align-items: center; gap: 10px; padding: 15px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: 0.2s; position: relative;}
.chat-contact-item:hover { background: rgba(255,255,255,0.03); }
.chat-contact-item.active { border-right: 3px solid var(--accent-primary); background: rgba(255,255,255,0.05); }
.chat-contact-item img { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; }
.chat-contact-name { font-weight: bold; font-size: 0.95rem; display:flex; align-items:center;}
.chat-contact-tag { color: var(--text-muted); font-size: 0.85rem; }
.chat-unread-badge { background: var(--accent-primary); color: white; font-size: 0.7rem; padding: 2px 6px; border-radius: 50%; position: absolute; right: 15px; font-weight: bold;}

.messages-chat-area { flex: 1; display: flex; flex-direction: column; border-right: 1px solid var(--border-color);}
.chat-placeholder { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }

.chat-header { height: 53px; display: flex; align-items: center; padding: 0 15px; border-bottom: 1px solid var(--border-color); backdrop-filter: blur(12px); background: rgba(0,0,0,0.65);}
.chat-history { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.chat-input-area { padding: 10px 15px; border-top: 1px solid var(--border-color); display: flex; gap: 10px; align-items: center; }
.chat-input-area input { flex: 1; background: #202327; border: 1px solid transparent; color: white; padding: 12px 15px; border-radius: 20px; outline: none; font-size: 0.95rem; margin:0;}
.chat-input-area input:focus { border-color: var(--accent-primary); background: transparent; }
.chat-input-area button { background: transparent; color: var(--accent-primary); border: none; padding: 10px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; transition:0.2s;}
.chat-input-area button:hover { background: rgba(29, 155, 240, 0.1); }

/* Burbujas */
.msg-container { display:flex; flex-direction:column; max-width: 70%; position:relative; }
.msg-sent-container { align-self: flex-end; }
.msg-received-container { align-self: flex-start; }
.msg-bubble { padding: 10px 15px; border-radius: 20px; font-size: 0.95rem; line-height: 1.4; word-wrap: break-word; }
.msg-sent { background: var(--accent-primary); color: white; border-bottom-right-radius: 4px; }
.msg-received { background: #2f3336; color: var(--text-main); border-bottom-left-radius: 4px; }

.msg-status-bar { display: flex; justify-content: flex-end; align-items: center; gap: 5px; font-size: 0.7rem; color: var(--text-muted); margin-top: 4px; padding: 0 5px; }
.msg-status-seen { color: var(--accent-primary); }

.typing-text { font-size: 0.8rem; color: var(--text-muted); font-style: italic; font-weight: normal;}
.msg-delete { position:absolute; top:-10px; right:-10px; background:var(--bg-dark); color:var(--text-muted); border:1px solid var(--border-color); border-radius:50%; width:24px; height:24px; cursor:pointer; font-size:0.7rem; display:none; }
.msg-delete:hover { color: var(--error); border-color: var(--error); }
.msg-container:hover .msg-delete { display:block; }
.msg-sent .hashtag, .msg-sent .mention { color: #ffffff; text-decoration: underline; font-weight: bold; }

/* PANEL MOD */
.mod-user-card { padding: 15px; border-bottom: 1px solid var(--border-color); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.mod-user-info { display:flex; align-items:center; gap:10px; font-weight:bold; }
.mod-user-info img { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.mod-actions { display:flex; gap:10px; }
.badge-mod { background:var(--text-main); color:var(--bg-dark); padding:2px 5px; border-radius:4px; font-size:0.7rem; margin-left:5px;}
.badge-admin { background:var(--error); color:white; padding:2px 5px; border-radius:4px; font-size:0.7rem; margin-left:5px;}

.mobile-only { display: none; }

/* === 📱 MÓVIL RESPONSIVE === */
@media (max-width: 1000px) { 
    .app-layout { grid-template-columns: 80px 1fr; max-width: 700px;} 
    .app-layout.messages-mode { grid-template-columns: 80px 1fr; }
    .sidebar { align-items: center; }
    .sidebar nav a .nav-text, .logo span, .user-info { display: none; } 
    .right-panel { display: none; } 
    .sidebar nav a { padding: 12px; justify-content:center; }
    .sidebar nav a i { margin: 0; }
    .badge-notif { position:absolute; top:5px; right:5px; }
    .post-interactions { max-width: 100%; }
}
@media (max-width: 600px) { 
    .app-layout { display: flex; flex-direction: column; padding-bottom: 50px; margin: 0;} 
    .sidebar { position: fixed; bottom: 0; left: 0; width: 100%; height: 50px; background: var(--bg-dark); border-top: 1px solid var(--border-color); flex-direction: row; padding: 0; z-index: 1000; }
    .logo, .user-profile { display: none; }
    .sidebar nav { display: flex; width: 100%; justify-content: space-around; align-items: center; flex-direction: row;}
    .sidebar nav a { padding: 10px; margin: 0; flex: 1; display: flex; justify-content: center; }
    .badge-notif { top: 5px; right: 15px; padding: 2px 5px; font-size: 0.6rem;}
    
    .feed { border: none; width: 100%; min-height: auto; }
    .twitter-messages-layout { flex-direction: column; height: calc(100vh - 103px); }
    .messages-sidebar { width: 100%; height: auto; border-right: none; }
    .messages-chat-area { width: 100%; flex: 1; position: absolute; top: 0; left: 0; background: var(--bg-dark); z-index: 50; }
    .mobile-only { display: inline-block; }
}