/**
 * Tema Oscuro - Nivel Élite
 * Sistema de modo oscuro profesional inspirado en las mejores redes sociales
 * 
 * @author MrGreen Development Team
 * @version 2.0.0
 * @since 2025-01-08
 */

/* ===== IMPORTAR DESIGN TOKENS ===== */
@import url('../design-tokens.css');

/* ===== VARIABLES CSS PARA MODO OSCURO (COMPATIBILIDAD) ===== */
.dark-mode {
  /* Mantener variables legacy para compatibilidad */
  --body-bg: var(--color-surface-primary) !important;
  --card-bg: var(--color-surface-tertiary) !important;
  --text-primary: var(--color-text-primary) !important;
  --text-secondary: var(--color-text-secondary) !important;
  --text-muted: var(--color-text-tertiary) !important;
  --border-color: var(--color-border-primary) !important;
  --border-color-light: var(--color-border-secondary) !important;
  --sidebar-bg: #0F0F0F !important;
  --top-menu-bg: var(--color-surface-tertiary) !important;
  --gray-50: var(--color-surface-tertiary) !important;
  --gray-100: var(--color-border-primary) !important;
  --gray-200: var(--color-border-secondary) !important;
  --gray-300: var(--color-border-tertiary) !important;
  --white: var(--color-text-inverse) !important;
  
  /* Header Universal */
  --header-bg: var(--color-surface-primary) !important;
  --header-border: var(--color-border-primary) !important;
  --header-shadow: var(--shadow-sm) !important;
  
  /* Dropdown Menu */
  --dropdown-bg: var(--color-surface-elevated) !important;
  --dropdown-border: var(--color-border-primary) !important;
  --dropdown-shadow: var(--shadow-lg) !important;
}

/* ===== FONDOS GENERALES ===== */
.dark-mode {
  background: #18191A !important;
  color: #E4E6EB !important;
}

.dark-mode body, 
.dark-mode html {
  background: #18191A !important;
  color: #E4E6EB !important;
}

.dark-mode .container, 
.dark-mode .container-fluid, 
.dark-mode .page-info, 
.dark-mode main, 
.dark-mode .header, 
.dark-mode .inner_head, 
.dark-mode .page-info > main, 
.dark-mode .bg_parallax, 
.dark-mode .mod-search, 
.dark-mode .mod-reaction-notifications, 
.dark-mode .promo-count, 
.dark-mode .whatsapp-phone, 
.dark-mode .mod-events-vip, 
.dark-mode .site-overlay, 
.dark-mode .main-menu-left, 
.dark-mode .left-menu, 
.dark-mode .row, 
.dark-mode .col, 
.dark-mode .col-5, 
.dark-mode .col-12, 
.dark-mode .col_md_12, 
.dark-mode .col-9, 
.dark-mode .col-4, 
.dark-mode .col-11, 
.dark-mode .col-3, 
.dark-mode .col-2, 
.dark-mode .col-6, 
.dark-mode .col-7, 
.dark-mode .col-8, 
.dark-mode .col-10, 
.dark-mode .col-1, 
.dark-mode .col-0, 
/* Removido - movido a sección MÓDULO DE CONTENIDOS */

/* ===== TARJETAS Y CARDS ===== */
.dark-mode .card, 
.dark-mode .feed-card {
    background: #0F0F0F !important;
    background-color: #0F0F0F !important;
    color: #E4E6EB !important;
    border-color: #3A3B3C !important;
}

.dark-mode .activity-card, 
.dark-mode .modal-content, 
.dark-mode .dropdown-menu, 
.dark-mode .popover, 
.dark-mode .tooltip-inner, 
.dark-mode .tiktok-login-btn, 
.dark-mode .sidebar, 
.dark-mode #tiktok-sidebar-pro, 
.dark-mode .sidebar-logout, 
.dark-mode .sidebar-following-item, 
.dark-mode .sidebar-logo, 
.dark-mode .sidebar-search, 
.dark-mode .sidebar-following-list, 
.dark-mode .sidebar-following-title, 
.dark-mode .sidebar-label, 
.dark-mode .sidebar-logout button, 
.dark-mode .sidebar-logout button:hover {
    background: #242526 !important;
    color: #E4E6EB !important;
    border-color: #3A3B3C !important;
}

/* ===== MÓDULO DE CONTENIDOS - FEED ===== */
/* Contenedor principal del feed */
.dark-mode .main-content,
.dark-mode .feed,
.dark-mode .activity-feed,
.dark-mode .activity-feed-main,
.dark-mode .activity-feed-content,
.dark-mode .activity-feed-container {
    background: #18191A !important;
    color: #E4E6EB !important;
}

.dark-mode #feed-contenido {
    background: transparent !important;
    color: #E4E6EB !important;
}

/* Elementos individuales del feed - SOLO COLORES */
.dark-mode .feed-item,
.dark-mode .feed-card,
.dark-mode .glass-card,
.dark-mode .activity-card,
.dark-mode .post,
.dark-mode .activity-item,
.dark-mode .post-card,
.dark-mode .post-item,
.dark-mode .content,
.dark-mode .mb-4 {
    background: #0F0F0F !important;
    background-color: #0F0F0F !important;
    color: #E4E6EB !important;
}

/* Contenedores de actividad */
.dark-mode .activity,
.dark-mode .activity-index,
.dark-mode .activity-wrapper,
.dark-mode .activity-main,
.dark-mode .activity-container,
.dark-mode .activity-content,
.dark-mode .activity-list,
.dark-mode .activity-feed-list {
    background: #18191A !important;
    color: #E4E6EB !important;
}

/* ===== ELEMENTOS ESPECÍFICOS QUE PUEDEN TENER FONDO CLARO ===== */
/* Contenedores de posts y contenido específico */
.dark-mode .post-content,
.dark-mode .post-body,
.dark-mode .post-text,
.dark-mode .post-description,
.dark-mode .feed-content {
    background: #0F0F0F !important;
    background-color: #0F0F0F !important;
    color: #E4E6EB !important;
}

.dark-mode .activity-content,
.dark-mode .content-body,
.dark-mode .content-text,
.dark-mode .card-content {
    background: transparent !important;
    background-color: transparent !important;
    color: #E4E6EB !important;
}

/* Card body específico para modo oscuro */
.dark-mode .card-body {
    background: #242526 !important;
    background-color: #242526 !important;
    color: #E4E6EB !important;
    border-color: #4A4B4C !important;
    border: 1px solid #4A4B4C !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    border-radius: 8px !important;
}

/* Feed card body específico */
.dark-mode .feed-card .card-body,
.dark-mode .feed-item .card-body {
    background: #0F0F0F !important;
    background-color: #0F0F0F !important;
}

/* Elementos de video y media */
.dark-mode .video-container,
.dark-mode .media-container,
.dark-mode .post-media {
    background: transparent !important;
    background-color: transparent !important;
}

.dark-mode .feed-media {
    background: #0F0F0F !important;
    background-color: #0F0F0F !important;
}

/* Contenedores de interacciones */
.dark-mode .post-actions,
.dark-mode .feed-actions,
.dark-mode .activity-actions,
.dark-mode .interaction-buttons {
    background: transparent !important;
    background-color: transparent !important;
}

/* Elementos de información del usuario */
.dark-mode .user-info,
.dark-mode .post-header,
.dark-mode .feed-header,
.dark-mode .activity-header {
    background: transparent !important;
    background-color: transparent !important;
    color: #E4E6EB !important;
}

/* ===== HEADER DEL FEED ITEM - MODO OSCURO ===== */
.dark-mode .feed-item__header,
.dark-mode .feed-item_header,
.dark-mode .feed-item__header:first-child,
.dark-mode .feed-item_header:first-child,
.dark-mode .feed-card .feed-item__header,
.dark-mode .feed-card .feed-item_header,
.dark-mode .glass-card .feed-item__header,
.dark-mode .glass-card .feed-item_header,
.dark-mode .feed-item .feed-item__header,
.dark-mode .feed-item .feed-item_header {
    background: #0F0F0F !important;
    background-color: #0F0F0F !important;
    background-image: none !important;
    color: #E4E6EB !important;
}

.dark-mode .feed-item:not(.feed-item--shared) > .feed-card > .feed-item__header:first-child,
.dark-mode .feed-item:not(.feed-item--shared) > .feed-card > .feed-item_header:first-child,
.dark-mode .feed-item > .feed-card > .feed-item__header,
.dark-mode .feed-item > .feed-card > .feed-item_header,
.dark-mode .feed-item > .glass-card > .feed-item__header,
.dark-mode .feed-item > .glass-card > .feed-item_header {
    background: #0F0F0F !important;
    background-color: #0F0F0F !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(112, 114, 120, 0.4) !important;
    border-radius: 16px 16px 0 0;
    box-shadow: none !important;
}

/* Sobrescribir cualquier gradiente en elementos del feed */
.dark-mode .feed-item *,
.dark-mode .feed-card *,
.dark-mode .glass-card * {
    background-image: none !important;
}

.dark-mode .feed-item,
.dark-mode .feed-card,
.dark-mode .feed-item__content,
.dark-mode .feed-item__actions,
.dark-mode .feed-item__footer,
.dark-mode .glass-card {
    background: #0F0F0F !important;
    background-color: #0F0F0F !important;
    background-image: none !important;
}

/* Regla ultra específica para el header del feed item - MÁXIMA PRIORIDAD */
.dark-mode .feed-item__header,
.dark-mode .feed-item .feed-item__header,
.dark-mode .feed-card .feed-item__header,
.dark-mode .glass-card .feed-item__header,
.dark-mode .feed-item > .feed-card > .feed-item__header,
.dark-mode .feed-item > .glass-card > .feed-item__header,
.dark-mode .feed-item__header:first-child,
.dark-mode .feed-item__header:last-child,
.dark-mode .feed-item__header:not(.feed-item__header--nested) {
    background: #0F0F0F !important;
    background-color: #0F0F0F !important;
    background-image: none !important;
    color: #E4E6EB !important;
}

/* ===== CONTENIDO Y ACCIONES DEL FEED ITEM - MODO OSCURO ===== */
.dark-mode .feed-item__content,
.dark-mode .feed-item__actions,
.dark-mode .feed-item__footer {
    background: #0F0F0F !important;
    background-color: #0F0F0F !important;
}

.dark-mode .feed-card .feed-item__content,
.dark-mode .feed-card .feed-item__actions,
.dark-mode .feed-card .feed-item__footer {
    background: #0F0F0F !important;
    background-color: #0F0F0F !important;
}

/* ===== TEXTOS ===== */
.dark-mode .text-dark, 
.dark-mode .text-secondary {
    color: #E4E6EB !important;
}

.dark-mode .text-muted {
    color: #B0B3B8 !important;
}

/* ===== TEXTOS EN CONTENIDOS DEL FEED ===== */
/* Textos principales en posts y feed items */
.dark-mode .post h1,
.dark-mode .post h2,
.dark-mode .post h3,
.dark-mode .post h4,
.dark-mode .post h5,
.dark-mode .post h6,
.dark-mode .feed-item h1,
.dark-mode .feed-item h2,
.dark-mode .feed-item h3,
.dark-mode .feed-item h4,
.dark-mode .feed-item h5,
.dark-mode .feed-item h6,
.dark-mode .post-title,
.dark-mode .feed-title,
.dark-mode .activity-title {
    color: #E4E6EB !important;
}

/* Textos de descripción y contenido */
.dark-mode .post p,
.dark-mode .post span,
.dark-mode .post div,
.dark-mode .feed-item p,
.dark-mode .feed-item span,
.dark-mode .feed-item div,
.dark-mode .post-description,
.dark-mode .feed-description,
.dark-mode .activity-description {
    color: #E4E6EB !important;
}

/* Textos de información del usuario */
.dark-mode .user-name,
.dark-mode .post-author,
.dark-mode .feed-author,
.dark-mode .activity-author,
.dark-mode .post-time,
.dark-mode .feed-time,
.dark-mode .activity-time {
    color: #B0B3B8 !important;
}

/* Textos de botones e interacciones */
.dark-mode .btn-text,
.dark-mode .action-text,
.dark-mode .interaction-text {
    color: #E4E6EB !important;
}

/* ===== BORDES ===== */
.dark-mode .border, 
.dark-mode .border-light, 
.dark-mode .border-secondary {
    border-color: #3A3B3C !important;
}

/* ===== FONDOS ESPECÍFICOS ===== */
.dark-mode .bg-white, 
.dark-mode .bg-light, 
.dark-mode .bg-secondary {
    background: #242526 !important;
}

/* ===== REGLA GENERAL PARA ELIMINAR FONDOS CLAROS ===== */
/* Cualquier elemento que pueda tener fondo blanco o claro */
.dark-mode [style*="background-color: white"],
.dark-mode [style*="background-color: #fff"],
.dark-mode [style*="background-color: #ffffff"],
.dark-mode [style*="background: white"],
.dark-mode [style*="background: #fff"],
.dark-mode [style*="background: #ffffff"],
.dark-mode [style*="background-color: #f8f9fa"],
.dark-mode [style*="background: #f8f9fa"],
.dark-mode [style*="background-color: #ffffff"],
.dark-mode [style*="background: #ffffff"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* ===== REGLA ULTRA ESPECÍFICA PARA ELIMINAR TODOS LOS FONDOS BLANCOS ===== */
/* Sobrescribir TODOS los fondos blancos de cualquier archivo CSS - SOLO COLORES */
.dark-mode * {
    background-color: transparent !important;
}

/* Restaurar fondos específicos que SÍ deben tener color en modo oscuro */
.dark-mode body,
.dark-mode html {
    background: #18191A !important;
}

.dark-mode .main-content,
.dark-mode .feed,
.dark-mode .activity-feed,
.dark-mode .activity-feed-main,
.dark-mode .activity-feed-content,
.dark-mode .activity-feed-container {
    background: #18191A !important;
}

.dark-mode #top-menu-bar {
    background-color: #2d2d2d !important;
}

.dark-mode #main-sidebar {
    background-color: #0F0F0F !important;
}

.dark-mode #user-dropdown-menu {
    background-color: #2d2d2d !important;
}

.dark-mode #accessibility-submenu {
    background-color: #2d2d2d !important;
}

.dark-mode .modal-content {
    background: #242526 !important;
}

.dark-mode .dropdown-menu {
    background: #242526 !important;
}

/* ===== SOBRESCRIBIR FONDOS BLANCOS DE ARCHIVOS ESPECÍFICOS ===== */
/* Essential Menus */
.dark-mode #tiktok-sidebar-pro {
    background: #0F0F0F !important;
}

.dark-mode #tiktok-sidebar-pro nav ul li a:hover {
    background: #404040 !important;
}

.dark-mode #tiktok-sidebar-pro .sidebar-logout button:hover {
    background: #404040 !important;
}

/* User Menu Components */
.dark-mode .user-menu {
    background: #2d2d2d !important;
}

.dark-mode #notifications-list li:hover {
    background-color: #404040 !important;
}

/* Accessibility Components */
.dark-mode #accessibility-submenu {
    background: #2d2d2d !important;
}

.dark-mode .section-header.clickable:hover {
    background-color: #404040 !important;
}

.dark-mode .back-button:hover {
    background-color: #404040 !important;
}

/* Streaming Components */
.dark-mode .stream-info {
    background: #242526 !important;
}

.dark-mode .chat-container {
    background: transparent !important;
}

.dark-mode .chat-header {
    background: #2d2d2d !important;
}

.dark-mode .chat-messages {
    background: #1e1e1e !important;
}

.dark-mode .chat-input-container {
    background: #2d2d2d !important;
}

.dark-mode .chat-input {
    background: #404040 !important;
}

/* ===== VENTANA DE CHAT MODERNA (CHAT-WINDOW) ===== */
.dark-mode .chat-window {
    background: #242526 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

.dark-mode .chat-window.is-active {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6) !important;
}

.dark-mode .chat-window__messages {
    background: #18191A !important;
}

.dark-mode .message--received .message__content {
    background: #3A3B3C !important;
    color: #E4E6EB !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .message--own .message__content {
    background: linear-gradient(135deg, #76ED00 0%, #5db300 100%) !important;
    color: #0F4D00 !important;
}

.dark-mode .message--own .message__meta {
    color: #0F4D00 !important;
    opacity: 0.8 !important;
}

.dark-mode .message__meta {
    color: #B0B3B8 !important;
}

.dark-mode .chat-window__input-container {
    background: #242526 !important;
    border-top: 1px solid #3A3B3C !important;
}

.dark-mode .chat-window__input {
    background: #3A3B3C !important;
    color: #E4E6EB !important;
    border: 1px solid #4E4F50 !important;
}

.dark-mode .chat-window__input:focus {
    border-color: #76ED00 !important;
    box-shadow: 0 0 0 3px rgba(118, 237, 0, 0.15) !important;
}

.dark-mode .chat-window__input::placeholder {
    color: #8A8D91 !important;
}

.dark-mode .chat-window__messages::-webkit-scrollbar-thumb {
    background: #4E4F50 !important;
}

.dark-mode .chat-window__messages::-webkit-scrollbar-thumb:hover {
    background: #5E5F60 !important;
}

.dark-mode .chat-loading-indicator {
    color: #B0B3B8 !important;
}

.dark-mode .chat-loading-spinner {
    border-color: #3A3B3C !important;
    border-top-color: #76ED00 !important;
}

/* Modal Components */
.dark-mode .modal-content {
    background: #242526 !important;
}

/* Form Controls */
.dark-mode .form-control,
.dark-mode .input,
.dark-mode .textarea {
    background: #404040 !important;
    color: #E4E6EB !important;
}

/* Buttons */
.dark-mode .btn {
    background: #404040 !important;
    color: #E4E6EB !important;
}

.dark-mode .btn-primary {
    background: #ff0050 !important;
    color: #ffffff !important;
}

/* ===== SOBRESCRIBIR FONDOS CLAROS DE APPLICATION.CSS ===== */
/* Elementos que pueden tener fondos claros definidos en application.css - SOLO COLORES */
.dark-mode .post,
.dark-mode .activity-item,
.dark-mode .feed-item {
    background: transparent !important;
    background-color: transparent !important;
    color: #E4E6EB !important;
}

/* ===== CREATE POST CARD Y GLASS CARD - MODO OSCURO ===== */
/* Solo modificar colores, mantener estructura */
/* ✅ NOTA: Los estilos de create-post-card están en create-post-system.css */
/* Este override solo se aplica si es necesario para compatibilidad */
.dark-mode .create-post-card {
    background: #0E0E0E !important;
    background-color: #0E0E0E !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #E4E6EB !important;
}

.dark-mode .glass-card {
    background: #0F0F0F !important;
    background-color: #0F0F0F !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #E4E6EB !important;
}

/* Glass card específico para feed */
.dark-mode .feed-item .glass-card,
.dark-mode .feed-card.glass-card {
    background: #0F0F0F !important;
    background-color: #0F0F0F !important;
    backdrop-filter: none !important;
}

.dark-mode .glass-card:hover {
    /* Sin efectos hover */
}

/* Textarea dentro de create-post-card */
.dark-mode .new-post-textarea {
    background-color: transparent !important;
    color: #E4E6EB !important;
    border: none !important;
}

.dark-mode .new-post-textarea:focus {
    background-color: transparent !important;
    color: #E4E6EB !important;
    outline: none !important;
}

.dark-mode .new-post-textarea::placeholder {
    color: #B0B3B8 !important;
}

/* ===== CLASES DE PADDING - MODO OSCURO ===== */
/* Solo modificar colores, mantener padding original */
.dark-mode .p-3 {
    /* Mantener padding original, solo cambiar colores si es necesario */
    color: #E4E6EB !important;
}

/* Elementos dentro de p-3 */
.dark-mode .p-3 * {
    color: #E4E6EB !important;
}

/* Textos específicos en p-3 */
.dark-mode .p-3 h1,
.dark-mode .p-3 h2,
.dark-mode .p-3 h3,
.dark-mode .p-3 h4,
.dark-mode .p-3 h5,
.dark-mode .p-3 h6 {
    color: #E4E6EB !important;
}

.dark-mode .p-3 p,
.dark-mode .p-3 span,
.dark-mode .p-3 div {
    color: #E4E6EB !important;
}

.dark-mode .p-3 .text-muted {
    color: #B0B3B8 !important;
}

/* Contenedores de contenido específico - SOLO COLORES */
.dark-mode .content,
.dark-mode .post-content,
.dark-mode .post-body,
.dark-mode .activity-content,
.dark-mode .feed-content {
    background: transparent !important;
    background-color: transparent !important;
    color: #E4E6EB !important;
}

/* Elementos de interacción - SOLO COLORES */
.dark-mode .post-actions,
.dark-mode .feed-actions,
.dark-mode .activity-actions {
    background: transparent !important;
    background-color: transparent !important;
}

/* Información del usuario en posts */
.dark-mode .user-info,
.dark-mode .post-header,
.dark-mode .activity-header,
.dark-mode .feed-header {
    background: transparent !important;
    background-color: transparent !important;
    color: #E4E6EB !important;
}

/* ===== ELEMENTOS DE LA APLICACIÓN ===== */
.dark-mode #top-menu-bar {
  background-color: #2d2d2d !important;
  border-bottom-color: #404040 !important;
}

.dark-mode #main-sidebar {
  background-color: #0F0F0F !important;
  border-right-color: #404040 !important;
}

/* ===== SIDEBAR MODERNO - MODO OSCURO ===== */
.dark-mode #main-sidebar,
.dark-mode .sidebar-module {
  background-color: #0F0F0F !important;
}

.dark-mode #main-sidebar .sidebar-menu-link {
  color: #ffffff !important;
}

.dark-mode #main-sidebar .sidebar-menu-link:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

.dark-mode #main-sidebar .sidebar-menu-link.active {
  background-color: rgba(83, 252, 27, 0.15) !important;
  color: #53fc1b !important;
  border-right-color: rgba(83, 252, 27, 0.55) !important;
}

.dark-mode #main-sidebar .sidebar-menu-link.active:hover {
  background-color: rgba(83, 252, 27, 0.25) !important;
  color: #4ae317 !important;
}

.dark-mode #main-sidebar .sidebar-menu-icon {
  color: #b0b0b0 !important;
}

.dark-mode #main-sidebar .sidebar-menu-link:hover .sidebar-menu-icon {
  color: #ffffff !important;
}

.dark-mode #main-sidebar .sidebar-menu-link.active .sidebar-menu-icon {
  color: rgba(83, 252, 27, 0.85) !important;
}

.dark-mode #main-sidebar .sidebar-menu-label {
  color: #ffffff !important;
}

.dark-mode #main-sidebar .sidebar-menu-link.active .sidebar-menu-label {
  color: #53fc1b !important;
}

.dark-mode #main-sidebar .sidebar-menu-username {
  color: #b0b0b0 !important;
}

.dark-mode #main-sidebar .sidebar-profile-avatar {
  border-color: #404040 !important;
}

.dark-mode #main-sidebar .profile-link:hover .sidebar-profile-avatar {
  border-color: #ffffff !important;
}

.dark-mode #main-sidebar .profile-link.active .sidebar-profile-avatar {
  border-color: rgba(83, 252, 27, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(83, 252, 27, 0.25) !important;
}

.dark-mode #main-sidebar .sidebar-badge {
  background-color: #ffffff !important;
  color: #6b7280 !important;
}

.dark-mode .badge-notify {
  background-color: #ffffff !important;
  color: #6b7280 !important;
}

.dark-mode .sidebar-separator {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* ===== MÓDULO DE LIVE STREAMS - MODO OSCURO ===== */
.dark-mode .live-streams-integrated {
  background: transparent !important;
}

.dark-mode .live-streams-title {
  color: #ffffff !important;
}

.dark-mode .live-user-name {
  color: #ffffff !important;
}

.dark-mode .live-user-category {
  color: #b0b0b0 !important;
}

.dark-mode .live-en-vivo-badge {
  background: #53fc1b !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.dark-mode .live-user-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .live-view-more-btn {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #b0b0b0 !important;
}

.dark-mode .live-view-more-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

/* ===== BOTONES DE REACCIONES DEL FEED - MODO OSCURO ===== */
/* Los estilos base están en webroot/css/components/_feed-reactions.css */
/* Solo anulaciones de color específicas para modo oscuro si es necesario */

.dark-mode #user-dropdown-menu {
  background-color: #2d2d2d !important;
  border-color: #404040 !important;
}

.dark-mode #user-dropdown-menu a {
  color: #ffffff !important;
}

.dark-mode #user-dropdown-menu a:hover {
  background-color: #404040 !important;
}

/* ===== MENÚ DE ACCESIBILIDAD ===== */
.dark-mode #accessibility-submenu {
  background-color: #2d2d2d !important;
  border-color: #404040 !important;
    color: #E4E6EB !important;
}

/* Elementos internos del menú de accesibilidad - SOLO MODO OSCURO */
.dark-mode #accessibility-submenu .accessibility-header {
  background-color: #1e1e1e !important;
  border-bottom-color: #404040 !important;
    color: #E4E6EB !important;
}

.dark-mode #accessibility-submenu .back-button {
    color: #E4E6EB !important;
}

.dark-mode #accessibility-submenu .back-button:hover {
  background-color: #404040 !important;
  color: #ffffff !important;
}

.dark-mode #accessibility-submenu h6 {
    color: #E4E6EB !important;
}

.dark-mode #accessibility-submenu p {
    color: #B0B3B8 !important;
}

.dark-mode #accessibility-submenu .radio-option span {
    color: #E4E6EB !important;
}

.dark-mode #accessibility-submenu .radio-custom {
  border-color: #666 !important;
}

.dark-mode #accessibility-submenu .radio-option:hover .radio-custom {
  border-color: #ff0050 !important;
}

.dark-mode #accessibility-submenu .radio-option input:checked + .radio-custom {
  border-color: #ff0050 !important;
  background-color: #ff0050 !important;
}

/* Estilos específicos para el radio button del modo oscuro en tema oscuro */
.dark-mode #accessibility-submenu .radio-option input[value="off"]:checked + .radio-custom {
  border-color: #ff0050 !important;
  background-color: #ff0050 !important;
}

.dark-mode #accessibility-submenu .radio-option input[value="on"]:checked + .radio-custom {
  border-color: #28a745 !important;
  background-color: #28a745 !important;
}

.dark-mode #accessibility-menu-item {
  color: #ffffff !important;
}

.dark-mode #accessibility-menu-item:hover {
  background-color: #404040 !important;
  color: #ffffff !important;
}

.dark-mode .accessibility-header {
  background-color: #1e1e1e !important;
  border-bottom-color: #404040 !important;
}

.dark-mode .section-content h6 {
  color: #ffffff !important;
}

.dark-mode .section-content p {
  color: #cccccc !important;
}

.dark-mode .radio-option:hover {
  background-color: #404040 !important;
}

/* ===== BUSCADOR ===== */
.dark-mode .search-input {
  background-color: #404040 !important;
  border-color: #555 !important;
  color: #ffffff !important;
}

.dark-mode .search-input:focus {
  background-color: #2d2d2d !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 2px rgba(255, 0, 80, 0.2) !important;
}

.dark-mode .search-input::placeholder {
  color: #999 !important;
}

.dark-mode .search-icon {
  color: #999 !important;
}

.dark-mode .search-clear {
  color: #999 !important;
}

.dark-mode .search-clear:hover {
  background-color: #555 !important;
  color: #ffffff !important;
}

/* ===== SUBMENÚ DE ACCESIBILIDAD ===== */
.dark-mode .back-button {
  color: #ffffff !important;
}

.dark-mode .back-button:hover {
  background-color: #404040 !important;
  color: #ff0050 !important;
}

.dark-mode .radio-option {
  color: #ffffff !important;
}

.dark-mode .radio-custom {
  border-color: #666 !important;
}

.dark-mode .radio-option input[type="radio"]:checked + .radio-custom {
  border-color: #ff0050 !important;
  background-color: #ff0050 !important;
}

/* ===== BOTONES ===== */
.dark-mode .btn, 
.dark-mode .btn-primary, 
.dark-mode .btn-success, 
.dark-mode .btn-danger, 
.dark-mode .btn-warning, 
.dark-mode .btn-info {
    background: #3A3B3C !important;
    color: #E4E6EB !important;
    border-color: #3A3B3C !important;
}

.dark-mode .btn-primary, 
.dark-mode .btn-success, 
.dark-mode .btn-danger, 
.dark-mode .btn-warning, 
.dark-mode .btn-info {
    background: #ff0050 !important;
    color: #fff !important;
  border-color: #ff0050 !important;
}

/* ===== INPUTS ===== */
.dark-mode input, 
.dark-mode textarea, 
.dark-mode select, 
.dark-mode .form-control, 
.dark-mode .input, 
.dark-mode .textarea {
    background: #242526 !important;
    color: #E4E6EB !important;
    border-color: #3A3B3C !important;
}

.dark-mode .form-label, 
.dark-mode label {
    color: #B0B3B8 !important;
}

/* ===== NAVBAR Y SIDEBAR ===== */
.dark-mode .navbar, 
.dark-mode .header, 
.dark-mode .main-menu-left {
    background: #18191A !important;
    color: #E4E6EB !important;
}

.dark-mode .sidebar, 
.dark-mode #tiktok-sidebar-pro {
    background: #18191A !important;
    color: #E4E6EB !important;
}

.dark-mode .sidebar-logout button, 
.dark-mode .sidebar-following-item {
    color: #E4E6EB !important;
    background: transparent !important;
}

.dark-mode .sidebar-logout button:hover, 
.dark-mode .sidebar-following-item:hover {
    color: #53fc19 !important;
    background: transparent !important;
}

/* ===== DROPDOWNS ===== */
.dark-mode .dropdown-menu, 
.dark-mode #user-dropdown-menu {
    background: #242526 !important;
    color: #E4E6EB !important;
    border-color: #3A3B3C !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

.dark-mode .dropdown-menu a, 
.dark-mode #user-dropdown-menu a {
    color: #E4E6EB !important;
}

.dark-mode .dropdown-menu a:hover, 
.dark-mode #user-dropdown-menu a:hover {
    background: #3A3B3C !important;
    color: #ff0050 !important;
}

/* ===== MODALES ===== */
.dark-mode .modal-content {
    background: #242526 !important;
    color: #E4E6EB !important;
    border-color: #3A3B3C !important;
}

/* ===== ENLACES ===== */
.dark-mode a, 
.dark-mode a:visited {

}

.dark-mode a:hover {
    color: #53fc19 !important;
}

/* ===== ELEMENTOS ESPECÍFICOS ===== */
.dark-mode .sidebar-logo span {
    color: #53fc19 !important;
}

.dark-mode .sidebar-following-avatar {
    border: 2px solid #53fc19 !important;
}

.dark-mode .badge-notify {
  background: #53fc19 !important;
  color: #fff !important;
}

/* ===== SWITCH/TOGGLE ===== */
.dark-mode .switch .slider {
  background-color: #4E4F50 !important;
}

.dark-mode .switch .slider:before {
  background-color: #E4E6EB !important;
}

.dark-mode input:checked + .slider {
  background-color: #53fc19 !important;
}

/* ===== IMPORTAR ESTILOS DE BOTONES DE INTERACCIÓN ===== */
@import url('../components/_feed-interaction-buttons.css');
@import url('./_dark-theme-interaction-buttons.css');

/* ===== BORDES DE COMENTARIOS EN MODO OSCURO ===== */
.dark-mode .comment-bubble, .dark-mode .fb-comment-bubble {
    background: #242526 !important;
    border: 1px solid #1E1F20 !important;
  color: #E4E6EB !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
    transition: all 0.2s ease !important;
}

.dark-mode .comment-bubble:hover, .dark-mode .fb-comment-bubble:hover {
    border-color: #2A2B2C !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
}

/* ===== COMENTARIOS EN MODO OSCURO ===== */
.dark-mode .fb-comment, .dark-mode .comments-list, .dark-mode .feed-comments-preview {
  background: #0F0F0F !important;
  color: #E4E6EB !important;
  border-color: #3A3B3C !important;
}

.dark-mode .fb-comment-author {
    color: #E4E6EB !important;
}

.dark-mode .fb-comment-date, .dark-mode .fb-comment-actions, .dark-mode .fb-comment-actions a {
    color: #B0B3B8 !important;
}

.dark-mode .fb-comment-text {
  color: #E4E6EB !important;
}

.dark-mode .fb-comment-avatar {
    background: #18191A !important;
    border: 2px solid #3A3B3C !important;
}

.dark-mode .edit-comment-input, .dark-mode .edit-comment-form input {
    background: #3A3B3C !important;
  color: #E4E6EB !important;
    border: 1px solid #4E4F50 !important;
}

.dark-mode .edit-comment-form button {
    background: #3A3B3C !important;
    color: #E4E6EB !important;
    border: 1px solid #4E4F50 !important;
}

.dark-mode .edit-comment-form button:hover {
    background: #53fc1b !important;
    color: #fff !important;
}

.dark-mode .alert, .dark-mode .alert-warning, .dark-mode .alert-danger {
    background: #3A3B3C !important;
  color: #E4E6EB !important;
    border-color: #53fc1b !important;
}

/* ===== MENÚ DE EDICIÓN DE COMENTARIOS EN MODO OSCURO ===== */
.dark-mode .fb-comment .dropdown-menu {
    background: #242526 !important;
    color: #E4E6EB !important;
    border: 1px solid #3A3B3C !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35) !important;
}

.dark-mode .fb-comment .dropdown-menu .dropdown-item {
    color: #E4E6EB !important;
    background: transparent !important;
}

.dark-mode .fb-comment .dropdown-menu .dropdown-item:hover {
    background: #3A3B3C !important;
    color: #53fc1b !important;
}

.dark-mode .fb-comment .dropdown-menu .dropdown-item.text-danger {
    color: #ff0050 !important;
}

.dark-mode .fb-comment .dropdown-menu .dropdown-item.text-danger:hover {
    background: #3A3B3C !important;
    color: #fff !important;
}

/* ===== ICONOS DE REACCIONES BLANCOS EN MODO OSCURO - MÁXIMA ESPECIFICIDAD ===== */
.dark-mode .btn-like i, .dark-mode .btn-comment i, .dark-mode .btn-share i,
.dark-mode button.btn-like i, .dark-mode button.btn-comment i, .dark-mode button.btn-share i,
.dark-mode .btn.btn-like i, .dark-mode .btn.btn-comment i, .dark-mode .btn.btn-share i,
.dark-mode .feed-item .btn-like i, .dark-mode .feed-item .btn-comment i, .dark-mode .feed-item .btn-share i,
.dark-mode .activity-card .btn-like i, .dark-mode .activity-card .btn-comment i, .dark-mode .activity-card .btn-share i {
    color: #ffffff !important;
}

.dark-mode .btn-like span, .dark-mode .btn-comment span, .dark-mode .btn-share span,
.dark-mode button.btn-like span, .dark-mode button.btn-comment span, .dark-mode button.btn-share span,
.dark-mode .btn.btn-like span, .dark-mode .btn.btn-comment span, .dark-mode .btn.btn-share span,
.dark-mode .feed-item .btn-like span, .dark-mode .feed-item .btn-comment span, .dark-mode .feed-item .btn-share span,
.dark-mode .activity-card .btn-like span, .dark-mode .activity-card .btn-comment span, .dark-mode .activity-card .btn-share span {
    color: #ffffff !important;
}

/* ===== BOTONES "VER MÁS" CON HOVER VERDE EN MODO OSCURO ===== */
.dark-mode .show-more-comments {
    background: transparent !important;
    color: #999999 !important;
    border: 1px solid #555555 !important;
    box-shadow: none !important;
}

.dark-mode .show-more-comments:hover {
    background: #53fc1b !important;
    color: #ffffff !important;
    border-color: #53fc1b !important;
    text-decoration: none !important;
}

.dark-mode .live-view-more-btn {
    background: transparent !important;
    color: #999999 !important;
    border: 1px solid #555555 !important;
    box-shadow: none !important;
}

.dark-mode .live-view-more-btn:hover {
    background: #53fc1b !important;
    color: #ffffff !important;
    border-color: #53fc1b !important;
    text-decoration: none !important;
}

/* ===== BOTONES "VER MÁS" EN PUBLICACIONES - MODO OSCURO ===== */
.dark-mode .see-more,
.dark-mode .see-more-data,
.dark-mode .see-less,
.dark-mode .publication .see-more,
.dark-mode .publication .see-more-data,
.dark-mode .content .see-more,
.dark-mode .content .see-more-data,
.dark-mode .feed-item .see-more,
.dark-mode .feed-item .see-more-data {
    color: #999999 !important;
    background: transparent !important;
    border: 1px solid #555555 !important;
    padding: 0.3rem 0.8rem !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.2s ease !important;
}

.dark-mode .see-more:hover,
.dark-mode .see-more-data:hover,
.dark-mode .see-less:hover,
.dark-mode .publication .see-more:hover,
.dark-mode .publication .see-more-data:hover,
.dark-mode .content .see-more:hover,
.dark-mode .content .see-more-data:hover,
.dark-mode .feed-item .see-more:hover,
.dark-mode .feed-item .see-more-data:hover,
.dark-mode .ver-mas-btn:hover,
.dark-mode .see-more-btn:hover {
    color: #53fc1b !important;
    background: rgba(83, 252, 27, 0.1) !important;
    border-color: #53fc1b !important;
    text-decoration: none !important;
}


/* ===== BOTÓN "VER MÁS" (btn-vermas) EN MODO OSCURO ===== */
.dark-mode .btn-vermas {
    background: transparent !important;
    color: #999999 !important;
    border: 1px solid #555555 !important;
    box-shadow: none !important;
}

.dark-mode .btn-vermas:hover {
    background: #53fc1b !important;
    color: #ffffff !important;
    border-color: #53fc1b !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(83, 252, 27, 0.3) !important;
}

.dark-mode .btn-vermas i {
    color: #999999 !important;
}

.dark-mode .btn-vermas:hover i {
    color: #ffffff !important;
}

/* ===== ESTADOS HOVER ===== */
.dark-mode .section-header.clickable:hover {
  background-color: #3A3B3C !important;
}

.dark-mode .back-button:hover {
  background-color: #3A3B3C !important;
}

/* ===== HEADER UNIVERSAL - MODO OSCURO ===== */
.dark-mode .universal-header {
  background: var(--header-bg) !important;
  border-bottom-color: var(--header-border) !important;
  box-shadow: var(--header-shadow) !important;
}

.dark-mode .universal-header__beta-badge {
  color: #9ca3af;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0.7;
}

.dark-mode .universal-header__logo:hover .universal-header__beta-badge {
  opacity: 1;
}

.dark-mode .universal-header__logo-text {
  color: #f9fafb !important;
}

.dark-mode .universal-header__search-input {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
  border-color: #3a3b3c !important;
}

.dark-mode .universal-header__search-input:focus {
  background: #3a3b3c !important;
  border-color: #53fc1b !important;
  box-shadow: 0 0 0 3px rgba(83, 252, 27, 0.1) !important;
}

.dark-mode .universal-header__search-input::placeholder {
  color: #b0b3b8 !important;
}

.dark-mode .universal-header__search-icon {
  color: #b0b3b8 !important;
}

.dark-mode .universal-header__search-clear {
  color: #b0b3b8 !important;
}

.dark-mode .universal-header__search-clear:hover {
  color: #e4e6eb !important;
}

.dark-mode .universal-header__login-btn {
  background: #53fc1b !important;
  color: #081902 !important;
}

.dark-mode .universal-header__login-btn:hover {
  background: #4ae317 !important;
  color: #081902 !important;
}

.dark-mode .universal-header__register-btn {
  background: transparent !important;
  color: #53fc1b !important;
  border-color: #53fc1b !important;
}

.dark-mode .universal-header__register-btn:hover {
  background: #53fc1b !important;
  color: #081902 !important;
}

.dark-mode .universal-header__notifications:hover {
  background: #3a3b3c !important;
}

.dark-mode .universal-header__notifications i {
  color: #b0b3b8 !important;
}

.dark-mode .universal-header__notifications-panel {
  background: var(--dropdown-bg) !important;
  border-color: var(--dropdown-border) !important;
  box-shadow: var(--dropdown-shadow) !important;
}

.dark-mode .universal-header__notifications-header {
  border-bottom-color: var(--dropdown-border) !important;
}

.dark-mode .universal-header__notifications-empty {
  color: #b0b3b8 !important;
}

.dark-mode .universal-header__notification-item {
  border-bottom-color: var(--dropdown-border) !important;
}

.dark-mode .universal-header__notification-item.is-unread {
  background: rgba(58, 59, 60, 0.6) !important;
}

.dark-mode .universal-header__notification-title {
  color: #f9fafb !important;
}

.dark-mode .universal-header__notification-message {
  color: #d1d5db !important;
}

.dark-mode .universal-header__notification-time {
  color: #9ca3af !important;
}

.dark-mode .universal-header__user-avatar:hover {
  background: #3a3b3c !important;
}

.dark-mode .universal-header__dropdown {
  background: var(--dropdown-bg) !important;
  border-color: var(--dropdown-border) !important;
  box-shadow: var(--dropdown-shadow) !important;
}

.dark-mode .universal-header__dropdown-header {
  border-bottom-color: var(--dropdown-border) !important;
}

.dark-mode .universal-header__dropdown-name {
  color: #f9fafb !important;
}

.dark-mode .universal-header__dropdown-email {
  color: #b0b3b8 !important;
}

.dark-mode .universal-header__dropdown-item {
  color: #e4e6eb !important;
}

.dark-mode .universal-header__dropdown-item:hover {
  background: #3a3b3c !important;
}

.dark-mode .universal-header__dropdown-item i {
  color: #b0b3b8 !important;
}

.dark-mode .universal-header__dropdown-divider {
  background: var(--dropdown-border) !important;
}

.dark-mode .universal-header__dropdown-item--logout {
  color: #ff6b6b !important;
}

.dark-mode .universal-header__dropdown-item--logout:hover {
  background: #3a3b3c !important;
}

.dark-mode .universal-header__dropdown-submenu-trigger {
  color: #f9fafb !important;
}

.dark-mode .universal-header__dropdown-submenu-trigger:hover {
  background: #3a3b3c !important;
}

.dark-mode .universal-header__dropdown-chevron {
  color: #9ca3af !important;
}

.dark-mode .universal-header__dropdown-submenu-content {
  background: #1f2937 !important;
  border-color: #374151 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.dark-mode .universal-header__dropdown-item--dark-mode {
  color: #e4e6eb !important;
}

.dark-mode .universal-header__dropdown-item--dark-mode:hover {
  background: #3a3b3c !important;
}

.dark-mode .universal-header__dark-mode-text {
  color: #e4e6eb !important;
}

.dark-mode .universal-header__dark-mode-toggle {
  background: #3a3b3c !important;
}

.dark-mode .universal-header__dark-mode-toggle.active {
  background: #ff0050 !important;
}

.dark-mode .universal-header__appearance-overlay {
  background: transparent !important;
  backdrop-filter: none !important;
}

.dark-mode .universal-header__appearance-panel {
  background: #1a1a1a !important;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.8) !important;
  border-left: 1px solid #2d2d2d !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 15001 !important;
}

.dark-mode .universal-header__appearance-panel::before {
  background: #1a1a1a !important;
  z-index: -1 !important;
}

.dark-mode .universal-header__appearance-overlay.active .universal-header__appearance-panel {
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.dark-mode .universal-header__appearance-panel {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: 320px !important;
  height: 100vh !important;
  background: #1a1a1a !important;
  border-left: 1px solid #2d2d2d !important;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.8) !important;
  transform: translateX(100%) !important;
  transition: transform 0.3s ease !important;
  z-index: 15001 !important;
}

.dark-mode .universal-header__appearance-header {
  background: #1a1a1a !important;
  border-bottom-color: #2d2d2d !important;
}

.dark-mode .universal-header__appearance-back {
  color: #ffffff !important;
}

.dark-mode .universal-header__appearance-back:hover {
  background: #2d2d2d !important;
}

.dark-mode .universal-header__appearance-title {
  color: #ffffff !important;
}

.dark-mode .universal-header__appearance-section-icon {
  color: #cccccc !important;
}

.dark-mode .universal-header__appearance-section-title {
  color: #ffffff !important;
}

.dark-mode .universal-header__appearance-section-description {
  color: #cccccc !important;
}

.dark-mode .universal-header__appearance-option:hover {
  background: #2d2d2d !important;
}

.dark-mode .universal-header__appearance-option-text {
  color: #ffffff !important;
}

.dark-mode .universal-header__appearance-option-description {
  color: #cccccc !important;
}

.dark-mode .universal-header__appearance-content {
  background: #1a1a1a !important;
}

.dark-mode .universal-header__appearance-option-indicator {
  border-color: #666666 !important;
}

.dark-mode .universal-header__appearance-radio:checked + .universal-header__appearance-option-text + .universal-header__appearance-option-indicator {
  background: #ff0050 !important;
  border-color: #ff0050 !important;
}

.dark-mode .universal-header__appearance-overlay .universal-header__appearance-panel {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
}

/* ===== SKELETON LOADER - MODO OSCURO ===== */
.dark-mode .skeleton-feed-item {
  background: #242526 !important;
  border: 1px solid #3a3b3c !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
}

.dark-mode .skeleton-header {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 12px !important;
  gap: 12px !important;
}

.dark-mode .skeleton-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: linear-gradient(90deg, #3a3b3c 25%, #2d2d2d 50%, #3a3b3c 75%) !important;
  background-size: 200% 100% !important;
  animation: skeleton-loading 1.5s ease-in-out infinite !important;
  flex-shrink: 0 !important;
}

.dark-mode .skeleton-user-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.dark-mode .skeleton-name {
  height: 14px !important;
  width: 120px !important;
  background: linear-gradient(90deg, #3a3b3c 25%, #2d2d2d 50%, #3a3b3c 75%) !important;
  background-size: 200% 100% !important;
  border-radius: 6px !important;
  animation: skeleton-loading 1.5s ease-in-out infinite !important;
}

.dark-mode .skeleton-time {
  height: 10px !important;
  width: 80px !important;
  background: linear-gradient(90deg, #3a3b3c 25%, #2d2d2d 50%, #3a3b3c 75%) !important;
  background-size: 200% 100% !important;
  border-radius: 6px !important;
  animation: skeleton-loading 1.5s ease-in-out infinite !important;
}

.dark-mode .skeleton-content {
  margin-bottom: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.dark-mode .skeleton-text {
  height: 12px !important;
  background: linear-gradient(90deg, #3a3b3c 25%, #2d2d2d 50%, #3a3b3c 75%) !important;
  background-size: 200% 100% !important;
  border-radius: 6px !important;
  animation: skeleton-loading 1.5s ease-in-out infinite !important;
}

.dark-mode .skeleton-text:nth-child(1) {
  width: 100% !important;
}

.dark-mode .skeleton-text:nth-child(2) {
  width: 90% !important;
}

.dark-mode .skeleton-text:nth-child(3) {
  width: 75% !important;
}

.dark-mode .skeleton-image {
  width: 100% !important;
  height: 300px !important;
  background: linear-gradient(90deg, #3a3b3c 25%, #2d2d2d 50%, #3a3b3c 75%) !important;
  background-size: 200% 100% !important;
  border-radius: 12px !important;
  animation: skeleton-loading 1.5s ease-in-out infinite !important;
  margin-bottom: 12px !important;
}

.dark-mode .skeleton-actions {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding-top: 12px !important;
  border-top: 1px solid #3a3b3c !important;
}

.dark-mode .skeleton-action {
  height: 20px !important;
  width: 60px !important;
  background: linear-gradient(90deg, #3a3b3c 25%, #2d2d2d 50%, #3a3b3c 75%) !important;
  background-size: 200% 100% !important;
  border-radius: 6px !important;
  animation: skeleton-loading 1.5s ease-in-out infinite !important;
}

/* Skeleton loader general para modo oscuro */
.dark-mode .skeleton-loader {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  max-width: 500px !important;
  margin: 0 auto !important;
}

.dark-mode .skeleton-card {
  background: linear-gradient(90deg, #3a3b3c 25%, #2d2d2d 50%, #3a3b3c 75%) !important;
  background-size: 200% 100% !important;
  animation: skeleton-loading 1.5s infinite !important;
  border-radius: 12px !important;
  height: 120px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  border: 1px solid #3a3b3c !important;
}

.dark-mode .skeleton-line {
  height: 12px !important;
  background: linear-gradient(90deg, #3a3b3c 25%, #2d2d2d 50%, #3a3b3c 75%) !important;
  background-size: 200% 100% !important;
  border-radius: 6px !important;
  animation: skeleton-loading 1.5s ease-in-out infinite !important;
}

.dark-mode .skeleton-line.small {
  height: 8px !important;
  width: 60% !important;
}

.dark-mode .skeleton-line.short {
  height: 10px !important;
  width: 40% !important;
}

/* ===== SOBRESCRIBIR GRADIENTE DEL HEADER DEL FEED ITEM - MÁXIMA PRIORIDAD ===== */
/* Esta regla debe estar al final para sobrescribir cualquier gradiente */
.dark-mode .feed-item:not(.feed-item--shared) > .feed-card > .feed-item__header:first-child,
.dark-mode .feed-item:not(.feed-item--shared) > .feed-card > .feed-item_header:first-child,
.dark-mode .feed-item > .feed-card > .feed-item__header:first-child,
.dark-mode .feed-item > .feed-card > .feed-item_header:first-child,
.dark-mode .feed-item > .glass-card > .feed-item__header:first-child,
.dark-mode .feed-item > .glass-card > .feed-item_header:first-child {
    background: #0F0F0F !important;
    background-color: #0F0F0F !important;
    background-image: none !important;
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
    border-bottom: 1px solid rgba(112, 114, 120, 0.4) !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: none !important;
    color: #E4E6EB !important;
}