/**
 * COMPONENTES MODO OSCURO - NIVEL ÉLITE
 * Componentes específicos con design tokens profesionales
 * 
 * @author MrGreen Development Team
 * @version 2.0.0
 * @since 2025-01-08
 */

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

/* ===== FONDOS GENERALES ===== */
.dark-mode {
  background: var(--color-surface-primary) !important;
  color: var(--color-text-primary) !important;
}

.dark-mode body, 
.dark-mode html {
  background: var(--color-surface-primary) !important;
  color: var(--color-text-primary) !important;
}

/* ===== CONTENEDORES PRINCIPALES ===== */
.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, 
.dark-mode .main-content, 
.dark-mode .feed, 
.dark-mode .activity-feed, 
.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, 
.dark-mode .activity-feed-main, 
.dark-mode .activity-feed-content, 
.dark-mode .activity-feed-container {
  background: var(--color-surface-primary) !important;
  color: var(--color-text-primary) !important;
}

/* ===== CARDS Y CONTENEDORES DE CONTENIDO ===== */
.dark-mode .card, 
.dark-mode .feed-card, 
.dark-mode .activity-card, 
.dark-mode .post-card {
  background: var(--color-surface-elevated) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border-primary) !important;
  box-shadow: var(--shadow-sm) !important;
  border-radius: var(--border-radius-lg) !important;
  transition: all var(--transition-fast) !important;
}

/* ===== CONTENEDORES INTERNOS SIN FONDOS/BORDES (MODO OSCURO) ===== */
.dark-mode .feed-item, 
.dark-mode .post-item, 
.dark-mode .activity-item,
.dark-mode .content,
.dark-mode .mb-4 {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--color-text-primary) !important;
  /* Mantener márgenes y paddings */
}

.dark-mode .card:hover, 
.dark-mode .feed-card:hover, 
.dark-mode .activity-card:hover, 
.dark-mode .post-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
}

/* ===== MODALES ===== */
.dark-mode .modal-content, 
.dark-mode .modal-dialog, 
.dark-mode .modal-body, 
.dark-mode .modal-header, 
.dark-mode .modal-footer {
  background: var(--color-surface-elevated) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border-primary) !important;
}

/* Modal de guardar comentario - específico */
.dark-mode .custom-modal-content .modal-body,
.dark-mode .custom-modal-content .modal-header,
.dark-mode .custom-modal-content .modal-footer {
  background: #0F0F0F !important;
  background-color: #0F0F0F !important;
  color: #E4E6EB !important;
  border-color: #3A3B3C !important;
}

.dark-mode .custom-modal-content .modal-body p {
  color: #E4E6EB !important;
}

.dark-mode .modal-backdrop {
  background: var(--color-surface-overlay) !important;
  backdrop-filter: blur(8px) !important;
}

/* ===== DROPDOWNS Y MENÚS ===== */
.dark-mode .dropdown-menu, 
.dark-mode .dropdown-content, 
.dark-mode .popover, 
.dark-mode .tooltip-inner {
  background: var(--color-surface-elevated) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border-primary) !important;
  box-shadow: var(--shadow-lg) !important;
  border-radius: var(--border-radius-lg) !important;
}

.dark-mode .dropdown-item {
  color: var(--color-text-primary) !important;
  transition: background-color var(--transition-fast) !important;
}

.dark-mode .dropdown-item:hover {
  background: var(--color-state-hover) !important;
  color: var(--color-text-primary) !important;
}

/* ===== FORMULARIOS ===== */
.dark-mode input, 
.dark-mode textarea, 
.dark-mode select, 
.dark-mode .form-control, 
.dark-mode .form-select {
  background: var(--color-surface-tertiary) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-md) !important;
  transition: all var(--transition-fast) !important;
}

.dark-mode input:focus, 
.dark-mode textarea:focus, 
.dark-mode select:focus, 
.dark-mode .form-control:focus, 
.dark-mode .form-select:focus {
  background: var(--color-surface-tertiary) !important;
  border-color: #CCCCCC !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 80, 0.1) !important;
  outline: none !important;
}

.dark-mode input::placeholder, 
.dark-mode textarea::placeholder {
  color: var(--color-text-tertiary) !important;
}

/* ===== BOTONES ===== */
.dark-mode .btn, 
.dark-mode .btn-primary, 
.dark-mode .btn-secondary, 
.dark-mode .btn-success, 
.dark-mode .btn-danger, 
.dark-mode .btn-warning, 
.dark-mode .btn-info, 
.dark-mode .btn-light, 
.dark-mode .btn-dark {
  transition: all var(--transition-fast) !important;
  border-radius: var(--border-radius-md) !important;
  font-weight: var(--font-weight-medium) !important;
}

.dark-mode .btn-primary {
  background: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
  border: 1px solid var(--color-primary) !important;
}

.dark-mode .btn-primary:hover {
  background: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
}

.dark-mode .btn-secondary {
  background: var(--color-surface-tertiary) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border-primary) !important;
}

.dark-mode .btn-secondary:hover {
  background: var(--color-state-hover) !important;
  border-color: var(--color-border-secondary) !important;
}

/* ===== NAVEGACIÓN ===== */
.dark-mode .navbar, 
.dark-mode .nav, 
.dark-mode .nav-tabs, 
.dark-mode .nav-pills {
  background: var(--color-surface-elevated) !important;
  border-bottom: 1px solid var(--color-border-primary) !important;
}

.dark-mode .nav-link {
  color: var(--color-text-secondary) !important;
  transition: color var(--transition-fast) !important;
}

.dark-mode .nav-link:hover, 
.dark-mode .nav-link.active {
  color: var(--color-text-primary) !important;
  background: var(--color-state-hover) !important;
}

/* ===== SIDEBAR ===== */
.dark-mode .sidebar, 
.dark-mode #tiktok-sidebar-pro, 
.dark-mode #main-sidebar {
  color: var(--color-text-primary) !important;
  border-right: 1px solid var(--color-border-primary) !important;
}

.dark-mode .sidebar a, 
.dark-mode #tiktok-sidebar-pro a {
  color: var(--color-text-secondary) !important;
  transition: all var(--transition-fast) !important;
  border-radius: var(--border-radius-md) !important;
  padding: var(--space-3) var(--space-4) !important;
  margin: var(--space-1) var(--space-2) !important;
}

.dark-mode .sidebar a:hover, 
.dark-mode #tiktok-sidebar-pro a:hover {
  color: var(--color-text-primary) !important;
  background: var(--color-state-hover) !important;
}

/* ===== TABLAS ===== */
.dark-mode .table {
  color: var(--color-text-primary) !important;
  background: var(--color-surface-elevated) !important;
}

.dark-mode .table th {
  background: var(--color-surface-tertiary) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-primary) !important;
}

.dark-mode .table td {
  border-color: var(--color-border-primary) !important;
}

.dark-mode .table-striped tbody tr:nth-of-type(odd) {
  background: var(--color-surface-tertiary) !important;
}

/* ===== ALERTAS ===== */
.dark-mode .alert {
  border-radius: var(--border-radius-lg) !important;
  border: 1px solid !important;
}

.dark-mode .alert-success {
  background: rgba(52, 168, 83, 0.1) !important;
  color: var(--color-border-success) !important;
  border-color: var(--color-border-success) !important;
}

.dark-mode .alert-danger {
  background: rgba(234, 67, 53, 0.1) !important;
  color: var(--color-border-error) !important;
  border-color: var(--color-border-error) !important;
}

.dark-mode .alert-warning {
  background: rgba(251, 188, 4, 0.1) !important;
  color: var(--color-border-warning) !important;
  border-color: var(--color-border-warning) !important;
}

.dark-mode .alert-info {
  background: rgba(66, 133, 244, 0.1) !important;
  color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}

/* ===== BADGES ===== */
.dark-mode .badge {
  border-radius: var(--border-radius-full) !important;
  font-weight: var(--font-weight-medium) !important;
  font-size: var(--font-size-xs) !important;
}

.dark-mode .badge-primary {
  background: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
}

.dark-mode .badge-secondary {
  background: var(--color-surface-tertiary) !important;
  color: var(--color-text-primary) !important;
}

/* ===== PROGRESS BARS ===== */
.dark-mode .progress {
  background: var(--color-surface-tertiary) !important;
  border-radius: var(--border-radius-full) !important;
}

.dark-mode .progress-bar {
  background: var(--color-primary) !important;
  border-radius: var(--border-radius-full) !important;
}

/* ===== TOOLTIPS ===== */
.dark-mode .tooltip .tooltip-inner {
  background: var(--color-surface-elevated) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border-primary) !important;
  box-shadow: var(--shadow-lg) !important;
}

.dark-mode .tooltip .arrow::before {
  border-top-color: var(--color-border-primary) !important;
}

/* ===== SCROLLBARS ===== */
.dark-mode ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark-mode ::-webkit-scrollbar-track {
  background: var(--color-surface-tertiary) !important;
}

.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--color-border-primary) !important;
  border-radius: var(--border-radius-full) !important;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-secondary) !important;
}

/* ===== SELECTION ===== */
.dark-mode ::selection {
  background: var(--color-state-selected) !important;
  color: var(--color-text-primary) !important;
}

.dark-mode ::-moz-selection {
  background: var(--color-state-selected) !important;
  color: var(--color-text-primary) !important;
}

/* ===== FOCUS STATES ===== */
.dark-mode *:focus {
  outline: 2px solid var(--color-border-focus) !important;
  outline-offset: 2px !important;
}

.dark-mode *:focus:not(:focus-visible) {
  outline: none !important;
}

/* ===== DISABLED STATES ===== */
.dark-mode .disabled, 
.dark-mode [disabled] {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  background: var(--color-state-disabled) !important;
}

/* ===== LOADING STATES ===== */
.dark-mode .loading, 
.dark-mode .spinner {
  color: var(--color-text-tertiary) !important;
}

.dark-mode .loading::after {
  border-color: var(--color-border-primary) transparent transparent transparent !important;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
  .dark-mode .card, 
  .dark-mode .feed-card, 
  .dark-mode .activity-card {
    margin: 0 !important;
    border-radius: var(--border-radius-md) !important;
  }
  
  .dark-mode .modal-content {
    border-radius: var(--border-radius-lg) !important;
  }
}