/* ==========================================
   SISTEMA DE TEMAS - VARIABLES CSS
   ========================================== */

/* Tema DARK (por defecto) */
:root {
  /* Colores principales */
  --bg-primary: #1a1a1a;
  --bg-secondary: #2a2a2a;
  --bg-tertiary: #3a3a3a;
  --bg-card: rgba(255, 255, 255, 0.05);
  --bg-card-hover: rgba(255, 255, 255, 0.08);
  --bg-modal: #2a2a2a;
  --bg-input: rgba(255, 255, 255, 0.1);
  --bg-input-focus: rgba(255, 255, 255, 0.15);
  
  /* Colores de texto */
  --text-primary: #ffffff;
  --text-secondary: #e5e7eb;
  --text-tertiary: #9ca3af;
  --text-muted: #6b7280;
  --text-disabled: #4b5563;
  
  /* Colores de marca */
  --brand-primary: #1DB584;
  --brand-secondary: #00D084;
  --brand-accent: #16a085;
  --brand-hover: #16a075;
  
  /* Colores de estado */
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;
  
  /* Colores de estado con transparencia */
  --success-bg: rgba(34, 197, 94, 0.1);
  --warning-bg: rgba(245, 158, 11, 0.1);
  --error-bg: rgba(239, 68, 68, 0.1);
  --info-bg: rgba(59, 130, 246, 0.1);
  
  /* Bordes */
  --border-primary: rgba(255, 255, 255, 0.1);
  --border-secondary: rgba(255, 255, 255, 0.2);
  --border-focus: var(--brand-primary);
  
  /* Sombras */
  --shadow-sm: 0 1px 2px 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.5);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
  
  /* Efectos específicos */
  --overlay: rgba(0, 0, 0, 0.8);
  --glass-effect: rgba(255, 255, 255, 0.05);
  --gradient-primary: linear-gradient(135deg, #1DB584, #00D084);
  --gradient-secondary: linear-gradient(135deg, #2a2a2a, #1a1a1a);
}

/* Tema LIGHT */
[data-theme="light"] {
  /* Colores principales */
  --bg-primary: #ffffff;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f8f9fa;
  --bg-card: #ffffff;
  --bg-card-hover: #f8f9fa;
  --bg-modal: #ffffff;
  --bg-input: #ffffff;
  --bg-input-focus: #ffffff;
  
  /* Colores de texto */
  --text-primary: #1a1a1a;
  --text-secondary: #1a1a1a;
  --text-tertiary: #6b7280;
  --text-muted: #9ca3af;
  --text-disabled: #d1d5db;
  
  /* Colores de marca (mantener consistencia) */
  --brand-primary: #1DB584;
  --brand-secondary: #00D084;
  --brand-accent: #16a085;
  --brand-hover: #16a075;
  
  /* Colores de estado */
  --success: #16a34a;
  --warning: #d97706;
  --error: #dc2626;
  --info: #2563eb;
  
  /* Colores de estado con transparencia */
  --success-bg: rgba(22, 163, 74, 0.1);
  --warning-bg: rgba(217, 119, 6, 0.1);
  --error-bg: rgba(220, 38, 38, 0.1);
  --info-bg: rgba(37, 99, 235, 0.1);
  
  /* Bordes */
  --border-primary: #e5e7eb;
  --border-secondary: #d1d5db;
  --border-focus: var(--brand-primary);
  
  /* Sombras */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  
  /* Efectos específicos */
  --overlay: rgba(0, 0, 0, 0.5);
  --glass-effect: rgba(255, 255, 255, 0.8);
  --gradient-primary: linear-gradient(135deg, #1DB584, #00D084);
  --gradient-secondary: linear-gradient(135deg, #f8f9fa, #ffffff);
}

/* ==========================================
   APLICACIÓN ESPECÍFICA PARA TEMA LIGHT
   ========================================== */

/* Solo aplicar estos estilos cuando el tema sea light */
[data-theme="light"] {
  /* FONDOS PRINCIPALES */
  body,
  .container,
  .main-container,
  .content-container {
    background: #ffffff !important;
    color: #1a1a1a !important;
  }
  
  /* HEADERS Y TOPBARS */
  .topbar,
  .header,
  .navbar,
  .top-bar {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
  }
  
  /* TEXTOS PRINCIPALES */
  h1, h2, h3, h4, h5, h6,
  .title,
  .heading,
  .page-title {
    color: #1a1a1a !important;
  }
  
  /* TEXTOS SECUNDARIOS */
  p, span, div,
  .text,
  .description,
  .content {
    color: #374151 !important;
  }
  
  /* NAVEGACIÓN */
  .nav-links a,
  .navigation a,
  .menu-item {
    color: #6b7280 !important;
  }
  
  .nav-links a:hover,
  .navigation a:hover,
  .menu-item:hover {
    color: #1DB584 !important;
  }
  
  /* CARDS Y CONTENEDORES */
  .card,
  .post-card,
  .story-card,
  .news-card,
  .content-card,
  .panel,
  .box,
  .container-box {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
  }
  
  .card:hover,
  .post-card:hover,
  .content-card:hover {
    background: #f8f9fa !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
  }
  
  /* INPUTS Y FORMULARIOS */
  input,
  textarea,
  select,
  .input,
  .form-control {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #1a1a1a !important;
  }
  
  input:focus,
  textarea:focus,
  select:focus {
    border-color: #1DB584 !important;
    box-shadow: 0 0 0 3px rgba(29, 181, 132, 0.1) !important;
  }
  
  input::placeholder,
  textarea::placeholder {
    color: #9ca3af !important;
  }
  
  /* MODALES */
  .modal {
    background: rgba(0, 0, 0, 0.5) !important;
  }
  
  .modal-content,
  .modal-body,
  .popup {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    color: #1a1a1a !important;
  }
  
  /* SIDEBARS Y PANELES LATERALES */
  .sidebar,
  .side-panel,
  .left-panel,
  .right-panel {
    background: #ffffff !important;
    border-right: 1px solid #e5e7eb !important;
  }
  
  /* ELEMENTOS DE LISTA */
  .list-item,
  .item,
  .entry {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
  }
  
  .list-item:hover,
  .item:hover {
    background: #f8f9fa !important;
  }
  
  /* ELEMENTOS DE ESTADO */
  .success {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #059669 !important;
    border-left: 4px solid #10b981 !important;
  }
  
  .error {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #dc2626 !important;
    border-left: 4px solid #ef4444 !important;
  }
  
  .warning {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #d97706 !important;
    border-left: 4px solid #f59e0b !important;
  }
  
  .info {
    background: rgba(59, 130, 246, 0.1) !important;
    color: #2563eb !important;
    border-left: 4px solid #3b82f6 !important;
  }
  
  /* TEXTOS ESPECÍFICOS */
  .user-section span,
  .username,
  .author-name {
    color: #1a1a1a !important;
  }
  
  .date,
  .timestamp,
  .meta {
    color: #6b7280 !important;
  }
  
  /* ELEMENTOS DE CHAT */
  .chat-container,
  .message-container {
    background: #ffffff !important;
  }
  
  .message,
  .chat-message {
    background: #f3f4f6 !important;
    color: #1a1a1a !important;
  }
  
  .message.own {
    background: #e0f2fe !important;
  }
  
  /* ELEMENTOS DE BIBLIOTECA */
  .file-item,
  .document-item {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
  }
  
  /* ELEMENTOS DE PERFIL */
  .profile-header,
  .profile-section {
    background: #ffffff !important;
  }
  
  /* ELEMENTOS DE ADMIN */
  .admin-panel,
  .admin-section,
  .stats-card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
  }
  
  /* SCROLLBARS */
  ::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #c1c1c1 !important;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8 !important;
  }
  
  /* ===== CORRECCIONES ESPECÍFICAS ===== */
  
  /* CARDS DE BIENVENIDA EN HOME */
  .welcome-card,
  .stats-card,
  .welcome-section,
  .dashboard-card {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .welcome-card h3,
  .welcome-card h4,
  .stats-card h3,
  .stats-card h4,
  .dashboard-card h3,
  .dashboard-card h4 {
    color: #1a1a1a !important;
  }
  
  .welcome-card p,
  .stats-card p,
  .dashboard-card p {
    color: #374151 !important;
  }
  
  /* TEAM STORIES */
  .story-card,
  .story-item,
  .stories-container .card {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .story-card h3,
  .story-card h4,
  .story-item h3,
  .story-item h4 {
    color: #1a1a1a !important;
  }
  
  .story-card p,
  .story-item p {
    color: #374151 !important;
  }
  
  /* PERFIL - CARDS DE ESTADÍSTICAS */
  .profile-stats .card,
  .stat-card,
  .stats-grid .card,
  .profile-section .card {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .profile-stats .card h3,
  .profile-stats .card h4,
  .stat-card h3,
  .stat-card h4 {
    color: #1a1a1a !important;
  }
  
  .profile-stats .card p,
  .stat-card p {
    color: #374151 !important;
  }
  
  /* RECENT CONVERSATIONS Y QUICK ACCESS */
  .recent-conversations,
  .quick-access,
  .conversations-section,
  .access-section {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .recent-conversations h3,
  .quick-access h3,
  .conversations-section h3,
  .access-section h3 {
    color: #1a1a1a !important;
  }
  
  .conversation-item,
  .access-item {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border-bottom: 1px solid #e5e7eb !important;
  }
  
  .conversation-item:hover,
  .access-item:hover {
    background: #f3f4f6 !important;
  }
  
  .conversation-item .name,
  .conversation-item .username,
  .access-item .name {
    color: #1a1a1a !important;
  }
  
  .conversation-item .last-message,
  .conversation-item .time,
  .access-item .description {
    color: #6b7280 !important;
  }
  
  /* CHAT - SELECT CONTACT */
  .chat-placeholder,
  .select-contact,
  .no-conversation,
  .chat-empty-state {
    background: #ffffff !important;
    color: #1a1a1a !important;
  }
  
  .chat-placeholder h3,
  .select-contact h3,
  .no-conversation h3 {
    color: #1a1a1a !important;
  }
  
  .chat-placeholder p,
  .select-contact p,
  .no-conversation p {
    color: #6b7280 !important;
  }
  
  /* CHAT - CONVERSACIONES */
  .chat-messages,
  .messages-container,
  .conversation-area {
    background: #ffffff !important;
  }
  
  .chat-header,
  .conversation-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    color: #1a1a1a !important;
  }
  
  .chat-header .contact-name,
  .conversation-header .contact-name {
    color: #1a1a1a !important;
  }
  
  /* BURBUJAS DE CHAT */
  .message-bubble,
  .chat-bubble,
  .message {
    background: #f3f4f6 !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .message-bubble.own,
  .chat-bubble.own,
  .message.own {
    background: #dbeafe !important;
    color: #1e40af !important;
  }
  
  .message-bubble.received,
  .chat-bubble.received,
  .message.received {
    background: #f3f4f6 !important;
    color: #1a1a1a !important;
  }
  
  /* INPUT DE CHAT */
  .chat-input,
  .message-input,
  .chat-form input,
  .chat-form textarea {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #1a1a1a !important;
  }
  
  .chat-input::placeholder,
  .message-input::placeholder {
    color: #9ca3af !important;
  }
  
  /* SIDEBAR DE CHAT */
  .chat-sidebar,
  .contacts-list,
  .conversations-list {
    background: #ffffff !important;
    border-right: 1px solid #e5e7eb !important;
  }
  
  .contact-item,
  .conversation-list-item {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border-bottom: 1px solid #e5e7eb !important;
  }
  
  .contact-item:hover,
  .conversation-list-item:hover,
  .contact-item.active,
  .conversation-list-item.active {
    background: #f3f4f6 !important;
  }
  
  .contact-item .name,
  .conversation-list-item .name {
    color: #1a1a1a !important;
  }
  
  .contact-item .status,
  .conversation-list-item .last-message {
    color: #6b7280 !important;
  }

  /* ===== CORRECCIONES ADICIONALES PARA CARDS NEGRAS ===== */
  
  /* STORIES SECTION - PROBLEMA PRINCIPAL */
  .stories-section {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .stories-section h3 {
    color: #1a1a1a !important;
  }
  
  .story-thumb.add-story {
    background: #f3f4f6 !important;
    border: 3px dashed #9ca3af !important;
    color: #6b7280 !important;
  }
  
  .story-thumb.add-story:hover {
    background: #e5e7eb !important;
    border-color: #1DB584 !important;
    color: #1DB584 !important;
  }
  
  /* ADMIN PANEL - APLICAR TEMAS */
  .admin-container,
  .admin-section,
  .admin-card,
  .stats-overview,
  .admin-form,
  .admin-table,
  .admin-header {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .admin-container h1,
  .admin-container h2,
  .admin-container h3,
  .admin-section h1,
  .admin-section h2,
  .admin-section h3 {
    color: #1a1a1a !important;
  }
  
  .admin-table th,
  .admin-table td {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border-bottom: 1px solid #e5e7eb !important;
  }
  
  .admin-table th {
    background: #f8f9fa !important;
    color: #374151 !important;
  }
  
  /* MURO - CORREGIR CARDS NEGRAS */
  .post-container,
  .post-item,
  .comment-section,
  .comment-item,
  .post-form,
  .post-actions {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .post-container h3,
  .post-container h4,
  .post-item h3,
  .post-item h4 {
    color: #1a1a1a !important;
  }
  
  .post-content,
  .comment-content {
    color: #374151 !important;
  }
  
  .post-meta,
  .comment-meta {
    color: #6b7280 !important;
  }
  
  /* MI DIA - CORREGIR CARDS NEGRAS */
  .day-container,
  .event-container,
  .event-item,
  .task-item,
  .schedule-item,
  .welcome-container {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .event-item:hover,
  .task-item:hover,
  .schedule-item:hover {
    background: #f3f4f6 !important;
  }
  
  .day-container h2,
  .event-container h3,
  .event-item h4 {
    color: #1a1a1a !important;
  }
  
  /* BIBLIOTECA - CORREGIR CARDS NEGRAS */
  .library-header,
  .file-card,
  .upload-section,
  .search-filter-section,
  .filter-controls,
  .empty-state {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .file-card:hover {
    background: #f8f9fa !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
  }
  
  .file-title {
    color: #1a1a1a !important;
  }
  
  .file-description,
  .file-meta {
    color: #6b7280 !important;
  }
  
  /* NOTIFICACIONES ADMIN - CORREGIR CARDS NEGRAS */
  .news-form,
  .news-section,
  .news-list,
  .news-editor,
  .form-section {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .news-form h3,
  .news-section h3,
  .form-section h3 {
    color: #1a1a1a !important;
  }
  
  .news-form label {
    color: #374151 !important;
  }
  
  /* MODALES GENERALES */
  .modal-backdrop,
  .modal-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
  }
  
  .modal-dialog,
  .modal-content,
  .modal-body,
  .modal-header,
  .modal-footer {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .modal-title {
    color: #1a1a1a !important;
  }
  
  /* FORMULARIOS GENERALES */
  .form-container,
  .form-group,
  .form-section {
    background: #ffffff !important;
    color: #1a1a1a !important;
  }
  
  .form-group label {
    color: #374151 !important;
  }
  
  /* TEXTAREAS Y EDITORES */
  textarea,
  .editor,
  .text-editor,
  .content-editor {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #d1d5db !important;
  }
  
  textarea:focus,
  .editor:focus,
  .text-editor:focus {
    border-color: #1DB584 !important;
    box-shadow: 0 0 0 3px rgba(29, 181, 132, 0.1) !important;
  }
  
  /* ELEMENTOS DE LISTA Y TABLAS */
  .list-container,
  .table-container,
  .data-table,
  .list-group,
  .list-group-item {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .list-group-item:hover {
    background: #f3f4f6 !important;
  }
  
  .table-row:hover,
  tr:hover {
    background: #f8f9fa !important;
  }
  
  /* ELEMENTOS DE NAVEGACIÓN SECUNDARIA */
  .breadcrumb,
  .pagination,
  .nav-tabs,
  .nav-pills {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .nav-tabs .nav-link,
  .nav-pills .nav-link {
    color: #6b7280 !important;
  }
  
  .nav-tabs .nav-link.active,
  .nav-pills .nav-link.active {
    background: #1DB584 !important;
    color: #ffffff !important;
  }
  
  /* ALERTAS Y MENSAJES */
  .alert,
  .message-box,
  .notification,
  .toast {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .alert.alert-info {
    background: #eff6ff !important;
    color: #1e40af !important;
    border-color: #bfdbfe !important;
  }
  
  .alert.alert-warning {
    background: #fffbeb !important;
    color: #92400e !important;
    border-color: #fed7aa !important;
  }
  
  .alert.alert-danger {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border-color: #fecaca !important;
  }
  
  .alert.alert-success {
    background: #f0fdf4 !important;
    color: #166534 !important;
    border-color: #bbf7d0 !important;
  }

  /* ===== CORRECCIÓN PARA LOGOS BLANCOS EN TEMA LIGHT ===== */
  
  /* LOGO PRINCIPAL HEYTEAM EN HEADER */
  .topbar img,
  .logo-section img {
    filter: drop-shadow(0 0 8px rgba(29, 181, 132, 0.6)) drop-shadow(0 0 12px rgba(29, 181, 132, 0.4)) !important;
  }
  
  /* LOGOS DE EMPRESA EN CARDS DE BIENVENIDA */
  .company-logo,
  .welcome-section img,
  .company-logo-container img {
    filter: drop-shadow(0 0 8px rgba(29, 181, 132, 0.6)) drop-shadow(0 0 12px rgba(29, 181, 132, 0.4)) !important;
  }
  
  /* LOGOS EN GENERAL QUE PUEDAN SER BLANCOS */
  img[src*="logo"],
  img[src*="Logo"],
  img[src*="LOGO"],
  .logo img,
  .brand-logo,
  .header-logo {
    filter: drop-shadow(0 0 8px rgba(29, 181, 132, 0.6)) drop-shadow(0 0 12px rgba(29, 181, 132, 0.4)) !important;
  }
  
  /* AJUSTES ESPECÍFICOS PARA DIFERENTES EMPRESAS */
  .company-logo.transfermex {
    filter: drop-shadow(0 0 8px rgba(0, 255, 157, 0.8)) drop-shadow(0 0 12px rgba(0, 255, 157, 0.6)) !important;
  }
  
  .company-logo.labormex {
    filter: drop-shadow(0 0 8px rgba(0, 48, 135, 0.8)) drop-shadow(0 0 12px rgba(0, 48, 135, 0.6)) !important;
  }
  
  .company-logo.maslabor {
    filter: drop-shadow(0 0 8px rgba(220, 38, 38, 0.8)) drop-shadow(0 0 12px rgba(220, 38, 38, 0.6)) !important;
  }
  
  /* LOGO FRAME 4.png (heyteam) CON RESPLANDOR VERDE */
  img[src*="Frame 4"],
  img[src*="frame 4"],
  img[src*="Frame_4"],
  img[src*="heyteam"] {
    filter: drop-shadow(0 0 10px rgba(29, 181, 132, 0.8)) drop-shadow(0 0 15px rgba(29, 181, 132, 0.6)) drop-shadow(0 0 20px rgba(29, 181, 132, 0.4)) !important;
  }

  /* ===== CORRECCIONES FINALES DE CONTRASTE ===== */
  
  /* ASEGURAR QUE TODOS LOS CONTENEDORES PRINCIPALES TENGAN FONDO BLANCO */
  body,
  html,
  .main-content,
  .content,
  .page-content,
  .container-fluid,
  .wrapper,
  .layout,
  section,
  article {
    background: #ffffff !important;
    color: #1a1a1a !important;
  }
  
  /* ELEMENTOS DE TEXTO QUE PUDIERAN HABERSE PERDIDO */
  .title,
  .subtitle,
  .heading,
  .subheading,
  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6 {
    color: #1a1a1a !important;
  }
  
  .text,
  .content,
  .description,
  .info,
  p, span, div {
    color: #374151 !important;
  }
  
  /* ELEMENTOS DE METADATA Y INFORMACIÓN SECUNDARIA */
  .meta,
  .metadata,
  .info-text,
  .secondary-text,
  .muted,
  .small,
  small {
    color: #6b7280 !important;
  }
  
  /* BOTONES SECUNDARIOS Y ENLACES */
  .btn-secondary,
  .button-secondary,
  .link,
  .text-link {
    background: #f8f9fa !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
  }
  
  .btn-secondary:hover,
  .button-secondary:hover {
    background: #e5e7eb !important;
    color: #1a1a1a !important;
  }
  
  /* BADGES Y ETIQUETAS */
  .badge,
  .tag,
  .label {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
  }
  
  /* DIVISORES Y SEPARADORES */
  hr,
  .divider,
  .separator {
    border-color: #e5e7eb !important;
    background: #e5e7eb !important;
  }

  /* ===== CORRECCIONES ESPECÍFICAS ADICIONALES ===== */
  
  /* MURO.PHP - COMPOSER Y FILTROS */
  .composer,
  .composer-container,
  .post-composer,
  .share-container,
  .filter-container,
  .content-filter,
  .composer-header,
  .composer-body,
  .composer-footer {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .composer h3,
  .composer h4,
  .share-container h3,
  .filter-container h3 {
    color: #1a1a1a !important;
  }
  
  .composer textarea,
  .composer input,
  .post-composer textarea {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #d1d5db !important;
  }
  
  /* LOGIN.PHP - INPUTS Y FORMS */
  .login-container,
  .login-form,
  .local-login-form,
  .form-group {
    background: #ffffff !important;
    color: #1a1a1a !important;
  }
  
  .login-container input,
  .login-form input,
  .local-login-form input {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #d1d5db !important;
  }
  
  .login-container input:focus,
  .login-form input:focus {
    background: #ffffff !important;
    border-color: #1DB584 !important;
    box-shadow: 0 0 0 3px rgba(29, 181, 132, 0.1) !important;
  }
  
  .login-container input::placeholder {
    color: #9ca3af !important;
  }
  
  /* HOME.PHP - NOTICIAS INTERNAS CARD */
  .news-grid,
  .news-item,
  .news-card,
  .internal-news,
  .internal-news-container {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .news-item h3,
  .news-item h4,
  .news-card h3,
  .news-card h4 {
    color: #1a1a1a !important;
  }
  
  .news-item p,
  .news-card p,
  .news-content {
    color: #374151 !important;
  }
  
  .news-meta,
  .news-date {
    color: #6b7280 !important;
  }
  
  /* ADMIN.PHP - MODALES Y CARDS DE GESTIÓN */
  .admin-modal,
  .management-card,
  .user-registration,
  .publication-management,
  .news-management,
  .admin-form-container,
  .admin-panel-section {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .admin-modal h3,
  .management-card h3,
  .admin-form-container h3 {
    color: #1a1a1a !important;
  }
  
  .admin-modal p,
  .management-card p {
    color: #374151 !important;
  }
  
  .admin-modal input,
  .admin-modal textarea,
  .admin-modal select,
  .management-card input,
  .management-card textarea {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #d1d5db !important;
  }
  
  /* RH_DOCUMENTOS.PHP - APLICAR TEMA COMPLETO */
  .documents-container,
  .document-section,
  .document-card,
  .document-upload,
  .document-list,
  .document-item {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .documents-container h1,
  .documents-container h2,
  .documents-container h3,
  .document-section h3 {
    color: #1a1a1a !important;
  }
  
  .document-item:hover {
    background: #f8f9fa !important;
  }
  
  /* CELEBRACIONES.PHP - APLICAR TEMA COMPLETO */
  .celebrations-container,
  .celebration-section,
  .celebration-card,
  .birthday-card,
  .anniversary-card,
  .celebration-item {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .celebrations-container h1,
  .celebrations-container h2,
  .celebrations-container h3,
  .celebration-section h3 {
    color: #1a1a1a !important;
  }
  
  .celebration-item:hover,
  .birthday-card:hover,
  .anniversary-card:hover {
    background: #f8f9fa !important;
  }
  
  /* ELEMENTOS GENERALES DE FORMULARIOS */
  .form-control,
  .form-input,
  .text-input,
  .textarea {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #d1d5db !important;
  }
  
  .form-control:focus,
  .form-input:focus,
  .text-input:focus,
  .textarea:focus {
    background: #ffffff !important;
    border-color: #1DB584 !important;
    box-shadow: 0 0 0 3px rgba(29, 181, 132, 0.1) !important;
  }
  
  /* MEJORAR CONTRASTE EN ELEMENTOS GRISES */
  .text-gray,
  .text-muted,
  .secondary,
  .subtitle {
    color: #4b5563 !important;
  }
  
  .text-gray-light,
  .text-muted-light {
    color: #6b7280 !important;
  }

  /* ===== CORRECCIONES ADICIONALES ESPECÍFICAS ===== */
  
  /* LOGIN_GOOGLE.PHP - CORREGIR NEGRO */
  .google-login-container,
  .oauth-container,
  .google-form,
  .google-section {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .google-login-container input,
  .oauth-container input,
  .google-form input {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #d1d5db !important;
  }
  
  .google-login-container input:focus,
  .oauth-container input:focus {
    background: #ffffff !important;
    border-color: #1DB584 !important;
    box-shadow: 0 0 0 3px rgba(29, 181, 132, 0.1) !important;
  }
  
  /* TEAM STORIES - REMOVER TODAS LAS LÍNEAS VISIBLES */
  .story-item,
  .story-thumb,
  .delete-story-btn,
  .story-actions {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
  
  .story-item:focus,
  .story-thumb:focus,
  .delete-story-btn:focus,
  .story-item:hover,
  .story-thumb:hover {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
  
  /* SOLO EFECTOS DE HOVER SIN BORDES */
  .story-thumb:hover {
    transform: scale(1.1) !important;
    filter: brightness(1.1) !important;
  }
  
  /* BOTÓN DELETE STORY LIMPIO */
  .delete-story-btn {
    border: none !important;
    background: linear-gradient(135deg, #dc2626, #ef4444) !important;
    color: white !important;
    outline: none !important;
    box-shadow: none !important;
  }
  
  .delete-story-btn:hover {
    background: linear-gradient(135deg, #b91c1c, #dc2626) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.4) !important;
  }
  
  .delete-story-btn:focus {
    outline: none !important;
    box-shadow: none !important;
  }

  /* ===== MURO.PHP - COMENTARIOS CONTENEDORES NEGROS ===== */
  
  /* CONTENEDORES DE COMENTARIOS */
  .comments-section,
  .comments-container,
  .comment-item,
  .comment-box,
  .comment-wrapper,
  .comments-list {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  /* FORMULARIO PARA ESCRIBIR COMENTARIOS */
  .comment-form,
  .comment-input-container,
  .add-comment,
  .write-comment,
  .comment-composer {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  /* TEXTAREA Y INPUT DE COMENTARIOS */
  .comment-form textarea,
  .comment-form input,
  .comment-input,
  .comment-textarea,
  .write-comment textarea,
  .add-comment textarea {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #d1d5db !important;
  }
  
  .comment-form textarea:focus,
  .comment-form input:focus,
  .comment-input:focus,
  .comment-textarea:focus {
    background: #ffffff !important;
    border-color: #1DB584 !important;
    box-shadow: 0 0 0 3px rgba(29, 181, 132, 0.1) !important;
  }
  
  .comment-form textarea::placeholder,
  .comment-input::placeholder,
  .comment-textarea::placeholder {
    color: #9ca3af !important;
  }
  
  /* TEXTO Y CONTENIDO DE COMENTARIOS */
  .comment-content,
  .comment-text,
  .comment-body {
    color: #374151 !important;
  }
  
  /* AUTOR Y METADATA DE COMENTARIOS */
  .comment-author,
  .comment-user,
  .comment-name {
    color: #1a1a1a !important;
    font-weight: 600 !important;
  }
  
  .comment-date,
  .comment-time,
  .comment-meta {
    color: #6b7280 !important;
  }
  
  /* COMENTARIOS INDIVIDUALES */
  .comment,
  .comment-item,
  .single-comment {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border-bottom: 1px solid #e5e7eb !important;
    margin-bottom: 12px !important;
    padding: 12px !important;
  }
  
  .comment:hover,
  .comment-item:hover {
    background: #f8f9fa !important;
  }
  
  /* BOTONES EN COMENTARIOS */
  .comment-actions,
  .comment-buttons {
    background: transparent !important;
  }
  
  .comment-btn,
  .comment-action-btn {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
  }
  
  .comment-btn:hover,
  .comment-action-btn:hover {
    background: #e5e7eb !important;
    color: #1a1a1a !important;
  }

  /* ===== MURO.PHP - CARDS ESPECÍFICAS NEGRAS ===== */
  
  /* CARDS DE BIENVENIDA EN MURO */
  .welcome-card,
  .greeting-card,
  .intro-card,
  .welcome-section {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .welcome-card h2,
  .welcome-card h3,
  .greeting-card h2,
  .greeting-card h3 {
    color: #1a1a1a !important;
  }
  
  .welcome-card p,
  .greeting-card p {
    color: #374151 !important;
  }
  
  /* CARD DE FILTRAR CONTENIDO */
  .filter-card,
  .filter-section,
  .content-filter,
  .filter-container {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .filter-card h3,
  .filter-section h3,
  .content-filter h3 {
    color: #1a1a1a !important;
  }
  
  /* CARD DE PUBLICAR/COMPOSER */
  .post-composer,
  .composer-card,
  .create-post,
  .publisher,
  .post-form-container {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  /* REMOVER RECUADRO BLANCO FEO INTERIOR */
  .post-composer .inner,
  .composer-card .inner,
  .post-form-container .inner,
  .composer-content,
  .composer-body {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  
  .post-composer h3,
  .composer-card h3,
  .create-post h3 {
    color: #1a1a1a !important;
  }
  
  /* TEXTAREA DEL COMPOSER */
  .post-composer textarea,
  .composer-card textarea,
  .create-post textarea {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #d1d5db !important;
  }
  
  /* NOMBRES DE USUARIOS EN COMENTARIOS - MEJOR CONTRASTE */
  .comment-author,
  .comment-user,
  .comment-name,
  .user-name {
    color: #1e40af !important;
    font-weight: 700 !important;
  }

  /* ===== COMENTARIOS - MEJORAR VISIBILIDAD COMPLETA ===== */
  
  /* CONTENEDORES DE COMENTARIOS CON GRADIENTE SUTIL */
  .comments-section,
  .comments-container,
  .comment-item,
  .comment-box,
  .comment-wrapper,
  .comments-list {
    background: linear-gradient(135deg, #f8f9fa 0%, #e8f5e8 100%) !important;
    color: #1a1a1a !important;
    border: 1px solid #d1d5db !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  }

  /* COMENTARIOS INDIVIDUALES CON MEJOR DISEÑO */
  .comment {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    border: 1px solid #e5e7eb !important;
    border-left: 3px solid #1DB584 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.3s ease !important;
  }
  
  /* COMENTARIOS INDIVIDUALES */
  .comment,
  .comment-item,
  .single-comment {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
    border-left: 4px solid #1DB584 !important;
    border-radius: 8px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  }
  
  .comment:hover,
  .comment-item:hover {
    background: #f8fafc !important;
    border-left-color: #00D084 !important;
    transform: translateX(2px) !important;
  }
  
  /* AUTOR DEL COMENTARIO - NEGRO VISIBLE (SELECTOR CORRECTO) */
  .comment-meta strong {
    color: #1a1a1a !important;
    font-weight: 700 !important;
    font-size: 15px !important;
  }
  
  /* CONTENIDO DEL COMENTARIO */
  .comment-content,
  .comment-text,
  .comment-body {
    color: #1a1a1a !important;
    font-weight: 500 !important;
    margin: 8px 0 !important;
  }
  
  /* FECHA Y HORA DEL COMENTARIO */
  .comment-date,
  .comment-time,
  .comment-meta {
    color: #16a34a !important;
    font-weight: 600 !important;
    font-size: 12px !important;
  }
  
  /* IMAGEN DE PERFIL EN COMENTARIOS */
  .comment img,
  .comment .profile-img,
  .comment .avatar {
    border: 2px solid #1DB584 !important;
    border-radius: 50% !important;
  }
  
  /* FORMULARIO PARA ESCRIBIR COMENTARIOS */
  .comment-form,
  .comment-input-container,
  .add-comment,
  .write-comment {
    background: #ffffff !important;
    border: 2px solid #1DB584 !important;
    border-radius: 12px !important;
    padding: 16px !important;
  }
  
  /* TEXTAREA DE COMENTARIOS */
  .comment-form textarea,
  .comment-input,
  .comment-textarea {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
  }
  
  .comment-form textarea:focus,
  .comment-input:focus {
    border-color: #1DB584 !important;
    box-shadow: 0 0 0 3px rgba(29, 181, 132, 0.2) !important;
  }
  
  /* ADMIN PANEL - MODAL NEGRO */
  .admin-modal,
  .admin-overlay,
  .management-modal,
  .admin-popup {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .modal-overlay,
  .modal-content,
  .admin-modal .modal-content,
  .admin-popup .content {
    background: #ffffff !important;
    color: #1a1a1a !important;
  }

  .modal-content {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #d1d5db !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  }

  .modal-header {
    background: #f8f9fa !important;
    border-bottom: 1px solid #e5e7eb !important;
  }

  .modal-header h3 {
    color: #1a1a1a !important;
  }
  
  .admin-modal h2,
  .admin-modal h3,
  .management-modal h2,
  .management-modal h3 {
    color: #1a1a1a !important;
  }
  
  .admin-modal p,
  .admin-modal span,
  .management-modal p,
  .management-modal span {
    color: #374151 !important;
  }
  
  /* OPCIONES EN ADMIN - NOMBRES Y CORREOS */
  .admin-option,
  .user-option,
  .admin-item {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .admin-option .name,
  .admin-option .email,
  .user-option .name,
  .user-option .email {
    color: #1a1a1a !important;
  }
  
  .admin-option .description,
  .user-option .description {
    color: #6b7280 !important;
  }

  /* ===== LOGIN.PHP - SEPARADOR CON FONDO GRIS ===== */
  
  /* SEPARADOR "O ingresa con tus credenciales" */
  .separator,
  .login-separator,
  .divider {
    background: transparent !important;
    color: #6b7280 !important;
    border: none !important;
    box-shadow: none !important;
  }
  
  .separator span,
  .login-separator span,
  .divider span {
    background: #ffffff !important;
    color: #6b7280 !important;
    padding: 8px 16px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
  }
  
  /* REMOVER RECTÁNGULOS FEOS DETRÁS */
  .separator::before,
  .separator::after,
  .login-separator::before,
  .login-separator::after {
    background: #e5e7eb !important;
    height: 1px !important;
  }

  /* ===== MURO.PHP - CARDS ESPECÍFICAS IDENTIFICADAS ===== */
  
  /* CARD DE BIENVENIDA */
  .welcome-header {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
    padding: 24px !important;
    border-radius: 16px !important;
  }
  
  .welcome-header h2 {
    color: #1a1a1a !important;
  }
  
  .welcome-header p {
    color: #374151 !important;
  }
  
  /* CARD DE FILTROS DE CONTENIDO */
  .content-filters {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .filter-header {
    color: #1a1a1a !important;
    background: #ffffff !important;
  }
  
  /* BOTONES DE SUBIR ARCHIVOS - CAMBIAR A VERDE */
  .file-upload-btn,
  .file-uploads label,
  .upload-button {
    background: linear-gradient(135deg, #1DB584, #00D084) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
  }
  
  .file-upload-btn:hover,
  .file-uploads label:hover,
  .upload-button:hover {
    background: linear-gradient(135deg, #16a075, #00D084) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(29, 181, 132, 0.3) !important;
  }
  
  .file-upload-btn span,
  .file-uploads label span {
    color: #ffffff !important;
  }

  /* ===== MODAL ADMIN CON TABLAS - FONDO NEGRO ===== */
  
  /* MODAL Y OVERLAY COMPLETO */
  .modal,
  .admin-modal,
  .management-modal,
  .user-modal,
  .modal-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
  }
  
  /* CONTENIDO DEL MODAL */
  .modal-content,
  .modal-dialog,
  .modal-body,
  .admin-modal-content,
  .management-modal-content {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
  }
  
  /* HEADER DEL MODAL */
  .modal-header,
  .admin-modal-header {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border-bottom: 1px solid #e5e7eb !important;
  }
  
  .modal-title,
  .admin-modal-title {
    color: #1a1a1a !important;
    font-weight: 700 !important;
  }
  
  /* TABLAS EN EL MODAL */
  .modal table,
  .admin-modal table,
  .management-table,
  .user-table {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .modal table th,
  .admin-modal table th,
  .management-table th,
  .user-table th {
    background: #f8f9fa !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #e5e7eb !important;
  }
  
  .modal table td,
  .admin-modal table td,
  .management-table td,
  .user-table td {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border-bottom: 1px solid #e5e7eb !important;
  }
  
  /* FILAS ALTERNAS EN TABLAS */
  .modal table tr:nth-child(even),
  .admin-modal table tr:nth-child(even) {
    background: #f8f9fa !important;
  }
  
  /* ELEMENTOS DE LISTA EN MODAL */
  .modal .list-item,
  .modal .option-item,
  .admin-modal .list-item,
  .admin-modal .option-item {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
  }
  
  .modal .list-item:hover,
  .admin-modal .list-item:hover {
    background: #f3f4f6 !important;
  }
  
  /* TEXTO ESPECÍFICO EN MODAL */
  .modal p,
  .modal span,
  .modal div,
  .admin-modal p,
  .admin-modal span,
  .admin-modal div {
    color: #374151 !important;
  }
  
  /* NOMBRES Y CORREOS ESPECÍFICOS */
  .modal .name,
  .modal .email,
  .modal .username,
  .admin-modal .name,
  .admin-modal .email,
  .admin-modal .username {
    color: #1a1a1a !important;
    font-weight: 600 !important;
  }
  
  /* DESCRIPCIONES Y METADATA */
  .modal .description,
  .modal .meta,
  .modal .secondary-text,
  .admin-modal .description,
  .admin-modal .meta,
  .admin-modal .secondary-text {
    color: #6b7280 !important;
  }
}

/* ==========================================
   MANTENER BOTONES VERDES EN AMBOS TEMAS
   ========================================== */

/* Botones principales siempre verdes */
.btn-primary,
.button-primary,
.submit-btn,
.action-btn,
.green-btn,
button[type="submit"],
input[type="submit"] {
  background: linear-gradient(135deg, #1DB584, #00D084) !important;
  color: #ffffff !important;
  border: none !important;
}

.btn-primary:hover,
.button-primary:hover,
.submit-btn:hover,
.action-btn:hover,
.green-btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: #16a075 !important;
  transform: translateY(-1px);
}

/* Enlaces y elementos de marca verdes */
.brand-link,
.primary-link,
a.primary {
  color: #1DB584 !important;
}

.brand-link:hover,
.primary-link:hover,
a.primary:hover {
  color: #16a075 !important;
}

/* Elementos de progreso y estados verdes */
.progress-bar,
.success-indicator,
.online-status {
  background: #1DB584 !important;
}

/* Badges y etiquetas verdes */
.badge-success,
.tag-success,
.status-active {
  background: #1DB584 !important;
  color: #ffffff !important;
}

/* Topbar */
.topbar {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-primary);
}

.topbar .logo-section span {
  color: var(--text-primary);
}

.topbar .nav-links a {
  color: var(--text-secondary);
}

.topbar .nav-links a:hover {
  color: var(--brand-primary);
}

.topbar .user-section span {
  color: var(--text-primary);
}

/* Cards y contenedores */
.card, .post-card, .role-card, .note-card, .member-card, .activity-card {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-sm);
}

.card:hover, .post-card:hover, .note-card:hover, .member-card:hover, .activity-card:hover {
  background: var(--bg-card-hover);
  box-shadow: var(--shadow-md);
}

/* Inputs y formularios */
input, textarea, select {
  background: var(--bg-input);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
}

input:focus, textarea:focus, select:focus {
  background: var(--bg-input-focus);
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(29, 181, 132, 0.1);
}

input::placeholder, textarea::placeholder {
  color: var(--text-muted);
}

/* Botones */
.btn-primary {
  background: var(--gradient-primary);
  color: #ffffff;
  border: none;
}

.btn-primary:hover {
  background: var(--brand-hover);
}

.btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
}

.btn-secondary:hover {
  background: var(--bg-tertiary);
}

/* Modales */
.modal {
  background: var(--overlay);
}

.modal-content {
  background: var(--bg-modal);
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-xl);
}

.modal-title {
  color: var(--text-primary);
}

.modal-close {
  color: var(--text-muted);
}

.modal-close:hover {
  color: var(--text-primary);
}

/* Estados de mensaje */
.message.success {
  background: var(--success-bg);
  color: var(--success);
  border-left: 4px solid var(--success);
}

.message.error {
  background: var(--error-bg);
  color: var(--error);
  border-left: 4px solid var(--error);
}

.message.warning {
  background: var(--warning-bg);
  color: var(--warning);
  border-left: 4px solid var(--warning);
}

.message.info {
  background: var(--info-bg);
  color: var(--info);
  border-left: 4px solid var(--info);
}

/* Texto y tipografía */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
}

p {
  color: var(--text-secondary);
}

.text-muted {
  color: var(--text-muted);
}

/* Enlaces */
a {
  color: var(--brand-primary);
}

a:hover {
  color: var(--brand-hover);
}

/* Scrollbars (webkit) */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-secondary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ==========================================
   SELECTOR DE TEMA
   ========================================== */

.theme-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 20px;
}

.theme-toggle {
  position: relative;
  width: 60px;
  height: 30px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.theme-toggle:hover {
  background: var(--bg-card-hover);
}

.theme-toggle::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: var(--brand-primary);
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
}

[data-theme="light"] .theme-toggle::before {
  transform: translateX(28px);
}

.theme-icon {
  font-size: 14px;
  color: var(--text-muted);
  transition: color 0.3s ease;
}

.theme-icon.active {
  color: var(--brand-primary);
}

/* ==========================================
   ANIMACIONES Y TRANSICIONES
   ========================================== */

* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Efecto de carga suave al cambiar tema */
body.theme-transitioning {
  transition: all 0.3s ease;
}

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */

@media (max-width: 768px) {
  .theme-selector {
    margin-right: 10px;
  }
  
  .theme-toggle {
    width: 50px;
    height: 25px;
  }
  
  .theme-toggle::before {
    width: 20px;
    height: 20px;
  }
  
  [data-theme="light"] .theme-toggle::before {
    transform: translateX(23px);
  }
}