/* ===================================
   TEMA OSCURO - MercaNet
   Diseñado para ser elegante y moderno
   =================================== */

/* Variables globales para tema oscuro */
html[data-theme="oscuro"] {
  --bg-primary: #0f0f0f;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #242424;
  --bg-card: #1e1e1e;
  --bg-hover: #2a2a2a;
  
  --text-primary: #ffffff;
  --text-secondary: #b4b4b4;
  --text-tertiary: #8a8a8a;
  
  --border-color: #2a2a2a;
  --border-hover: #404040;
  
  --accent-primary: #3b82f6;
  --accent-secondary: #8b5cf6;
  --accent-success: #10b981;
  --accent-warning: #f59e0b;
  --accent-error: #ef4444;
  
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7);
}

/* ====================
   ESTILOS GENERALES
   ==================== */

html[data-theme="oscuro"] body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* Header */
html[data-theme="oscuro"] .header {
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

html[data-theme="oscuro"] .header.scrolled {
  background-color: rgba(26, 26, 26, 0.95);
  backdrop-filter: blur(10px);
}

html[data-theme="oscuro"] .logo-text {
  color: var(--text-primary);
}

html[data-theme="oscuro"] .nav-links a {
  color: var(--text-secondary);
}

html[data-theme="oscuro"] .nav-links a:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}

html[data-theme="oscuro"] .sell-btn {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: white;
}

html[data-theme="oscuro"] .user-btn {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

html[data-theme="oscuro"] .user-btn:hover {
  background-color: var(--bg-hover);
  border-color: var(--border-hover);
}

/* Main Content */
html[data-theme="oscuro"] .main {
  background-color: var(--bg-primary);
}

/* Cards y Sections */
html[data-theme="oscuro"] .account-section,
html[data-theme="oscuro"] .product-card,
html[data-theme="oscuro"] .service-card,
html[data-theme="oscuro"] .card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
}

html[data-theme="oscuro"] .account-section:hover,
html[data-theme="oscuro"] .product-card:hover,
html[data-theme="oscuro"] .service-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-lg);
}

html[data-theme="oscuro"] .section-header h2 {
  color: var(--text-primary);
}

html[data-theme="oscuro"] .section-header i {
  color: var(--accent-primary);
}

/* Info Items */
html[data-theme="oscuro"] .info-item {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
}

html[data-theme="oscuro"] .info-item:hover {
  background-color: var(--bg-hover);
  border-color: var(--border-hover);
}

html[data-theme="oscuro"] .info-label {
  color: var(--text-secondary);
}

html[data-theme="oscuro"] .info-value {
  color: var(--text-primary);
}

html[data-theme="oscuro"] .info-icon {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: white;
}

/* Buttons */
html[data-theme="oscuro"] .info-action,
html[data-theme="oscuro"] .btn,
html[data-theme="oscuro"] button {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

html[data-theme="oscuro"] .info-action:hover,
html[data-theme="oscuro"] .btn:hover,
html[data-theme="oscuro"] button:hover {
  background-color: var(--bg-hover);
  border-color: var(--accent-primary);
  transform: translateY(-2px);
}

html[data-theme="oscuro"] .btn-primary,
html[data-theme="oscuro"] .action-card-primary {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: white;
  border: none;
}

html[data-theme="oscuro"] .btn-secondary {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

html[data-theme="oscuro"] .btn-outline {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

html[data-theme="oscuro"] .btn-outline:hover {
  background-color: var(--bg-tertiary);
  border-color: var(--accent-primary);
}

/* Forms */
html[data-theme="oscuro"] input,
html[data-theme="oscuro"] textarea,
html[data-theme="oscuro"] select {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

html[data-theme="oscuro"] input:focus,
html[data-theme="oscuro"] textarea:focus,
html[data-theme="oscuro"] select:focus {
  background-color: var(--bg-secondary);
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

html[data-theme="oscuro"] input::placeholder,
html[data-theme="oscuro"] textarea::placeholder {
  color: var(--text-tertiary);
}

html[data-theme="oscuro"] label {
  color: var(--text-secondary);
}

/* Toggle Switch */
html[data-theme="oscuro"] .toggle-slider {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
}

html[data-theme="oscuro"] .toggle-switch input:checked + .toggle-slider {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
}

/* Profile Header */
html[data-theme="oscuro"] .profile-header {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
}

html[data-theme="oscuro"] .profile-cover {
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.3), 
    rgba(139, 92, 246, 0.3)
  );
}

html[data-theme="oscuro"] .profile-info h1 {
  color: var(--text-primary);
}

html[data-theme="oscuro"] .profile-email,
html[data-theme="oscuro"] .profile-phone {
  color: var(--text-secondary);
}

html[data-theme="oscuro"] .verified-badge {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: white;
}

/* Stats */
html[data-theme="oscuro"] .stat-item {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
}

html[data-theme="oscuro"] .stat-value {
  color: var(--accent-primary);
}

html[data-theme="oscuro"] .stat-label {
  color: var(--text-secondary);
}

/* Action Cards */
html[data-theme="oscuro"] .action-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
}

html[data-theme="oscuro"] .action-card:hover {
  background-color: var(--bg-hover);
  border-color: var(--accent-primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

html[data-theme="oscuro"] .action-icon {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: white;
}

html[data-theme="oscuro"] .action-title {
  color: var(--text-primary);
}

html[data-theme="oscuro"] .action-description {
  color: var(--text-secondary);
}

/* Modals */
html[data-theme="oscuro"] .modal-content,
html[data-theme="oscuro"] .modal {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
}

html[data-theme="oscuro"] .modal-header {
  border-bottom: 1px solid var(--border-color);
}

html[data-theme="oscuro"] .modal-title {
  color: var(--text-primary);
}

html[data-theme="oscuro"] .modal-close {
  color: var(--text-secondary);
}

html[data-theme="oscuro"] .modal-close:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

/* Badges y Tags */
html[data-theme="oscuro"] .badge,
html[data-theme="oscuro"] .tag,
html[data-theme="oscuro"] .info-badge {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

html[data-theme="oscuro"] .badge.success,
html[data-theme="oscuro"] .tag.success {
  background-color: rgba(16, 185, 129, 0.15);
  color: var(--accent-success);
  border-color: var(--accent-success);
}

html[data-theme="oscuro"] .badge.warning {
  background-color: rgba(245, 158, 11, 0.15);
  color: var(--accent-warning);
  border-color: var(--accent-warning);
}

html[data-theme="oscuro"] .badge.error {
  background-color: rgba(239, 68, 68, 0.15);
  color: var(--accent-error);
  border-color: var(--accent-error);
}

/* Search & Filters */
html[data-theme="oscuro"] .search-bar,
html[data-theme="oscuro"] .filter-bar {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
}

html[data-theme="oscuro"] .search-input {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

html[data-theme="oscuro"] .search-input:focus {
  background-color: var(--bg-secondary);
  border-color: var(--accent-primary);
}

/* Tables */
html[data-theme="oscuro"] table {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
}

html[data-theme="oscuro"] th {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-bottom: 2px solid var(--border-color);
}

html[data-theme="oscuro"] td {
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
}

html[data-theme="oscuro"] tr:hover {
  background-color: var(--bg-hover);
}

/* Dropdown Menus */
html[data-theme="oscuro"] .dropdown-menu {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
}

html[data-theme="oscuro"] .dropdown-item {
  color: var(--text-primary);
}

html[data-theme="oscuro"] .dropdown-item:hover {
  background-color: var(--bg-hover);
}

/* Footer */
html[data-theme="oscuro"] .footer {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}

html[data-theme="oscuro"] .footer a {
  color: var(--text-secondary);
}

html[data-theme="oscuro"] .footer a:hover {
  color: var(--accent-primary);
}

/* Toast Notifications */
html[data-theme="oscuro"] .toast {
  background-color: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-xl);
}

/* Loading States */
html[data-theme="oscuro"] .skeleton,
html[data-theme="oscuro"] .loading {
  background: linear-gradient(
    90deg,
    var(--bg-tertiary) 25%,
    var(--bg-hover) 50%,
    var(--bg-tertiary) 75%
  );
  background-size: 200% 100%;
}

/* Scrollbar */
html[data-theme="oscuro"] ::-webkit-scrollbar {
  width: 12px;
  background-color: var(--bg-primary);
}

html[data-theme="oscuro"] ::-webkit-scrollbar-track {
  background-color: var(--bg-secondary);
}

html[data-theme="oscuro"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  border-radius: 6px;
  border: 2px solid var(--bg-secondary);
}

html[data-theme="oscuro"] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #4f94ff, #a67bff);
}

/* Links */
html[data-theme="oscuro"] a {
  color: var(--accent-primary);
}

html[data-theme="oscuro"] a:hover {
  color: var(--accent-secondary);
}

/* Dividers */
html[data-theme="oscuro"] hr {
  border-color: var(--border-color);
}

/* Code blocks (si existen) */
html[data-theme="oscuro"] code,
html[data-theme="oscuro"] pre {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

/* Empty States */
html[data-theme="oscuro"] .empty-state {
  color: var(--text-secondary);
}

html[data-theme="oscuro"] .empty-state i {
  color: var(--text-tertiary);
}

/* Price Tags */
html[data-theme="oscuro"] .price,
html[data-theme="oscuro"] .precio {
  color: var(--accent-success);
}

/* Image Overlays */
html[data-theme="oscuro"] .image-overlay {
  background: linear-gradient(
    to bottom,
    rgba(15, 15, 15, 0),
    rgba(15, 15, 15, 0.9)
  );
}

/* Bottom Navigation Bar (mobile) */
html[data-theme="oscuro"] .bottom-bar {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.6);
}

html[data-theme="oscuro"] .bottom-bar a {
  color: var(--text-secondary);
}

html[data-theme="oscuro"] .bottom-bar a.active,
html[data-theme="oscuro"] .bottom-bar a:hover {
  color: var(--accent-primary);
}

/* Suavizar transiciones */
html[data-theme="oscuro"] * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}