/* ==================== DARK MODE - OVERRIDES GLOBALES ==================== */

/* IMPORTANTE: Todos los estilos aquí SOLO se aplican cuando .dark existe en <html> */

/* ==================== BODY Y CONTENEDOR PRINCIPAL ==================== */

.dark body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.dark .app-container {
  background-color: var(--bg-primary) !important;
}

/* ==================== HEADER ==================== */

.dark .header {
  border-bottom: 1px solid #3d3d3d; /* Misma línea que el sidebar */
}

/* En desktop: la línea se interrumpe donde está el sidebar (64px desde la izquierda) */
@media (min-width: 768px) {
  .dark .header::after {
    content: '';
    position: absolute;
    left: 64px;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: #3d3d3d;
  }
  
  /* Remover el border-bottom original en desktop para usar el ::after */
  .dark .header {
    border-bottom: none;
  }
}

/* ==================== PÁGINA PRINCIPAL ==================== */

.dark .page-container {
  background-color: var(--bg-primary) !important;
}

.dark .main-content {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* Contenedor de contenido */
.dark .content-wrapper {
  color: var(--text-primary) !important;
}

.dark .content-wrapper h1,
.dark .content-wrapper h2,
.dark .content-wrapper h3,
.dark .content-wrapper p {
  color: var(--text-primary) !important;
}

/* ==================== CARDS Y CONTENEDORES ==================== */

.dark .module-card,
.dark .card {
  background-color: var(--card-background);
  border-color: var(--card-border);
}

.dark .module-header,
.dark .card-header {
  background-color: var(--card-background);
  border-color: var(--card-border);
}

.dark .card-body,
.dark .card-content {
  background-color: var(--card-background);
  color: var(--text-primary);
}

/* ==================== TEXTOS ==================== */

.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
  color: var(--text-primary);
}

/* REMOVIDO: Estilos demasiado agresivos que afectaban sidebar y tooltips */
/* .dark p, .dark span, .dark div { color: inherit; } */

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

/* ==================== NOTIFICACIONES ==================== */

.dark .notification-panel,
.dark .notifications-panel {
  background-color: var(--card-background);
  border-color: var(--card-border);
}

/* Cabecera del modal de notificaciones */
.dark .notifications-header {
  background-color: var(--bg-secondary) !important; /* #242424 */
  border-bottom-color: var(--border-primary) !important; /* #3d3d3d */
}

.dark .notifications-header h2 {
  color: var(--text-primary) !important; /* #f4f4f4 */
}

/* Botón cerrar (X) */
.dark .close-notifications-btn {
  color: var(--text-secondary) !important; /* #c6c6c6 */
}

.dark .close-notifications-btn:hover {
  background-color: var(--bg-hover) !important; /* #333333 */
  color: var(--text-primary) !important; /* #f4f4f4 */
}

/* Sección de acciones rápidas (Marcar todas / Eliminar todas) */
.dark .notifications-actions {
  background-color: var(--bg-tertiary) !important; /* #2a2a2a */
  border-bottom-color: var(--border-primary) !important; /* #3d3d3d */
}

/* Botones de acción */
.dark .action-btn {
  background-color: var(--bg-secondary) !important; /* #242424 */
  border-color: var(--border-secondary) !important; /* #4a4a4a */
  color: var(--text-primary) !important; /* #f4f4f4 */
}

.dark .action-btn:hover {
  background-color: var(--bg-hover) !important; /* #333333 */
  border-color: var(--btn-success-bg) !important; /* #0ABF5B */
}

.dark .action-btn.destructive {
  color: var(--btn-danger-bg) !important; /* #FF6B6B */
}

.dark .action-btn.destructive:hover {
  background-color: rgba(255, 107, 107, 0.1) !important;
  border-color: var(--btn-danger-bg) !important; /* #FF6B6B */
}

.dark .action-btn svg path {
  fill: currentColor !important;
}

/* Items de notificación */
.dark .notification-item {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
}

.dark .notification-item:hover {
  background-color: var(--bg-hover);
}

.dark .notification-title {
  color: var(--text-primary) !important; /* #f4f4f4 - Blanco brillante */
}

.dark .notification-description,
.dark .notification-message {
  color: var(--text-secondary) !important; /* #c6c6c6 - Gris claro visible */
}

.dark .notification-time {
  color: var(--text-secondary) !important; /* #c6c6c6 - Más visible que text-muted */
}

/* ==================== BÚSQUEDA ==================== */

.dark .search-container {
  background-color: var(--card-background);
  border-color: var(--card-border);
}

.dark .search-input {
  background-color: var(--input-bg);
  color: var(--input-text);
  border-color: var(--input-border);
}

.dark .search-input::placeholder {
  color: var(--text-muted);
}

/* ==================== BREADCRUMBS ==================== */

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

.dark .breadcrumb a {
  color: var(--text-secondary);
}

.dark .breadcrumb a:hover {
  color: var(--text-primary);
}

/* ==================== SEPARADORES ==================== */

.dark hr {
  border-color: var(--border-primary);
}

/* ==================== SCROLLBARS (WebKit) ==================== */

.dark *::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.dark *::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
}

.dark *::-webkit-scrollbar-thumb {
  background: var(--border-secondary);
  border-radius: 6px;
}

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

/* ==================== FOCUS STATES ==================== */

.dark *:focus {
  outline-color: var(--btn-success-bg);
}

.dark *:focus-visible {
  outline: 2px solid var(--btn-success-bg);
  outline-offset: 2px;
}